/* mung2scape — 화면 스타일
 *
 * 색은 일곱 변수로만 칠한다(벽걸이 플레이리스트 player.css 와 같은 이름·같은 조합).
 *   --bg 바탕 / --card 칸 / --line 구분선 / --text 글자 / --muted 흐린 글자 / --accent 포인트 / --on-accent 포인트 위 글자
 * 색 조합은 [data-theme] 선택자로 둔다 — :root 만이 아니라 아무 요소에 붙여도 그 요소 안이 그 색이 된다.
 * 그래서 고르기 시트의 미니 화면은 data-theme 만 달면 저절로 제 색으로 그려진다(색 값을 JS 에 두 번 적지 않는다).
 *
 * 틀(skin)은 [data-skin] — bubble(말풍선) · console(관제) · minimal(미니멀) · netscape(레트로).
 * netscape 는 고유 색이 있어 색 조합을 덮어쓴다(파일 맨 아래 — 순서가 우선순위다).
 */

:root, [data-theme="pink"] { --bg: #140d12; --card: #21151c; --line: #3a2430; --text: #fbeef3; --muted: #a88c98; --accent: #ED93B1; --on-accent: #4B1528; }
[data-theme="lavender"]   { --bg: #100e18; --card: #1a1726; --line: #2c2740; --text: #f1effb; --muted: #948fb0; --accent: #AFA9EC; --on-accent: #26215C; }
[data-theme="teal"]       { --bg: #0a1316; --card: #121e22; --line: #223439; --text: #eaf6f8; --muted: #82999e; --accent: #4fd1d9; --on-accent: #04343a; }
[data-theme="peach"]      { --bg: #0d1020; --card: #171b30; --line: #2a3050; --text: #f1f2fb; --muted: #8d93b5; --accent: #F7B79A; --on-accent: #4A1B0C; }
[data-theme="red"]        { --bg: #121212; --card: #1c1c1c; --line: #303030; --text: #f5f2f2; --muted: #948c8c; --accent: #F07575; --on-accent: #501313; }
[data-theme="sky"]        { --bg: #0b1220; --card: #141d30; --line: #27334d; --text: #eef3fb; --muted: #8e9bb5; --accent: #7cc4ff; --on-accent: #0b2a4a; }
[data-theme="sage"]       { --bg: #0e1411; --card: #172019; --line: #2a3a2e; --text: #eef5ef; --muted: #8ea895; --accent: #9fd8a8; --on-accent: #0f3a1c; }
[data-theme="sunset"]     { --bg: #171210; --card: #231a16; --line: #3c2c25; --text: #fbf2ea; --muted: #b09a8c; --accent: #f5b26b; --on-accent: #4a2a08; }
[data-theme="violet"]     { --bg: #120f1c; --card: #1b1628; --line: #302744; --text: #f2eefb; --muted: #9d93b8; --accent: #c9a7ff; --on-accent: #2d1858; }
[data-theme="latte"]      { --bg: #f6f1ea; --card: #ffffff; --line: #e3dbd0; --text: #2b2622; --muted: #8a7f75; --accent: #c76b4a; --on-accent: #fff4ee; }
[data-theme="mono"]       { --bg: #111111; --card: #1a1a1a; --line: #2c2c2c; --text: #f2f2f2; --muted: #8c8c8c; --accent: #e6e6e6; --on-accent: #111111; }
[data-theme="wine"]       { --bg: #1a0f14; --card: #261821; --line: #3f2733; --text: #f7eef1; --muted: #b08f9a; --accent: #e8b4a0; --on-accent: #4a1f14; }
[data-theme="mustard"]    { --bg: #15150f; --card: #201f16; --line: #38362a; --text: #f4f2e8; --muted: #a39f88; --accent: #d9c25a; --on-accent: #3a3208; }
[data-theme="ice"]        { --bg: #eef3f7; --card: #ffffff; --line: #d6e0ea; --text: #1e2a36; --muted: #6b7c8c; --accent: #2f7fd6; --on-accent: #ffffff; }
[data-theme="grapefruit"] { --bg: #141416; --card: #1e1e22; --line: #333339; --text: #f5f3f0; --muted: #938f8a; --accent: #ff8a65; --on-accent: #4a1d0e; }
[data-theme="choco"]      { --bg: #17110d; --card: #221a14; --line: #3a2d24; --text: #f7efe6; --muted: #a8978a; --accent: #e9d6b8; --on-accent: #3a2512; }
[data-theme="raspberry"]  { --bg: #121418; --card: #1b1e25; --line: #2f3440; --text: #f3f2f5; --muted: #8f93a0; --accent: #ff6f9c; --on-accent: #4a0f26; }
[data-theme="lime"]       { --bg: #0f120d; --card: #171b14; --line: #2a3124; --text: #f1f5ea; --muted: #97a08b; --accent: #c6f06a; --on-accent: #243a06; }
/* 보석 — 보석함 틀과 짝 (2026-10-14 주인님 요청 「쥬얼리 느낌」) */
[data-theme="onyx"]       { --bg: #0b0a0c; --card: #151317; --line: #2e2a26; --text: #f4efe6; --muted: #a39a8c; --accent: #d8b46a; --on-accent: #2a1e05; }
[data-theme="emerald"]    { --bg: #06120e; --card: #0d1d17; --line: #1e3a2e; --text: #eaf5ef; --muted: #8fb0a0; --accent: #3fbf8a; --on-accent: #032417; }
[data-theme="sapphire"]   { --bg: #070b1a; --card: #0e1530; --line: #222c55; --text: #eef1fb; --muted: #8f98c0; --accent: #7b96ff; --on-accent: #0a1440; }
[data-theme="ruby"]       { --bg: #14070b; --card: #210d14; --line: #3d1a25; --text: #fbeef1; --muted: #b48c97; --accent: #e8506b; --on-accent: #fff0f3; }
[data-theme="amethyst"]   { --bg: #100a17; --card: #1b1226; --line: #33244a; --text: #f3eefb; --muted: #a495bf; --accent: #b48cff; --on-accent: #200e45; }
[data-theme="pearl"]      { --bg: #f7f3ee; --card: #fffdfa; --line: #e6ddd2; --text: #2d2620; --muted: #8c8076; --accent: #b98a6e; --on-accent: #fffaf5; }

:root {
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "D2Coding", "Cascadia Mono", Consolas, monospace;
  --r: 14px;              /* 칸 모서리 */
  --bubble-r: 18px;       /* 말풍선 모서리 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;   /* 스크롤은 각 칸이 맡는다 — 몸통이 같이 밀리면 입력창이 화면 밖으로 나간다 */
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }
h2 { font-size: 20px; margin: 4px 0 14px; }
h2 small, .s-title small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
h3 { font-size: 14px; color: var(--muted); font-weight: 600; margin: 22px 0 8px; }

.ico-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  color: var(--muted);
}
.ico-btn:hover { background: var(--card); color: var(--text); }
.btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn-main, .btn.main { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 700; }
.btn.danger { color: #f0a0a0; }
input, textarea {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 16px;   /* 16px 밑이면 아이폰이 입력할 때 화면을 확대한다 */
  outline: none; width: 100%;
}
input:focus, textarea:focus { border-color: var(--accent); }
::placeholder { color: var(--muted); }

/* ───── 로그인 ───── */
.login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + var(--safe-b)); overflow-y: auto; }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.login-logo { width: 72px; height: 72px; border-radius: 22px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.login-logo svg { width: 44px; height: 44px; }
.login h1 { text-align: center; margin: 8px 0 0; font-size: 26px; letter-spacing: -.5px; }
.login-tag { text-align: center; margin: 0 0 12px; color: var(--muted); font-family: var(--mono); font-size: 13px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login-keep { flex-direction: row !important; align-items: center; gap: 8px !important; }
.login-keep input { width: auto; }
.login-keep small { color: var(--muted); opacity: .8; }
.login-err { color: #f0a0a0; margin: 0; font-size: 14px; }
.login .btn-main { margin-top: 8px; padding: 13px; font-size: 16px; }

/* ───── 본 화면 배치 ─────
 * 폭으로만 가른다(기기 이름이 아니다). 사이 폭에서는 늘었다 줄었다 한다.
 *   ~767   폰: 위 탭줄 / 본문 / 아래 메뉴줄. 보드는 오른쪽 서랍
 *   768~   태블릿·폴드 펼침: 왼쪽 아이콘 메뉴 / 본문. 보드는 서랍
 *   1200~  PC: 왼쪽 글자 메뉴 / 본문 / 오른쪽 보드 고정
 */
.app {
  height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "nst" "top" "loc" "main" "nav" "nss";
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
}
.ns-title { grid-area: nst; display: none; }
.ns-loc { grid-area: loc; display: none; }
.ns-status { grid-area: nss; display: none; }
.top { grid-area: top; }
.nav { grid-area: nav; }
.main { grid-area: main; min-height: 0; position: relative; }

.top { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; margin-right: 6px; flex: none; }
.brand b { font-size: 16px; letter-spacing: -.3px; }
.throbber { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.app.busy .throbber svg { animation: wag .5s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

.tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: center; gap: 6px; max-width: 200px;
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: 5px 12px; font-size: 13px; color: var(--muted);
}
.tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { background: var(--card); color: var(--text); border-color: var(--accent); }
.tab .badge { flex: none; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.tab .badge.need { background: #f0b45a; color: #3a2500; }
.tab .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .3; } to { opacity: 1; } }

.board-btn em, .nav em {
  position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-style: normal; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.board-btn em:empty, .board-btn em[data-n="0"] { display: none; }

.nav { display: flex; border-top: 1px solid var(--line); padding: 4px 4px calc(4px + var(--safe-b)); background: var(--bg); }
.nav button {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0;
  font-size: 11px; color: var(--muted); border-radius: 12px;
}
.nav button.on { color: var(--accent); }
.nav button svg { width: 22px; height: 22px; }
.nav em { top: 2px; right: calc(50% - 22px); }

.view { display: none; height: 100%; }
.view.on { display: flex; flex-direction: column; }
.pane { flex: 1; overflow-y: auto; padding: 16px 16px 32px; max-width: 860px; width: 100%; margin: 0 auto; }

/* ───── 채팅 ───── */
.sess-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted); min-height: 44px;
}
.sess-bar .title { font-size: 14px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.gauge { flex: none; display: flex; align-items: center; gap: 6px; }
.gauge i { width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.gauge i b { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.gauge.warn i b { background: #f0b45a; }
.gauge span { font-variant-numeric: tabular-nums; }
.sess-bar .btn { padding: 4px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.sess-bar .btn svg { width: 14px; height: 14px; }

.msgs { flex: 1; overflow-y: auto; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 12px; }
.msgs > * { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }
.empty { margin: auto; text-align: center; color: var(--muted); }
.empty .throbber { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 12px; }
.empty .throbber svg { width: 34px; height: 34px; }

.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg .av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.msg .av svg { width: 22px; height: 22px; }
.msg .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.msg .who, .msg time { display: none; }
.msg .head { display: contents; }   /* 이름·시각 묶음 — 관제 틀만 한 줄로 세운다 */
.msg .line { display: contents; }   /* 말풍선+시각 묶음 — 말풍선 틀만 나란히 세운다 */
.msg.me { justify-content: flex-end; }
.msg.me .av { display: none; }
.msg.me .body { align-items: flex-end; }
.bubble { padding: 9px 14px; border-radius: var(--bubble-r); background: var(--card); border: 1px solid var(--line); overflow-wrap: anywhere; max-width: min(620px, 86vw); }
.msg.me .bubble { background: var(--accent); color: var(--on-accent); border-color: transparent; border-bottom-right-radius: 6px; }
.msg.bot .bubble { border-bottom-left-radius: 6px; }
.msg.sys { justify-content: center; }
.msg.sys .bubble { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; padding: 4px 12px; }
.caret::after { content: '▍'; animation: pulse .6s ease-in-out infinite alternate; margin-left: 1px; color: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chip svg { width: 14px; height: 14px; }
.chip.run::after { content: '…'; }
.fcard {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); min-width: 240px; max-width: 100%;
}
.fcard .fi { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.fcard .fn { min-width: 0; flex: 1; }
.fcard .fn b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .fn span { font-size: 12px; color: var(--muted); }
.fcard .dl { color: var(--accent); }

.composer { border-top: 1px solid var(--line); padding: 8px 10px 10px; }
.composer-row { display: flex; align-items: flex-end; gap: 6px; max-width: 760px; margin: 0 auto; }
.composer textarea { resize: none; max-height: 40vh; border-radius: 20px; padding: 9px 14px; line-height: 1.45; }
.send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.send.stop svg { width: 16px; height: 16px; }
.attached { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin: 0 auto; }
.attached:not(:empty) { padding-bottom: 8px; }
.attached span { font-size: 12px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 2px; }
.attached button { all: unset; cursor: pointer; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.attached button svg { width: 12px; height: 12px; }

/* ───── 마크다운 ───── */
.md p { margin: 0 0 .6em; }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { margin: .8em 0 .4em; line-height: 1.3; color: var(--text); }
.md h1 { font-size: 22px; } .md h2 { font-size: 18px; } .md h3 { font-size: 15px; }
.md ul, .md ol { margin: 0 0 .6em; padding-left: 1.3em; }
.md code { font-family: var(--mono); font-size: .9em; background: color-mix(in srgb, var(--text) 10%, transparent); padding: 1px 5px; border-radius: 5px; }
.md pre { background: color-mix(in srgb, var(--bg) 70%, #000); border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; overflow-x: auto; margin: 0 0 .6em; }
.md pre code { background: none; padding: 0; font-size: 13px; }
.md table { border-collapse: collapse; margin: 0 0 .6em; font-size: 14px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.md th { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.md a { color: var(--accent); }
.md blockquote { margin: 0 0 .6em; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.msg.me .md code { background: color-mix(in srgb, var(--on-accent) 15%, transparent); }

/* ───── Raw ───── */
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 26px 16px; border: 2px dashed var(--line); border-radius: var(--r); cursor: pointer; color: var(--muted);
}
.drop svg { width: 32px; height: 32px; color: var(--accent); }
.drop b { color: var(--text); }
.drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.paste { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.paste-row { display: flex; gap: 8px; }
.paste-row input { font-size: 14px; }

.proposal { margin-top: 18px; border: 1px solid var(--accent); border-radius: var(--r); padding: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.proposal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.proposal-head .av { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.prop-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.prop-item input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.prop-item b { display: block; font-size: 14px; }
.prop-item ul { margin: 4px 0 0; padding-left: 1.1em; font-size: 13px; color: var(--muted); }
.prop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.raw-list, .arch-list { list-style: none; margin: 0; padding: 0; }
.raw-list li, .arch-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.raw-list .fn, .arch-list .fn { flex: 1; min-width: 0; }
.raw-list .fi, .arch-list .fi { width: 34px; height: 34px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.raw-list .fn b, .arch-list .fn b { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raw-list .fn span, .arch-list .fn span { font-size: 12px; color: var(--muted); }
.st { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.st.wait { color: var(--text); }
.st.prop { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.st.done { color: #8fd19e; border-color: #2f5a3a; }
.st.hold { color: #f0b45a; border-color: #5a4320; }

/* ───── 위키 ───── */
.wiki-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1100px; }
.wiki-side { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wiki-side button { flex: none; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--muted); }
.wiki-side button.on { color: var(--text); border-color: var(--accent); background: var(--card); }
.wiki-body { min-width: 0; }
.wiki-body .wl { color: var(--accent); text-decoration: underline dotted; cursor: pointer; }

/* ───── 일정 ───── */
.sched { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; align-content: start; }
.cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-head b { font-size: 18px; margin-right: auto; }
.cal-head .ico-btn { width: 34px; height: 34px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-grid .wd { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-grid .wd:first-child, .cal-grid .sun { color: #f08a8a; }
.cal-grid .sat { color: #8ab4f0; }
.cal-grid button {
  all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1 / .9; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; gap: 3px; font-size: 14px;
}
.cal-grid button:hover { background: var(--card); }
.cal-grid button.out { opacity: .3; }
.cal-grid button.today span:first-child { background: var(--accent); color: var(--on-accent); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.cal-grid button.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-grid .dots { display: flex; gap: 3px; height: 6px; }
.cal-grid .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cal-grid .dots i.c { background: transparent; border: 1.5px solid #f0b45a; width: 4px; height: 4px; }
.ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ev .tm { flex: none; width: 52px; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; font-size: 14px; }
.ev .fn { flex: 1; min-width: 0; }
.ev .fn span { display: block; font-size: 12px; color: var(--muted); }
.ev .ico-btn { width: 30px; height: 30px; }
.cand { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.cand .when { font-size: 13px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.cand b { display: block; font-size: 15px; margin: 2px 0 6px; }
.cand .src { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cand q { display: block; font-size: 13px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; margin: 8px 0 0; quotes: none; }
.cand .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cand form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cand form input[name="title"] { grid-column: 1 / -1; }
@media (min-width: 1000px) { .sched { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .sched .cand-col { grid-row: 1 / span 2; grid-column: 2; } }

/* ───── 「내 것 | 함께」 고르기 — 연결이 없으면 숨는다 ───── */
.space-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.space-pick:empty { display: none; }
.space-pick button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 14px; font-size: 13px; color: var(--muted); }
.space-pick button.on { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wiki-pick { grid-column: 1 / -1; margin-bottom: 0; }
.login-step { margin: 0 0 4px; font-size: 14px; color: var(--text); text-align: center; }
.login-help { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6; }
.login-help code { font-family: var(--mono); color: var(--text); word-break: break-all; }
.qr-big { background: #fff; border-radius: 14px; padding: 10px; width: 220px; height: 220px; margin: 4px auto; }
.qr-big svg, .qr .box svg { width: 100%; height: 100%; }
.qr .box:has(svg) { display: block; padding: 6px; }
.acct { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.acct .fn { flex: 1; min-width: 0; }
.acct .fn span { display: block; font-size: 12px; color: var(--muted); }
.invite-url { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* ───── 건의함 ───── */
.sug-form { display: flex; flex-direction: column; gap: 10px; }
.sug-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.sug-kinds button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--muted); }
.sug-kinds button.on { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sug-ctx { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sug-ctx input { width: auto; }
.sug-form .btn.main { align-self: flex-end; }
.sug-list { list-style: none; margin: 0; padding: 0; }
.sug-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sug-list li p { margin: 0 0 4px; font-size: 14px; white-space: pre-wrap; }
.sug-list .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }

/* ───── 설정 ───── */
.set-sec { margin-bottom: 26px; }
.dev { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dev .fi { width: 36px; height: 36px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.dev .fn { flex: 1; min-width: 0; }
.dev .fn b { display: block; font-size: 14px; }
.dev .fn span { font-size: 12px; color: var(--muted); }
.set-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qr { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.qr .box { width: 132px; height: 132px; background: #fff; border-radius: 8px; display: grid; grid-template-columns: repeat(11, 1fr); padding: 8px; gap: 1px; }
.qr .box i { background: #111; }
.qr .box i.o { background: transparent; }
.qr form { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }

/* ───── 미해결 보드 ───── */
.board {
  position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--bg); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) 0;
}
.board.open { transform: none; box-shadow: -10px 0 30px rgba(0, 0, 0, .35); }
.board-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px 16px; border-bottom: 1px solid var(--line); }
#board-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.bitem { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; color: var(--text); }
.bitem:hover { border-color: var(--accent); }
.bitem b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.bitem .meta { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.bitem .st.need { background: #f0b45a; color: #3a2500; border-color: transparent; }
.bitem .st.run { color: var(--accent); border-color: var(--accent); }
.board-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 0; }

.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .45); }

/* ───── 틀·색 시트 ───── */
.sheet {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow-y: auto;
  background: var(--card); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line);
  padding: 8px 14px calc(18px + var(--safe-b)); transform: translateY(100%); transition: transform .24s ease;
  max-width: 760px; margin: 0 auto;
}
.sheet.open { transform: none; }
.s-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 10px; }
.s-title { padding: 6px 4px 8px; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.t-card { all: unset; box-sizing: border-box; cursor: pointer; border: 2px solid transparent; border-radius: 14px; padding: 4px; }
.t-card.cur { border-color: var(--accent); }
.t-card:disabled { opacity: .35; cursor: default; }
.t-mini { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; height: 78px; overflow: hidden; }
.t-mini i { display: block; height: 12px; border-radius: 6px; }
.t-mini .a { width: 62%; background: var(--card); border: 1px solid var(--line); }
.t-mini .b { width: 46%; align-self: flex-end; background: var(--accent); }
.t-mini .c { width: 74%; background: var(--card); border: 1px solid var(--line); }
.t-name { display: block; padding: 6px 4px 0; font-size: 13px; font-weight: 600; text-align: center; color: var(--text); }
.skin-grid .t-mini { height: 92px; }
/* 틀 미니 화면 — 지금 색 조합으로 각 틀의 생김새만 흉내 낸다 */
.sk-console i { border-radius: 0; height: 9px; background: transparent !important; border: 0 !important; border-left: 2px solid var(--line) !important; }
.sk-console i.b { border-left-color: var(--accent) !important; align-self: flex-start; }
.sk-console::before { content: '> mung2scape'; font: 10px var(--mono); color: var(--accent); }
.sk-minimal i.a, .sk-minimal i.c { background: var(--muted); opacity: .45; border: 0; height: 7px; }
.sk-minimal i.b { background: var(--card); border: 1px solid var(--line); }
.sk-bubble i.a { border-bottom-left-radius: 2px; } .sk-bubble i.b { border-bottom-right-radius: 2px; }
.sk-jewel {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important;
  background:
    radial-gradient(1.5px 1.5px at 18% 30%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 78% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 60% 80%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 30% 85%, var(--accent) 50%, transparent 51%),
    radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--accent) 25%, var(--bg)), var(--bg) 65%) !important;
}
.sk-jewel::before { content: 'PREMIUM ✦'; font: 600 10px Georgia, serif; letter-spacing: .2em; background: linear-gradient(180deg, #fff3cf, var(--accent) 50%, #6b4b12 52%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-jewel i.a, .sk-jewel i.c { background: color-mix(in srgb, #fff 8%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.sk-jewel i.b { background: var(--accent) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); }
.sk-holo {
  border-color: rgba(255,255,255,.3) !important;
  background:
    radial-gradient(1.4px 1.4px at 20% 25%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 80% 70%, #fff 50%, transparent 51%),
    linear-gradient(118deg, transparent 30%, rgba(255,60,170,.5) 42%, rgba(255,240,90,.35) 50%, rgba(80,190,255,.5) 58%, transparent 70%),
    radial-gradient(80% 60% at 0% 20%, rgba(255,60,190,.5), transparent 60%), #170a33 !important;
}
.sk-holo::before { content: 'BRIGHT ✦'; font: 800 10px sans-serif; background: linear-gradient(90deg, #ff7ac8, #ffc58a, #9ad8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-holo i.a, .sk-holo i.c { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.35) !important; }
.sk-holo i.b { background: #f6dcf3 !important; box-shadow: 0 0 8px rgba(255,180,240,.7); }
.sk-neon {
  border-color: #ff2bd6 !important; box-shadow: 0 0 10px rgba(255,43,214,.5);
  background: linear-gradient(112deg, transparent 49.5%, rgba(255,43,214,.9) 50%, transparent 50.5%), linear-gradient(64deg, transparent 49.5%, rgba(57,255,136,.8) 50%, transparent 50.5%), #050507 !important;
}
.sk-neon::before { content: 'CHROME'; font: italic 900 10px sans-serif; background: linear-gradient(180deg, #fff, #c8d0de 38%, #4a5266 50%, #e3e9f4 62%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-neon i { border-radius: 2px !important; }
.sk-neon i.a, .sk-neon i.c { background: #0d0d12 !important; border-color: #39ff88 !important; box-shadow: 0 0 5px #39ff88; }
.sk-neon i.b { background: #dfe5f0 !important; }
.sk-netscape { background: #c0c0c0 !important; border: 2px outset #fff !important; border-radius: 0 !important; padding: 0 !important; gap: 4px !important; }
.sk-netscape::before { content: 'Mung2scape'; display: block; background: #000080; color: #fff; font: bold 10px Tahoma, sans-serif; padding: 2px 4px; }
.sk-netscape i { margin: 0 6px; border-radius: 0 !important; height: 8px !important; background: #fff !important; border: 1px solid #808080 !important; }
.sk-netscape i.b { background: #0000ee !important; height: 6px !important; }

.toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-size: 14px; max-width: 90vw;
}

/* ───── 폭 768~ : 왼쪽 아이콘 메뉴 ───── */
@media (min-width: 768px) {
  .app {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "nst nst" "top top" "loc loc" "nav main" "nss nss";
  }
  .nav { flex-direction: column; justify-content: flex-start; gap: 4px; border-top: 0; border-right: 1px solid var(--line); padding: 10px 6px calc(10px + var(--safe-b)); }
  .nav button { flex: none; padding: 10px 0; }
  .nav button.on { background: var(--card); }
  .wiki-pane { grid-template-columns: 200px minmax(0, 1fr); }
  .wiki-side { flex-direction: column; overflow: visible; }
  .wiki-side button { text-align: left; border-radius: 10px; }
  .toast { bottom: 28px; }
}

/* ───── 폭 1200~ : 글자 메뉴 + 보드 고정 ───── */
@media (min-width: 1200px) {
  .app {
    grid-template-columns: 196px minmax(0, 1fr) 320px;
    grid-template-areas: "nst nst nst" "top top top" "loc loc loc" "nav main board" "nss nss nss";
  }
  .nav button { flex-direction: row; gap: 10px; padding: 10px 14px; font-size: 14px; justify-content: flex-start; }
  .nav em { position: static; margin-left: auto; }
  .board { grid-area: board; position: static; transform: none; width: auto; border-left: 1px solid var(--line); padding: 0; box-shadow: none; z-index: auto; }
  .board-close, .board-btn { display: none; }
}

/* 폰 폭 — 탭과 세션 제목에 자리를 내주려고 글자를 접고 아이콘만 남긴다 */
@media (max-width: 767px) {
  .brand b { display: none; }
  .sess-bar .btn span { display: none; }
  .sess-bar .btn { padding: 5px 8px; }
  .gauge i { width: 40px; }
}

/* 가로로 눕힌 폰 — 높이가 낮으면 아래 메뉴줄을 줄인다 */
@media (max-width: 767px) and (max-height: 480px) {
  .nav button span { display: none; }
  .nav button { padding: 4px 0; }
}

/* ═════════ 틀(skin) ═════════ */

/* 틀마다 「무엇이 다른가」를 한 줄로 고정해 둔다 — 비슷해 보이면 틀이 아니다(2026-10-14 주인님 지적)
 *   말풍선   메신저. 아바타·이름·꼬리 달린 말풍선·시각이 말풍선 옆에
 *   관제     터미널. 전부 고정폭 글꼴, 말풍선 없이 [시각] 이름 $ 로그 한 줄씩, 각진 모서리
 *   미니멀   문서. 테두리·아바타·말풍선이 없고 가운데 좁은 단, 멍이 글은 크고 명조
 *   보석함   주얼리 상자. 명조 제목, 금빛 실선, 광택 띠, 다면체 아바타
 *   넷스케이프 90년대 브라우저 창 */

/* ⓐ 말풍선 — 메신저 */
[data-skin="bubble"] .msg.bot .who { display: block; font-size: 12px; color: var(--muted); margin-bottom: -2px; }
[data-skin="bubble"] .msg .line { display: flex; align-items: flex-end; gap: 6px; }
[data-skin="bubble"] .msg.me .line { flex-direction: row-reverse; }
[data-skin="bubble"] .msg .line time { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
[data-skin="bubble"] .bubble { position: relative; }
[data-skin="bubble"] .msg.bot .bubble::before, [data-skin="bubble"] .msg.me .bubble::before {
  content: ''; position: absolute; bottom: -1px; width: 12px; height: 12px; background: inherit; border: inherit;
}
[data-skin="bubble"] .msg.bot .bubble::before { left: -6px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
[data-skin="bubble"] .msg.me .bubble::before { right: -6px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* ⓑ 관제 — 터미널 */
[data-skin="console"] { --r: 4px; --bubble-r: 0; --font: var(--mono); }
[data-skin="console"] body { font-size: 14px; }
[data-skin="console"] .tab, [data-skin="console"] .btn, [data-skin="console"] .wiki-side button { border-radius: 3px; }
[data-skin="console"] .tab::before { content: '#'; color: var(--accent); }
[data-skin="console"] .tab.on { background: var(--accent); color: var(--on-accent); }
[data-skin="console"] .tab.on::before { color: inherit; }
[data-skin="console"] .throbber, [data-skin="console"] .ico-btn, [data-skin="console"] .send, [data-skin="console"] .fcard, [data-skin="console"] .bitem { border-radius: 3px; }
[data-skin="console"] .msgs { gap: 2px; padding-top: 10px; background: color-mix(in srgb, var(--bg) 60%, #000); }
[data-skin="console"] .msg .av { display: none; }
[data-skin="console"] .msg, [data-skin="console"] .msg.me { justify-content: flex-start; padding: 6px 4px; border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); }
[data-skin="console"] .msg .body, [data-skin="console"] .msg.me .body { align-items: stretch; width: 100%; gap: 2px; }
[data-skin="console"] .msg .head time { display: inline; font-size: 12px; color: var(--muted); }
[data-skin="console"] .msg .head time::before { content: '['; } [data-skin="console"] .msg .head time::after { content: ']'; }
[data-skin="console"] .msg .who { display: inline; font-size: 12px; color: var(--muted); }
[data-skin="console"] .msg.me .who::after { content: ' $'; color: var(--accent); }
[data-skin="console"] .msg.bot .who { color: var(--accent); }
[data-skin="console"] .msg.bot .who::after { content: ' >'; }
[data-skin="console"] .msg .head { display: flex; gap: 8px; align-items: baseline; }
[data-skin="console"] .bubble, [data-skin="console"] .msg.me .bubble { background: transparent; color: var(--text); border: 0; border-radius: 0; padding: 0 0 0 2ch; max-width: none; }
[data-skin="console"] .chip { background: transparent; padding: 0 0 0 2ch; border-radius: 0; }
[data-skin="console"] .chip::before { content: '⟳'; }
[data-skin="console"] .chip svg { display: none; }
[data-skin="console"] .caret::after { content: '█'; }
[data-skin="console"] .composer-row::before { content: '❯'; color: var(--accent); font-weight: 700; align-self: center; padding: 0 2px 0 4px; }
[data-skin="console"] .composer textarea { border-radius: 3px; background: transparent; }
[data-skin="console"] .sess-bar { background: var(--accent); color: var(--on-accent); min-height: 30px; padding: 2px 10px; }
[data-skin="console"] .sess-bar .title { color: var(--on-accent); font-size: 12px; }
[data-skin="console"] .sess-bar .btn { background: transparent; color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 40%, transparent); }
[data-skin="console"] .gauge i { background: color-mix(in srgb, var(--on-accent) 25%, transparent); }
[data-skin="console"] .gauge i b { background: var(--on-accent); }
[data-skin="console"] .md table, [data-skin="console"] .md th, [data-skin="console"] .md td { border-style: dashed; }
[data-skin="console"] .md th { background: transparent; color: var(--accent); }

/* ⓒ 미니멀 — 문서 */
[data-skin="minimal"] { --r: 10px; }
[data-skin="minimal"] .top, [data-skin="minimal"] .sess-bar, [data-skin="minimal"] .composer, [data-skin="minimal"] .nav { border-color: transparent; }
[data-skin="minimal"] .throbber { background: transparent; color: var(--text); }
[data-skin="minimal"] .tab { border-color: transparent; }
[data-skin="minimal"] .tab.on { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent); }
[data-skin="minimal"] .msgs { gap: 28px; padding-top: 28px; }
[data-skin="minimal"] .msgs > * { max-width: 640px; }
[data-skin="minimal"] .msg .av, [data-skin="minimal"] .msg time { display: none; }
[data-skin="minimal"] .msg.bot .bubble { background: transparent; border: 0; padding: 0; max-width: none; font-family: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", Georgia, serif; font-size: 17px; line-height: 1.85; }
[data-skin="minimal"] .msg.me .bubble { background: transparent; color: var(--muted); border: 0; border-right: 2px solid var(--accent); border-radius: 0; padding: 0 12px 0 0; text-align: right; }
[data-skin="minimal"] .chip { background: transparent; padding: 0; }
[data-skin="minimal"] .fcard { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding-left: 0; }
[data-skin="minimal"] .composer textarea { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
[data-skin="minimal"] .send { background: transparent; color: var(--accent); }

/* ═════ 블링 틀 3종 (2026-10-14 재설계 — 주인님 참고 그림 2장 + 콘셉트 3안) ═════
 *   jewel 샴페인 글램    — 참고 그림 오른쪽(PREMIUM BRILLIANCE) + 「미드나잇 샴페인」. 금빛은 색 조합의 accent 를 따른다
 *   holo  홀로그램 드림  — 참고 그림 왼쪽(BRIGHT & BOLD) + 「파스텔 글리터」. 고유 색
 *   neon  네온 크롬      — 「사이버펑크 네온 크롬」. 고유 색
 * 첫 판(금테 상자·팔각형·◆)은 「공대 1학년 ppt」로 기각됐다. 블링은 테두리가 아니라 빛·광택·떠다니는 오브제다.
 * 셋이 공유하는 장치: 반짝이 두 겹(body::before/after) · 떠다니는 오브제(.deco) · 유리 카드 · 빛줄기(sweep) */

/* ── 공통: 반짝이 · 오브제 · 빛줄기 ── */
[data-skin="jewel"] body::before, [data-skin="jewel"] body::after,
[data-skin="holo"] body::before, [data-skin="holo"] body::after,
[data-skin="neon"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-repeat: no-repeat;
}
[data-skin="jewel"] .app, [data-skin="jewel"] .login,
[data-skin="holo"] .app, [data-skin="holo"] .login,
[data-skin="neon"] .app, [data-skin="neon"] .login { position: relative; z-index: 1; }
[data-skin="jewel"] .nav, [data-skin="holo"] .nav, [data-skin="neon"] .nav { background: transparent; }
@keyframes twinkle { from { opacity: .15; } to { opacity: .9; } }
@keyframes sweep { 0%, 62% { transform: translateX(-130%); } 84%, 100% { transform: translateX(130%); } }
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes floaty { from { transform: translateY(0) rotate(var(--rot, 0deg)); } to { transform: translateY(-14px) rotate(calc(var(--rot, 0deg) + 8deg)); } }
@keyframes flow { from { background-position: 0 0; } to { background-position: 300% 0; } }

.deco { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
[data-skin="jewel"] .deco, [data-skin="holo"] .deco, [data-skin="neon"] .deco { display: block; }
.deco > * { position: absolute; animation: floaty 6s ease-in-out infinite alternate; filter: drop-shadow(0 6px 14px var(--deco-glow, rgba(0,0,0,.4))); }
.deco .gem { width: 64px; height: 52px; }
.deco .pearl { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 12%, #f3eefa 25%, #d8cfe6 55%, #a99cbc 100%); }
.deco .star { font-size: 26px; line-height: 1; color: #fff; text-shadow: 0 0 10px #fff, 0 0 22px var(--deco-glow); animation: glint 5s ease-in-out infinite; }
.deco .bfly { width: 54px; height: 44px; display: none; }
/* 자리 — 화면 가장자리에만 둔다. 가운데는 글이 있다 */
.deco .g1 { top: 19%; right: 3%; --rot: 12deg; }   /* 9% 로 두면 머리줄 단추와 겹친다 */
.deco .g2 { top: 46%; left: -14px; width: 48px; height: 40px; --rot: -18deg; animation-duration: 7.5s; }
.deco .g3 { bottom: 13%; right: -10px; width: 40px; height: 32px; --rot: 25deg; animation-duration: 5.2s; }
.deco .p1 { top: 22%; left: 6%; animation-duration: 8s; }
.deco .p2 { bottom: 26%; left: 12%; width: 14px; height: 14px; animation-duration: 6.4s; }
.deco .s1 { top: 6%; left: 38%; }
.deco .s2 { top: 62%; right: 9%; font-size: 18px; animation-delay: 2.2s; }
.deco .b1 { top: 30%; right: 3%; --rot: -10deg; animation-duration: 5.6s; }
.deco .b2 { bottom: 9%; left: 3%; width: 40px; height: 32px; --rot: 14deg; animation-duration: 7s; }
@media (min-width: 1200px) { .deco .gem { width: 92px; height: 74px; } .deco .g2 { left: 2%; } }

/* 빛줄기 — 호일·네온 버튼 위로 몇 초마다 스친다.
 * ★ 말풍선에는 그라데이션·빛줄기를 쓰지 않는다 — 단색만 (2026-10-14 주인님 「대화창 그라데이션은 촌스럽다」) */
[data-skin="jewel"] .btn-main, [data-skin="jewel"] .btn.main, [data-skin="jewel"] .send,
[data-skin="holo"] .btn-main, [data-skin="holo"] .btn.main, [data-skin="holo"] .send { position: relative; overflow: hidden; }
[data-skin="jewel"] .btn-main::after, [data-skin="jewel"] .btn.main::after, [data-skin="jewel"] .send::after,
[data-skin="holo"] .btn-main::after, [data-skin="holo"] .btn.main::after, [data-skin="holo"] .send::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform: translateX(-130%); animation: sweep 5s ease-in-out infinite;
}
[data-skin="jewel"] .send::after, [data-skin="holo"] .send::after { animation-delay: 1.6s; }
[data-skin="jewel"] .msg .who, [data-skin="holo"] .msg .who, [data-skin="neon"] .msg .who { display: block; font-size: 12px; letter-spacing: .1em; }
[data-skin="jewel"] .msg.me .who, [data-skin="holo"] .msg.me .who, [data-skin="neon"] .msg.me .who,
[data-skin="jewel"] .msg time, [data-skin="holo"] .msg time, [data-skin="neon"] .msg time { display: none; }

/* ════════ 샴페인 글램 ════════ */
[data-skin="jewel"] {
  --r: 16px; --bubble-r: 18px;
  --serif: "Cinzel", "Cormorant Garamond", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", Georgia, serif;
  --g-hi: color-mix(in srgb, var(--accent) 35%, #fff8e6);
  --g-lo: color-mix(in srgb, var(--accent) 55%, #000);
  --gold: linear-gradient(180deg, var(--g-hi) 0%, var(--accent) 48%, var(--g-lo) 52%, var(--accent) 75%, var(--g-hi) 100%);
  --gold-x: linear-gradient(120deg, var(--g-lo), var(--accent) 22%, var(--g-hi) 40%, var(--accent) 55%, var(--g-lo) 72%, var(--g-hi) 88%, var(--accent));
  --hair: color-mix(in srgb, var(--accent) 35%, transparent);
  --glow: color-mix(in srgb, var(--accent) 50%, transparent);
  --glass: color-mix(in srgb, var(--card) 60%, transparent);
  --deco-glow: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* 바탕 — 미드나잇 위 금빛 보케와 모서리에서 뻗는 아르데코 빛살 */
[data-skin="jewel"] body {
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--accent) 28%, transparent) 0, transparent 9%),
    radial-gradient(circle at 12% 70%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 12%),
    radial-gradient(circle at 64% 92%, color-mix(in srgb, var(--accent) 14%, transparent) 0, transparent 10%),
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 16%, #10142a) 0%, transparent 62%),
    linear-gradient(180deg, #0b0d1c, var(--bg) 70%);
}
[data-skin="jewel"] body::before {
  background:
    repeating-conic-gradient(from 270deg at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent) 0deg .18deg, transparent .18deg 5deg),
    repeating-conic-gradient(from 180deg at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent) 0deg .18deg, transparent .18deg 6deg);
  -webkit-mask: radial-gradient(70% 55% at 0% 0%, #000, transparent 70%), radial-gradient(60% 50% at 100% 100%, #000, transparent 70%);
  mask: radial-gradient(70% 55% at 0% 0%, #000, transparent 70%), radial-gradient(60% 50% at 100% 100%, #000, transparent 70%);
}
[data-skin="jewel"] body::after {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 27% 64%, var(--g-hi) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 9%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 63% 41%, var(--g-hi) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 81% 32%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 91% 72%, var(--g-hi) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 88%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 54% 82%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 35% 36%, var(--g-hi) 50%, transparent 51%), radial-gradient(1.7px 1.7px at 73% 6%, #fff 50%, transparent 51%);
  animation: twinkle 3.4s ease-in-out infinite alternate;
}
[data-skin="jewel"] { --gem-a: #ffffff; --gem-b: #dfe7f2; --gem-c: #8e9bb0; }
/* 글자 — 로고·제목은 금박 명조 */
[data-skin="jewel"] .brand b, [data-skin="jewel"] .login h1, [data-skin="jewel"] h2, [data-skin="jewel"] .md h1, [data-skin="jewel"] .md h2, [data-skin="jewel"] .cal-head b {
  font-family: var(--serif); font-weight: 600; letter-spacing: .12em;
  background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 10px var(--glow));
}
[data-skin="jewel"] .brand b { text-transform: uppercase; font-size: 15px; letter-spacing: .22em; }
[data-skin="jewel"] .login h1 { font-size: 30px; text-transform: uppercase; }
[data-skin="jewel"] .sess-bar .title { font-family: var(--serif); letter-spacing: .06em; color: var(--g-hi); }
[data-skin="jewel"] .msg .who { font-family: var(--serif); color: var(--accent); }
[data-skin="jewel"] .brand { position: relative; }
[data-skin="jewel"] .brand::after { content: '✦'; position: absolute; left: 22px; top: -7px; font-size: 13px; color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px var(--accent); animation: glint 4.5s ease-in-out infinite; }
/* 선 — 가운데만 빛나는 금선 */
[data-skin="jewel"] .top, [data-skin="jewel"] .sess-bar { border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, var(--accent) 50%, transparent) 1; }
[data-skin="jewel"] .composer, [data-skin="jewel"] .nav { border-top: 1px solid; border-image: linear-gradient(90deg, transparent, var(--hair) 50%, transparent) 1; }
/* 보석 — 아바타는 깎은 면 */
[data-skin="jewel"] .throbber, [data-skin="jewel"] .msg .av, [data-skin="jewel"] .login-logo, [data-skin="jewel"] .proposal-head .av {
  border-radius: 50%; color: var(--g-lo);
  background: conic-gradient(from 25deg, #fff, var(--g-hi), var(--accent), var(--g-hi), #fff, var(--g-hi), var(--g-lo), var(--accent), #fff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 20px -2px var(--glow);
}
[data-skin="jewel"] .app.busy .throbber { animation: spin 2.4s linear infinite; }
[data-skin="jewel"] .app.busy .throbber svg { animation: spin 2.4s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 버튼·탭 — 그림의 「Explore Showcase」 — 어두운 알약에 금테와 후광 */
[data-skin="jewel"] .tab, [data-skin="jewel"] .btn, [data-skin="jewel"] .wiki-side button {
  border: 1.5px solid transparent; color: var(--text);
  background: linear-gradient(#0e1020, #0e1020) padding-box, var(--gold-x) border-box;
}
[data-skin="jewel"] .tab { opacity: .75; }
[data-skin="jewel"] .tab.on, [data-skin="jewel"] .wiki-side button.on { opacity: 1; color: var(--g-hi); box-shadow: 0 0 16px -3px var(--glow), inset 0 0 10px -4px var(--glow); }
[data-skin="jewel"] .btn-main, [data-skin="jewel"] .btn.main, [data-skin="jewel"] .send {
  border: 0; color: var(--g-lo); font-weight: 700;
  background: var(--gold-x); background-size: 200% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px var(--g-lo), 0 6px 22px -6px var(--glow);
}
/* 말풍선 — 단색. 멍이는 반투명 유리 + 금 실선, 주인님은 금색 한 빛 */
[data-skin="jewel"] .bubble {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); padding: 12px 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -14px var(--glow);
}
[data-skin="jewel"] .msg.me .bubble { background: var(--accent); color: var(--g-lo); border: 0; box-shadow: 0 8px 24px -10px var(--glow); }
[data-skin="jewel"] .msg.me .md b { color: #1a1206; }
/* 카드 — 그림 아래 세 칸처럼 금 베벨 유리 */
[data-skin="jewel"] .fcard, [data-skin="jewel"] .bitem, [data-skin="jewel"] .proposal, [data-skin="jewel"] .cand, [data-skin="jewel"] .qr, [data-skin="jewel"] .drop {
  border: 1.5px solid transparent;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,0) 50%) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, var(--gold-x) border-box;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 24px -10px var(--glow), 0 8px 26px -14px var(--glow);
}
[data-skin="jewel"] .drop { border-style: solid; }
[data-skin="jewel"] .chip { background: transparent; border: 1px solid var(--hair); color: var(--g-hi); }
[data-skin="jewel"] input, [data-skin="jewel"] textarea { background: var(--glass); border-color: var(--hair); }
[data-skin="jewel"] input:focus, [data-skin="jewel"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 18px -6px var(--glow); }
[data-skin="jewel"] .composer textarea { border-radius: 999px; }
[data-skin="jewel"] .gauge i b { background: var(--gold-x); background-size: 300% 100%; animation: flow 5s linear infinite; }
[data-skin="jewel"] .nav button.on { color: var(--g-hi); }
[data-skin="jewel"] .nav button.on svg { filter: drop-shadow(0 0 6px var(--accent)); }
[data-skin="jewel"] .md th { background: transparent; color: var(--g-hi); border-color: var(--hair); }
[data-skin="jewel"] .md td { border-color: var(--hair); }
[data-skin="jewel"] .cal-grid button.today span:first-child { background: var(--gold-x); color: var(--g-lo); box-shadow: 0 0 14px -2px var(--glow); }
[data-skin="jewel"] .board, [data-skin="jewel"] .sheet { background: rgba(10,12,26,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ════════ 홀로그램 드림 ════════ */
[data-skin="holo"] {
  --bg: #170a33; --card: #241446; --line: rgba(255,255,255,.2); --text: #ffffff; --muted: #cbb9f2; --accent: #ff8ad8; --on-accent: #2a0b3d;
  --r: 18px; --bubble-r: 20px;
  --rainbow: linear-gradient(90deg, #ff6ec7, #ffb27a, #fff27a, #7affc4, #7ad7ff, #b98aff, #ff6ec7);
  --pastel: linear-gradient(120deg, #ffd6f0, #e6d6ff 30%, #d2f4ff 55%, #dbffe9 75%, #ffe9d6);
  --glass: rgba(255,255,255,.08);
  --deco-glow: rgba(255,140,220,.55);
  --font: "Pretendard", "Jua", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
[data-skin="holo"] body {
  background:
    linear-gradient(118deg, transparent 30%, rgba(255,60,170,.38) 40%, rgba(255,170,90,.32) 45%, rgba(255,240,90,.26) 49%, rgba(90,255,170,.28) 53%, rgba(80,190,255,.34) 58%, rgba(170,90,255,.34) 63%, transparent 72%),
    radial-gradient(80% 60% at 0% 20%, rgba(255,60,190,.45), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(80,60,255,.45), transparent 60%),
    #170a33;
}
[data-skin="holo"] body::before, [data-skin="holo"] body::after {
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 17% 44%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 29% 8%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 38% 71%, #ffd6f5 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 47% 27%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 58% 56%, #d6f4ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 14%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 74% 83%, #fff 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 83% 38%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 92% 64%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 3% 92%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 52% 95%, #fff 50%, transparent 51%);
  animation: twinkle 2.8s ease-in-out infinite alternate;
}
[data-skin="holo"] body::after { transform: translate(37px, 53px); animation-duration: 3.7s; animation-delay: -1.5s; }
[data-skin="holo"] { --gem-a: #ffffff; --gem-b: #f2d6ff; --gem-c: #9fd8ff; }
[data-skin="holo"] .deco .bfly { display: block; }
[data-skin="holo"] .brand b, [data-skin="holo"] .login h1, [data-skin="holo"] h2, [data-skin="holo"] .md h1, [data-skin="holo"] .md h2, [data-skin="holo"] .cal-head b {
  font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(90deg, #ff7ac8, #ffc58a 45%, #9ad8ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,140,220,.45));
}
[data-skin="holo"] .brand b { text-transform: uppercase; font-size: 17px; }
[data-skin="holo"] .login h1 { font-size: 32px; text-transform: uppercase; }
[data-skin="holo"] .msg .who { color: #ffc5ec; }
[data-skin="holo"] .top, [data-skin="holo"] .sess-bar, [data-skin="holo"] .composer, [data-skin="holo"] .nav { border-color: rgba(255,255,255,.12); }
[data-skin="holo"] .throbber, [data-skin="holo"] .msg .av, [data-skin="holo"] .login-logo, [data-skin="holo"] .proposal-head .av {
  border-radius: 50%; color: #6a2a8a; background: var(--pastel); box-shadow: 0 0 0 2px rgba(255,255,255,.6) inset, 0 0 22px rgba(255,140,220,.6);
}
[data-skin="holo"] .app.busy .throbber { background: var(--rainbow); background-size: 300% 100%; animation: flow 2s linear infinite; }
/* 버튼·탭 — 어두운 알약에 무지개 테와 네온 후광 */
[data-skin="holo"] .tab, [data-skin="holo"] .btn, [data-skin="holo"] .wiki-side button {
  border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
[data-skin="holo"] .tab.on, [data-skin="holo"] .wiki-side button.on, [data-skin="holo"] .btn-main, [data-skin="holo"] .btn.main {
  border: 2px solid transparent; color: #fff;
  background: linear-gradient(#2a1450, #2a1450) padding-box, linear-gradient(90deg, #ff6ec7, #ffb27a, #7ad7ff) border-box;
  box-shadow: 0 0 14px rgba(255,110,199,.55), 0 0 26px rgba(122,215,255,.3);
}
[data-skin="holo"] .send { background: var(--rainbow); background-size: 300% 100%; animation: flow 6s linear infinite; color: #2a0b3d; box-shadow: 0 0 18px rgba(255,110,199,.6); }
/* 말풍선 — 단색. 멍이는 서리 유리, 주인님은 진주빛 한 빛 */
[data-skin="holo"] .bubble {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -12px rgba(255,110,199,.45);
}
[data-skin="holo"] .msg.me .bubble { background: #f6dcf3; color: #3a1650; border: 0; box-shadow: 0 0 22px rgba(255,180,240,.45); }
[data-skin="holo"] .msg.me .md code { background: rgba(58,22,80,.1); }
[data-skin="holo"] .fcard, [data-skin="holo"] .bitem, [data-skin="holo"] .proposal, [data-skin="holo"] .cand, [data-skin="holo"] .qr, [data-skin="holo"] .drop {
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
[data-skin="holo"] .chip { background: rgba(255,255,255,.1); color: #ffd6f3; }
[data-skin="holo"] input, [data-skin="holo"] textarea { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
[data-skin="holo"] input:focus, [data-skin="holo"] textarea:focus { border-color: #ff8ad8; box-shadow: 0 0 16px rgba(255,138,216,.45); }
[data-skin="holo"] .composer textarea { border-radius: 999px; }
[data-skin="holo"] .gauge i b { background: var(--rainbow); background-size: 300% 100%; animation: flow 4s linear infinite; }
[data-skin="holo"] .nav button.on { color: #ffd0f0; }
[data-skin="holo"] .nav button.on svg { filter: drop-shadow(0 0 6px #ff8ad8); }
[data-skin="holo"] .md th { background: rgba(255,255,255,.1); color: #ffd6f3; }
[data-skin="holo"] .cal-grid button.today span:first-child { background: var(--rainbow); color: #2a0b3d; box-shadow: 0 0 14px rgba(255,110,199,.6); }
[data-skin="holo"] .board, [data-skin="holo"] .sheet { background: rgba(30,14,64,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ════════ 네온 크롬 ════════ */
[data-skin="neon"] {
  --bg: #050507; --card: #0d0d12; --line: #23232c; --text: #e9f0ff; --muted: #7f8aa3; --accent: #39ff88; --on-accent: #001a0b;
  --pink: #ff2bd6; --violet: #8a5cff;
  --chrome: linear-gradient(180deg, #ffffff 0%, #c8d0de 38%, #4a5266 50%, #e3e9f4 62%, #8d96aa 100%);
  --r: 6px; --bubble-r: 8px;
  --deco-glow: rgba(255,43,214,.6);
}
[data-skin="neon"] body {
  background:
    linear-gradient(112deg, transparent 49.75%, rgba(255,43,214,.85) 50%, transparent 50.25%),
    linear-gradient(64deg, transparent 49.8%, rgba(57,255,136,.7) 50%, transparent 50.2%),
    linear-gradient(150deg, transparent 49.85%, rgba(138,92,255,.7) 50%, transparent 50.15%),
    radial-gradient(60% 40% at 50% 100%, rgba(138,92,255,.25), transparent 70%),
    #050507;
}
/* 스캔라인 — 아주 옅게 */
[data-skin="neon"] body::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
[data-skin="neon"] { --gem-a: #ffffff; --gem-b: #9aa6bd; --gem-c: #ff2bd6; }
[data-skin="neon"] .deco .pearl { background: radial-gradient(circle at 32% 28%, #fff 0 10%, #c9d2e2 30%, #5b6378 70%, #1b1f2a 100%); }
[data-skin="neon"] .brand b, [data-skin="neon"] .login h1, [data-skin="neon"] h2, [data-skin="neon"] .md h1, [data-skin="neon"] .md h2, [data-skin="neon"] .cal-head b {
  font-weight: 900; font-style: italic; letter-spacing: .04em; text-transform: uppercase;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px var(--pink));
}
[data-skin="neon"] .login h1 { font-size: 32px; }
[data-skin="neon"] .msg .who { color: var(--accent); font-family: var(--mono); text-transform: uppercase; }
[data-skin="neon"] .top, [data-skin="neon"] .sess-bar { border-bottom: 1px solid var(--pink); box-shadow: 0 1px 12px -2px var(--pink); }
[data-skin="neon"] .composer, [data-skin="neon"] .nav { border-top: 1px solid var(--accent); box-shadow: 0 -1px 12px -3px var(--accent); }
[data-skin="neon"] .throbber, [data-skin="neon"] .msg .av, [data-skin="neon"] .login-logo, [data-skin="neon"] .proposal-head .av {
  border-radius: 6px; background: #000; color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 12px var(--accent), inset 0 0 8px rgba(57,255,136,.4);
}
[data-skin="neon"] .tab, [data-skin="neon"] .btn, [data-skin="neon"] .wiki-side button { border-radius: 4px; background: transparent; border: 1px solid #3a3a48; color: var(--text); font-family: var(--mono); font-size: 12px; }
[data-skin="neon"] .tab.on, [data-skin="neon"] .wiki-side button.on { border-color: var(--pink); color: #fff; box-shadow: 0 0 10px var(--pink), inset 0 0 8px rgba(255,43,214,.35); text-shadow: 0 0 6px var(--pink); }
[data-skin="neon"] .btn-main, [data-skin="neon"] .btn.main, [data-skin="neon"] .send {
  border-radius: 4px; background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
  box-shadow: 0 0 12px var(--accent), inset 0 0 10px rgba(57,255,136,.35); text-shadow: 0 0 6px var(--accent);
}
[data-skin="neon"] .bubble { background: rgba(13,13,18,.85); border: 1px solid #2c2c38; border-left: 2px solid var(--accent); box-shadow: -4px 0 14px -6px var(--accent); }
[data-skin="neon"] .msg.me .bubble { background: #dfe5f0; color: #0b0e16; border: 0; box-shadow: 0 0 16px rgba(255,43,214,.45); }
[data-skin="neon"] .fcard, [data-skin="neon"] .bitem, [data-skin="neon"] .proposal, [data-skin="neon"] .cand, [data-skin="neon"] .qr, [data-skin="neon"] .drop {
  border-radius: 6px; background: rgba(13,13,18,.85); border: 1px solid var(--violet); box-shadow: 0 0 14px -4px var(--violet), inset 0 0 12px -6px var(--violet);
}
[data-skin="neon"] .chip { background: transparent; color: var(--accent); font-family: var(--mono); }
[data-skin="neon"] input, [data-skin="neon"] textarea { border-radius: 4px; background: #08080c; border-color: #2c2c38; font-family: var(--mono); }
[data-skin="neon"] input:focus, [data-skin="neon"] textarea:focus { border-color: var(--pink); box-shadow: 0 0 12px var(--pink); }
[data-skin="neon"] .gauge i b { background: linear-gradient(90deg, var(--accent), var(--pink)); box-shadow: 0 0 8px var(--pink); }
[data-skin="neon"] .nav button.on { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
[data-skin="neon"] .nav button.on svg { filter: drop-shadow(0 0 6px var(--accent)); }
[data-skin="neon"] .md th { background: transparent; color: var(--pink); border-color: #2c2c38; }
[data-skin="neon"] .md td { border-color: #2c2c38; }
[data-skin="neon"] .cal-grid button.today span:first-child { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 10px var(--accent); }
[data-skin="neon"] .board, [data-skin="neon"] .sheet { background: rgba(5,5,7,.92); }

@media (prefers-reduced-motion: reduce) {
  [data-skin="jewel"] *, [data-skin="holo"] *, [data-skin="neon"] *,
  [data-skin="jewel"] *::before, [data-skin="holo"] *::before, [data-skin="neon"] *::before,
  [data-skin="jewel"] *::after, [data-skin="holo"] *::after, [data-skin="neon"] *::after { animation: none !important; }
}

/* ⓓ 레트로 넷스케이프 — 고유 색. 색 조합을 덮어쓴다(이 블록이 파일 맨 아래인 이유) */
[data-skin="netscape"] {
  --bg: #c0c0c0; --card: #ffffff; --line: #808080; --text: #000000; --muted: #444444; --accent: #000080; --on-accent: #ffffff;
  --font: "Tahoma", "MS Sans Serif", "Malgun Gothic", sans-serif; --r: 0; --bubble-r: 0;
}
[data-skin="netscape"] .app { padding: 0; }
[data-skin="netscape"] .ns-title {
  display: flex; align-items: center; justify-content: space-between;
  background: #000080; color: #fff; padding: calc(3px + var(--safe-t)) 8px 3px; font-size: 13px; font-weight: 700;
}
[data-skin="netscape"] .ns-title i { font-style: normal; letter-spacing: 4px; }
[data-skin="netscape"] .top { background: #c0c0c0; border-bottom: 1px solid #808080; box-shadow: inset 0 -1px #fff; }
[data-skin="netscape"] .throbber { background: #000040; color: #7fd4ff; border-radius: 0; border: 2px inset #808080; width: 34px; height: 30px; order: 9; margin-left: 6px; }
[data-skin="netscape"] .brand { order: 0; }
[data-skin="netscape"] .brand b { font-weight: 700; font-size: 14px; }
[data-skin="netscape"] .tab, [data-skin="netscape"] .btn, [data-skin="netscape"] .wiki-side button {
  border-radius: 0; background: #d4d0c8; color: #000; border: 2px outset #fff; padding: 3px 10px;
}
[data-skin="netscape"] .tab.on { border-style: inset; background: #e8e8e8; }
[data-skin="netscape"] .ico-btn { border-radius: 0; color: #000; border: 2px outset #fff; background: #d4d0c8; width: 34px; height: 30px; margin-left: 2px; }
[data-skin="netscape"] .ns-loc {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; border-bottom: 1px solid #808080;
}
[data-skin="netscape"] .ns-loc span { flex: 1; background: #fff; border: 2px inset #808080; padding: 1px 6px; font-family: var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-skin="netscape"] .main { background: #fff; margin: 6px; border: 2px inset #808080; }
[data-skin="netscape"] .nav { background: #c0c0c0; }
[data-skin="netscape"] .nav button { border-radius: 0; }
[data-skin="netscape"] .nav button.on { background: #fff; color: #000080; border: 2px inset #808080; }
[data-skin="netscape"] .msg .av { border-radius: 0; background: #000080; }
[data-skin="netscape"] .bubble, [data-skin="netscape"] .msg.me .bubble { background: transparent; color: #000; border: 0; padding: 0; max-width: none; }
[data-skin="netscape"] .msg .who { display: inline; font-weight: 700; }
[data-skin="netscape"] .msg .who::after { content: ':'; }
[data-skin="netscape"] .msg.me { justify-content: flex-start; }
[data-skin="netscape"] .msg.me .body { align-items: flex-start; }
[data-skin="netscape"] .msg.me .who { color: #0000ee; }
[data-skin="netscape"] .msg.bot .who { color: #800000; }
[data-skin="netscape"] .md a, [data-skin="netscape"] .wiki-body .wl { color: #0000ee; }
[data-skin="netscape"] input, [data-skin="netscape"] textarea { border-radius: 0; border: 2px inset #808080; background: #fff; }
[data-skin="netscape"] .send { border-radius: 0; background: #d4d0c8; color: #000; border: 2px outset #fff; }
[data-skin="netscape"] .ns-status {
  display: block; padding: 2px 8px calc(2px + var(--safe-b)); font-size: 12px; border-top: 1px solid #fff; box-shadow: inset 0 1px #808080;
}
[data-skin="netscape"] .nav { padding-bottom: 4px; }
[data-skin="netscape"] .board { background: #c0c0c0; }
[data-skin="netscape"] .bitem, [data-skin="netscape"] .fcard, [data-skin="netscape"] .proposal { border-radius: 0; border: 2px outset #fff; background: #d4d0c8; }
[data-skin="netscape"] .sheet { background: #c0c0c0; border-radius: 0; border-top: 2px outset #fff; }
[data-skin="netscape"] .login-logo { border-radius: 0; background: #000080; }
[data-skin="netscape"] .chip { background: transparent; color: #0000ee; text-decoration: underline; padding: 0; }
[data-skin="netscape"] .md pre { background: #f0f0f0; border-radius: 0; }
@media (min-width: 768px) {
  [data-skin="netscape"] .nav { border-right: 2px groove #fff; }
}