:root {
    --bg:#F4F6F2; --surface:#FBFCFA; --surface-2:#EDF1EA;
    --ink:#1E241F; --muted:#5C6560; --faint:#8A9188;
    --line:#E0E5DC; --line-strong:#CBD2C6;
    --accent:#2E5D45; --accent-soft:#E4EEE7; --on-accent:#F7FAF6;
    --g-d:#2E5D45; --g-d-soft:#E4EEE7;
    --g-h:#3E4C63; --g-h-soft:#E7EAF0;
    --g-l:#8A4B3B; --g-l-soft:#F1E6E2;
    --g-w:#6E6327; --g-w-soft:#EEEBDC;
    --warn:#B4762A; --danger:#A23B2E;
    --shadow:0 1px 2px rgba(30,36,31,.05), 0 8px 24px -12px rgba(30,36,31,.18);
    --radius:10px;
    --maxw:1180px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#131714; --surface:#1A1F1B; --surface-2:#222922;
      --ink:#E9ECE4; --muted:#A2ABA1; --faint:#79837A;
      --line:#2B322C; --line-strong:#3A423B;
      --accent:#77B394; --accent-soft:#1E2C24; --on-accent:#0E1410;
      --g-d:#77B394; --g-d-soft:#1E2C24;
      --g-h:#8FA0BE; --g-h-soft:#1E2430;
      --g-l:#C98B78; --g-l-soft:#2E211C;
      --g-w:#BBAA63; --g-w-soft:#282413;
      --warn:#D69B54; --danger:#D97A6C;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"] {
    --bg:#131714; --surface:#1A1F1B; --surface-2:#222922;
    --ink:#E9ECE4; --muted:#A2ABA1; --faint:#79837A;
    --line:#2B322C; --line-strong:#3A423B;
    --accent:#77B394; --accent-soft:#1E2C24; --on-accent:#0E1410;
    --g-d:#77B394; --g-d-soft:#1E2C24;
    --g-h:#8FA0BE; --g-h-soft:#1E2430;
    --g-l:#C98B78; --g-l-soft:#2E211C;
    --g-w:#BBAA63; --g-w-soft:#282413;
    --warn:#D69B54; --danger:#D97A6C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body {
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"IBM Plex Sans KR", system-ui, sans-serif;
    font-weight:400; line-height:1.5; font-size:15px;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3 { font-family:"Gowun Batang", serif; font-weight:700; text-wrap:balance; margin:0; }
  button { font-family:inherit; cursor:pointer; }
  input,select,textarea { font-family:inherit; font-size:14px; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
  .mono { font-family:"IBM Plex Mono", monospace; }

  /* ---- shell ---- */
  .wrap { max-width:var(--maxw); margin:0 auto; padding-inline:20px; }
  header.top {
    position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
  }
  .top-inner { display:flex; align-items:center; gap:16px; padding-block:14px; }
  .brand { display:flex; align-items:baseline; gap:5px; margin-right:auto; min-width:0; }
  .brand .seal {
    font-family:"Gowun Batang", serif; font-weight:700; color:var(--on-accent);
    background:var(--accent); width:30px; height:30px; border-radius:7px;
    display:grid; place-items:center; font-size:16px; flex:none; align-self:center;
  }
  .brand h1 { font-size:19px; letter-spacing:.01em; }
  .brand .sub { font-size:11.5px; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; }
  .views { display:flex; gap:2px; background:var(--surface-2); padding:3px; border-radius:9px; }
  .views button {
    border:0; background:transparent; color:var(--muted); font-size:13px; font-weight:500;
    padding:7px 13px; border-radius:7px; white-space:nowrap;
  }
  .views button[aria-selected="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
  .icon-btn {
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    width:38px; height:38px; border-radius:9px; display:grid; place-items:center; flex:none;
  }
  .btn-primary {
    border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
    font-weight:600; font-size:14px; padding:9px 16px; border-radius:9px; white-space:nowrap;
  }
  .btn-ghost {
    border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
    font-weight:500; font-size:13.5px; padding:8px 14px; border-radius:9px;
  }

  main { padding-block:26px 64px; }
  .layout { display:grid; grid-template-columns:236px 1fr; gap:28px; align-items:start; }

  /* ---- filter rail ---- */
  .rail { position:sticky; top:78px; display:flex; flex-direction:column; gap:20px; }
  .search { position:relative; }
  .search input {
    width:100%; padding:10px 12px 10px 34px; border:1px solid var(--line); border-radius:9px;
    background:var(--surface); color:var(--ink);
  }
  .search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); }
  .rail-group h3 { font-family:"IBM Plex Sans KR",sans-serif; font-size:11.5px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
  .chips { display:flex; flex-wrap:wrap; gap:6px; }
  .chip {
    border:1px solid var(--line); background:var(--surface); color:var(--muted);
    font-size:12.5px; padding:5px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
  }
  .chip .dot { width:8px; height:8px; border-radius:50%; flex:none; }
  .chip[aria-pressed="true"] { color:var(--ink); border-color:var(--line-strong); background:var(--surface-2); font-weight:500; }
  .facet-axis { margin-bottom:12px; }
  .facet-axis > .axis-label { font-size:12px; color:var(--ink); font-weight:600; margin-bottom:7px; display:block; }
  .clearall { align-self:flex-start; background:none; border:0; color:var(--accent); font-size:12.5px; font-weight:500; padding:2px 0; }

  /* ---- content ---- */
  .content-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .content-head .count { color:var(--muted); font-size:13.5px; }
  .content-head .count b { color:var(--ink); font-variant-numeric:tabular-nums; }

  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(216px,1fr)); gap:16px; }
  .shelf-head {
    display:flex; align-items:baseline; gap:9px;
    margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line-strong);
  }
  .shelf-head:first-child { margin-top:4px; }
  .shelf-head .mono { font-size:12px; color:var(--muted); }
  .shelf-head .shelf-name { font-family:"Gowun Batang",serif; font-size:17px; font-weight:600; }
  .shelf-head .shelf-n { margin-left:auto; font-size:12px; color:var(--faint); }
  .card {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; text-align:left; padding:0; display:flex; flex-direction:column;
    transition:border-color .15s, transform .15s, box-shadow .15s; color:inherit;
  }
  .card:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow); }
  .cover { aspect-ratio:5/7; position:relative; display:flex; flex-direction:column; justify-content:space-between;
    padding:14px; border-bottom:1px solid var(--line); }
  .cover .spine { position:absolute; left:0; top:0; bottom:0; width:5px; }
  .cover .code { font-size:11px; font-weight:500; letter-spacing:.08em; align-self:flex-start;
    padding:3px 7px; border-radius:5px; }
  .cover .ct { font-family:"Gowun Batang",serif; font-size:17px; line-height:1.32; font-weight:700; }
  .cover .ca { font-size:12px; color:var(--muted); margin-top:4px; }
  .card .meta { padding:11px 13px 13px; display:flex; flex-direction:column; gap:8px; }
  .tagline { display:flex; flex-wrap:wrap; gap:4px; }
  .tag { font-size:11px; color:var(--muted); background:var(--surface-2); padding:3px 7px; border-radius:5px; white-space:nowrap; }
  .tag.gaze { color:var(--accent); background:var(--accent-soft); }
  .note-x { font-size:12.5px; color:var(--muted); line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .badge-ex { position:absolute; right:10px; top:10px; font-size:10px; letter-spacing:.1em; color:var(--faint);
    border:1px solid var(--line-strong); padding:2px 6px; border-radius:20px; background:var(--surface); }

  /* ---- collections ---- */
  .coll { display:flex; flex-direction:column; gap:32px; }
  .coll-block .coll-head { display:flex; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1.5px solid var(--ink); margin-bottom:16px; }
  .coll-block .coll-head h2 { font-size:22px; }
  .coll-block .coll-head .logic { font-size:12px; color:var(--faint); font-family:"IBM Plex Mono",monospace; margin-left:auto; }
  .coll-block .coll-head .n { font-size:13px; color:var(--muted); }
  .empty { color:var(--faint); font-size:13.5px; padding:8px 0; }

  /* ---- distribution ---- */
  .dist { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
  .dist p.lead { color:var(--muted); font-size:13.5px; margin:0 0 20px; max-width:64ch; line-height:1.55; }
  .distgroup { margin-bottom:22px; }
  .distgroup .gl { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .distgroup .gl .dot { width:10px; height:10px; border-radius:3px; }
  .distgroup .gl h3 { font-family:"IBM Plex Sans KR",sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em; }
  .bar-row { display:grid; grid-template-columns:160px 1fr 40px; align-items:center; gap:12px; padding:4px 0; }
  .bar-row .bl { font-size:13px; color:var(--ink); display:flex; align-items:center; gap:7px; }
  .bar-row .bl .mono { font-size:11px; color:var(--faint); }
  .track { height:12px; background:var(--surface-2); border-radius:20px; overflow:hidden; }
  .track > span { display:block; height:100%; border-radius:20px; }
  .bar-row .bv { text-align:right; font-size:13px; font-variant-numeric:tabular-nums; color:var(--muted); }
  .bar-row.dead .bl { color:var(--faint); }
  .flag { font-size:10.5px; padding:1px 6px; border-radius:20px; margin-left:2px; }
  .flag.dead { color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 40%, transparent); }
  .flag.dense { color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 40%, transparent); }

  /* ---- modal ---- */
  .scrim { position:fixed; inset:0; background:rgba(15,20,16,.5); backdrop-filter:blur(2px);
    display:flex; justify-content:flex-end; z-index:40; }
  .panel { width:min(520px,100%); height:100%; background:var(--bg); overflow-y:auto; box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);
    display:flex; flex-direction:column; }
  .panel-head { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:12px; padding:16px 22px; z-index:2; }
  .panel-head h2 { font-size:19px; margin-right:auto; }
  .panel-body { padding:22px; display:flex; flex-direction:column; gap:18px; }
  .panel-foot { position:sticky; bottom:0; background:var(--bg); border-top:1px solid var(--line);
    padding:14px 22px; display:flex; gap:10px; justify-content:flex-end; }

  .field { display:flex; flex-direction:column; gap:6px; }
  .field > label { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
  .field input[type=text], .field textarea, .field select {
    width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
    background:var(--surface); color:var(--ink);
  }
  .field textarea { resize:vertical; min-height:70px; line-height:1.5; }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .isbn-row { display:flex; gap:8px; }
  .isbn-row input { flex:1; }
  .pick { display:flex; flex-wrap:wrap; gap:6px; }
  .pick button {
    border:1px solid var(--line); background:var(--surface); color:var(--muted);
    font-size:12.5px; padding:6px 11px; border-radius:20px;
  }
  .pick button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); font-weight:500; }
  .axis-mini { font-size:11px; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; margin:2px 0 6px; }

  /* detail view */
  .detail .dcover { aspect-ratio:auto; min-height:150px; border-radius:var(--radius); position:relative; padding:22px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
  .detail .dcover .spine { position:absolute; left:0; top:0; bottom:0; width:7px; }
  .detail h2.dt { font-size:26px; line-height:1.3; }
  .detail .da { color:var(--muted); font-size:14px; margin-top:6px; }
  .kv { display:grid; grid-template-columns:88px 1fr; gap:8px 14px; font-size:13.5px; }
  .kv dt { color:var(--faint); }
  .kv dd { margin:0; color:var(--ink); }
  .sect-label { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
  .note-full { font-family:"Gowun Batang",serif; font-size:15.5px; line-height:1.7; color:var(--ink); }

  /* camera */
  .cam { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000; position:relative; }
  .cam video { width:100%; display:block; max-height:260px; object-fit:cover; }
  .cam .hint { position:absolute; left:0; right:0; bottom:0; padding:8px 12px; font-size:12px;
    color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.6)); }
  .cam-msg { font-size:12.5px; color:var(--muted); line-height:1.5; background:var(--surface-2);
    padding:10px 12px; border-radius:8px; }

  .hint-line { font-size:12px; color:var(--faint); line-height:1.5; }
  .photo-btn {
    width:100%; margin:2px 0 6px; padding:11px 14px;
    border:1px solid var(--line-strong); border-radius:10px;
    background:var(--accent-soft); color:var(--accent);
    font-size:14px; font-weight:600;
  }
  .photo-btn:disabled { opacity:.6; cursor:default; }

  @media (max-width:820px) {
    .layout { grid-template-columns:1fr; }
    .rail { position:static; }
    .brand .sub { display:none; }
    .bar-row { grid-template-columns:130px 1fr 34px; }
  }
  @media (max-width:520px) {
    .views button { padding:7px 9px; font-size:12px; }
    .brand h1 { font-size:17px; }
    .row2 { grid-template-columns:1fr; }
    .bar-row { grid-template-columns:110px 1fr 30px; gap:8px; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

  /* ================================================================
     실서비스 버전 추가 스타일
     ================================================================ */

  /* 헤더 우측 · 저장 모드 배지 · 정렬 */
  .head-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .mode-badge {
    font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:4px 10px;
    border-radius:20px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--muted); display:inline-flex; align-items:center; gap:6px;
  }
  .mode-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--line-strong); }
  .mode-badge.cloud { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); background:var(--accent-soft); }
  .mode-badge.cloud::before { background:var(--accent); }
  .mode-badge.local::before { background:var(--warn); }
  .sortwrap { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
  .sortwrap select {
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    padding:5px 8px; border-radius:8px; font-size:12.5px;
  }

  .layout.no-rail { grid-template-columns:1fr; }
  .rail[hidden] { display:none; }

  /* 안내 배너 */
  .banner {
    font-size:12.5px; line-height:1.55; color:var(--muted); background:var(--surface-2);
    border:1px solid var(--line); border-radius:9px; padding:10px 13px; margin-bottom:14px;
  }
  .banner.ok { color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
  .banner.warn { color:var(--warn); background:color-mix(in srgb,var(--warn) 10%, var(--surface)); border-color:color-mix(in srgb,var(--warn) 35%,transparent); }

  /* 표지 이미지 */
  .cover.has-art { padding:0; }
  .cover .cover-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .cover.has-art .code,
  .cover.has-art .cover-text { position:relative; z-index:2; }
  .cover.has-art .code { margin:14px 0 0 14px; }
  .cover.has-art .cover-text {
    padding:26px 14px 13px; background:linear-gradient(transparent, rgba(8,12,9,.86) 55%);
    color:#fff;
  }
  .cover.has-art .cover-text .ca { color:rgba(255,255,255,.82); }
  .cover.has-art .badge-ex { z-index:2; }

  .dcover-wrap { display:flex; justify-content:center; }
  .dcover-art { max-height:240px; border-radius:8px; box-shadow:var(--shadow); }

  /* 폼 — 자동완성 */
  .ac-wrap { position:relative; }
  .ac-wrap input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
    background:var(--surface); color:var(--ink); }
  .ac-list {
    position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; max-height:290px; overflow-y:auto;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow);
    padding:4px;
  }
  .ac-note { font-size:12.5px; color:var(--faint); padding:9px 10px; }
  .ac-item {
    display:flex; gap:10px; align-items:center; width:100%; text-align:left;
    border:0; background:transparent; padding:7px 8px; border-radius:7px; color:inherit;
  }
  .ac-item:hover, .ac-item:focus-visible { background:var(--surface-2); }
  .ac-item img { width:34px; height:48px; object-fit:cover; border-radius:3px; flex:none; background:var(--surface-2); }
  .ac-tx { min-width:0; }
  .ac-t { font-size:13.5px; font-weight:500; line-height:1.3; }
  .ac-s { font-size:11.5px; color:var(--faint); margin-top:2px; }

  .form-preview {
    display:flex; align-items:center; gap:12px; padding:10px 12px;
    background:var(--surface-2); border-radius:9px;
  }
  .form-preview img { width:42px; height:60px; object-fit:cover; border-radius:4px; }
  .form-preview .fp-info { font-size:12.5px; color:var(--muted); }

  .btn-ghost.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%, transparent); }

  /* 기록 뷰 */
  .logbox { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
  .logbox .lead { color:var(--muted); font-size:13.5px; margin:0 0 14px; max-width:70ch; line-height:1.55; }
  .logbox .btn-ghost { margin-bottom:16px; }
  .logtable { display:flex; flex-direction:column; border-top:1px solid var(--line); }
  .logrow {
    display:grid; grid-template-columns:132px 62px 1fr 92px; gap:12px; align-items:center;
    padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;
  }
  .loghead { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:6px 0; }
  .logrow .lt { font-size:12px; color:var(--muted); }
  .logrow .lt-sub { font-size:12px; color:var(--faint); }
  .logtitle { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lt-title { font-weight:500; }
  .logtag { font-size:11px; padding:2px 8px; border-radius:20px; border:1px solid var(--line-strong); color:var(--muted); }
  .logtag.create { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); background:var(--accent-soft); }
  .logtag.update { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); }
  .logtag.delete { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); }

  /* 토스트 */
  .toast {
    position:fixed; left:50%; bottom:26px; transform:translate(-50%, 16px);
    background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:500;
    padding:11px 18px; border-radius:24px; box-shadow:var(--shadow);
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:80;
    max-width:min(560px, calc(100vw - 32px)); text-align:center;
  }
  .toast.show { opacity:1; transform:translate(-50%, 0); }
  .toast.warn { background:var(--danger); color:#fff; }

  @media (max-width:820px) {
    .logrow { grid-template-columns:1fr; gap:3px; padding:12px 0; }
    .loghead { display:none; }
    .content-head { align-items:flex-start; }
  }

  /* display 지정 요소에서도 hidden 속성이 확실히 먹도록 */
  [hidden] { display:none !important; }

  .mode-badge.readonly { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent);
    background:color-mix(in srgb,var(--warn) 10%, var(--surface)); }
  .mode-badge.readonly::before { background:var(--warn); }

  /* ================================================================
     좁은 화면 — 헤더 2줄 배치 · 필터 접기
     ================================================================ */
  .filter-toggle { display:none; }

  @media (max-width:860px) {
    .top-inner { flex-wrap:wrap; gap:8px; row-gap:10px; }
    .brand { margin-right:auto; min-width:0; }
    .brand h1 { white-space:nowrap; font-size:17px; }
    .views {
      order:9; flex:1 0 100%; overflow-x:auto; scrollbar-width:none;
      justify-content:flex-start;
    }
    .views::-webkit-scrollbar { display:none; }
    .views button { flex:0 0 auto; }
    .btn-primary { padding:9px 13px; }
  }

  @media (max-width:820px) {
    .filter-toggle {
      display:inline-flex; align-items:center; gap:6px;
      border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
      font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:20px;
    }
    .filter-toggle[aria-expanded="true"] { background:var(--surface-2); }
    .rail > .rail-group, .rail > .clearall { display:none; }
    .rail.open > .rail-group { display:block; }
    .rail.open > .clearall { display:inline-block; }
    .rail { gap:14px; margin-bottom:4px; }
    .content-head { gap:10px; }
  }

  /* ================================================================
     색채 분류
     ================================================================ */
  .swatch { width:12px; height:12px; border-radius:3px; flex:none; display:inline-block;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
  .chip .swatch { width:11px; height:11px; }

  .axis-mini-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .mini-link { border:0; background:none; color:var(--accent); font-size:11.5px; font-weight:600; padding:0; }

  .pick .swatch-btn { display:inline-flex; align-items:center; gap:7px; }

  .tag.swatch-tag { display:inline-flex; align-items:center; gap:6px; }

  /* 분포 색채 섹션 */
  .dist + .dist { margin-top:20px; }
  .dist-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
  .dist-title { font-family:"Gowun Batang",serif; font-size:18px; }
  .btn-ghost.small, .btn-primary.sm, .btn-ghost.sm { font-size:12.5px; padding:6px 12px; }

  /* 색 관리 패널 */
  .color-manage { display:flex; flex-direction:column; gap:8px; }
  .cm-row { display:flex; align-items:center; gap:10px; }
  .cm-color { width:38px; height:34px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; }
  .cm-color:disabled { cursor:default; opacity:.7; }
  .cm-label { flex:1; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); }
  .cm-add { margin-top:6px; padding-top:14px; border-top:1px dashed var(--line-strong); }
  .icon-btn.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent); }
  .icon-btn.sm { width:34px; height:34px; }
  .btn-primary.sm { flex:none; }

/* ============================================================ *
 *  랩노트 (과정 기록) — 텍스트 피드
 * ============================================================ */
.views-div { width: 1px; align-self: stretch; background: var(--line-strong); margin: 5px 5px; }

.btn-primary.sm, .btn-ghost.sm { padding: 6px 12px; font-size: 13px; }
.icon-btn.sm { width: 32px; height: 32px; }

.labnote-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.ln-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ln-seg { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: 9px; }
.ln-seg-btn { border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.ln-seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.ln-toolbar .btn-primary.sm { margin-left: auto; }
.ln-lead { margin: 0; }

.ln-feed { display: flex; flex-direction: column; gap: 14px; }
.ln-entry { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }

.ln-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.ln-date { color: var(--faint); }
.ln-thread { color: var(--muted); }
.ln-thread .mono { color: var(--accent); font-size: 11px; }
.ln-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 20px; letter-spacing: .02em; }
.ln-disc { font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); padding: 2px 8px; border-radius: 20px; }
.ln-disc.conf { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

.ln-title { text-align: left; border: 0; background: none; padding: 0; font-family: "Gowun Batang", serif; font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.ln-title:hover { color: var(--accent); }
.ln-detail-title { font-size: 24px; line-height: 1.35; margin: 4px 0 6px; }

.ln-body { font-family: "Gowun Batang", serif; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.ln-body p { margin: 0 0 .7em; }
.ln-body h4 { font-family: "IBM Plex Sans KR", sans-serif; font-size: 13.5px; letter-spacing: .02em; margin: 1em 0 .4em; color: var(--ink); }
.ln-body ul { margin: 0 0 .7em; padding-left: 1.2em; }
.ln-body li { margin: .2em 0; }
.ln-body.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.ln-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ln-tags .tag.ai { color: var(--accent); background: var(--accent-soft); }

.ln-thread-group { display: flex; flex-direction: column; gap: 12px; }
.ln-thread-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.ln-thread-head h3 { font-size: 18px; }
.ln-thread-head .mono { color: var(--accent); font-size: 12px; }
.ln-thread-head .n { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.ln-outputs { display: flex; flex-direction: column; gap: 6px; }
.ln-output { font-size: 13px; color: var(--muted); text-decoration: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ln-output.outlink { color: var(--accent); }
.ln-output:hover { border-color: var(--line-strong); }

.ln-out-edit { display: flex; flex-direction: column; gap: 8px; }
.ln-out-row { display: grid; grid-template-columns: 110px 1fr 1fr auto; gap: 6px; align-items: center; }
.ln-out-row select, .ln-out-row input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.ln-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }

@media (max-width: 520px) {
  .ln-out-row { grid-template-columns: 1fr 1fr; }
  .views-div { display: none; }
}

/* 브랜드 타이틀은 고딕(산세리프) wordmark — 명조는 큐레이션 콘텐츠에 유지 */
.brand h1 {
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 브랜드 로고(SVG) */
.brand .seal-logo { width: 40px; height: 40px; flex: none; align-self: center; display: block; }

/* 사이트 푸터 — 카피라이트 */
.site-foot { border-top: 1px solid var(--line); margin-top: 44px; padding: 22px 0 36px; }
.foot-inner { display: flex; flex-direction: column; gap: 5px; }
.foot-copy { margin: 0; font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.foot-note { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.65; max-width: 660px; }

/* 읽기 전용(방문자) 복사·선택 방지 — 소유자(쓰기 모드)는 body.noselect 없음 */
body.noselect, body.noselect * {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;   /* iOS: 길게 누르기(이미지 저장·복사) 메뉴 차단 */
}
/* 입력창은 예외: 검색·설정 등 정상 사용 (붙여넣기 콜아웃 허용) */
body.noselect input, body.noselect textarea, body.noselect [contenteditable] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
/* 이미지 끌어다 저장 방지 */
body.noselect img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; pointer-events: none; }