/* 홈 첫 화면 [ec_hero_night] — 3D 인트로 마지막 장면과 같은 배치 · 색 · 글꼴 (값은 인트로 문서의 :root · .intro · .copy 와 같게 맞춤)
   잉크 #101110 · 돌빛 #E9E7DF · 라임 #DCFF7D · 녹음 빨강 #FF5D4F · Gothic A1 */
.ehn{--ink:#101110;--paper:#e9e7df;--accent:#dcff7d;--soft:#cfd3c7;--ease:cubic-bezier(.16,1,.3,1);
  position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:720px;height:100svh;max-height:1100px;
  margin-top:calc(-1 * var(--ehn-h,78px));color:var(--paper);color-scheme:dark;
  font-family:'Gothic A1','Apple SD Gothic Neo','Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all;
  background:radial-gradient(ellipse at 76% 49%,#30332b 0,#171a16 31%,var(--ink) 65%)}
.ehn:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.05;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.ehn *{box-sizing:border-box}
.ehn a{text-decoration:none}
.ehn a:focus-visible,.ehn button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* 실시간 3D 장면(hero-live.js) — 인트로의 #stage 와 같이 첫 화면 전체를 덮고, 기기는 장면 안에서 오른쪽(PC) · 위(휴대폰)에 놓인다.
   첫 장면을 그리면 .is-live — 캔버스가 나타나고 아래 캡처 그림판(.ehn-media)은 숨는다 */
.ehn-stage{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;display:block;opacity:0;transition:opacity .6s var(--ease);touch-action:pan-y;cursor:grab;outline:none}
.ehn-stage.dragging{cursor:grabbing}
.ehn-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-8px}
.ehn.is-live .ehn-stage{opacity:1}
.ehn.is-live .ehn-media{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
/* 기기를 감싸는 모서리 표시 — 기기가 바뀔 때마다 새 크기에 맞춰 다시 잡힌다 (인트로 .focus) */
.ehn-lock{position:absolute;z-index:2;pointer-events:none;opacity:0;--c:linear-gradient(var(--accent),var(--accent));
  background:var(--c) top left/20px 1px no-repeat,var(--c) top left/1px 20px no-repeat,var(--c) top right/20px 1px no-repeat,var(--c) top right/1px 20px no-repeat,
    var(--c) bottom left/20px 1px no-repeat,var(--c) bottom left/1px 20px no-repeat,var(--c) bottom right/20px 1px no-repeat,var(--c) bottom right/1px 20px no-repeat}
.ehn.is-live .ehn-lock.lock{opacity:.3;animation:ehn-lock 1.15s var(--ease) both}
@keyframes ehn-lock{0%{opacity:0;transform:scale(1.16)}48%{opacity:.95;transform:scale(1)}60%{opacity:.15}72%{opacity:.95}100%{opacity:.3;transform:scale(1)}}
.ehn-note.swap b,.ehn-note.swap .ehn-read{animation:ehn-swap .6s var(--ease)}
@keyframes ehn-swap{from{opacity:0;transform:translateY(8px);filter:blur(6px)}}
.ehn-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* 모니터 — 2880×1800 캡처의 (1500,400)~(2820,1480) 자리 = 왼쪽 52.08% · 위 22.22% · 폭 45.83% */
.ehn-media{position:absolute;z-index:1;left:52.08%;top:22.22%;width:45.83%;margin:0;aspect-ratio:1320/1080}
.ehn-media img{display:block;width:100%;height:auto;transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.ehn-phone{position:absolute;left:22%;top:-1%;width:50%!important;opacity:0;transform:rotateY(-30deg) scale(.92);filter:blur(6px);pointer-events:none}
.ehn-media .ehn-pcm{display:none}
/* 전환 단추를 누른 상태(is-alt) — PC 는 PC → 휴대폰 그림, 휴대폰(≤600)은 휴대폰 → PC 그림 */
.ehn-media.is-alt .ehn-pc img{opacity:0;transform:scale(.94);filter:blur(6px)}
.ehn-media.is-alt .ehn-phone{opacity:1;transform:none;filter:none}
.ehn-focus{position:absolute;left:7.1%;right:5.2%;top:4.1%;bottom:3.3%;opacity:.3;pointer-events:none;
  --c:linear-gradient(var(--accent),var(--accent));
  background:var(--c) top left/20px 1px no-repeat,var(--c) top left/1px 20px no-repeat,var(--c) top right/20px 1px no-repeat,var(--c) top right/1px 20px no-repeat,
    var(--c) bottom left/20px 1px no-repeat,var(--c) bottom left/1px 20px no-repeat,var(--c) bottom right/20px 1px no-repeat,var(--c) bottom right/1px 20px no-repeat}
.ehn-media.is-alt .ehn-focus{left:24%;right:22%}

.ehn-note{position:absolute;z-index:3;right:7%;top:15.6%;text-align:right;line-height:normal}   /* 인트로 끝 장면 실측 y142(1440×900)에 맞춤 — 검수 1차 #7 */
.ehn-note b{display:block;font-weight:500;font-size:15px;letter-spacing:-.01em;color:#d6dec9;margin-bottom:8px}
.ehn-read{display:inline-flex;align-items:center;gap:9px;font:11px 'IBM Plex Mono',ui-monospace,Consolas,monospace;color:#b3b7aa;font-variant-numeric:tabular-nums}
.ehn-rec{width:7px;height:7px;border-radius:50%;background:#ff5d4f;animation:ehn-blink 1.1s steps(1) infinite}
@keyframes ehn-blink{50%{opacity:.15}}

/* 글 — 인트로 .copy 와 같은 자리 */
.ehn-copy{position:absolute;z-index:3;left:6.5%;top:27%;width:43%;max-width:590px}
.ehn-eyebrow{margin:0;line-height:normal;font-size:15px;font-weight:500;letter-spacing:.04em;color:#c9cdbf;display:flex;align-items:center;gap:14px}
.ehn-eyebrow:before{content:'';height:1px;width:29px;background:var(--accent)}
.ehn-title{font-weight:200;font-size:clamp(46px,5.6vw,88px);letter-spacing:-.065em;line-height:1.15;margin:26px 0;color:var(--paper)}
.ehn-title span{display:block;white-space:nowrap}
.ehn-title span+span{padding-left:1.1em;font-weight:700}
.ehn-dot{font-style:normal;color:var(--accent)}
.ehn-sub{font-size:15px;font-weight:400;line-height:1.9;color:var(--soft);margin:0}
.ehn-actions{display:flex;align-items:center;gap:26px;margin-top:36px}
.ehn-primary{display:inline-flex;align-items:center;gap:18px;white-space:nowrap;border-radius:999px;background:var(--paper);color:var(--ink)!important;padding:8px 8px 8px 24px;font-size:13px;font-weight:500;transition:background .35s var(--ease)}
.ehn-primary span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .5s var(--ease)}
.ehn-primary:hover{background:var(--accent)}
.ehn-primary:hover span{transform:rotate(135deg)}
.ehn-replay{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;color:#c2c7ba!important;padding:6px 0;font-size:13px;transition:color .3s}
.ehn-replay i{display:grid;place-items:center;width:32px;height:32px;border:1px solid #575d50;border-radius:50%;transition:border-color .3s,color .3s,transform .6s var(--ease)}
.ehn-replay:hover{color:var(--paper)!important}
.ehn-replay:hover i{border-color:var(--accent);color:var(--accent);transform:rotate(-180deg)}

/* 인트로에 없던 영업 줄 — 전환이 끝난 뒤 살며시 */
.ehn-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:30px 0 0;font-size:13px;animation:ehn-in .9s var(--ease) .9s both}
.ehn-more a{color:#c9cdbf!important;border-bottom:1px solid #4a4f44;padding:4px 0;transition:color .3s,border-color .3s}
.ehn-more a:hover{color:var(--paper)!important;border-color:var(--accent)}
/* 데모 단추는 테두리형 — 인트로의 주인공 단추(«이지클래스 살펴보기»)보다 앞서 보이지 않게 (검수 1차 #8) */
.ehn-more .ehn-demo{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--paper)!important;font-weight:600}
.ehn-more .ehn-demo:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)!important}
@keyframes ehn-in{from{opacity:0;transform:translateY(10px)}}

.ehn-flip{position:absolute;z-index:3;bottom:11%;right:7%;height:56px;width:56px;padding:0;border-radius:50%;background:transparent;border:1px solid #606752;cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease),border-color .3s}
.ehn-flip span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .9s var(--ease),background .3s}
.ehn-flip:hover{transform:scale(1.08);border-color:var(--accent)}
.ehn-flip:hover span{background:var(--accent)}
.ehn-flip.turn span{transform:rotate(180deg)}
.ehn-anchor{display:block;position:relative;top:-90px;height:0}

/* 머리글 — 첫 화면 위에서는 투명 · 돌빛 글자, 첫 화면을 지나면 원래대로 (ehn-past 는 hero.js 가 붙임) */
.page-ec-home:not(.ehn-past) .enh .enh-in{background:transparent;box-shadow:none}
.page-ec-home:not(.ehn-past) header.enh,.page-ec-home:not(.ehn-past) header.enh .enh-bar{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
.page-ec-home:not(.ehn-past) .enh-in{color:#e9e7df}
.page-ec-home:not(.ehn-past) .enh-menu > li > .enh-link,.page-ec-home:not(.ehn-past) .enh-in > .enh-logo-wrap a,.page-ec-home:not(.ehn-past) .enh-actions > :is(a,button,label):not(.enh-cta){color:#e9e7df}
/* Header menu: light pills use the existing panel ink; preserve dark hero links at rest. */
.page-ec-home:not(.ehn-past) .enh-menu > li:is(:hover,:focus-within,.is-open) > .enh-link,
.page-ec-home:not(.ehn-past) .enh-menu > li > .enh-link:focus-visible{background:var(--enh-tint);color:var(--enh-ink)}
.page-ec-home:not(.ehn-past) .enh-actions > .enh-icon:is(:hover,:focus-visible){background:var(--enh-tint);color:var(--enh-ink)}
/* Small menu copy needs the same 4.5:1 target on card and hover surfaces. */
.page-ec-home .enh :is(.enh-drop,.enh-sheet){--ec-menu-muted:var(--enh-ink)}
.page-ec-home .enh :is(.enh-drop,.enh-sheet) :is(.enh-gm-txt small,.enh-label,.enh-gm-foot a,.enh-mx-all){color:var(--ec-menu-muted)}
.page-ec-home .enh :is(.enh-gm-item,.enh-gm-foot a,.enh-mx-all):focus-visible{outline:2px solid var(--enh-ink);outline-offset:3px}
.page-ec-home:not(.ehn-past) .enh-burger{background:rgba(233,231,223,.12)!important;color:#e9e7df!important}
.page-ec-home:not(.ehn-past) .enh-logo img{filter:brightness(0) invert(.92)}
.page-ec-home:not(.ehn-past) .enh-logo-tag{background:rgba(233,231,223,.1);color:#e9e7df}
.page-ec-home .enh .enh-in{transition:background .35s,box-shadow .35s}
/* 첫 화면 안에서 내렸을 때 — 머리글이 제목 위에 비치지 않게 어두운 반투명 캡슐 (검수 1차 #1 · 알파 .88 = 반영확인 A). 첫 화면을 지나면(ehn-past) 밝은 캡슐 규칙 그대로 */
.page-ec-home:not(.ehn-past) .enh.is-scrolled .enh-in{background:rgba(16,17,16,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* 인트로(overflow:hidden) → 홈(스크롤바)으로 넘어갈 때 오른쪽이 밀리지 않게 스크롤바 자리를 늘 비워 둔다 (검수 1차 #6) */
html:has(body.page-ec-home){scrollbar-gutter:stable}
html.en-intro-on:has(body.page-ec-home){background:#101110}

/* 인트로 → 홈 화면 전환: 같은 그림이라 겹쳐 사라지고, 머리글만 늦게 나타난다 */
@media (prefers-reduced-motion:no-preference){
  .page-ec-home header[data-enh]{view-transition-name:ehn-head}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
  ::view-transition-new(ehn-head){animation:ehn-in .7s cubic-bezier(.16,1,.3,1) .35s both}
  ::view-transition-old(ehn-head){animation:none;opacity:0}
}

@media(min-width:1600px){.ehn-copy{left:9%;top:29%}}
@media(max-width:900px){
  .ehn{min-height:740px}
  .ehn-copy{top:23%;left:5%;width:46%}
  .ehn-title{font-size:clamp(40px,6vw,54px)}
  .ehn-title span+span{padding-left:.7em}
  .ehn-note{right:5%;top:18%}
  .ehn-flip{bottom:13%;right:5%}
}
/* 휴대폰 — 인트로 휴대폰 마지막 장면(/intro?embed=1 의 max-width:600px)과 같은 자리 (검수 1차 #2)
   인트로 판 높이 = max(720px, 화면 높이) · 글 묶음 top 55% · 전환 단추 top 47% right 7% 44×44 · 강의실 표시 오른쪽 위 */
@media(max-width:600px){
  .ehn{--ehn-vh:max(720px,100svh);min-height:var(--ehn-vh);height:auto;max-height:none;padding-bottom:40px;background:radial-gradient(ellipse at 55% 32%,#30332b,var(--ink) 65%)}
  .ehn-stage{height:var(--ehn-vh)}   /* 인트로 휴대폰 판 높이와 같게 — 글 묶음은 그 55% 아래 */
  .ehn-media{position:absolute;left:26%;top:calc(var(--ehn-h,78px) + 18px);width:48%;margin:0;aspect-ratio:660/1040}
  .ehn-media .ehn-phone,.ehn-focus{display:none}   /* .ehn-media img{display:block} 보다 세게 — 전환 뒤 PC 그림 위에 작은 휴대폰 그림이 남던 것 (반영확인 C) */
  .ehn-media .ehn-pcm{display:block;position:absolute;left:-46%;top:50%;width:192%!important;max-width:none;height:auto;opacity:0;transform:translateY(-50%) scale(.94);filter:blur(6px);pointer-events:none}
  .ehn-media.is-alt .ehn-pcm[srcset]{opacity:1;transform:translateY(-50%);filter:none}
  .ehn-note{top:calc(var(--ehn-h,78px) + 2px);right:6%}
  .ehn-note b{font-size:12px;margin-bottom:5px}
  .ehn-read{font-size:9px}
  .ehn-flip{top:calc(var(--ehn-vh) * .47);bottom:auto;right:7%;width:44px;height:44px}
  .ehn-flip span{width:29px;height:29px}
  .ehn-copy{position:relative;left:auto;top:auto;width:86%;margin:calc(var(--ehn-vh) * .55) auto 0}
  .ehn-eyebrow{font-size:13px}
  .ehn-title{font-size:clamp(36px,10.5vw,56px);line-height:1.1;margin:16px 0}
  .ehn-title span+span{padding-left:1.1em}
  .ehn-sub{font-size:13px;line-height:1.8}
  .ehn-actions{margin-top:22px;gap:12px 14px;flex-wrap:wrap}
  .ehn-primary{padding:6px 6px 6px 18px;font-size:12px;gap:12px}
  .ehn-primary span{width:34px;height:34px}
  .ehn-replay{font-size:12px;min-height:44px}
  /* 영업 줄 — 데모 단추는 바로 아래 구역 · 하단 탭이 같은 일을 하므로 숨기고 링크 3개만, 터치 높이 44px (검수 1차 #10 · #11) */
  .ehn-more{margin-top:14px;gap:0 18px}
  .ehn-more .ehn-demo{display:none}
  .ehn-more a{display:inline-flex;align-items:center;min-height:44px;padding:0;border-bottom:0;text-decoration:underline;text-decoration-color:#4a4f44;text-underline-offset:6px}
  .ehn-more a:hover{text-decoration-color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){.ehn *,.ehn *:before{animation:none!important;transition:none!important}}

/* Match the site header font across the main hero, including controls. */
.page-ec-home .ehn,.page-ec-home .ehn *{font-family:var(--en-font,'Gothic A1','Malgun Gothic',sans-serif)}