/* 사이트 전체 스킨(테마). <html data-skin="..."> 로 켠다(static/skins.js). 기본(다이어리)은 tokens.css·style.css 그대로.
   스킨마다 색뿐 아니라 메뉴의 위치와 모양, 모서리, 글꼴, 밀도까지 달라서 서로 다른 사이트처럼 보인다.
     왼쪽 사이드바  : 뮤직(스포티파이풍) · 크림(노션풍) · 밤하늘(디스코드풍 아이콘 레일)
     위쪽 메뉴바    : 리그 게임풍 · 축구 · 드라큘라(개발자 콘솔) · 핑크(인스타풍) · 하늘(트렐로풍)
     오른쪽 세로 탭 : 싸이월드 클래식
     아래 떠 있는 독 : 숲속
     그대로 다이어리 틀: 레트로 게임기(화면 + 베젤)
   모바일(<700px)은 모두 아래 메뉴 바이고, 색과 모양만 스킨을 따른다.
   내 스킨이 모든 화면에 적용되고, 다른 가족의 미니홈에 들어가면 그 사람의 스킨으로 바뀐다. */

/* ═════ 공통: 다이어리 틀(스프링·책갈피·테이프)을 걷어 내고, 메뉴 색은 변수로 받는다 ═════ */
:root[data-skin] main#main { background-image: none; }
:root[data-skin] main#main::before, :root[data-skin] main#main::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 0; background: none; clip-path: none; pointer-events: none; z-index: 0;
}
:root[data-skin] .grid2 > .card::before { display: none; }
:root[data-skin] main#main > * { position: relative; z-index: 1; }
:root[data-skin] nav#nav { background: var(--navbg); border-top: 1px solid var(--navline); }
:root[data-skin] nav#nav a { color: var(--navfg); }
:root[data-skin] nav#nav a.on { color: var(--navon-fg); background: var(--navon-bg); }
:root[data-skin] nav#nav a.on::before { background: var(--navon-bar, var(--accent)); }
:root[data-skin] nav#nav a:hover { transform: none; }
@media (min-width: 700px) {
  :root[data-skin] nav#nav { background: transparent; border-top: 0; }
  :root[data-skin] nav#nav a { background: transparent; box-shadow: none; border-radius: 8px; transform: none; }
  :root[data-skin] nav#nav a.on { transform: none; }
}
/* 메뉴에 글자가 안 맞는 좁은 폭에서는 아이콘만 보인다 */
.iconsonly nav#nav a { font-size: 0; gap: 0; }

/* ═════ 싸이월드 클래식 (retro): 오른쪽 세로 탭 ═════ */
:root[data-skin=retro] {
  --desk: #7cc4ff; --paper: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-2: #eaf5ff; --ink: #1f2f46; --muted: #5d7490;
  --line: #bcd9f5; --line-strong: #5aa0e6; --rule: rgba(90, 160, 230, .1);
  --accent: #ff7f27; --accent-ink: #ffffff; --accent-soft: #ffe6d0; --coral: #ff7f27; --hl: #ffe9a8; --danger: #d9382a; --warn: #ff7f27; --pos: #2a8a4a;
  --radius: 6px; --radius-sm: 4px; --shadow: 0 2px 0 #4a9be6; --font-hand: var(--font);
  --navbg: #d6ebff; --navline: #4a9be6; --navfg: #1f5fa8; --navon-fg: #fff; --navon-bg: #2f8fe6; --navon-bar: #ff7f27;
}
:root[data-skin=retro] body { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px), linear-gradient(180deg, #7cc4ff, #c9e8ff 320px, #eef8ff); background-attachment: fixed; }
:root[data-skin=retro] main#main { background: #fff; border: 2px solid #4a9be6; border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 12px 30px -16px rgba(30, 90, 160, .6); }
:root[data-skin=retro] h1 { font-weight: 800; color: #1f5fa8; }
:root[data-skin=retro] .card { border: 1px solid #5aa0e6; box-shadow: 0 0 0 2px #fff inset, 0 2px 0 #4a9be6; overflow: hidden; }
:root[data-skin=retro] .card h2 { margin: -16px -16px 12px; padding: 7px 14px; border-bottom: 0; color: #fff; background: linear-gradient(#63b6ff, #2f8fe6); text-shadow: 0 1px 0 rgba(0, 60, 130, .45); font-size: 1.05rem; font-weight: 700; }
:root[data-skin=retro] .card h2 .muted { color: #e4f3ff; }
:root[data-skin=retro] .card h2 .btn { color: #1f2f46; text-shadow: none; }
:root[data-skin=retro] .btn { border-color: #5aa0e6; border-radius: 4px; box-shadow: 0 2px 0 #4a9be6; }
:root[data-skin=retro] .btn.primary { background: #ff7f27; border-color: #d4600c; box-shadow: 0 2px 0 #d4600c; }
:root[data-skin=retro] .brand { color: #1f7fd6; }
@media (min-width: 700px) {
  :root[data-skin=retro] #app { grid-template-columns: minmax(0, 1fr) 132px; column-gap: 0; padding: 24px 14px 28px 22px; }
  :root[data-skin=retro] nav#nav { grid-column: 2; grid-row: 1; margin-top: 34px; gap: 6px; }
  :root[data-skin=retro] main#main { grid-column: 1; grid-row: 1; }
  :root[data-skin=retro] .brand { display: none; }
  :root[data-skin=retro] nav#nav a { flex-direction: row; justify-content: flex-start; gap: 8px; height: 48px; width: 100%; padding: 0 8px 0 14px; font-size: .88rem; margin-left: -2px;
    background: #d6ebff; border: 2px solid #4a9be6; border-left: 0; border-radius: 0 14px 14px 0; box-shadow: 0 2px 0 rgba(30, 90, 160, .25); }
  :root[data-skin=retro] nav#nav a:hover { background: #eaf5ff; }
  :root[data-skin=retro] nav#nav a.on { background: #fff; color: #1f5fa8; font-weight: 800; width: calc(100% + 8px); margin-left: -6px; padding-left: 18px; border-color: #4a9be6; z-index: 2; }
  :root[data-skin=retro] nav#nav a.on::before { display: none; }
}

/* ═════ 레트로 게임기 (gameboy): 연두 LCD 화면 + 검은 베젤 + 도트 글꼴 ═════ */
:root[data-skin=gameboy] {
  color-scheme: light;
  --desk: #b8b4a8; --paper: #9bbc0f; --bg: #9bbc0f; --surface: #8bac0f; --surface-2: #a8c61c; --ink: #0f380f; --muted: #2f5f2f;
  --line: #306230; --line-strong: #0f380f; --rule: rgba(15, 56, 15, .1);
  --accent: #0f380f; --accent-ink: #9bbc0f; --accent-soft: #8bac0f; --coral: #0f380f; --hl: #c9de5e; --danger: #0f380f; --warn: #306230; --pos: #0f380f;
  --radius: 0px; --radius-sm: 0px; --shadow: 4px 4px 0 #306230;
  --font: "Galmuri11", "DotGothic16", "Malgun Gothic", monospace; --font-hand: var(--font);
  --navbg: #4b4b63; --navline: #2c2c3e; --navfg: #c9de5e; --navon-fg: #0f380f; --navon-bg: #9bbc0f; --navon-bar: #0f380f;
}
:root[data-skin=gameboy] body { background-color: #b8b4a8; background-image: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.4px); background-size: 6px 6px; }
:root[data-skin=gameboy] main#main {
  background-color: #9bbc0f; border: 10px solid #4b4b63; border-radius: 6px 6px 44px 6px; box-shadow: 0 0 0 3px #2c2c3e, 6px 8px 0 3px rgba(0, 0, 0, .18);
  background-image: repeating-linear-gradient(0deg, rgba(15, 56, 15, .06) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(15, 56, 15, .05) 0 2px, transparent 2px 4px);
}
:root[data-skin=gameboy] main#main::after { height: auto; bottom: 0; z-index: 5; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px); }
:root[data-skin=gameboy] h1, :root[data-skin=gameboy] h2 { letter-spacing: 0; text-shadow: 2px 2px 0 rgba(15, 56, 15, .25); }
:root[data-skin=gameboy] .card { border: 3px solid #0f380f; box-shadow: 4px 4px 0 #306230; }
:root[data-skin=gameboy] .card h2 { border-bottom: 3px solid #0f380f; }
:root[data-skin=gameboy] .btn { border: 3px solid #0f380f; border-radius: 0; background: #9bbc0f; box-shadow: 3px 3px 0 #0f380f; }
:root[data-skin=gameboy] .btn:hover { background: #c9de5e; }
:root[data-skin=gameboy] .btn.primary { background: #0f380f; color: #9bbc0f; border-color: #0f380f; box-shadow: 3px 3px 0 #306230; }
:root[data-skin=gameboy] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { background: #c9de5e; border: 3px solid #0f380f; border-radius: 0; }
:root[data-skin=gameboy] .brand { color: #0f380f; text-shadow: none; }
:root[data-skin=gameboy] :is(.chip, .alchip, .pill, .tab) { border: 3px solid #0f380f; border-radius: 0; }
:root[data-skin=gameboy] dialog { border: 4px solid #0f380f; border-radius: 0; background: #9bbc0f; }
:root[data-skin=gameboy] .stage { border-radius: 0; border: 4px solid #0f380f; image-rendering: pixelated; }
:root[data-skin=gameboy] nav#nav a { border: 3px solid #0f380f; border-radius: 0; }
@media (min-width: 700px) {
  :root[data-skin=gameboy] nav#nav a { background: #306230; color: #c9de5e; border-radius: 0; box-shadow: 4px 4px 0 #0f380f; }
  :root[data-skin=gameboy] nav#nav a.on { background: #9bbc0f; color: #0f380f; transform: translateX(8px); }
  :root[data-skin=gameboy] nav#nav a.on::after { content: "▶"; position: absolute; right: 10px; font-size: .8rem; }
  :root[data-skin=gameboy] nav#nav a.on::before { display: none; }
}

/* ═════ 뮤직 (music): 스포티파이풍 검은 사이드바 + 둥근 패널 + 네온 + 이퀄라이저 ═════ */
:root[data-skin=music] {
  color-scheme: dark;
  --desk: #07070d; --paper: #13131f; --bg: #13131f; --surface: #1b1b2c; --surface-2: #25253b; --ink: #efeeff; --muted: #a2a0cc;
  --line: #2f2f4d; --line-strong: #4c4c7c; --rule: rgba(255, 255, 255, .04);
  --accent: #a58bff; --accent-ink: #0d0d18; --accent-soft: #2b2656; --coral: #ff4d8d; --hl: #3d3170; --danger: #ff6b81; --warn: #ffb454; --pos: #3be3b0;
  --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 26px -12px rgba(124, 107, 212, .6); --font-hand: var(--font);
  --navbg: #000; --navline: #2f2f4d; --navfg: #b3b3d1; --navon-fg: #12101f; --navon-bg: linear-gradient(135deg, #a58bff, #ff4d8d); --navon-bar: transparent;
}
:root[data-skin=music] body { background: #07070d; }
:root[data-skin=music] main#main { background: linear-gradient(180deg, #2a2060 0, #13131f 260px); border: 0; border-radius: 16px; box-shadow: none; padding-top: 58px; }
:root[data-skin=music] main#main::before { height: 46px; opacity: .6; border-radius: 16px 16px 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='46' viewBox='0 0 300 46'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff4d8d'/%3E%3Cstop offset='1' stop-color='%23a58bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='26;15;31;9;26' dur='0.77s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='20;31;15;37;20' dur='0.77s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='11' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='40;12;29;9;40' dur='1.52s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='6;34;17;37;6' dur='1.52s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='21' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='19;8;11;33;19' dur='1.08s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='27;38;35;13;27' dur='1.08s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='31' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='21;11;41;33;21' dur='0.75s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='25;35;5;13;25' dur='0.75s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='41' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='42;13;20;9;42' dur='1.22s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;33;26;37;4' dur='1.22s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='51' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='31;9;20;8;31' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='15;37;26;38;15' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='61' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='14;24;32;15;14' dur='1.19s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='32;22;14;31;32' dur='1.19s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='71' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='42;25;41;17;42' dur='0.79s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;21;5;29;4' dur='0.79s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='81' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='42;18;29;12;42' dur='1.19s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='4;28;17;34;4' dur='1.19s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='91' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='10;42;9;19;10' dur='1.15s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='36;4;37;27;36' dur='1.15s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='101' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='40;33;26;35;40' dur='1.23s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='6;13;20;11;6' dur='1.23s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='111' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='35;29;25;21;35' dur='1.41s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='11;17;21;25;11' dur='1.41s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='121' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='21;11;42;25;21' dur='1.17s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='25;35;4;21;25' dur='1.17s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='131' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='27;34;24;10;27' dur='0.81s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='19;12;22;36;19' dur='0.81s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='141' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='32;16;27;15;32' dur='1.54s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='14;30;19;31;14' dur='1.54s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='151' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='32;8;10;41;32' dur='1.22s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='14;38;36;5;14' dur='1.22s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='161' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='26;27;28;37;26' dur='1.22s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='20;19;18;9;20' dur='1.22s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='171' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='35;10;11;23;35' dur='1.13s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='11;36;35;23;11' dur='1.13s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='181' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='10;9;25;42;10' dur='1.59s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='36;37;21;4;36' dur='1.59s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='191' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='34;24;30;28;34' dur='0.72s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='12;22;16;18;12' dur='0.72s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='201' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='35;28;16;13;35' dur='1.14s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='11;18;30;33;11' dur='1.14s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='211' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='19;24;14;21;19' dur='1.06s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='27;22;32;25;27' dur='1.06s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='221' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='37;11;16;34;37' dur='1.06s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='9;35;30;12;9' dur='1.06s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='231' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='23;14;33;41;23' dur='0.95s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='23;32;13;5;23' dur='0.95s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='241' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='32;28;30;20;32' dur='0.84s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='14;18;16;26;14' dur='0.84s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='251' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='17;15;20;20;17' dur='0.71s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='29;31;26;26;29' dur='0.71s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='261' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='17;22;24;6;17' dur='0.83s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='29;24;22;40;29' dur='0.83s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='271' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='40;29;42;26;40' dur='1.56s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='6;17;4;20;6' dur='1.56s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='281' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='38;9;35;41;38' dur='1.05s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='8;37;11;5;8' dur='1.05s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='291' width='7' rx='2' fill='url(%23g)'%3E%3Canimate attributeName='height' values='31;31;12;36;31' dur='1.27s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='15;15;34;10;15' dur='1.27s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E") repeat-x left bottom / auto 100%; }
:root[data-skin=music] h1 { font-weight: 800; letter-spacing: -.02em; background: linear-gradient(90deg, #fff, #cbbcff 60%, #ff9ac1); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin=music] h2 { font-weight: 800; }
:root[data-skin=music] .card { background: #1b1b2c; border: 0; border-radius: 12px; transition: background .2s, transform .2s; }
:root[data-skin=music] .card:hover { background: #222238; }
:root[data-skin=music] .card h2 { border-bottom: 0; padding-bottom: 2px; }
:root[data-skin=music] .btn { background: #2a2a44; border: 0; border-radius: 99px; box-shadow: none; color: #efeeff; padding: 8px 18px; }
:root[data-skin=music] .btn:hover { background: #36365a; transform: scale(1.03); }
:root[data-skin=music] .btn.primary { background: linear-gradient(90deg, #a58bff, #ff4d8d); color: #12101f; font-weight: 800; box-shadow: 0 8px 18px -8px #ff4d8d; }
:root[data-skin=music] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { background: #101019; border: 1px solid #3b3b63; color: #efeeff; border-radius: 10px; }
:root[data-skin=music] :is(.alchip, .chip, .pill) { background: #25253b; border: 0; }
:root[data-skin=music] :is(.alchip.on, .chip.on) { background: #efeeff; color: #12101f; }
:root[data-skin=music] dialog { background: #181829; color: #efeeff; border: 1px solid #3b3b63; border-radius: 18px; }
:root[data-skin=music] :is(.cal, .cal .d, .cal .wd) { background: #1b1b2c; }
:root[data-skin=music] .tabs .tab { background: #1b1b2c; color: #cfcdf5; border-radius: 99px 99px 0 0; }
:root[data-skin=music] #jukebar { background: #000; border-top-color: #2f2f4d; }
@media (min-width: 700px) {
  :root[data-skin=music] #app { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; max-width: none; padding: 12px; }
  :root[data-skin=music] nav#nav { top: 12px; height: calc(100dvh - 24px); background: #000; border-radius: 16px; padding: 16px 10px; gap: 4px; overflow-y: auto; align-items: stretch; scrollbar-width: none; }
  :root[data-skin=music] nav#nav a { flex-direction: row; justify-content: center; height: 46px; width: 100%; padding: 0; font-size: 0; gap: 0; border-radius: 10px; color: #b3b3d1; }
  :root[data-skin=music] nav#nav a:hover { color: #fff; background: #1b1b2c; }
  :root[data-skin=music] nav#nav a.on { background: #1f1b3d; color: #fff; box-shadow: inset 3px 0 0 #a58bff; }
  :root[data-skin=music] .brand { display: none; }
}
@media (min-width: 1100px) {
  :root[data-skin=music] #app { grid-template-columns: 232px minmax(0, 1fr); }
  :root[data-skin=music] nav#nav a { justify-content: flex-start; padding: 0 14px; font-size: .95rem; gap: 14px; font-weight: 700; }
  :root[data-skin=music] .brand { display: block; padding: 4px 14px 14px; font-size: 1.5rem; background: linear-gradient(90deg, #a58bff, #ff4d8d); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ═════ 리그 게임풍 (league): 위쪽 메뉴바 + 금색 모서리 + 육각 문양 (특정 게임의 로고·그림은 쓰지 않고 분위기만 비슷하게) ═════ */
:root[data-skin=league] {
  color-scheme: dark;
  --desk: #010a13; --paper: #091428; --bg: #091428; --surface: #0f1e35; --surface-2: #14274a; --ink: #f0e6d2; --muted: #a39b88;
  --line: #3a3124; --line-strong: #785a28; --rule: rgba(200, 170, 110, .05);
  --accent: #c8aa6e; --accent-ink: #0a1428; --accent-soft: #1d2d47; --coral: #0ac8b9; --hl: #1f3b63; --danger: #e84057; --warn: #cdbe91; --pos: #0acf83;
  --radius: 2px; --radius-sm: 2px; --shadow: 0 0 0 1px rgba(200, 170, 110, .08) inset, 0 10px 22px -12px #000;
  --font-hand: "Cinzel", "Noto Serif KR", "Batang", serif;
  --navbg: #050d1a; --navline: #785a28; --navfg: #cdbe91; --navon-fg: #f0e6d2; --navon-bg: linear-gradient(0deg, rgba(200, 170, 110, .25), transparent); --navon-bar: #c8aa6e;
}
:root[data-skin=league] body { background: radial-gradient(900px 520px at 50% -12%, #0b3354 0, transparent 62%), #010a13; background-attachment: fixed; }
:root[data-skin=league] main#main { background-color: #091428; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23c8aa6e' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M28 66L0 50V16L28 0L56 16V50L28 66V100'/%3E%3Cpath d='M28 0V34L0 50V84L28 100L56 84V50L28 34'/%3E%3C/g%3E%3C/svg%3E"); background-size: 56px 100px; border: 1px solid #785a28; border-radius: 0; box-shadow: 0 0 0 1px #010a13, 0 0 38px rgba(10, 200, 185, .1), 0 24px 50px -26px #000; }
:root[data-skin=league] main#main::before { height: 3px; background: linear-gradient(90deg, transparent, #c8aa6e 25%, #f0e6d2 50%, #c8aa6e 75%, transparent); }
:root[data-skin=league] main#main::after { top: auto; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, #785a28 30%, #785a28 70%, transparent); }
:root[data-skin=league] :is(h1, h2) { font-weight: 700; letter-spacing: .05em; }
:root[data-skin=league] h1 { background: linear-gradient(180deg, #f0e6d2, #c8aa6e 60%, #785a28); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin=league] .card {      /* 네 모서리에 금색 꺾쇠 */
  background: linear-gradient(180deg, #0f1f38, #0a1830); border: 1px solid #2c2519; box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .06);
  background-image: linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(#c8aa6e, #c8aa6e), linear-gradient(180deg, #0f1f38, #0a1830);
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 100% 100%;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom, 0 0; background-repeat: no-repeat;
}
:root[data-skin=league] .card h2 { border-bottom: 1px solid #3a3124; color: #f0e6d2; text-transform: uppercase; font-size: 1.15rem; }
:root[data-skin=league] .btn { background: linear-gradient(#1e2328, #0a1428); border: 1px solid #785a28; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .12); color: #cdbe91; letter-spacing: .02em; }
:root[data-skin=league] .btn:hover { border-color: #c8aa6e; color: #f0e6d2; background: linear-gradient(#262d33, #0f1d38); }
:root[data-skin=league] .btn.primary { background: linear-gradient(#e0c685, #a2813b 60%, #785a28); color: #0a1428; border-color: #f0e6d2; box-shadow: 0 0 14px rgba(200, 170, 110, .3); font-weight: 700; }
:root[data-skin=league] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { background: #050d1a; border: 1px solid #5b4a28; color: #f0e6d2; border-radius: 0; }
:root[data-skin=league] :is(.alchip, .chip, .pill) { background: #0a1428; border: 1px solid #5b4a28; border-radius: 0; }
:root[data-skin=league] :is(.alchip.on, .chip.on) { border-color: #c8aa6e; background: #1d2d47; }
:root[data-skin=league] dialog { background: #0a1428; color: #f0e6d2; border: 2px solid #785a28; border-radius: 0; }
:root[data-skin=league] :is(.cal, .cal .d, .cal .wd) { background: #0f1e35; }
:root[data-skin=league] .tabs .tab { background: #0a1428; color: #cdbe91; border-radius: 0; }
:root[data-skin=league] .brand { color: #c8aa6e; letter-spacing: .1em; }
:root[data-skin=league] #jukebar { background: #050d1a; border-top-color: #785a28; }

/* ═════ 축구 (soccer): 위쪽 메뉴바 + 잔디 띠 + 스코어보드 카드 ═════ */
:root[data-skin=soccer] {
  color-scheme: light;
  --desk: #0d3b1c; --paper: #f3f8ef; --bg: #f3f8ef; --surface: #ffffff; --surface-2: #e8f1e3; --ink: #13281a; --muted: #5b7062;
  --line: #d3e2cc; --line-strong: #8fb48a; --rule: rgba(46, 125, 50, .08);
  --accent: #1f7a2c; --accent-ink: #ffffff; --accent-soft: #dff0d9; --coral: #ffb300; --hl: #ffe66d; --danger: #c62828; --warn: #ef6c00; --pos: #1f7a2c;
  --radius: 6px; --radius-sm: 4px; --shadow: 0 2px 0 rgba(13, 59, 28, .14), 0 10px 18px -12px rgba(13, 59, 28, .5);
  --font-hand: "Oswald", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --navbg: #14502a; --navline: #fff; --navfg: #e8f6e2; --navon-fg: #14281a; --navon-bg: #ffd400; --navon-bar: #14281a;
}
:root[data-skin=soccer] body { background: radial-gradient(700px 360px at 12% -6%, rgba(255, 255, 255, .22) 0, transparent 60%), radial-gradient(700px 360px at 92% -6%, rgba(255, 255, 255, .18) 0, transparent 60%), #0d3b1c; background-attachment: fixed; }
:root[data-skin=soccer] main#main { background-color: #f3f8ef; border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 24px 50px -22px #000; padding-top: 72px; overflow: hidden; }
:root[data-skin=soccer] main#main::before { height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%23fff' stroke='%23222' stroke-width='2'/%3E%3Cpath d='M24 15l8 6-3 9h-10l-3-9z' fill='%23222'/%3E%3Cpath d='M24 15V6M32 21l8-3M29 30l5 7M19 30l-5 7M16 21l-8-3' stroke='%23222' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat 96% 50% / auto 78%, linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(255, 255, 255, .9) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)), repeating-linear-gradient(90deg, #2e8b3a 0 64px, #287a33 64px 128px); border-bottom: 4px solid #fff; }
:root[data-skin=soccer] main#main::after { top: 0; height: 54px; background: radial-gradient(circle at 50% 50%, transparent 21px, rgba(255, 255, 255, .85) 21px 23px, transparent 23px); }
:root[data-skin=soccer] :is(h1, h2) { font-style: italic; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
:root[data-skin=soccer] h1 { color: #14502a; }
:root[data-skin=soccer] .card { background: #fff; border: 1px solid #d3e2cc; border-left: 6px solid #1f7a2c; }
:root[data-skin=soccer] .card h2 { border-bottom: 2px solid #1f7a2c; color: #14502a; }
:root[data-skin=soccer] .btn { background: #fff; border: 2px solid #1f7a2c; border-radius: 4px; color: #14502a; font-weight: 700; box-shadow: 0 2px 0 #1f7a2c; }
:root[data-skin=soccer] .btn:hover { background: #e8f6e2; }
:root[data-skin=soccer] .btn.primary { background: #1f7a2c; color: #fff; border-color: #14502a; box-shadow: 0 2px 0 #14502a; }
:root[data-skin=soccer] .brand { color: #fff; font-style: italic; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
:root[data-skin=soccer] :is(.alchip.on, .chip.on) { background: #ffd400; }
:root[data-skin=soccer] .dday b { font-family: var(--font-hand); color: #1f7a2c; font-style: italic; }

/* ═════ 드라큘라 (dracula): OpsCenter 같은 개발자 콘솔 — 위쪽 메뉴바 + 네온 밑줄 + 모노스페이스 + 촘촘한 카드 ═════ */
:root[data-skin=dracula] {
  color-scheme: dark;
  --desk: #1b1c26; --paper: #282a36; --bg: #282a36; --surface: #2f3142; --surface-2: #383b4f; --ink: #f8f8f2; --muted: #98a2cf;
  --line: #44475a; --line-strong: #5a5e7a; --rule: rgba(255, 255, 255, .03);
  --accent: #bd93f9; --accent-ink: #1b1c26; --accent-soft: #3a3556; --coral: #ff79c6; --hl: #44475a; --danger: #ff5555; --warn: #ffb86c; --pos: #50fa7b;
  --radius: 6px; --radius-sm: 4px; --shadow: 0 0 0 1px rgba(189, 147, 249, .06), 0 8px 20px -12px #000;
  --font: system-ui, -apple-system, "Pretendard", "Malgun Gothic", sans-serif;
  --font-hand: "JetBrains Mono", "Cascadia Code", "D2Coding", Consolas, "Malgun Gothic", monospace;
  --navbg: #21222c; --navline: #44475a; --navfg: #a9b0d8; --navon-fg: #f8f8f2; --navon-bg: linear-gradient(90deg, rgba(139, 233, 253, .14), transparent 80%); --navon-bar: #8be9fd;
}
:root[data-skin=dracula] body { background: #1b1c26; }
:root[data-skin=dracula] main#main { background: #282a36; border: 1px solid #44475a; border-radius: 8px; box-shadow: 0 0 0 1px #1b1c26, 0 0 40px rgba(189, 147, 249, .07); padding: 22px 26px 30px; }
:root[data-skin=dracula] h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; background: linear-gradient(90deg, #8be9fd, #bd93f9 55%, #ff79c6); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin=dracula] h2 { font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8be9fd; }
:root[data-skin=dracula] .card { background: #2f3142; border: 1px solid #44475a; padding: 13px 14px; }
:root[data-skin=dracula] .card:hover { border-color: #5a5e7a; }
:root[data-skin=dracula] .card h2 { border-bottom: 1px solid #44475a; margin-bottom: 8px; padding-bottom: 6px; }
:root[data-skin=dracula] .btn { background: #383b4f; border: 1px solid #5a5e7a; border-radius: 5px; box-shadow: none; color: #f8f8f2; min-height: 34px; padding: 5px 12px; font-size: .9rem; }
:root[data-skin=dracula] .btn:hover { border-color: #8be9fd; color: #8be9fd; box-shadow: 0 0 12px -6px #8be9fd; }
:root[data-skin=dracula] .btn.primary { background: linear-gradient(135deg, #bd93f9, #ff79c6); color: #1b1c26; border-color: transparent; font-weight: 700; box-shadow: 0 0 14px -4px #bd93f9; }
:root[data-skin=dracula] .btn.primary:hover { filter: brightness(1.1); color: #1b1c26; }
:root[data-skin=dracula] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { background: #21222c; border: 1px solid #44475a; color: #f8f8f2; border-radius: 5px; min-height: 36px; padding: 6px 10px; }
:root[data-skin=dracula] :is(input, select, textarea):focus { border-color: #8be9fd; box-shadow: 0 0 0 2px rgba(139, 233, 253, .18); outline: none; }
:root[data-skin=dracula] :is(.alchip, .chip, .pill) { background: #21222c; border: 1px solid #44475a; border-radius: 4px; }
:root[data-skin=dracula] :is(.alchip.on, .chip.on) { border-color: #8be9fd; color: #8be9fd; background: #21222c; }
:root[data-skin=dracula] dialog { background: #2f3142; color: #f8f8f2; border: 1px solid #5a5e7a; border-radius: 10px; }
:root[data-skin=dracula] :is(.cal, .cal .d, .cal .wd) { background: #2f3142; }
:root[data-skin=dracula] .tabs .tab { background: #21222c; color: #a9b0d8; border-radius: 4px 4px 0 0; }
:root[data-skin=dracula] .brand { font-weight: 800; background: linear-gradient(90deg, #8be9fd, #bd93f9); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; }
:root[data-skin=dracula] :is(.kc, .kcal-day, .dday b, .jbtime) { font-family: var(--font-hand); }
:root[data-skin=dracula] #jukebar { background: #21222c; border-top-color: #44475a; }

/* ═════ 핑크 (pink): 인스타그램풍 — 위쪽 흰 메뉴바 + 둥근 흰 카드 + 그라디언트 포인트 ═════ */
:root[data-skin=pink] {
  color-scheme: light;
  --desk: #fafafa; --paper: #ffffff; --bg: #fafafa; --surface: #ffffff; --surface-2: #f5f5f7; --ink: #262626; --muted: #8e8e8e;
  --line: #efefef; --line-strong: #dbdbdb; --rule: transparent;
  --accent: #d6249f; --accent-ink: #fff; --accent-soft: #fdeaf5; --coral: #fd5949; --hl: #ffe4f3; --danger: #ed4956; --warn: #f09433; --pos: #2ecc71;
  --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(0, 0, 0, .04); --font-hand: var(--font);
  --navbg: #fff; --navline: #efefef; --navfg: #8e8e8e; --navon-fg: #d6249f; --navon-bg: transparent; --navon-bar: #d6249f;
}
:root[data-skin=pink] body { background: #fafafa; }
:root[data-skin=pink] main#main { background: transparent; border: 0; box-shadow: none; padding: 0 0 30px; min-height: 0; }
:root[data-skin=pink] h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
:root[data-skin=pink] h2 { font-size: 1.05rem; font-weight: 800; }
:root[data-skin=pink] .card { background: #fff; border: 1px solid #efefef; border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
:root[data-skin=pink] .card h2 { border-bottom: 0; padding-bottom: 0; }
:root[data-skin=pink] .btn { background: #efefef; border: 0; border-radius: 10px; box-shadow: none; font-weight: 600; }
:root[data-skin=pink] .btn:hover { background: #e3e3e3; }
:root[data-skin=pink] .btn.primary { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff; }
:root[data-skin=pink] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { background: #fafafa; border: 1px solid #dbdbdb; border-radius: 12px; }
:root[data-skin=pink] :is(.alchip, .chip, .pill) { background: #fff; border: 1px solid #dbdbdb; }
:root[data-skin=pink] :is(.alchip.on, .chip.on) { background: #fdeaf5; border-color: #d6249f; color: #bc1888; }
:root[data-skin=pink] dialog { border-radius: 20px; }
:root[data-skin=pink] .brand { font-family: "Gaegu", cursive; font-size: 1.8rem; font-weight: 700; background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin=pink] .stage { border-radius: 18px; }
:root[data-skin=pink] .post { padding: 0; overflow: hidden; }
:root[data-skin=pink] .post > * { margin-left: 14px; margin-right: 14px; }
:root[data-skin=pink] .post > .postphotos { margin: 0 0 8px; border-radius: 0; }
:root[data-skin=pink] .post > .posthead { padding-top: 12px; }
:root[data-skin=pink] .post > :last-child { margin-bottom: 12px; }

/* ═════ 하늘 (sky): 트렐로·노션 대시보드풍 — 파란 메뉴바 + 납작한 흰 카드 + 촘촘한 간격 ═════ */
:root[data-skin=sky] {
  color-scheme: light;
  --desk: #eef3f9; --paper: #ffffff; --bg: #eef3f9; --surface: #ffffff; --surface-2: #f1f2f4; --ink: #172b4d; --muted: #626f86;
  --line: #dcdfe4; --line-strong: #b3b9c4; --rule: transparent;
  --accent: #0c66e4; --accent-ink: #fff; --accent-soft: #e9f2ff; --coral: #0c66e4; --hl: #cce0ff; --danger: #c9372c; --warn: #b65c02; --pos: #1f845a;
  --radius: 3px; --radius-sm: 3px; --shadow: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31); --font-hand: var(--font);
  --navbg: #0c66e4; --navline: #0055cc; --navfg: rgba(255, 255, 255, .88); --navon-fg: #fff; --navon-bg: rgba(255, 255, 255, .22); --navon-bar: #fff;
}
:root[data-skin=sky] body { background: #eef3f9; }
:root[data-skin=sky] main#main { background: transparent; border: 0; box-shadow: none; padding: 0 0 30px; min-height: 0; }
:root[data-skin=sky] h1 { font-size: 1.45rem; font-weight: 700; }
:root[data-skin=sky] h2 { font-size: .95rem; font-weight: 700; }
:root[data-skin=sky] .card { border: 0; box-shadow: 0 1px 1px rgba(9, 30, 66, .25), 0 0 1px rgba(9, 30, 66, .31); padding: 12px 14px; }
:root[data-skin=sky] .card h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; color: #44546f; }
:root[data-skin=sky] .btn { background: rgba(9, 30, 66, .06); border: 0; border-radius: 3px; box-shadow: none; font-weight: 600; min-height: 34px; padding: 5px 12px; font-size: .9rem; }
:root[data-skin=sky] .btn:hover { background: rgba(9, 30, 66, .12); }
:root[data-skin=sky] .btn.primary { background: #0c66e4; color: #fff; }
:root[data-skin=sky] .btn.primary:hover { background: #0055cc; }
:root[data-skin=sky] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { border: 2px solid #dcdfe4; border-radius: 3px; background: #fff; }
:root[data-skin=sky] :is(.alchip, .chip, .pill) { border: 0; background: #dcdfe4; border-radius: 3px; }
:root[data-skin=sky] :is(.alchip.on, .chip.on) { background: #0c66e4; color: #fff; }
:root[data-skin=sky] .brand { color: #fff; font-weight: 800; letter-spacing: -.02em; }
:root[data-skin=sky] .tabs .tab { border-radius: 3px 3px 0 0; }

/* ═════ 크림 (cream): 노션풍 — 왼쪽 글자 목록 사이드바 + 흰 페이지 + 세리프 제목 ═════ */
:root[data-skin=cream] {
  color-scheme: light;
  --desk: #ffffff; --paper: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f6f3; --ink: #37352f; --muted: #8a857a;
  --line: #e8e4da; --line-strong: #d3cdbd; --rule: transparent;
  --accent: #2f2b24; --accent-ink: #fff; --accent-soft: #f1efe9; --coral: #c9722b; --hl: #fbf3db; --danger: #c4554d; --warn: #c9722b; --pos: #448361;
  --radius: 6px; --radius-sm: 4px; --shadow: none; --font-hand: Georgia, "Noto Serif KR", "Batang", serif;
  --navbg: #f7f6f3; --navline: #e8e4da; --navfg: #6b675d; --navon-fg: #2f2b24; --navon-bg: #e8e4da; --navon-bar: #c9722b;
}
:root[data-skin=cream] body { background: #fff; }
:root[data-skin=cream] main#main { background: #fff; border: 0; box-shadow: none; border-radius: 0; }
:root[data-skin=cream] h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
:root[data-skin=cream] h2 { font-family: var(--font); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a857a; }
:root[data-skin=cream] .card { background: #fff; border: 1px solid #e8e4da; box-shadow: none; }
:root[data-skin=cream] .card:hover { background: #fcfbf9; }
:root[data-skin=cream] .card h2 { border-bottom: 0; padding-bottom: 0; }
:root[data-skin=cream] .btn { background: #fff; border: 1px solid #d3cdbd; border-radius: 6px; box-shadow: none; }
:root[data-skin=cream] .btn:hover { background: #f1efe9; }
:root[data-skin=cream] .btn.primary { background: #2f2b24; color: #fff; border-color: #2f2b24; }
:root[data-skin=cream] :is(.alchip, .chip, .pill) { background: #f7f6f3; border: 0; }
:root[data-skin=cream] :is(.alchip.on, .chip.on) { background: #2f2b24; color: #fff; }
:root[data-skin=cream] .brand { font-family: var(--font-hand); font-weight: 700; color: #37352f; }
@media (min-width: 700px) {
  :root[data-skin=cream] #app { grid-template-columns: 64px minmax(0, 1fr); column-gap: 0; max-width: none; padding: 0; }
  :root[data-skin=cream] nav#nav { top: 0; height: 100dvh; background: #f7f6f3; border-right: 1px solid #e8e4da; padding: 14px 8px; gap: 2px; overflow-y: auto; align-items: stretch; scrollbar-width: none; }
  :root[data-skin=cream] nav#nav a { flex-direction: row; justify-content: center; height: 36px; width: 100%; padding: 0; font-size: 0; gap: 0; border-radius: 6px; }
  :root[data-skin=cream] nav#nav a:hover { background: #ece9e1; }
  :root[data-skin=cream] nav#nav a.on { box-shadow: none; }
  :root[data-skin=cream] nav#nav a.on::before { display: none; }
  :root[data-skin=cream] main#main { min-height: 100dvh; max-width: 1040px; width: 100%; margin: 0 auto; padding: 44px 40px 90px; }
  :root[data-skin=cream] .brand { display: none; }
}
@media (min-width: 900px) {
  :root[data-skin=cream] #app { grid-template-columns: 236px minmax(0, 1fr); }
  :root[data-skin=cream] nav#nav a { justify-content: flex-start; padding: 0 10px; font-size: .92rem; gap: 10px; }
  :root[data-skin=cream] nav#nav a.on { font-weight: 700; }
  :root[data-skin=cream] .brand { display: block; padding: 4px 10px 14px; font-size: 1.2rem; }
}

/* ═════ 숲속 (forest): 아래에 떠 있는 둥근 독 + 큰 둥근 카드 + 부드러운 초록 ═════ */
:root[data-skin=forest] {
  color-scheme: light;
  --desk: #e4f1e5; --paper: #fbfff9; --bg: #fbfff9; --surface: #ffffff; --surface-2: #eef7ec; --ink: #1d3a29; --muted: #62806c;
  --line: #d4e8d6; --line-strong: #a8cdae; --rule: transparent;
  --accent: #2f7a50; --accent-ink: #fff; --accent-soft: #d9efdc; --coral: #5a9a52; --hl: #d0eac6; --danger: #c0483c; --warn: #c98a2b; --pos: #2f7a50;
  --radius: 24px; --radius-sm: 14px; --shadow: 0 10px 30px -18px rgba(47, 122, 80, .55); --font-hand: var(--font);
  --navbg: rgba(255, 255, 255, .88); --navline: rgba(47, 122, 80, .18); --navfg: #4d6b58; --navon-fg: #fff; --navon-bg: #2f7a50; --navon-bar: transparent;
}
:root[data-skin=forest] body { background: linear-gradient(180deg, #d3ecd6, #eef8ec 420px); background-attachment: fixed; }
:root[data-skin=forest] #app { display: block; max-width: 1100px; padding: 24px 20px 112px; margin: 0 auto; }
:root[data-skin=forest] main#main { background: #fbfff9; border: 1px solid rgba(47, 122, 80, .16); border-radius: 30px; box-shadow: 0 24px 50px -32px rgba(47, 122, 80, .6); padding: 36px 36px 40px; min-height: 0; overflow: hidden; }
:root[data-skin=forest] main#main::before { height: 130px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='130' viewBox='0 0 1200 130' preserveAspectRatio='none'%3E%3Ccircle cx='1040' cy='34' r='20' fill='%23fff7c2' opacity='.9'/%3E%3Cpath d='M0 130V88C120 56 240 64 360 84S600 108 720 80S960 44 1080 70S1160 92 1200 84V130Z' fill='%23bfe3c4'/%3E%3Cpath d='M0 130V104C140 78 260 96 400 108S640 96 780 104S1040 82 1200 100V130Z' fill='%239fd3a8'/%3E%3Cg fill='%236fb783'%3E%3Cpath d='M150 104l14-30 14 30z'/%3E%3Cpath d='M176 104l12-24 12 24z'/%3E%3Cpath d='M860 104l14-32 14 32z'/%3E%3Cpath d='M888 104l10-20 10 20z'/%3E%3Cpath d='M1010 100l12-26 12 26z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / cover, linear-gradient(180deg, #d9f1dc, #fbfff9); }
:root[data-skin=forest] h1 { font-weight: 800; letter-spacing: -.02em; color: #1d5a3a; }
:root[data-skin=forest] h2 { font-weight: 800; }
:root[data-skin=forest] .card { border: 0; box-shadow: 0 10px 30px -18px rgba(47, 122, 80, .5); padding: 20px; }
:root[data-skin=forest] .card h2 { border-bottom: 0; padding-bottom: 0; }
:root[data-skin=forest] .btn { background: #eef7ec; border: 0; border-radius: 99px; box-shadow: none; padding: 8px 18px; font-weight: 600; }
:root[data-skin=forest] .btn:hover { background: #d9efdc; }
:root[data-skin=forest] .btn.primary { background: linear-gradient(135deg, #3b9265, #2f7a50); color: #fff; box-shadow: 0 8px 18px -8px #2f7a50; }
:root[data-skin=forest] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { border: 1.5px solid #cfe5d2; border-radius: 16px; background: #fff; }
:root[data-skin=forest] :is(.alchip, .chip, .pill) { border: 0; background: #eef7ec; }
:root[data-skin=forest] :is(.alchip.on, .chip.on) { background: #2f7a50; color: #fff; }
:root[data-skin=forest] dialog { border-radius: 28px; }
:root[data-skin=forest] .stage { border-radius: 22px; }
:root[data-skin=forest] nav#nav, :root[data-skin=forest] nav#nav a { }
:root[data-skin=forest] nav#nav {      /* 모든 폭에서 아래에 떠 있는 둥근 독 */
  position: fixed; left: 50%; right: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: auto; max-width: calc(100vw - 20px);
  flex-direction: row; gap: 4px; padding: 6px; border-radius: 99px; background: var(--navbg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--navline); box-shadow: 0 18px 40px -16px rgba(29, 90, 58, .6); overflow-x: auto; scrollbar-width: none; align-items: center;
}
:root[data-skin=forest] nav#nav a { flex: none; flex-direction: row; gap: 8px; height: 46px; width: auto; padding: 0 16px; border-radius: 99px; font-size: .9rem; }
:root[data-skin=forest] nav#nav a:not(.on) { padding: 0 14px; }
:root[data-skin=forest] nav#nav a.on { background: #2f7a50; color: #fff; }
:root[data-skin=forest] nav#nav a.on::before { display: none; }
:root[data-skin=forest] .brand { display: none; }
:root[data-skin=forest] { --juke-bottom: 78px; }
@media (max-width: 699px) {
  :root[data-skin=forest] #app { padding: 14px 12px 160px; }
  :root[data-skin=forest] main#main { padding: 26px 18px 30px; border-radius: 24px; }
  :root[data-skin=forest] nav#nav a:not(.on) { font-size: 0; gap: 0; padding: 0 12px; }
  :root[data-skin=forest] nav#nav a.on { font-size: .85rem; }
}

/* ═════ 밤하늘 (night): 디스코드풍 — 왼쪽 동그란 아이콘 레일 + 납작한 짙은 패널 ═════ */
:root[data-skin=night] {
  color-scheme: dark;
  --desk: #11132b; --paper: #1d2142; --bg: #1d2142; --surface: #262b52; --surface-2: #2e3463; --ink: #eceeff; --muted: #a3a9d6;
  --line: #333a6e; --line-strong: #4a5296; --rule: rgba(255, 255, 255, .04);
  --accent: #6d7cff; --accent-ink: #fff; --accent-soft: #333a78; --coral: #ff8fb8; --hl: #3a4285; --danger: #ff7a8a; --warn: #ffb454; --pos: #4be0a8;
  --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 0 rgba(0, 0, 0, .25); --font-hand: var(--font);
  --navbg: #11132b; --navline: #262b52; --navfg: #aab0e0; --navon-fg: #fff; --navon-bg: #6d7cff; --navon-bar: #fff;
}
:root[data-skin=night] body { background: #11132b; background-image: radial-gradient(#fff 1px, transparent 1.6px), radial-gradient(#ffe9a8 1px, transparent 1.5px); background-size: 52px 47px, 73px 61px; background-position: 0 0, 21px 15px; background-attachment: fixed; }
:root[data-skin=night] main#main { background: #1d2142; border: 0; border-radius: 0; box-shadow: none; }
:root[data-skin=night] h1 { font-size: 1.6rem; font-weight: 800; }
:root[data-skin=night] .card { border: 0; border-radius: 10px; background: #262b52; }
:root[data-skin=night] .card h2 { border-bottom: 0; padding-bottom: 0; font-size: 1.05rem; }
:root[data-skin=night] .btn { background: #333a78; border: 0; border-radius: 6px; box-shadow: none; color: #eceeff; font-weight: 600; }
:root[data-skin=night] .btn:hover { background: #3e4690; }
:root[data-skin=night] .btn.primary { background: #6d7cff; color: #fff; }
:root[data-skin=night] .btn.primary:hover { background: #5967e6; }
:root[data-skin=night] :is(input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea) { background: #161a38; border: 1px solid #333a6e; color: #eceeff; border-radius: 6px; }
:root[data-skin=night] :is(.alchip, .chip, .pill) { background: #2e3463; border: 0; }
:root[data-skin=night] :is(.alchip.on, .chip.on) { background: #6d7cff; color: #fff; }
:root[data-skin=night] dialog { background: #262b52; color: #eceeff; border: 0; border-radius: 12px; }
:root[data-skin=night] :is(.cal, .cal .d, .cal .wd) { background: #262b52; }
:root[data-skin=night] .brand { color: #fff; }
:root[data-skin=night] #jukebar { background: #161a38; border-top-color: #262b52; }
@media (min-width: 700px) {
  :root[data-skin=night] #app { grid-template-columns: 76px minmax(0, 1fr); column-gap: 0; max-width: none; padding: 0; }
  :root[data-skin=night] nav#nav { top: 0; height: 100dvh; background: #11132b; padding: 14px 0; gap: 10px; align-items: center; overflow-y: auto; scrollbar-width: none; }
  :root[data-skin=night] nav#nav a { flex-direction: row; justify-content: center; width: 52px; height: 52px; padding: 0; font-size: 0; gap: 0; border-radius: 26px; background: #262b52; color: #aab0e0; transition: border-radius .15s, background .15s; }
  :root[data-skin=night] nav#nav a:hover { border-radius: 16px; background: #3e4690; color: #fff; }
  :root[data-skin=night] nav#nav a.on { border-radius: 16px; background: #6d7cff; color: #fff; }
  :root[data-skin=night] nav#nav a.on::before { display: block; left: -12px; top: 10px; right: auto; width: 5px; height: 32px; border-radius: 0 4px 4px 0; background: #fff; clip-path: none; }
  :root[data-skin=night] main#main { min-height: 100dvh; padding: 28px 34px 40px; }
  :root[data-skin=night] .brand { display: none; }
}

/* ═════ 위쪽 메뉴바형 공통(리그·축구·드라큘라·핑크·하늘): 700px 이상에서 메뉴가 위로 올라간다 ═════ */
@media (min-width: 700px) {
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) #app { display: block; max-width: none; padding: 0 0 36px; }
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) nav#nav {
    position: sticky; top: 0; z-index: 30; flex-direction: row; align-items: center; gap: 2px; height: 58px;
    padding: 0 max(18px, calc((100vw - 1200px) / 2)); margin: 0 0 22px; background: var(--navbg); border-bottom: 1px solid var(--navline); overflow-x: auto; scrollbar-width: none;
  }
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) nav#nav::-webkit-scrollbar { display: none; }
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) .brand { display: block; flex: none; padding: 0 16px 0 0; margin: 0; white-space: nowrap; font-size: 1.3rem; line-height: 1; }
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) nav#nav a { flex: none; flex-direction: row; gap: 8px; height: 42px; width: auto; padding: 0 14px; font-size: .92rem; transition: background .15s, color .15s; }
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) nav#nav a .ic { font-size: 1.2rem; }
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) main#main { max-width: 1200px; width: calc(100% - 36px); margin: 0 auto; min-height: 0; }
  /* 선택된 메뉴: 아래쪽 줄 */
  :root:is([data-skin=league], [data-skin=dracula], [data-skin=pink]) nav#nav a.on { border-radius: 8px 8px 0 0; }
  :root:is([data-skin=league], [data-skin=dracula], [data-skin=pink]) nav#nav a.on::before { display: block; top: auto; bottom: 0; left: 8px; right: 8px; height: 3px; border-radius: 3px 3px 0 0; }
  :root[data-skin=league] nav#nav a { text-transform: uppercase; letter-spacing: .06em; border-radius: 0; }
  :root[data-skin=league] nav#nav a.on { box-shadow: 0 0 18px rgba(200, 170, 110, .3); }
  :root[data-skin=dracula] nav#nav a.on::before { background: linear-gradient(90deg, #8be9fd, #bd93f9); box-shadow: 0 0 10px #8be9fd; }
  :root[data-skin=dracula] nav#nav a { font-family: var(--font-hand); font-size: .85rem; border-radius: 4px; }
  :root[data-skin=pink] nav#nav a.on::before { background: linear-gradient(90deg, #f09433, #dc2743, #bc1888); }
  :root[data-skin=pink] nav#nav a.on { background: transparent; font-weight: 800; }
  :root[data-skin=soccer] nav#nav a { font-style: italic; font-weight: 800; text-transform: uppercase; border-radius: 4px; }
  :root[data-skin=soccer] nav#nav a.on::before { display: none; }
  :root[data-skin=sky] nav#nav a:hover { background: rgba(255, 255, 255, .15); }
  :root[data-skin=sky] nav#nav a.on::before { display: none; }
  :root[data-skin=soccer] nav#nav a:hover { background: rgba(255, 255, 255, .14); }
}
@media (min-width: 700px) and (max-width: 899px) {
  :root:is([data-skin=league], [data-skin=soccer], [data-skin=dracula], [data-skin=pink], [data-skin=sky]) nav#nav a { font-size: 0; gap: 0; padding: 0 13px; }
}

/* ═════ 모바일(<700px) 아래 메뉴: 스킨 색에 맞춘 모양 ═════ */
@media (max-width: 699px) {
  :root[data-skin=music] nav#nav a.on, :root[data-skin=night] nav#nav a.on { border-radius: 14px; }
  :root[data-skin=music] nav#nav a.on::before, :root[data-skin=night] nav#nav a.on::before, :root[data-skin=gameboy] nav#nav a.on::before { display: none; }
  :root[data-skin=league] nav#nav { border-top: 2px solid #785a28; }
  :root[data-skin=soccer] nav#nav { border-top: 3px solid #fff; }
  :root[data-skin=dracula] nav#nav a.on::before { background: linear-gradient(90deg, #8be9fd, #bd93f9); }
  :root[data-skin=pink] nav#nav, :root[data-skin=cream] nav#nav { box-shadow: none; }
  :root[data-skin=pink] nav#nav a.on { background: transparent; }
  :root[data-skin=sky] nav#nav a.on::before { background: #fff; }
}

/* 스킨 고르기 카드 */
.skingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; width: 100%; }
.skincard { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--surface); text-align: left; min-width: 0; }
.skincard i { display: block; height: 38px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .25); }
.skincard b { font-size: .85rem; }
.skincard small { color: var(--muted); font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.skincard.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.skingroup { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); margin: 6px 0 -2px; }

/* 주크박스 바: 왼쪽 사이드바가 있는 스킨에서는 사이드바를 피해서 놓는다 */
@media (min-width: 700px) {
  :root[data-skin=music] #jukebar { left: 100px; }
  :root[data-skin=cream] #jukebar { left: 64px; }
  :root[data-skin=night] #jukebar { left: 76px; }
}
@media (min-width: 900px) { :root[data-skin=cream] #jukebar { left: 236px; } }
@media (min-width: 1100px) { :root[data-skin=music] #jukebar { left: 256px; } }