/* ============================================================================
   index_dev.php 전용 — 메인 V4 (라이브 index.php 에 영향 없음)
   ========================================================================== */
@layer components {

  /* ── 히어로 키비주얼 슬라이스 ───────────────────────────────────────────
     difference 는 같은 쌓임 맥락의 배경과만 섞인다.
     .hero__in z-index 를 빼 키비주얼 위에서 한 덩어리로 블렌드. */
  .page-v4 .hero,.page-v4 .hero--v4{overflow:hidden;}
  .page-v4 .hero--v4{min-height:100vh;background:#050508;isolation:isolate;clip-path:inset(0);}
  .page-v4 .hero--v4 .hero__in{z-index:auto;isolation:auto;mix-blend-mode:normal;
    max-width:none;width:100%;margin:0;padding-inline:clamp(20px,3.646vw,70px);
    gap:clamp(20px,2.604vw,50px);}
  .page-v4 .hero--v4 .hero__in::before{content:none;}
  .hero__kv{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    perspective:900px;-webkit-perspective:900px;perspective-origin:70% 50%;}
  .hero__kv-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .hero__slices{position:absolute;inset:0;overflow:visible;
    transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
  .hero__slices span{position:absolute;top:0;height:100%;overflow:hidden;
    transform-origin:right center;-webkit-transform-origin:right center;
    transform:translateX(10px) rotateY(-30deg);opacity:0;backface-visibility:hidden;
    transition:transform .5s ease-out,opacity .5s ease;}
  .hero__slices span i{position:absolute;top:0;height:100%;display:block;
    background-repeat:repeat-x;background-position:0 0;
    background-size:var(--kv-w,100%) 100%;}
  .hero__kv.is-on .hero__slices span{transform:translateX(0) rotateY(0deg);opacity:1;}
  .hero__kv.is-pan .hero__slices span{transition:none;}
  .hero__kv.is-pan .hero__slices span i{animation:hero-kv-pan 90s linear infinite;}
  @keyframes hero-kv-pan{to{background-position:calc(var(--kv-w,100%) * -1) 0;}}
  .page-v4 .hero__t{flex-direction:column;align-items:stretch;row-gap:clamp(8px,1.042vw,20px);
    color:#fff;font-family:var(--ff-brand);font-weight:700;letter-spacing:0;
    font-size:min(12.5vw,240px);line-height:1.12;}
  .page-v4 .hero__row{display:flex;flex-wrap:nowrap;column-gap:.22em;width:100%;}
  .page-v4 .hero__row:first-child{justify-content:flex-start;}
  .page-v4 .hero__row:last-child{justify-content:flex-end;}
  .page-v4 .hero__tw{overflow:hidden;padding-top:.08em;margin-top:-.04em;flex:0 0 auto;}
  .page-v4 .hero__t.is-ready .hero__tw{width:auto !important;overflow:visible;}
  .page-v4 .hero__tw--year{width:auto;margin-inline-start:0;flex:0 0 auto;}
  .page-v4 .hero__tw-in,.page-v4 .hero__year{color:#fff;}
  .page-v4 .hero__meta{display:flex;align-items:center;justify-content:center;
    gap:clamp(8px,.625vw,12px);font-family:var(--ff-brand);letter-spacing:0;
    font-size:clamp(14px,1.25vw,24px);color:#fff;line-height:normal;
    mix-blend-mode:normal;isolation:isolate;}
  .page-v4 .hero__meta-d{font-weight:500;}
  .page-v4 .hero__meta-v{font-weight:700;}
  @media (prefers-reduced-motion:reduce){
    .hero__slices span{transform:none;opacity:1;}
    .hero__kv.is-pan .hero__slices span i{animation:none;}
  }

  /* ── 헤더 사전등록 ────────────────────────────────────────────────────────
     1920 시안: GNB gap 100 · 로고 232×30 · 사전등록 170×48 · acts gap 20 */
  .page-v4 .hdr__in{min-width:0;gap:clamp(12px,1.25vw,24px);}
  .page-v4 .hdr__logo img{width:clamp(168px,12.083vw,232px);height:auto;aspect-ratio:232/30;max-width:100%;}
  .page-v4 nav.gnb{flex:1 1 auto;min-width:0;justify-content:center;}
  .page-v4 .gnb__list{gap:clamp(16px,5.208vw,100px);}
  .page-v4 .gnb__a{font-size:clamp(14px,.885vw,17px);}
  .page-v4 .acts{gap:clamp(10px,1.042vw,20px);flex:0 0 auto;}
  .btn-reg{display:inline-flex;align-items:center;justify-content:center;
    gap:clamp(4px,.313vw,6px);width:clamp(120px,8.854vw,170px);height:clamp(36px,2.5vw,48px);
    padding:0 clamp(10px,.833vw,16px);border-radius:clamp(6px,.417vw,8px);overflow:hidden;flex-shrink:0;
    --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:600;font-size:clamp(13px,.833vw,16px);
    line-height:1;white-space:nowrap;text-align:center;
    transition:background-size var(--dur) var(--ease-out-quart);}
  .btn-reg:hover,.btn-reg:focus-visible{background-size:100% 100%;}
  .btn-reg img,.btn-reg__ico{width:clamp(16px,1.042vw,20px);height:clamp(16px,1.042vw,20px);flex:0 0 auto;}
  .btn-reg__v{display:inline-block;}
  .btn-reg__v.is-hot{color:#fff;}
  .btn-reg__ico.is-hot{filter:brightness(0) invert(1);}
  @media (max-width:1024px){
    .btn-reg{width:auto;min-width:0;height:40px;padding:0 14px;font-size:14px;}
  }
  @media (max-width:575px){
    .page-v4 .btn-reg{display:none;}
    .page-v4 .acts .gnb__i--lang{transform:translateX(10px);}
    .page-v4 .hdr__logo img{width:168px;height:auto;aspect-ratio:232/30;max-width:100%;}
  }

  /* ── 등록/공지 ─────────────────────────────────────────────────────────── */
  .regnote{background:#fff;color:#111;padding-block:clamp(80px,7.813vw,150px);}
  .regnote__in{display:flex;align-items:flex-start;justify-content:space-between;
    gap:clamp(40px,6vw,115px);}
  .regnote__left{flex:0 1 auto;min-width:50%;display:flex;flex-direction:column;
    gap:clamp(40px,3.646vw,70px);}
  .regnote__head{display:flex;flex-direction:column;gap:30px;}
  .regnote__lb{font-family:var(--ff-kr);font-weight:600;font-size:15px;
    color:rgba(0,0,0,.5);line-height:normal;}
  .regnote__t{font-family:var(--ff-kr);font-weight:700;
    font-size:clamp(34px,3.542vw,56px);line-height:1.2;color:#111;}
  .regnote__t small{display:block;margin-top:.4em;font-size:.7em;font-weight:500;line-height:1.3;}
  .venue__go{--go-grad:0;position:relative;display:flex;align-items:center;
    justify-content:space-between;isolation:isolate;overflow:hidden;
    width:min(100%,450px);padding:16px 20px 20px;border-radius:calc(var(--go-grad)*20px);
    border-bottom:1px solid rgb(17 17 17 / calc(1 - var(--go-grad)));
    font-family:var(--ff-kr);font-weight:600;font-size:20px;color:#111;}
  .venue__go::before{content:"";position:absolute;inset:0;z-index:0;
    pointer-events:none;background:var(--grad-brand);opacity:var(--go-grad);}
  .venue__go::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;
    z-index:2;height:1px;pointer-events:none;background:var(--grad-brand);opacity:var(--go-grad);}
  .venue__go .go-swap__t{position:relative;z-index:1;
    color:color-mix(in srgb,#111 calc((1 - var(--go-grad))*100%),#fff);}
  .venue__go .go-swap__ico{position:relative;z-index:1;
    width:36px;height:36px;flex:0 0 auto;filter:invert(var(--go-grad));}
  .regnote__go{position:relative;display:flex;align-items:center;
    justify-content:space-between;isolation:isolate;overflow:hidden;
    width:min(100%,450px);padding:16px 20px 20px;border-radius:20px;
    font-family:var(--ff-kr);font-weight:600;font-size:20px;color:#fff;
    background-image:var(--grad-brand-flow);background-size:200% 100%;
    background-position:100% 50%;background-repeat:no-repeat;
    transition:background-position .8s var(--ease-out-quart);}
  .regnote__go:hover,.regnote__go:focus-visible{background-position:0% 50%;}
  .regnote__go .go-swap__t,.regnote__go .go-swap__t.is-hot{position:relative;z-index:1;color:#fff;}
  .regnote__go .go-swap__ico,.regnote__go .go-swap__ico.is-hot{position:relative;z-index:1;
    width:36px;height:36px;flex:0 0 auto;filter:brightness(0) invert(1);}
  @media (prefers-reduced-motion:reduce){
    .venue__go:hover,.venue__go:focus-visible,.venue__go.is-hot{--go-grad:1;}
  }
  .regnote__list{flex:1 1 auto;min-width:0;width:auto;max-width:700px;display:flex;flex-direction:column;}
  .regnote__line{display:block;width:100%;height:1px;margin:0;border:0;background:#111;}
  .regnote__i{display:flex;align-items:flex-start;gap:20px;padding:30px;border-radius:20px;}
  .regnote__no{font-family:var(--ff-brand);font-weight:500;font-size:16px;
    color:rgba(0,0,0,.7);flex:0 0 auto;padding-top:3px;}
  .regnote__cat{font-family:var(--ff-brand);font-weight:500;font-size:16px;
    color:rgba(0,0,0,.7);padding-top:3px;}
  .regnote__tx{margin-block-start:16px;font-family:var(--ff-kr);font-weight:600;
    font-size:clamp(20px,1.458vw,28px);line-height:1.4;color:#111;}
  @media (max-width:767px){
    .regnote__in{flex-direction:column;justify-content:flex-start;}
    .regnote__left{flex:none;width:100%;min-width:0;}
    .regnote__list{width:100%;max-width:none;}
  }
  @media (max-width:600px){
    .regnote__i{padding:22px 18px;}
    .regnote__go,.venue__go{font-size:16px;}
    .regnote__go .go-swap__ico,.venue__go .go-swap__ico{width:24px;height:24px;}
  }

  /* ── Program Highlight ───────────────────────────────────────────────────
     탭: Gmarket Sans Bold 28 / Medium 16
     패널 dim: 피그마와 동일 — 플랫 20% + 하단 80% (이미지에 구운 처리 아님) */
  .phl{background:#121212;}
  .phl .inner{width:100%;max-width:var(--inner-max);}
  .phl .daypanel{width:100%;}
  .page-v4 .daytabs{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-v4 .daytab{gap:15px;padding:18px 8px 28px 0;color:rgba(255,255,255,.3);}
  .page-v4 .daytab:hover,.page-v4 .daytab:focus-visible{color:#fff;}
  .page-v4 .daytab[aria-selected="true"],
  .page-v4 .daytab[aria-selected="true"]:hover,
  .page-v4 .daytab[aria-selected="true"]:focus-visible{color:var(--c-cyan);}
  .page-v4 .daytab__d{font-family:var(--ff-brand);font-weight:700;
    font-size:clamp(20px,1.458vw,28px);line-height:normal;}
  .page-v4 .daytab__dt{font-family:var(--ff-brand);font-weight:500;
    font-size:clamp(13px,.833vw,16px);line-height:normal;}
  .page-v4 .daytab[aria-selected="true"] .daytab__dt{color:#fff;}
  .phl .daypanel,.phl .phl__card,.phl__copy,.phl__badge,.phl__k,.phl__t,.phl__m{
    -webkit-user-select:none;user-select:none;}
  .phl__badge{position:absolute;top:clamp(28px,2.5vw,48px);left:clamp(24px,3.021vw,58px);
    z-index:1;margin:0;color:#fff;font-family:var(--ff-brand);font-weight:500;
    font-size:clamp(12px,.938vw,18px);line-height:1.3;}
  .phl .phl__card{width:100%;max-width:100%;min-height:clamp(300px,35.417vw,680px);
    padding:clamp(28px,2.5vw,48px) clamp(24px,3.021vw,58px);justify-content:center;}
  .phl .pcard__bg{z-index:0;pointer-events:none;}
  .phl .pcard__bg>img{width:100%;height:auto;max-width:none;object-fit:unset;
    pointer-events:none;-webkit-user-drag:none;user-select:none;}
  .phl .phl__card::after{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.2)),
      linear-gradient(180deg,rgba(16,16,20,0) 50%,rgba(16,16,20,.8) 100%);}
  .phl__copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;
    width:100%;max-width:900px;}
  .phl__k{font-family:var(--ff-kr);font-weight:400;font-size:clamp(16px,1.042vw,20px);
    line-height:1.3;color:#fff;opacity:.8;}
  .phl__t{font-family:var(--ff-kr);font-weight:700;font-size:clamp(20px,2.813vw,54px);
    line-height:1.3;color:#fff;}
  .phl__t-ko{display:block;margin-block-start:8px;font-weight:500;
    font-size:clamp(15px,1.25vw,24px);line-height:1.4;opacity:.88;}
  .phl__m{font-family:var(--ff-kr);font-weight:400;font-size:clamp(16px,1.458vw,28px);
    line-height:1.5;color:#fff;}
  .page-v4 .more .btn-line{font-size:20px;}
  .page-v4 .more .btn-line img{width:32px;height:32px;}
  @media (max-width:600px){
    .page-v4 .daytabs{grid-template-columns:repeat(3,minmax(0,1fr));}
    .page-v4 .daytab{gap:6px;padding:12px 6px 16px 0;}
    .page-v4 .daytab__d{font-size:clamp(16px,4.8vw,20px);}
    .page-v4 .daytab__dt{font-size:12px;}
    .page-v4 .more .btn-line{font-size:16px;}
    .page-v4 .more .btn-line img{width:26px;height:26px;}
  }

  /* ── About ───────────────────────────────────────────────────────────────
     셰이프 폭은 1920 초과 1360px 고정, 1920 이하부터 1360/1920 vw.
     top 도 같은 시점: PC -350px → 1920 이하 -18.2291vw (350/1920). */
  .sec--about-v4{background:#9160ff;overflow:visible;}
  .sec--about-v4::before{content:none;opacity:0;}
  .sec--about-v4 .about-shape{opacity:0;visibility:hidden;}
  .sec--about-v4::before,
  .sec--about-v4 .about-shape{top:-350px;}
  .sec--about-v4 .abtext{background:#541fcd;}
  @media (max-width:1920px){
    .sec--about-v4::before,
    .sec--about-v4 .about-shape{top:-18.2291vw;}
  }

  /* ── Deep Dive Into 숫자 ────────────────────────────────────────────────
     시안 1600: 타이틀 0–700 · info 828–1564 (736). 절반(800)에서 28px 오른쪽. */
  .qi--v4 .qi__head{display:grid;grid-template-columns:51.75% 46%;gap:0;
    justify-content:start;align-items:start;}
  .qi--v4 .qi__info{width:100%;flex:none;max-width:none;}
  .qi--v4 .metric__n{background:var(--grad-brand);-webkit-background-clip:text;
    background-clip:text;color:transparent;}
  @media (max-width:900px){
    .qi--v4 .qi__head{grid-template-columns:1fr;row-gap:var(--gap-md);}
    .qi--v4 .qi__info{width:auto;}
  }
  @media (max-width:480px){
    .page-v4 .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  }

  /* ── Grand Hyatt ───────────────────────────────────────────────────────── */
  .venue{background:#fff;color:#111;padding-block:clamp(80px,7.813vw,150px);}
  .venue__in{display:flex;align-items:stretch;gap:clamp(32px,4.167vw,80px);}
  .venue__left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
    justify-content:space-between;gap:40px;}
  .venue__meta{font-family:var(--ff-kr);font-weight:600;font-size:15px;
    color:rgba(0,0,0,.5);}
  .venue__t{margin-block-start:30px;font-family:var(--ff-brand);font-weight:700;
    font-size:clamp(32px,2.5vw,48px);line-height:58px;color:#111;padding-top:3px;}
  .venue__map{flex:0 0 auto;width:800px;max-width:100%;height:480px;border-radius:20px;overflow:hidden;
    background:#f3f3f3;}
  .venue__map img{width:100%;height:100%;object-fit:cover;}
  @media (max-width:1200px){
    .venue__in{flex-direction:column;align-items:stretch;}
    .page-v4 .venue__left{flex:0 0 auto;width:100%;height:auto;min-height:0;
      justify-content:flex-start;}
    .venue__map{width:100%;height:auto;aspect-ratio:800/480;}
  }
  @media (max-width:600px){
    .venue__t{line-height:1.2;}
  }
}