:root {
  --red: #E30A17;
  --red-dark: #A3000B;
  --ink: #111;
  --muted: #666;
  --line: #e2e2e2;
  --bg: #f6f6f4;
  --card: #fff;
  --ok: #1d7a43;
  --warn: #b26a00;
  font-family: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-size: 14px; }
button, .button, input, select, textarea { font: inherit; }
button, .button {
  padding: 6px 12px; border: 1px solid #c8c8c8; background: #fff; color: var(--ink);
  border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4;
}
button:hover, .button:hover { border-color: #888; }
button.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--red-dark); }
button.ghost { border-color: transparent; background: none; color: var(--muted); }
code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.hint { color: var(--muted); font-size: 13px; }
.error { color: var(--red-dark); }
.none { color: #999; list-style: none; padding: 12px 0; }
[hidden] { display: none !important; }

/* 로그인 */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login { background: var(--card); padding: 32px; border-radius: 12px; width: min(360px, calc(100vw - 32px)); box-shadow: 0 4px 24px rgba(0, 0, 0, .08); display: grid; gap: 12px; }
.login h1 { margin: 0 0 8px; font-size: 20px; }
.login label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.login input { padding: 9px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; color: var(--ink); }
.login button { padding: 10px; font-size: 15px; }
.login-logo { height: 36px; justify-self: start; }

/* 상단 */
.appbar { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 3px solid var(--red); }
.appbar-inner { max-width: 1200px; margin: auto; height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); min-width: 0; text-decoration: none; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-divider { width: 1px; height: 24px; background: #d6d6d6; }
.brand-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.appbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.appbar-right a { color: var(--muted); font-size: 13px; }
.logout { font-size: 13px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.logout:hover { color: var(--ink); }

/* 사무실 화면 전환 탭(규모·법규검토 ↔ 블로그) */
.appnav { display: flex; gap: 4px; background: var(--bg); border-radius: 999px; padding: 4px; }
.appnav a { font-size: 13px; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 999px; white-space: nowrap; text-decoration: none; }
.appnav a:hover { color: var(--ink); }
.appnav a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.appnav:empty { display: none; }

/* 포털 첫 화면 */
.portal-page { display: grid; place-items: center; min-height: 100vh; }
.portal { width: min(680px, calc(100vw - 32px)); padding: 32px 0; }
.portal-head { text-align: center; display: grid; gap: 6px; justify-items: center; margin-bottom: 28px; }
.portal-logo { height: 44px; }
.portal h1 { margin: 8px 0 0; font-size: 24px; letter-spacing: -.02em; }
.portal-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal .tile {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red);
  border-radius: 12px; padding: 22px; display: grid; gap: 6px; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .15s, transform .15s;
}
.portal .tile:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .09); transform: translateY(-1px); }
.portal .tile strong { font-size: 17px; }
.portal .tile span { color: var(--muted); font-size: 13px; }
.portal-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .portal-tiles { grid-template-columns: 1fr; } }
.views { display: inline-flex; background: #e8e8e6; border-radius: 12px; padding: 3px; gap: 2px; margin: 16px 20px 0; max-width: calc(100vw - 40px); overflow-x: auto; }
.views button { border: none; background: transparent; padding: 8px 20px; border-radius: 9px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.views button:hover { background: rgba(255, 255, 255, .6); }
.views button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.count:not(:empty) { background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 2px; }
.spacer { flex: 1; }
#me { font-weight: 600; }

/* 초안 */
#drafts { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; padding: 16px 20px; align-items: start; }
#drafts > * { min-width: 0; }
.title, .head h1 { overflow-wrap: anywhere; }
.list { background: var(--card); border-radius: 10px; padding: 12px; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.filters button { padding: 3px 9px; font-size: 12px; border-radius: 12px; }
.filters button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#draftList { list-style: none; margin: 0; padding: 0; }
#draftList li[data-folder] { padding: 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
#draftList li[data-folder]:hover { background: #fafafa; }
#draftList li.on { border-color: var(--red); background: #fff7f7; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.date { color: #999; font-size: 12px; }
.req { color: var(--warn); font-size: 12px; font-weight: 600; }
.title { font-weight: 600; margin: 4px 0 2px; line-height: 1.4; }
.sub { color: var(--muted); font-size: 12px; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #eee; color: #444; white-space: nowrap; }
.badge.s-review, .badge.r-open { background: #fff1d6; color: var(--warn); }
.badge.s-approved, .badge.r-done { background: #dcf3e4; color: var(--ok); }
.badge.s-published, .badge.r-running { background: #e3ecff; color: #2a4fb0; }
/* 자동 처리 진행률 (요청 메모) */
.reply.auto { color: #2a4fb0; }
.pbar { height: 6px; border-radius: 3px; background: #e3ecff; overflow: hidden; margin: 4px 0 3px; max-width: 420px; }
.pbar span { display: block; height: 100%; width: 0; background: #2a4fb0; transition: width .8s linear; }
.ptext { font-size: 12px; font-variant-numeric: tabular-nums; }
.badge.s-rejected, .badge.r-cancelled { background: #eee; color: #888; }
.badge.warn { background: #fde8e9; color: var(--red-dark); }

.detail { background: var(--card); border-radius: 10px; padding: 20px 24px; min-height: 60vh; }
.detail .empty { color: #999; }
.head h1 { font-size: 21px; margin: 8px 0 12px; line-height: 1.4; }
.cat { color: var(--muted); font-size: 13px; }
.chars { color: #999; font-size: 12px; margin-left: auto; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.note { background: #fff7e6; border-left: 3px solid var(--warn); padding: 8px 12px; margin: 12px 0 0; font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; }
.tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); }
.tabs button.on { border-bottom-color: var(--red); color: var(--ink); font-weight: 600; }
.preview { max-width: 720px; border: 1px dashed #ccc; padding: 24px; overflow-x: auto; overflow-wrap: anywhere; }
.preview img { max-width: 100%; }
.shots { display: flex; gap: 12px; flex-wrap: wrap; }
.shots figure { margin: 0; width: 220px; }
.shots img { width: 100%; border: 1px solid var(--line); }
.shots figcaption { font-size: 12px; color: var(--muted); }
.tags { color: #2a4fb0; font-size: 13px; margin-top: 16px; }
#editor { width: 100%; min-height: 65vh; padding: 14px; border: 1px solid #ccc; border-radius: 8px; font-family: 'D2Coding', Consolas, 'Malgun Gothic', monospace; font-size: 14px; line-height: 1.7; resize: vertical; }
h3 { font-size: 14px; margin: 20px 0 8px; }
.stack { display: grid; gap: 8px; max-width: 640px; }
.stack label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.stack textarea, .stack select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; color: var(--ink); }
.stack button { justify-self: start; }
.log { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.9; }

/* 요청 메모 */
#requests { padding: 16px 20px; display: grid; gap: 16px; max-width: 900px; }
.panel { background: var(--card); border-radius: 10px; padding: 20px 24px; }
.panel h2 { margin: 0 0 6px; font-size: 17px; }
.requests { list-style: none; padding: 0; margin: 0; }
.requests li:not(.none) { border-top: 1px solid var(--line); padding: 10px 0; }
.requests .text { margin: 6px 0; white-space: pre-wrap; line-height: 1.6; }
.requests .reply { color: var(--ok); font-size: 13px; white-space: pre-wrap; }
.requests li.r-done .text, .requests li.r-cancelled .text { color: #888; }
.requests .actions button { padding: 3px 9px; font-size: 12px; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100vw - 32px); z-index: 10; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: var(--red-dark); }

@media (max-width: 860px) {
  #drafts { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .list { position: static; max-height: 40vh; }
  .detail { padding: 16px; }
  .preview { padding: 12px; }
  .top { padding: 8px 16px; }
  .views { margin-left: 0; }
  #requests { padding: 12px 16px; }
}

/* 글감 회의 */
#ideas { padding: 16px 20px; display: grid; gap: 16px; }
.idea-form { display: grid; gap: 8px; }
.idea-form input, .idea-form textarea, .idea-form select, .idea select, .comments input { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; color: var(--ink); font: inherit; }
.idea-form input[name="title"] { font-size: 16px; }
.idea-form label { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.idea-form .row { gap: 10px; }
.idea-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.idea-layout > * { min-width: 0; }
.board-head { justify-content: space-between; margin-bottom: 8px; }
.board-head h2 { margin: 0; }
.idea-group { margin-top: 12px; }
.group-title { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin: 16px 0 8px; }
.idea-group.undecided .group-title { color: var(--warn); }
.idea { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.idea.st-held { opacity: .65; }
.idea h3 { margin: 8px 0 4px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.idea .memo { margin: 4px 0; white-space: pre-wrap; color: #333; line-height: 1.6; overflow-wrap: anywhere; }
.idea .src, .idea .linked { margin: 4px 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.idea .linked { color: var(--ok); }
.idea select { padding: 3px 6px; font-size: 12px; max-width: 100%; }
.idea .actions button { padding: 3px 10px; font-size: 12px; }
.idea .actions button:disabled { opacity: .45; cursor: not-allowed; }
.vote.on { background: #fde8e9; border-color: var(--red); color: var(--red-dark); }
.badge.i-idea { background: #fff1d6; color: var(--warn); }
.badge.i-chosen { background: #dcf3e4; color: var(--ok); }
.badge.i-drafted { background: #e3ecff; color: #2a4fb0; }
.badge.i-held { background: #eee; color: #888; }
.comments { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: 13px; }
.comments p { margin: 0 0 8px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments form input { flex: 1; min-width: 0; }
.seeds { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
.seeds .tabs { margin: 8px 0 4px; }
#seedList { list-style: none; padding: 0; margin: 0; }
#seedList li:not(.none) { border-bottom: 1px solid var(--line); padding: 10px 0; display: grid; gap: 4px; }
#seedList li button { justify-self: start; padding: 2px 10px; font-size: 12px; }
#seedList .title { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  #ideas { padding: 12px 16px; }
  .idea-layout { grid-template-columns: minmax(0, 1fr); }
  .seeds { position: static; max-height: 50vh; }
}
.who { color: var(--muted); font-size: 12px; }
.who b { color: var(--ink); font-weight: 600; }
p.who { margin: -4px 0 8px; font-size: 13px; }