:root {
  --bg: #f7f2ea; --panel: #fffdf9; --ink: #2b2118; --soft: #7a6a5b; --line: #e6dccd; --wood: #8a5a33; --wood-d: #6b4325;
  --draft: #fff3c4; --draft-b: #e9c75a; --live: #e3efff; --live-b: #7aa7e0; --stale: #fde3df; --stale-b: #e08a7a; --empty: #f1ece4;
  --ok: #2f7d4f; --err: #b23a2a; --warn: #a66b00; --prod: #c23b2b;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Hiragino Sans", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 12px; }
button:hover { border-color: var(--wood); }
button.primary { background: var(--wood); border-color: var(--wood-d); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--wood-d); }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: default; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: #3a2a1d; color: #f6ead8; }
.brand { font-size: 15px; white-space: nowrap; } .brand b { color: #ffd27a; margin-left: 4px; }
.tabs { display: flex; gap: 4px; }
.tabs button { background: transparent; border: 0; color: #e8d8c0; padding: 6px 12px; border-radius: 8px; }
.tabs button.on { background: #5a412c; color: #fff; font-weight: 600; }
.channels { display: flex; gap: 0; margin-left: auto; border: 1px solid #6b5038; border-radius: 10px; overflow: hidden; }
.channels button { border: 0; border-radius: 0; background: transparent; color: #e8d8c0; padding: 4px 12px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.channels button small { font-size: 10px; opacity: .75; }
.channels button.on { background: #ffd27a; color: #3a2a1d; font-weight: 700; }
.channels button.on[data-ch="prod"] { background: var(--prod); color: #fff; }
.me { font-size: 12px; opacity: .85; white-space: nowrap; }

.lock { margin: 60px auto; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; text-align: center; }
.lock h2 { margin: 0 0 8px; }

main { padding: 14px 18px 90px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.toolbar input[type=search] { flex: 1 1 280px; min-width: 200px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.toolbar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chips button { padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.count { color: var(--soft); font-size: 13px; }
.baseinfo { color: var(--soft); font-size: 12px; margin: 0 0 8px; }

.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th { position: sticky; top: 0; background: #f0e7da; text-align: left; font-weight: 600; font-size: 12px; color: var(--soft); padding: 7px 10px; border-bottom: 1px solid var(--line); z-index: 1; }
td { padding: 7px 10px; border-bottom: 1px solid #f0e8dc; vertical-align: top; font-size: 13px; }
table.loc { table-layout: fixed; min-width: 1100px; }
table.loc th.k, table.loc td.k { width: 190px; }
table.loc td { cursor: pointer; }
table.loc tr:hover td { background: #fbf6ee; }
table.loc tr.sel td { background: #f5ead9; }
td.k { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; color: var(--wood-d); word-break: break-all; }
td .t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
td.draft { background: var(--draft); box-shadow: inset 3px 0 0 var(--draft-b); }
td.live { background: var(--live); box-shadow: inset 3px 0 0 var(--live-b); }
td.stale { background: var(--stale); box-shadow: inset 3px 0 0 var(--stale-b); }
td.empty .t { color: #b9ab98; font-style: italic; }
.pager { display: flex; gap: 6px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.pager button.on { background: var(--ink); color: #fff; }

.editor { position: fixed; top: 58px; right: 0; bottom: 0; width: min(560px, 100%); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(60, 40, 20, .12); z-index: 6; display: flex; flex-direction: column; }
.edhead { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.edkey { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--wood-d); word-break: break-all; }
.edsub { color: var(--soft); font-size: 12px; }
.edbtns { display: flex; gap: 4px; align-items: flex-start; }
.edbody { overflow: auto; padding: 8px 16px 24px; }
.lang { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.lang h4 { margin: 0 0 6px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--empty); color: var(--soft); font-weight: 600; }
.badge.draft { background: var(--draft); color: #7a5b00; } .badge.live { background: var(--live); color: #2c5c99; } .badge.stale { background: var(--stale); color: var(--err); }
.basetext { white-space: pre-wrap; background: #f6f1e9; border-radius: 8px; padding: 6px 8px; color: var(--soft); font-size: 13px; margin-bottom: 6px; }
.basetext::before { content: "앱 문장  "; font-size: 11px; font-weight: 700; color: #b0a08c; }
.lang textarea { width: 100%; min-height: 64px; resize: vertical; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lang textarea:focus { outline: 2px solid #e9c75a; border-color: transparent; }
.langfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; gap: 8px; }
.msgs { font-size: 12px; } .msgs .e { color: var(--err); } .msgs .w { color: var(--warn); }
.len { color: var(--soft); font-size: 11px; white-space: nowrap; }
.mini { padding: 2px 8px; font-size: 12px; }

.draftbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; background: #fff7df; border-top: 2px solid var(--draft-b); }
.draftbar.prod { background: #fde9e6; border-top-color: var(--prod); }
.dinfo { font-size: 13px; } .dinfo b { font-size: 14px; }
.dbtns { display: flex; gap: 8px; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, 94vw); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(40, 25, 10, .45); }
dialog form { padding: 18px 20px; }
dialog h3 { margin: 0 0 10px; }
.dlgbody { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.diff { display: grid; grid-template-columns: 170px 1fr; gap: 4px 10px; padding: 8px 10px; border-bottom: 1px solid #f0e8dc; font-size: 13px; }
.diff .dk { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--wood-d); word-break: break-all; }
.diff del { color: #a0866d; text-decoration: line-through; white-space: pre-wrap; }
.diff ins { color: var(--ok); text-decoration: none; white-space: pre-wrap; }
.note, .confirm { display: block; margin-top: 12px; font-size: 13px; }
.note input, .confirm input { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.confirm { color: var(--prod); }
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.cfg { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
.groups { list-style: none; margin: 0; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; align-self: start; position: sticky; top: 72px; }
.groups li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; }
.groups li.on { background: var(--ink); color: #fff; }
.groups li .n { font-size: 11px; background: var(--draft); color: #7a5b00; border-radius: 999px; padding: 0 7px; }
table.cfgt td { vertical-align: middle; }
table.cfgt td.name b { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--wood-d); }
table.cfgt td.name .doc { color: var(--soft); font-size: 12px; }
table.cfgt tr.hdr td { background: #f6efe3; font-weight: 700; font-size: 12px; color: var(--wood-d); }
table.cfgt td.val { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; max-width: 220px; }
table.cfgt td.val.fgt::after { content: " FGT"; font-size: 10px; color: var(--soft); }
table.cfgt input, table.cfgt select { width: 100%; min-width: 120px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
table.cfgt tr.draft td { background: var(--draft); }
table.cfgt tr.live td.cur { background: var(--live); }
table.cfgt tr.bad input { border-color: var(--err); background: #fff3f1; }
.type { font-size: 11px; color: var(--soft); white-space: nowrap; }

.logs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.logcol { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.logcol h3 { margin: 0 0 8px; font-size: 15px; } .logcol h3 span { font-size: 12px; color: var(--soft); font-weight: 400; }
.promote { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 8px 0; border-bottom: 1px solid #f0e8dc; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.hist li .when { color: var(--soft); font-size: 12px; }
.hist li .what { flex: 1; }
.audit li { display: block; }

.toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); background: #2b2118; color: #fff; padding: 9px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; max-width: 90vw; }
.toast.show { opacity: 1; } .toast.err { background: var(--err); }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 8px; padding: 8px 12px; } .channels { margin-left: 0; } .me { display: none; }
  main { padding: 10px 12px 100px; }
  .cfg { grid-template-columns: 1fr; } .groups { position: static; display: flex; flex-wrap: wrap; }
  .editor { top: 0; }
}