/* =========================================================================
   DEOK — base.css
   구조 + 디자인 토큰. 색·폰트·모서리 등 '테마가 바꾸는 값'은 전부 CSS 변수로.
   테마 파일(themes/*.css)은 이 변수와 몇 개 레이아웃 규칙만 덮어쓴다.
   ========================================================================= */

/* ---- 기본 토큰(중립값). 테마가 없더라도 화면이 깨지지 않게 한다 ---- */
:root{
  color-scheme:dark;            /* 스크롤바·체크박스 같은 브라우저 기본 부품도 어두운 바탕에 맞게 — 밝은 테마(clean-minimal 등 넷)는 light 로 바꾼다 */
  /* 색 */
  --bg:#0a0b0f;
  --bg-2:#111319;
  --surface:#151824;
  --surface-2:#1c2030;
  --fg:#f3f5f9;
  --fg-muted:#a7adbe;
  --fg-dim:#7d8192;             /* 흐린 글씨도 배경 대비 4.5:1 이상 (날짜·꼬리말) */
  --accent:#3b6cff;
  --accent-2:#7aa2ff;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --live:#d9324e;               /* 흰 글씨(LIVE NOW)가 4.5:1 을 넘는 빨강 */
  --on-accent:#fff;             /* 강조색 위 글씨 — 밝은 강조색 테마는 진한 색으로 바꾼다 */
  --on-live:#fff;

  /* 활자 (data-font 프리셋이 --font-display / --font-body 를 바꾼다) */
  --font-display:'Nanum Myeongjo', serif;
  --font-body:'Pretendard','Noto Sans KR', system-ui, sans-serif;
  /* 손글씨(강조 한 줄). --script-family 는 app.js 가 '보이는 글자만' 담아 구글 글꼴에서 받는 이름 */
  --font-script:'Nanum Pen Script', cursive;
  --script-family:'Nanum Pen Script';
  --script-family-ko:'';
  --tracking:.02em;
  --tracking-wide:.28em;

  /* 형태 */
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --maxw:1180px;
  --gutter:clamp(18px,4vw,44px);
  --shadow:0 20px 60px rgba(0,0,0,.45);

  /* 히어로 배경(테마가 교체). 관리자가 올린 사진은 data-photo="hero.image" 로 그 위에 깔린다 */
  --hero-image:
    radial-gradient(120% 90% at 70% 10%, rgba(59,108,255,.20), transparent 55%),
    radial-gradient(90% 70% at 20% 90%, rgba(122,162,255,.12), transparent 60%),
    linear-gradient(180deg, #0c0e15 0%, #070810 100%);
  --hero-overlay:linear-gradient(180deg, rgba(6,7,14,.15) 0%, rgba(6,7,14,.55) 60%, var(--bg) 100%);
  /* 첫 화면 사진의 아래 끝이 스며드는 색 — 어두운 테마는 바탕색, 밝은 테마는 어둡게 끊는다(흰 글씨가 밝은 바탕에 얹히지 않게) */
  --hero-fade:var(--bg);
}

*{box-sizing:border-box}
[hidden]{display:none!important}                    /* display 를 준 규칙(.about-tags 등)이 hidden 을 이기지 못하게 */
html{scroll-behavior:smooth;scroll-padding-top:84px}   /* #섹션으로 가면 붙어 있는 상단 메뉴에 제목이 가리지 않게 */
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  line-height:1.6;
  word-break:keep-all;          /* 한글은 단어 단위로 줄바꿈 ('스트|리머' 처럼 끊기지 않게) */
  overflow-wrap:anywhere;       /* 너무 긴 낱말만 예외로 끊는다 — break-word 와 달리 칸 너비 계산에도 들어가
                                   띄어쓰기 없는 긴 제목이 휴대폰에서 화면 밖으로 밀려 잘리지 않는다 */
  letter-spacing:var(--tracking);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.12;margin:0;text-wrap:balance}   /* 제목이 두 줄이 되면 줄 길이를 고르게 (마지막 낱말 하나만 넘어가지 않게) */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-size:.72rem;letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--fg-muted);font-family:var(--font-body);font-weight:600;
}

/* ---------------------------- 상단 내비 ---------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:16px var(--gutter);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background:var(--bg);   /* color-mix 를 모르는 옛 브라우저(iOS 16.1 이하 등)는 아래 줄을 버린다 — 예전엔 그때 메뉴 띠가 투명해 본문 글자와 겹쳤다 */
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line);
}
.nav.open{z-index:80}   /* 펼친 메뉴는 오른쪽 아래 묶음(.dock, 70) 위로 — 가로로 눕힌 휴대폰·메뉴가 많은 휴대폰에서 라이브 카드·맨 위로 단추가 메뉴 항목을 덮었다 */
.brand{
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;
  letter-spacing:.06em;
}
.brand b{color:var(--accent)}
.nav .links{display:flex;gap:22px;margin-left:8px}
/* 첫 화면: 관리자 메뉴를 그리기 전엔 기본 메뉴를 감춰 둔다(자리는 그대로) — 기본 메뉴가 잠깐 보였다 관리자 메뉴로 바뀌지 않게.
   app.js 가 메뉴를 그리면 html.nav-wait 를 뗀다. 스크립트가 못 오면 3초 뒤 저절로 보인다 */
.nav-wait .nav .links{visibility:hidden;animation:nav-show 0s 3s forwards}
@keyframes nav-show{to{visibility:visible}}
/* 첫 화면: 글꼴이 다 오기 전엔 글자를 감춘다(바탕색은 그대로) — 컴퓨터 기본 글꼴 → 웹 글꼴 → 테마 손글씨로 두세 번 바뀌어 보이지 않게.
   app.js(fontGate)가 글꼴이 다 오면 html.font-wait 를 뗀다 (늦어도 1.5초). 스크립트가 못 오면 2.5초 뒤 저절로 보인다 */
.font-wait body{visibility:hidden;animation:font-show 0s 2.5s forwards}
@keyframes font-show{to{visibility:visible}}
.font-wait .dock{display:none}   /* 맨 위로 단추는 스스로 visibility:visible 이라 감춘 화면에 혼자 떠 있었다 */
.nav .links a{
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--fg-muted);font-weight:600;transition:color .2s;
}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--fg)}   /* 지금 보고 있는 페이지 메뉴도 밝게 (app.js 가 aria-current 를 붙인다) */
.nav .links a .ui-ic{display:inline-block;vertical-align:-3px;margin-right:6px}   /* 관리자가 고른 메뉴 아이콘 */
.nav .spacer{margin-left:auto}
.nav-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);cursor:pointer;place-items:center;padding:0}
.nav-toggle:hover{background:var(--surface)}
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  padding:10px 18px;border-radius:var(--radius-pill);border:1px solid transparent;
  transition:transform .15s ease, filter .2s ease, background .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn-solid{background:var(--accent);color:var(--on-accent)}
/* ---- 방송 상태 (app.js renderLive 하나가 모든 곳을 같은 상태로 바꾼다) ----
   방송 중  : 빨강 — 머리글 ● LIVE NOW · 카드 알약 · 라이브 칸 표시 · 떠 있는 카드, 단추는 WATCH LIVE → (.btn-onair)
   방송 아님: 빨강 없이 — 테두리만 있는 회색 ○ OFFLINE (.is-off) · 숲 방송국 링크는 그대로 */
.btn-live{background:var(--live);color:var(--on-live)}
.btn.btn-onair{background:var(--live);color:var(--on-live);border-color:transparent}
.btn.is-off{background:transparent;color:var(--fg-muted);border-color:var(--line-strong);box-shadow:none}
.btn.is-off:hover{color:var(--fg)}
/* 상태 점 — 방송 중: 꽉 찬 점 + 퍼지는 고리 / 방송 아님: 속이 빈 점 (깜빡이지 않는다).
   고리는 transform·opacity 로만 움직인다 — 예전엔 box-shadow 를 매 프레임 바꿔, 흐림(backdrop-filter) 걸린 상단 메뉴까지 계속 다시 그렸다 (휴대폰이 무거워짐) */
.btn-live .dot,.btn.is-off .dot,.live-pill .dot,.live-rail .screen .badge .dot,.lp-badge .dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.btn-live:not(.is-off) .dot::after,.card.is-live .live-pill .dot::after,.live-rail.is-live .screen .badge .dot::after,.lp-badge .dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:inherit;animation:ring 1.8s ease-out infinite;will-change:transform,opacity}
.btn.is-off .dot,.card.is-off .live-pill .dot,.live-rail:not(.is-live) .screen .badge .dot{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
@keyframes ring{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.8);opacity:0}}

/* ---------------------------- 섹션 순서 ---------------------------- */
/* 홈 섹션들을 세로 줄로 — 테마가 order 로 순서를 바꾼다(예: 모던 앨범은 발매곡이 바로 둘째).
   번호를 10씩 띄워 두어 테마가 사이에 끼워 넣을 수 있게 한다 */
.home{display:flex;flex-direction:column}
.home > #top{order:10}.home > #about{order:20}.home > #explore{order:30}.home > #live{order:40}
.home > #music{order:50}.home > #video{order:60}.home > #performance{order:70}.home > #gallery{order:80}.home > #contact{order:90}

/* ---------------------------- 히어로 ---------------------------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:var(--hero-image);background-size:cover;background-position:center}
.hero .bg::after{content:"";position:absolute;inset:0;background:var(--hero-overlay)}
/* 관리자가 올린 첫 화면 사진 — 사진 위 글자는 흰색, 왼쪽을 어둡게 눌러 글자가 읽히게 */
/* 사진 위치: 관리자가 고른 '꼭 보여야 할 곳'(--photo-pos). 없으면 가운데 약간 위 — 인물 사진은 얼굴이 위쪽에 있어
   가운데로 자르면 머리가 잘리기 쉽다. (관리자 위치 고르기 창의 기본값 admin.js POS_DEFAULT 와 같은 값) */
.hero.has-photo .bg{background:var(--photo) center/cover no-repeat;background-position:var(--photo-pos,50% 35%)}
.hero.has-photo .bg::after{background:linear-gradient(90deg,rgba(4,5,10,.72) 0%,rgba(4,5,10,.35) 55%,rgba(4,5,10,.12) 100%),linear-gradient(180deg,transparent 76%,var(--hero-fade) 100%)}
.hero.has-photo{color:#fff;--fg-muted:rgba(255,255,255,.8);--fg-dim:rgba(255,255,255,.66);--line-strong:rgba(255,255,255,.35)}
/* 손글씨 한 줄 · 옆 문구 · 방송 버튼 — 쓰는 테마만 켠다 */
.hero .script{display:none;font-family:var(--font-script);font-size:clamp(1.7rem,3.8vw,2.8rem);line-height:1.25;margin:14px 0 4px}
.hero .side{display:none;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-muted);line-height:1.9}
.hero-actions{display:none;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-actions .btn{font-size:.9rem;padding:13px 24px}
.hero .inner{position:relative;z-index:2;padding-block:120px;min-width:0;width:100%}   /* min-width:0 — 긴 제목이 칸을 밀어내지 않게 · width — 글 길이만큼 줄어 가운데로 몰리지 않게 */
.hero .eyebrow{margin-bottom:22px}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero .mark{
  font-family:var(--font-display);font-size:clamp(3rem,9vw,7rem);font-weight:700;
  letter-spacing:.12em;margin:26px 0 10px;
}
.hero .role{
  font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-muted);
}
.hero .cta{display:flex;align-items:center;gap:18px;margin-top:40px}
.play{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 60%,transparent);
  color:var(--fg);cursor:pointer;transition:transform .2s, background .2s;
}
.play:hover{transform:scale(1.06);background:var(--accent);border-color:transparent;color:var(--on-accent)}
.play svg{width:20px;height:20px;margin-left:3px}
.hero .cta .label{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted)}
.scroll-hint{
  position:absolute;bottom:26px;right:var(--gutter);z-index:2;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);
  display:flex;align-items:center;gap:10px;
}
.scroll-hint::after{content:"";width:48px;height:1px;background:var(--fg-dim)}

/* ---------------------------- 밴드(구호) ---------------------------- */
.band{position:relative;overflow:hidden;padding:clamp(56px,9vw,110px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.band h2{font-size:clamp(1.6rem,4.4vw,3rem);max-width:16ch}
.band p{color:var(--fg-muted);max-width:46ch;margin-top:18px;font-size:1.02rem}
.band .wrap{position:relative;z-index:1}
/* 소개 띠 사진 — 기본은 흐린 배경(관객석 느낌). 테마가 옆 사진(split)으로 바꿀 수 있다 */
.band-photo{display:none}
.band.has-photo .band-photo{display:block;position:absolute;inset:0;background:var(--photo) center/cover no-repeat;background-position:var(--photo-pos,50% 35%);opacity:.42}
.band.has-photo .band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-2) 8%,transparent 70%),linear-gradient(180deg,var(--bg-2),transparent 30%,transparent 70%,var(--bg-2))}
/* 사진이 없을 때: 넓은 화면은 왼쪽 큰 제목 · 오른쪽 설명과 단추 (빈 오른쪽이 생기지 않게) + 강조색 빛 한 겹 */
.band:not(.has-photo)::before{content:"";position:absolute;left:-14%;top:-45%;width:62%;height:190%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 11%,transparent),transparent)}
@media (min-width:861px){
  .band:not(.has-photo) .band-text{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,7vw,110px);align-items:end}
  .band:not(.has-photo) .band-text > .eyebrow{grid-column:1 / -1}
  .band:not(.has-photo) .band-text > h2{grid-column:1;grid-row:2 / span 3;max-width:none}
  .band:not(.has-photo) .band-text > p{grid-column:2;grid-row:2;margin:0;max-width:40ch;font-size:1.08rem;line-height:1.85}
  .band:not(.has-photo) .band-text > .band-career{grid-column:2;grid-row:3}
  .band:not(.has-photo) .band-text > .btn{grid-column:2;grid-row:4;justify-self:start}
}
/* 경력 한 줄 — 소개 문구 아래 작은 보조 정보 (큰 숫자·카드·바탕 없이). 흐린 글자 + 강조색 작은 점으로 나누고, 좁은 화면은 세 줄로 */
.band-career{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;list-style:none;margin:22px 0 0;padding:0;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--fg-muted)}
.band-career li{display:inline-flex;align-items:center}
.band-career li + li::before{content:"";flex:none;width:3px;height:3px;border-radius:50%;margin:0 14px;background:var(--accent-2)}
@media (max-width:520px){
  .band-career{flex-direction:column;align-items:flex-start;gap:3px}
  .band-career li + li::before{display:none}
}

/* ---------------------------- 3장 카드 ---------------------------- */
.trio{padding:0 0 clamp(56px,9vw,110px);background:var(--bg-2)}
.trio .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}   /* 카드 4장: 넓으면 한 줄, 좁으면 2×2, 휴대폰은 한 줄에 하나 */
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;background:var(--surface);transition:transform .25s ease, border-color .25s;
  isolation:isolate;            /* 아래 .sheen(z-index:-1)이 카드 뒤로 숨지 않고 카드 안에서 보이게 */
}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.card:not([href]){cursor:default}                                   /* 갈 곳이 아직 없는 카드(빈 섹션)는 누를 수 없게 */
.card:not([href]):hover{transform:none;border-color:var(--line)}
.card .tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);font-weight:700}
.card h3{font-size:1.5rem;margin:10px 0 6px;font-family:var(--font-body);font-weight:800;letter-spacing:0}
.card p{color:var(--fg-muted);font-size:.92rem;margin:0}
.card .sheen{position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 60%)}
.card .ic{display:none}                        /* 아이콘 — 사진이 없는 카드와 STREAMING HUB 플랫폼 줄에서 보인다 */
/* 사진이 없을 때: 키 큰 빈 상자 대신 아이콘 · 이름 · 설명 · → 로 짧고 단정하게 */
.card:not(.has-photo){min-height:0;justify-content:flex-start;padding:24px 24px 26px}
.card:not(.has-photo) .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:20px;color:var(--accent-2);
  background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.card:not(.has-photo) h3{font-size:1.25rem}
.card:not(.has-photo)::after{content:"→";position:absolute;right:24px;top:34px;font-size:1.15rem;line-height:1;color:var(--fg-dim);transition:transform .2s,color .2s}
.card[href]:not(.has-photo):hover::after{transform:translateX(4px);color:var(--fg)}
.card:not([href])::after{display:none}
/* LIVE 카드 이름표 옆 방송 상태 — 방송 중 빨간 ● LIVE NOW / 아니면 테두리만 있는 ○ OFFLINE */
/* 이름표와 알약을 한 줄에 — 칸이 좁으면 알약이 다음 줄로 내려간다 (잘리지 않게) */
.card[data-live] .tag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.card .live-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 2px 7px;border-radius:var(--radius-pill);
  background:var(--live);color:var(--on-live);font-family:var(--font-body);font-size:.6rem;font-weight:800;letter-spacing:.14em;line-height:1.4;text-transform:none;white-space:nowrap}
.card .live-pill .dot{width:6px;height:6px}
.card.is-off .live-pill{background:transparent;color:var(--fg-muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* 카드 사진 — 사진 위에 어둡게 한 겹 깔고 흰 글자 */
.card.has-photo{background:var(--photo) center/cover no-repeat;background-position:var(--photo-pos,50% 35%);color:#fff;--fg-muted:rgba(255,255,255,.82);--accent-2:#fff}
.card.has-photo .sheen{z-index:0;opacity:1;background:linear-gradient(180deg,rgba(0,0,0,.08) 20%,rgba(0,0,0,.72) 100%)}
.card.has-photo > :not(.sheen){position:relative;z-index:1}

/* ---- 라이브 칸 (STREAMING HUB · MODERN ALBUM 이 켠다) ---- */
.live-sec{display:none;padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--line);background:var(--bg)}
.live-sec .live-head{margin-bottom:18px}
.live-rail .screen{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--live-thumb,var(--photo,linear-gradient(135deg,var(--surface-2),var(--surface)))) center/cover no-repeat;background-position:var(--photo-pos,50% 35%);
  display:grid;place-items:center;border:1px solid var(--line)}
.live-rail .screen .badge{position:absolute;top:12px;left:12px;display:inline-flex;gap:7px;align-items:center;
  font-weight:800;font-size:.72rem;letter-spacing:.1em;padding:6px 11px;border-radius:var(--radius-pill);
  background:rgba(0,0,0,.55);color:#fff}
.live-rail.is-live .screen .badge{background:var(--live);color:var(--on-live)}
.live-rail .screen .badge .dot{width:7px;height:7px}
.live-rail .who{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.3}
.live-rail .sub{color:var(--fg-muted);margin-top:8px}
.live-rail .chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.live-rail .chips span{font-size:.76rem;color:var(--fg-muted);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:6px 11px}
.live-rail .live-go{margin-top:22px}

/* ---- 오른쪽 아래 떠 있는 묶음: 맨 위로 단추(위) · 라이브 카드(아래) — 세로로 쌓여 서로 가리지 않는다 ---- */
.dock{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.dock > *{pointer-events:auto}
/* 맨 위로 — 테마 강조색 동그라미 + TOP (어두운 배경에 묻히지 않게) */
.to-top{width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:var(--accent);color:var(--on-accent);box-shadow:0 10px 26px rgba(0,0,0,.38);font:800 .58rem/1 var(--font-body);letter-spacing:.12em;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,filter .2s}
.to-top span{margin-left:.12em}                                /* 글자 사이 띄움의 마지막 칸만큼 — 가운데로 */
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{filter:brightness(1.12)}
.to-top:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* ---- 라이브 카드: 방송 중일 때만 화면 오른쪽 아래에 뜬다 ---- */
.live-pop{position:relative;width:300px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--live) 50%,var(--line-strong));
  box-shadow:0 18px 50px rgba(0,0,0,.45);animation:lp-in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes lp-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lp-link{display:block;color:var(--fg);border-radius:inherit}
.lp-thumb{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,color-mix(in srgb,var(--live) 30%,var(--surface-2)),var(--surface)) 50% 35%/cover no-repeat}
.lp-badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 9px;border-radius:var(--radius-pill);
  background:var(--live);color:var(--on-live);font-size:.72rem;font-weight:800;letter-spacing:.1em;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.lp-body{display:block;padding:12px 14px 14px}
.lp-kicker{display:block;font-size:.7rem;letter-spacing:.1em;font-weight:700;color:var(--fg-muted)}
.lp-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-weight:700;font-size:.95rem;line-height:1.4}
.lp-link:hover .lp-title{text-decoration:underline;text-underline-offset:3px}
.lp-cta{display:inline-flex;align-items:center;margin-top:10px;padding:6px 13px;border-radius:var(--radius-pill);background:var(--live);color:var(--on-live);
  font-size:.74rem;font-weight:800;letter-spacing:.08em;line-height:1.2;transition:filter .2s}
.lp-link:hover .lp-cta{filter:brightness(1.12)}
.lp-close{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:0;padding:0;background:rgba(0,0,0,.55);color:#fff;
  font-size:1.05rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lp-close:hover{background:rgba(0,0,0,.78)}
/* 휴대폰: 화면 아래 가로로 납작한 띠 (맨 위로 단추는 그 위 오른쪽) */
@media (max-width:560px){
  .dock{left:12px;right:12px;bottom:12px;gap:10px}
  .to-top{width:42px;height:42px}
  .live-pop{width:100%}
}
/* 띠 모양 — 휴대폰, 그리고 가로로 눕힌 휴대폰처럼 낮은 화면 (큰 카드 약 300px 위에 맨 위로 단추까지 쌓이면
   화면 높이를 거의 다 덮어 맨 위 햄버거 단추까지 가렸다 — 낮은 화면은 폭 300px 그대로 오른쪽 아래에 납작하게) */
@media (max-width:560px), (max-height:500px){
  .lp-link{display:flex;align-items:center}
  .lp-thumb{flex:0 0 104px}
  .lp-badge{left:5px;top:5px;padding:2px 6px 2px 5px;font-size:.56rem;gap:4px;letter-spacing:.06em}
  .lp-badge .dot{width:6px;height:6px}
  .lp-body{padding:8px 34px 8px 11px;min-width:0}
  .lp-kicker{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lp-title{font-size:.82rem;margin-top:2px;-webkit-line-clamp:1}
  .lp-cta{margin-top:5px;padding:3px 10px;font-size:.64rem}
  .lp-close{top:50%;right:4px;transform:translateY(-50%);background:transparent;color:var(--fg-muted)}
}

/* ---------------------------- 푸터 ---------------------------- */
/* 위아래 여백은 화면 높이에 맞춰 (짧은 페이지가 한 화면에 들어오게) · 좌우 여백은 .wrap 이 준다 (padding:56px 0 은 그걸 지웠다)
   오른쪽 아래 '맨 위로' 단추가 소셜 링크를 가리면 단추 쪽이 위로 비켜 선다 (app.js) */
.foot{padding-block:clamp(24px,4vh,56px);border-top:1px solid var(--line);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot .brand{font-size:1.1rem}
.foot .muted{color:var(--fg-dim);font-size:.82rem;letter-spacing:.06em}
.foot .spacer{margin-left:auto}
.foot .social{display:flex;gap:16px;color:var(--fg-muted);flex-wrap:wrap}
.foot .social a{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--fg-muted);transition:color .2s}
.foot .social a:hover{color:var(--fg)}
.foot .social .social-ic{display:block;flex:0 0 auto}

/* ---------------------------- 콘텐츠 섹션 (발매곡·영상·공연·갤러리) ---------------------------- */
.content-sec{padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--line);background:var(--bg)}
.content-sec .sec-title{font-size:clamp(1.5rem,4vw,2.4rem);margin:8px 0 28px;font-family:var(--font-display)}
.music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.music-card{display:block;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);transition:transform .2s;color:inherit}
.music-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.music-card .cover{aspect-ratio:1;background:var(--surface-2) center/cover no-repeat;display:grid;place-items:center;color:var(--fg-dim);font-size:2rem}
.music-card .mc-body{padding:12px 14px}
.music-card .mc-title{font-weight:700;font-size:.95rem}
.music-card .mc-sub{color:var(--fg-muted);font-size:.8rem;margin-top:2px}
/* 앨범 영상 — 표지를 누르면 사이트 안에서 재생. 오른쪽 아래 빨간 재생 단추 (홈 발매곡 · 소개 앨범 줄) */
button.cover,button.cv{position:relative;display:grid;width:100%;padding:0;border:0;font:inherit;cursor:pointer}
.cv-play{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#e8322f;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none}
.cv-play svg{margin-left:2px}
.music-card .cv-play{right:10px;bottom:10px;width:40px;height:40px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.video-card{display:block;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);color:inherit}
.video-card:hover{border-color:var(--line-strong)}
.video-card .thumb{aspect-ratio:16/9;background:var(--surface-2) center/cover no-repeat;position:relative}
.video-card .thumb::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;background:rgba(0,0,0,.22)}
.video-card .vc-title{padding:12px 14px;font-weight:600;font-size:.9rem}
.perf-list{display:flex;flex-direction:column;gap:16px}
.perf-item{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.perf-item .p-img{flex:0 0 170px;background:var(--surface-2) center/cover no-repeat}
.perf-item .p-body{padding:16px 20px;min-width:0}
.perf-item .p-kind{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:700}
.perf-item .p-title{font-weight:800;font-size:1.1rem;margin:4px 0}
.perf-item .p-date{color:var(--fg-dim);font-size:.8rem}
.perf-item .p-text{color:var(--fg-muted);font-size:.9rem;margin-top:8px;line-height:1.7}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gallery-grid a{display:block;position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line)}
/* 사진 설명 — 사진 아래쪽에 어두운 띠를 깔고 흰 글씨 (사진 색과 상관없이 읽히게) */
.gallery-grid .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;
  font-size:.76rem;line-height:1.35;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:560px){ .perf-item{flex-direction:column} .perf-item .p-img{flex:none;aspect-ratio:16/9} }
/* 홈에 다 싣지 않은 목록 — 가운데 '더 보기' */
.more-btn{display:flex;width:fit-content;margin:28px auto 0}

/* ---------------------------- 영상·사진 보기 창 ---------------------------- */
/* --v-h: 사진이 쓸 수 있는 높이 (위 단추 줄 · 아래 제목, 설명이 있으면 설명까지 뺀 것) — 맞춤일 땐 사진의 최대 높이, 확대 중엔 칸의 높이 */
.viewer{--v-h:calc(94vh - 110px);width:min(1100px,94vw);max-width:none;max-height:94vh;padding:0;border:0;background:transparent;color:#fff;overflow:visible}
.viewer.has-note{--v-h:calc(94vh - 190px)}
.viewer[open]{display:flex;flex-direction:column;gap:10px}
.viewer::backdrop{background:rgba(4,5,10,.86);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.viewer .v-top{display:flex;align-items:center;gap:14px;font-size:.85rem;font-family:var(--font-body)}
.viewer .v-count{color:rgba(255,255,255,.75);letter-spacing:.06em}
.viewer .v-ext{margin-left:auto;color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px}
.viewer .v-close{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1rem;cursor:pointer}
.viewer .v-close:hover{background:rgba(255,255,255,.28)}
/* 확대 · 축소 단추 (사진일 때만) */
.viewer .v-zoom{display:none;margin-left:auto;gap:6px}
.viewer.is-photo .v-zoom{display:flex}
.viewer.is-photo .v-ext{margin-left:4px}
.viewer .v-zb{width:38px;height:38px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;place-items:center}
.viewer .v-zb:hover:not(:disabled){background:rgba(255,255,255,.28)}
.viewer .v-zb:disabled{opacity:.35;cursor:default}
.viewer .v-stage{display:grid;place-items:center;min-height:0}
.viewer .v-stage:focus{outline:none}                           /* 처음 초점 자리 (확대 중 키보드로 굴리기) — 큰 칸이라 테두리는 그리지 않는다 */
.viewer.is-photo .v-stage{touch-action:pan-y pinch-zoom}     /* 가로로 미는 손가락은 사진 넘기기로 (브라우저가 가져가지 않게) */
.viewer.is-video .v-stage{aspect-ratio:16/9;width:100%;background:#000;border-radius:var(--radius-lg);overflow:hidden}
.viewer.is-video iframe{width:100%;height:100%;border:0}
.viewer.is-photo img{max-width:100%;max-height:var(--v-h);object-fit:contain;border-radius:var(--radius);user-select:none;-webkit-user-drag:none}
.viewer.is-photo:not(.is-zoomed) .v-stage img{cursor:zoom-in}
/* 확대 — 칸을 고정 크기로 두고 그 안에서 움직인다. 칸보다 작은 쪽은 가운데 (flex 의 margin:auto 는 넘칠 땐 0 이라 왼쪽·위가 잘려 숨지 않는다) */
.viewer.is-zoomed .v-stage{display:flex;height:var(--v-h);overflow:auto;overscroll-behavior:contain;cursor:grab;border-radius:var(--radius);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;scrollbar-gutter:stable}
.viewer.is-zoomed.zoom-x .v-stage{touch-action:pan-x pan-y pinch-zoom}   /* 옆으로도 넘치면 손가락 가로 밀기는 움직이기 */
.viewer.is-zoomed .v-stage img{flex:none;margin:auto;max-width:none;max-height:none;border-radius:0}
.viewer.is-dragging .v-stage{cursor:grabbing}
.viewer .v-cap{font-size:.92rem;color:rgba(255,255,255,.88);text-align:center;min-height:1.2em;font-family:var(--font-body)}
.viewer .v-note{display:block;max-width:62ch;max-height:4.8em;margin:6px auto 0;overflow:auto;font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.7);white-space:pre-line}
.viewer .v-nav{position:fixed;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:0;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.viewer .v-nav:hover{background:rgba(255,255,255,.3)}
.viewer .v-prev{left:max(10px,2vw)}
.viewer .v-next{right:max(10px,2vw)}
@media(max-width:640px){ .viewer .v-nav{width:42px;height:42px;font-size:1.6rem;top:auto;bottom:18px;transform:none} }

/* ---------------------------- 연락·섭외 ---------------------------- */
/* 왼쪽 안내(제목·설명·섭외 분야) + 오른쪽 연락 카드. 카드 뒤에 강조색 빛을 아주 옅게 깐다 */
.contact-sec{position:relative;overflow:hidden;padding:clamp(64px,10vw,128px) 0;border-top:1px solid var(--line);background:var(--bg-2)}
.contact-sec::before{content:"";position:absolute;right:-8%;top:-25%;width:62%;height:150%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 14%,transparent),transparent)}
.contact-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:clamp(36px,6vw,96px);align-items:center}
.contact-grid:has(> .contact-card[hidden]){grid-template-columns:minmax(0,1fr)}
.contact-sec .sec-title{font-size:clamp(1.9rem,4.8vw,3.1rem);margin:12px 0 18px;font-family:var(--font-display)}
.contact-body{color:var(--fg-muted);max-width:36ch;font-size:1.05rem;line-height:1.8;margin:0 0 28px}
.contact-types{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.contact-types span{font-size:.8rem;font-weight:600;color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 14px}
/* 연락 카드 */
.contact-card{background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,30px);box-shadow:var(--shadow)}
.cc-row:not([hidden]) ~ .cc-row:not([hidden]){margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}   /* 보이는 줄 사이에만 선 */
.cc-label{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);font-weight:700;margin-bottom:10px}
.btn-sm{font-size:.8rem;letter-spacing:.02em;padding:9px 15px}
.btn-sm svg{flex:0 0 auto}
.cc-email{display:inline-block;min-width:0;font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.3rem);font-weight:600;color:var(--fg);
  letter-spacing:.01em;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:color-mix(in srgb,var(--fg) 22%,transparent);transition:text-decoration-color .2s}
.cc-email:hover{text-decoration-color:var(--accent)}
/* 주소 + 주소 복사 한 줄. .cc-mail-line 을 앞에 붙여 .btn-sm(뒤에 오는 같은 무게 규칙)을 이긴다 */
.cc-mail-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.cc-mail-line .cc-copy{position:relative;margin-left:auto;flex:0 0 auto;min-height:34px;padding:0 13px;line-height:1.2;font-size:.78rem;white-space:nowrap}
.cc-mail-line .cc-copy.is-done{border-color:var(--accent);color:var(--fg)}
/* 휴대폰에서도 한 줄 — 주소·단추를 조금 줄이고, 아주 좁으면 단추는 아이콘만 (글자는 화면 낭독기용으로 남긴다) */
@media (max-width:400px){
  .cc-mail-line{gap:8px}
  .cc-mail-line .cc-email{font-size:1rem}
  .cc-mail-line .cc-copy{padding:0 10px;font-size:.74rem}
}
@media (max-width:380px){
  .cc-mail-line .cc-email{font-size:.94rem}
}
@media (max-width:340px){
  .cc-mail-line .cc-copy{width:34px;padding:0;justify-content:center}
  .cc-mail-line .cc-copy span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 채널 줄: 브랜드 아이콘 · 이름 · 아이디 · ↗ */
.contact-social{display:flex;flex-direction:column}
.contact-social a{display:flex;align-items:center;gap:12px;padding:11px 2px;color:var(--fg);font-size:.93rem;font-weight:600}
.contact-social a + a{border-top:1px solid var(--line)}
.contact-social .social-ic{flex:0 0 auto}
.contact-social .ch-handle{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-dim);font-size:.84rem;font-weight:500}
.contact-social .ch-go{color:var(--fg-dim);font-size:.9rem;transition:transform .2s,color .2s}
.contact-social a:hover .ch-go{transform:translate(2px,-2px);color:var(--fg)}
.contact-social a:hover .ch-name{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.contact-note{display:flex;align-items:center;gap:8px;color:var(--fg-dim);font-size:.84rem;margin:22px 0 0}
.contact-note:has(> span[hidden]){display:none}
@media (max-width:860px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-body{max-width:46ch}
}

/* ---------------------------- 메뉴 페이지 (대표영상 · 대내외 활동 · 공지 · FAQ · 섭외) ---------------------------- */
/* 위아래 여백은 화면 높이 기준 — 섭외문의·공지처럼 짧은 페이지가 꼬리말까지 한 화면에 들어오게 (1900×900 화면: 위 45 · 아래 54px) */
.sub-page{padding-block:clamp(28px,5vh,96px) clamp(36px,6vh,120px)}
/* 메뉴 페이지: 내용이 짧아도 꼬리말은 화면 맨 아래 — 본문이 남는 높이를 채운다 (꼬리말 밑에 빈 바닥이 남지 않게).
   flex 안에서 margin-inline:auto 인 .wrap 은 내용 폭으로 줄어들어 width:100% 를 준다 (max-width 는 그대로) */
body[data-page]{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body[data-page] > .sub-page{flex:1 0 auto;width:100%}
body[data-page] > .foot{width:100%}
.sub-head{margin-bottom:clamp(24px,4vh,44px)}
.sub-kicker{display:flex;align-items:center;gap:14px}
.sub-kicker::before{content:"";width:36px;height:1px;background:var(--fg-dim)}
.sub-head .sub-title{font-size:clamp(2rem,5vw,3.2rem);margin:14px 0 0;font-family:var(--font-display)}
.sub-desc{color:var(--fg-muted);font-size:1.02rem;line-height:1.75;margin:14px 0 0;max-width:60ch}
.sub-empty{color:var(--fg-dim);padding:28px 0}

/* 대표영상 (VIDEO ARCHIVE) — 맨 위 FEATURED 하나를 크게(썸네일 · 윗말 · 제목 · 분류 · WATCH →),
   그 아래 영상들은 16:9 썸네일 아래에 분류 · 날짜 · 제목 (유튜브식 상자·큰 빨간 단추 없이) */
.vf{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(22px,3.6vw,52px);align-items:center;margin:0 0 clamp(40px,5.4vw,76px)}
.vf-media{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--surface-2);box-shadow:0 26px 70px rgba(0,0,0,.42)}
.vf-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.vf-media:hover img{transform:scale(1.025);filter:brightness(.88)}
.vf-play{position:absolute;left:50%;top:50%;width:clamp(58px,6vw,80px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.3);color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:background .25s,transform .25s}
.vf-play svg{width:38%;height:38%;margin-left:6%}
.vf-media:hover .vf-play{background:var(--accent);color:var(--on-accent);transform:translate(-50%,-50%) scale(1.05)}
.vf-info{min-width:0}
.vf-kicker{color:var(--accent-2)}
.vf-title{margin:12px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.25;overflow-wrap:anywhere}
.vf-meta{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:12px;font-size:.7rem;font-weight:700;letter-spacing:.14em;color:var(--fg-dim)}
.vf-watch{margin-top:24px}
@media (max-width:860px){ .vf{grid-template-columns:minmax(0,1fr);gap:18px} .vf-watch{margin-top:18px} }

.vw{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(28px,3.2vw,44px) clamp(14px,1.8vw,22px)}
.vw-item{display:block;min-width:0;color:inherit}
.vw-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--surface-2)}
.vw-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .45s ease}
.vw-item:hover .vw-img{transform:scale(1.035);filter:brightness(.85)}
.vw-play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.58);color:#fff;transition:background .2s}
.vw-play svg{width:16px;height:16px;margin-left:2px}
.vw-item:hover .vw-play{background:var(--accent);color:var(--on-accent)}
/* 썸네일 없는 영상 — 제목으로. 왼쪽 아래 재생 동그라미(12px + 40px) 오른쪽에서 시작 (예전엔 첫 두세 글자가 동그라미에 가렸다) ·
   두 줄까지 (긴 제목이 좁은 칸 위로 넘쳐 잘리지 않게 — 전체 제목은 썸네일 아래에 있다) */
.vw-name{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 16px 14px 64px;font-weight:700;color:var(--fg);
  background:linear-gradient(135deg,var(--surface-2),var(--surface))}
.vw-name > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vw-cap{display:block;padding-top:12px}
.vw-meta,.vf-meta{font-variant-numeric:tabular-nums}
.vw-meta{display:flex;flex-wrap:wrap;gap:2px 10px;margin-bottom:5px;font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--fg-dim)}
.vw-kind{color:var(--accent-2)}
.vw-title{display:block;font-weight:700;font-size:.98rem;line-height:1.45;overflow-wrap:anywhere}
.vw-item:hover .vw-title{text-decoration:underline;text-underline-offset:3px}

/* 갤러리 — 사진 벽 (세로 길이가 다른 사진을 엇갈려 쌓는다 · 줄 수는 아래 '한 줄에 몇 개') */
.aw{columns:var(--cols);column-gap:14px}
.aw-item{position:relative;display:block;margin:0 0 14px;break-inside:avoid;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.aw-item img{display:block;width:100%;height:auto;transition:transform .4s ease}
.aw-item:hover img{transform:scale(1.03)}
.aw-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:36px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.aw-meta{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.78)}
.aw-title{font-size:.92rem;font-weight:700;line-height:1.4}
/* ---- 고르기 줄 (대내외 활동의 분류 · 음악의 아티스트) — 알약 대신 글자 탭: 고른 것만 밝고 밑줄 ---- */
.pf-filter,.disco-filter{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 clamp(8px,1.4vw,14px)}
.ft{appearance:none;border:0;background:none;padding:8px 0 7px;cursor:pointer;color:var(--fg-dim);
  font:700 .74rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;transition:color .2s,box-shadow .2s}
.ft .n{margin-left:7px;font-weight:600;letter-spacing:.02em;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.ft:hover{color:var(--fg)}
.ft[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}

/* ---- 대내외 활동 (PERFORMANCE · 포트폴리오) — 연도 줄마다 사진 격자, 사진 아래에 분류 · 날짜 · 제목 · 장소.
   카드 상자(테두리·바탕) 없이 글은 사진 밑에 — 칸은 세로 3:4 로 미리 자리를 잡아 사진이 늦게 와도 화면이 밀리지 않는다 ---- */
.pf-year{display:grid;grid-template-columns:clamp(84px,9vw,128px) minmax(0,1fr);gap:clamp(18px,3vw,40px);
  padding:clamp(26px,3.6vw,44px) 0;border-top:1px solid var(--line)}
.pf-yhead{position:sticky;top:96px;align-self:start}
.pf-y{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1;letter-spacing:.02em;
  color:var(--fg-dim);font-variant-numeric:tabular-nums}
.pf-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:clamp(24px,2.8vw,36px) clamp(12px,1.6vw,20px);
  margin:0;padding:0;list-style:none;min-width:0}
.pf-item{min-width:0}
.pf-media{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--surface-2)}
.pf-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .5s ease,filter .5s ease}   /* 긴 포스터는 제목이 있는 위쪽부터 */
a.pf-media:hover img{transform:scale(1.035);filter:brightness(.92)}
.pf-play{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.pf-play svg{width:18px;height:18px;margin-left:2px}
.pf-noimg{display:grid;place-items:center;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-2),var(--surface))}
.pf-mono{font-family:var(--font-display);font-size:clamp(.9rem,1.6vw,1.2rem);letter-spacing:.2em;color:var(--fg-dim);text-align:center;padding:0 10px;overflow-wrap:anywhere}
.pf-cap{padding-top:12px;min-width:0}
.pf-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:.66rem;font-weight:700;letter-spacing:.14em;line-height:1.5;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.pf-kind{color:var(--accent-2)}
.pf-title{margin:5px 0 0;font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.45;color:var(--fg);overflow-wrap:anywhere}
.pf-place{margin-top:3px;font-size:.82rem;color:var(--fg-muted);overflow-wrap:anywhere}
.pf-body{margin-top:6px;color:var(--fg-muted);font-size:.86rem;line-height:1.7}
.pf-body p{margin:6px 0 0}
.pf-body a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:860px){
  .pf-year{grid-template-columns:minmax(0,1fr);gap:16px}
  .pf-yhead{position:static}
  .pf-y{font-size:clamp(1.9rem,7vw,2.6rem)}
}
@media (max-width:420px){ .pf-grid{column-gap:12px} .pf-title{font-size:.88rem} .pf-meta{letter-spacing:.1em} }

/* 섭외 안내 (BOOKING & CONTACT) — 활동을 본 다음 바로 문의로. 왼쪽 글 · 오른쪽 단추, 좁으면 위아래 */
.booking{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px clamp(24px,4vw,56px);
  margin-top:clamp(12px,2vw,24px);padding:clamp(34px,5vw,64px) 0 clamp(8px,1.4vw,16px);border-top:1px solid var(--line-strong)}
.booking > :not(.booking-btn){grid-column:1}
.booking-btn{grid-column:2;grid-row:1 / span 3;align-self:end}
/* 페이지의 큰 행동 단추 (섭외 안내 CONTACT → · 문의 보내기 · 대표영상 WATCH →) — 같은 크기 */
.booking-btn,.iq-submit,.vf-watch{padding:14px 28px;font-size:.86rem}
.booking-title{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.3;overflow-wrap:anywhere}
.booking-body{margin:0;color:var(--fg-muted);line-height:1.75;max-width:56ch}
@media (max-width:640px){
  .booking{grid-template-columns:minmax(0,1fr)}
  .booking-btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
}

/* ---- 음악 (DISCOGRAPHY) — 발매곡을 한눈에: 가로 한 줄(넓은 화면 5개 · 좁아지면 4·3·2)에 나란히, 위에 가는 연표 선과 연도.
   상자 없이 커버 아래에 발매 형태 · 제목 · 날짜 · LISTEN → · DETAILS (최신이 왼쪽) ---- */
.disco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(16px,2.2vw,30px);row-gap:clamp(34px,4vw,52px);padding-top:6px}
.rel{display:flex;flex-direction:column;min-width:0}
.rel-when{position:relative;height:clamp(40px,4vw,50px);border-top:1px solid var(--line-strong);margin-bottom:14px}
.rel.is-ystart .rel-when::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.rel-year{position:absolute;left:0;top:12px;font-family:var(--font-display);font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1;letter-spacing:.02em;
  color:var(--fg-dim);font-variant-numeric:tabular-nums}
.rel-cover{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;
  background:var(--surface-2);cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.3);transition:transform .25s ease,box-shadow .25s ease}
.rel-cover img{display:block;width:100%;height:100%;object-fit:cover}
.rel-cover:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.rel-mono{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-display);font-size:2.2rem;color:var(--fg-dim)}
.rel-mono b{color:var(--accent)}
.rel-info{min-width:0;padding-top:14px}
.rel-latest{position:absolute;right:0;top:15px;font-size:.6rem;font-weight:800;letter-spacing:.14em;line-height:1;color:var(--accent-2);white-space:nowrap}
.rel-kicker{min-height:1.6em;font-size:.64rem;font-weight:700;letter-spacing:.12em;line-height:1.6;color:var(--fg-muted)}
.rel-title{margin:6px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.35;color:var(--fg);overflow-wrap:anywhere}
.rel-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:6px;color:var(--fg-muted);font-size:.84rem;font-variant-numeric:tabular-nums}
.rel-dot{margin:0 8px;color:var(--fg-dim)}
.rel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:12px}
.rel-listen,.rel-more{padding:4px 0;font:800 .72rem/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.rel-listen{color:var(--fg);box-shadow:inset 0 -1px 0 currentColor}
.rel-listen:hover{color:var(--accent-2)}
.rel-more{appearance:none;border:0;background:none;cursor:pointer;color:var(--fg-muted)}
.rel-more:hover{color:var(--fg)}
@media (max-width:1100px){ .disco{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){ .disco{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){
  .disco{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:30px}
  .rel-when{height:36px;margin-bottom:10px}
  .rel-year{top:9px;font-size:1.15rem}
  .rel-latest{top:12px;font-size:.54rem;letter-spacing:.1em}
  .rel-kicker{min-height:3.2em}                                    /* 좁은 칸은 발매 형태가 두 줄 — 제목 높이를 맞춘다 */
  .rel-info{padding-top:10px}
  .rel-title{font-size:1rem}
  .rel-meta{font-size:.78rem}
  .rel-actions{gap:4px 14px;margin-top:8px}
  .rel-listen,.rel-more{font-size:.66rem;letter-spacing:.1em}
}

/* 앨범 자세히 보기 창 — 커버 · 곡 · 발매일 · 설명 · 수록곡 · 영상 · 크레딧 · 음원 링크 (적힌 것만). 휴대폰은 화면 가득 */
.album-sheet{width:min(1000px,94vw);max-width:none;max-height:92vh;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:var(--surface);color:var(--fg);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.album-sheet::backdrop{background:rgba(4,5,10,.8);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html:has(.album-sheet[open]){overflow:hidden}
.as-top{position:sticky;top:0;z-index:2;height:0;display:flex;justify-content:flex-end}
.as-close{width:40px;height:40px;margin:12px 12px 0 0;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 82%,transparent);
  color:var(--fg);font-size:1rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.as-close:hover{background:var(--surface-2)}
.as-inner{padding:clamp(22px,3.6vw,44px)}
.as-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,3.6vw,48px);align-items:start}
.as-cover{position:sticky;top:clamp(22px,3.6vw,44px);aspect-ratio:1;border-radius:3px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  box-shadow:0 20px 50px rgba(0,0,0,.35)}
.as-cover img{display:block;width:100%;height:100%;object-fit:cover}
.as-info{min-width:0;padding-right:clamp(0px,3vw,36px)}
.as-kicker{font-size:.7rem;font-weight:700;letter-spacing:.16em;line-height:1.6;color:var(--accent-2)}
.as-title{margin:8px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.25;overflow-wrap:anywhere}
.as-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:10px;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.as-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:22px}
.as-where{font-size:.8rem;color:var(--fg-dim)}
.as-sec{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.as-h{margin:0 0 12px;font:700 .68rem/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)}
.as-text{color:var(--fg-muted);line-height:1.8}
.as-text p{margin:0 0 10px}
.as-text a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.as-tracks{margin:0;padding:0;list-style:none;counter-reset:t}
.as-tracks li{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);counter-increment:t;overflow-wrap:anywhere}
.as-tracks li::before{content:counter(t,decimal-leading-zero);flex:none;color:var(--fg-dim);font-size:.85rem;font-variant-numeric:tabular-nums}
.as-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px;margin:0;padding:0;list-style:none}
.as-vbtn{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.as-vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000}
.as-vthumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease}
.as-vbtn:hover .as-vthumb img{transform:scale(1.04);filter:brightness(.85)}
.as-vplay{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:grid;place-items:center;background:#e8322f;color:#fff}
.as-vplay svg{margin-left:2px}
.as-vname{display:block;margin-top:7px;font-size:.84rem;line-height:1.45;color:var(--fg-muted);overflow-wrap:anywhere}
.as-credits{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);gap:8px 20px;margin:0}   /* 역할 칸은 넓어도 40% — 긴 이름은 줄을 바꾼다 (예전엔 한 줄로 고정돼 좁은 휴대폰에서 창이 옆으로 밀렸다) */
.as-cr{display:contents}
.as-credits dt{color:var(--fg-dim);font-size:.86rem}
.as-credits dd{margin:0;overflow-wrap:anywhere}
.as-cr-line dd{grid-column:1 / -1;color:var(--fg-muted)}
.as-nav{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(26px,3.4vw,40px);padding-top:18px;border-top:1px solid var(--line)}
.as-step{max-width:48%;padding:6px 0;border:0;background:none;cursor:pointer;color:var(--fg-muted);font:600 .86rem/1.4 var(--font-body);text-align:left;overflow-wrap:anywhere}
.as-step.as-older{margin-left:auto;text-align:right}
.as-step:hover{color:var(--fg)}
@media (max-width:720px){
  .album-sheet{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .as-grid{grid-template-columns:minmax(0,1fr)}
  .as-cover{position:static;width:min(100%,360px)}
  .as-info{padding-right:0}
}

/* 한 줄에 몇 개 — 관리자 › 문구 › 메뉴 페이지에서 2~6 (app.js 가 data-cols 로 단다 · 없으면 3).
   좁은 화면에선 줄인다: 1100px 이하 최대 4 · 920px 이하 최대 3 · 560px 이하 2 · 영상은 720px 이하 2, 560px 이하 1 · 갤러리는 420px 이하 1
   (대내외 활동 포트폴리오(.pf)는 왼쪽에 연도 칸이 있어 같은 수라도 칸이 조금 좁다 — 420px 이하도 2) */
.vw,.aw,.pf{--cols:3}
:is(.vw,.aw,.pf)[data-cols="2"]{--cols:2}
:is(.vw,.aw,.pf)[data-cols="4"]{--cols:4}
:is(.vw,.aw,.pf)[data-cols="5"]{--cols:5}
:is(.vw,.aw,.pf)[data-cols="6"]{--cols:6}
@media (max-width:1100px){ :is(.vw,.aw,.pf):is([data-cols="5"],[data-cols="6"]){--cols:4} }
@media (max-width:920px){ :is(.vw,.aw,.pf):is([data-cols="4"],[data-cols="5"],[data-cols="6"]){--cols:3} }
@media (max-width:720px){ .vw.vw{--cols:2} }
@media (max-width:560px){ .aw.aw,.pf.pf{--cols:2} .vw.vw{--cols:1} }
@media (max-width:420px){ .aw.aw{--cols:1} }

/* 공지사항 · FAQ — 게시판 (누르면 그 자리에서 펼쳐진다) */
/* 쪽 번호 — 한 쪽에 다 안 들어갈 때만 (sub.js). 높이(위 여백 포함 62px)는 sub.js 의 '화면에 맞춤' 계산과 같다 */
.pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin-top:22px;min-height:40px}
.pager button{min-width:40px;height:40px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--line);background:transparent;
  color:var(--fg-muted);font:600 .9rem/1 var(--font-body);font-variant-numeric:tabular-nums;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.pager button:hover:not(:disabled):not([aria-current]){color:var(--fg);border-color:var(--line-strong)}
.pager button[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);cursor:default}
.pager button:disabled{opacity:.35;cursor:default}
.pager-gap{color:var(--fg-dim);padding:0 2px}
@media (max-width:480px){ .pager{gap:4px;margin-top:18px} .pager button{min-width:34px;height:36px;padding:0 8px;font-size:.85rem} }   /* 휴대폰: 한 줄에 다 들어가게 */
.bd{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.bd-item{border-bottom:1px solid var(--line)}
.bd-head{display:flex;align-items:center;gap:16px;width:100%;padding:18px 6px;background:none;border:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.bd-head:hover .bd-title{color:var(--accent-2)}
.bd-no{flex:0 0 44px;color:var(--fg-dim);font-size:.85rem;font-variant-numeric:tabular-nums;text-align:center}
.bd-title{flex:1;min-width:0;font-weight:600;font-size:1rem;line-height:1.55;transition:color .2s}
.bd-new{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:999px;background:var(--live);color:var(--on-live);font-size:.62rem;font-weight:800;vertical-align:.15em}
.bd-date{flex:0 0 auto;color:var(--fg-dim);font-size:.84rem;font-variant-numeric:tabular-nums}
.bd-chev{flex:0 0 auto;width:9px;height:9px;margin:0 6px 4px;border-right:2px solid var(--fg-dim);border-bottom:2px solid var(--fg-dim);transform:rotate(45deg);transition:transform .2s}
.bd-item.open .bd-chev{transform:rotate(-135deg);margin-bottom:-2px}
.bd-body{padding:2px 6px 24px 66px;color:var(--fg-muted);line-height:1.85;font-size:.98rem}
.bd-body p{margin:0 0 .9em}
.bd-body p:last-child{margin-bottom:0}
.bd-body a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.bd-q{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line-strong));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.bd-faq .bd-body{padding-left:6px}
.bd-a{display:flex;gap:16px;align-items:flex-start}
.bd-a > div{flex:1;min-width:0;padding-top:4px}
.bd-q-a{color:var(--fg-muted);border-color:var(--line-strong);background:transparent}
@media (max-width:560px){
  .bd-head{flex-wrap:wrap;gap:4px 12px;padding:16px 2px}
  .bd-no{display:none}
  .bd-date{order:3;flex-basis:100%;font-size:.78rem}
  .bd-body{padding:0 2px 20px}
}

/* 섭외·문의 페이지 — 왼쪽 섭외 분야·안내, 오른쪽 연락 카드(홈과 같은 카드, 스크롤해도 따라온다) */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:clamp(32px,6vw,80px);align-items:start}
.ct-grid:has(> .contact-card[hidden]){grid-template-columns:minmax(0,1fr)}
.ct-block + .ct-block{margin-top:clamp(32px,4vw,48px)}
.ct-block .ct-h{font-family:var(--font-body);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--fg-dim);margin:0 0 16px}
.ct-types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ct-type{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius);border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--surface) 80%,transparent);font-weight:700}
.ct-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--accent-2);
  background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
/* 문의하실 때 알려 주세요 — 번호 동그라미 + 한 줄씩 (문의 양식을 숨겼을 때) */
.ct-guide{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ct-guide li{display:flex;align-items:center;gap:14px;color:var(--fg-muted);line-height:1.5}
.ct-n{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--fg);border:1px solid var(--line-strong)}
/* 섭외·문의 양식 — 사이트의 테두리·둥글기·강조색을 그대로. 휴대폰은 한 줄에 한 칸.
   글자 크기 16px — 휴대폰 브라우저가 칸을 누를 때 화면을 확대하지 않게 */
.iq{position:relative}
.iq-legend{margin:-4px 0 18px;font-size:.78rem;color:var(--fg-dim)}
.iq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.iq-wide{grid-column:1 / -1}
.iq-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.iq-f > label{font-size:.84rem;font-weight:700;color:var(--fg)}
.iq-req{color:var(--accent-2);font-weight:800}
.iq input:not([type="checkbox"]),.iq select,.iq textarea{display:block;width:100%;min-width:0;max-width:100%;padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--fg);font:inherit;font-size:16px;line-height:1.5;
  transition:border-color .2s,box-shadow .2s}
.iq textarea{min-height:150px;resize:vertical}
.iq select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.iq select option{color:#111;background:#fff}
.iq ::placeholder{color:var(--fg-dim);opacity:1}
.iq :is(input:not([type="checkbox"]),select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.iq [aria-invalid="true"]{border-color:var(--live)}
.iq-err{margin:0;font-size:.8rem;font-weight:600;line-height:1.5;color:color-mix(in srgb,var(--live) 62%,var(--fg))}
.iq-hint{margin:0;font-size:.8rem;line-height:1.6;color:var(--fg-muted)}
.iq-check{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;font-weight:600;color:var(--fg);cursor:pointer}
.iq-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);cursor:pointer}
.iq-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.iq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}
.iq-submit:disabled{opacity:.6;cursor:progress;transform:none}
.iq-status{flex:1 1 220px;margin:0;font-size:.86rem;line-height:1.55;color:var(--fg-muted);min-height:1.4em}
.iq-status.is-bad{color:color-mix(in srgb,var(--live) 62%,var(--fg));font-weight:600}
.iq-done{padding:clamp(20px,3vw,28px);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--surface) 82%,transparent)}
.iq-done:focus{outline:none}
.iq-done-t{margin:0;font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--fg)}
.iq-done-d{margin:8px 0 18px;color:var(--fg-muted);line-height:1.7}
@media (max-width:640px){ .iq-grid{grid-template-columns:minmax(0,1fr)} .iq-submit{width:100%;justify-content:center} }
.sub-page .contact-card{position:sticky;top:96px}
@media (max-width:860px){ .ct-grid{grid-template-columns:minmax(0,1fr)} .sub-page .contact-card{position:static} }

/* ---------------------------- 접근성 ---------------------------- */
/* 키보드로 움직일 때만 보이는 초점 테 (마우스 클릭엔 안 보인다) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}   /* 테두리 둥글기는 그 요소 것을 따른다 (border-radius 를 주면 동그란 단추·카드가 초점 때 네모가 됐다) */
/* '본문으로 건너뛰기' — 평소엔 화면 밖, Tab 을 누르면 왼쪽 위에 나타난다 */
/* 넘치는 부분을 자르는 상자 안을 꽉 채운 링크·단추는 테를 안쪽에 — 바깥 테는 잘리거나 옆 칸에 덮여 안 보였다
   (홈 카드 4장 — streaming-hub 는 묶음이 overflow:hidden · 라이브 카드 · 홈 음악 카드 표지 · 펼친 휴대폰 메뉴 — 넘겨 볼 수 있게 overflow 를 걸었다) */
.trio .card:focus-visible,.lp-link:focus-visible,.music-card .cover:focus-visible,.nav.open .links a:focus-visible{outline-offset:-3px}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;padding:10px 16px;border-radius:var(--radius);
  background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);font-weight:700;font-size:.9rem}
.skip:focus{left:16px}
/* 움직임 줄이기를 켠 방문자: 부드러운 스크롤·깜빡임·확대 효과를 끈다 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------------------------- 반응형 (해상도별) ---------------------------- */
@media (max-width:920px){
  .nav{flex-wrap:wrap;gap:12px}
  .nav-toggle{display:grid}                                  /* 좁은 화면: 햄버거 등장 */
  .nav .links{order:5;flex-basis:100%;flex-direction:column;gap:0;margin-top:6px;display:none}
  .nav.open .links{display:flex;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}   /* 열렸을 때만 드롭다운 — 가로로 눕힌 휴대폰처럼 낮은 화면에선 메뉴 안에서 넘겨 끝 항목까지 닿게 */
  .nav .links a{padding:12px 4px;border-top:1px solid var(--line)}
}
@media (max-width:1080px){ .trio .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 휴대폰: 2×2 그대로, 사진 없는 카드는 작게 (네 장이 한 화면 안에) — 아주 좁으면 한 줄에 하나 */
@media (max-width:520px){
  .trio .grid{gap:10px}
  .card:not(.has-photo){padding:16px 16px 18px}
  .card:not(.has-photo) .ic{width:38px;height:38px;border-radius:12px;margin-bottom:14px}
  .card:not(.has-photo) h3{font-size:1rem;margin:6px 0 4px}
  .card:not(.has-photo) p{font-size:.8rem}
  .card:not(.has-photo)::after{right:16px;top:27px}
  .card.has-photo{padding:18px}
}
@media (max-width:340px){ .trio .grid{grid-template-columns:minmax(0,1fr)} }
/* 넓은 화면인데 메뉴가 많아 한 줄에 안 들어갈 때 — app.js 가 .compact 를 붙여 햄버거로 바꾼다 (위와 같은 규칙) */
.nav.compact{flex-wrap:wrap;gap:12px}
.nav.compact .nav-toggle{display:grid}
.nav.compact .links{order:5;flex-basis:100%;flex-direction:column;gap:0;margin-top:6px;display:none}
.nav.compact.open .links{display:flex;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
.nav.compact .links a{padding:12px 4px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .hero{min-height:82vh}
  .hero .inner{padding-block:92px}
  /* 휴대폰은 글이 화면 폭을 다 쓰므로 사진 전체를 고르게 눌러 준다 (왼쪽만 어두우면 오른쪽 글자가 사진에 묻힌다) */
  .hero.has-photo .bg::after{background:linear-gradient(180deg,rgba(4,5,10,.34) 0%,rgba(4,5,10,.6) 55%,rgba(4,5,10,.66) 84%,var(--hero-fade) 100%)}
  /* 소개 띠 사진도 마찬가지 — 글이 폭을 다 쓰니 사진 전체를 바탕색으로 고르게 덮는다 */
  .band.has-photo .band-photo::after{background:linear-gradient(180deg,var(--bg-2) 0%,color-mix(in srgb,var(--bg-2) 50%,transparent) 45%,color-mix(in srgb,var(--bg-2) 50%,transparent) 70%,var(--bg-2) 100%)}
  .card.has-photo{min-height:220px}
  .hero .mark{font-size:clamp(2.6rem,14vw,4rem)}
  .content-sec{padding:46px 0}
  .music-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
}
@media (max-width:560px){
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
  .foot .spacer{display:none}
}
@media (max-width:400px){
  .hero .cta{flex-wrap:wrap;gap:12px}
  .nav .brand{font-size:1.15rem}
  .btn-live{padding:9px 12px;font-size:.78rem}
}

/* =========================================================================
   THEME 01 — DARK STAGE  (무대의 순간을 담은 시네마틱)
   #시네마틱 #무대 #프리미엄
   배치: 사진 한 장이 화면을 채우는 첫 화면(붓글씨 제목) → 관객석 사진 띠 → 글씨가 위에 얹힌 사진 카드 3장
   ========================================================================= */
[data-theme="dark-stage"]{
  --bg:#080910;
  --bg-2:#0c0e16;
  --surface:#141721;
  --surface-2:#1b1f2c;
  --fg:#f4f6fb;
  --fg-muted:#9aa0b3;
  --fg-dim:#7d8192;
  --accent:#3969f7;
  --accent-2:#8fb0ff;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --live:#d9324e;

  --tracking-wide:.30em;
  --radius:12px;
  --radius-lg:18px;

  --hero-image:
    radial-gradient(130% 100% at 78% 6%, rgba(59,108,255,.22), transparent 52%),
    radial-gradient(80% 70% at 10% 100%, rgba(143,176,255,.10), transparent 60%),
    linear-gradient(180deg,#0b0d16 0%,#05060d 100%);
  --hero-overlay:linear-gradient(180deg, rgba(5,6,13,.10) 0%, rgba(5,6,13,.5) 55%, var(--bg) 100%);

  /* 첫 화면 큰 제목은 붓글씨 (보이는 글자만 받는다 — app.js loadScriptFont) */
  --font-script:'Nanum Brush Script', var(--font-display);
  --script-family:'Nanum Brush Script';
}
/* 시네마틱 질감: 미세한 스포트라이트 + 필름 그레인 느낌 */
[data-theme="dark-stage"] .hero .bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode:screen;
}

/* ---- 첫 화면: 붓글씨 제목 → D E O K → 직함 → 이름 → 쇼릴 ---- */
[data-theme="dark-stage"] .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
[data-theme="dark-stage"] .hero h1{order:1;font-family:var(--font-script);font-weight:400;
  font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:1.12;letter-spacing:0}
[data-theme="dark-stage"] .hero .mark{order:2;font-weight:400;font-size:clamp(2.1rem,5.2vw,3.8rem);letter-spacing:.36em;margin:34px 0 14px}
[data-theme="dark-stage"] .hero .eyebrow{order:3;margin:0 0 10px;color:var(--fg);letter-spacing:.3em}
[data-theme="dark-stage"] .hero .role{order:4}
[data-theme="dark-stage"] .hero .cta{order:5}

/* ---- 소개 띠: 관객석 사진을 더 밝게, 제목은 가는 대문자 (사진이 없으면 아래 카드와 간격을 줄인다) ---- */
[data-theme="dark-stage"] .band{padding:clamp(80px,12vw,150px) 0}
[data-theme="dark-stage"] .band:not(.has-photo){padding:clamp(64px,9vw,112px) 0 clamp(44px,6vw,72px)}
[data-theme="dark-stage"] .band h2{font-weight:400;letter-spacing:.08em;line-height:1.3}
[data-theme="dark-stage"] .band.has-photo .band-photo{opacity:.62}

/* ---- 카드 4장: 글씨는 위, 사진은 아래로 비치게 (사진이 없으면 기본의 짧은 링크 카드) ---- */
[data-theme="dark-stage"] .trio .grid{gap:12px}
[data-theme="dark-stage"] .card{border-radius:8px}
[data-theme="dark-stage"] .card.has-photo{justify-content:flex-start;min-height:300px}
[data-theme="dark-stage"] .card .tag{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.16em;font-weight:600}
[data-theme="dark-stage"] .card h3{font-size:1.02rem;font-weight:500;margin:8px 0 4px}
[data-theme="dark-stage"] .card p{font-size:.85rem}
[data-theme="dark-stage"] .card.has-photo .sheen{background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.3) 100%)}

@media (max-width:920px){
  [data-theme="dark-stage"] .card.has-photo{min-height:220px}
}
@media (max-width:520px){
  [data-theme="dark-stage"] .card .tag{font-size:1.02rem;letter-spacing:.12em}   /* 휴대폰 2×2 — CONTACT 가 한 줄에 */
  [data-theme="dark-stage"] .card h3{font-size:.92rem}
}

/* =========================================================================
   THEME 02 — STREAMING HUB  (라이브 스트리밍 중심의 트렌디)
   #라이브 #커뮤니티 #트렌디 #팬소통
   배치: 손글씨 첫 화면 + 방송 보기·팔로우 → 플랫폼 줄 → 라이브 칸 → 최근 영상 한 줄 → 발매곡 → …
   ========================================================================= */
[data-theme="streaming-hub"]{
  --bg:#0b1020;
  --bg-2:#0e1430;
  --surface:#141b3a;
  --surface-2:#1b2350;
  --fg:#f5f7ff;
  --fg-muted:#a9b3d8;
  --fg-dim:#7c85ae;
  --accent:#5b8cff;
  --accent-2:#b98cff;
  --line:rgba(146,168,255,.14);
  --line-strong:rgba(146,168,255,.28);
  --on-accent:#0b0d14;
  --live:#d13a67;

  --tracking-wide:.24em;
  --radius:16px;
  --radius-lg:26px;

  --hero-image:
    radial-gradient(90% 80% at 82% 0%, rgba(91,140,255,.34), transparent 55%),
    radial-gradient(70% 70% at 8% 30%, rgba(185,140,255,.22), transparent 60%),
    linear-gradient(180deg,#0c1330 0%,#080c1e 100%);
  --hero-overlay:linear-gradient(180deg, rgba(8,12,30,.05) 0%, rgba(8,12,30,.35) 55%, var(--bg) 100%);

  /* 첫 화면 제목·꼬리말은 펜 손글씨 (보이는 글자만 받는다 — app.js loadScriptFont) */
  --font-script:'Nanum Pen Script', var(--font-display);
  --script-family:'Nanum Pen Script';
}
[data-theme="streaming-hub"] h1,
[data-theme="streaming-hub"] h2,
[data-theme="streaming-hub"] .brand{font-family:var(--font-display)}
[data-theme="streaming-hub"] .brand b{color:var(--accent-2)}
[data-theme="streaming-hub"] .btn-live{box-shadow:0 8px 24px rgba(255,71,126,.35)}
[data-theme="streaming-hub"] .btn-live.is-off{box-shadow:none}

/* ---- 순서: 첫 화면 → 플랫폼 줄 → 라이브 → 영상 → 발매곡 → 공연 → 갤러리 → 소개 → 연락 ---- */
[data-theme="streaming-hub"] .home > #explore{order:20}
[data-theme="streaming-hub"] .home > #live{order:30}
[data-theme="streaming-hub"] .home > #video{order:40}
[data-theme="streaming-hub"] .home > #music{order:50}
[data-theme="streaming-hub"] .home > #performance{order:60}
[data-theme="streaming-hub"] .home > #gallery{order:70}
[data-theme="streaming-hub"] .home > #about{order:80}

/* ---- 첫 화면: 손글씨 제목 → DEOK → 이름 → 방송 보기·팔로우 ---- */
[data-theme="streaming-hub"] .hero{min-height:80vh}
[data-theme="streaming-hub"] .hero .inner{padding-block:100px 84px}
/* 넓은 화면만 — 휴대폰은 글이 폭을 다 써서 기본(base.css)의 '사진 전체를 고르게 누르는' 막을 쓴다 */
@media (min-width:641px){
  [data-theme="streaming-hub"] .hero.has-photo .bg::after{background:linear-gradient(90deg,rgba(8,12,32,.82) 0%,rgba(8,12,32,.42) 55%,rgba(8,12,32,.14) 100%),linear-gradient(180deg,transparent 76%,var(--hero-fade) 100%)}
}
[data-theme="streaming-hub"] .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
[data-theme="streaming-hub"] .hero h1{order:1;font-family:var(--font-script);font-weight:400;
  font-size:clamp(2.9rem,7vw,5.4rem);line-height:1.1;letter-spacing:0}
[data-theme="streaming-hub"] .hero .mark{order:2;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:400;letter-spacing:.34em;margin:28px 0 6px}
[data-theme="streaming-hub"] .hero .role{order:3}
[data-theme="streaming-hub"] .hero .cta{order:4}
[data-theme="streaming-hub"] .hero-actions{order:5;display:flex}
/* 방송 버튼이 떠 있으면 쇼릴 버튼은 접는다 (첫 화면 버튼이 두 줄로 쌓이지 않게) */
[data-theme="streaming-hub"] .hero-copy:has(.hero-actions:not([hidden])) .cta{display:none}
[data-theme="streaming-hub"] .hero-actions .btn-onair{box-shadow:0 10px 30px color-mix(in srgb,var(--live) 40%,transparent)}   /* WATCH LIVE → (방송 중만) */

/* ---- 카드 4장 → 플랫폼 줄: 아이콘 + 두 줄 이름. 사진은 쓰지 않는다 (칸 사이 1px 틈으로 줄을 긋는다 — 2×2 로 접혀도 맞게) ---- */
[data-theme="streaming-hub"] .trio{padding:clamp(28px,4vw,44px) 0;background:var(--bg)}
[data-theme="streaming-hub"] .trio .grid{gap:1px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;background:var(--line)}
[data-theme="streaming-hub"] .card{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;align-content:center;
  padding:18px 22px;border:0;border-radius:0;background:var(--surface);transition:background .2s}
[data-theme="streaming-hub"] .card:hover{transform:none;background:var(--surface-2)}
[data-theme="streaming-hub"] .card:not([href]):hover{background:var(--surface)}
[data-theme="streaming-hub"] .card.has-photo{background:var(--surface);color:inherit;--fg-muted:inherit;--accent-2:inherit}
[data-theme="streaming-hub"] .card .sheen,[data-theme="streaming-hub"] .card p{display:none}
[data-theme="streaming-hub"] .card .ic{display:grid;place-items:center;grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;
  margin:0;border:0;background:var(--accent);color:var(--on-accent)}
[data-theme="streaming-hub"] .card::after{display:none}   /* 플랫폼 줄은 화살표 없이 */
[data-theme="streaming-hub"] .card[data-icon="live"].is-live .ic{background:var(--live);color:var(--on-live)}   /* 빨간 아이콘은 방송 중일 때만 */
[data-theme="streaming-hub"] .card[data-icon="video"] .ic{background:var(--accent-2)}
[data-theme="streaming-hub"] .card .tag{grid-column:2;color:var(--fg);font-size:.8rem;letter-spacing:.16em}
[data-theme="streaming-hub"] .card h3{grid-column:2;margin:2px 0 0;font-size:.84rem;font-weight:600;color:var(--fg-muted);letter-spacing:.02em}

/* ---- 라이브 칸: 방송 화면(또는 LIVE 카드 사진) + 제목·해시태그·버튼 ---- */
[data-theme="streaming-hub"] .live-sec{display:block}
[data-theme="streaming-hub"] .live-head{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800;letter-spacing:.04em;color:var(--fg)}
[data-theme="streaming-hub"] .live-rail{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center}
[data-theme="streaming-hub"] .live-rail .screen{border-color:var(--line-strong);box-shadow:0 24px 60px rgba(91,140,255,.16)}

/* ---- 최근 영상: 한 줄에 4칸, 더 있으면 옆으로 넘긴다 ---- */
[data-theme="streaming-hub"] .video-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 16px) / 4);gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:8px}
[data-theme="streaming-hub"] .video-card{scroll-snap-align:start}
[data-theme="streaming-hub"] .video-card:focus-visible{outline-offset:-3px}   /* 옆으로 넘기는 줄이 바깥 초점 테를 자른다 */

/* ---- 꼬리말: 네온 손글씨 ---- */
[data-theme="streaming-hub"] .foot .muted{font-family:var(--font-script);font-size:1.7rem;line-height:1.1;letter-spacing:0;color:var(--accent-2);
  text-shadow:0 0 12px color-mix(in srgb,var(--accent-2) 70%,transparent),0 0 30px color-mix(in srgb,var(--accent) 50%,transparent)}

@media (max-width:920px){
  [data-theme="streaming-hub"] .hero .inner{padding-block:80px 64px}
  [data-theme="streaming-hub"] .live-rail{grid-template-columns:1fr}
  [data-theme="streaming-hub"] .video-grid{grid-auto-columns:calc((100% - 16px) / 2.25)}
}
@media (max-width:560px){
  [data-theme="streaming-hub"] .video-grid{grid-auto-columns:80%}
  /* 휴대폰 2×2 플랫폼 줄: 칸이 좁아 이름표(CONTACT)가 끊기고 LIVE 상태 알약이 잘렸다 — 안쪽 여백·아이콘을 줄여 글자 칸을 넓힌다 */
  [data-theme="streaming-hub"] .card{padding:16px 14px;column-gap:10px}
  [data-theme="streaming-hub"] .card .ic{width:36px;height:36px;border-radius:10px}
  [data-theme="streaming-hub"] .card .tag{letter-spacing:.12em}
}

/* =========================================================================
   THEME 03 — MODERN ALBUM  (앨범 중심의 모던 갤러리)  #앨범 #갤러리 #고급스러움
   다크·정제·바이올렛 액센트로 dark-stage(블루 시네마틱)와 구분한다.
   배치: 첫 화면(이름은 왼쪽 아래, 손글씨는 오른쪽에 비스듬히) → 발매곡 선반 → 라이브(글·사진 좌우) →
         공연 사진 타일 → 영상 → 갤러리 → 소개(사진 오른쪽) → 연락. 3장 카드는 쓰지 않는다.
   ========================================================================= */
[data-theme="modern-album"]{
  --bg:#0a0a0e;
  --bg-2:#0e0e14;
  --surface:#15151d;
  --surface-2:#1c1c27;
  --fg:#f2f2f6;
  --fg-muted:#9b9ba9;
  --fg-dim:#81818d;
  --accent:#7758f5;
  --accent-2:#b8a6ff;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --live:#d9324e;

  --tracking-wide:.26em;
  --radius:10px;
  --radius-lg:16px;

  --hero-image:
    radial-gradient(120% 90% at 86% 6%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(184,166,255,.10), transparent 60%),
    linear-gradient(180deg,#0c0c14 0%,#070709 100%);
  --hero-overlay:linear-gradient(180deg, rgba(7,7,9,.12) 0%, rgba(7,7,9,.55) 60%, var(--bg) 100%);

  --font-script:'Nanum Pen Script', var(--font-display);
  --script-family:'Nanum Pen Script';
}
[data-theme="modern-album"] .band h2{font-weight:500}

/* ---- 순서 ---- */
[data-theme="modern-album"] .home > #music{order:20}
[data-theme="modern-album"] .home > #live{order:30}
[data-theme="modern-album"] .home > #performance{order:40}
[data-theme="modern-album"] .home > #video{order:50}
[data-theme="modern-album"] .home > #gallery{order:60}
[data-theme="modern-album"] .home > #about{order:70}
[data-theme="modern-album"] .trio{display:none}

/* ---- 첫 화면: 글은 왼쪽 아래로 모으고, 손글씨 한 줄은 오른쪽에 비스듬히, 옆 문구는 오른쪽 위 ---- */
[data-theme="modern-album"] .hero{align-items:stretch;min-height:92vh}
[data-theme="modern-album"] .hero .inner{display:flex;flex-direction:column;justify-content:flex-end;padding-block:120px 76px}
[data-theme="modern-album"] .hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:500;letter-spacing:0}
[data-theme="modern-album"] .hero .mark{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:400;letter-spacing:.32em;margin:22px 0 8px}
[data-theme="modern-album"] .hero .script{display:block;position:absolute;z-index:1;right:var(--gutter);top:34%;margin:0;
  max-width:min(46vw,540px);text-align:right;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.3;
  transform:rotate(-7deg);transform-origin:right center;text-shadow:0 2px 24px rgba(0,0,0,.45)}
[data-theme="modern-album"] .hero .side{display:block;position:absolute;right:var(--gutter);top:112px;max-width:min(40vw,300px);text-align:right}

/* ---- 발매곡: 앨범 커버가 한 줄로 늘어선 선반 (5장씩 보이고 옆으로 넘긴다) ---- */
[data-theme="modern-album"] .content-sec .sec-title{font-weight:500;letter-spacing:.06em}
[data-theme="modern-album"] .music-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 16px) / 5);gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:8px;
  padding-top:6px;margin-top:-6px}   /* 위 여백 6px (자리는 그대로) — 마우스를 올리면 4px 뜨는 카드 윗부분이 선반 끝에서 잘렸다 */
[data-theme="modern-album"] .music-card:focus-visible{outline-offset:-3px}   /* 옆으로 넘기는 선반이 바깥 테를 자른다 */
[data-theme="modern-album"] .music-card{scroll-snap-align:start;border:0;border-radius:0;background:transparent}
[data-theme="modern-album"] .music-card:hover{transform:translateY(-4px)}
[data-theme="modern-album"] .music-card .cover{border-radius:var(--radius);box-shadow:0 14px 34px rgba(0,0,0,.45)}
[data-theme="modern-album"] .music-card .mc-body{padding:12px 2px 0}

/* ---- 라이브: 왼쪽 제목·글·버튼, 오른쪽 큰 사진(방송 중이면 방송 화면) ---- */
[data-theme="modern-album"] .live-sec{display:block;background:var(--bg-2)}
[data-theme="modern-album"] .live-sec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:1fr 1fr;
  column-gap:clamp(28px,5vw,64px)}
[data-theme="modern-album"] .live-rail{display:contents}
[data-theme="modern-album"] .live-head{grid-column:1;grid-row:1;align-self:end;margin:0 0 18px;
  font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:500;letter-spacing:.1em;color:var(--fg)}
[data-theme="modern-album"] .live-info{grid-column:1;grid-row:2;align-self:start}
[data-theme="modern-album"] .live-rail .screen{grid-column:2;grid-row:1 / span 2;aspect-ratio:4/3}
[data-theme="modern-album"] .live-rail .who{font-family:var(--font-body);font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:600;line-height:1.6}

/* ---- 공연·활동: 사진 타일 3칸, 사진 위에 종류·제목 ---- */
[data-theme="modern-album"] .perf-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
[data-theme="modern-album"] .perf-item{position:relative;display:block;aspect-ratio:4/3;border:0;border-radius:var(--radius);background:var(--surface-2)}
[data-theme="modern-album"] .perf-item .p-img{position:absolute;inset:0;aspect-ratio:auto;transition:transform .5s ease}
[data-theme="modern-album"] .perf-item:hover .p-img{transform:scale(1.04)}
[data-theme="modern-album"] .perf-item .p-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8))}
[data-theme="modern-album"] .perf-item .p-body{position:absolute;left:0;right:0;bottom:0;padding:16px 18px}
[data-theme="modern-album"] .perf-item:has(.p-img) .p-body{color:#fff;--fg-dim:rgba(255,255,255,.72);--accent-2:#fff}
[data-theme="modern-album"] .perf-item .p-title{font-family:var(--font-display);font-weight:500;letter-spacing:.06em}
[data-theme="modern-album"] .perf-item .p-text{display:none}

/* ---- 소개: 글은 왼쪽, 사진은 오른쪽 절반 ---- */
[data-theme="modern-album"] .band.has-photo .band-photo{left:auto;width:48%;opacity:1}
[data-theme="modern-album"] .band.has-photo .band-photo::after{background:linear-gradient(90deg,var(--bg-2) 0%,transparent 40%)}
[data-theme="modern-album"] .band.has-photo .band-text{max-width:48%}

@media (max-width:920px){
  [data-theme="modern-album"] .music-grid{grid-auto-columns:calc((100% - 2 * 16px) / 3)}
  [data-theme="modern-album"] .perf-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* 손글씨·옆 문구는 제자리(글 사이)로 */
  [data-theme="modern-album"] .hero .script{position:static;max-width:none;text-align:left;transform:rotate(-3deg);transform-origin:left center;margin:18px 0 8px}
  [data-theme="modern-album"] .hero .side{position:static;max-width:none;text-align:left;margin-top:20px}
  [data-theme="modern-album"] .live-sec .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  [data-theme="modern-album"] .live-head{grid-row:1}
  [data-theme="modern-album"] .live-rail .screen{grid-column:1;grid-row:2;aspect-ratio:16/10;margin-bottom:22px}
  [data-theme="modern-album"] .live-info{grid-row:3}
  [data-theme="modern-album"] .band.has-photo{padding-top:0}
  [data-theme="modern-album"] .band.has-photo .band-photo{position:relative;inset:auto;width:auto;aspect-ratio:4/3;margin-bottom:28px}
  [data-theme="modern-album"] .band.has-photo .band-photo::after{background:linear-gradient(180deg,transparent 55%,var(--bg-2))}
  [data-theme="modern-album"] .band.has-photo .band-text{max-width:none}
}
@media (max-width:560px){
  [data-theme="modern-album"] .music-grid{grid-auto-columns:44%}
  [data-theme="modern-album"] .perf-list{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   THEME 04 — CLEAN MINIMAL  (깔끔·세련된 미니멀)  #미니멀 #여백 #모던
   라이트 테마 — 흰 바탕 + 먹색 글자. 라이트에서 히어로가 깨지지 않게 몇 곳을 되돌린다.
   배치: 첫 화면을 좌우로 — 왼쪽 흰 바탕에 DEOK·이름·손글씨, 오른쪽에 사진(왼쪽 가장자리가 흰색으로 스며든다) →
         사진 타일 3장(이름만) → 가운데 인용구(소개) → … 섹션 사이는 선 없이 여백으로.
   ========================================================================= */
[data-theme="clean-minimal"]{
  color-scheme:light;   /* 기본(base.css)은 어두움 — 스크롤바·체크박스 같은 브라우저 부품을 밝게 */
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  --fg:#15171c;
  --fg-muted:#5b616e;
  --fg-dim:#6a6f79;
  --accent:#16181d;
  --accent-2:#5b616e;
  --line:rgba(20,22,28,.10);
  --line-strong:rgba(20,22,28,.18);
  --live:#d9324e;

  --tracking-wide:.30em;
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 18px 50px rgba(20,25,40,.10);

  --hero-image:
    radial-gradient(120% 90% at 80% 0%, rgba(20,22,28,.05), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f4f5f8 100%);
  --hero-overlay:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 60%, var(--bg) 100%);

  /* 손글씨: 영어는 Allura, 한글은 나눔 펜 (Allura 에 한글이 없어 한글 글자는 뒤 글꼴로 넘어간다) */
  --font-script:'Allura','Nanum Pen Script', var(--font-display);
  --script-family:'Allura';
  --script-family-ko:'Nanum Pen Script';
}
/* 라이트 보정 */
[data-theme="clean-minimal"] .hero h1{text-shadow:none;font-weight:500}
[data-theme="clean-minimal"] .play{background:#fff;color:var(--fg)}
[data-theme="clean-minimal"] .play:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* ---- 순서: 첫 화면 바로 아래에 사진 타일, 그다음 인용구 ---- */
[data-theme="clean-minimal"] .home > #explore{order:15}
/* 섹션 사이 선을 없애고 여백으로 나눈다 */
[data-theme="clean-minimal"] .band,
[data-theme="clean-minimal"] .content-sec,
[data-theme="clean-minimal"] .contact-sec{border-top:0}

/* ---- 첫 화면: 왼쪽 글, 오른쪽 사진 ---- */
[data-theme="clean-minimal"] .hero{min-height:84vh}
/* 사진이 있어도 글은 흰 바탕 위라 먹색 그대로 (기본은 사진 위 흰 글씨) */
[data-theme="clean-minimal"] .hero.has-photo{color:inherit;--fg-muted:inherit;--fg-dim:inherit;--line-strong:inherit}
[data-theme="clean-minimal"] .hero.has-photo .bg{left:auto;width:56%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
[data-theme="clean-minimal"] .hero.has-photo .bg::after{background:linear-gradient(180deg,transparent 70%,var(--bg) 100%)}
[data-theme="clean-minimal"] .hero.has-photo .hero-copy{max-width:48%}
/* DEOK → 이름 → 직함 → 제목(작게) → 손글씨 → 재생 */
[data-theme="clean-minimal"] .hero-copy{display:flex;flex-direction:column;align-items:flex-start}
[data-theme="clean-minimal"] .hero .mark{order:1;margin:0;font-weight:700;letter-spacing:.02em;line-height:1;font-size:clamp(3.2rem,8vw,6rem)}
[data-theme="clean-minimal"] .hero .role{order:2;margin-top:14px;letter-spacing:.42em;font-size:.76rem}
[data-theme="clean-minimal"] .hero .eyebrow{order:3;margin:30px 0 0;line-height:1.9}
[data-theme="clean-minimal"] .hero h1{order:4;margin-top:14px;font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:.02em;line-height:1.5}
[data-theme="clean-minimal"] .hero .script{order:5;display:block;margin:28px 0 6px;font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.15;
  transform:rotate(-6deg);transform-origin:left center}
[data-theme="clean-minimal"] .hero .cta{order:6}
[data-theme="clean-minimal"] .hero .side{display:block;position:absolute;right:var(--gutter);bottom:64px;max-width:15em;line-height:2}
[data-theme="clean-minimal"] .scroll-hint{left:50%;right:auto;transform:translateX(-50%);flex-direction:column-reverse;gap:8px;bottom:18px}
[data-theme="clean-minimal"] .scroll-hint::after{width:1px;height:34px}

/* ---- 카드 3장 → 사진 타일: 이름만 크게 (사진이 없으면 연회색 칸 + 아이콘) ---- */
[data-theme="clean-minimal"] .trio{padding:clamp(20px,3vw,32px) 0 clamp(40px,6vw,72px);background:var(--bg)}
[data-theme="clean-minimal"] .trio .grid{gap:10px}
[data-theme="clean-minimal"] .card{aspect-ratio:5/4;min-height:0;border:0;border-radius:4px;padding:20px 22px}
[data-theme="clean-minimal"] .card:not(.has-photo){background:var(--surface-2);justify-content:flex-end}   /* 사진 칸은 기본(.card.has-photo)이 사진을 깐다 · 글은 아래(아이콘은 왼쪽 위에 떠 있다) */
[data-theme="clean-minimal"] .card:hover{transform:none;filter:brightness(1.04)}
[data-theme="clean-minimal"] .card .tag{font-family:var(--font-display);font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:.16em;font-weight:600;color:var(--fg)}
[data-theme="clean-minimal"] .card h3{font-size:.9rem;font-weight:500;margin:6px 0 0;color:var(--fg-muted)}
[data-theme="clean-minimal"] .card p,
[data-theme="clean-minimal"] .card:not(.has-photo) .sheen{display:none}
[data-theme="clean-minimal"] .card.has-photo .tag{color:#fff}
[data-theme="clean-minimal"] .card:not(.has-photo) .ic{display:grid;position:absolute;top:20px;left:22px;margin:0;color:var(--fg-dim)}

/* ---- 소개 띠 → 가운데 정렬 인용구 (사진은 쓰지 않는다) ---- */
[data-theme="clean-minimal"] .band{text-align:center;background:var(--bg);padding:clamp(56px,9vw,120px) 0}
[data-theme="clean-minimal"] .band-career{justify-content:center}   /* 가운데 인용구라 경력 한 줄도 가운데 */
@media (max-width:520px){ [data-theme="clean-minimal"] .band-career{align-items:center} }
[data-theme="clean-minimal"] .band:not(.has-photo) .band-text{display:block}   /* 기본의 '사진 없을 때 좌우 배치'를 쓰지 않는다 */
/* 그 배치의 자식 규칙(제목 폭 · 본문 왼쪽 정렬)도 되돌려 가운데 인용구로 */
[data-theme="clean-minimal"] .band:not(.has-photo) .band-text > h2{max-width:22ch}
[data-theme="clean-minimal"] .band:not(.has-photo) .band-text > p{margin:18px auto 0;max-width:46ch;font-size:1.02rem;line-height:1.6}
[data-theme="clean-minimal"] .band::before{display:none}
[data-theme="clean-minimal"] .band.has-photo .band-photo{display:none}
[data-theme="clean-minimal"] .band h2{max-width:22ch;margin-inline:auto;font-style:italic;font-weight:400;letter-spacing:.01em;
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.4}
[data-theme="clean-minimal"] .band h2::before{content:"\201C"}
[data-theme="clean-minimal"] .band h2::after{content:"\201D"}
[data-theme="clean-minimal"] .band p{margin-inline:auto}

@media (max-width:920px){
  [data-theme="clean-minimal"] .trio .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-theme="clean-minimal"] .card{aspect-ratio:3/4;padding:16px}
  [data-theme="clean-minimal"] .card:not(.has-photo) .ic{top:16px;left:16px}
}
@media (max-width:760px){
  /* 휴대폰: 사진이 위, 글이 아래 (사진 아래 끝이 흰색으로 스며들고 글이 살짝 겹친다) */
  [data-theme="clean-minimal"] .hero.has-photo{flex-direction:column;align-items:stretch;min-height:0}
  [data-theme="clean-minimal"] .hero.has-photo .bg{position:relative;inset:auto;width:auto;aspect-ratio:4/5;max-height:64vh;
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent);mask-image:linear-gradient(180deg,#000 68%,transparent)}
  [data-theme="clean-minimal"] .hero.has-photo .bg::after{display:none}
  [data-theme="clean-minimal"] .hero.has-photo .inner{margin-top:-14vh;padding-block:0 76px}
  [data-theme="clean-minimal"] .hero.has-photo .hero-copy{max-width:none}
  [data-theme="clean-minimal"] .hero .side{position:static;max-width:none;margin-top:28px}
}
@media (max-width:560px){
  [data-theme="clean-minimal"] .trio .grid{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 카드 4장 — 휴대폰도 2×2 */
  [data-theme="clean-minimal"] .card{aspect-ratio:4/5;padding:14px}
}

/* =========================================================================
   THEME 05 — WARM STORY  (일상과 음악을 담은 감성 스토리)  #감성 #스토리 #따뜻함
   웜 라이트 — 크림/세피아 바탕 + 갈색 글자. clean-minimal(쿨 화이트)과 대비되는 따뜻함.
   배치: 세피아 사진 첫 화면(제목·손글씨 왼쪽 위 · 재생 왼쪽 아래 · 이름 오른쪽 아래) → 소개(오른쪽 액자 사진) →
         갤러리 콜라주 → 발매곡 → 영상 → 공연 → 연락. 3장 카드·라이브 칸은 쓰지 않는다.
   ========================================================================= */
[data-theme="warm-story"]{
  color-scheme:light;   /* 기본(base.css)은 어두움 — 스크롤바·체크박스 같은 브라우저 부품을 밝게 */
  --bg:#f3ece1;
  --bg-2:#efe6d8;
  --surface:#fbf6ee;
  --surface-2:#f1e7d6;
  --fg:#2c2620;
  --fg-muted:#6f6455;
  --fg-dim:#716451;
  --accent:#976b43;
  --accent-2:#7a6047;
  --line:rgba(60,44,24,.12);
  --line-strong:rgba(60,44,24,.20);
  --live:#b85835;

  --tracking-wide:.28em;
  --radius:12px;
  --radius-lg:18px;
  --shadow:0 18px 50px rgba(80,55,25,.12);

  --hero-image:
    radial-gradient(120% 90% at 80% 0%, rgba(166,118,74,.16), transparent 55%),
    linear-gradient(180deg,#f7f0e5 0%,#efe4d4 100%);
  --hero-overlay:linear-gradient(180deg, rgba(243,236,225,0) 0%, rgba(243,236,225,.28) 60%, var(--bg) 100%);
  --hero-fade:rgba(38,24,12,.55);

  --font-script:'Nanum Pen Script', var(--font-display);
  --script-family:'Nanum Pen Script';
}
/* 웜 라이트 보정 */
[data-theme="warm-story"] .hero h1{text-shadow:none;font-weight:500}
[data-theme="warm-story"] .band{background:var(--bg-2)}
[data-theme="warm-story"] .play{background:var(--surface);color:var(--fg)}
[data-theme="warm-story"] .play:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* ---- 순서 ---- */
[data-theme="warm-story"] .home > #gallery{order:30}
[data-theme="warm-story"] .home > #music{order:40}
[data-theme="warm-story"] .home > #video{order:50}
[data-theme="warm-story"] .home > #performance{order:60}
[data-theme="warm-story"] .trio{display:none}

/* ---- 첫 화면: 제목·손글씨는 왼쪽 위, 재생은 왼쪽 아래, 이름·옆 문구는 오른쪽 아래 ---- */
[data-theme="warm-story"] .hero{align-items:stretch}
[data-theme="warm-story"] .hero .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;
  grid-template-rows:auto auto auto 1fr auto auto auto;
  grid-template-areas:"eye ." "title ." "script ." ". ." "cta mark" "cta role" "cta side";
  padding-block:120px 64px}
[data-theme="warm-story"] .hero-copy{display:contents}
[data-theme="warm-story"] .hero .eyebrow{grid-area:eye}
[data-theme="warm-story"] .hero h1{grid-area:title;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:.08em;line-height:1.35;text-transform:uppercase}
[data-theme="warm-story"] .hero .script{grid-area:script;display:block;font-size:clamp(1.8rem,4vw,2.9rem);margin:20px 0 0;
  transform:rotate(-2deg);transform-origin:left center}
[data-theme="warm-story"] .hero .mark{grid-area:mark;justify-self:end;font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:500;letter-spacing:.34em;margin:28px 0 6px}
[data-theme="warm-story"] .hero .role{grid-area:role;justify-self:end;text-align:right;font-size:.74rem}
[data-theme="warm-story"] .hero .side{grid-area:side;display:block;justify-self:end;text-align:right;margin-top:4px}
[data-theme="warm-story"] .hero .cta{grid-area:cta;align-self:end;margin-top:28px}
[data-theme="warm-story"] .scroll-hint{display:none}               /* 오른쪽 아래는 이름 자리 */
/* 사진: 세피아로 데우고, 왼쪽·아래를 갈색으로 눌러 흰 글씨가 읽히게 (바탕색으로 스며들지 않고 끊는다) */
[data-theme="warm-story"] .hero.has-photo .bg{filter:sepia(.22) saturate(.92)}
@media (min-width:641px){   /* 휴대폰은 기본(base.css)의 '사진 전체를 고르게 누르는' 막 — 글이 폭을 다 쓴다 */
  [data-theme="warm-story"] .hero.has-photo .bg::after{background:linear-gradient(90deg,rgba(38,24,12,.66) 0%,rgba(38,24,12,.24) 58%,rgba(38,24,12,.1) 100%),
    linear-gradient(0deg,rgba(38,24,12,.55) 0%,transparent 40%)}
}

/* ---- 소개: 글은 왼쪽, 사진은 오른쪽 액자 ---- */
[data-theme="warm-story"] .band h2{font-weight:500;letter-spacing:.06em;line-height:1.3}
[data-theme="warm-story"] .band .btn-ghost{border-radius:2px;border-color:var(--fg);letter-spacing:.14em;font-size:.76rem;padding:13px 22px}
[data-theme="warm-story"] .band.has-photo{display:flex;align-items:center;min-height:clamp(440px,48vw,600px)}
[data-theme="warm-story"] .band.has-photo > .wrap{width:100%}
[data-theme="warm-story"] .band.has-photo .band-photo{inset:auto;top:clamp(40px,5vw,64px);bottom:clamp(40px,5vw,64px);
  right:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));width:min(36%,400px);opacity:1;
  border:10px solid var(--surface);border-radius:3px;box-shadow:var(--shadow);transform:rotate(1.5deg)}
[data-theme="warm-story"] .band.has-photo .band-photo::after{display:none}
[data-theme="warm-story"] .band.has-photo .band-text{max-width:54%}

/* ---- 갤러리: 액자 사진을 엇갈려 붙인 콜라주 ---- */
[data-theme="warm-story"] #gallery{overflow:hidden}                 /* 기운 사진 모서리가 화면 밖으로 삐져 가로 스크롤을 만들지 않게 */
[data-theme="warm-story"] .gallery-grid{display:block;columns:3;column-gap:18px}
[data-theme="warm-story"] .gallery-grid a{display:block;break-inside:avoid;margin:0 0 18px;aspect-ratio:4/5;
  border:8px solid var(--surface);border-radius:3px;box-shadow:0 10px 28px rgba(80,55,25,.16);transform:rotate(-1.2deg)}
[data-theme="warm-story"] .gallery-grid a:nth-child(3n+2){aspect-ratio:1;transform:rotate(1deg)}
[data-theme="warm-story"] .gallery-grid a:nth-child(3n){aspect-ratio:3/4;transform:rotate(.6deg)}
[data-theme="warm-story"] .gallery-grid a:nth-child(4n){aspect-ratio:4/3}

/* ---- 목록 카드: 종이 느낌 ---- */
[data-theme="warm-story"] .music-card,
[data-theme="warm-story"] .video-card,
[data-theme="warm-story"] .perf-item{box-shadow:0 8px 24px rgba(80,55,25,.08)}

@media (max-width:760px){
  [data-theme="warm-story"] .band.has-photo{flex-direction:column;align-items:stretch;min-height:0}
  [data-theme="warm-story"] .band.has-photo .band-photo{position:relative;inset:auto;order:2;width:auto;aspect-ratio:4/5;max-height:72vh;
    margin:34px var(--gutter) 0;transform:rotate(1deg)}
  [data-theme="warm-story"] .band.has-photo .band-text{max-width:none}
  [data-theme="warm-story"] .gallery-grid{columns:2;column-gap:12px}
  [data-theme="warm-story"] .gallery-grid a{margin-bottom:12px;border-width:6px}
}
@media (max-width:640px){
  [data-theme="warm-story"] .hero .inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto auto auto auto;
    grid-template-areas:"eye" "title" "script" "." "mark" "role" "side" "cta";padding-block:96px 48px}
  [data-theme="warm-story"] .hero .mark,
  [data-theme="warm-story"] .hero .role,
  [data-theme="warm-story"] .hero .side{justify-self:start;text-align:left}
}

/* =========================================================================
   THEME 06 — NEON LIVE  (네온 사인이 켜진 라이브)  #네온 #스트리밍 #하이텐션
   딥 퍼플 블랙 + 핫핑크·시안 네온. 방송 감성이 가장 강한 다크 테마.
   ========================================================================= */
[data-theme="neon-live"]{
  --bg:#0b0710;
  --bg-2:#120a1a;
  --surface:#181022;
  --surface-2:#221533;
  --fg:#f7f2ff;
  --fg-muted:#b5a6cb;
  --fg-dim:#867a9e;
  --accent:#ff2e88;
  --accent-2:#39e0ff;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --on-accent:#0b0d14;
  --live:#d92774;

  --tracking-wide:.30em;
  --radius:14px;
  --radius-lg:20px;

  --hero-image:
    radial-gradient(120% 95% at 80% 4%, rgba(255,46,136,.24), transparent 54%),
    radial-gradient(85% 70% at 10% 100%, rgba(57,224,255,.16), transparent 60%),
    linear-gradient(180deg,#0f0916 0%,#070510 100%);
  --hero-overlay:linear-gradient(180deg, rgba(7,5,16,.10) 0%, rgba(7,5,16,.5) 55%, var(--bg) 100%);
}
/* 네온 질감: 핑크→시안 글로우가 위에서 번진다 */
[data-theme="neon-live"] .hero .bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 70% at 50% 0%, rgba(255,46,136,.10), transparent 60%);
  mix-blend-mode:screen;
}
[data-theme="neon-live"] .hero h1{font-weight:600;letter-spacing:.01em}
[data-theme="neon-live"] .hero .mark{font-weight:800}
[data-theme="neon-live"] .card:hover{box-shadow:0 16px 44px rgba(255,46,136,.20)}

/* =========================================================================
   THEME 07 — SUNSET POP  (노을빛 팝)  #따뜻함 #에너지 #팝
   웜 다크 + 코랄 오렌지·앰버 그라데이션. 밝고 활기찬 무대.
   ========================================================================= */
[data-theme="sunset-pop"]{
  --bg:#140a0a;
  --bg-2:#1b0e0c;
  --surface:#221312;
  --surface-2:#2e1a17;
  --fg:#fff2ec;
  --fg-muted:#d2aa9d;
  --fg-dim:#9d7a6e;
  --accent:#ff6a3d;
  --accent-2:#ffb057;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --on-accent:#0b0d14;
  --live:#d13f3f;

  --tracking-wide:.28em;
  --radius:16px;
  --radius-lg:22px;

  --hero-image:
    radial-gradient(130% 100% at 76% 0%, rgba(255,106,61,.28), transparent 54%),
    radial-gradient(90% 72% at 12% 100%, rgba(255,176,87,.18), transparent 60%),
    linear-gradient(180deg,#1c0e0b 0%,#0f0706 100%);
  --hero-overlay:linear-gradient(180deg, rgba(15,7,6,.08) 0%, rgba(15,7,6,.48) 55%, var(--bg) 100%);
}
[data-theme="sunset-pop"] .hero .bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 75% at 50% 0%, rgba(255,176,87,.12), transparent 60%);
  mix-blend-mode:screen;
}
[data-theme="sunset-pop"] .hero h1{font-weight:600}
[data-theme="sunset-pop"] .hero .mark{font-weight:800}
[data-theme="sunset-pop"] .card:hover{box-shadow:0 16px 44px rgba(255,106,61,.18)}

/* =========================================================================
   THEME 08 — FOREST CALM  (숲의 고요)  #자연 #차분 #딥그린
   딥 그린 다크 + 에메랄드 포인트. 차분하고 편안한 어쿠스틱 무드.
   ========================================================================= */
[data-theme="forest-calm"]{
  --bg:#07110d;
  --bg-2:#0b160f;
  --surface:#0f1d15;
  --surface-2:#16281c;
  --fg:#eef6ef;
  --fg-muted:#9db3a3;
  --fg-dim:#74887c;
  --accent:#3fbf7f;
  --accent-2:#8fd9a8;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --on-accent:#0b0d14;
  --live:#c25146;

  --tracking-wide:.28em;
  --radius:12px;
  --radius-lg:18px;

  --hero-image:
    radial-gradient(120% 92% at 78% 6%, rgba(63,191,127,.20), transparent 55%),
    radial-gradient(80% 70% at 12% 100%, rgba(143,217,168,.10), transparent 60%),
    linear-gradient(180deg,#0a160f 0%,#050d09 100%);
  --hero-overlay:linear-gradient(180deg, rgba(5,13,9,.10) 0%, rgba(5,13,9,.5) 55%, var(--bg) 100%);
}
[data-theme="forest-calm"] .hero h1{font-weight:500;letter-spacing:.01em}
[data-theme="forest-calm"] .hero .mark{font-weight:700}
[data-theme="forest-calm"] .band h2{font-weight:500}
[data-theme="forest-calm"] .card:hover{box-shadow:0 16px 40px rgba(63,191,127,.16)}

/* =========================================================================
   THEME 09 — OCEAN WAVE  (깊은 바다)  #시원함 #틸 #청량
   딥 네이비-틸 다크 + 아쿠아 포인트. 맑고 시원한 청량 무드.
   ========================================================================= */
[data-theme="ocean-wave"]{
  --bg:#05121a;
  --bg-2:#08171f;
  --surface:#0d1f28;
  --surface-2:#132b35;
  --fg:#eafcff;
  --fg-muted:#93b3bd;
  --fg-dim:#718a92;
  --accent:#17b6c9;
  --accent-2:#5fe0d4;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --on-accent:#0b0d14;
  --live:#c4476a;

  --tracking-wide:.28em;
  --radius:14px;
  --radius-lg:20px;

  --hero-image:
    radial-gradient(120% 92% at 78% 6%, rgba(23,182,201,.22), transparent 55%),
    radial-gradient(80% 70% at 12% 100%, rgba(95,224,212,.12), transparent 60%),
    linear-gradient(180deg,#07161f 0%,#040d13 100%);
  --hero-overlay:linear-gradient(180deg, rgba(4,13,19,.10) 0%, rgba(4,13,19,.5) 55%, var(--bg) 100%);
}
[data-theme="ocean-wave"] .hero .bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 70% at 50% 0%, rgba(95,224,212,.08), transparent 60%);
  mix-blend-mode:screen;
}
[data-theme="ocean-wave"] .hero h1{font-weight:500;letter-spacing:.01em}
[data-theme="ocean-wave"] .hero .mark{font-weight:700}
[data-theme="ocean-wave"] .card:hover{box-shadow:0 16px 40px rgba(23,182,201,.18)}

/* =========================================================================
   THEME 10 — MONO INK  (모노 잉크)  #에디토리얼 #흑백 #샤프
   웜 페이퍼 라이트 + 순수한 먹색 + 각진 모서리. 잡지처럼 또렷한 흑백.
   clean-minimal(쿨 화이트·둥근)과 달리 종이질감·직선·강한 대비.
   ========================================================================= */
[data-theme="mono-ink"]{
  color-scheme:light;   /* 기본(base.css)은 어두움 — 스크롤바·체크박스 같은 브라우저 부품을 밝게 */
  --bg:#f7f5f1;
  --bg-2:#efece6;
  --surface:#fffefb;
  --surface-2:#f0ece4;
  --fg:#0d0d0d;
  --fg-muted:#565248;
  --fg-dim:#6d685f;
  --accent:#0d0d0d;
  --accent-2:#565248;
  --line:rgba(13,13,13,.14);
  --line-strong:rgba(13,13,13,.26);
  --live:#dc3229;

  --tracking-wide:.34em;
  --radius:4px;
  --radius-lg:8px;
  --shadow:0 18px 50px rgba(20,18,12,.10);

  --hero-image:
    radial-gradient(120% 90% at 80% 0%, rgba(13,13,13,.06), transparent 55%),
    linear-gradient(180deg,#faf8f4 0%,#efece5 100%);
  --hero-overlay:linear-gradient(180deg, rgba(247,245,241,0) 0%, rgba(247,245,241,.28) 60%, var(--bg) 100%);
  --hero-fade:rgba(4,5,10,.62);   /* 사진 첫 화면은 어둡게 끊는다 — 흰 글씨가 종이색 바탕에 얹히지 않게 */
}
/* 라이트(페이퍼) 보정 — clean-minimal 과 같은 계열의 되돌림 + 샤프한 활자 */
[data-theme="mono-ink"] .hero h1{text-shadow:none;font-weight:700;letter-spacing:0}
[data-theme="mono-ink"] .hero .mark{font-weight:800}
[data-theme="mono-ink"] .band, [data-theme="mono-ink"] .trio{background:var(--bg-2)}
[data-theme="mono-ink"] .play{background:var(--surface);color:var(--fg)}
[data-theme="mono-ink"] .play:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
[data-theme="mono-ink"] .card:not(.has-photo) .sheen{opacity:.15}   /* 사진 카드의 어두운 막은 그대로 (흰 글씨가 읽히게) */
[data-theme="mono-ink"] .card:hover{box-shadow:0 16px 40px rgba(20,18,12,.12)}

/* =========================================================================
   THEME 11 — RED CURTAIN  (붉은 커튼이 열리는 무대)  #공연장 #와인 #골드
   딥 와인 블랙 + 크림슨 포인트 + 골드. 콘서트홀 커튼콜의 긴장감.
   ========================================================================= */
[data-theme="red-curtain"]{
  --bg:#0f0708;
  --bg-2:#160a0c;
  --surface:#1d0e11;
  --surface-2:#281419;
  --fg:#fbf1ef;
  --fg-muted:#c9a9a6;
  --fg-dim:#987774;
  --accent:#d6283f;
  --accent-2:#e8b86a;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);
  --live:#d93242;

  --tracking-wide:.30em;
  --radius:10px;
  --radius-lg:16px;

  --hero-image:
    radial-gradient(110% 90% at 50% -10%, rgba(214,40,63,.30), transparent 58%),
    radial-gradient(70% 60% at 0% 100%, rgba(232,184,106,.10), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(232,184,106,.08), transparent 60%),
    linear-gradient(180deg,#1a0a0d 0%,#0a0405 100%);
  --hero-overlay:linear-gradient(180deg, rgba(10,4,5,.08) 0%, rgba(10,4,5,.5) 55%, var(--bg) 100%);
}
/* 무대 조명: 위에서 떨어지는 스포트라이트 + 커튼 주름 같은 세로 결 */
[data-theme="red-curtain"] .hero .bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 65% at 50% 0%, rgba(255,226,196,.12), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 22px, rgba(0,0,0,.10) 22px 44px);
}
[data-theme="red-curtain"] .eyebrow{color:var(--accent-2)}          /* 골드 윗줄 */
[data-theme="red-curtain"] .hero h1{font-weight:600;letter-spacing:.01em}
[data-theme="red-curtain"] .hero .mark{font-weight:800}
[data-theme="red-curtain"] .card:hover{box-shadow:0 16px 44px rgba(214,40,63,.22)}

/* =========================================================================
   THEME 12 — LAVENDER DREAM  (라벤더 꿈결)  #파스텔 #몽글 #라이트
   라벤더 파스텔 라이트 + 퍼플·핑크 포인트. 팬카페처럼 다정하고 몽글몽글한 분위기.
   ========================================================================= */
[data-theme="lavender-dream"]{
  color-scheme:light;   /* 기본(base.css)은 어두움 — 스크롤바·체크박스 같은 브라우저 부품을 밝게 */
  --bg:#f5f1fb;
  --bg-2:#efe8f8;
  --surface:#fdfbff;
  --surface-2:#f1ebfa;
  --fg:#2a2238;
  --fg-muted:#6a5f80;
  --fg-dim:#6e6381;
  --accent:#7c4ddb;
  --accent-2:#97527c;
  --line:rgba(60,40,100,.12);
  --line-strong:rgba(60,40,100,.20);
  --live:#ce3b69;

  --tracking-wide:.28em;
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 18px 50px rgba(90,60,150,.14);

  --hero-image:
    radial-gradient(90% 80% at 85% 5%, rgba(240,122,179,.22), transparent 58%),
    radial-gradient(90% 80% at 10% 95%, rgba(124,77,219,.18), transparent 60%),
    linear-gradient(180deg,#f8f4fd 0%,#efe7f9 100%);
  --hero-overlay:linear-gradient(180deg, rgba(245,241,251,0) 0%, rgba(245,241,251,.28) 60%, var(--bg) 100%);
  --hero-fade:rgba(4,5,10,.62);   /* 사진 첫 화면은 어둡게 끊는다 — 흰 글씨가 밝은 바탕에 얹히지 않게 */
}
/* 라이트 보정 (clean-minimal·warm-story·mono-ink 와 같은 계열) */
[data-theme="lavender-dream"] .hero h1{text-shadow:none;font-weight:600}
[data-theme="lavender-dream"] .band, [data-theme="lavender-dream"] .trio{background:var(--bg-2)}
[data-theme="lavender-dream"] .play{background:var(--surface);color:var(--fg)}
[data-theme="lavender-dream"] .play:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
[data-theme="lavender-dream"] .card:not(.has-photo) .sheen{opacity:.35}   /* 사진 카드의 어두운 막은 그대로 (흰 글씨가 읽히게) */
[data-theme="lavender-dream"] .card:hover{box-shadow:0 18px 44px rgba(124,77,219,.18)}

/* =========================================================================
   DEOK — fonts.css
   글씨체 프리셋 30종. --font-display(제목) / --font-body(본문) 두 토큰만 바꾼다.
   전환은 <html data-font="...">. 짝: fonts.js(목록·불러오기) · settings.js(허용 목록).
   ⚠️ 웹폰트 파일(@font-face)은 여기서 @import 하지 않는다 — @import 는 렌더를 막는다.
      기본 글꼴은 각 페이지 <head> 가 비차단으로, 나머지는 fonts.js 가 고를 때 불러온다.
   ========================================================================= */

/* 굵기가 하나뿐인 제목 글꼴(독도·베이글 등)을 브라우저가 가짜로 굵게 칠해 뭉개지 않게 */
:is(h1,h2,h3,.mark){font-synthesis:none}

/* ---------------- 고딕 ---------------- */
[data-font="modern"]{        /* 모던 고딕 — 깔끔·현대적 (Pretendard 조각 판의 가족 이름은 'Pretendard Variable') */
  --font-display:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;
  --font-body:'Pretendard Variable','Pretendard','Noto Sans KR',system-ui,sans-serif;
}
[data-font="soft"]{          /* 부드러운 — 둥근 고딕 */
  --font-display:'Gowun Dodum','Noto Sans KR',sans-serif;
  --font-body:'Gowun Dodum','Noto Sans KR',sans-serif;
}
[data-font="nanum-gothic"]{  /* 나눔 고딕 — 익숙하고 반듯한 */
  --font-display:'Nanum Gothic','Noto Sans KR',sans-serif;
  --font-body:'Nanum Gothic','Noto Sans KR',sans-serif;
}
[data-font="gothic-a1"]{     /* 고딕 A1 — 단정한 굵기 폭 */
  --font-display:'Gothic A1','Noto Sans KR',sans-serif;
  --font-body:'Gothic A1','Noto Sans KR',sans-serif;
}
[data-font="ibm-plex"]{      /* IBM 플렉스 — 테크·에디토리얼 */
  --font-display:'IBM Plex Sans KR','Noto Sans KR',sans-serif;
  --font-body:'IBM Plex Sans KR','Noto Sans KR',sans-serif;
}
[data-font="sunflower"]{     /* 해바라기 — 가늘고 산뜻한 제목 */
  --font-display:'Sunflower','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}

/* ---------------- 명조 ---------------- */
[data-font="serif"]{         /* 감성 명조 — 우아한 세리프 제목 + 담백한 본문 */
  --font-display:'Nanum Myeongjo',serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="classic"]{       /* 고전 명조 — 정통 세리프 */
  --font-display:'Noto Serif KR',serif;
  --font-body:'Noto Serif KR','Noto Sans KR',serif;
}
[data-font="gowun-batang"]{  /* 고운 바탕 — 부드러운 바탕체 */
  --font-display:'Gowun Batang',serif;
  --font-body:'Gowun Batang','Noto Sans KR',serif;
}
[data-font="hahmlet"]{       /* 함렛 — 현대적인 명조 */
  --font-display:'Hahmlet',serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="song-myung"]{    /* 송명 — 붓맛 나는 명조 */
  --font-display:'Song Myung',serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="diphylleia"]{    /* 산하엽 — 섬세한 장식 명조 */
  --font-display:'Diphylleia',serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}

/* ---------------- 손글씨 (제목만, 본문은 읽기 편한 고딕) ---------------- */
[data-font="hand"]{          /* 펜글씨 */
  --font-display:'Nanum Pen Script','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="gaegu"]{         /* 개구 — 일기장 손글씨 (본문까지) */
  --font-display:'Gaegu','Noto Sans KR',cursive;
  --font-body:'Gaegu','Noto Sans KR',sans-serif;
}
[data-font="gamja"]{         /* 감자꽃 */
  --font-display:'Gamja Flower','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="poor-story"]{    /* 서툰 이야기 */
  --font-display:'Poor Story','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="hi-melody"]{     /* 하이 멜로디 */
  --font-display:'Hi Melody','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="single-day"]{    /* 싱글데이 */
  --font-display:'Single Day','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}

/* ---------------- 붓글씨 ---------------- */
[data-font="brush"]{         /* 나눔 붓 */
  --font-display:'Nanum Brush Script','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="dokdo"]{         /* 독도 — 거친 붓 */
  --font-display:'Dokdo','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="east-sea"]{      /* 동해 — 힘찬 붓 */
  --font-display:'East Sea Dokdo','Noto Sans KR',cursive;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}

/* ---------------- 둥근·귀여운 ---------------- */
[data-font="round"]{         /* 동글 — 둥글둥글 */
  --font-display:'Jua','Noto Sans KR',sans-serif;
  --font-body:'Jua','Noto Sans KR',sans-serif;
}
[data-font="dongle"]{        /* 동글동글 — 말랑한 */
  --font-display:'Dongle','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="cute"]{          /* 큐트 */
  --font-display:'Cute Font','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}

/* ---------------- 임팩트·개성 ---------------- */
[data-font="impact"]{        /* 임팩트 — 굵은 제목 */
  --font-display:'Black Han Sans','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="do-hyeon"]{      /* 도현 — 반듯한 굵은 제목 */
  --font-display:'Do Hyeon','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="bagel"]{         /* 베이글 — 통통한 */
  --font-display:'Bagel Fat One','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="gasoek"]{        /* 가석 — 묵직한 포스터 */
  --font-display:'Gasoek One','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="yeon-sung"]{     /* 연성 — 레트로 */
  --font-display:'Yeon Sung','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}
[data-font="gugi"]{          /* 구기 — 개성 있는 */
  --font-display:'Gugi','Noto Sans KR',sans-serif;
  --font-body:'Noto Sans KR','Pretendard',sans-serif;
}