/* 첫 화면 다듬기 시안 (2026-10-14).
   now = 지금 화면 그대로. a~e는 같은 재료(로고·메뉴·CRIT·맥북 연출·두 버튼·시연 조작)를 쓰고
   생김새와 배치만 바꾼다. 3D 맥북·글자 물결 코드는 공개 소스를 그대로 쓴다. */
@font-face{font-family:'Pretendard Study';src:url('/study/assets/PretendardVariable.woff2') format('woff2-variations');font-weight:45 920;font-display:swap}

body[data-hero]:not([data-hero=now]){--sans:'Pretendard Study',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;font-family:var(--sans);font-feature-settings:'ss06'}
body[data-hero]:not([data-hero=now]) button{font-family:inherit}

/* ───────── A. 덜어내기 ─────────
   구조는 그대로. 격자·영문 꼬리말을 걷고, 글자 물결은 한 톤 낮춰 맥북을 앞에 세운다.
   버튼은 둥글고 낮게, 아래 줄은 한 줄로 모은다. */
body[data-hero=a] .grid,body[data-hero=a] .stage-note{display:none}
body[data-site=public][data-hero=a] .site-header{background:#0c0d0fd9;border-bottom-color:transparent;backdrop-filter:blur(14px)}
body[data-site=public][data-hero=a] .site-nav .start-link{background:#1c2218;color:var(--brand)}
body[data-hero=a] .wordmark-fluid{filter:saturate(.8) brightness(.78)}
body[data-hero=a] .wordmark-stroke{opacity:calc(var(--wordmark-line,.92)*.5)}
body[data-site=public][data-variant=reframe][data-hero=a] .device-mount{inset:calc(var(--brand-space)*.62) 0 0}
body[data-hero=a] .visual-stage::after{content:'';position:absolute;z-index:0;left:50%;bottom:-2%;width:min(760px,62vw);height:120px;transform:translateX(-50%);background:radial-gradient(closest-side,#a7d85d1f,#a7d85d08 55%,transparent);pointer-events:none}
body[data-site=public][data-hero=a] .hero-actions{gap:10px;margin-top:2px}
body[data-site=public][data-hero=a] .hero-actions .hero-action{min-width:0;min-height:46px;padding:0 22px 0 24px;gap:12px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.01em}
body[data-site=public][data-hero=a] .hero-learn{background:transparent;color:#e6e9e4;box-shadow:inset 0 0 0 1px #ffffff26}
body[data-site=public][data-hero=a] .hero-learn:hover{background:#ffffff0d;transform:none}
body[data-site=public][data-hero=a] .hero-action svg{width:15px;height:15px}
body[data-site=public][data-hero=a] .hero-footer{min-height:36px;margin-top:6px;padding-top:4px}
body[data-site=public][data-hero=a] .hero-footer>p{font-size:12px;color:#7f877c}
body[data-site=public][data-hero=a] .demo-controls button{font-size:11px;color:#7f877c;min-height:36px}

/* ───────── B. 한 문장 ─────────
   지금 첫 화면에는 크릿이 무엇인지 말해 주는 문장이 없다. 맥북 아래 긴 띠에
   왼쪽은 한 문장, 오른쪽은 두 버튼을 둔다. 시연 조작은 맥북 오른쪽 아래로 옮긴다. */
body[data-hero=b] .grid,body[data-hero=b] .stage-note,body[data-hero=b] .hero-heading .eyebrow{display:none}
body[data-site=public][data-hero=b] .site-header{background:#0c0d0fd9;border-bottom-color:transparent;backdrop-filter:blur(14px)}
body[data-site=public][data-hero=b] .site-nav .start-link{background:#1c2218;color:var(--brand)}
body[data-hero=b] .wordmark-fluid{filter:saturate(.85) brightness(.85)}
body[data-hero=b] .wordmark-stroke{opacity:calc(var(--wordmark-line,.92)*.6)}
body[data-site=public][data-variant=reframe][data-hero=b] .device-mount{inset:calc(var(--brand-space)*.7) 0 0}
body[data-hero=b] .hero-band{flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;width:100%;max-width:1820px;margin:4px auto 0;padding:18px var(--gutter) 6px;border-top:1px solid #ffffff0f;position:relative;z-index:4}
body[data-site=public][data-variant=reframe][data-hero=b] .hero-band .hero-heading{display:block;text-align:left;padding:0;z-index:auto}
body[data-hero=b] .hero-band h1{font-size:clamp(30px,2.9vw,46px);font-weight:620;letter-spacing:-.045em;line-height:1.18;color:#f4f6f1}
body[data-hero=b] .hero-band h1 em{color:var(--brand)}
body[data-hero=b] .hero-band .hero-heading>p:last-child{font-size:15px;color:#8f978c;letter-spacing:-.02em;margin-top:10px}
body[data-site=public][data-hero=b] .hero-band .hero-actions{margin:0;flex-shrink:0;gap:10px;max-width:none}
body[data-site=public][data-hero=b] .hero-actions .hero-action{min-width:0;min-height:50px;padding:0 22px 0 24px;gap:14px;border-radius:999px;font-size:14px;font-weight:600}
body[data-site=public][data-hero=b] .hero-learn{background:transparent;color:#e6e9e4;box-shadow:inset 0 0 0 1px #ffffff26}
body[data-site=public][data-hero=b] .hero-learn:hover{background:#ffffff0d;transform:none}
body[data-site=public][data-hero=b] .hero-footer{display:none}
body[data-hero=b] .stage-controls{position:absolute;z-index:4;right:var(--gutter);bottom:10px;display:flex;gap:2px}
body[data-hero=b] .stage-controls button{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:transparent;color:#7f877c}
body[data-hero=b] .stage-controls button:hover{background:#ffffff0d;color:var(--brand)}
body[data-hero=b] .stage-controls svg{width:16px;height:16px}
body[data-hero=b] .stage-controls span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:800px){
  body[data-hero=b] .hero-band{flex-direction:column;align-items:center;gap:16px;margin-top:0;padding:10px 22px 4px;border-top:0}
  body[data-site=public][data-variant=reframe][data-hero=b] .hero-band .hero-heading{text-align:center}
  body[data-hero=b] .hero-band h1{font-size:30px;line-height:1.25}
  body[data-hero=b] .hero-band .hero-heading>p:last-child{font-size:13px;line-height:1.6;max-width:290px;margin:8px auto 0}
  body[data-hero=b] .stage-controls{right:10px;bottom:0}
}

/* ───────── C. 무대 조명 ─────────
   검은 무대 위에서 글자 뒤로 빛이 번지고(역광), 맥북은 바닥 빛 위에 놓인다.
   물결은 글자 안이 아니라 글자 둘레의 빛으로만 보인다. */
body[data-hero=c]{background:#070807}
body[data-site=public][data-hero=c] .site-header{background:#070807cc;border-bottom-color:transparent;backdrop-filter:blur(14px)}
body[data-site=public][data-hero=c] .site-nav .start-link{background:transparent;color:#e9eee4;box-shadow:inset 0 0 0 1px #ffffff2e}
body[data-hero=c] .grid,body[data-hero=c] .stage-note{display:none}
body[data-hero=c] .hero-page{background:radial-gradient(90% 70% at 50% -8%,#1b2216 0%,#0d100c 42%,#070807 78%)}
/* 글자 안 = 원래 물결 그대로, 색만 흑백. 밝기 폭을 좁혀 흰 결은 덜 눈부시게, 어두운 곳은 회색으로 들어 올린다(약 95~224). */
body[data-hero=c] .wordmark-fluid{filter:grayscale(1) contrast(.48) brightness(1.29)}
/* 물결이 뜨기 전(등장 중·물결 미지원)에는 검은 글자 면. */
body[data-hero=c] .wordmark[data-fluid=ready] .wordmark-body{opacity:0}
/* 글자 뒤 초록 빛: 물결을 1/4 크기로 옮겨 번지게 그린 캔버스(hero.js). 물결 캔버스 바로 아래에 깔린다. */
body[data-hero=c] .wordmark-halo{position:absolute;left:calc(50% - .9415em - .12em);top:-.12em;width:calc(1.903em + .24em);height:calc(.95em + .24em);pointer-events:none;opacity:.95}
body[data-hero=c] .wordmark-stroke{opacity:calc(var(--wordmark-line,.92)*.5)}
body[data-site=public][data-variant=reframe][data-hero=c] .device-mount{inset:calc(var(--brand-space)*.66) 0 0}
body[data-hero=c] .visual-stage::after{content:'';position:absolute;z-index:0;left:50%;bottom:-3%;width:min(900px,70vw);height:150px;transform:translateX(-50%);background:radial-gradient(closest-side,#d9f2b326,#a7d85d0d 50%,transparent);pointer-events:none}
body[data-hero=c] .visual-stage::before{content:'';position:absolute;z-index:0;left:50%;bottom:calc(6% + 0px);width:min(980px,76vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#ffffff1c 30%,#ffffff2b 50%,#ffffff1c 70%,transparent);pointer-events:none}
body[data-site=public][data-hero=c] .hero-actions{gap:8px}
body[data-site=public][data-hero=c] .hero-actions .hero-action{min-width:0;min-height:48px;padding:0 26px;gap:12px;border-radius:999px;font-size:14px;font-weight:600}
body[data-site=public][data-hero=c] .hero-learn{background:#ffffff0f;color:#eef1ea;backdrop-filter:blur(10px)}
body[data-site=public][data-hero=c] .hero-learn:hover{background:#ffffff17;transform:none}
body[data-site=public][data-hero=c] .hero-footer>p{color:#6f776c}
body[data-site=public][data-hero=c] .demo-controls button{color:#6f776c}

/* ───────── D. 큰 글자 ─────────
   CRIT을 납작하게 누르지 않고 원래 비율로 크게 세운다. 맥북은 글자 아랫부분 앞에 놓이고,
   글자 밑동은 바닥으로 스며든다. 포스터처럼 강한 첫인상. */
body[data-hero=d] .grid,body[data-hero=d] .stage-note{display:none}
body[data-site=public][data-hero=d] .site-header{background:#0c0d0fd9;border-bottom-color:transparent;backdrop-filter:blur(14px)}
body[data-site=public][data-variant=reframe][data-hero=d] .wordmark{font-size:min(48vw,calc((100svh - 259px)*1.14),1000px);transform:none;top:calc(10px - .112em);left:50%;right:auto;width:1.903em;margin-left:-.9515em}
body[data-hero=d] .wordmark-fluid{filter:saturate(1.08) brightness(1.06)}
body[data-hero=d] .wordmark-stroke{opacity:calc(var(--wordmark-line,.92)*.35)}
body[data-site=public][data-variant=reframe][data-hero=d] .device-mount{inset:25% 0 -3%}
body[data-hero=d] .visual-stage::after{content:'';position:absolute;z-index:0;inset:auto -10vw 0;height:42%;background:linear-gradient(#0c0d0f00,#0c0d0fc0 45%,#0c0d0f 88%);pointer-events:none}
body[data-site=public][data-hero=d] .hero-actions{gap:10px}
body[data-site=public][data-hero=d] .hero-actions .hero-action{min-width:0;min-height:48px;padding:0 24px;gap:12px;border-radius:999px;font-size:14px;font-weight:600}
body[data-site=public][data-hero=d] .hero-learn{background:#f2f4ef;color:#0c0d0f}
body[data-site=public][data-hero=d] .hero-learn:hover{background:#fff;transform:none}

/* ───────── E. 밝은 화면 ─────────
   첫 화면만 흰 바탕. 어두운 편집 화면이 오히려 또렷하게 보이고,
   CRIT 글자 안의 초록 물결이 흰 종이 위 잉크처럼 보인다. */
body[data-hero=e] .grid,body[data-hero=e] .stage-note{display:none}
body[data-hero=e] .hero-page{background:#f5f6f2;color:#121411}
body[data-site=public][data-hero=e] .site-header{background:#f5f6f2e6;border-bottom-color:#0000000d;backdrop-filter:blur(14px);color:#121411}
body[data-site=public][data-hero=e] .brand img{filter:invert(1)}
body[data-site=public][data-hero=e] .site-nav a{color:#4b5048}
body[data-site=public][data-hero=e] .site-nav a:hover{color:#121411}
body[data-site=public][data-hero=e] .site-nav .start-link{background:#121411;color:#f5f6f2}
body[data-hero=e] .wordmark-fluid{filter:saturate(1.05) brightness(1.1) contrast(1.05)}
body[data-hero=e] .wordmark-stroke{stroke:#121411;opacity:calc(var(--wordmark-line,.92)*.22)}
body[data-site=public][data-variant=reframe][data-hero=e] .device-mount{inset:calc(var(--brand-space)*.66) 0 0}
body[data-hero=e] .visual-stage::after{content:'';position:absolute;z-index:0;left:50%;bottom:0;width:min(640px,52vw);height:70px;transform:translateX(-50%);background:radial-gradient(closest-side,#0000002e,#00000010 55%,transparent);pointer-events:none}
body[data-site=public][data-hero=e] .hero-actions{gap:10px}
body[data-site=public][data-hero=e] .hero-actions .hero-action{min-width:0;min-height:48px;padding:0 24px;gap:12px;border-radius:999px;font-size:14px;font-weight:600}
body[data-site=public][data-hero=e] .hero-learn{background:#121411;color:#f5f6f2}
body[data-site=public][data-hero=e] .hero-learn:hover{background:#2a2e27;transform:none}
body[data-site=public][data-hero=e] .hero-footer>p{color:#6c7268}
body[data-site=public][data-hero=e] .demo-controls button{color:#6c7268}
body[data-site=public][data-hero=e] .demo-controls button:hover{background:#0000000a;color:#121411}
body[data-hero=e] .page-controls{background:#ffffffe6;border-color:#0000000f;box-shadow:0 8px 30px #0000000f}
body[data-hero=e] .page-controls button{color:#2b2f29}
body[data-hero=e] .page-controls button:hover{background:#0000000a}
body[data-hero=e] .page-controls p{color:#6c7268}
body[data-hero=e] .page-controls [data-page-count]{color:#4f7a1d}