/* ============================================================================
   Tech Conference 2026 — 공통 스타일
   ----------------------------------------------------------------------------
   시안: Figma TvoEu3Zfk15GzJTU8mxnBn · 1920 다크 · 콘텐츠 1600
   원칙
     · 시안 폭(1920)에서는 시안 값을 그대로 전사한다.
     · 콘텐츠 폭은 .inner (max-width 1640 = 1600 + 좌우 패딩 20).
     · 반응형 시작은 1660px (.inner 1640 + 스크롤바 20).
     · HTML 안에 style 속성을 한 줄도 두지 않는다(발주처 CSS 절대규칙).
   ========================================================================== */

/* 레이어 순서 하나로 "누가 이기는가" 를 고정한다. */
@layer reset, tokens, base, layout, components;

/* ═══ reset ═══════════════════════════════════════════════════════════════ */
@layer reset {
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0;}
  ul,ol{list-style:none;}
  img,svg,video{display:block;max-width:100%;}
  /* P29 — author display 규칙이 이기면 hidden 이 안 먹는다(FAQ 패널이 그대로 보인다) */
  [hidden]{display:none!important;}
  /* C8 — 한글은 어절 단위로 끊는다. 긴 URL·영문 낱말은 예외적으로 쪼갠다 */
  :where(h1,h2,h3,h4,h5,h6,p,li,a,span,strong,em,dt,dd,button,th,td,blockquote,caption){
    word-break:keep-all;overflow-wrap:break-word;}
  img{height:auto;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
  table{border-collapse:collapse;width:100%;}
  th{text-align:left;font-weight:inherit;}
  :focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0;}
}

/* ═══ tokens ══════════════════════════════════════════════════════════════ */
@layer tokens {
  :root{
    /* 색 — 시안 실측값 */
    --c-bg:#121212;
    --c-panel:#1e1e1e;
    --c-panel-2:#232323;
    --c-line:#363636;
    --c-ink:#f5f5f0;
    --c-body:#bbbbbb;
    --c-mute:#9e9e99;
    --c-dim:rgba(255,255,255,.5);
    --c-accent:#9160ff;
    --c-cyan:#23bcee;
    --grad-brand:linear-gradient(90deg,#9160ff,#23bcee);
    /* 링크용 200% 시프트: 기본은 오른쪽 절반(#9160FF→#23BCEE), hover 때 왼쪽(#23BCEE→#9160FF) */
    --grad-brand-flow:linear-gradient(90deg,#23bcee 0%,#9160ff 50%,#23bcee 100%);
    --c-glass:rgba(255,255,255,.15);
    --c-hdr:rgba(0,0,0,.2);

    /* 서체 */
    /* GmarketSans 글리프가 행간 위로 치우친다. 이 서체가 붙은 텍스트는
       하단보다 위 패딩을 3px 더 준다(패딩 0 → top 3, 20 10 → 23 10 20).
       아이콘+글자 묶음은 부모가 아니라 글자 요소에만 준다. */
    --ff-brand:'GmarketSans','Gmarket Sans','Pretendard','Noto Sans KR',system-ui,sans-serif;
    --ff-display:'Barlow Condensed','Oswald','Arial Narrow',sans-serif;
    --ff-kr:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
    --ff-ui:'Inter','Helvetica Neue',Arial,sans-serif;

    /* 콘텐츠 폭 — 시안 1600 + 좌우 20 */
    --inner-max:1640px;

    /* 유동 타이포 (시안 px / 1920 → vw) */
    --fs-hero:clamp(46px,5.833vw,112px);
    --fs-d1:clamp(30px,2.604vw,50px);
    --fs-d2:clamp(28px,2.5vw,48px);
    --fs-d3:clamp(22px,1.771vw,34px);
    --fs-d4:clamp(19px,1.25vw,24px);
    --fs-lead:clamp(17px,1.146vw,22px);
    --fs-body:clamp(16px,.99vw,19px);
    --fs-nav:clamp(15px,.885vw,17px);
    --fs-sm:clamp(13px,.833vw,16px);
    --fs-xs:clamp(12px,.729vw,14px);
    --fs-xxs:clamp(11px,.677vw,13px);

    /* 리듬 — 섹션 상하 여백도 유동 */
    --sec-pt:clamp(56px,4.583vw,88px);
    --sec-pb:clamp(56px,4.167vw,80px);
    --gap-lg:clamp(24px,2.5vw,48px);
    --gap-md:clamp(16px,1.25vw,24px);
    --gap-sm:clamp(8px,.625vw,12px);

    --r-sm:8px; --r-lg:24px;
    --hdr-h:clamp(64px,5vw,96px);

    --dur-instant:.12s; --dur-fast:.2s; --dur:.45s;
    --ease-out-quart:cubic-bezier(.22,1,.36,1);
  }
  /* 일반 모바일·태블릿. 1660 이상 시안 값은 위 clamp 최대가 유지한다. */
  @media (max-width:900px){
    :root{
      --fs-hero:36px;
      --fs-d1:26px;
      --fs-d2:24px;
      --fs-d3:20px;
      --fs-d4:17px;
      --fs-lead:16px;
      --fs-body:15px;
      --fs-nav:14px;
      --fs-sm:13px;
      --fs-xs:12px;
      --fs-xxs:11px;
      --sec-pt:40px;
      --sec-pb:40px;
      --hdr-h:64px;
    }
  }
  @media (max-width:600px){
    :root{
      --fs-hero:30px;
      --fs-d1:22px;
      --fs-d2:22px;
      --fs-d3:18px;
      --fs-d4:16px;
      --fs-lead:15px;
      --fs-body:14px;
    }
  }
}

/* ═══ base ════════════════════════════════════════════════════════════════ */
@layer base {
  /* overflow-x 는 html 에만 둔다. body 에 hidden 을 주면 overflow-y 가 auto 로
     계산되어 스크롤 주체가 body 가 되고, Lenis 는 html.scrollTop 을 움직이므로
     휠 preventDefault 만 되고 화면은 안 내려간다. */
  html{scroll-padding-top:calc(var(--hdr-h) + 16px);overflow-x:hidden;}
  html.lenis,html.lenis body{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto!important;}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
  .lenis.lenis-stopped{overflow:hidden;}
  body{
    background:var(--c-bg);color:var(--c-ink);
    font-family:var(--ff-kr);font-size:var(--fs-body);line-height:1.7;
    /* lang="ko" 가 켜는 locl 이 공백 advance 를 넓힌다(함정 p001) */
    font-feature-settings:"locl" 0;
  }
  ::selection{background:var(--c-accent);color:#121212;}
  /* ★ 화면 밖으로 밀어 숨기면(translate -200% · left:-9999px) "조상 상자에 잘린다" 로
     잡히고, 실제로도 일부 브라우저에서 포커스 스크롤이 튄다. 크기를 0 으로 접는
     sr-only 방식을 쓰고 포커스 때만 펼친다 — 낭독 순서는 그대로다. */
  .skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap;z-index:200;}
  .skip:focus{width:auto;height:auto;padding:10px 18px;overflow:visible;clip-path:none;
    inset-block-start:8px;inset-inline-start:50%;translate:-50% 0;
    background:var(--c-accent);color:#121212;border-radius:var(--r-sm);font-weight:700;}
}

/* ═══ layout ══════════════════════════════════════════════════════════════ */
@layer layout {
  .inner{width:100%;max-width:var(--inner-max);padding:0 20px;margin:0 auto;}
  .fl-sec{position:relative;}
  .sec{position:relative;z-index:1;padding-block:var(--sec-pt) var(--sec-pb);
    background:var(--c-bg);}
  .sec--panel{background:transparent;}
  .eyebrow{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-xs);
    letter-spacing:.06em;color:var(--c-accent);text-transform:uppercase;}
  /* 시안 섹션 헤드(90:280 등): Noto Bold 14 · rgba(255,255,255,.5) · gap 18 · Gmarket 48/58 */
  .sec__head .eyebrow,
  .inner > .eyebrow{
    font-family:var(--ff-kr);font-weight:700;font-size:14px;line-height:normal;
    letter-spacing:0;text-transform:none;color:var(--c-dim);}
  .h-d1{font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d1);line-height:1.4;
    padding-top:3px;}
  .h-d2{font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d2);line-height:1.208;
    padding-top:3px;}
  .h-d3{font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-d3);line-height:1.3;}
  .h-d4{font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-d4);line-height:1.42;}
  .lead{font-size:var(--fs-lead);line-height:1.8;color:var(--c-ink);}
  .body-m{font-size:var(--fs-body);line-height:1.79;color:var(--c-body);}
  .divider{display:block;width:100%;height:1px;margin:0;border:0;background:var(--c-line);}
}

/* ═══ components ══════════════════════════════════════════════════════════ */
@layer components {

  /* ── 헤더 ─────────────────────────────────────────────────────────────── */
  .hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;height:var(--hdr-h);
    overflow:visible;
    background:var(--c-hdr);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform var(--dur) var(--ease-out-quart),background var(--dur-fast);}
  /* 아래로 스크롤하면 숨긴다 — 고정 헤더가 본문 버튼을 가리는 사고 방지. */
  .hdr.is-up,.hdr.is-away{transform:translateY(-100%);}
  .hdr.is-menu{z-index:160;}
  /* P31 — 스크롤해서 본문 위에 얹히면 배경을 더 불투명하게: 글자가 겹쳐 읽히는 것을 막는다 */
  .hdr.is-docked{background:color-mix(in srgb,#121212 86%,transparent);}
  .hdr__in{height:100%;
    display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md);}
  .hdr__logo{flex:0 0 auto;line-height:0;}
  .hdr__logo a{display:inline-flex;align-items:center;}
  .hdr__logo img{width:232px;height:30px;max-width:none;}
  nav.gnb{display:flex;align-items:center;}
  .gnb__list{display:flex;align-items:center;gap:clamp(14px,2.188vw,42px);}
  .gnb__i{position:relative;}
  .gnb__a{display:inline-block;padding-block:15px 12px;font-family:var(--ff-brand);font-weight:500;
    font-size:var(--fs-nav);color:var(--c-ink);position:relative;white-space:nowrap;
    transition:color var(--dur) var(--ease-out-quart);}
  .gnb__a:hover,.gnb__a:focus-visible,
  .gnb__i:hover > .gnb__a,.gnb__i:focus-within > .gnb__a{color:var(--c-cyan);}
  .gnb__a::after{content:"";position:absolute;inset-inline:0;inset-block-end:6px;height:2px;
    background:var(--c-cyan);scale:0 1;transform-origin:left center;
    transition:scale var(--dur-fast) var(--ease-out-quart);}
  .gnb__a[aria-current="page"]::after{scale:1 1;}
  /* 2뎁스 — display:none 없이 opacity/visibility. 기본은 30px 아래, hover 시 0 + fadein */
  .gnb__i:has(.gnb__sub)::after{content:"";position:absolute;top:100%;inset-inline:0;height:12px;}
  .gnb__sub{position:absolute;top:calc(100% + 12px);left:50%;z-index:2;min-width:200px;margin:0;
    overflow:hidden;border-radius:16px;background:var(--c-panel);
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,30px);
    transition:opacity var(--dur) var(--ease-out-quart),visibility var(--dur),
      transform var(--dur) var(--ease-out-quart);}
  .gnb__i:hover > .gnb__sub,.gnb__i:focus-within > .gnb__sub{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
  .gnb__sub-a{display:block;padding:14px 20px;font-family:var(--ff-kr);font-weight:500;
    font-size:15px;line-height:1.4;color:#fff;border-bottom:1px solid var(--c-line);
    transition:background-color var(--dur) var(--ease-out-quart);}
  .gnb__sub > li:last-child .gnb__sub-a{border-bottom:0;}
  .gnb__sub-a:hover,.gnb__sub-a:focus-visible{background-color:rgba(255,255,255,.1);color:#fff;}
  .gnb__sub-a[aria-current="page"]{color:#fff;}
  .acts{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
  .acts .gnb__i{display:flex;align-items:center;}
  .acts .gnb__i .gnb__sub{left:auto;right:0;transform:translate(0,30px);}
  .acts .gnb__i:hover > .gnb__sub,.acts .gnb__i:focus-within > .gnb__sub{transform:translate(0,0);}
  .acts .gnb__i--lang > .gnb__sub{left:0;right:auto;width:100%;min-width:0;}
  .acts .gnb__i:hover > .btn-ghost,.acts .gnb__i:focus-within > .btn-ghost{color:var(--c-cyan);}
  .btn-ghost--login{--ghost-ico:url("../images/comm/icon_login.svg");}
  .btn-ghost--lang,.btn-ghost[hreflang="en"]{--ghost-ico:url("../images/comm/icon_global.svg");}
  .btn-ghost{display:inline-flex;align-items:center;gap:6px;background:var(--c-glass);
    border-radius:var(--r-sm);padding:8px 15px;font-family:var(--ff-brand);font-weight:500;
    font-size:var(--fs-xs);color:#fff;white-space:nowrap;
    transition:color var(--dur) var(--ease-out-quart);}
  /* GNB와 동일: 글자·아이콘 모두 currentColor → 시안. filter 보간은 무지개로 지나간다. */
  .btn-ghost:hover,.btn-ghost:focus-visible{color:var(--c-cyan);}
  .btn-ghost::before{content:"";width:18px;height:18px;flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:var(--ghost-ico) center / contain no-repeat;
    mask:var(--ghost-ico) center / contain no-repeat;}
  /* GmarketSans 보정은 아이콘이 아닌 글자(span)에만 */
  .btn-ghost > span{padding-top:3px;}
  .btn-ghost__ico{width:18px;height:18px;flex:0 0 auto;}
  .btn-ghost > .btn-ghost__ico{display:none;}
  .burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-sm);}
  .burger span{display:block;width:22px;height:2px;background:var(--c-ink);flex:0 0 2px;
    border-radius:1px;transition:transform var(--dur) var(--ease-out-quart),opacity var(--dur);}
  /* 열린 동안 헤더는 그대로. 세 줄이 그 자리에서 X가 된다. */
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .drawer{position:fixed;inset:0;z-index:150;background:rgba(10,10,10,.96);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    display:flex;flex-direction:column;padding:calc(var(--hdr-h) + 24px) 20px 40px;
    gap:var(--gap-md);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--dur) var(--ease-out-quart),visibility var(--dur);}
  .drawer[data-open]{opacity:1;visibility:visible;pointer-events:auto;}
  .drawer__close{position:absolute;inset-block-start:calc((var(--hdr-h) - 44px) / 2);
    inset-inline-end:20px;width:44px;height:44px;display:grid;place-items:center;
    font-size:26px;line-height:1;color:var(--c-ink);
    opacity:0;visibility:hidden;pointer-events:none;}
  .drawer__i{border-bottom:1px solid var(--c-line);
    opacity:0;transform:translateY(32px);
    transition:opacity var(--dur) var(--ease-out-quart),transform var(--dur) var(--ease-out-quart);}
  .drawer[data-open] .drawer__i{opacity:1;transform:translateY(0);}
  .drawer__tog{width:100%;display:flex;align-items:center;justify-content:space-between;
    font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d3);
    padding-block:13px 10px;text-align:left;color:var(--c-ink);
    transition:color var(--dur) var(--ease-out-quart);}
  .drawer__tog::after{content:"";width:24px;height:24px;flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:url("../images/comm/icon_chevron_down.svg") center / contain no-repeat;
    mask:url("../images/comm/icon_chevron_down.svg") center / contain no-repeat;
    transition:transform var(--dur) var(--ease-out-quart);}
  .drawer__tog[aria-expanded="true"]::after{transform:rotate(180deg);}
  .drawer__tog:hover,.drawer__tog:focus-visible{color:var(--c-cyan);}
  .drawer__i.is-current > .drawer__tog{color:var(--c-accent);}
  /* 1뎁스 — 토글 없이 바로 이동. 셰브론(::after)은 두지 않는다. */
  .drawer__a{display:flex;align-items:center;width:100%;
    font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d3);
    padding-block:13px 10px;color:var(--c-ink);
    transition:color var(--dur) var(--ease-out-quart);}
  .drawer__a:hover,.drawer__a:focus-visible{color:var(--c-cyan);}
  .drawer__i.is-current > .drawer__a{color:var(--c-accent);}
  /* 모바일 2뎁스 — 높이만 접고, 숨김은 opacity/visibility + 30px */
  .drawer__panel{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows var(--dur) var(--ease-out-quart);}
  .drawer__i.is-open .drawer__panel{grid-template-rows:1fr;}
  .drawer__clip{min-height:0;overflow:hidden;}
  .drawer__sub{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(30px);
    transition:opacity var(--dur) var(--ease-out-quart),visibility var(--dur),
      transform var(--dur) var(--ease-out-quart);}
  .drawer__i.is-open .drawer__sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
  .drawer__sub-a{display:block;padding:14px 8px;font-family:var(--ff-kr);font-weight:500;
    font-size:var(--fs-body);color:#fff;border-bottom:1px solid var(--c-line);
    transition:color var(--dur) var(--ease-out-quart);}
  .drawer__sub > li:last-child .drawer__sub-a{border-bottom:0;}
  .drawer__sub-a:hover,.drawer__sub-a:focus-visible{color:var(--c-cyan);}
  .drawer__sub-a[aria-current="page"]{color:var(--c-accent);}

  /* ── 서브 상단 (inc : sub-top) ─────────────────────────────────────────── */
  .shero{padding-block:calc(var(--hdr-h) + clamp(40px,4.583vw,88px)) 0;}
  .shero__row{display:flex;align-items:flex-end;gap:clamp(20px,3.333vw,64px);}
  .shero__t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:clamp(10px,.938vw,18px);}
  .shero__en{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-hero);
    line-height:1;color:var(--c-ink);letter-spacing:-.01em;}
  .shero__ko{font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-d3);line-height:1.3;}
  .crumb{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-xs);color:#fff;
    opacity:.5;display:flex;flex-wrap:wrap;gap:0 .55em;justify-content:flex-end;flex:0 0 auto;}
  .crumb__sep{user-select:none;}
  .shero__line{height:1px;background:var(--c-line);margin-block-start:clamp(28px,2.5vw,48px);}

  /* ── 푸터 (inc : footer) ──────────────────────────────────────────────── */
  /* 시안 07_FOOTER(162:168): py 80 · 블록 간격 48 · 네비↔문의만 12.
     구분선은 안쪽 Rectangle(84:942) — border-top 을 주지 않는다. */
  .ftr{background:var(--c-bg);padding-block:80px;}
  .ftr__in{display:flex;flex-direction:column;gap:48px;}
  .ftr__top{display:flex;align-items:flex-end;justify-content:space-between;
    gap:var(--gap-lg);flex-wrap:wrap;}
  .ftr__brand{display:flex;flex-direction:column;gap:10px;}
  .ftr__name{font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d1);line-height:1.4;
    padding-top:3px;}
  .ftr__when{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);color:var(--c-accent);
    padding-top:3px;}
  .reg-card{position:relative;flex:1 1 380px;max-width:620px;border-radius:var(--r-lg);
    padding:40px;color:#121212;overflow:hidden;
    background-image:var(--grad-brand-flow);background-size:200% 100%;background-position:100% 50%;
    background-repeat:no-repeat;
    display:flex;flex-direction:column;gap:18px;align-items:flex-start;
    transition:background-position .8s var(--ease-out-quart);}
  .reg-card:hover,.reg-card:focus-visible{background-position:0% 50%;}
  .reg-card__lb{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);padding-top:3px;}
  .reg-card__t{font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-d4);line-height:1.42;}
  .reg-card__ico{position:absolute;inset-block-start:30px;inset-inline-end:40px;
    width:36px;height:36px;}
  .reg-card__lb.is-hot,.reg-card__t.is-hot{color:#fff;}
  .reg-card__ico.is-hot{filter:brightness(0) invert(1);}
  .ftr__nav,.ftr__contact,.ftr__copy{display:flex;align-items:center;
    justify-content:space-between;gap:var(--gap-md);flex-wrap:wrap;}
  .ftr__nav,.ftr__contact{min-height:32px;}
  .ftr__nav + .ftr__contact{margin-block-start:-36px;}
  .ftr__links{display:flex;flex-wrap:wrap;gap:clamp(14px,1.25vw,24px);
    font-family:var(--ff-brand);font-weight:500;font-size:15px;}
  .ftr__sns{display:flex;flex-wrap:wrap;gap:clamp(14px,1.25vw,24px);
    font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);color:var(--c-dim);}
  .ftr__meta{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);
    color:var(--c-dim);display:flex;flex-wrap:wrap;gap:clamp(14px,1.25vw,24px);}
  .ftr__copytx{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);color:var(--c-mute);
    padding-top:3px;}
  .ftr__policy{display:flex;flex-wrap:wrap;gap:clamp(12px,1.042vw,20px);
    font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);color:var(--c-mute);}
  .ftr__policy b{color:#fff;font-weight:500;}
  .ftr__privacy{color:#fff;}
  /* 서체는 목록에 있고, 보정 패딩은 실제 글자(a/span)에만 */
  .ftr__links a,.ftr__sns a{display:inline-block;padding-top:3px;}
  .ftr__meta span,.ftr__policy a,.ftr__policy > span{padding-top:3px;}
  .totop{position:fixed;inset-block-end:65px;inset-inline-end:30px;z-index:90;
    width:60px;height:60px;border-radius:var(--r-sm);overflow:hidden;
    --btn-from:var(--c-cyan);--btn-to:var(--c-accent);
    background-color:var(--btn-from);
    background-image:linear-gradient(var(--btn-to),var(--btn-to));
    background-size:0% 100%;background-position:left center;background-repeat:no-repeat;
    display:grid;place-items:center;opacity:0;visibility:hidden;
    transition:opacity var(--dur) var(--ease-out-quart),visibility var(--dur),
      background-size var(--dur) var(--ease-out-quart);}
  .totop[data-show]{opacity:1;visibility:visible;}
  .totop:hover,.totop:focus-visible{background-size:100% 100%;}
  .totop img{width:28px;height:28px;transform:rotate(-90deg);}
  .totop.is-hot img{filter:brightness(0) invert(1);}

  /* ── 공통 조각 ────────────────────────────────────────────────────────── */
  .panel{background:var(--c-panel);border-radius:var(--r-lg);}
  .figbox{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel);}
  .figbox>img{width:100%;height:100%;object-fit:cover;}
  .ratio-wide{aspect-ratio:1600/420;}
  .chip{display:inline-flex;align-items:center;border-radius:var(--r-sm);
    background:var(--c-panel);color:var(--c-ink);padding:18px 20px;
    font-family:var(--ff-kr);font-weight:500;font-size:var(--fs-xxs);line-height:1.54;}
  .chip[aria-current="page"],.chip[aria-selected="true"],.chip.is-on{background:var(--c-accent);color:#f5f5f0;}
  /* 시안 84:649(about_link) · 84:736(more_cta) 는 **테두리도 라운드도 없는** 텍스트 링크 +
     화살표 아이콘이다. 버튼처럼 칠하면 시안에 없는 선·라운드를 발명하는 것이다. */
  .btn-line{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-kr);
    font-weight:500;font-size:clamp(14px,.833vw,16px);color:var(--c-ink);white-space:nowrap;}
  .btn-line img{width:24px;height:24px;}
  /* 시안 102:269 Play_Button — 220×58 · radius 12 · #23BCEE · 글자/아이콘 #121212
     hover: 시안 fill 은 왼쪽에서 보라가, 보라 fill 은 왼쪽에서 시안이 밀고 들어온다. */
  .btn-fill{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;
    width:220px;height:58px;padding:0 30px;border-radius:12px;flex:0 0 auto;
    --btn-from:var(--c-cyan);--btn-to:var(--c-accent);
    background-color:var(--btn-from);
    background-image:linear-gradient(var(--btn-to),var(--btn-to));
    background-size:0% 100%;background-position:left center;background-repeat:no-repeat;
    color:#121212;font-family:var(--ff-kr);font-weight:500;
    font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;
    transition:background-size var(--dur) var(--ease-out-quart);}
  .btn-fill--accent{--btn-from:var(--c-accent);--btn-to:var(--c-cyan);}
  .btn-fill:hover,.btn-fill:focus-visible{background-size:100% 100%;}
  .btn-fill img,.btn-fill__ico{width:24px;height:24px;flex:0 0 auto;}
  .btn-fill__v.is-hot{color:#fff;}
  .btn-fill__ico.is-hot{filter:brightness(0) invert(1);}
  /* 시안/보라 텍스트 링크 — 와이프 없이 색만. 시간은 fill 버튼과 동일(--dur) */
  .linkarrow,.faq__all,.more .btn-line{
    transition:color var(--dur) var(--ease-out-quart);}
  .linkarrow:hover,.linkarrow:focus-visible,
  .faq__all:hover,.faq__all:focus-visible,
  .more .btn-line:hover,.more .btn-line:focus-visible{color:var(--c-accent);}
  .linkarrow img,.faq__all img,.more .btn-line img{transition:filter var(--dur) var(--ease-out-quart);}
  .linkarrow:hover img,.linkarrow:focus-visible img,
  .faq__all:hover img,.faq__all:focus-visible img,
  .more .btn-line:hover img,.more .btn-line:focus-visible img{
    filter:hue-rotate(62deg) saturate(1.35) brightness(1.08);}

  /* 반응형 시작 1660px = .inner 1640 + 스크롤바 20. 그보다 넓으면 시안 유지.
     구조가 바뀌는 지점만 아래에 둔다. */
  @media (max-width:1280px){
    .shero__row{flex-direction:column;align-items:flex-start;gap:var(--gap-md);}
    .crumb{justify-content:flex-start;}
  }
  @media (max-width:1024px){
    nav.gnb{display:none;}
    .burger{display:flex;flex-direction:column;}
    .acts .gnb__i--login{display:none;}
    .hdr__logo img{width:clamp(160px,48vw,232px);height:auto;aspect-ratio:232/30;max-width:100%;}
  }
  @media (max-width:900px){
    .ftr{padding-block:48px;}
    .ftr__in{gap:28px;}
    .ftr__top{flex-direction:column;align-items:stretch;}
    .reg-card{flex:none;max-width:none;width:100%;padding:20px;gap:12px;}
    .reg-card__ico{inset-block-start:20px;inset-inline-end:20px;width:24px;height:24px;}
    .ftr__links{font-size:13px;}
    .btn-fill{width:100%;height:52px;font-size:14px;padding:0 20px;}
    .btn-line{font-size:14px;}
    .chip{padding:12px 14px;}
    .shero__en{font-size:var(--fs-hero);}
  }
  @media (max-width:600px){
    .totop{inset-block-end:20px;inset-inline-end:16px;width:48px;height:48px;}
    .totop img{width:22px;height:22px;}
    .ftr__nav,.ftr__contact,.ftr__copy{flex-direction:column;align-items:flex-start;}
    /* ★ 화면 고정 '맨 위로' 버튼이 푸터의 전화번호 링크를 덮어 누를 수 없었다(실측 390px).
       ① 푸터 아래를 버튼 높이만큼 비우고 ② 버튼이 지나가는 오른쪽 띠에는 링크를 두지 않는다.
       스크롤 중간에도 겹치지 않으려면 ②가 필요하다 — 고정 버튼은 어느 지점에선 반드시 겹친다. */
    .ftr{padding-block-end:132px;}
    .ftr__meta,.ftr__policy,.ftr__sns,.ftr__links{padding-inline-end:76px;}
  }
  /* 터치 기기에서는 호버로만 드러나는 정보를 만들지 않는다 */
  @media (hover:none){
    .gnb__a::after{scale:1 1;opacity:0;}
    .gnb__a[aria-current="page"]::after{opacity:1;}
  }
}

/* ── 모든 페이지가 쓰는 섹션 조각 (전용 시트 3개 상한을 지키려 여기 둔다 · P42) ── */
@layer components {
  /* ── 공통 그리드 ──────────────────────────────────────────────────────── */
  .grid{display:grid;gap:clamp(10px,.625vw,12px);}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--6{grid-template-columns:repeat(6,minmax(0,1fr));}
  @media (max-width:900px){.grid--4,.grid--6{grid-template-columns:repeat(2,minmax(0,1fr));}
    .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width:600px){.grid--4,.grid--3,.grid--6{grid-template-columns:minmax(0,1fr);}}

  .sec__head{display:flex;flex-direction:column;gap:18px;}
  /* ★ 같은 요소에 .sec__head 와 함께 붙는다. .sec__head 가 flex-direction:column 을
     주므로 **여기서 row 로 되돌려야** 한다 — 안 그러면 가로 배치가 세로가 되고
     align-items:flex-end 가 내용을 오른쪽 끝으로 밀어 버린다(실측: 헤더가 x=1427). */
  /* 시안: 왼쪽 제목 묶음 900 · 오른쪽 설명 540 · 사이 160 (합 1600).
     space-between 으로 오른쪽 끝에 붙이면 설명이 시안보다 175px 밀린다(실측). */
  .sec__head--row{display:grid;grid-template-columns:900fr 540fr;
    column-gap:clamp(20px,8.333vw,160px);align-items:end;}
  /* FAQ 헤더(98:388): 제목 700 · 설명 720 · 사이는 space-between (시안 180) */
  .sec__head--wide{grid-template-columns:minmax(0,700px) minmax(0,720px);
    justify-content:space-between;column-gap:0;}
  @media (max-width:900px){
    .sec__head--row,.sec__head--wide{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-md);}
  }
}

/* ── 푸터 링크 포커스 상태 ─────────────────────────────────────────────── */
@layer components {
  .ftr__links a,.ftr__sns a,.ftr__policy a,.ftr__meta a{
    position:relative;transition:color var(--dur) var(--ease-out-quart);}
  .ftr__links a:hover,.ftr__sns a:hover,.ftr__policy a:hover,.ftr__meta a:hover,
  .ftr__links a:focus-visible,.ftr__sns a:focus-visible,.ftr__policy a:focus-visible,.ftr__meta a:focus-visible{color:var(--c-cyan);}
  .ftr__links a:focus-visible::after,.ftr__sns a:focus-visible::after,.ftr__policy a:focus-visible::after,.ftr__meta a:focus-visible::after{
    content:"";position:absolute;inset-inline:0;inset-block-end:-3px;height:1px;
    background:currentColor;}
}

/* ── 섹션 여백·간격: 시안 값을 그대로 전사한다 ─────────────────────────────
   시안은 섹션마다 패딩과 내부 간격이 다르다(메인 py-120 · 서브 pt-88/pb-80,
   gap 32/48/50/56/64/120). 하나로 뭉개면 페이지 높이가 시안과 어긋나고,
   그 차이가 아래로 누적돼 시안 대조가 전 구간에서 틀어진다(실측: y 450px 오차).
   1920 에서는 시안 값 그대로, 좁아지면 같은 비율로 준다. */
@layer layout {
  .sec--p120{padding-block:clamp(72px,6.25vw,120px);}
  .wrap--col{display:flex;flex-direction:column;}
  .g0{gap:0;}
  .g32{gap:clamp(20px,1.667vw,32px);}
  .g48{gap:clamp(28px,2.5vw,48px);}
  .g50{gap:clamp(28px,2.604vw,50px);}
  .g56{gap:clamp(32px,2.917vw,56px);}
  .g64{gap:clamp(32px,3.333vw,64px);}
  .g120{gap:clamp(48px,6.25vw,120px);}
  .reveal_item{opacity:0;}
  @media (prefers-reduced-motion:reduce){
    .reveal_item{opacity:1;}
    .reg-card,.ncard,.btn-fill,.hcard--cta,.daycard,.linkarrow,.faq__all,.drawer,.drawer__i,.drawer__panel,.drawer__sub,.gnb__sub,.burger span,.drawer__tog::after,.soon,.soon__box,.soon__dim,.soon__ok{transition:none;}
    .soon__box{transform:none;}
    .drawer,.drawer__i,.drawer__sub{transform:none;}
    .gnb__sub{transform:translate(-50%,0);}
    .gnb__i--login .gnb__sub,.acts .gnb__i .gnb__sub{transform:translate(0,0);}
    .btn-fill:hover,.btn-fill:focus-visible,
    .soon__ok:hover,.soon__ok:focus-visible,
    .totop:hover,.totop:focus-visible,
    .hero__cta.is-stack .hcard--cta:hover,
    .hero__cta.is-stack .hcard--cta:focus-visible{background-image:none;background-color:var(--btn-to);}
  }
}

/* ── 섹션 헤더 2열 비율은 섹션마다 다르다 (시안 실측) ───────────────────────
   ★ layer 는 components 여야 한다 — .sec__head--row 가 components 에 있고
   레이어 순서(… layout, components …)에서 components 가 이기므로, layout 에 두면
   이 덮어쓰기가 조용히 무시된다(실측: 오른쪽 열이 210~360px 어긋났다). */
@layer components {
  .sp674{grid-template-columns:674fr 926fr;column-gap:0;}
  .sp700{grid-template-columns:700fr 900fr;column-gap:0;}
  .sp850{grid-template-columns:850fr 750fr;column-gap:0;}
  @media (max-width:900px){.sp674,.sp700,.sp850{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-md);}}
}

/* ── 관리자 팝업 (기본은 보임. 닫기·오늘하루만 is_hide) ─────────────────── */
@layer components {
  .popup_layer{position:fixed;inset:0;z-index:300;pointer-events:none;}
  .popup_item{
    --popup-x:100px;--popup-y:100px;--popup-w:500px;--popup-h:600px;
    position:absolute;left:var(--popup-x);top:var(--popup-y);
    width:min(var(--popup-w),calc(100vw - 32px));
    max-height:min(var(--popup-h),calc(100vh - 32px));
    display:flex;flex-direction:column;pointer-events:auto;
    background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r-sm);
    box-shadow:0 20px 48px rgba(0,0,0,.5);overflow:hidden;
  }
  .popup_item.is_hide{display:none;}
  .popup_body{flex:1 1 auto;min-height:0;overflow:auto;background:#111;}
  .popup_link{display:block;}
  .popup_image{width:100%;height:auto;max-height:calc(min(var(--popup-h),calc(100vh - 32px)) - 56px);
    object-fit:contain;background:#111;}
  .popup_content{padding:20px;color:var(--c-ink);font-size:var(--fs-sm);line-height:1.7;}
  .popup_content img{max-width:100%;height:auto;}
  .popup_foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:52px;padding:10px 14px;background:#1a1a1a;border-top:1px solid var(--c-line);}
  .popup_today{display:inline-flex;align-items:center;gap:8px;color:var(--c-mute);
    font-size:var(--fs-xs);cursor:pointer;}
  .popup_today_check{width:16px;height:16px;accent-color:var(--c-accent);}
  .btn_popup_close{padding:6px 12px;border-radius:var(--r-sm);color:var(--c-ink);
    font-size:var(--fs-xs);font-weight:600;background:var(--c-panel-2);}
  .btn_popup_close:hover,.btn_popup_close:focus-visible{background:var(--c-accent);color:#121212;}
  @media (max-width:900px){
    .popup_item{left:50%;top:50%;transform:translate(-50%,-50%);
      width:min(440px,calc(100vw - 24px));}
  }
}

/* ── 준비중 안내 ─────────────────────────────────────────────────────────── */
@layer components {
  /* 부모에 opacity 를 주면 페이드가 끝난 뒤에야 backdrop-filter 가 살아난다.
     dim 자체에 배경+블러를 두고, 둘을 같은 트랜지션으로 켠다. */
  .soon{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
    padding:20px;visibility:hidden;pointer-events:none;}
  .soon.is-open{visibility:visible;pointer-events:auto;}
  .soon__dim{position:absolute;inset:0;z-index:0;background:rgba(10,10,10,0);
    backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
    transition:background var(--dur) var(--ease-out-quart),
      backdrop-filter var(--dur) var(--ease-out-quart),
      -webkit-backdrop-filter var(--dur) var(--ease-out-quart);}
  .soon.is-open .soon__dim{background:rgba(10,10,10,.72);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .soon__box{position:relative;z-index:1;width:min(440px,100%);
    background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r-lg);
    padding:40px 36px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    box-shadow:0 24px 64px rgba(0,0,0,.55);
    transform:translateY(24px);
    transition:transform var(--dur) var(--ease-out-quart);}
  .soon.is-open .soon__box{transform:translateY(0);}
  .soon__x{position:absolute;inset-block-start:12px;inset-inline-end:12px;
    width:44px;height:44px;display:grid;place-items:center;
    font-size:26px;line-height:1;color:var(--c-mute);
    transition:color var(--dur-fast) var(--ease-out-quart);}
  .soon__x:hover,.soon__x:focus-visible{color:var(--c-ink);}
  .soon__kicker{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);
    letter-spacing:.08em;color:var(--c-cyan);padding-top:3px;}
  .soon__title{margin:0;font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-d4);
    line-height:1.42;color:var(--c-ink);}
  .soon__desc{margin:0;font-family:var(--ff-kr);font-weight:500;font-size:var(--fs-sm);
    line-height:1.7;color:var(--c-body);}
  .soon__ok{margin-top:10px;align-self:stretch;height:52px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    font-family:var(--ff-kr);font-weight:500;font-size:16px;color:#121212;
    --btn-from:var(--c-cyan);--btn-to:var(--c-accent);
    background-color:var(--btn-from);
    background-image:linear-gradient(var(--btn-to),var(--btn-to));
    background-size:0% 100%;background-position:left center;background-repeat:no-repeat;
    transition:background-size var(--dur) var(--ease-out-quart);}
  .soon__ok:hover,.soon__ok:focus-visible{background-size:100% 100%;}
  .soon__ok-v.is-hot{color:#fff;}
  @media (max-width:600px){
    .soon__box{padding:32px 24px 24px;}
  }
}