:root{
  --navy:#1E3A5F; --navy2:#2F5680; --tint:#EAF0F6; --tint2:#F5F8FB;
  --gold:#B8862F; --goldt:#F8F0E0; --ink:#1B2A3A; --ink2:#5A6B7B; --ink3:#8A97A6; --line:#E2E7ED;
  --red:#B42318; --redt:#FDECEA; --amber:#946200; --ambert:#FFF6DB; --green:#1E7B4A; --greent:#E6F4EC;
  --bg:#F3F5F8;
  /* 상단 바 실측 높이 — app.js 가 매번 다시 잰다. 상단 바는 좁은 화면에서 줄바꿈해
     높아지므로 58px 로 굳히면 붙여 둔 열들이 그만큼 가려진다 */
  --topH:58px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Segoe UI","Noto Sans KR","Helvetica Neue",Arial,sans-serif}
button{font:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
.hidden{display:none!important}
input,select,textarea{font:inherit}

/* 상단 바 — 화면이 좁으면 줄바꿈한다. 고정 높이로 두면 창을 줄였을 때
   제목·선택기·버튼이 서로 짓눌리고 오른쪽 열이 화면 밖으로 밀려난다. */
.top{min-height:58px;background:var(--navy);color:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 16px;position:sticky;top:0;z-index:10}
.brand{display:flex;flex-direction:column;line-height:1.15;min-width:150px;flex:0 1 auto}
.brand b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:12px;color:#C9D6E6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1 0 0}
.btn{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;padding:7px 12px;border-radius:8px;font-weight:600;white-space:nowrap}
.btn:hover:not(:disabled){background:rgba(255,255,255,.1)}
.btn.primary{background:var(--gold);border-color:var(--gold)}
.btn.primary:hover:not(:disabled){background:#a57627}
.who{font-size:12.5px;color:#C9D6E6;background:rgba(255,255,255,.08);padding:4px 10px;border-radius:99px}
.badge-state{font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;letter-spacing:.2px}
.st-draft{background:#E7ECF2;color:#41546A}
.st-review{background:var(--ambert);color:var(--amber)}
.st-published{background:var(--greent);color:var(--green)}
.count{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:99px;background:var(--gold);color:#fff;font-size:12px;text-align:center}

/* 레이아웃 — 메뉴(이동) · 작업 영역(내용). 좁아지면 오른쪽 열을 본문 아래로 내린다 */
.shell{display:flex;min-height:calc(100% - 58px)}
/* 메뉴는 화면에 붙여 둔다. 그냥 flex 자식으로 두면 본문을 내릴 때 같이 올라가 버린다.
   align-self 를 flex-start 로 내리는 것이 핵심 — 기본값 stretch 면 메뉴가 shell 높이만큼
   늘어나 붙을 여유가 0 이 되고, position:sticky 를 써도 아무 일도 일어나지 않는다. */
.menu{width:186px;flex:none;background:#fff;border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--topH);align-self:flex-start;height:calc(100vh - var(--topH));overflow:auto;overscroll-behavior:contain}
.menu.mini{width:62px}
.mlabel{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--ink3);text-transform:uppercase;margin:6px 8px}
.menu.mini .mlabel{height:8px;overflow:hidden;text-indent:-999px}
.mi{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink2);padding:9px 10px;border-radius:9px;font-weight:600;text-align:left;width:100%}
.mi:hover{background:var(--tint2);color:var(--ink)}
.mi.on{background:var(--tint);color:var(--navy);box-shadow:inset 3px 0 0 var(--navy)}
.mi svg{flex:none}
.menu.mini .mi{justify-content:center;padding:9px 0}
.menu.mini .mi span{display:none}
.mi .mbadge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;border-radius:99px;padding:1px 7px;font-weight:700;font-style:normal}
.menu.mini .mi .mbadge{display:none}
.mfoot{margin-top:auto}
.collapse{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink3);border-radius:9px;padding:7px 10px;width:100%;font-size:12.5px;font-weight:700}

.work{flex:1;min-width:0;display:grid;grid-template-columns:270px minmax(0,1fr) 340px;gap:14px;padding:14px;align-content:start}
#workPage{grid-template-columns:minmax(0,1fr)}
.page{padding:20px 22px}
.ptitle{font-size:19px;margin:0 0 4px}
.psub{color:var(--ink2);font-size:13px;margin:0 0 18px}
@media (max-width:1180px){
  .work{grid-template-columns:240px minmax(0,1fr)}
  .right{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
}
@media (max-width:820px){
  .menu{width:62px}
  .menu .mi span,.menu .mlabel{display:none}
  .work{grid-template-columns:minmax(0,1fr);padding:10px}
  .side{position:static;max-height:none}
  .main{padding:14px}
}
.vsep{width:1px;height:24px;background:rgba(255,255,255,.22);margin:0 2px}

/* 해야 할 일 — 개요 맨 위 */
.todo{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.todo .th{font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--ink3);text-transform:uppercase;margin-bottom:8px}
.todo.ok p{margin:0;color:var(--green);font-weight:600}
.ti{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:7px 6px;border-radius:9px;text-align:left}
.ti:hover{background:var(--tint2)}
.ti i{font-style:normal;font-weight:800;color:#fff;background:var(--red);border-radius:99px;min-width:22px;text-align:center;padding:1px 7px;font-size:12px}
.ti span{flex:1;font-weight:600}
.ti em{font-style:normal;color:var(--navy2);font-size:12.5px;font-weight:700}

/* 발행 화면 요약 카드 */
.pubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}
.pubcard{border:1px solid var(--line);border-radius:12px;padding:14px}
.pubcard .ch{font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--ink3);text-transform:uppercase}
.pubcard b{display:block;font-size:24px;color:var(--navy);margin:6px 0 2px}
.pubcard span{font-size:12px;color:var(--ink3)}

.panel{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(27,42,58,.06),0 4px 14px rgba(27,42,58,.06)}
.side{padding:10px;align-self:start;position:sticky;top:calc(var(--topH) + 14px);max-height:calc(100vh - var(--topH) - 28px);overflow:auto}
.search input{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;outline:none}
.search input:focus{border-color:var(--navy2)}
.filters{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.filters button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:99px;font-size:11.5px;font-weight:700;padding:2px 8px}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.grp{font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--ink3);text-transform:uppercase;margin:12px 6px 4px}
.item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:9px;color:var(--ink)}
.item:hover{background:var(--tint2)}
.item.sel{background:var(--tint);box-shadow:inset 3px 0 0 var(--navy)}
.item .tx{min-width:0;flex:1}
.item .t1{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .t2{display:block;font-size:11.5px;color:var(--ink3)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.mod{background:var(--gold)} .dot.err{background:var(--red)}
.lock{font-size:11px;font-weight:700;color:var(--amber);background:var(--ambert);border-radius:5px;padding:1px 5px}

.main{padding:18px 20px;min-width:0}
.h1{font-size:20px;font-weight:800;color:var(--navy);margin:0}
.sub{color:var(--ink2);font-size:13px;margin-top:2px}
.headrow{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.lnk{border:1px solid var(--line);background:#fff;color:var(--ink2);padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600}
.lnk:hover:not(:disabled){border-color:var(--ink3);color:var(--ink)}
.locked{margin:14px 0 16px;background:var(--tint2);border:1px dashed #C9D2DC;border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 14px}
.locked .lk{font-size:11.5px;color:var(--ink3)}
.locked .lv{font-size:13px;font-weight:600;color:var(--ink2);font-family:Consolas,monospace;word-break:break-all}
.vis{display:flex;align-items:center;gap:10px;background:var(--goldt);border:1px solid #E6D5AC;border-radius:10px;padding:10px 12px;margin-bottom:16px;flex-wrap:wrap}
.vis .seg{display:flex;border:1px solid #D9C79B;border-radius:8px;overflow:hidden}
.vis .seg button{border:0;background:#fff;color:var(--ink2);font-size:12.5px;font-weight:700;padding:5px 12px}
.vis .seg button.on{background:var(--gold);color:#fff}
.vis .note{font-size:12px;color:#6B4A00}
.field{margin-bottom:20px}
.fhead{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.fname{font-size:15px;font-weight:800}
.tag{font-size:11.5px;font-weight:700;border-radius:99px;padding:1px 7px}
.tag.req{color:var(--red);background:var(--redt)}
.tag.opt{color:var(--ink3);background:var(--tint2)}
.tag.int{color:#6B4A00;background:var(--goldt)}
.langrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:8px}
.lname{padding-top:8px;font-size:13px;font-weight:700;color:var(--ink2)}
.lname small{display:block;font-weight:600;color:var(--gold);font-size:11px}
input.txt,textarea.txt{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--ink);background:#fff;outline:none;resize:vertical}
textarea.txt{min-height:64px}
.txt:focus{border-color:var(--navy2);box-shadow:0 0 0 3px rgba(47,86,128,.15)}
.txt.changed{border-color:var(--gold);background:#FFFCF5}
.txt:disabled{background:var(--tint2);color:var(--ink2)}
.meta{display:flex;gap:10px;align-items:center;margin-top:3px;font-size:11.5px;color:var(--ink3)}

.right{display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:calc(var(--topH) + 14px);max-height:calc(100vh - var(--topH) - 28px);overflow:auto}
.card{padding:13px 15px}
.ctitle{font-size:13px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ctitle .sp{flex:1}
.pl{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pl button{border:0;background:#fff;color:var(--ink2);font-size:11.5px;font-weight:700;padding:3px 8px}
.pl button.on{background:var(--navy);color:#fff}
.pv{border-radius:10px;overflow:hidden;background:#2B3A4A}
.pvpop{background:#141E29;color:#E8EEF4;border-radius:10px;margin:12px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pvhead{display:flex;align-items:center;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.pvbody{height:72px;display:flex;align-items:center;justify-content:center;color:#8FA3B8;font-size:12px;background:radial-gradient(circle at 50% 40%,#22344A,#141E29)}
.pvdesc{padding:9px 11px;font-size:12.5px;color:#C9D6E2;white-space:pre-wrap}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat div{background:var(--tint2);border-radius:9px;padding:8px 10px}
.stat b{display:block;font-size:18px;color:var(--navy);font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;color:var(--ink2)}
.checks{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto}
.checks li{display:flex;gap:8px;padding:6px 8px;border-radius:8px;font-size:12.5px;align-items:flex-start;cursor:pointer}
.checks li:hover{background:var(--tint2)}
.checks .b{width:17px;height:17px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;margin-top:1px}
.checks .e .b{background:var(--red)} .checks .warn .b{background:var(--amber)} .checks .info .b{background:var(--navy2)}
.ok{display:flex;gap:8px;align-items:center;color:var(--green);background:var(--greent);padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:700}

/* 로그인 */
.login{max-width:380px;margin:8vh auto;padding:28px 30px}
.login h2{margin:0 0 4px;color:var(--navy);font-size:20px}
.login p{color:var(--ink2);margin:0 0 18px;font-size:13px}
.login label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin:10px 0 4px}
.login input{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:9px 10px;outline:none}
.login input:focus{border-color:var(--navy2)}
.login button{width:100%;margin-top:16px;border:0;border-radius:9px;padding:10px;background:var(--navy);color:#fff;font-weight:700}
.err{margin-top:12px;background:var(--redt);color:var(--red);border-radius:8px;padding:8px 11px;font-size:12.5px}
.demo{margin-top:16px;font-size:12px;color:var(--ink3);background:var(--tint2);border-radius:8px;padding:9px 11px;line-height:1.6}

/* 모달 */
.modal{position:fixed;inset:0;background:rgba(20,30,41,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px}
.dlg{background:#fff;border-radius:14px;width:min(900px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.dlg header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.dlg header b{font-size:16px;color:var(--navy)}
.dlg .body{padding:14px 18px;overflow:auto}
.dlg footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;color:var(--ink3);font-weight:800;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
td.old{background:#FDF1F0;color:#7A271A;text-decoration:line-through;text-decoration-color:rgba(122,39,26,.4)}
td.new{background:#EDF7F1;color:#14532D}
code{background:var(--tint2);padding:1px 6px;border-radius:5px;font-size:12.5px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#141E29;color:#EAF0F6;padding:10px 16px;border-radius:10px;font-size:13px;z-index:80;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.bad{background:#7A271A}
@media (max-width:1180px){.app{grid-template-columns:230px minmax(0,1fr)}.right{grid-column:1/-1;position:static;max-height:none}}
@media (max-width:760px){.app{grid-template-columns:1fr}.side{position:static;max-height:none}.langrow{grid-template-columns:1fr}.lname{padding-top:0}.top{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}}

/* 문서(장면·유산목록) 선택기 — 유산이 늘어도 화면 구조는 그대로 둔다 */
.docsel {
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; cursor: pointer;
  /* 좁은 창에서 화살표만 남도록 짓눌리지 않게 바닥을 준다 */
  flex: 0 1 230px; min-width: 170px; max-width: 260px;
}
.docsel:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.docsel option { font-weight: 500; }

/* 유산 선택 화면의 카드 미리보기 */
.pvcard {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #1B2A41 0%, #24374F 100%); color: #F3EDE0;
  padding: 12px 13px;
}
.pvcard .pvhead { font-weight: 700; font-size: 14px; color: #F6E2A8; margin-bottom: 3px; }
.pvcard .pvbody { font-size: 11.5px; color: #C9D4E2; margin-bottom: 6px; }
.pvcard .pvdesc { font-size: 12.5px; line-height: 1.55; color: #E6E0D4; white-space: pre-wrap; }


/* 관람 화면으로 넘어가는 버튼 — 상단 바에 둔다.
   오른쪽 카드에만 두면 창이 좁을 때 화면 밖으로 밀려 '링크가 없다'가 된다. */
.btn.go{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border-color:rgba(255,255,255,.5)}
.btn.go:hover{background:rgba(255,255,255,.14)}
.btn.go .ic{font-size:13px}

/* ── 미디어 자산 (D-024) ─────────────────────────── */
.mwarn { border:1px solid var(--red); background:#fff5f5; border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:13px; color:var(--ink); }
.mwarn.soft { border-color:#e0b64a; background:#fffaf0; }
.mwarn ul { margin:6px 0 0; padding-left:18px; }
.mwarn li { margin:2px 0; }
.mwarn li span { color:var(--ink3); font-size:12px; margin-left:6px; }
.mwarn code { font-size:12px; }

.mbar { height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:6px; }
.mbar > div { height:100%; width:0; background:var(--navy); transition:width .12s linear; }
.mmsg { font-size:12px; color:var(--ink3); min-height:16px; margin-bottom:10px; }

.mkind { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.mkind:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.mhead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.mhead b { font-size:14px; color:var(--navy); }
.mhead > span { font-size:12px; color:var(--ink3); }
.mhead .msp { flex:1; }
.mhead .mext { font-size:11.5px; color:var(--ink3); white-space:nowrap; }

.mvar { margin-bottom:12px; }
.mvname { font-size:11.5px; font-weight:700; color:var(--ink2); letter-spacing:.02em; margin-bottom:6px; }
.mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; margin-bottom:8px; }
.mcard { position:relative; margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.mcard img { display:block; width:100%; height:86px; object-fit:cover; background:var(--line); }
.mcard .mico { display:flex; align-items:center; justify-content:center; height:86px; font-size:26px; color:var(--ink3); background:var(--bg); }
.mcard figcaption { padding:6px 8px 8px; display:flex; flex-direction:column; gap:2px; }
.mcard figcaption b { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcard figcaption span { font-size:11px; color:var(--ink3); }
.mused.on { color:var(--green); font-weight:700; }
.mused.off { color:var(--ink3); }
.mdel { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:6px; border:0; cursor:pointer;
        background:rgba(20,26,34,.62); color:#fff; font-size:12px; line-height:1; opacity:0; transition:opacity .12s; }
.mcard:hover .mdel, .mcard:focus-within .mdel { opacity:1; }
.mdel:hover { background:var(--red); }
.mempty { font-size:12px; color:var(--ink3); margin:0 0 8px; }
.mup { display:inline-block; font-size:12.5px; font-weight:700; color:var(--navy); border:1px dashed var(--navy);
       border-radius:7px; padding:6px 12px; cursor:pointer; background:#fff; }
.mup:hover { background:var(--bg); }
.muse { margin:8px 0 12px; padding-left:18px; font-size:12.5px; color:var(--ink2); max-height:220px; overflow:auto; }
.btn.go.stale { opacity:.72; border-style:dashed; }

/* 좌표 편집 (D-024) */
.field.geo .naxes { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; }
.nax { display:flex; flex-direction:column; gap:3px; }
.nax > span { font-size:11.5px; font-weight:700; color:var(--ink2); }
.txt.num { font-variant-numeric:tabular-nums; }
.lnk.pick { color:var(--navy); font-weight:700; }

/* 개요 (D-024) */
.ovsum { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px; margin-bottom:16px; }
.ovsum > div { border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--tint2); }
.ovsum b { display:block; font-size:19px; color:var(--navy); line-height:1.15; }
.ovsum span { font-size:11.5px; color:var(--ink3); }
.ovsum .warn { border-color:var(--amber); background:var(--ambert); }
.ovsum .warn b { color:var(--amber); font-size:15px; }
.ovt td, .ovt th { vertical-align:top; }
.ovt tr.cur { background:var(--tint2); }
.dim { color:var(--ink3); font-size:11.5px; }
.bad { color:var(--red); font-weight:700; font-size:11.5px; }
.ovh { font-size:14px; color:var(--navy); margin:18px 0 8px; }
.ovlog { list-style:none; margin:0; padding:0; }
.ovlog li { display:flex; gap:10px; align-items:baseline; padding:5px 0; border-top:1px solid var(--line); font-size:12.5px; }
.ovlog li code { font-size:11.5px; color:var(--navy); min-width:118px; }

/* 목록 행 — 항목 조작 */
.itemw{position:relative;display:flex;align-items:center}
.itemw .item{flex:1;min-width:0}
.rowdots{border:0;background:transparent;color:var(--ink3);font-size:16px;line-height:1;padding:4px 7px;border-radius:7px;flex:none}
.itemw:hover .rowdots{background:var(--tint2);color:var(--ink)}
.rowmenu{position:absolute;right:4px;top:calc(100% - 4px);z-index:20;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 24px rgba(27,42,58,.14);padding:4px;min-width:130px;display:flex;flex-direction:column}
.rowmenu.wide{min-width:150px;right:auto;left:0}
.rowmenu button{border:0;background:transparent;text-align:left;padding:7px 10px;border-radius:7px;font-size:13px;color:var(--ink)}
.rowmenu button:hover{background:var(--tint2)}
.rowmenu button.danger{color:var(--red)}
.rowmenu button.danger:hover{background:var(--redt)}
.grp{display:flex;align-items:center;gap:6px}
.grp.sub{margin-left:2px;text-transform:none;color:var(--ink2)}
.addbtn{margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:7px;
  width:22px;height:22px;line-height:1;font-size:15px;font-weight:700;padding:0;position:relative}
.addbtn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.lempty{padding:6px 10px;font-size:12.5px;color:var(--ink3)}

/* 관심지점의 유형 · 자료 */
.srcrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:end;
  background:var(--tint2);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin-bottom:6px}
.srcrow .sf .lk{font-size:11.5px;font-weight:700;color:var(--ink3);margin-bottom:5px}
.srcrow .sf .lv{font-weight:600}
.srcrow .sf .lv.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.srcrow .sf .lv.miss{color:var(--red)}
.srcrow select.txt{min-width:150px}
.pickrow{display:flex;align-items:center;gap:12px}
@media (max-width:900px){ .srcrow{grid-template-columns:1fr} }

/* 자료 고르기 */
.pkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pkcell{border:1px solid var(--line);background:#fff;border-radius:10px;padding:0;overflow:hidden;text-align:left}
.pkcell:hover{border-color:var(--navy2);box-shadow:0 2px 10px rgba(27,42,58,.1)}
.pkcell img{width:100%;height:84px;object-fit:cover;display:block}
.pkcell .mico{height:84px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--ink3);background:var(--tint2)}
.pkcell span{display:block;padding:7px 9px}
.pkcell b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkcell em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.vact{white-space:nowrap}
.vact .lnk + .lnk{margin-left:10px}

/* 탭 · 권한표 · 설정표 */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:99px;padding:5px 13px;font-size:12.5px;font-weight:700}
.tabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.txt.slim{padding:4px 8px;font-size:12.5px}
.tag.on{margin-left:6px;background:var(--greent);color:var(--green);font-size:11px;font-weight:700;border-radius:99px;padding:1px 7px}
.scrollx{overflow-x:auto}
table.matrix th{white-space:nowrap}
table.matrix td.mx{text-align:center}
table.matrix .yes{color:var(--green);font-size:15px}
table.matrix .no{color:var(--ink3)}
table.kv th{width:190px;text-align:left;vertical-align:top;background:var(--tint2);font-weight:700;color:var(--ink2)}
table.kv td{vertical-align:top}
.hint{margin-top:14px;font-size:12.5px;color:var(--ink3);background:var(--tint2);border-radius:10px;padding:10px 12px}
.ovh{font-size:14px;color:var(--navy);margin:22px 0 10px}

/* 미디어 — 출처 구분 · 검색 · 도구 */
.mtop{display:flex;align-items:center;gap:10px;margin:4px 0 16px}
.mtop #mq{max-width:280px}
.mtop .msp{flex:1}
.mtop .mtot{font-size:12.5px;color:var(--ink3);font-weight:600}
.msrc{margin-bottom:26px}
.msrch{border-left:3px solid var(--navy);padding:2px 0 2px 10px;margin-bottom:12px}
.msrch b{display:block;font-size:14px}
.msrch span{font-size:12px;color:var(--ink3)}
.mtools{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.mcard:hover .mtools{opacity:1}
.mtools button{border:0;background:rgba(27,42,58,.78);color:#fff;border-radius:7px;width:24px;height:24px;
  line-height:1;font-size:12px;padding:0;backdrop-filter:blur(2px)}
.mtools button:hover{background:var(--navy)}
.mtools button.danger:hover{background:var(--red)}

/* 기록 — 필터 줄 · 페이지 */
.fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fbar .grow{flex:1;min-width:150px;max-width:260px}
.fbar .msp{flex:1}
.fbar .dim{color:var(--ink3)}
.btn.go.dark{background:var(--navy);border-color:var(--navy);color:#fff;text-decoration:none}
.btn.go.dark:hover{background:var(--navy2)}
.pager{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:12.5px;color:var(--ink3)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
tr.emg{background:var(--goldt)}
td code{cursor:pointer}

/* 로그인 — 신원 제공자 */
.btn.oauth{display:block;text-align:center;background:var(--navy);border-color:var(--navy);color:#fff;
  text-decoration:none;padding:11px 12px;font-size:14.5px;border-radius:10px}
.btn.oauth:hover{background:var(--navy2)}
.btn.oauth.off{background:var(--tint);border-color:var(--line);color:var(--ink3);cursor:not-allowed}
.ordiv{display:flex;align-items:center;gap:10px;margin:16px 0 4px;color:var(--ink3);font-size:12px}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
.emgnote{margin-top:10px;font-size:12px;color:#6B4A00;background:var(--goldt);border-radius:9px;padding:8px 10px}
.tag.emg{margin-left:6px;background:var(--goldt);color:var(--amber);font-size:11px;font-weight:700;border-radius:99px;padding:1px 7px}
.lnk.sm{font-size:11.5px;margin-left:8px}