/* ==========================================================================
   theme-skins-6 — 1~4번(블랙 레드 · 블랙 그린 · 블랙 오렌지 · 화이트 블루) 메인 배너에 흰색을 크게 (2026-10-01 밤)
   내용(20% · 5% · 1,000+)과 색은 그대로, 구도만 흰 면 중심으로
   whiteslab  (1~4, 2026-10-01 밤 사용자 선택으로 통일) — 어두운 바탕 + 오른쪽 큰 흰 사선 판(빗살 · 입자) · 판 위 포인트 숫자에 검정 그림자 · 이음매 포인트 띠
   whitesplit (2 · 4) — 왼쪽 흰 판(검정 글 · 큰 회색 윤곽 글자) · 오른쪽 어두운 사선 판 위 흰 숫자 · 이음매 빗살 띠
   ========================================================================== */
:root:is([data-hero="whiteslab"], [data-hero="whitesplit"]) .hero{
  --grain6:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
  --ink6:#111215;
}


/* ==========================================================================
   whiteslab — 오른쪽 흰 사선 판
   ========================================================================== */
:root[data-hero="whiteslab"] .hero{
  background:var(--grain6), radial-gradient(50% 80% at 10% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(115deg, var(--hero-bg) 30%, var(--hero-bg-2));
}
:root[data-hero="whiteslab"] .hero__slab{
  width:52%; right:-4%;
  background:
    var(--grain6),
    repeating-linear-gradient(-66deg, rgb(0 0 0 / .03) 0 2px, transparent 2px 12px),
    radial-gradient(80% 70% at 70% 30%, #ffffff, #eceef1 80%);
  clip-path:polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}
/* 숫자 뒤 빗살 — 검정 (포인트 색으로 되돌리려면 var(--ink6) 를 var(--accent), 투명도 .75 로) · 숫자 둘레에 모였다가 가장자리로 흐려진다 */
:root[data-hero="whiteslab"] .hero__slab::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(-66deg, var(--ink6) 0 4px, transparent 4px 12px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(50% 72% at 64% 46%, #000 40%, transparent 86%); mask-image:radial-gradient(50% 72% at 64% 46%, #000 40%, transparent 86%);
}
/* 이음매 — 굵은 포인트 띠 + 가는 흰 선 */
:root[data-hero="whiteslab"] .hero__stripe--1{ right:calc(52% - 4% + 6px); width:22px; opacity:1; background:var(--accent); transform:skewX(-13.5deg); }
:root[data-hero="whiteslab"] .hero__stripe--2{ right:calc(52% - 4% + 40px); width:4px; opacity:.7; background:#fff; transform:skewX(-13.5deg); }
/* 어두운 쪽을 스치는 흰 속도선 */
:root[data-hero="whiteslab"] .hero__light{
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / .5) 60%, transparent) 0 22% / 200px 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 90%, transparent) 60%, transparent) 0 74% / 280px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .3) 60%, transparent) 0 88% / 140px 1px no-repeat;
  animation:slashSpeed 2.8s linear infinite;
}
:root[data-hero="whiteslab"] .hero__pitch{ color:#000; opacity:.06; }
:root[data-hero="whiteslab"] .hero::after{ border-color:var(--ink6); }
/* 흰 판 위 큰 회색 글자 */
:root[data-hero="whiteslab"] .hero__word{
  display:block; position:absolute; right:-1%; bottom:-.2em; z-index:0; white-space:nowrap; pointer-events:none;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:150px; line-height:1; letter-spacing:-.02em;
  color:rgb(0 0 0 / .045);
}
/* 숫자 — 포인트 색 · 검정 단단한 그림자 · 검정 윤곽 메아리 */
:root[data-hero="whiteslab"] .hero__big{ color:var(--accent); }
:root[data-hero="whiteslab"] .hero__big b{ text-shadow:9px 9px 0 var(--ink6); }
:root[data-hero="whiteslab"] .hero__big b::before{ display:none; }
:root[data-hero="whiteslab"] .hero__big i{ color:var(--ink6); text-shadow:none; }
:root[data-hero="whiteslab"] .hero__big span{ background:var(--ink6); color:#fff; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="whiteslab"] .hero__light{ animation:none; } }


/* ==========================================================================
   whitesplit — 왼쪽 흰 판(글) · 오른쪽 어두운 사선 판(숫자)
   ========================================================================== */
:root[data-hero="whitesplit"] .hero{
  color:var(--ink6);
  background:var(--grain6), radial-gradient(70% 90% at 20% 10%, #ffffff, transparent 70%), linear-gradient(100deg, #ffffff 30%, #e9ebee);
}
/* 흰 판의 망점 — 검정으로 옅게 */
:root[data-hero="whitesplit"] .hero::before{ background:radial-gradient(circle, rgb(0 0 0 / .08) 1.2px, transparent 1.6px) 0 0 / 9px 9px; }
:root[data-hero="whitesplit"] .hero__slab{
  width:48%; right:-2%;
  background:
    var(--grain6),
    repeating-linear-gradient(-66deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 12px),
    radial-gradient(70% 80% at 60% 20%, color-mix(in srgb, var(--hero-bg-2) 70%, var(--accent) 12%), var(--hero-bg) 75%);
  clip-path:polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}
/* 이음매 — 포인트 빗살 띠 + 굵은 포인트 선 */
:root[data-hero="whitesplit"] .hero__stripe--1{
  right:calc(48% - 2% + 2px); width:46px; opacity:1; transform:skewX(-14.5deg);
  background:repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 9px);
}
:root[data-hero="whitesplit"] .hero__stripe--2{ right:calc(48% - 2% - 4px); width:8px; opacity:1; background:var(--accent); transform:skewX(-14.5deg); }
:root[data-hero="whitesplit"] .hero__light{
  background:radial-gradient(50% 70% at 85% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}
:root[data-hero="whitesplit"] .hero__pitch{ color:#fff; opacity:.08; }
/* 흰 판 위 글 */
:root[data-hero="whitesplit"] .hero__kicker{ color:color-mix(in srgb, var(--accent) 62%, #000); }
:root[data-hero="whitesplit"] .hero__title{ color:var(--ink6); font-weight:900; letter-spacing:-.04em; }
:root[data-hero="whitesplit"] .hero__title::after{ content:"."; color:var(--accent); }
:root[data-hero="whitesplit"] .hero__sub{ color:#50535a; }
:root[data-hero="whitesplit"] .hero .btn--gold{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
:root[data-hero="whitesplit"] .hero__cta .btn:not(.btn--gold){ color:var(--ink6); border-color:rgb(17 18 21 / .3); }
:root[data-hero="whitesplit"] .hero__cta .btn:not(.btn--gold):hover{ border-color:var(--ink6); color:var(--ink6); }
:root[data-hero="whitesplit"] .hero__meta{ color:rgb(17 18 21 / .45); }
:root[data-hero="whitesplit"] .hero__meta b{ color:var(--ink6); }
:root[data-hero="whitesplit"] .hero__meta span::before{ background:var(--accent); }
:root[data-hero="whitesplit"] .hero__dot{ color:rgb(17 18 21 / .38); }
:root[data-hero="whitesplit"] .hero__dot.is-on{ color:var(--ink6); }
:root[data-hero="whitesplit"] .hero__dot.is-on::after{ background:var(--accent); }
/* 흰 판 아래 큰 회색 윤곽 글자 */
:root[data-hero="whitesplit"] .hero__word{
  display:block; position:absolute; left:2%; bottom:-.22em; z-index:0; white-space:nowrap; pointer-events:none;
  font-family:var(--font-display); font-style:var(--display-italic); font-weight:900; font-size:160px; line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.5px rgb(0 0 0 / .08);
}
/* 숫자 — 흰색 · 포인트 단단한 그림자 */
:root[data-hero="whitesplit"] .hero__big{ color:#fff; }
:root[data-hero="whitesplit"] .hero__big b{ text-shadow:8px 8px 0 color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-hero="whitesplit"] .hero__big b::before{ display:none; }
:root[data-hero="whitesplit"] .hero__big i{ color:var(--accent); }
:root[data-hero="whitesplit"] .hero__big span{ background:var(--accent); color:var(--accent-ink); }


/* ---- 폰 ---- */
@media (max-width:1023px){
  :root[data-hero="whiteslab"] .hero__slab{ width:46%; right:-4%; }
  :root[data-hero="whiteslab"] .hero__stripe--1{ right:calc(46% - 4% + 4px); width:10px; }
  :root[data-hero="whiteslab"] .hero__stripe--2{ display:none; }
  :root[data-hero="whiteslab"] .hero__big b{ text-shadow:4px 4px 0 var(--ink6); }
  :root[data-hero="whitesplit"] .hero__slab{ width:44%; }
  :root[data-hero="whitesplit"] .hero__stripe--1{ right:calc(44% - 2% + 2px); width:20px; }
  :root[data-hero="whitesplit"] .hero__stripe--2{ right:calc(44% - 2% - 3px); width:5px; display:block; }
  :root[data-hero="whitesplit"] .hero__big b{ text-shadow:4px 4px 0 color-mix(in srgb, var(--accent) 80%, transparent); }
  :root:is([data-hero="whiteslab"], [data-hero="whitesplit"]) .hero__word{ display:none; }
}


/* ==========================================================================
   graphite — 템플릿 D (8 · 10 · 13 · 14번) 전용 (2026-10-02)
   A(오른쪽 흰 사선 판)와 겹치지 않게 구도를 뒤집었다:
   왼쪽 아래에 아주 큰 윤곽 숫자 — 가로 포인트 띠 아래로 잠긴 부분만 포인트색으로 차오른다 · 글은 오른쪽
   그래파이트 매트 질감 · 옅은 세로 투명 선 · 띠를 따라 흐르는 속도선
   ========================================================================== */
:root[data-hero="graphite"] .hero{
  background:
    var(--grain6),
    repeating-linear-gradient(135deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 7px),
    radial-gradient(55% 90% at 22% 80%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--hero-bg) 80%, #2a2b30), var(--hero-bg));
}
:root[data-hero="graphite"] .hero::before{ width:100%; height:100%; background:repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 8.333%); -webkit-mask-image:none; mask-image:none; }
:root[data-hero="graphite"] .hero__slab, :root[data-hero="graphite"] .hero__pitch{ display:none; }
/* 가로 포인트 띠 + 가는 흰 선 — 숫자가 이 띠에 잠긴다 */
:root[data-hero="graphite"] .hero__stripe--1{
  left:0; right:0; top:auto; bottom:29%; width:auto; height:3px; transform:none; opacity:1;
  background:linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
}
:root[data-hero="graphite"] .hero__stripe--2{
  left:0; right:0; top:auto; bottom:calc(29% - 12px); width:auto; height:1px; transform:none; opacity:1;
  background:linear-gradient(90deg, transparent, rgb(255 255 255 / .35) 20%, rgb(255 255 255 / .35) 80%, transparent);
}
/* 띠를 따라 흐르는 속도선 */
:root[data-hero="graphite"] .hero__light{
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / .8) 60%, transparent) 0 calc(71% - 1px) / 240px 2px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .3) 60%, transparent) 0 calc(71% - 14px) / 140px 1px no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .18) 60%, transparent) 0 30% / 180px 1px no-repeat;
  animation:slashSpeed 2.6s linear infinite;
}
/* 구도 — 숫자 왼쪽 · 글 오른쪽 */
:root[data-hero="graphite"] .hero__slide{ grid-template-columns:54% 1fr; }
:root[data-hero="graphite"] .hero__copy{ padding:0 56px 30px 0; }
:root[data-hero="graphite"] .hero__kicker{ color:var(--hero-kick); }
:root[data-hero="graphite"] .hero__big{
  order:-1; justify-self:start; align-self:end; display:grid; justify-items:start; padding:0 0 0 44px; margin-bottom:-38px; color:transparent;
}
:root[data-hero="graphite"] .hero__big span{ order:-1; margin:0 0 6px 10px; background:var(--accent); color:var(--accent-ink); }
:root[data-hero="graphite"] .hero__big b{
  font-size:300px; line-height:.86; letter-spacing:-.03em; color:transparent;
  -webkit-text-stroke:2px rgb(255 255 255 / .85);
  background:linear-gradient(180deg, transparent var(--fill, 41%), var(--accent) var(--fill, 41%)); -webkit-background-clip:text; background-clip:text;
}
/* 채움 시작점 = 가로 띠 높이 (배너 390 · 띠 아래 29% 기준으로 맞춘 값) */
:root[data-hero="graphite"] .hero__big.is-long{ margin-bottom:-10px; }
:root[data-hero="graphite"] .hero__big.is-long b{ font-size:190px; --fill:25%; }
:root[data-style="geo"][data-hero="graphite"] .hero__kicker{ padding:0; background:none; transform:none; color:var(--hero-kick); font-size:15px; letter-spacing:.2em; }
:root[data-hero="graphite"] .hero__big i{ color:transparent; }
:root[data-hero="graphite"] .hero__big b::before{ display:none; }
:root[data-hero="graphite"] .hero__word{ display:none; }
:root[data-hero="graphite"] .hero__dots{ left:54%; }
:root[data-hero="graphite"] .hero__meta{ left:auto; right:56px; }
:root[data-hero="graphite"] .hero::after{ border-color:var(--accent); opacity:.8; }
@media (prefers-reduced-motion:reduce){ :root[data-hero="graphite"] .hero__light{ animation:none; } }
@media (max-width:1023px){
  :root[data-hero="graphite"] .hero__slide{ grid-template-columns:1fr 42%; }
  :root[data-hero="graphite"] .hero__copy{ padding:0 0 0 16px; }
  :root[data-hero="graphite"] .hero__big{ order:0; padding:0; margin-bottom:-14px; }
  :root[data-hero="graphite"] .hero__big b{ font-size:96px; -webkit-text-stroke-width:1.5px; --fill:55%; }
  :root[data-hero="graphite"] .hero__big.is-long{ margin-bottom:-14px; }
  :root[data-hero="graphite"] .hero__big.is-long b{ font-size:60px; }
  :root[data-hero="graphite"] .hero__big span{ margin:0 0 3px 4px; }
}

/* 템플릿 A 입구 카드 — 테마마다 모양은 조금씩 다르게(기본 · 빗살 · 굵은 날 · 대각선), 뒤 영문 윤곽은 모두 포인트색으로 통일 */
:root:is([data-theme="dark-green"], [data-theme="dark-orange"], [data-theme="dark-sky"]) .cat__en{ -webkit-text-stroke-color:color-mix(in srgb, var(--accent) 60%, transparent); }
:root:is([data-theme="dark-green"], [data-theme="dark-orange"], [data-theme="dark-sky"]) .cat:hover .cat__en{ -webkit-text-stroke-color:var(--accent); }
:root[data-theme="dark-sky"][data-cats="duo"] .cat{   /* 대각선 면을 조금 줄여 색 면이 과하지 않게 */
  background:linear-gradient(-28deg, var(--accent) 0 20%, #fff 20% 21.5%, transparent 21.5%), linear-gradient(160deg, var(--surface-2), var(--surface));
}