/* =========================================================
   EDIT — 검은 화면 위 회색 창, 탁한 노랑 강조
   색은 모두 아래 변수에서 바꿉니다.
   ========================================================= */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("../fonts/Pretendard-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url("../fonts/Pretendard-Medium.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("../fonts/Pretendard-SemiBold.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url("../fonts/Pretendard-Bold.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 800; font-display: swap; src: url("../fonts/Pretendard-ExtraBold.subset.woff2") format("woff2"); }


:root {
  --void: #000;
  --frame: #cdcdcd;      /* 창 바깥 틀 */
  --frame-hi: #f0f0f0;
  --bar-off: #dcdcdc;    /* 비활성 제목 줄 */
  --paper: #f4f4f4;      /* 창 안쪽 */
  --paper-2: #e2e2e2;
  --tool: #4a4a4a;       /* 도구 줄 */
  --dark: #3b3b3b;       /* 어두운 단추 · 판 */
  --mid: #8d8d8d;
  --ink: #111;
  --muted: #5a5a5a;
  --line: #111;

  --accent: #b3a043;     /* 로고 · 초점 표시에만 */
  --accent-hi: #d6c579;
  --accent-lo: #5f5320;

  --font-px: Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-read: Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --tb: 40px;
  --i16: 16px; --i24: 24px; --i32: 32px;   /* 아이콘 크기: 화면 배율에 맞춰 JS 가 다시 정합니다 */
  color-scheme: only dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--void); color: var(--ink);
  font: 13px/1.55 var(--font-px); font-variant-numeric: tabular-nums;
  overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g { display: block; image-rendering: pixelated; }

/* ---------- 단추 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 26px; padding: 3px 14px;
  background: var(--dark); color: #fff; font-size: 12px; font-weight: 700;
  border: 1px solid #000; border-radius: 0; box-shadow: inset 0 0 0 1px #7a7a7a;
}
.btn:hover:not(:disabled) { background: #2a2a2a; }
.btn:active:not(:disabled) { background: #000; }
.btn.is-on { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #111; }
.btn:disabled { background: #9a9a9a; color: #d8d8d8; box-shadow: none; cursor: default; }
.btn--sm { min-height: 24px; padding: 2px 10px; }
.btn--icon { width: 30px; padding: 0; }
.btn--accent { background: #000; box-shadow: inset 0 0 0 1px #fff; }
.btn--danger { color: #ffb8ad; }
.btn img { width: var(--i16); height: var(--i16); image-rendering: pixelated; }

.field {
  height: 26px; padding: 0 8px; border: 1px solid #000; border-radius: 0;
  background: #fff; color: var(--ink);
}
.field:focus-visible { outline-offset: 0; }

/* ---------- 바탕 화면 ---------- */
#desktop {
  position: fixed; inset: 0; overflow: hidden; background: #000;
}
#icons { position: absolute; top: 16px; left: 12px; z-index: 1; display: grid; gap: 12px; justify-items: center; }
.dicon {
  display: grid; justify-items: center; gap: 4px; width: 76px; padding: 4px 2px;
  background: none; border: 0; color: #fff;
}
.dicon img { width: var(--i32); height: var(--i32); image-rendering: pixelated; }
.dicon > span { padding: 0 4px; font-size: 12px; font-weight: 600; }
.dicon .brand { font-size: 13px; }
.dicon:hover > span, .dicon:focus-visible > span { background: #fff; color: #111; text-shadow: none; }
.dicon:hover .brand__b, .dicon:focus-visible .brand__b { color: #111; }
.dicon:focus-visible { outline-offset: 0; }
#windows { position: absolute; inset: 0 0 var(--tb) 0; z-index: 2; pointer-events: none; }
#icons, #stickers { z-index: 1; }
#windows > * { pointer-events: auto; }

/* ---------- 창 ---------- */
.win {
  position: absolute; display: flex; flex-direction: column;
  padding: 3px; background: var(--frame);
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px var(--frame-hi), 5px 5px 0 rgba(0, 0, 0, .55);
  min-width: 240px; min-height: 150px;
}
/* 창 열기: 가운데 흰 줄이 위아래로 벌어져 창이 되고, 흰빛이 걷히며 내용이 보임 */
.win.is-opening { animation: win-open .2s cubic-bezier(.2, .7, .3, 1) both; }
.win.is-opening::after, .win.is-closing::after {
  content: ""; position: absolute; inset: 0; z-index: 5; background: #fff; pointer-events: none;
}
.win.is-opening::after { animation: win-white-out .36s ease-out forwards; }
@keyframes win-open {
  0% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); box-shadow: none; }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes win-white-out { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
.win.is-drag { opacity: .94; }
.win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; box-shadow: inset 0 0 0 1px var(--frame-hi); }
.win__bar {
  display: flex; align-items: center; gap: 6px; height: 24px; flex: none; padding: 0 3px 0 7px;
  background: var(--bar-off); color: var(--ink); border: 1px solid #000;
  user-select: none; touch-action: none; cursor: default;
}
.win.is-active .win__bar { background: #111; color: #fff; }
.win__icon { display: none; }
.win__title { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__ctrls { display: flex; gap: 2px; flex: none; }
.win__btn {
  display: grid; place-items: center; width: 17px; height: 16px; padding: 0;
  background: var(--bar-off); color: #111; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff;
}
.win__btn .g { width: 8px; height: 7px; }
.win__btn:active { background: #9a9a9a; }
.win__body {
  position: relative; flex: 1; min-height: 0; margin-top: 3px;
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid #000; background: var(--paper);
}
.win__body.void { background: #000; }
.win__body.flush { overflow: hidden; }
.win__grip {
  position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 50%, #111 50% 58%, transparent 58% 72%, #111 72% 80%, transparent 80%);
}
.win.is-max .win__grip { display: none; }

/* 스크롤바: 어두운 길 + 밝은 손잡이 */
.win__body, .xp__list, .xp__tree, .dock__list, .wr__prev { scrollbar-color: #d4d4d4 #2b2b2b; }
:is(.win__body, .xp__list, .xp__tree, .dock__list, .wr__prev)::-webkit-scrollbar { width: 14px; height: 14px; }
:is(.win__body, .xp__list, .xp__tree, .dock__list, .wr__prev)::-webkit-scrollbar-track { background: #2b2b2b; }
:is(.win__body, .xp__list, .xp__tree, .dock__list, .wr__prev)::-webkit-scrollbar-thumb { background: #d4d4d4; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; }

/* ---------- 작업 표시줄 ---------- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 4px; height: var(--tb);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--frame); border-top: 1px solid #000; box-shadow: inset 0 1px 0 #fff;
}
.btn--start { flex: none; width: 40px; height: 31px; padding: 0; background: var(--bar-off); border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; }
.btn--start:hover:not(:disabled) { background: #fff; }
.btn--start.is-on, .btn--start:active:not(:disabled) { background: #111; }
.btn--start img { width: var(--i24); height: var(--i24); image-rendering: pixelated; }
#tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.task {
  flex: 0 1 170px; min-width: 40px; height: 31px;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--dark); color: #fff; border: 1px solid #000; box-shadow: inset 0 0 0 1px #7a7a7a;
  text-align: left; font-size: 12px; font-weight: 600;
}
.task img { width: var(--i16); height: var(--i16); image-rendering: pixelated; flex: none; }
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task.is-on { background: #000; box-shadow: inset 0 0 0 1px #fff; }
#tray { flex: none; display: flex; align-items: center; height: 31px; padding: 0 10px; background: #fff; border: 1px solid #000; }
#clock { font-weight: 700; }

.menu {
  position: absolute; left: 4px; bottom: calc(var(--tb) - 1px); z-index: 950;
  display: grid; grid-template-columns: auto 1fr; gap: 3px; min-width: 210px; padding: 3px;
  background: var(--frame); border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff, 4px 4px 0 rgba(0,0,0,.6);
}
.menu__side { display: flex; align-items: flex-end; justify-content: center; width: 30px; padding: 8px 0; background: #000; }
.menu__side .brand { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 20px; }
.menu__items { display: grid; background: var(--paper); border: 1px solid #000; }
.menu__item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; background: none; text-align: left; font-weight: 600; }
.menu__item img { width: var(--i16); height: var(--i16); image-rendering: pixelated; }
.menu__item:hover, .menu__item:focus-visible { background: #111; color: #fff; outline: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tb) + 16px); z-index: 2000; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 9px 16px;
  background: var(--paper); color: var(--ink); font-weight: 700;
  border: 1px solid #000; box-shadow: inset 0 0 0 2px var(--frame), 4px 4px 0 #000;
}

/* ---------- 공통 내용 ---------- */
.sec { margin-top: 22px; }
.sec__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 800; }
.sec__h::after { content: ""; flex: 1; border-top: 1px solid #111; }
.prose { font: 15px/1.7 var(--font-read); max-width: 36em; }
.prose p { margin: 0 0 .7em; }
.prose--read { font-size: 15.5px; line-height: 1.85; }
.empty { margin: 32px 16px; text-align: center; color: var(--muted); }
.empty--dark { color: #8a8a8a; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { min-height: 24px; padding: 0 9px; border: 1px solid #000; background: #fff; color: #111; font-size: 12px; font-weight: 600; }
.chip:hover { background: var(--paper-2); }
.chip.is-on { background: #111; color: #fff; }
.ava { flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid #000; background: var(--paper-2); }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava--px { background: var(--c, #6a6a6a); color: #fff; font-size: 13px; font-weight: 700; }
.brand { display: inline-flex; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.brand__a { color: var(--accent); }
.brand__b { color: #fff; }

/* ---------- 홈 ---------- */
.home { padding: 0 22px 18px; }
.home__head { margin: 0 -22px; padding: 24px 22px 18px; background: #111; border-bottom: 1px solid #000; }
.home__title { margin: 0; font-size: 40px; line-height: 1; }
.home__sub { margin: 10px 0 0; color: #a8a8a8; }
.home__cover { margin: 0 -22px; }
.home__cover img { display: block; width: 100%; max-height: 220px; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cast li { display: flex; }
.cast__item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 6px; border: 1px solid transparent; background: none; text-align: left; }
.cast__item:hover { background: var(--paper-2); border-color: #111; }
.cast__item strong { display: block; font-size: 13px; }
.cast__bio { display: block; margin-top: 2px; font: 13.5px/1.55 var(--font-read); color: #333; }
.recent { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid #111; }
.recent li { border-bottom: 1px solid #bdbdbd; }
.recent__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 4px; border: 0; background: none; text-align: left; }
.recent__row img { width: var(--i16); height: var(--i16); image-rendering: pixelated; flex: none; }
.recent__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 15px/1.4 var(--font-read); }
.recent__row time, .row__d { color: var(--muted); font-size: 12px; }
.recent__row:hover { background: var(--paper-2); }
.home__acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.home__foot { margin-top: 24px; padding-top: 10px; border-top: 1px solid #111; color: var(--muted); font-size: 12px; }

/* ---------- 콘솔 (명령 프롬프트) ---------- */
.win__body.void:has(.term) { background: #fff; }
.term { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-all; font: 500 13px/1.9 var(--font-mono); color: #111; }
.caret { display: inline-block; width: 8px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #111; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 로그 탐색기 ---------- */
.xp { display: flex; flex-direction: column; height: 100%; }
.xp > * { flex: none; }
.xp > .xp__main { flex: 1; min-height: 0; }
.xp__bar, .xp__tools { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--tool); }
.xp__tools { padding-top: 0; }
.xp__addr { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; padding: 0 8px; background: #fff; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.xp__tools .field[type=search] { flex: 1; min-width: 0; }
.xp .chips { padding: 6px 8px; background: var(--tool); border-top: 1px solid #000; }
.xp .chips .chip { background: var(--dark); color: #fff; box-shadow: inset 0 0 0 1px #7a7a7a; }
.xp .chips .chip.is-on { background: #fff; color: #111; box-shadow: none; }
.xp__main { display: grid; grid-template-columns: 190px 1fr; min-height: 0; border-top: 1px solid #000; border-bottom: 1px solid #000; background: #fff; }
.xp__side { display: grid; grid-template-rows: 1fr auto; min-height: 0; border-right: 1px solid #000; background: var(--paper); }
.xp__tree { overflow: auto; padding: 6px 4px; }
.xp__fold { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-top: 1px solid #000; background: var(--frame); }
.xp.is-drop, .win__body.is-drop { box-shadow: inset 0 0 0 3px #111; }
.tn-row { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--d, 0) * 14px); }
.tn-row--local { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #111; }
.tn__tog { flex: none; display: grid; place-items: center; width: 18px; height: 22px; padding: 0; border: 0; background: none; color: #111; }
.tn__tog .g { width: auto; height: 7px; }
.tn__tog:hover { background: var(--paper-2); }
.tn__tog--none { display: block; }
.tn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 28px;
  padding: 2px 6px; border: 0; background: none; text-align: left; white-space: nowrap; font-weight: 600;
}
.tn__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tn__edit { flex: 1; min-width: 0; height: 26px; }
.tn img { width: var(--i16); height: var(--i16); image-rendering: pixelated; flex: none; }
.tn__n { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.tn:hover { background: var(--paper-2); }
.tn.is-on { background: #111; color: #fff; }
.tn.is-on .tn__n { color: #bdbdbd; }
.tn.is-on img { filter: invert(1); }
.xp__list { overflow: auto; padding: 4px; }
.row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center;
  width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-bottom: 1px solid #d0d0d0; background: none; text-align: left;
}
.row img { width: var(--i16); height: var(--i16); image-rendering: pixelated; }
.row:hover { background: var(--paper-2); }
.row__main { min-width: 0; display: grid; }
.row__t { font: 600 15px/1.4 var(--font-read); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__s { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 로그 보기 ---------- */
.lv { padding: 22px 22px 16px; }
.lv__head { padding-bottom: 14px; border-bottom: 1px solid #111; }
.lv__path { margin: 0 0 8px; color: var(--muted); font-size: 12px; word-break: break-all; }
.lv__title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 800; }
.lv__meta { margin: 6px 0 0; color: var(--muted); }
.lv__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; padding: 0; font-weight: 600; }
.lv__sum { margin: 12px 0 0; padding: 10px 12px; background: var(--paper-2); border: 1px solid #111; font: 14px/1.65 var(--font-read); }
.lv__local { margin-top: 12px; padding: 10px 12px; background: var(--mid); color: #fff; border: 1px solid #000; }
.lv__local p { margin: 0 0 8px; font: 13px/1.6 var(--font-read); }
.lv__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.lv__body { padding: 8px 0 18px; }
.lv__body > .prose { margin-top: 16px; }
.lv__foot { display: flex; justify-content: space-between; gap: 6px; padding-top: 12px; border-top: 1px solid #111; }

.chat { list-style: none; margin: 0; padding: 0; }
.chat__note { margin: 22px 0 8px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; }
.chat__note::before, .chat__note::after { content: " — "; }
.chat__p { margin: 14px 0; }
.chat__img { margin: 14px 0; display: flex; justify-content: center; }
.msg { display: flex; gap: 10px; margin-top: 16px; align-items: flex-start; }
.msg--r { flex-direction: row-reverse; }
.msg--cont { margin-top: 5px; }
.msg--cont .ava { visibility: hidden; height: 0; border-width: 0; }
.msg--cont .msg__name { display: none; }
.msg__col { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; max-width: calc(100% - 56px); }
.msg--r .msg__col { align-items: flex-end; }
.msg__name { font-size: 12px; font-weight: 800; color: var(--c, var(--ink)); }
.msg__time { order: 9; color: var(--muted); font-size: 12px; }
.msg__bubble {
  padding: 8px 12px; max-width: 32em; background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 #000;
  font: 15px/1.65 var(--font-read); word-break: keep-all; overflow-wrap: anywhere;
}
.msg--r .msg__bubble { background: #111; color: #fff; box-shadow: 3px 3px 0 #8d8d8d; }

.pic { display: block; padding: 0; border: 1px solid #000; background: #000; max-width: 100%; }
.pic img { display: block; max-height: 320px; width: auto; transition: filter .1s steps(2); }
.pic.is-gray img { filter: grayscale(1) contrast(1.05); }
.pic.is-gray:hover img, .pic.is-gray:focus-visible img { filter: none; }
.gallery { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery .pic { width: 100%; aspect-ratio: 1; }
.gallery .pic img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.gallery__cap { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.iv { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; background: #000; }
.iv__stage { position: relative; min-height: 0; outline: none; touch-action: pan-y; }
.iv__stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.iv__stage img.is-in { animation: iv-in .16s ease-out; }
@keyframes iv-in { from { opacity: .3; } to { opacity: 1; } }
.iv figcaption { display: flex; gap: 8px; align-items: center; padding: 5px 8px; color: #ddd; background: var(--tool); border-top: 1px solid #000; }
.iv__cap { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.iv__n { font-weight: 700; color: #fff; }
.iv a.btn { text-decoration: none; }
/* 양옆 넘기기 단추: 가장자리에 가까이 가면 나타남 */
.iv__nav {
  position: absolute; top: 50%; width: 44px; height: 64px; margin-top: -32px; display: grid; place-items: center; padding: 0;
  background: rgba(17, 17, 17, .85); color: #fff; border: 1px solid #fff; opacity: 0; pointer-events: none;
  transition: opacity .12s ease-out, transform .12s ease-out;
}
.iv__nav .g { width: 14px; height: 14px; }
.iv__nav--prev { left: 10px; transform: translateX(-6px); }
.iv__nav--next { right: 10px; transform: translateX(6px); }
.iv__stage.near-l .iv__nav--prev, .iv__stage.near-r .iv__nav--next, .iv__nav:focus-visible { opacity: 1; pointer-events: auto; transform: none; }
.iv__nav:hover { background: #fff; color: #111; }
@media (hover: none) { .iv__nav { opacity: .75; pointer-events: auto; transform: none; } }
.iv:fullscreen { width: 100vw; height: 100vh; }
.iv:fullscreen figcaption { background: rgba(0, 0, 0, .7); }

/* ---------- 캐릭터: 두상 + 모든 정보 한 화면 ---------- */
.cw { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); height: 100%; }
.cc { display: grid; grid-template-rows: auto auto 1fr; gap: 14px; min-height: 0; padding: 18px 20px; }
.cc + .cc { border-left: 1px solid #111; }
.cc__head { display: flex; gap: 16px; align-items: center; }
.cc__face {
  flex: none; display: grid; place-items: center; width: 116px; height: 116px; padding: 0; overflow: hidden;
  background: var(--paper-2); border: 1px solid #000; box-shadow: 4px 4px 0 #000; cursor: pointer;
}
.cc__face img { width: 100%; height: 100%; object-fit: cover; transition: filter .1s steps(2); }
.cc__face.is-gray img { filter: grayscale(1) contrast(1.05); }
.cc__face.is-gray:hover img, .cc__face.is-color img { filter: none; }
.cc__face .g { width: 72px; height: 72px; color: #8d8d8d; margin-top: 18px; }
.cc__id { min-width: 0; }
.cc__en { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.cc__name { margin: 2px 0 0; font-size: 24px; line-height: 1.25; font-weight: 800; }
.cc__tag { margin: 6px 0 0; font-size: 13px; color: #333; }
.cc__prof { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid #111; }
.cc__prof div { display: grid; gap: 1px; padding: 6px 8px 6px 0; border-bottom: 1px solid #cfcfcf; }
.cc__prof dt { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.cc__prof dd { margin: 0; font: 14px/1.5 var(--font-read); }
.cc__desc { min-height: 0; overflow: auto; margin: 0; font-size: 14px; line-height: 1.7; }

/* ---------- BGM 도크 (플레이어) ---------- */
.dock {
  position: absolute; right: 12px; bottom: var(--tb); z-index: 800; width: 300px; padding: 3px;
  background: var(--frame); border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff, 5px 5px 0 rgba(0,0,0,.55);
  transition: transform .14s steps(4);
}
.dock.is-folded { transform: translateY(calc(100% - 31px)); box-shadow: inset 0 0 0 1px #fff; }
.dock__bar { display: flex; align-items: center; gap: 3px; height: 24px; padding: 0 3px 0 7px; background: #111; color: #fff; border: 1px solid #000; }
.dock__bar .win__icon { display: none; }
.dock__bar .win__btn.is-on { background: #fff; }
.dock__title { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 700; cursor: default; }
.dock.is-folded .dock__title { cursor: pointer; }
.dock__title span { display: inline-block; }
.dock.is-playing .dock__title span { animation: marquee 14s linear infinite; }
@keyframes marquee { 0%, 15% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.dock__body { display: grid; gap: 6px; margin-top: 3px; padding: 8px; background: var(--dark); border: 1px solid #000; color: #ddd; }
.dock__lcd { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #000; border: 1px solid #6a6a6a; }
.dock__vis { width: 80px; height: 32px; image-rendering: pixelated; flex: none; }
.dock__time { color: #f0f0f0; font: 700 24px/1 var(--font-mono); white-space: nowrap; }
.dock__time small { font-size: 12px; color: #8d8d8d; }
.dock__ctrls { display: flex; gap: 3px; align-items: center; }
.dock__ctrls .btn--icon { width: 28px; }
.dock__sp { flex: 1; }
.dock__vol { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.dock__vol .range { flex: 1; }
.dock__list { list-style: none; margin: 0; padding: 3px; max-height: 180px; overflow: auto; background: #000; border: 1px solid #6a6a6a; }
.trk { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 34px; padding: 4px 8px; border: 0; background: none; color: #a8a8a8; text-align: left; }
.trk:hover { color: #fff; }
.trk__n { color: #6a6a6a; font-size: 12px; }
.trk__t { flex: 1; min-width: 0; display: grid; }
.trk__t small { color: #6b6b6b; font-size: 11.5px; }
.trk__d { color: #6b6b6b; font-size: 12px; }
.trk.is-on { background: #fff; color: #111; }
.trk.is-on .trk__n, .trk.is-on small, .trk.is-on .trk__d { color: #555; }
.range { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; margin: 0; }
.range::-webkit-slider-runnable-track { height: 6px; background: #111; border: 1px solid #6a6a6a; }
.range::-moz-range-track { height: 6px; background: #111; border: 1px solid #6a6a6a; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -6px; background: #d4d4d4; border: 1px solid #000; }
.range::-moz-range-thumb { width: 10px; height: 16px; background: #d4d4d4; border: 1px solid #000; border-radius: 0; }

/* ---------- 글쓰기 ---------- */
.wr { display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
.wr__meta { display: grid; grid-template-columns: 2fr 140px 1.1fr 1.1fr; gap: 8px; padding: 8px 10px; background: var(--tool); }
.wr__f { display: grid; gap: 3px; min-width: 0; }
.wr__f > span { color: #d8d8d8; font-size: 11.5px; font-weight: 700; }
.wr__f .field { width: 100%; }
.wr__tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 10px 8px; background: var(--tool); border-bottom: 1px solid #000; }
.wr__sp { flex: 1; }
.wr__who .ava { width: 18px; height: 18px; font-size: 10px; }
.wr__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-height: 0; padding: 8px 10px 0; }
.wr__edit { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.wr__edit .wr__ta { flex: 1; }
.wr__ta { width: 100%; min-height: 160px; resize: none; padding: 12px 14px; border: 1px solid #000; border-radius: 0; background: #fff; font: 15px/1.75 var(--font-read); color: var(--ink); }
.wr__ta:focus-visible { outline-offset: -3px; }
.wr__ta.is-drop { box-shadow: inset 0 0 0 3px #111; background: #ededed; }
.wr__imgs { display: flex; gap: 8px; overflow-x: auto; padding-top: 6px; }
.wr__imgs:empty { display: none; }
.wr__img { position: relative; flex: none; margin: 0; width: 74px; }
.wr__img.is-new { animation: sel-in .16s steps(3); }
.wr__ins { display: block; width: 74px; height: 56px; padding: 0; border: 1px solid #000; background: #000; }
.wr__ins img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr__img figcaption { font-size: 11px; color: var(--muted); text-align: center; }
.wr__x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; background: var(--bar-off); border: 1px solid #000; }
.wr__prev { min-height: 0; overflow: auto; background: var(--paper); border: 1px solid #000; }
.wr__prev .lv { padding: 16px; }
.wr__prev .lv__title { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid #111; }
.wr__foot { display: flex; gap: 6px; align-items: center; padding: 8px 10px; }
.wr__state { flex: 1; color: var(--muted); font-size: 12px; }

/* ---------- 모바일 ---------- */
@media (max-width: 720px) {
  .win, .win.is-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; box-shadow: inset 0 0 0 1px var(--frame-hi); }
  .win__grip, .win__btn[data-act=max] { display: none; }
  .win__bar { height: 36px; }
  .win__btn { width: 30px; height: 26px; }
  .task { flex-basis: 120px; }
  .xp__main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .xp__side { border-right: 0; border-bottom: 1px solid #000; max-height: 40vh; }
  .tn { min-height: 36px; }
  .chip { min-height: 32px; }
  .row { min-height: 56px; }
  .home, .lv { padding-left: 16px; padding-right: 16px; }
  .home__head, .home__cover { margin-left: -16px; margin-right: -16px; padding-left: 16px; }
  #icons { grid-template-columns: repeat(3, 72px); }
  .dicon { width: 72px; }
  .dock { left: 0; right: 0; width: auto; }
  .cw { grid-template-columns: 1fr; height: auto; }
  .cc + .cc { border-left: 0; border-top: 1px solid #111; }
  .wr__meta { grid-template-columns: 1fr 1fr; }
  .wr__f--title, .wr__f--tags { grid-column: 1 / -1; }
  .wr__split { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, auto); overflow: auto; }
  .wr__state { display: none; }
  .lt__main { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; }
  .lt__list { border-right: 0; border-bottom: 1px solid #000; }
  .lt__view { padding: 14px; }
  .lt__paper { padding: 20px 18px; }
  .lw__meta { grid-template-columns: 1fr 1fr; }
}

/* ---------- 인트로: 무대와 마이크 ---------- */
#intro { position: fixed; inset: 0; z-index: 1000; background: #000; overflow: hidden; }

.stage { position: absolute; inset: 0; --warm: 224, 208, 138; }

/* 무대 바닥: 조명 아래만 살짝 드러나는 어두운 판 */
.stage__floor {
  position: absolute; left: 0; right: 0; top: calc(var(--cy) - var(--ry) * 2.2); bottom: 0;
  background:
    radial-gradient(ellipse calc(var(--rx) * 2.4) calc(var(--ry) * 5) at 50% calc(var(--ry) * 2.2), #1a1915 0%, #0b0b0a 45%, #000 80%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--ry) * 2));
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--ry) * 2));
}

.stage__light { position: absolute; inset: 0; }
/* 빛기둥: 잘라 낸 사다리꼴을 바깥에서 흐리게 */
.stage__cone {
  position: absolute; left: calc(var(--cx) - var(--rx)); width: calc(var(--rx) * 2);
  top: -10vh; height: calc(var(--cy) + 10vh);
  filter: blur(22px);
}
.stage__cone i {
  position: absolute; inset: 0;
  clip-path: polygon(46% 0, 54% 0, 99% 100%, 1% 100%);
  background:
    radial-gradient(ellipse 22% 100% at 50% 0%, rgba(255, 246, 206, .22), rgba(255, 246, 206, 0) 100%),
    linear-gradient(to bottom, rgba(var(--warm), .34), rgba(var(--warm), .16) 70%, rgba(var(--warm), .1));
}
/* 바닥의 넓은 번짐과 빛 웅덩이 */
.stage__spill {
  position: absolute; left: calc(var(--cx) - var(--rx) * 1.9); width: calc(var(--rx) * 3.8);
  top: calc(var(--cy) - var(--ry) * 2); height: calc(var(--ry) * 4);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--warm), .2), rgba(var(--warm), 0));
  filter: blur(20px);
}
.stage__pool {
  position: absolute; left: calc(var(--cx) - var(--rx)); width: calc(var(--rx) * 2);
  top: calc(var(--cy) - var(--ry)); height: calc(var(--ry) * 2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(252, 244, 206, .96) 0%, rgba(var(--warm), .82) 45%, rgba(170, 150, 72, .42) 78%, rgba(150, 130, 60, 0) 100%);
  filter: blur(3px);
}
/* 받침 그림자: 진한 접지 그림자 + 오른쪽 아래로 길게 */
.stage__shadow {
  position: absolute;
  left: calc(var(--cx) - var(--bw) * 0.78); width: calc(var(--bw) * 1.75);
  top: calc(var(--cy) - var(--bw) * 0.1); height: calc(var(--bw) * 0.38);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .9) 55%, rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, 0) 100%);
  filter: blur(1.5px);
}
.stage__shadow::after {
  content: ""; position: absolute; left: 30%; right: -55%; top: 35%; bottom: -35%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, 0));
  filter: blur(5px);
}

/* 마이크: 누르면 입장. 위에서 받는 조명에 맞춰 따뜻하게 물들이고 아래로 갈수록 어둡게 */
.stage__mic {
  position: absolute; left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh);
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: filter .15s ease-out, transform .15s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.stage__mic-in { position: absolute; inset: 0; display: block; }
.stage__mic img {
  display: block; width: 100%; height: 100%; user-select: none; pointer-events: none;
  filter: sepia(.55) saturate(.8) brightness(.86) contrast(.98) blur(.7px);
}
.stage__mic-light {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(to bottom,
    rgba(255, 238, 180, .55) 0%, rgba(255, 238, 180, .18) 14%, rgba(0, 0, 0, 0) 26%,
    rgba(12, 10, 4, .35) 55%, rgba(12, 10, 4, .3) 88%, rgba(255, 236, 170, .35) 97%);
  mix-blend-mode: soft-light;
}
.stage__mic:hover, .stage__mic:focus-visible { filter: brightness(1.15) drop-shadow(0 0 12px rgba(var(--warm), .5)); outline: none; }
.stage__mic:active { transform: translateY(2px); }

/* 먼지: 작은 점, 저마다 다른 방향과 속도 */
.stage__dust i {
  position: absolute; width: var(--s); height: var(--s);
  left: calc(var(--cx) + var(--x) * var(--rx));
  top: calc(var(--cy) * var(--y));
  background: rgb(255, 246, 214);
  opacity: 0;
  animation: dust var(--d) ease-in-out var(--l) infinite;
}
@keyframes dust {
  0% { transform: translate(0, 0); opacity: 0; }
  25%, 70% { opacity: var(--o); }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* 켜질 때 두어 번 깜빡임 */
#intro.is-on .stage__light, #intro.is-on .stage__dust { animation: light-on .55s steps(1) both; }
#intro.is-on .stage__mic-in { animation: mic-on .55s steps(1) both; }
@keyframes light-on {
  0% { opacity: 0; } 45% { opacity: 1; } 55% { opacity: 0; } 70% { opacity: .6; } 78% { opacity: 0; } 88%, 100% { opacity: 1; }
}
@keyframes mic-on {
  0% { filter: brightness(.18); } 45% { filter: none; } 55% { filter: brightness(.18); } 70% { filter: brightness(.6); } 78% { filter: brightness(.18); } 88%, 100% { filter: none; }
}

/* 입장: 빛기둥이 가늘어지고 웅덩이가 한 점으로 모이며 꺼짐 → 까만 화면 */
#intro.is-off .stage__cone { transform-origin: 50% 0; animation: cone-out .6s cubic-bezier(.5, 0, .9, .4) forwards; }
#intro.is-off .stage__pool, #intro.is-off .stage__spill { animation: pool-out .6s cubic-bezier(.5, 0, .9, .4) forwards; }
#intro.is-off .stage__floor, #intro.is-off .stage__shadow, #intro.is-off .stage__dust { animation: fade-out .5s ease-in forwards; }
#intro.is-off .stage__mic-in { animation: mic-out .6s ease-in forwards; }
#intro.is-off .stage__mic { pointer-events: none; filter: none; }
@keyframes cone-out { 60% { opacity: 1; } to { transform: scaleX(.02); opacity: 0; } }
@keyframes pool-out { 70% { opacity: 1; } to { transform: scale(0); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes mic-out { to { filter: brightness(0); opacity: 0; } }

#desktop.is-booting { animation: desk-in .35s ease-out both; }
@keyframes desk-in { from { opacity: 0; } to { opacity: 1; } }
#desktop.is-booting .dicon { animation: icon-in .16s steps(3) both; animation-delay: calc(var(--i) * 30ms); }
#desktop.is-booting .dock { animation: dock-rise .2s steps(4) both .1s; }
@keyframes icon-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes dock-rise { from { transform: translateY(110%); } }

/* ---------- 누를 때 효과 ---------- */
.fx-sq {
  position: fixed; z-index: 3000; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #111; box-shadow: 0 0 0 1px #fff; pointer-events: none;
  animation: fx-sq .24s ease-out forwards;
}
@keyframes fx-sq { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.5); opacity: 0; } }
.fx-press { animation: fx-press .12s steps(3); }
@keyframes fx-press { 0% { transform: none; } 35% { transform: translate(1px, 2px) scale(.95); } 100% { transform: none; } }
.fx-flash { animation: fx-flash .16s steps(2) 2; }
@keyframes fx-flash { 0%, 49% { background-color: #111; color: #fff; } 50%, 100% { background-color: transparent; } }
.fx-jump img { animation: fx-jump .18s steps(3); }
.fx-jump > span { animation: fx-flash .14s steps(2) 2; }
@keyframes fx-jump { 0% { transform: none; } 40% { transform: translateY(-8px) scale(1.15); } 100% { transform: none; } }
.fx-spot { animation: fx-spot .25s steps(4); }
@keyframes fx-spot { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.fx-ink { animation: fx-ink .18s steps(3); }
@keyframes fx-ink { 0% { box-shadow: inset 0 0 0 3px #111; } 100% { box-shadow: inset 0 0 0 0 #111; } }
.task-in { animation: task-in .12s steps(3); }
@keyframes task-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.task.is-leaving { animation: task-out .12s steps(3) forwards; }
@keyframes task-out { to { transform: translateY(100%); opacity: 0; } }
.toast-in { animation: toast-in .14s steps(3); }
@keyframes toast-in { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* 단추와 줄: 올리면 살짝 떠오름 */
.btn, .win__btn, .task, .dicon, .row, .tn, .chip, .trk, .recent__row, .cast__item, .menu__item, .pic {
  transition: transform .06s steps(2), background-color .06s steps(2), color .06s steps(2), border-color .06s steps(2);
}
.btn:hover:not(:disabled), .task:hover, .win__btn:hover { transform: translateY(-1px); }
.row:hover, .recent__row:hover, .cast__item:hover, .trk:hover { transform: translateX(3px); }
.dicon:hover img { transform: translateY(-2px); transition: transform .06s steps(2); }
.pic:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #111; }
.tn.is-on, .trk.is-on, .chip.is-on { animation: sel-in .14s steps(3); }
@keyframes sel-in { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }

/* ---------- 창 움직임 ---------- */
/* 창 닫기: 흰빛으로 덮였다가 가운데 한 줄로 접히고 사라짐 */
.win.is-closing { animation: win-close .28s ease-in forwards; pointer-events: none; box-shadow: none; }
.win.is-closing::after { animation: win-white-in .28s ease-out forwards; }
@keyframes win-close {
  0%, 35% { clip-path: inset(0 0 0 0); opacity: 1; }
  85% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); opacity: 1; }
  100% { clip-path: inset(calc(50% - 1px) 50% calc(50% - 1px) 50%); opacity: 0; }
}
@keyframes win-white-in { 0% { opacity: 0; } 35%, 100% { opacity: 1; } }
.win.is-sinking { animation: win-sink .3s ease-in forwards; pointer-events: none; }
.win.is-sinking.is-closing { animation: none; opacity: 0; }
@keyframes win-sink { to { transform: translateY(60px); opacity: 0; } }
.win.is-minimizing { animation: win-close .28s ease-in forwards; pointer-events: none; box-shadow: none; }
.win.is-minimizing::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #fff; pointer-events: none; animation: win-white-in .28s ease-out forwards; }
@keyframes win-min { to { transform: translate(var(--tx), var(--ty)) scale(.1); opacity: .2; } }
.win.is-tween { transition: left .14s steps(4), top .14s steps(4), width .14s steps(4), height .14s steps(4); }
.win__bar { transition: background-color .06s steps(2); }

/* 하나씩 나타나기 */
.row, .recent li, .gallery li, .chat > li, .cc, .menu__item {
  animation: item-in .14s steps(3) backwards;
  animation-delay: calc(var(--i, 0) * 18ms);
}
@keyframes item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg--l { animation-name: msg-l; } .msg--r { animation-name: msg-r; }
@keyframes msg-l { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes msg-r { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.lv--preview .chat > li, .lv--preview .pic img { animation: none; }
/* 그림은 옛 모니터처럼 위에서부터 한 줄씩 */
.pic img, .iv img, .cc__face img, .wr__img img { animation: scan-in .24s steps(8) both; }
@keyframes scan-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.menu:not([hidden]) { animation: menu-in .1s steps(4) both; }
@keyframes menu-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.dock__list:not([hidden]) { animation: menu-in-down .1s steps(4) both; }
@keyframes menu-in-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.cc__face.is-color img { animation: fx-spot .2s steps(4); }



/* ---------- 글쓰기 더하기 ---------- */
.wr kbd {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 2px;
  background: #fff; color: #111; border: 1px solid #000; font: 700 10.5px/14px var(--font-px); text-align: center;
}
.wr__tools .btn kbd { background: transparent; color: #bdbdbd; border-color: #6a6a6a; }
.wr__tog { display: inline-flex; align-items: center; gap: 5px; color: #e8e8e8; font-size: 12px; font-weight: 600; cursor: pointer; }
.wr__tog input { width: 14px; height: 14px; margin: 0; accent-color: #fff; }
.wr__help { padding: 8px 10px; background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 #000; font-size: 12.5px; line-height: 1.7; }
.wr__help p { margin: 0; }
.wr__help p + p { margin-top: 2px; }
.wr.is-solo .wr__split { grid-template-columns: minmax(0, 1fr); }
.wr.is-solo .wr__prev { display: none; }
.wr__count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.wr__state { text-align: right; padding-right: 6px; }

/* ---------- 스티커 ---------- */
#stickers { position: absolute; inset: 0 0 var(--tb) 0; z-index: 1; pointer-events: none; }
body.is-sticker-edit #stickers { z-index: 2; }
#desktop.is-drop { box-shadow: inset 0 0 0 3px #fff; }
.stk { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); pointer-events: none; }
body.is-sticker-edit .stk { pointer-events: auto; cursor: grab; touch-action: none; outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: 4px; }
body.is-sticker-edit .stk.is-sel { outline: 1px dashed #fff; }
body.is-sticker-edit .stk.is-grab { cursor: grabbing; }
.stk__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.stk.is-flip .stk__img { transform: scaleX(-1); }
.stk__h { display: none; position: absolute; width: 12px; height: 12px; background: #fff; border: 1px solid #000; touch-action: none; z-index: 2; }
.stk__h--nw { left: -8px; top: -8px; cursor: nwse-resize; }
.stk__h--ne { right: -8px; top: -8px; cursor: nesw-resize; }
.stk__h--sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.stk__h--se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.stk-guide { position: absolute; z-index: 5; pointer-events: none; background: var(--accent-hi); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.stk-guide--v { top: 0; bottom: 0; width: 1px; }
.stk-guide--h { left: 0; right: 0; height: 1px; }
.stk-pin { position: absolute; z-index: 6; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent-hi); border: 2px solid #111; pointer-events: none; }
.sk__px { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.sk__num { width: 58px; height: 24px; padding: 0 4px; text-align: right; }
.sk__snap { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.sk__snap input { margin: 0; accent-color: #111; }
.sk__snap small { color: var(--muted); font-weight: 500; }
body.is-sticker-edit .stk.is-sel .stk__h { display: block; }
.stk.stk-pop .stk__img { animation: stk-pop .25s ease-out; }
@keyframes stk-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }

.stk__anim { transform-origin: 50% 60%; }
.stk__anim[data-anim=breathe] { animation: stk-breathe calc(3.2s / var(--spd, 1)) ease-in-out infinite; }
.stk__anim[data-anim=float]   { animation: stk-float calc(3.6s / var(--spd, 1)) ease-in-out infinite; }
.stk__anim[data-anim=sway]    { animation: stk-sway calc(2.8s / var(--spd, 1)) ease-in-out infinite; transform-origin: 50% 95%; }
.stk__anim[data-anim=bounce]  { animation: stk-bounce calc(1.1s / var(--spd, 1)) ease-in-out infinite; transform-origin: 50% 100%; }
.stk__anim[data-anim=spin]    { animation: stk-spin calc(8s / var(--spd, 1)) linear infinite; transform-origin: 50% 50%; }
.stk__anim[data-anim=blink]   { animation: stk-blink calc(2s / var(--spd, 1)) ease-in-out infinite; }
.stk__anim[data-anim=jitter]  { animation: stk-jitter calc(.4s / var(--spd, 1)) steps(1) infinite; }
@keyframes stk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes stk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes stk-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes stk-bounce { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(.97, 1.03); } 55% { transform: translateY(0) scale(1.06, .94); } 70% { transform: translateY(0) scale(1); } }
@keyframes stk-spin { to { transform: rotate(360deg); } }
@keyframes stk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes stk-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }

/* 스티커 창 */
.sk { display: grid; gap: 10px; padding: 10px; }
.sk__add { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin: -10px -10px 0; background: var(--tool); border-bottom: 1px solid #000; }
.sk__hint { flex-basis: 100%; margin: 2px 0 0; color: #d8d8d8; font-size: 11.5px; line-height: 1.5; }
.sk__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.sk__list .empty { grid-column: 1 / -1; margin: 12px 0; }
.sk__item { aspect-ratio: 1; padding: 4px; background: #111; border: 1px solid #000; display: grid; place-items: center; }
.sk__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sk__item.is-on { background: #fff; box-shadow: inset 0 0 0 2px #111; }
.sk__edit { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid #111; }
.sk__row { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; }
.sk__row--top { grid-template-columns: 48px 1fr; align-items: start; }
.sk__row output { text-align: right; color: var(--muted); font-weight: 600; }
.sk__row .range::-webkit-slider-runnable-track { background: #fff; border-color: #111; }
.sk__row .range::-moz-range-track { background: #fff; border-color: #111; }
.sk__acts { display: flex; flex-wrap: wrap; gap: 4px; }
.sk__none { margin: 4px 0; color: var(--muted); font-size: 12px; }
.sk__foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid #111; }
.sk__note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }


/* ---------- 편지 ---------- */
.lt { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.lt__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; background: var(--tool); border-bottom: 1px solid #000; }
.lt__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.lt__bar .chip { background: var(--dark); color: #fff; border-color: #000; box-shadow: inset 0 0 0 1px #7a7a7a; }
.lt__bar .chip.is-on { background: #fff; color: #111; box-shadow: none; }
.lt__main { display: grid; grid-template-columns: 290px 1fr; min-height: 0; }
.lt__list { overflow: auto; border-right: 1px solid #000; background: #fff; }
.lt__item {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%;
  min-height: 52px; padding: 8px 10px; border: 0; border-bottom: 1px solid #d0d0d0; background: none; text-align: left;
}
.lt__item img { width: var(--i16); height: var(--i16); image-rendering: pixelated; }
.lt__item:hover { background: var(--paper-2); }
.lt__item.is-on { background: #111; color: #fff; }
.lt__item.is-on .lt__who { color: #fff; } .lt__item.is-on time { color: #bdbdbd; }
.lt__meta { display: grid; min-width: 0; }
.lt__who { color: var(--ink); font-size: 12px; font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lt__title { font: 500 14.5px/1.4 var(--font-read); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lt__item.is-new .lt__title { font-weight: 800; }
.lt__item.is-new .lt__title::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; background: var(--accent); vertical-align: 2px; }
.lt__item time { color: var(--muted); font-size: 11.5px; }
.lt__view { overflow: auto; padding: 22px; background: var(--paper-2); }
.lt__paper {
  max-width: 34em; margin: 0 auto; padding: 26px 30px 22px;
  background: #fff; border: 1px solid #000; box-shadow: 5px 5px 0 #000;
}
.lt__paper.is-opening { animation: paper-in .28s cubic-bezier(.2, .7, .3, 1); }
@keyframes paper-in { from { transform: translateY(24px); opacity: 0; clip-path: inset(0 0 70% 0); } to { transform: none; opacity: 1; clip-path: inset(0); } }
.lt__ref { display: block; width: 100%; margin: 0 0 14px; padding: 6px 8px; background: var(--paper-2); border: 1px dashed #111; text-align: left; font-size: 12px; font-weight: 600; }
.lt__ref:hover { background: #111; color: #fff; }
.lt__to { margin: 0; font-weight: 800; font-size: 15px; }
.lt__subject { margin: 4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid #111; font-size: 20px; font-weight: 800; line-height: 1.35; }
.lt__body { max-width: none; }
.lt__body p { margin: 0 0 1em; line-height: 1.9; }
.lt__fig { margin: 0 0 1em; display: flex; justify-content: center; }
.lt__from { margin: 18px 0 0; text-align: right; font-weight: 800; font-size: 15px; }
.lt__date { display: block; text-align: right; color: var(--muted); font-size: 12px; }
.lt__replies { max-width: 34em; margin: 18px auto 0; }
.lt__replies p { margin: 0 0 6px; font-size: 12px; font-weight: 800; }
.lt__replies .lt__ref { margin-bottom: 4px; background: #fff; }
.lt__acts { max-width: 34em; margin: 16px auto 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lt__note { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: 12px; }

/* 편지 쓰기 */
.lw { display: grid; grid-template-rows: auto auto 1fr auto auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
.lw__meta { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px 10px; background: var(--tool); border-bottom: 1px solid #000; }
.lw__title { grid-column: 1 / -1; }
.lw__paper {
  display: flex; flex-direction: column; min-height: 0; margin: 12px; padding: 18px 22px 14px;
  background: #fff; border: 1px solid #000; box-shadow: 4px 4px 0 #000;
}
.lw__re { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.lw__ta {
  flex: 1; min-height: 120px; margin: 8px 0; padding: 0; resize: none; border: 0; outline: none;
  background: transparent;
  font: 15.5px/1.9 var(--font-read); color: var(--ink);
}
.lw__ta:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.lw__ta.is-drop { background-color: #f0f0f0; }
.lw__imgs { padding: 0 12px; }
.lw .wr__foot { border-top: 1px solid #000; }
.lw .wr__state { flex: 1; }


/* ---------- 작은 얼굴 · 쓰는 사람 고르기 ---------- */
.ava--sm { width: 26px; height: 26px; font-size: 11px; }
.btn .ava--sm { width: 18px; height: 18px; font-size: 10px; border-color: #000; }
.lw__who { display: flex; gap: 4px; }
.lw__who .btn.is-on { background: #fff; color: #111; }
.lt__n { margin-left: 3px; opacity: .7; font-weight: 600; }

/* ---------- HTML 불러오기 ---------- */
.im { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.im__head { display: grid; gap: 8px; padding: 10px; background: var(--tool); border-bottom: 1px solid #000; color: #eee; }
.im__title .field { width: 100%; }
.im__accts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; }
.im__acct { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--dark); border: 1px solid #000; }
.im__acct img { width: 30px; height: 30px; object-fit: cover; border: 1px solid #000; }
.im__an { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.im__an b { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.im__an small { color: #bdbdbd; font-size: 11.5px; }
.im__acct .field { width: 104px; }
.im__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.im__opts input { accent-color: #fff; margin: 0 4px 0 0; vertical-align: -2px; }
.im__sp { flex: 1; }
.im__list { list-style: none; margin: 0; padding: 0; overflow: auto; background: #fff; }
.im__day { position: sticky; top: 0; z-index: 1; padding: 4px 10px; background: #111; color: #fff; font-size: 12px; font-weight: 700; }
.im__post { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #e0e0e0; cursor: pointer; font-size: 13px; }
.im__post:hover { background: var(--paper-2); }
.im__post b { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.im__txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-read); }
.im__img { padding: 0 5px; border: 1px solid #111; font-size: 11px; font-weight: 700; white-space: nowrap; }
.im__post time { color: var(--muted); font-size: 12px; }
.im__post:has(input:not(:checked)), .im__post.is-off { opacity: .35; }
.im__post input { width: 15px; height: 15px; margin: 0; accent-color: #111; }
.im__count { font-weight: 700; }

/* ---------- BGM 목록 더하기 ---------- */
.dock__more { display: grid; gap: 6px; }
.trk-row { display: flex; align-items: center; }
.trk-row .trk { flex: 1; min-width: 0; }
.trk__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.trk__yt { padding: 0 4px; border: 1px solid currentColor; font-size: 10px; font-weight: 800; opacity: .7; }
.trk__x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #8d8d8d; font-size: 12px; }
.trk__x:hover { color: #fff; }
.trk__edit { flex: 1; height: 28px; margin: 3px; }
.dock__add { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dock__add .field { min-width: 0; height: 26px; font-size: 12px; }
.dock__add .btn { width: 100%; }
.dock.is-drop { box-shadow: inset 0 0 0 3px #fff, 5px 5px 0 rgba(0,0,0,.55); }
.dock .btn--icon.is-on { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #111; }
.dock .btn--icon.is-dim { color: #8d8d8d; }
.dock [data-a=repeat] .g, .dock [data-a=shuffle] .g { width: 22px; height: auto; }
#ytWrap { position: fixed; left: 0; bottom: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; z-index: -1; overflow: hidden; }


/* ---------- 우클릭 메뉴 ---------- */
.ctx {
  position: fixed; z-index: 2500; min-width: 180px; padding: 3px;
  background: var(--frame); border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff, 4px 4px 0 rgba(0, 0, 0, .6);
  animation: menu-in .1s steps(3) both;
}
.ctx__item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 10px 0 6px;
  border: 0; background: var(--paper); text-align: left; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.ctx__item + .ctx__item { border-top: 1px solid var(--paper); }
.ctx__item img, .ctx__ic { flex: none; width: var(--i16); height: var(--i16); image-rendering: pixelated; }
.ctx__label { flex: 1; }
.ctx__arrow { font-size: 10px; }
.ctx__item:hover, .ctx__item:focus-visible { background: #111; color: #fff; outline: none; }
.ctx__item:hover img, .ctx__item:focus-visible img { filter: invert(1); }
.ctx__item.is-danger { color: #a3271b; }
.ctx__item.is-danger:hover, .ctx__item.is-danger:focus-visible { background: #a3271b; color: #fff; }
.ctx__item:disabled { color: #9a9a9a; }
.ctx__sep { height: 1px; margin: 3px 2px; background: #111; }
.ctx--sub { max-height: 60vh; overflow: auto; }
.menu__sep { height: 1px; margin: 2px 0; background: #111; }

/* 짧은 입력 창 · 확인 */
.pr { display: grid; gap: 10px; padding: 12px; }
.pr__in { width: 100%; }
textarea.pr__in { height: auto; padding: 6px 8px; resize: vertical; font: inherit; }
.pr__acts { display: flex; justify-content: flex-end; gap: 6px; }
.pr--confirm { padding-top: 22px; }

/* ---------- 배경화면 ---------- */
#wall {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #000 no-repeat center / cover;
}
#wall::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--dim, 0)); }
#wall[data-fit=contain], .wp__img[data-fit=contain] { background-size: contain; }
#wall[data-fit=center], .wp__img[data-fit=center] { background-size: auto; }
#wall[data-fit=tile], .wp__img[data-fit=tile] { background-repeat: repeat; background-size: auto; background-position: 0 0; }
.wp { display: grid; gap: 10px; padding: 12px; }
.wp__prev { aspect-ratio: 16 / 9; padding: 6px; background: var(--dark); border: 1px solid #000; }
.wp__img { position: relative; width: 100%; height: 100%; background: #000 no-repeat center / cover; border: 1px solid #000; }
.wp__img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--dim, 0)); }
.wp__img[data-fit=center], .wp__img[data-fit=tile] { background-size: 25%; }
.wp__size { margin: 0; font-size: 12px; font-weight: 700; }
.wp__btns { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- 캐릭터 고치기 ---------- */
.cc--edit { align-content: start; overflow: auto; }
.cc--edit .cc__face { cursor: pointer; }
.cc__fields { display: grid; gap: 4px; flex: 1; }
.cc__fields .field { width: 100%; }
.cc__fields .cc__nm { height: 32px; font-size: 18px; font-weight: 800; }
.cc__rows { display: grid; gap: 4px; }
.cc__row { display: grid; grid-template-columns: 7em 1fr 28px; gap: 4px; }
.cc__row .btn--icon { width: 28px; min-height: 26px; }
.cc__rows > .btn { justify-self: start; }
.cc__dsc { width: 100%; height: auto; min-height: 110px; padding: 6px 8px; resize: vertical; font: 14px/1.6 var(--font-read); }
.cc__acts { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- 스크린샷 ---------- */
.shot-flash { position: fixed; inset: 0; z-index: 4000; background: #fff; pointer-events: none; animation: shot .35s ease-out forwards; }
@keyframes shot { from { opacity: .85; } to { opacity: 0; } }
.is-shooting .win__grip { display: none; }


/* ---------- 기록: 보기 전환 · 태그 찾기 · 이미지 보기 ---------- */
.seg { display: flex; }
.seg .btn + .btn { margin-left: -1px; }
.xp__tools .btn.is-on, .seg .btn.is-on { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #111; }
.xp__tags { display: grid; gap: 6px; padding: 6px 8px 8px; background: var(--tool); }
.xp__tags .field { width: 220px; max-width: 100%; height: 24px; }
.xp__tags .chips { max-height: 92px; overflow: auto; }
.xp__tags .chip { background: var(--dark); color: #fff; box-shadow: inset 0 0 0 1px #7a7a7a; }
.xp__tags .chip.is-on { background: #fff; color: #111; box-shadow: none; }
.chip__n { opacity: .6; font-weight: 500; }
.xp__none { color: #bdbdbd; font-size: 12px; }
.xp__list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 12px; align-content: start; padding: 10px; }
.card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 0; border: 0; text-align: left; }
.card:hover { background: none; transform: translateY(-2px); }
.card__img { position: relative; display: block; width: 100%; height: 0; padding-top: 100%; flex: none; overflow: hidden; background: #111; border: 1px solid #000; box-shadow: 3px 3px 0 #000; }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__img .card__ic { inset: auto; left: 50%; top: 50%; width: var(--i32); height: var(--i32); transform: translate(-50%, -50%); object-fit: contain; image-rendering: pixelated; filter: invert(1); }
.card__img.is-gray img:not(.card__ic) { filter: grayscale(1) contrast(1.05); }
.card:hover .card__img.is-gray img:not(.card__ic) { filter: none; }
.card__t { font: 600 13.5px/1.35 var(--font-read); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card__d { color: var(--muted); font-size: 11.5px; }

/* ---------- 홈 소개 고치기 ---------- */
.home__form { display: grid; gap: 10px; padding: 16px 0; }
.home__form .wr__f > span { color: var(--muted); }
.home__form .field { width: 100%; }
.home__about { height: auto; min-height: 180px; padding: 8px 10px; resize: vertical; font: 15px/1.7 var(--font-read); }


/* ---------- 비밀번호 ---------- */
.wr__pw { display: flex; gap: 2px; }
.wr__pw .field { flex: 1; min-width: 0; }
.wr__pw .btn--icon { width: 26px; min-height: 26px; font-size: 11px; }
.wr__pw .btn--icon.is-on { background: #fff; color: #111; }
.lk { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 100%; padding: 30px 20px; text-align: center; }
.lk > img { width: var(--i32); height: var(--i32); image-rendering: pixelated; }
.lk .lv__title { font-size: 20px; }
.lk__form { display: flex; gap: 4px; }
.lk__form .field { width: 200px; }
.lk__err { min-height: 1.4em; margin: 0; color: #a3271b; font-size: 12px; font-weight: 700; }

/* ---------- 폴더 설정 ---------- */
.fs { display: grid; gap: 12px; padding: 14px; }
.fs__row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; }
.fs__row .field { width: 100%; }
.fs .seg .btn.is-on { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #111; }


/* ---------- 비밀번호 힌트 ---------- */
.wr__f--hint { grid-column: 1 / 3; }
.wr__f--pw { grid-column: 3 / 5; }
.lk__hint { margin: -4px 0 0; font-size: 14px; font-weight: 700; }

/* ---------- 로그 전체화면 · 읽기 ---------- */
.lv__foot { align-items: center; }
.lv__mid { display: flex; gap: 6px; }
.win__body.paper:focus { outline: none; }
.win:fullscreen { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; padding: 0; border: 0; box-shadow: none; }
.win:fullscreen .win__body { margin: 0; }
.win:fullscreen .lv { max-width: 760px; margin: 0 auto; padding: 40px 28px; }
.win:fullscreen .prose--read, .win:fullscreen .msg__bubble { font-size: 17px; }

/* ---------- 보는 사람 (온라인 저장소 + 로그인 안 함) ---------- */
body.is-viewer .edit-only { display: none !important; }

/* ---------- 휴대폰 ---------- */
.row, .pic, .tn, .lt__item, .cc, .card, .dicon, .stk, .trk { -webkit-touch-callout: none; }
@media (max-width: 720px) {
  .wr__f--hint, .wr__f--pw { grid-column: 1 / -1; }
  .iv__nav { width: 40px; height: 56px; }
  .lv__foot { flex-wrap: wrap; }
  .win__body { -webkit-overflow-scrolling: touch; }
  .ctx__item { height: 40px; }
  .dock__add { grid-template-columns: 1fr; }
  .cw { height: auto; }
}

.lg__me { margin: 4px 0; font-weight: 700; word-break: break-all; }


/* ---------- 무대 아래 입장 창 ---------- */
.gate {
  position: absolute; left: 50%; bottom: max(6vh, 28px); z-index: 3; width: min(320px, calc(100% - 40px));
  transform: translateX(-50%); padding: 3px;
  background: var(--frame); border: 1px solid #000; box-shadow: inset 0 0 0 1px #fff, 5px 5px 0 rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none;
}
/* 박수 아이콘: 은은하게 숨 쉬다가, 누르면 짝 하고 사라지며 그 자리에 창이 열림 */
.stage__clap {
  position: absolute; left: 50%; bottom: max(7vh, 34px); z-index: 3; display: grid; place-items: center;
  width: 64px; height: 64px; margin-left: -32px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0;
}
.stage__clap img { width: 46px; height: 46px; filter: brightness(.8); transition: filter .15s ease-out; user-select: none; }
.stage__clap:hover img, .stage__clap:focus-visible img { filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, .35)); }
.stage__clap:focus-visible { outline: 1px dashed rgba(255, 255, 255, .6); outline-offset: 4px; }
#intro.is-on .stage__clap { animation: clap-in .4s ease-out .6s forwards, clap-breathe 2.6s ease-in-out 1s infinite; }
@keyframes clap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes clap-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .75; transform: scale(.94); } }
#intro .stage__clap.is-clapped { animation: clap-go .28s ease-in forwards; pointer-events: none; }
@keyframes clap-go { 0% { opacity: 1; transform: scale(1); } 35% { transform: scale(.72, .86); } 100% { opacity: 0; transform: scale(1.25); } }
#intro.is-off .stage__clap { animation: fade-out .2s ease-in forwards; }
/* 입장 창: 가운데 흰 줄이 위아래로 벌어지며 창이 됨 */
.gate.is-open { opacity: 1; pointer-events: auto; animation: gate-open .22s cubic-bezier(.2, .7, .3, 1) both; }
.gate.is-open::after { content: ""; position: absolute; inset: 0; background: #fff; pointer-events: none; animation: win-white-out .38s ease-out forwards; }
@keyframes gate-open {
  0% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); box-shadow: none; }
  100% { clip-path: inset(0 -8px -8px 0); }
}
#intro.is-off .gate.is-open { animation: fade-out .25s ease-in forwards; }
.gate__bar { height: 20px; padding: 0 6px; background: #111; color: #fff; border: 1px solid #000; font: 700 11px/18px var(--font-mono); }
.gate__body { display: flex; gap: 3px; margin-top: 3px; }
.gate__in {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid #000; border-radius: 0;
  background: #fff; color: #111; font: 700 15px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.gate__in:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.gate__go { width: 40px; height: 32px; padding: 0; background: var(--dark); color: #fff; border: 1px solid #000; box-shadow: inset 0 0 0 1px #7a7a7a; font-size: 16px; font-weight: 700; }
.gate__go:hover { background: #000; }
.gate.is-wrong .gate__body { animation: gate-shake .32s steps(6); }
@keyframes gate-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.gate.is-wrong .gate__in { box-shadow: inset 0 0 0 2px #a3271b; }
.gate.is-call .gate__in { animation: gate-call .45s ease-out; }
@keyframes gate-call { 0% { box-shadow: inset 0 0 0 3px var(--accent-hi); } 100% { box-shadow: inset 0 0 0 0 var(--accent-hi); } }



/* ---------- 작업 표시줄: 뒤로 · 앞으로 · 되돌리기 · 다시 하기 ---------- */
.tb-nav { flex: none; display: flex; gap: 2px; }
.tb-btn {
  display: grid; place-items: center; width: 30px; height: 31px; padding: 0;
  background: var(--bar-off); color: #111; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff;
}
.tb-btn .g { width: 14px; height: auto; }
.tb-btn:hover:not(:disabled) { background: #fff; }
.tb-btn:active:not(:disabled) { background: #111; color: #fff; }
.tb-btn:disabled { color: #9a9a9a; cursor: default; }
@media (max-width: 720px) { .tb-btn { width: 28px; } }


/* ---------- 권한 표시 · 메신저만 보이기 ---------- */
body:not(.can-chat) .chat-only { display: none !important; }
.who { padding: 0 6px; margin-right: 8px; background: #111; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 20px; }
/* 새 대화 빨간 점 */
.dicon.has-new, .menu__item.has-new, .task.has-new { position: relative; }
.dicon.has-new::after { content: ""; position: absolute; top: 2px; right: 18px; width: 10px; height: 10px; border-radius: 50%; background: #e0261b; box-shadow: 0 0 0 2px #000; animation: dot-in .3s ease-out; }
.menu__item.has-new::after, .task.has-new::after { content: ""; position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e0261b; box-shadow: 0 0 0 1px #000; }
@keyframes dot-in { from { transform: scale(0); } 70% { transform: scale(1.3); } to { transform: scale(1); } }

/* ---------- 메신저 ---------- */
.ms { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100%; }
.ms__side { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-right: 1px solid #000; background: #fff; }
.ms__top { padding: 8px; background: var(--tool); border-bottom: 1px solid #000; }
.ms__top .btn { width: 100%; }
.ms__list { overflow: auto; }
.ms__room { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid #ddd; background: none; text-align: left; }
.ms__room:hover { background: var(--paper-2); }
.ms__room.is-on { background: #111; color: #fff; }
.ms__rt { font-weight: 800; font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms__rl { grid-column: 1 / -1; color: var(--muted); font: 12.5px/1.4 var(--font-read); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms__room.is-on .ms__rl { color: #bdbdbd; }
.ms__room time { grid-row: 1; grid-column: 2; color: var(--muted); font-size: 11px; }
.ms__room.has-new .ms__rt::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #e0261b; vertical-align: 2px; }
.ms__main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--paper-2); }
.ms__main[hidden] { display: none; }
.ms__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #000; }
.ms__back { display: none; width: 28px; height: 26px; padding: 0; background: var(--bar-off); border: 1px solid #000; }
.ms__back .g { width: 14px; margin: auto; }
.ms__title { margin: 0; font-size: 15px; font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms__log { list-style: none; margin: 0; padding: 14px; overflow: auto; }
.mm { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; margin-top: 10px; animation: item-in .14s steps(3) backwards; }
.mm--cont { margin-top: 3px; }
.mm--r { align-items: flex-end; margin-left: auto; }
.mm__who { margin-bottom: 3px; font-size: 12px; font-weight: 800; }
.mm__b { padding: 7px 11px; background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 #000; font: 14.5px/1.6 var(--font-read); word-break: keep-all; overflow-wrap: anywhere; }
.mm--r .mm__b { background: #111; color: #fff; box-shadow: 2px 2px 0 #8d8d8d; }
.mm .pic img { max-height: 220px; }
.mm__t { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.ms__send { display: flex; gap: 4px; align-items: flex-end; padding: 8px; background: var(--tool); border-top: 1px solid #000; }
.ms__as { display: flex; gap: 2px; }
.ms__as .btn.is-on { background: #fff; color: #111; }
.ms__in { flex: 1; min-width: 0; height: 32px; max-height: 120px; padding: 6px 8px; resize: none; font: 14px/1.4 var(--font-read); }
.ms__send .btn--icon { width: 32px; min-height: 32px; }
.ms__go { min-height: 32px; }
@media (max-width: 720px) {
  .ms { grid-template-columns: 1fr; }
  .ms.is-room .ms__side { display: none; }
  .ms:not(.is-room) .ms__main { display: none; }
  .ms__back { display: grid; }
  .ms__as .btn { padding: 2px 6px; }
}


/* ---------- 오래된 편지 ---------- */
.mosaic {
  display: inline-block; vertical-align: middle; width: calc(var(--n, 8) * 6px); height: 12px;
  background:
    conic-gradient(rgba(255, 255, 255, .25) 25%, transparent 0 50%, rgba(0, 0, 0, .12) 0 75%, transparent 0) 2px 0 / 12px 12px,
    conic-gradient(#8f8f8f 25%, #c9c9c9 0 50%, #a6a6a6 0 75%, #dadada 0) 0 0 / 8px 8px;
}
.lt__item.is-on .mosaic { filter: brightness(.6); }
.lt__item.is-old .lt__title { color: #555; }
.lt__item.is-old.is-on .lt__title { color: #ddd; }
.lt__paper--old { position: relative; background: #ececec url("../assets/paper-old.jpg") center / cover no-repeat; color: #3a3a3a; box-shadow: 5px 5px 0 #6b6b6b; }
.lt__paper--old .lt__subject { border-bottom-style: dashed; }
.lw__opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; color: #e8e8e8; font-size: 12px; font-weight: 600; }
.lw__opts input { accent-color: #fff; width: 14px; height: 14px; margin: 0 5px 0 0; vertical-align: -2px; }
.lw__opts small { color: #bdbdbd; font-weight: 500; }


/* ---------- 글 꾸미기 ---------- */
.rx-b { font-weight: 800; }
.rx-i { font-style: italic; padding-right: .08em; }
.rx-u { text-decoration: underline; text-underline-offset: 3px; }
.rx-s { text-decoration: line-through; }
.rx-size--sm { font-size: .85em; }
.rx-size--lg { font-size: 1.25em; }
.rx-size--xl { font-size: 1.6em; line-height: 1.35; }
.rx-font--serif { font-family: "Nanum Myeongjo", "Noto Serif KR", serif; }
.rx-font--pen { font-family: "Nanum Pen Script", cursive; font-size: 1.3em; }
.rx-font--round { font-family: "Gowun Dodum", var(--font-read); }
.rx-font--pixel { font-family: "Galmuri11", monospace; }
.rx-font--mono { font-family: "Nanum Gothic Coding", ui-monospace, monospace; }
/* 빛 */
.rx-glow { text-shadow: 0 0 6px rgba(214, 197, 121, .95), 0 0 14px rgba(214, 197, 121, .6); animation: rx-glow 2.4s ease-in-out infinite; }
@keyframes rx-glow { 50% { text-shadow: 0 0 3px rgba(214, 197, 121, .7), 0 0 8px rgba(214, 197, 121, .35); } }
/* 지직거림 */
.rx-noise { position: relative; display: inline-block; animation: rx-jit 2.6s steps(1) infinite; }
.rx-noise::before, .rx-noise::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; overflow: hidden; white-space: pre-wrap;
}
.rx-noise::before { text-shadow: 1.5px 0 rgba(0, 0, 0, .45); animation: rx-sl1 1.3s steps(2) infinite; }
.rx-noise::after { text-shadow: -1.5px 0 rgba(255, 255, 255, .8), 1px 0 rgba(120, 120, 120, .6); animation: rx-sl2 .9s steps(2) infinite; }
@keyframes rx-jit { 0%, 86%, 100% { transform: none; opacity: 1; } 88% { transform: translate(1px, -1px) skewX(-6deg); opacity: .8; } 92% { transform: translate(-1px, 1px); } 95% { transform: translate(1px, 0) skewX(4deg); opacity: .9; } }
@keyframes rx-sl1 { 0% { clip-path: inset(15% 0 62% 0); transform: translateX(-2px); } 50% { clip-path: inset(60% 0 12% 0); transform: translateX(2px); } }
@keyframes rx-sl2 { 0% { clip-path: inset(48% 0 30% 0); transform: translateX(2px); } 50% { clip-path: inset(5% 0 80% 0); transform: translateX(-1px); } }
/* 모자이크: 긁으면 보임 */
.rx-mosaic { position: relative; display: inline-block; padding: 0 2px; vertical-align: bottom; cursor: crosshair; }
.rx-mosaic:not(.is-ready):not(.is-open) { color: transparent; background: conic-gradient(#9a9a9a 25%, #c8c8c8 0 50%, #ababab 0 75%, #d4d4d4 0) 0 0 / 12px 12px; }
.rx-mosaic__cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; transition: opacity .3s ease-out; }
.rx-mosaic__cover.is-gone { opacity: 0; }
.rx-mosaic:focus-visible { outline-offset: 2px; }

/* 서식 줄 */
.rt { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px; background: var(--paper-2); border: 1px solid #000; }
.lw > .rt { margin: 8px 12px 0; }
.rt__b { min-width: 28px; height: 26px; padding: 0 7px; background: #fff; border: 1px solid #000; color: #111; font-size: 12.5px; }
.rt__b:hover { background: #111; color: #fff; }
.rt__b--bold { font-weight: 900; }
.rt__b--it { font-style: italic; font-family: Georgia, serif; }
.rt__b--un { text-decoration: underline; }
.rt__b--st { text-decoration: line-through; }
.rt__fx { font-weight: 700; }
.rt__fx .rx-glow { text-shadow: 0 0 4px rgba(179, 160, 67, .9), 0 0 8px rgba(179, 160, 67, .6); }
.rt__fx--mo { background: conic-gradient(#bdbdbd 25%, #e2e2e2 0 50%, #cdcdcd 0 75%, #f0f0f0 0) 0 0 / 8px 8px; }
.rt__sel { height: 26px; padding: 0 4px; font-size: 12px; }
.rt__sep { width: 1px; height: 18px; margin: 0 3px; background: #888; }
.rt__clr { font-size: 11.5px; }


/* ---------- 저장 중 ---------- */
.saving {
  position: fixed; right: 14px; bottom: calc(var(--tb) + 12px); z-index: 2100; display: flex; align-items: center; gap: 4px;
  padding: 7px 12px; background: #111; color: #fff; border: 1px solid #000; box-shadow: inset 0 0 0 1px #6a6a6a, 3px 3px 0 rgba(0,0,0,.5);
  font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.saving.is-on { opacity: 1; transform: none; }
.saving i { width: 5px; height: 5px; background: #fff; animation: saving 1s steps(1) infinite; }
.saving i:nth-child(2) { animation-delay: .2s; } .saving i:nth-child(3) { animation-delay: .4s; }
.saving span { margin-left: 4px; }
@keyframes saving { 0%, 60% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- 홈 EDIT: 큰 두상 + 이름 ---------- */
.cast { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.cast__item { flex-direction: column; align-items: center; gap: 8px; padding: 8px; text-align: center; }
.cast__face { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); border: 1px solid #000; box-shadow: 4px 4px 0 #000; }
.cast__face img { width: 100%; height: 100%; object-fit: cover; }
.cast__face .g { width: 58%; height: auto; color: #8d8d8d; margin-top: 16%; }
.cast__item strong { font-size: 14px; font-weight: 800; }
.cast__item:hover .cast__face { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.cc--edit .rt { margin-bottom: -6px; }

/* 자동 로그인 */
.gate__keep { display: flex; align-items: center; gap: 6px; margin-top: 3px; padding: 3px 4px 1px; font-size: 11.5px; font-weight: 700; color: #111; cursor: pointer; }
.gate__keep input { width: 13px; height: 13px; margin: 0; accent-color: #111; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}