:root {
  --bg: #f3f2ee; --panel: #ffffff; --panel2: #f7f6f2; --fg: #1b1d20; --mut: #63676d; --line: #dcd9d1;
  --acc: #2c6e8f; --acc-weak: #d9e8ef; --agent: #8a8f96; --good: #2f7d4f; --mid: #a87412; --bad: #b2392f;
  --viewer: #e6e4de; --grid1: #b9b6ae; --grid2: #d2cfc8;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a; --panel: #1d2024; --panel2: #23272c; --fg: #e6e4df; --mut: #9da2a9; --line: #33383e;
    --acc: #5fb2d6; --acc-weak: #1e3540; --agent: #7d838b; --good: #5cbf83; --mid: #e0a83a; --bad: #e46a5e;
    --viewer: #22262b; --grid1: #4a5058; --grid2: #30353b; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171a; --panel: #1d2024; --panel2: #23272c; --fg: #e6e4df; --mut: #9da2a9; --line: #33383e;
  --acc: #5fb2d6; --acc-weak: #1e3540; --agent: #7d838b; --good: #5cbf83; --mid: #e0a83a; --bad: #e46a5e;
  --viewer: #22262b; --grid1: #4a5058; --grid2: #30353b; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.55 var(--sans); }
a { color: var(--acc); }
main { max-width: 1280px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 80px; display: grid; gap: 20px; }
h1 { font-size: 22px; margin: 0; text-wrap: balance; }
h2 { font-size: 17px; margin: 0; text-wrap: balance; }
h3 { font-size: 15px; margin: 0; }
.mut { color: var(--mut); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
button, .btn {
  font: inherit; font-size: 13px; color: var(--fg); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; line-height: 1.3; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
button:hover, .btn:hover { border-color: var(--acc); }
button.on { background: var(--acc); border-color: var(--acc); color: #fff; }
button.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
button.v-good.on { background: var(--good); border-color: var(--good); }
button.v-mid.on { background: var(--mid); border-color: var(--mid); }
button.v-bad.on { background: var(--bad); border-color: var(--bad); }
textarea, input[type=text] {
  font: inherit; font-size: 14px; color: var(--fg); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; width: 100%;
}
textarea { min-height: 38px; resize: vertical; }
.topbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.note { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--agent); border-radius: 8px; padding: 10px 14px; white-space: pre-wrap; min-width: 0; }
.note.user { border-left-color: var(--acc); }
.section { display: grid; gap: 12px; }
.section > header { display: grid; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* 클립 카드 */
.clip { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; outline: none; min-width: 0; }
.clip:focus-within, .clip:focus { border-color: var(--acc); }
.clip-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.clip-head h3 { font-family: var(--mono); font-size: 14px; word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--mut); }
.viewer { position: relative; width: 100%; aspect-ratio: 16 / 8; max-height: 62vh; background: var(--viewer); border-radius: 8px; overflow: hidden; }
.viewer canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.viewer .overlay { position: absolute; left: 10px; top: 8px; font: 12px var(--mono); color: var(--mut); pointer-events: none; }
.viewer .views { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.viewer .views button { font-size: 12px; padding: 2px 7px; opacity: .9; }
.viewer .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); font-size: 13px; }
.transport { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.transport .fr { font-family: var(--mono); font-size: 13px; min-width: 150px; }
.tl { position: relative; height: 46px; user-select: none; touch-action: none; cursor: pointer; }
.tl-track { position: absolute; left: 0; right: 0; top: 18px; height: 14px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); }
.tl-ticks { position: absolute; inset: 0; opacity: .55; }
.tl-head { position: absolute; top: 12px; width: 2px; height: 26px; background: var(--fg); transform: translateX(-1px); pointer-events: none; }
.tl-mark { position: absolute; transform: translateX(-50%); font-size: 11px; white-space: nowrap; }
.tl-mark.agent { top: 0; color: var(--agent); }
.tl-mark.agent::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 18px; background: var(--agent); }
.tl-mark.user { top: 33px; color: var(--acc); font-weight: 600; }
.tl-mark.user::before { content: ""; position: absolute; left: 50%; top: -16px; width: 9px; height: 9px; background: var(--acc); transform: translate(-50%, 0) rotate(45deg); }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kf-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kf { display: inline-flex; gap: 6px; align-items: center; background: var(--acc-weak); border: 1px solid var(--acc); border-radius: 6px; padding: 2px 4px 2px 8px; font-size: 13px; }
.kf b { font-family: var(--mono); font-weight: 600; }
.kf button { padding: 0 6px; border: 0; background: transparent; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 720px) { .two { grid-template-columns: minmax(0, 1fr); } .viewer { aspect-ratio: 4 / 3; } }

/* 이미지 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fig { background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; cursor: pointer; position: relative; min-width: 0; }
.fig img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--viewer); border-radius: 6px; }
.fig.picked { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-weak); }
.fig.picked::after { content: "선택"; position: absolute; top: 12px; left: 12px; background: var(--acc); color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 999px; }
.fig .cap { font-size: 13px; word-break: break-all; }
.fig .zoom { position: absolute; top: 12px; right: 12px; font-size: 12px; padding: 1px 6px; }

/* 홈 */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 820px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.blist { display: grid; gap: 8px; align-content: start; }
.bcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: grid; gap: 2px; text-decoration: none; color: var(--fg); }
.bcard:hover { border-color: var(--acc); }
.bcard .t { font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); margin-right: 6px; }

.toast { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 6px 12px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .92; }
.banner { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--acc); color: #fff; padding: 8px 14px; border-radius: 8px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.banner button { background: #fff; color: #000; border: 0; }
.dock { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
button.on kbd, button.primary kbd { background: transparent; color: inherit; border-color: currentColor; }
kbd { font: 11px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--panel2); }
.fig.ref { border-style: dashed; }
.fig.ref::after { content: "원본"; position: absolute; top: 12px; left: 12px; background: var(--agent); color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 999px; }
@media (max-width: 600px) { #dockInfo { display: none; } .dock { justify-content: flex-end; } }

/* 저장된 포즈 줄 */
.pose-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pose-list:empty { display: none; }
.pose-chip { padding: 3px 8px 3px 3px; text-align: left; gap: 6px; }
.pose-chip img { width: 54px; height: 40px; object-fit: cover; border-radius: 4px; background: var(--viewer); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }

/* 포즈 수정기 */
.pe { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: grid; grid-template-rows: auto auto 1fr;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); outline: none; }
.pe-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.pe-title b { font-family: var(--mono); font-size: 14px; }
.pe-dirty { color: var(--mid); }
.pe-confirm { display: flex; gap: 8px; align-items: center; padding: 8px 16px; background: var(--acc-weak); border-bottom: 1px solid var(--acc); }
.pe-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.pe-view { position: relative; min-height: 0; background: var(--viewer); }
.pe-view canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.pe-hud { position: absolute; left: 12px; top: 10px; color: var(--mut); pointer-events: none; }
.pe-views { position: absolute; right: 10px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.pe-views button { font-size: 12px; padding: 2px 7px; }
.pe-tools { position: absolute; left: 10px; bottom: 34px; }
.pe-tip { position: absolute; left: 12px; bottom: 10px; right: 12px; }
.pe-side { overflow-y: auto; border-left: 1px solid var(--line); background: var(--panel); padding: 10px 14px 40px; display: grid; gap: 16px; align-content: start; }
.pe-side section { display: grid; gap: 6px; }
.pe-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pe-group > span { width: 52px; }
.pe-group button { font-size: 12px; padding: 3px 7px; }
.pe-group button.edited:not(.on) { border-color: var(--mid); color: var(--mid); }
.pe-sl { display: grid; grid-template-columns: 18px minmax(0, 1fr) 64px; gap: 6px; align-items: center; font: 12px var(--mono); }
.pe-sl input[type=number] { font: 12px var(--mono); padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); color: var(--fg); width: 100%; }
.pe-hist { display: grid; gap: 2px; max-height: 180px; overflow-y: auto; }
.pe-h { justify-content: flex-start; font-size: 12px; padding: 2px 6px; border-color: transparent; background: transparent; }
.pe-h.on { background: var(--acc-weak); border-color: var(--acc); color: var(--fg); }
.pe-h.future { opacity: .5; }
.pe-versions { display: grid; gap: 4px; }
.pe-v { justify-content: flex-start; text-align: left; gap: 8px; padding: 4px; }
.pe-v.on { border-color: var(--acc); background: var(--acc-weak); color: var(--fg); }
.pe-v img, .pe-noimg { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--viewer); flex: none; display: inline-block; }
.pe-rq { padding: 4px 0; border-bottom: 1px solid var(--line); }
.pe-reply { margin-top: 3px; padding-left: 10px; color: var(--fg); }
@media (max-width: 860px) {
  .pe-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 55vh minmax(0, 1fr); }
  .pe-side { border-left: 0; border-top: 1px solid var(--line); }
  .pe-tip { display: none; }
}
.pe-wr { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 3px 0; }
.pe-wr button { font-size: 12px; padding: 1px 6px; }
.pe-wr .warn { color: var(--mid); font-weight: 600; } .pe-wr .bad { color: var(--bad); font-weight: 700; }
.cols.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cols.cols3 { grid-template-columns: minmax(0, 1fr); } }
/* 떠 있는 메뉴 */
.nav { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 40; display: grid; justify-items: end; gap: 6px; }
.nav-toggle { box-shadow: 0 2px 10px rgba(0,0,0,.15); background: var(--panel); }
.nav-panel { width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 70px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.nav-home { font-weight: 600; text-decoration: none; padding: 4px 6px; }
.nav-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin-top: 8px; padding: 0 6px; }
.nav-sub { font-size: 12px; color: var(--mut); padding: 2px 6px 0; }
.nav-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; width: 100%; border-color: transparent; background: transparent; text-decoration: none; color: var(--fg); padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.nav-item:hover { background: var(--panel2); border-color: var(--line); }
.nav-item.on { background: var(--acc-weak); }
.nav-pose { flex-direction: row; align-items: center; gap: 8px; }
.nav-pose img { width: 54px; height: 40px; object-fit: cover; border-radius: 4px; background: var(--viewer); flex: none; }
.nav-cur { background: var(--acc-weak); border: 1px solid var(--acc); border-radius: 8px; padding: 6px 8px; font-size: 13px; display: grid; gap: 4px; justify-items: start; }
.topbar { padding-right: 110px; }
.pe-bar { padding-right: 120px; }
.pe-draftbar { display: flex; gap: 8px; align-items: center; padding: 8px 16px; background: var(--acc-weak); border-bottom: 1px solid var(--acc); flex-wrap: wrap; }
.nav-item.nav-row { flex-direction: row; justify-content: space-between; gap: 8px; }
.pe-wr .ok { color: var(--good); font-weight: 600; }
.pe-jt { padding: 1px 0; } .pe-jt .ok{color:var(--good);font-weight:600} .pe-jt .warn{color:var(--mid);font-weight:600} .pe-jt .bad{color:var(--bad);font-weight:700}
.pe-wrist .bad{color:var(--bad);font-weight:700} .pe-wrist .warn{color:var(--mid);font-weight:600} .pe-wrist .ok{color:var(--good);font-weight:600}
button.linkish { border: 0; background: transparent; padding: 0; color: var(--fg); text-decoration: underline dotted; font-size: 13px; }