/* ============================================================================
   메인(index.html) 전용 섹션
   시안 1920 값을 전사하고 사이 폭은 규칙(clamp)으로 유동 처리한다.
   ========================================================================== */
@layer components {
  /* ── MAIN ─────────────────────────────────────────────────────────────── */
  /* ── 히어로 (84:628) — 시안 전사 ─────────────────────────────────────────
     · 84:628      flex column · justify-center · px160 py36 · 1920x1120
     · 230:1620    배경 사각형 = linear-gradient(to bottom, rgba(18,18,18,.5) 50%, rgba(145,96,255,.5))
     · 227:1620    flex column · gap 22 · items-center · w-full  → 내용은 **가운데 정렬**이다
     · 227:1622    Barlow Condensed Bold 128 / leading-none / center
     · 227:1623    Gmarket Sans Bold 34 · 그라디언트 글자(#9160ff→#23bcee)
     · 227:1625    CTA 행 780 = 460 + gap20 + 300
     · 227:1626    gradient(to right,#9160ff,#23bcee) · 460x108 · r20 · px28 py26 · gap12
     · 227:1629    #23bcee · 300x108 · r20 · px28 py26 · items-end justify-between        */
  .hero{position:relative;z-index:1;min-height:max(700px,100vh);display:flex;
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:clamp(24px,1.875vw,36px) 0;background:transparent;}
  .hero__bg{position:fixed;inset-inline:0;inset-block-start:0;z-index:0;pointer-events:none;
    overflow:hidden;background:#121212;height:132vh;}
  .hero__ink{position:absolute;inset:0;width:100%;height:100%;display:block;}
  /* 캔버스가 막히면 시안 그라데이션+오브로 되돌린다 */
  .hero__bg.is-static{background:linear-gradient(to bottom,rgba(18,18,18,.5) 50%,rgba(145,96,255,.5) 100%);}
  .hero__bg.is-static .hero__ink{display:none;}
  .hero__bg i{display:none;}
  .hero__bg.is-static i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.55;}
  .hero__bg.is-static i:nth-of-type(1){inset-block-start:-14%;inset-inline-end:-8%;width:54vw;height:54vw;
    background:radial-gradient(circle,rgba(145,96,255,.45) 0%,rgba(18,18,18,0) 70%);}
  .hero__bg.is-static i:nth-of-type(2){inset-block-end:-20%;inset-inline-start:-12%;width:48vw;height:48vw;
    background:radial-gradient(circle,rgba(35,188,238,.28) 0%,rgba(18,18,18,0) 70%);}
  .hero__in{--veil-a:0;--veil-s:.2;position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:clamp(14px,1.146vw,22px);}
  .hero__in::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    left:50%;top:44%;width:78%;height:112%;
    opacity:var(--veil-a);transform:translate(-50%,-50%) scale(var(--veil-s));
    background:radial-gradient(ellipse at center,
      rgba(18,18,18,.88) 0%,
      rgba(18,18,18,.5) 28%,
      rgba(18,18,18,.16) 52%,
      rgba(18,18,18,0) 72%);}
  .hero__brand{font-family:var(--ff-brand);font-weight:500;font-size:clamp(13px,.833vw,16px);
    color:rgba(255,255,255,.5);letter-spacing:.02em;padding-top:3px;}
  /* 시안 227:1622 는 w=1600(콘텐츠 전폭)이고 글자는 그 안에서 가운데다 */
  .hero__t{width:100%;font-family:var(--ff-display);font-weight:700;
    font-size:clamp(32px,6.667vw,128px);line-height:1;letter-spacing:-.01em;color:var(--c-ink);
    display:flex;justify-content:center;flex-wrap:wrap;column-gap:.28em;}
  .hero__tw{display:block;overflow:hidden;line-height:1;}
  .hero__tw--year{width:0;margin-inline-start:-.28em;flex:0 0 auto;}
  .hero__tw-in,.hero__year{display:block;line-height:1;}
  .hero__tw-in{transform:translateY(1.1em);}
  .hero__year{transform:translateX(-110%);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .hero__t:not(.is-in) .hero__tw-in{visibility:hidden;}
  .hero__t:not(.is-year) .hero__year{visibility:hidden;}
  .hero:not(.is-rest) .reveal_item{opacity:0;}
  .hero__sub{font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d3);
    background:linear-gradient(to right,#9160ff,#23bcee);
    -webkit-background-clip:text;background-clip:text;color:transparent;padding-top:3px;}
  .hero__copy{font-family:var(--ff-kr);font-weight:400;font-size:clamp(16px,1.042vw,20px);
    line-height:1.7;color:var(--c-ink);max-width:70ch;}
  /* ★ width:100% 가 필요하다 — 부모가 items-center 라 이 줄은 shrink-to-fit 이 되고,
     그 안에서 자식의 `width:min(100%,460px)` 는 순환 참조가 되어 줄이 접혔다(실측:
     460+300 카드가 두 줄로 내려가 y 가 49px 위·92px 아래로 갈렸다). 폭을 고정으로 준다. */
  /* CTA 두 장은 한 그라데이션 띠를 나눠 본다. JS가 --hcard-* 실측값을 넣는다.
     기본값은 시안 460+20+300. 호버 시 띠가 CTA까지 밀려 a 왼쪽=#9160ff · 오른쪽=#23bcee. */
  /* 가로: 780(460:300) 비율로 한 덩어리. wrap 하면 CTA가 300에 멈춰 어중간한 폭에서
     아래만 작아진다. nowrap + flex 비율로 줄이고, 840부터는 세로로 같은 폭. */
  .hero__cta{--hcard-band:780px;--hcard-left-w:460px;--hcard-cta-w:300px;--hcard-travel:480px;
    position:relative;width:100%;max-width:780px;margin-inline:auto;
    display:flex;gap:20px;flex-wrap:nowrap;justify-content:center;align-items:stretch;}
  .hcard{--hcard-x:0px;--hcard-y:0px;position:relative;overflow:hidden;isolation:isolate;
    border-radius:20px;padding:26px 28px;display:flex;flex-direction:column;
    gap:12px;justify-content:center;align-items:flex-start;color:#121212;
    background:linear-gradient(to right,#9160ff,#23bcee);
    min-height:clamp(88px,5.625vw,108px);flex:0 1 460px;min-width:0;text-align:left;}
  .hcard > *{position:relative;z-index:1;}
  .hcard::before{content:"";position:absolute;inset-block:0;z-index:0;pointer-events:none;
    left:calc(-1 * var(--hcard-x) - var(--hcard-travel));
    width:calc(var(--hcard-band) + var(--hcard-travel));
    background:linear-gradient(90deg,
      #9160ff 0,
      #9160ff var(--hcard-travel),
      #23bcee calc(var(--hcard-travel) + var(--hcard-cta-w)),
      #23bcee 100%);
    transform:translateX(0);
    transition:transform .8s var(--ease-out-quart);}
  .hcard__lb{font-family:var(--ff-brand);font-weight:500;font-size:clamp(13px,.833vw,16px);line-height:1;
    padding-top:3px;}
  .hcard__v{font-family:var(--ff-brand);font-weight:700;font-size:clamp(18px,1.25vw,24px);
    padding-top:3px;}
  .hcard--cta{--hcard-x:480px;--hcard-y:0px;flex:0 1 300px;background:#23bcee;
    flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px;}
  .hero__cta:has(.hcard--cta:hover) .hcard::before,
  .hero__cta:has(.hcard--cta:focus-visible) .hcard::before{transform:translateX(var(--hcard-travel));}
  .hcard--cta .hcard__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
  .hcard--cta .hcard__v{font-family:var(--ff-kr);font-weight:700;
    font-size:clamp(16px,1.042vw,20px);line-height:1.4;padding-top:0;}
  .hcard__ico{width:32px;height:32px;flex:0 0 auto;}
  /* hover 재등장 텍스트·화살표는 흰색. 교체 시점은 글자가 안 보일 때(JS is-hot). */
  .hcard--cta .hcard__v.is-hot{color:#fff;}
  .hcard--cta .hcard__ico.is-hot{filter:brightness(0) invert(1);}
  /* 780+패딩40+스크롤20 → 840. 세로 스택 + 위 카드와 같은 폭 */
  @media (max-width:840px){
    .hero__cta{max-width:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;}
    .hcard,.hcard--cta{flex:1 1 auto;width:100%;min-width:0;}
  }
  .hero__cta.is-stack{max-width:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;}
  .hero__cta.is-stack .hcard,
  .hero__cta.is-stack .hcard--cta{flex:1 1 auto;width:100%;min-width:0;}
  /* 세로 스택: 같은 그라데이션 띠를 위→아래로 이어 본다. hover 시 아래로 밀림 */
  .hero__cta.is-stack .hcard::before{
    left:0;right:0;width:auto;inset-block:auto;
    top:calc(-1 * var(--hcard-y, 0px) - var(--hcard-travel));
    height:calc(var(--hcard-band) + var(--hcard-travel));
    background:linear-gradient(180deg,
      #9160ff 0,
      #9160ff var(--hcard-travel),
      #23bcee calc(var(--hcard-travel) + var(--hcard-cta-w)),
      #23bcee 100%);
    transform:translateY(0);}
  .hero__cta.is-stack:has(.hcard--cta:hover) .hcard::before,
  .hero__cta.is-stack:has(.hcard--cta:focus-visible) .hcard::before{
    transform:translateY(var(--hcard-travel));}
  @media (prefers-reduced-motion:reduce){
    .hcard::before{transition:none;}
    .hero__in{--veil-a:1;--veil-s:1;}
    .hero__tw{overflow:visible;}
    .hero__tw--year{width:auto;margin-inline-start:0;}
    .hero__tw-in,.hero__year{transform:none;visibility:visible;}
    .hero .reveal_item{opacity:1;}
    .hero__bg{background:linear-gradient(to bottom,rgba(18,18,18,.5) 50%,rgba(145,96,255,.5) 100%);}
    .hero__ink{display:none;}
    .hero__bg i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.55;}
    .hero__bg i:nth-of-type(1){inset-block-start:-14%;inset-inline-end:-8%;width:54vw;height:54vw;
      background:radial-gradient(circle,rgba(145,96,255,.45) 0%,rgba(18,18,18,0) 70%);}
    .hero__bg i:nth-of-type(2){inset-block-end:-20%;inset-inline-start:-12%;width:48vw;height:48vw;
      background:radial-gradient(circle,rgba(35,188,238,.28) 0%,rgba(18,18,18,0) 70%);}
  }

  .daytabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    border-bottom:1px solid var(--c-line);}
  .daytab{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;
    padding:16px 8px 20px 0;text-align:left;color:var(--c-mute);
    border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:color var(--dur-fast) var(--ease-out-quart);}
  .daytab:hover,.daytab:focus-visible{color:#fff;}
  .daytab[aria-selected="true"],
  .daytab[aria-selected="true"]:hover,
  .daytab[aria-selected="true"]:focus-visible{color:var(--c-cyan);border-bottom-color:var(--c-cyan);}
  .daytab__d{font-family:var(--ff-display);font-weight:700;font-size:clamp(22px,1.771vw,34px);line-height:1;}
  .daytab__dt{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-xs);}
  @media (max-width:600px){.daytabs{grid-template-columns:minmax(0,1fr);}}
  .prog{display:grid;gap:clamp(14px,1.25vw,24px);}
  @media (min-width:901px){.prog{grid-template-columns:780fr 796fr;}}
  /* 시안 84:715 featured · 84:721 session_02 · 84:725/729 스몰 · 84:733 more
     텍스트는 카드 세로 가운데(스몰은 상단 패딩 40).
     Day1·일부 세션 PNG 에 dim 이 이미 구워져 있어 같은 그라데이션을 또 올리면
     시안보다 훨씬 어두워진다. CSS dim 은 raw 사진(Day2/3 리드)에만. */
  .pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel);
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    padding:40px;min-height:clamp(236px,13.021vw,250px);isolation:isolate;}
  .pcard--lead{min-height:clamp(320px,26.563vw,510px);}
  .pcard--fill{justify-content:flex-start;}
  .pcard__copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;
    width:100%;max-width:700px;}
  .pcard--lead .pcard__copy{gap:28px;}
  .prog__sub > .pcard:not(.pcard--fill) .pcard__copy{max-width:360px;gap:20px;}
  .pcard--fill .pcard__copy{gap:18px;max-width:none;}
  .pcard__bg{position:absolute;inset:0;z-index:-2;}
  .pcard__bg>img{width:100%;height:100%;object-fit:cover;}
  .pcard::after{display:none;}
  /* Day 2 리드 176:190 — 밝은 사진 + 좌측 크림 워시 · 플랫 30% · 하단 40% */
  #panel-day2 .pcard--lead:has(.pcard__bg)::after{content:"";display:block;position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(180deg,rgba(0,0,0,0) 50.1%,rgba(0,0,0,.4) 100%),
      linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,.3)),
      linear-gradient(-90deg,rgba(233,233,231,0) 48.08%,#e9e9e7 80.39%);}
  /* Day 3 리드 176:230 — 대각 80% + 하단 40% + 플랫 20% */
  #panel-day3 .pcard--lead:has(.pcard__bg)::after{content:"";display:block;position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(256.71deg,rgba(0,0,0,0) 47.22%,rgba(0,0,0,.8) 83.45%),
      linear-gradient(180deg,rgba(0,0,0,0) 50.1%,rgba(0,0,0,.4) 100%),
      linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.2));}
  .pcard__no{font-family:var(--ff-kr);font-weight:500;font-size:14px;line-height:normal;color:#fff;}
  /* 시안 Featured_Header_Row 84:716 — 720×40 */
  .pcard--lead .pcard__no{font-size:15px;min-height:40px;}
  .pcard--fill .pcard__no{font-size:13px;}
  .pcard__k{font-family:var(--ff-brand);font-weight:500;font-size:16px;line-height:normal;
    color:#fff;padding-top:3px;}
  .pcard__t{font-family:var(--ff-kr);font-weight:700;font-size:24px;line-height:32px;color:#fff;}
  .pcard--lead .pcard__t{font-family:var(--ff-brand);font-size:clamp(26px,1.667vw,32px);
    line-height:1.3125;padding-top:3px;}
  /* Day 2·3 리드 타이틀 시안 38/48 */
  #panel-day2 .pcard--lead .pcard__t,
  #panel-day3 .pcard--lead .pcard__t{font-size:clamp(28px,1.979vw,38px);line-height:1.263;}
  .pcard--fill .pcard__t{font-size:18px;line-height:28px;}
  .pcard__m{font-family:var(--ff-kr);font-weight:500;font-size:14px;line-height:24px;
    color:rgba(255,255,255,.5);}
  .pcard--lead .pcard__m{font-size:16px;line-height:28px;}
  .pcard--plain{background:var(--c-panel);}
  .pcard--fill{background:var(--c-accent);color:#121212;}
  .pcard--fill .pcard__no,.pcard--fill .pcard__k,.pcard--fill .pcard__t,.pcard--fill .pcard__m{color:#121212;}
  .pcard--cyan{background:var(--c-cyan);}
  .prog__sub{display:grid;gap:clamp(14px,1.25vw,24px);grid-template-rows:250fr 236fr;}
  .prog__small{display:grid;gap:clamp(14px,1.25vw,24px);grid-template-columns:repeat(2,minmax(0,1fr));}
  @media (max-width:600px){.prog__small{grid-template-columns:minmax(0,1fr);}}
  /* 시안 84:733 program_more — 1600×220 · p 28 40 · CTA #00b3e4 + 24 시안 화살표 */
  .more{background:var(--c-panel);border-radius:var(--r-lg);padding:28px 40px;min-height:220px;
    display:flex;align-items:center;justify-content:space-between;gap:var(--gap-lg);flex-wrap:wrap;}
  .more > div{display:flex;flex-direction:column;gap:20px;min-width:0;}
  .more .eyebrow{font-family:var(--ff-brand);font-weight:500;font-size:14px;line-height:normal;
    letter-spacing:0;text-transform:none;color:var(--c-accent);padding-top:3px;}
  .more__t{font-family:var(--ff-kr);font-weight:700;font-size:clamp(24px,1.771vw,34px);
    line-height:1.294;max-width:60ch;}
  .more .btn-line{color:#00b3e4;gap:6px;font-weight:600;font-size:16px;}
  @media (max-width:600px){
    .pcard{padding:24px;}
    .more{padding:24px 20px;}
  }

  .abcards{display:grid;gap:clamp(14px,1.25vw,24px);align-items:stretch;}
  @media (min-width:901px){.abcards{grid-template-columns:620fr 956fr;}}
  .quick{display:grid;gap:clamp(10px,.833vw,16px);}
  @media (min-width:601px){.quick{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (min-width:901px){.quick{grid-template-columns:repeat(4,minmax(0,1fr));}}
  .vcard{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
    min-height:clamp(320px,31.25vw,600px);display:flex;flex-direction:column;justify-content:space-between;
    padding:clamp(24px,2.083vw,40px);}
  .vcard__bg,.vcard__ov{position:absolute;inset:0;}
  .vcard__bg{z-index:-2;} .vcard__ov{z-index:-1;opacity:.55;mix-blend-mode:multiply;}
  .vcard__bg>img,.vcard__ov>img{width:100%;height:100%;object-fit:cover;}
  .vcard::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.1) 50%,rgba(0,0,0,.2) 100%);}
  .rcard{background:var(--c-panel);border-radius:var(--r-lg);padding:clamp(24px,2.083vw,40px);
    display:flex;flex-direction:column;justify-content:space-between;min-height:0;}
  .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.042vw,20px);
    align-items:stretch;}
  @media (max-width:1024px){.logos{grid-template-columns:repeat(4,minmax(0,1fr));}}
  @media (max-width:600px){.logos{grid-template-columns:repeat(2,minmax(0,1fr));}}
  /* 시안 partner_card_* 라운드는 18 · 250×128 */
  .logos__c{background:var(--c-panel);border-radius:18px;aspect-ratio:250/128;height:100%;
    display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.042vw,20px);
    min-height:0;overflow:hidden;}
  .logos__w{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
  .logos__c img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
  .ncards{display:grid;gap:20px;margin-block-start:38px;}
  @media (min-width:901px){.ncards{grid-template-columns:repeat(3,minmax(0,1fr));}}
  /* 시안 84:908 기본 · hover 그라데이션은 JS가 opacity 로 fade-in */
  .ncard{--ncard-grad:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    height:100%;min-height:clamp(200px,13.021vw,250px);overflow:hidden;isolation:isolate;
    padding:clamp(28px,2.604vw,50px) clamp(24px,2.083vw,40px);padding-inline-end:clamp(56px,4.167vw,80px);
    border-radius:24px;background:var(--c-panel);}
  .ncard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--grad-brand);opacity:var(--ncard-grad);}
  .ncard__lb,.ncard__t,.ncard__d{position:relative;z-index:1;}
  .ncard__lb{font-family:var(--ff-brand);font-weight:500;font-size:13px;line-height:normal;
    color:var(--c-accent);padding-top:3px;}
  .ncard__t{font-family:var(--ff-kr);font-weight:700;font-size:clamp(20px,1.458vw,28px);
    line-height:1.357;color:var(--c-ink);}
  .ncard__d{font-family:var(--ff-brand);font-weight:500;font-size:14px;line-height:normal;
    color:var(--c-mute);padding-top:3px;}
  .ncard__ico{position:absolute;z-index:1;inset-block-start:40px;inset-inline-end:30px;width:36px;height:36px;
    filter:brightness(0) invert(1);}
  .ncard__lb.is-hot,.ncard__t.is-hot,.ncard__d.is-hot{color:#121212;}
  .ncard__ico.is-hot{filter:none;}
  @media (prefers-reduced-motion:reduce){
    .ncard:hover,.ncard:focus-visible,.ncard.is-hot{--ncard-grad:1;}
  }
  /* ── FAQ (98:388) ─────────────────────────────────────────────────────────
     헤더↔카드 38 · 열린 카드 p40 gap24 · 접힌 스택 px40 py24 / 행 py22 gap18
     번호 닫힘 #23BCEE · 열림 #9160FF · + 20px 고정 · 전체보기 화살표 24 gap6 */
  #faq .wrap--col{gap:38px;}
  .faq__aside{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%;}
  .faq__aside .body-m{font-family:var(--ff-kr);font-weight:500;font-size:18px;
    line-height:normal;color:var(--c-mute);}
  .faq__all{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-kr);
    font-weight:500;font-size:16px;line-height:1;color:var(--c-cyan);white-space:nowrap;}
  .faq__all img{width:24px;height:24px;flex:0 0 24px;}
  .faq{--faq-dur:.5s;--faq-ease:cubic-bezier(.4, 0, .2, 1);
    display:flex;flex-direction:column;gap:18px;}
  .faq__i{--faq-pad-x:40px;background:var(--c-panel);border-radius:24px;overflow:hidden;
    display:flex;flex-direction:column;
    transition:padding var(--faq-dur) var(--faq-ease),margin-top var(--faq-dur) var(--faq-ease),
      border-radius var(--faq-dur) var(--faq-ease);}
  .faq__i:is(.is-open,.is-closing){padding:40px;}
  .faq__i:not(:is(.is-open,.is-closing)){padding-inline:40px;}
  .faq__i:not(:is(.is-open,.is-closing)):first-child,
  .faq__i:is(.is-open,.is-closing) + .faq__i:not(:is(.is-open,.is-closing)){padding-top:24px;}
  .faq__i:not(:is(.is-open,.is-closing)):last-child,
  .faq__i:not(:is(.is-open,.is-closing)):has(+ .faq__i:is(.is-open,.is-closing)){padding-bottom:24px;}
  .faq__i:not(:is(.is-open,.is-closing)):has(+ .faq__i:not(:is(.is-open,.is-closing))){
    border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .faq__i:not(:is(.is-open,.is-closing)) + .faq__i:not(:is(.is-open,.is-closing)){
    border-top-left-radius:0;border-top-right-radius:0;margin-top:-18px;}
  .faq__h{margin:0;}
  .faq__q{position:relative;width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;
    grid-template-rows:auto auto;column-gap:18px;row-gap:0;align-items:center;text-align:left;
    padding-block:22px;
    transition:column-gap var(--faq-dur) var(--faq-ease),row-gap var(--faq-dur) var(--faq-ease),
      padding-block var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__q{column-gap:0;row-gap:24px;align-items:start;padding-block:0;}
  .faq__i.is-closing .faq__q{column-gap:0;row-gap:0;align-items:start;padding-block:0;}
  .faq__i.is-open .faq__q:not(:has(.faq__cat)),
  .faq__i.is-closing .faq__q:not(:has(.faq__cat)){row-gap:0;align-items:center;}
  .faq__q::before{content:"";position:absolute;z-index:0;pointer-events:none;
    inset:0 calc(var(--faq-pad-x) * -1);
    transition:background var(--dur-fast) var(--faq-ease),inset var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__q::before{inset:-20px calc(var(--faq-pad-x) * -1);}
  .faq__q:hover::before,.faq__q:focus-visible::before{background:rgba(255,255,255,.1);}
  .faq__num,.faq__cat,.faq__plus,.faq__qt{position:relative;z-index:1;}
  .faq__num{grid-column:1;grid-row:1;flex:0 0 48px;width:48px;font-family:var(--ff-brand);font-weight:500;
    font-size:16px;line-height:1;color:var(--c-cyan);padding-top:3px;
    transition:color var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__num{color:var(--c-accent);}
  /* 열릴 때 왼쪽 페이드인, 닫힐 땐 레이아웃을 유지한 채 페이드아웃 */
  .faq__cat{grid-column:2;grid-row:1;z-index:2;min-width:0;font-family:var(--ff-brand);font-weight:500;
    font-size:16px;line-height:1;color:var(--c-dim);padding-top:3px;
    opacity:0;transform:translateX(24px);pointer-events:none;
    transition:opacity var(--faq-dur) var(--faq-ease),transform var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__cat{opacity:1;transform:translateX(0);pointer-events:auto;}
  .faq__i.is-closing .faq__cat{opacity:0;transform:translateX(24px);pointer-events:none;}
  .faq__plus{grid-column:3;grid-row:1;flex:0 0 auto;margin-inline-start:0;font-family:var(--ff-kr);
    font-size:20px;line-height:1;color:var(--c-mute);white-space:nowrap;display:inline-block;
    transition:transform var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__plus{transform:rotate(45deg);}
  /* 위치는 오픈과 동시에 row 2. 크기도 오픈과 함께 scale */
  .faq__qt{grid-column:2;grid-row:1;z-index:1;min-width:0;font-family:var(--ff-kr);font-weight:500;
    font-size:20px;line-height:1.2;color:var(--c-ink);transform-origin:left top;}
  .faq__i.is-open .faq__qt,
  .faq__i.is-closing .faq__qt{grid-column:1/-1;grid-row:2;padding-inline-start:48px;max-width:948px;
    font-weight:700;font-size:30px;transform-origin:48px 0;}
  .faq__i.is-open.is-qt-hold .faq__qt,
  .faq__i.is-closing .faq__qt{font-weight:500;font-size:20px;}
  .faq__i.is-open .faq__q:not(:has(.faq__cat)) .faq__qt,
  .faq__i.is-closing .faq__q:not(:has(.faq__cat)) .faq__qt{grid-column:2;grid-row:1;padding-inline-start:0;max-width:none;}
  .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__a{grid-template-rows:1fr;}
  .faq__a-in{overflow:hidden;min-height:0;padding-top:0;padding-inline-start:48px;
    max-width:988px;font-family:var(--ff-kr);font-weight:400;font-size:18px;line-height:32px;color:#fff;
    opacity:0;
    transition:padding-top var(--faq-dur) var(--faq-ease),opacity var(--faq-dur) var(--faq-ease);}
  .faq__i.is-open .faq__a-in{padding-top:24px;opacity:1;transition-delay:0s,var(--faq-dur);}
  .body-m--end{text-align:right;justify-self:end;}
  @media (prefers-reduced-motion:reduce){
    .faq__a,.faq__a-in,.faq__num,.faq__cat,.faq__qt,.faq__plus,.faq__q,.faq__q::before,.faq__i{transition:none;}
  }
  @media (max-width:900px){
    #faq .wrap--col{gap:28px;}
    .faq__i.is-open,
    .faq__i.is-closing{padding:24px;--faq-pad-x:24px;}
    .faq__i:not(.is-open):not(.is-closing){padding-inline:20px;--faq-pad-x:20px;}
    .faq__i.is-open .faq__qt,.faq__i.is-closing .faq__qt,.faq__a-in{padding-inline-start:0;max-width:none;}
    .faq__i.is-open .faq__qt,.faq__i.is-closing .faq__qt{transform-origin:left top;}
    .body-m--end{text-align:left;justify-self:start;}
  }

  /* ── QUICK INFORMATION (84:655) ────────────────────────────────────────── */
  /* 84:657 eyebrow↔헤드 gap 18 · 84:659 gap 128 · info 736
     84:661 Gmarket Medium 18 / 1.6 · 라벨 100 rgba(255,255,255,.5) · 값 #fff */
  .eyebrow + .qi__head{margin-block-start:18px;}
  .qi__head{display:flex;gap:128px;align-items:flex-start;}
  .qi__label{flex:0 1 auto;min-width:0;}
  .qi__label .h-d2{color:#fff;}
  .qi__info{flex:0 1 736px;width:736px;max-width:100%;min-width:0;
    display:flex;flex-direction:column;gap:4px;
    font-family:var(--ff-brand);font-weight:500;font-size:18px;line-height:1.6;}
  .qi__row{display:flex;align-items:center;gap:10px;width:100%;}
  .qi__row dt{flex:0 0 100px;width:100px;color:var(--c-dim);padding-top:3px;}
  .qi__row dd{flex:1 1 auto;min-width:0;color:#fff;padding-top:3px;}
  @media (max-width:1660px){
    .eyebrow + .qi__head{margin-block-start:.938vw;}
    .qi__head{gap:6.667vw;}
    .qi__info{flex-basis:38.333vw;width:38.333vw;font-size:.938vw;}
    .qi__row{gap:.521vw;}
    .qi__row dt{flex-basis:5.208vw;width:5.208vw;}
  }
  @media (max-width:900px){
    .qi__head{flex-wrap:wrap;gap:var(--gap-md);}
    .qi__label{flex:1 1 320px;}
    .qi__info{flex:1 1 320px;width:auto;font-size:clamp(15px,.938vw,18px);}
    .qi__row dt{flex-basis:100px;width:100px;}
  }
  /* 시안 84:671 Performance_Grid — 상단 2px #333 · pt 64 · 열 400×4
     숫자 84:673 Gmarket Bold 68 · + 는 Medium 동일 크기 · 라벨 Noto 18 #fff · gap 20 */
  .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
    margin-block-start:clamp(28px,3.333vw,64px);padding-block-start:clamp(28px,3.333vw,64px);
    border-top:2px solid #333;}
  @media (max-width:900px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-md);}}
  @media (max-width:480px){.metrics{grid-template-columns:minmax(0,1fr);}}
  .metric__n{font-family:var(--ff-brand);font-weight:700;font-size:clamp(38px,3.542vw,68px);
    line-height:1;background:var(--grad-brand);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    padding-top:3px;white-space:nowrap;}
  .metric__plus{font-weight:500;}
  .metric__l{font-family:var(--ff-kr);font-weight:400;font-size:clamp(15px,.938vw,18px);
    line-height:normal;color:#fff;margin-block-start:20px;}

  /* ── ABOUT IMAGE CARDS (84:643) ──────────────────────────────────────────
     카드 620+24+956 · 타이틀 Gmarket 38/48 · 본문 Noto 18/32 #fff
     링크 Noto Semibold 16 · rgba(255,255,255,.5) · 이미지 위 딤 52% */
  .sec--about{position:relative;}
  .sec--about::before{content:"";position:absolute;top:-260px;right:0;z-index:0;
    width:1360px;height:1779px;pointer-events:none;
    opacity:var(--about-shape-o, 1);transform:translateX(var(--about-shape-x, 0px));
    background:url("../images/main/bg_main_about_shape.svg") no-repeat right center / 1360px 1779px;}
  .sec--about.has-about-shape::before{content:none;}
  .about-shape{position:absolute;top:-260px;right:0;z-index:0;display:block;
    width:1360px;height:1779px;pointer-events:none;}
  @media (max-width:1920px){
    .sec--about::before,.about-shape{top:calc(260 / 1920 * -100vw);width:calc(1360 / 1920 * 100vw);
      height:calc(1779 / 1920 * 100vw);
      background-size:calc(1360 / 1920 * 100vw) calc(1779 / 1920 * 100vw);}
  }
  .sec--about > .inner{position:relative;z-index:1;}
  .abtext{background:var(--c-panel);border-radius:var(--r-lg);
    padding:clamp(24px,1.563vw,30px) clamp(24px,2.083vw,40px);
    display:flex;flex-direction:column;gap:clamp(20px,1.667vw,32px);justify-content:center;}
  .abtext__t{font-family:var(--ff-brand);font-weight:700;
    font-size:clamp(26px,1.979vw,38px);line-height:1.263;
    background:var(--grad-brand);
    -webkit-background-clip:text;background-clip:text;color:transparent;padding-top:3px;}
  .abtext__b{font-family:var(--ff-kr);font-weight:400;
    font-size:clamp(15px,.938vw,18px);line-height:1.778;color:#fff;}
  .abtext .btn-line{gap:6px;font-weight:600;font-size:16px;color:rgba(255,255,255,.5);
    transition:color var(--dur) var(--ease-out-quart);}
  /* 글자와 같이 currentColor — hover 때 시안. filter 보간은 무지개로 지나간다. */
  .abtext .btn-line img{display:none;}
  .abtext .btn-line::after{content:"";width:24px;height:24px;flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:url("../images/comm/icon_arrow_right.svg") center / contain no-repeat;
    mask:url("../images/comm/icon_arrow_right.svg") center / contain no-repeat;}
  .abtext .btn-line:hover,.abtext .btn-line:focus-visible{color:var(--c-cyan);}
  .abimg{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-panel);
    min-height:clamp(240px,29.688vw,570px);}
  .abimg>img{width:100%;height:100%;object-fit:cover;}
  .abimg::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,0) 100%);}

  /* ── HIGHLIGHT (102:252) ───────────────────────────────────────────────── */
  .hl{display:grid;gap:clamp(14px,1.25vw,24px);}
  @media (min-width:901px){.hl{grid-template-columns:1040fr 536fr;}}
  .hl__stack{display:grid;gap:clamp(14px,1.25vw,24px);grid-template-rows:1fr 1fr;}
  .vcard__tag{position:relative;z-index:1;font-family:var(--ff-kr);font-weight:500;
    font-size:clamp(13px,.781vw,15px);line-height:20px;color:#fff;}
  .vcard__foot{position:relative;z-index:1;display:flex;align-items:flex-end;
    justify-content:space-between;gap:clamp(16px,1.25vw,24px);width:100%;}
  .vcard__txt{min-width:0;}
  .vcard__meta{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xs);
    line-height:20px;color:var(--c-dim);padding-top:3px;}
  .vcard__t{font-family:var(--ff-kr);font-weight:700;font-size:clamp(22px,1.771vw,34px);
    line-height:1.294;color:var(--c-ink);margin-block-start:12px;}
  .rcard--grad{background:var(--grad-brand);color:#121212;}
  .rcard__lb{font-family:var(--ff-brand);font-weight:500;font-size:var(--fs-xxs);
    line-height:20px;color:var(--c-dim);padding-top:3px;}
  .rcard--grad .rcard__lb,.rcard--grad .rcard__q,.rcard--grad .rcard__m{color:#121212;}
  .rcard__q{font-family:var(--ff-kr);font-weight:700;font-size:clamp(18px,1.25vw,24px);
    line-height:1.417;}
  .rcard__m{font-family:var(--ff-kr);font-weight:500;font-size:var(--fs-xs);line-height:20px;}
  .rcard__t{font-family:var(--ff-kr);font-weight:700;font-size:clamp(18px,1.25vw,24px);
    line-height:1.417;color:var(--c-ink);}
  .rcard__c{font-size:var(--fs-xs);line-height:22px;color:var(--c-mute);}
  .linkarrow{display:inline-flex;align-items:center;gap:6px;
    font-family:var(--ff-kr);font-weight:500;font-size:16px;line-height:1;color:var(--c-cyan);}
  .linkarrow img{width:24px;height:24px;}
  @media (max-width:900px){
    .vcard__foot{flex-direction:column;align-items:flex-start;}
    .btn-fill{width:100%;}
    .hero{min-height:max(600px,100vh);padding:20px 0;}
    .hero__copy{font-size:15px;line-height:1.6;}
    .hero__in{gap:12px;}
    .hcard{padding:18px 20px;min-height:0;}
    .hcard__v{font-size:16px;}
    .hcard--cta .hcard__v{font-size:15px;}
    .hcard__ico{width:24px;height:24px;}
    .daytab{padding:12px 8px 14px 0;gap:4px;}
    .daytab__d{font-size:22px;}
    .pcard{padding:24px;}
    .pcard__t{font-size:18px;line-height:1.4;}
    .pcard--lead .pcard__t,
    #panel-day2 .pcard--lead .pcard__t,
    #panel-day3 .pcard--lead .pcard__t{font-size:22px;}
    .pcard--fill .pcard__t{font-size:16px;line-height:1.4;}
    .pcard__k{font-size:14px;}
    .pcard--lead .pcard__m{font-size:14px;line-height:1.5;}
    .more{padding:24px 20px;min-height:0;}
    .more__t{font-size:20px;}
    .more .btn-line,.abtext .btn-line,.linkarrow,.faq__all{font-size:14px;}
    .ncard__t{font-size:18px;}
    .faq__aside .body-m{font-size:14px;}
    .faq__num,.faq__cat{font-size:13px;}
    .faq__plus{font-size:16px;}
    .faq__qt{font-size:16px;}
    .faq__i.is-open .faq__qt{font-size:22px;}
    .faq__i.is-open.is-qt-hold .faq__qt,
    .faq__i.is-closing .faq__qt{font-size:16px;}
    .faq__a-in{font-size:14px;line-height:1.65;}
    .qi__info{font-size:14px;}
    .metric__n{font-size:36px;}
    .metric__l{font-size:13px;margin-block-start:8px;}
    .abtext__t{font-size:22px;}
    .abtext__b{font-size:14px;line-height:1.65;}
    .vcard{min-height:240px;}
    .vcard__t{font-size:20px;}
    .rcard__q,.rcard__t{font-size:16px;}
  }
  @media (max-width:600px){
    .hero__copy{font-size:14px;}
    .pcard--lead .pcard__t,
    #panel-day2 .pcard--lead .pcard__t,
    #panel-day3 .pcard--lead .pcard__t{font-size:20px;}
    .more__t{font-size:18px;}
    .ncard__t{font-size:16px;}
    .faq__i.is-open .faq__qt{font-size:18px;}
    .metric__n{font-size:28px;}
    .abtext__t{font-size:20px;}
    .vcard__t{font-size:18px;}
  }

  .faq__no{font-family:var(--ff-display);font-weight:700;color:var(--c-accent);margin-inline-end:.5em;}
  .faq__tag{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-xxs);color:var(--c-cyan);
    letter-spacing:.06em;display:block;margin-block-end:6px;}
}