/* 독톡 안쪽 화면(로그인 뒤·관리자) 공통 부품 — pub.css 다음에 읽는다. 토큰은 pub.css 것만 쓴다.
   기획: next/PLAN-inner.md 2-4. 공개 화면에도 같이 실리므로 pub.css 클래스와 겹치는 이름은 쓰지 않는다
   (그래서 안내 상자 .msg · 숫자 타일 .kpi · 진행바 .meter). 화면별 규칙은 맨 아래 "화면별" 블록에. */

/* 옛 변수 이름 → pub 토큰 (ptag·pub-lookup·옛 JS 가 inline 으로 쓰는 것 보호) */
:root {
  --primary: var(--accent); --primary-dark: #004a99; --primary-soft: #e8f0fb;
  --bg: var(--canvas); --card: var(--canvas); --text: var(--ink); --text-muted: var(--ink-2); --text-light: var(--ink-3);
  --border: var(--hairline); --border-light: var(--parchment); --success: var(--ok); --warning: var(--warn);
  --radius: var(--r-lg); --radius-sm: var(--r-sm); --radius-xs: var(--r-sm);
  --shadow: none; --shadow-md: none; --shadow-lg: none;
}
.ic { flex-shrink: 0; vertical-align: -3px; }

/* ---------------------------------------------------------------- 머리말 보강 */
.nav-ghost { color: var(--ink); opacity: .82; }
.nav-ghost.on { opacity: 1; font-weight: 600; }
.btn-login.on { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }

/* ---------------------------------------------------------------- 쪽 틀 */
.page-top .crumb { margin: 0 0 16px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 32px; }
.page-head > div:first-child { min-width: 0; }
.page-head .lead { margin-top: 8px; }
.page-head .actions { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; }
.admin-tabs { margin: -12px 0 32px; }

.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin: 48px 0 16px; }
.sec-head:first-child { margin-top: 0; }
.sec-head h2 { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.count { color: var(--ink-3); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.split > .side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }
.split > .side .card { margin: 0; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g2 > .card, .g3 > .card { margin: 0; }

/* 글자 도우미 */
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 14px; letter-spacing: 0; }
.tiny { font-size: 13px; letter-spacing: 0; }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-0 { margin-top: 0 !important; } .mt-8 { margin-top: 8px !important; } .mt-16 { margin-top: 16px !important; } .mt-24 { margin-top: 24px !important; } .mt-40 { margin-top: 40px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px !important; } .mb-16 { margin-bottom: 16px !important; }
.hidden, [hidden] { display: none !important; }

/* ---------------------------------------------------------------- 카드 */
.card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; }
.card.flat { background: var(--parchment); border-color: transparent; }
.card .part { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 24px; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.card-h h2, .card-h h3 { font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.card-h .caption { margin: 0; }
.card > :last-child { margin-bottom: 0; }
.card > p:first-child, .card > .empty:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- 목록 행 */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
.rows > .row:first-child, .row.first { border-top: 0; }
a.row:hover { text-decoration: none; }
a.row:hover .t { color: var(--accent); }
.row .main { flex: 1; min-width: 0; }
.row .t { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.row .meta { font-size: 14px; color: var(--ink-2); line-height: 1.5; letter-spacing: 0; margin-top: 2px; }
.row .acts { flex-shrink: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.row .cover { width: 40px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.row .rank { width: 24px; flex-shrink: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.row .n { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- 표 (pub .tbl 확장) */
.tbl td, .tbl th { padding: 12px 8px; vertical-align: middle; }
.tbl thead th { border-top: 0; padding-top: 0; }
.tbl tbody tr:first-child td { border-top: 1px solid var(--hairline); }
.tbl .c-date { width: 112px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tbl .c-num { width: 72px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl .c-act { width: 1%; text-align: right; white-space: nowrap; }
.tbl .c-act .acts { justify-content: flex-end; flex-wrap: nowrap; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--parchment); }
.tbl .t { font-weight: 600; color: var(--ink); }
.tbl-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- 폼 (pub .form 확장) */
.form input[type=checkbox], .form input[type=radio], .check input, input.cb {
  width: 20px; height: 20px; margin: 0; padding: 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer;
}
.form input[type=date], .form input[type=time], .form input[type=datetime-local], .form input[type=month] {
  -webkit-appearance: none; appearance: none; display: block; min-width: 0; line-height: 46px; text-align: left;
}
.form input[type=file] { height: auto; padding: 10px 14px; }
.form select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.form textarea { min-height: 120px; line-height: 1.6; }
.form textarea.short { min-height: 72px; }
.form select:focus, .form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.form input[readonly] { background: var(--parchment); }
.form .help { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: -8px 0 14px; font-weight: 400; letter-spacing: 0; }
.form .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.form .inline { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 16px; align-items: center; }
.form .inline > label { margin: 0 0 14px; }
.form .part { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 24px; }
.form .part:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.form .part > h2, .form h2.part-h { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--ink); }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form .w80 { width: 80px !important; height: 40px !important; display: inline-block !important; margin: 0 6px !important; font-size: 15px !important; padding: 0 10px !important; text-align: right; }
.form .w160 { width: 160px !important; max-width: 100%; }
.form .w320 { width: 320px !important; max-width: 100%; }
.form .ro { padding: 0 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.form .ro .l { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.form .ro .v { font-size: 17px; color: var(--ink); }
.input { width: 100%; height: 48px; border-radius: var(--r-sm); border: 1px solid rgba(0,0,0,.15); padding: 0 14px; font-size: 17px; background: #fff; }
.input:focus { outline: 2px solid var(--focus); border-color: transparent; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input, .search-row .input { flex: 1; margin: 0 !important; min-width: 0; }
.search-row .btn { flex-shrink: 0; min-height: 48px; height: 48px; }

.check, .form label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 400; color: var(--ink); margin: 0 0 14px; cursor: pointer; line-height: 1.5; letter-spacing: -0.01em; }
.check input { margin-top: 2px; }
.check .help, .form label.check .help { margin: 2px 0 0; }
.check > span { min-width: 0; }
.radio-row { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; }
.radio-col { display: flex; flex-direction: column; gap: 4px; }
.radio-col .check { margin: 0; min-height: 44px; align-items: center; }

/* ---------------------------------------------------------------- 버튼 위계: primary(1개) → ghost → quiet → .link, 위험은 테두리만 */
.btn { line-height: 1.25; min-height: 44px; font-weight: 400; }
.btn.sm { min-height: 36px; padding: 8px 18px; font-size: 15px; }
.btn.xs { min-height: 28px; padding: 4px 12px; font-size: 13px; letter-spacing: 0; position: relative; }
.btn.xs::after { content: ""; position: absolute; inset: -8px -2px; }
.btn.quiet { background: var(--parchment); color: var(--ink); border-color: transparent; }
.btn.quiet:hover { background: #ebebef; }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(215,0,21,.45); }
.btn.ok-done { color: var(--ok); border-color: rgba(26,127,55,.45); }
.btn.ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }
.btn .ic { margin-left: -2px; }
.link { background: none; border: 0; padding: 0; margin: 0; color: var(--accent); cursor: pointer; font-size: inherit; text-align: left; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--danger); font-size: 14px; background: none; border: 0; padding: 0; }  /* pub button.danger 채움 무력화 */
.link.muted { color: var(--ink-2); }
.btns.tight { margin-top: 16px; }
.btns.end { justify-content: flex-end; }
.btns.center { justify-content: center; }
.btns.gap8 { gap: 8px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--parchment); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex-shrink: 0; }
.icon-btn:hover { background: #ebebef; text-decoration: none; }

/* ---------------------------------------------------------------- 칩·상태 */
.chip.sm, .chip.type { font-size: 13px; padding: 2px 10px; }
.chip.ink, .chip.admin { background: var(--ink); color: #fff; border: 0; }
.chip.lv { background: transparent; border: 1px solid rgba(0,0,0,.15); color: var(--ink-2); font-size: 13px; padding: 1px 8px; font-weight: 600; }
.chip.line { background: transparent; border: 1px solid rgba(0,0,0,.15); }
.chip.accent { background: #e8f0fb; color: #004a99; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.st { font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.st.ok { color: var(--ok); } .st.warn { color: var(--warn); } .st.danger { color: var(--danger); } .st.off { color: var(--ink-3); } .st.accent { color: var(--accent); }
.dot-new { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---------------------------------------------------------------- 안내 상자 */
.msg { background: var(--parchment); color: var(--ink); border-radius: var(--r-sm); padding: 12px 16px; font-size: 15px; line-height: 1.55; margin: 0 0 16px; letter-spacing: -0.005em; }
.msg.ok { background: #e9f6ec; color: #135c27; }
.msg.warn { background: #fff4e5; color: #8a4b00; }
.msg.danger { background: #fdecec; color: #a3000f; }
.msg.info { background: #e8f0fb; color: #0b3d7a; }
.msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg b { font-weight: 600; }
.msg .ic { margin-right: 6px; }
.card .empty, .empty.sm { padding: 8px 0; font-size: 15px; }
.empty a { white-space: nowrap; }

/* ---------------------------------------------------------------- 숫자 타일·진행바 */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { background: var(--parchment); border-radius: var(--r-md); padding: 16px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
a.kpi:hover { text-decoration: none; background: #ebebef; }
.kpi.hi { background: var(--canvas); border: 1px solid var(--hairline); }
.kpi .l { font-size: 13px; color: var(--ink-2); font-weight: 600; letter-spacing: 0; }
.kpi .v { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-left: 2px; letter-spacing: 0; }
.kpis.sm .kpi .v { font-size: 22px; }
.kpi .s { font-size: 13px; color: var(--ink-3); letter-spacing: 0; }
.meter { height: 6px; background: var(--parchment); border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; max-width: 100%; }
.meter.full > i { background: var(--warn); }
.meter.w120 { width: 120px; }
.card .meter, .kpi .meter { background: #e8e8ed; }

/* ---------------------------------------------------------------- 탭(필터)·페이지 번호·토글 */
.seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.seg::-webkit-scrollbar { display: none; }
.seg a, .seg button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--parchment); color: var(--ink); font-size: 15px; border: 0; cursor: pointer; white-space: nowrap; letter-spacing: -0.005em; }
.seg a:hover, .seg button:hover { text-decoration: none; background: #ebebef; }
.seg .on, .seg .active, .seg a.on:hover, .seg .active:hover { background: var(--ink); color: #fff; }
.pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.pager a, .pager span { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; background: var(--parchment); color: var(--ink); font-variant-numeric: tabular-nums; }
.pager a:hover { text-decoration: none; background: #ebebef; }
.pager .on, .pager .active { background: var(--ink); color: #fff; }
.pager .gap { background: transparent; color: var(--ink-3); }
.toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.toggle input { position: absolute; inset: 0; opacity: 0; width: 100% !important; height: 100% !important; margin: 0 !important; cursor: pointer; z-index: 1; }
.toggle .slider, .toggle > span { position: absolute; inset: 0; background: #d2d2d7; border-radius: 999px; transition: background .2s; pointer-events: none; }
.toggle .slider::before, .toggle > span::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.toggle input:checked + .slider, .toggle input:checked + span { background: var(--accent); }
.toggle input:checked + .slider::before, .toggle input:checked + span::before { transform: translateX(18px); }
.toggle input:focus-visible + .slider, .toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- 모달(pub 시트와 같은 모양) */
.modal-bg { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .2s ease; }
.modal-bg[hidden], .modal-bg.hide { display: none; }
.modal { width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; background: var(--canvas); border-radius: var(--r-lg); padding: 28px 24px 24px; position: relative; animation: rise .25s ease; }
.modal.wide { max-width: 560px; }
.modal h2 { font-size: 21px; line-height: 1.35; letter-spacing: -0.015em; margin: 0 0 8px; padding-right: 32px; }
.modal h3 { font-size: 17px; font-weight: 600; margin: 20px 0 6px; }
.modal p, .modal li { font-size: 16px; color: var(--ink-2); }
.modal ul { padding-left: 20px; margin: 0; }
.modal .btns { margin-top: 24px; }
.modal .btns .btn { flex: 1; }
.modal .x { top: 16px; right: 16px; }

/* ---------------------------------------------------------------- 지도 */
.map { height: 200px; border-radius: var(--r-md); background: var(--parchment); overflow: hidden; position: relative; }
.map.failed > *:not(.fail) { display: none !important; }
.map.failed .fail { display: flex; }
.map .fail { position: absolute; inset: 0; z-index: 5; background: var(--parchment); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 14px; color: var(--ink-2); }
.place-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin-top: 12px; }
.place-links a, .place-links button { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; }

/* ---------------------------------------------------------------- 댓글·후기 */
.cmts { display: flex; flex-direction: column; }
.cmt { border-top: 1px solid var(--hairline); padding: 14px 0; }
.cmts > .cmt:first-child { border-top: 0; padding-top: 4px; }
.cmt .head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.cmt .who { font-size: 15px; font-weight: 600; color: var(--ink); }
.cmt .when { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cmt .body { font-size: 16px; line-height: 1.6; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt .tools { display: flex; gap: 12px; margin-top: 6px; font-size: 13px; }
.cmt .tools button, .cmt .tools a { background: none; border: 0; padding: 0; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.cmt .tools .danger { color: var(--danger); }
.cmt.reply { margin-left: 16px; padding-left: 14px; border-top: 0; border-left: 2px solid var(--parchment); padding-top: 8px; padding-bottom: 8px; }
.stars { color: var(--ink); font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.star-input { display: inline-flex; gap: 4px; }
.star-input .star { font-size: 28px; line-height: 1; color: #d2d2d7; cursor: pointer; background: none; border: 0; padding: 0 2px; }
.star-input .star.on, .star-input .star.filled, .star-input .star.active { color: var(--accent); }

/* ---------------------------------------------------------------- 문장 카드 */
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quote { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.quote blockquote, .quote .text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.quote .src { font-size: 13px; color: var(--ink-3); display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; letter-spacing: 0; }
.quote .foot-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- 인상 5축(_axis_input / _axis_summary) */
.axis { display: flex; flex-direction: column; gap: 14px; }
.axis-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.axis-row .al { font-size: 14px; font-weight: 600; color: var(--ink); }
.axis-row .ends { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.axis-row .ends > :first-child { text-align: right; }
.axis-dots { display: inline-flex; gap: 8px; }
.axis-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.2); background: #fff; cursor: pointer; padding: 0; position: relative; }
.axis-dot::after { content: ""; position: absolute; inset: -6px; }
.axis-dot.on, .axis-dot.active, .axis-dot.selected { background: var(--accent); border-color: var(--accent); }
.axis-track { position: relative; height: 8px; background: var(--parchment); border-radius: 999px; }
.axis-track .mk { position: absolute; top: -2px; width: 12px; height: 12px; border-radius: var(--r-sm); background: var(--accent); transform: translateX(-50%); }

/* ---------------------------------------------------------------- 표지 격자 위 버튼(하트) */
.cover-wrap { position: relative; display: block; }
.wishlist-btn { position: absolute; top: 8px; right: 8px; width: 32px !important; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(255,255,255,.92); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.wishlist-btn::after { content: ""; position: absolute; inset: -6px; }
.wishlist-btn.active { color: var(--danger); }
.wishlist-btn .on-ic { display: none; }
.wishlist-btn.active .on-ic { display: inline; }
.wishlist-btn.active .off-ic { display: none; }

/* 검색 결과 목록(책·장소) */
.results { border: 1px solid var(--hairline); border-radius: var(--r-md); margin: 8px 0 14px; max-height: 320px; overflow-y: auto; background: #fff; }
.results:empty { display: none; }
.result-item { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--hairline); cursor: pointer; font-size: 15px; }
.result-item:first-child { border-top: 0; }
.result-item:hover, .result-item.selected { background: var(--parchment); }
.result-item img { width: 36px; height: 54px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }

/* fcm_client.js 가 그리는 알림 */
#in-app-notification { font-family: var(--font) !important; }

/* pub.css 전역 규칙과의 충돌 정리(작업자 보고) */
.acts .btn { border: 1px solid var(--accent); background: transparent; border-radius: 999px; }
.acts .btn.primary { background: var(--accent); color: #fff; }
.acts .btn.quiet { background: var(--parchment); border-color: transparent; color: var(--ink); }
.acts .btn.danger { background: transparent; color: var(--danger); border-color: rgba(215,0,21,.45); }
.acts .link, .acts button.link { background: none; border: 0; padding: 0; border-radius: 0; font-size: 14px; }
.form .radio-col .check, .radio-col label.check { margin: 0; min-height: 44px; align-items: center; }
.form input, .form select, .form textarea { font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
figure.quote, .quote { margin: 0; }
.inline-form { display: inline-flex; margin: 0; }
.cover.blank > span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body.app { min-height: 100vh; display: flex; flex-direction: column; }
body.app > main { flex: 1 0 auto; }

/* ---------------------------------------------------------------- 반응형 */
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; }
  .split > .side { position: static; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-head { margin-bottom: 24px; }
  .admin-tabs { margin: -8px 0 24px; }
  .sec-head { margin-top: 40px; }
  .sec-head h2 { font-size: 21px; }
  .card { padding: 20px; }
  .g2, .g3, .quote-grid { grid-template-columns: 1fr; }
  .kpis.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 24px; }
  .form .grid2, .form .grid3 { grid-template-columns: 1fr; }
  .form .inline { grid-template-columns: 1fr; }
  .form .inline > label { margin-bottom: 6px; }
  .row { gap: 12px; }
  .row.stack-acts { flex-wrap: wrap; }
  .row.stack-acts .acts { width: 100%; justify-content: flex-start; }
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: auto; }
  .tbl.stack tr { border-top: 1px solid var(--hairline); padding: 12px 0; }
  .tbl.stack tbody tr:first-child { border-top: 0; }
  .tbl.stack td { border: 0 !important; padding: 2px 0; text-align: left; }
  .tbl.stack td[data-l]::before { content: attr(data-l) " "; color: var(--ink-3); font-size: 13px; }
  .tbl.stack .c-act { text-align: left; padding-top: 8px; width: auto; }
  .tbl.stack .c-act .acts { justify-content: flex-start; }
  .tbl.stack .c-date { color: var(--ink-3); font-size: 13px; }
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
  .axis-row { grid-template-columns: 1fr; }
  .map { height: 160px; }
  .menu { gap: 14px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 16px; }
}
@media (max-width: 480px) {
  .nav .nav-ghost { display: none; }  /* 폰에서는 관리 링크를 마이페이지 머리에 둔다(머리말 폭 부족) */
}

/* 작은 보정 */
.link.tiny { font-size: 13px; } .link.small { font-size: 14px; }

/* ================================================================ 화면별 (접두사로 구분, 2026-10-26 작업자 5명 작업분 합침) */

/* ==== events: 정모 목록·상세·인상 5축 (events.html · event_detail.html · _axis_*) ==== */
/* events 묶음 — events.html(.ev-) · event_detail.html(.ed-) · _axis_input / _axis_summary(.axis-input-wrap / .axis-summary-wrap)
   기획: next/PLAN-inner.md 3절. 토큰은 pub.css 것만 쓴다. app.css 로 합칠 때 이 파일을 그대로 옮기면 된다.
   _axis_* 는 oneline 화면에도 include 되므로 그 부분 규칙은 .axis-input-wrap / .axis-summary-wrap 안으로만 건다. */

/* ================================================================ events.html — /events */
.ev-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.ev-notes > * { margin: 0 0 16px; }
.ev-notice { flex: 1 1 320px; }
#install-banner { display: none; }
#install-banner .btn .ic { margin-right: 2px; }

/* 내 활동 한 줄 */
.ev-me { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; background: var(--parchment); border-radius: var(--r-md); padding: 8px 10px 8px 16px; margin-bottom: 8px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; line-height: 1.5; }
.ev-me-main { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.ev-me-who, .ev-me-stats { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.ev-me-who > * + *::before, .ev-me-stats > * + *::before, .ev-me-stats::before { content: "·"; margin: 0 8px; color: var(--ink-3); font-weight: 400; }
.ev-me-who > b { color: var(--ink); font-weight: 600; font-size: 15px; }
.ev-me-main b.num { color: var(--ink); font-weight: 600; }
.ev-me-acts { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ev-me-acts a { white-space: nowrap; }
.ev-bell { background: var(--canvas); }
.ev-bell:hover { background: #fff; }
.ev-bell::after { content: ""; position: absolute; inset: -4px; }
.ev-bell svg, .btn-close-modal svg { pointer-events: none; }
.noti-badge { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--canvas); display: none; }
.ev-goal { display: flex; flex-wrap: wrap; align-items: baseline; padding: 0 16px; margin-bottom: 8px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.ev-goal:hover { text-decoration: none; }
.ev-goal:hover .ev-goal-edit { text-decoration: underline; }
.ev-goal > * + *::before { content: "·"; margin: 0 8px; color: var(--ink-3); }
.ev-goal .strong { color: var(--ink); }
.ev-goal-edit { color: var(--accent); }

/* 유형 필터 줄 */
.ev-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 20px; }
.ev-bar .seg { min-width: 0; }
.ev-bar .caption b { color: var(--ink); font-weight: 600; }

/* 모임 카드 (pub .ev 위에 회원 줄만 더함) — 카드 전체가 링크, 같은 줄 카드는 아래 줄(.ev-m-foot)이 바닥에 맞춰진다 */
.ev-m .cover { align-self: start; }
.ev-m .cover.blank { font-size: 13px; }
.ev-m.is-mine { border-color: rgba(0,102,204,.35); }
.ev-m-body { display: flex; flex-direction: column; min-width: 0; }
.ev-m-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ev-m-top .type { margin-left: 0; }
.ev-m-status { margin-top: 14px; gap: 4px; }
.ev-m-line { display: flex; align-items: center; gap: 8px; min-height: 22px; min-width: 0; }
.ev-m-line .ic { color: var(--ink-3); vertical-align: 0; }
.ev-m-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-m-seat .meter { flex: 1; max-width: 120px; margin-left: 4px; }
.ev-m-state { padding-left: 24px; flex-wrap: wrap; gap: 0 12px; }
.ev-m-foot { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.ev-m-foot .js-reg-countdown { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 팝업(알림함·취소·환영·출석) — app.css .modal-bg/.modal */
#noti-modal { display: none; }
#noti-list { margin-top: 12px; }
#noti-list .empty { padding: 16px 0; }
.noti-item { padding: 12px 0; border-top: 1px solid var(--hairline); cursor: pointer; }
.noti-item:first-child { border-top: 0; }
.noti-item:hover .noti-t { color: var(--accent); }
.noti-t { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.noti-item.unread .noti-t::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 3px; }
.modal .noti-b { font-size: 14px; color: var(--ink-2); margin-top: 2px; line-height: 1.5; }
.noti-modal-content .link { font-size: 14px; }
.noti-time { font-size: 13px; color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ev-pop-list { margin-top: 8px; }
.ev-pop-item { padding: 14px 0; border-top: 1px solid var(--hairline); }
.ev-pop-item:first-child { border-top: 0; }
.ev-pop-item .t { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.ev-pop-acts { display: flex; gap: 8px; margin-top: 12px; }
.ev-pop-acts .btn { flex: 1; }
.modal .msg { color: var(--ink); }

/* ================================================================ event_detail.html — /event/N (회원) */
.ed-top .msg { margin: 16px 0 0; }
.ed-hero { padding: 32px 0 48px; }
.ed-hero .type-chip { margin-right: 8px; }
.ed-pending { display: inline-block; margin-bottom: 10px; }
.ed-hero .d-cover-bg .cover.blank { font-size: 15px; }
.ed-body { padding: 0 0 96px; }

.ed-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.ed-main { grid-column: 1; grid-row: 1; min-width: 0; }
.ed-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
.ed-side .card { margin: 0; }
@media (min-width: 1024px) and (min-height: 840px) {
  .ed-side { position: sticky; top: 76px; }
}
.ed-side p, .ed-main .card-h p { margin: 0; }

/* 신청 카드 */
.ed-mine { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ed-mine form { margin: 0; }
.ed-side .ed-mine-st { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.ed-join { display: flex; flex-direction: column; gap: 8px; }
.ed-join form { margin: 0; }
.ed-side .ed-help, .ed-help { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 10px 0 0; letter-spacing: 0; }
.ed-side .ed-cd-n { font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0 4px; }
.ed-side .ed-ac { margin-top: 16px; font-size: 14px; }
.ed-apply > .ed-ac:first-child { margin-top: 0; }
.ed-ac-n { display: block; font-size: 13px; opacity: .85; margin-top: 2px; }

/* 장소 카드 — 텍스트 링크 4개(브랜드색 없음) */
.ed-side .ed-place-name { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; margin-bottom: 12px; }
.ed-place-name + .caption { margin-top: -8px; }
.ed-map { height: 180px; cursor: pointer; }
.ed-copy-src { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ed-2btn { display: flex; gap: 8px; margin-top: 16px; }
.ed-2btn .btn { flex: 1; padding-left: 12px; padding-right: 12px; }

/* 관리 카드 · 모임 취소 모달(JS 가 style.display 로 연다) */
#cancel-event-modal { display: none; }
.ed-side .ed-cancel { margin-top: 16px; }
.ed-cancel .link.danger { font-size: 14px; }
.ed-admin .ed-help { margin-top: 4px; }

/* 왼쪽 카드들 */
.ed-text { font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.ed-people .meter { margin: 0 0 8px; }
.ed-people .ptag-note { font-size: 13px; font-weight: 400; }
.ed-rows .row { min-height: 52px; padding: 10px 0; }
.ed-people .participant-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ed-act { font-size: 13px; color: var(--ink-3); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-subh { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.ed-people .part { margin-top: 16px; padding-top: 20px; }
.ed-people .part > .caption { margin: 4px 0 0; }
.ed-people .empty { padding: 12px 0 0; }
.ed-people .row .acts form { margin: 0; }
/* pub .acts button(파치먼트 채움)·.acts button.danger(분홍 채움)이 .btn 을 덮는 것 되돌림 — 공통 부품 보고 */
.ed-people .acts .btn { background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.ed-people .acts .btn.ghost { border-color: var(--accent); color: var(--accent); }
.ed-people .acts .btn.danger { border-color: rgba(215,0,21,.45); color: var(--danger); }

/* pub button.danger(분홍 채움)가 .link.danger 버튼에도 붙는 것 되돌림 — 공통 부품 보고 */
button.link.danger { background: none; border: 0; padding: 0; }
.ed-tmeta { margin-top: 8px; }
.ed-tmeta form, .cmt .head form, .cmt .tools form { margin: 0; display: inline; }
.ed-form { margin: 0; }
.ed-form textarea { margin-bottom: 12px; }
.ed-topics .empty, .ed-comments .empty, .ed-reviews .empty { padding: 8px 0 0; }
.ed-comments .reply-form { display: none; margin: 8px 0 4px 16px; }
.ed-comments .reply-form.show { display: block; }
.ed-comments .cmt .tools .reply { color: var(--accent); }

.ed-reviews .card-h + .cmts.part { border-top: 0; margin-top: 0; padding-top: 0; }
.ed-review-form .star-input { margin-bottom: 16px; }
.ed-review-form ~ .axis-summary-wrap { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 24px; }

/* ================================================================ _axis_input / _axis_summary (인상 5축) */
.axis-input-wrap { margin: 4px 0 16px; }
.axis-input-wrap .axis-hint, .axis-summary-wrap .axis-hint { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; letter-spacing: 0; }
.axis-input-wrap .axis-hint .faint { font-weight: 400; }
.axis-input-wrap .ends > :last-child, .axis-summary-wrap .ends > :last-child { text-align: left; }
.axis-input-wrap .axis-reset-btn { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.axis-summary-wrap { margin: 0 0 8px; }
.axis-summary-wrap .axis-row { grid-template-columns: 88px minmax(0, 1fr); }
.axis-summary-wrap .ends { grid-template-columns: minmax(0, 1fr) minmax(96px, 1.6fr) minmax(0, 1fr); }
.axis-summary-wrap .al { line-height: 1.35; }
.axis-summary-count { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.axis-summary-empty { color: #c7c7cc; }
.axis-summary-center { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(0,0,0,.14); }

/* ================================================================ 반응형 */
@media (max-width: 1023px) {
  /* 폰·태블릿: 신청 → 장소 → 전달사항 → 참여자 → 이야깃거리 → 후기 → 댓글 → 관리 */
  .ed-split { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .ed-main, .ed-side { display: contents; }
  .ed-split .card { margin: 0; }
  .ed-apply { order: 1; } .ed-place { order: 2; } .ed-note { order: 3; } .ed-people { order: 4; }
  .ed-topics { order: 5; } .ed-reviews { order: 6; } .ed-comments { order: 7; } .ed-admin { order: 8; }
}
@media (max-width: 760px) {
  .ev-me { padding: 10px 10px 10px 14px; }
  .ev-me-stats { flex-basis: 100%; }
  .ev-me-stats::before { content: none; }
  .ev-goal { padding: 0 14px; }
  .ev-bar { margin: 20px 0 16px; }
  .ev-bar > .caption { display: none; }
  .ev-m-seat .meter { max-width: none; }
  .ed-hero { padding: 24px 0 32px; }
  .ed-body { padding-bottom: 64px; }
  .ed-map { height: 160px; }
  .ed-comments .reply-form { margin-left: 0; }
  .axis-summary-wrap .axis-row { grid-template-columns: 1fr; }
  .axis-summary-count { display: inline; margin-left: 6px; }
}

/* ==== eventform: 모임 등록·수정 (create_event · edit_event) ==== */
/* ==== eventform — create_event.html(/create_event) · edit_event.html(/edit_event/N) ====
   PLAN-inner.md 3절. 공통 부품(.form .part .grid2 .check .help .ro .map .results .msg)은 app.css 것을 쓰고,
   여기에는 이 두 화면에만 있는 것(유형 타일·지도 실패 덮개·검색 줄 높이·하위 설정 들여쓰기)만 둔다. 접두사 .ef */

/* 유형 타일 2×2(폰도). 이모지·채움색 없이 선택은 accent 2px 테두리 */
.ef-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ef-types .type-option { position: relative; display: flex; min-width: 0; }
.ef-types .type-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.ef-types .type-option label {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 72px; margin: 0; padding: 0 16px;
  border: 1px solid rgba(0,0,0,.15); border-radius: var(--r-md); background: var(--canvas); cursor: pointer; letter-spacing: 0;
}
.ef-types .type-name { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-types .type-desc { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-2); }
.ef-types .type-option:not(.disabled) label:hover { border-color: rgba(0,0,0,.3); }
.ef-types input:checked + label, .ef-types .type-option:not(.disabled) input:checked + label:hover { border: 2px solid var(--accent); padding: 0 15px; }
.ef-types input:checked + label .type-name { color: var(--accent); }
.ef-types input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.ef-types .type-option.disabled label { opacity: .45; cursor: not-allowed; }
.ef-types + .help { margin-top: 10px; }

/* 라벨 옆 작은 꼬리말 "(정기모임만 · 선택)" */
.ef-opt { font-weight: 400; color: var(--ink-3); margin-left: 4px; }

/* 검색 줄: 버튼을 입력 칸 높이(48)에 맞춘다 — app.css .search-row 는 버튼 높이를 정하지 않음 */
.ef .search-row { margin-bottom: 14px; }
.ef .search-row .btn { min-height: 48px; padding: 0 22px; }
.ef .search-row + .results { margin-top: -6px; }
.ef .result-item .r-info { flex: 1; min-width: 0; line-height: 1.45; }
.ef .result-item .r-info strong, .ef .result-item .r-title { font-weight: 600; color: var(--ink); }
.ef .result-item .r-info small, .ef .result-item .r-addr { font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.ef .result-item img { background: #e8e8ed; }
.ef-res-msg { padding: 12px 14px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.ef-res-msg.err { color: var(--danger); }

/* 선택한 책 미리보기(.msg.ok) */
.ef-picked { display: flex; gap: 8px; align-items: flex-start; }
.ef-picked .ic { margin: 3px 0 0; }

/* 지도: .map 틀 안에 #map 캔버스 + 인증 실패 덮개(.fail) */
.ef-map #map { width: 100%; height: 100%; position: relative; z-index: 0; }
.ef-map .fail { background: var(--parchment); z-index: 1; margin: 0; flex-direction: column; gap: 2px; }
.ef .map + .help { margin-top: 8px; }

/* 펼침 하위 설정(자동 취소 최소 인원): 체크 글자 줄에 맞춰 들여쓰기(체크 20 + 간격 10) */
.ef-sub { padding-left: 30px; }
.ef-sub .help:last-child { margin-bottom: 14px; }

/* 읽기 전용 값이 입력 칸 자리에 올 때(수정 화면 자유·소모임의 신청 활성화) — 입력 칸과 같은 48 줄 */
.ef-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; letter-spacing: 0; line-height: 1.6; }
.ef-static { display: flex; align-items: center; min-height: 48px; margin: 0 0 14px; padding: 0 14px; border-radius: var(--r-sm); background: var(--parchment); font-size: 15px; color: var(--ink-2); letter-spacing: -0.005em; }

/* 제출 */
.ef-submit { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 24px; }
.ef-submit .btn { min-height: 52px; }

@media (max-width: 760px) {
  .ef-types { gap: 10px; }
  .ef-types .type-option label { padding: 0 14px; }
  .ef-types input:checked + label { padding: 0 13px; }
  .ef .search-row .btn { padding: 0 18px; }
}

/* ==== me: 마이페이지·목표·리캡·로그인·가입·비밀번호·문장 보내기 ==== */
/* 묶음 "me" — 마이페이지·내 목표·리캡·비밀번호 변경·로그인·가입·문장 보내기 화면 전용.
   공통 부품(app.css·pub.css)으로 안 되는 것만. 접두사: .au-(로그인·가입·비밀번호) .mp-(마이페이지·목표·리캡) .qs-(문장 보내기) */

/* ---------------------------------------------------------------- 로그인·가입·비밀번호 변경: 폭 400 가운데 카드 (pub .sheet 와 같은 모양) */
.au-card { max-width: 400px; margin: 0 auto; padding: 32px 28px 28px; }
.au-card h1 { font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; }
.au-sub { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 6px 0 24px; }
.au-card .msg { margin: -8px 0 20px; }
.au-card .btn.block { margin-top: 6px; }
.au-fine { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 12px 0 0; letter-spacing: 0; }
.au-fine.center { text-align: center; }
.au-fine b { font-weight: 600; color: var(--ink-2); }
.au-alt { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.au-cafe { display: block; text-align: center; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.au-back { display: block; text-align: center; margin-top: 18px; font-size: 15px; }
.au-notes { max-width: 400px; margin: 20px auto 0; padding: 0 4px; font-size: 12px; line-height: 1.6; color: var(--ink-3); letter-spacing: 0; }
.au-notes p { margin: 0 0 4px; }
.au-notes a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- 마이페이지 */
.mp-head { margin-bottom: 8px; }
.mp-head .actions { font-size: 15px; gap: 4px 10px; }
.mp-head + .msg { margin-top: 8px; }
/* 공통 부품 보정: pub.css 의 button.danger(분홍 채움)가 button.link.danger 에도 걸린다 → 텍스트 링크로 되돌림 */
button.link.danger { background: none; border: 0; padding: 0; border-radius: 0; }
/* 공통 부품 보정: 카드 첫 자식 p 의 기본 위 여백(카드 안 빈 문구가 아래로 쏠림) */
.card > p:first-child, .card > .msg:first-child { margin-top: 0; }
.mp-head .actions .sep { color: var(--ink-3); }
.mp-st { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--ink-3); }
.mp-more { margin-top: 4px; }
.mp-more summary { cursor: pointer; font-size: 14px; color: var(--accent); padding: 10px 0; list-style: none; }
.mp-more summary::-webkit-details-marker { display: none; }
.mp-more[open] summary { color: var(--ink-2); }
.mp-foot { margin: 12px 0 0; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }

/* 올해 목표 진행 줄 */
.mp-goal + .mp-goal { margin-top: 16px; }
.mp-goal-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; margin-bottom: 6px; }
.mp-goal-h .l { font-weight: 600; }
.mp-goal-h .v { color: var(--ink-2); font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 월별 막대 (마이페이지·리캡) — 높이는 데이터라 style 로 */
.mp-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 96px; }
.mp-months i { display: block; background: var(--accent); border-radius: 4px 4px 2px 2px; min-height: 3px; }
.mp-months i[data-count="0"] { background: #e8e8ed; }
.mp-mlabels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* 성취 배지: 획득 칩 + 다음 목표 행 */
.mp-sub { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; letter-spacing: 0; }
.mp-badges .chips + .mp-sub { margin-top: 24px; }
.mp-prog { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mp-prog .num { font-size: 14px; color: var(--ink-2); min-width: 40px; text-align: right; letter-spacing: 0; }

/* 읽고 싶은 책: 카드 안 표지 격자 */
.card .shelf { gap: 24px 16px; }
.mp-shelf .book .t { margin-top: 10px; }

/* 알림 토글 행 — 행 전체가 label */
label.row.mp-set { cursor: pointer; }
.mp-set .main { font-size: 16px; }
.mp-set .main.strong { font-weight: 600; }
.mp-off { opacity: .5; pointer-events: none; }
.mp-acts { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.mp-acts form { display: inline-flex; margin: 0; }
.mp-acts + .help, .card .mp-help { display: block; font-size: 13px; color: var(--ink-3); margin: 8px 0 0; letter-spacing: 0; }

/* 책무늬 연동 코드 */
.mp-token { display: flex; gap: 8px; align-items: center; margin: 8px 0 6px; }
.mp-token code { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; word-break: break-all; color: var(--ink); }
.mp-desc { font-size: 15px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.6; }

/* 탈퇴 */
.mp-withdraw { text-align: center; margin-top: 48px; }
.mp-modal .form input { margin-bottom: 0; }
.mp-modal .btns { margin-top: 16px; }

/* 내 목표 폼 */
.mp-gitem + .mp-gitem { border-top: 1px solid var(--hairline); margin-top: 20px; padding-top: 20px; }
.mp-grow { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mp-grow label { font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; margin: 0 0 2px !important; letter-spacing: -0.01em !important; }
.mp-grow .caption { margin: 0; }
.mp-grow input { margin: 0 !important; flex-shrink: 0; }
.mp-gitem .meter { margin-top: 12px; }
.mp-gitem .mp-pct { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* 리캡 */
.mp-rate { display: grid; grid-template-columns: 88px minmax(0, 1fr) 32px; gap: 12px; align-items: center; padding: 4px 0; }
.mp-rate .s { font-size: 14px; color: var(--ink); letter-spacing: 1px; white-space: nowrap; }
.mp-rate .n { font-size: 14px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.mp-hl { font-size: 16px; line-height: 1.65; margin-top: 16px; }
.mp-quote .src a { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- 문장 보내기 */
.qs-search-row .btn { align-self: stretch; }
.qs-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.qs-results:empty { display: none; }
.qs-book { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); cursor: pointer; background: #fff; }
.qs-book:hover { background: var(--parchment); }
.qs-book.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #fff; }
.qs-book img, .qs-book .qs-ph { width: 40px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #e8e8ed; }
.qs-book .main { flex: 1; min-width: 0; }
.qs-book .t { font-size: 16px; font-weight: 600; line-height: 1.4; }
.qs-book .a { font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.qs-book .ok { font-size: 13px; color: var(--ok); font-weight: 600; margin-top: 2px; letter-spacing: 0; }
.qs-hint { font-size: 13px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0; }
.qs-hint a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.qs-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0 12px; }
.qs-form .btn.block { margin-top: 24px; }

/* ---------------------------------------------------------------- 폰 */
@media (max-width: 760px) {
  .au-card { padding: 28px 20px 24px; }
  .mp-months { height: 72px; gap: 3px; }
  .mp-mlabels { gap: 3px; }
  .mp-prog .meter.w120 { width: 72px; }
  .mp-grow input.w160 { width: 120px !important; }
  .mp-rate { grid-template-columns: 76px minmax(0, 1fr) 28px; }
  .qs-row { grid-template-columns: 112px minmax(0, 1fr); }
}

/* ==== admin: 관리자: 센터·회원·통계·출석·공지 만들기·데스크 ==== */
/* 묶음 "admin" — 관리자 센터·회원·회원 수정·출석 체크·통계·정모 공지 만들기·편집자 데스크 전용.
   공통 부품(app.css·pub.css)으로 안 되는 것만. 화면에 body class "adm" 을 붙여 범위를 좁힌다.
   접두사: .adm-(관리 화면) .an-(공지 만들기 — announce.js 가 만드는 .an-ev .off .nocover .top .tag .info .warn
   .an-fields .an-btn .line .done .btns .an-hint 포함) */

/* 화면 읽기 프로그램용 글(보이지 않음) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- 공통 부품 보정(임시)
   pub.css 의 데스크용 `.acts button`(알약)·`button.danger`(분홍 채움) 가 전역이라
   .row .acts 안의 .btn 과 .link.danger 를 덮는다 → 관리 화면에서 되돌림 */
.adm .acts form, .adm form.inline-form { margin: 0; display: inline-flex; }
.adm .row .acts { gap: 8px 14px; }
.adm .acts .btn { border: 1px solid var(--accent); border-radius: 999px; }
.adm .acts .btn.primary { background: var(--accent); color: #fff; }
.adm .acts .btn.ghost { background: transparent; color: var(--accent); }
.adm .acts .btn.ghost:hover { background: #f2f7fd; }
.adm .acts .btn.danger { background: transparent; color: var(--danger); border-color: rgba(215,0,21,.45); }
.adm .acts .btn.xs { padding: 4px 12px; font-size: 13px; }
.adm .link, .adm .acts .link { background: none; border: 0; border-radius: 0; padding: 0; min-height: 0; position: relative; }
.adm .link.danger, .adm .acts .link.danger { color: var(--danger); font-size: 14px; }
.adm button.link::after { content: ""; position: absolute; inset: -12px -8px; }
.adm .tbl.stack { height: auto; position: static; }   /* pub.css 의 첫 화면 표지 더미 .stack{height:420px} 와 이름이 겹침 */
.adm-ink { color: var(--ink); }
.adm-ink:hover { color: var(--accent); }

/* ---------------------------------------------------------------- 관리자 센터 /admin */
.adm-todo .kpi { min-height: 116px; justify-content: flex-start; }
.adm-todo .kpi .s { margin-top: auto; }
.adm-todo .kpi .s .st { font-size: 13px; }
.adm-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rows { padding-top: 4px; padding-bottom: 4px; }
.adm-rows > .row:first-child { border-top: 0; }
.adm-rows > .empty { padding: 16px 0; margin: 0; }
.row .t .chip.type { vertical-align: 2px; margin-left: 4px; }
.adm-rows .row .t a { color: var(--ink); }
.adm-rows .row .t a:hover { color: var(--accent); }
.adm-set { align-items: stretch; }
.adm-set .card-h { margin-bottom: 12px; }
.adm-desc { margin: 0 0 20px; }
.adm-lg { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0; margin: 0 0 2px; letter-spacing: 0; }
/* app.css .radio-col .check 가 .form label.check(margin 14·flex-start) 보다 약해서 폼 안에서는 안 먹음 → 보정 */
.form .radio-col label.check { margin: 0; min-height: 44px; align-items: center; }
.adm .radio-col .check > span { display: inline-flex; align-items: center; flex-wrap: wrap; }
.adm .radio-col .check input[type=radio] { margin: 0; }
.form label.adm-num { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 16px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
.adm-k { display: inline-block; width: 58px; font-weight: 600; }
.form .help.adm-help { margin: 12px 0 16px; }
.adm-past td { padding-top: 10px; padding-bottom: 10px; }
.adm-past .c-act form { display: inline-flex; }

/* ---------------------------------------------------------------- 회원 /manage_users */
.adm-filter { display: grid; grid-template-columns: minmax(0, 420px) 160px 160px; gap: 8px; align-items: center; margin: 0 0 24px; }
.adm-filter input, .adm-filter select { margin: 0; }
.adm-filter .btn { min-height: 48px; padding: 0 22px; }
.adm-users .t { font-size: 16px; }
.adm-users .chip.admin { font-size: 13px; padding: 2px 8px; margin-left: 4px; vertical-align: 1px; }
.adm-users td { padding-top: 10px; padding-bottom: 10px; }
.adm-users .c-act .acts { flex-wrap: nowrap; gap: 14px; align-items: center; justify-content: flex-end; }
.adm-users .adm-pad { padding-left: 24px; }
.adm-w96 { width: 96px; }
.adm-w160 { width: 150px; }
.adm-m, .adm-badge { display: none; }

/* ---------------------------------------------------------------- 회원 수정 /edit_user */
.adm-form .msg { margin: 0; }
.adm-form .btn.block { margin-top: 24px; }

/* ---------------------------------------------------------------- 출석 체크 /event/N/attendance */
.adm-evinfo { padding: 16px 20px; margin-bottom: 24px; }
.adm-evinfo p { margin: 0; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.adm-evinfo .t { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; }
.adm-att { margin-bottom: 0; }
.form label.adm-attrow { display: flex; align-items: center; gap: 16px; min-height: 56px; margin: 0; font-size: 16px; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; }
.adm-attrow .chip { margin-left: 4px; vertical-align: 1px; }
.adm-attrow .chip.sm { font-size: 13px; padding: 2px 10px; }
.form .adm-attrow input[type=checkbox] { width: 22px; height: 22px; margin: 0; }
.adm-attrow:hover .t { color: var(--accent); }
.adm-attrow.is-host { cursor: default; }
.adm-attrow.is-host:hover .t { color: var(--ink); }

/* ---------------------------------------------------------------- 통계 /admin/stats */
.adm-sub { margin-top: 16px; }
.adm-charts { margin-top: 40px; }
.adm-chart { position: relative; height: 220px; }
.adm-rank { min-height: 48px; padding: 10px 0; }
.adm-rank .main { font-size: 16px; }
.adm-rank .main .caption { margin-left: 2px; }

/* ---------------------------------------------------------------- 정모 공지 만들기 /admin/announce */
.an-month { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.an-month a { width: 40px; height: 40px; border-radius: 50%; background: var(--parchment); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.an-month a:hover { background: #ebebef; text-decoration: none; }
.an-month strong { font-size: 18px; font-weight: 600; min-width: 128px; text-align: center; letter-spacing: -0.01em; }
.an-hint { font-size: 14px; line-height: 1.55; color: var(--ink-2); letter-spacing: 0; font-weight: 400; margin: 0; }
.an-hint b { font-weight: 600; color: var(--ink); }
.an-lead { margin: 0 0 24px; max-width: 760px; }
.an-sec .card-h { margin-bottom: 20px; }
.an-sec .card-h .caption { color: var(--ink-3); }
#an-events > .an-hint { padding: 8px 0; }

/* 모임 행(announce.js 가 만듦) */
.an-ev { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.an-ev:first-child { border-top: 0; padding-top: 0; }
.an-ev:last-child { padding-bottom: 0; }
.an-ev.off { opacity: .45; }
.an-ev img, .an-ev .nocover { width: 64px; height: 92px; object-fit: cover; border-radius: var(--r-cover); background: #e8e8ed; box-shadow: 0 2px 8px rgba(0,0,0,.14); display: block; }
.an-ev .nocover { display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 12px; line-height: 1.35; color: var(--ink-3); box-shadow: none; }
.an-ev .top { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.form .an-ev .top label { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; cursor: pointer; font-variant-numeric: tabular-nums; }
.an-ev .top .tag { display: inline-flex; align-items: center; background: var(--parchment); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.an-ev .top a { font-size: 14px; letter-spacing: 0; }
.an-ev .top .info { flex-basis: 100%; font-size: 14px; color: var(--ink-2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.an-ev .top .warn { flex-basis: 100%; font-size: 14px; color: var(--danger); font-weight: 600; letter-spacing: 0; }
.an-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form .an-fields input { margin-bottom: 12px; }

/* 출력 칸(네이버·모집 글·인스타 글) */
.an-out { margin-bottom: 20px; }
.an-lab { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.an-lab b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.form .an-out input, .form .an-out textarea { margin-bottom: 0; }
.form .an-out textarea { min-height: 220px; font-size: 15px; line-height: 1.6; }
.form textarea.an-tall { min-height: 340px; }
.form textarea.an-mid { min-height: 240px; }
.an-gap { margin-top: 24px; }
.an-h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; margin: 0 0 4px; }
.an-sub { margin: 0 0 16px; }

/* 버튼(템플릿 + announce.js 의 .an-btn / .an-btn.line) — 테두리 알약, 복사·저장되면 .done */
.an-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 14px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; cursor: pointer; position: relative; transition: transform .12s ease; flex-shrink: 0; }
.an-btn::after { content: ""; position: absolute; inset: -6px -2px; }
.an-btn:hover { background: #f2f7fd; }
.an-btn:active { transform: scale(.97); }
.an-btn.sm { min-height: 36px; padding: 8px 18px; font-size: 15px; }
.an-btn.done, .an-btn.done:hover { color: var(--ok); border-color: rgba(26,127,55,.45); background: transparent; }
.an-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.an-guide { margin: 0 0 16px; }

/* 이미지 격자 */
.an-imghead { align-items: flex-start; margin: 8px 0 12px; }
.an-imghead b { margin-right: 6px; }
.an-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 16px; }
.an-imgs.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.an-imgs figure { margin: 0; min-width: 0; }
.an-imgs canvas { width: 100%; height: auto; display: block; border-radius: var(--r-cover); background: #e8e8ed; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.an-imgs figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.an-imgs figcaption > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-imgs figcaption .btns { display: flex; gap: 6px; margin: 0; flex-wrap: nowrap; flex-shrink: 0; }
.an-imgs .an-btn { min-height: 28px; padding: 2px 12px; font-size: 13px; }

/* 양식 고치기 */
.an-tplbox > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.an-tplbox > summary::-webkit-details-marker { display: none; }
.an-tplbox > summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 24px; line-height: 1; }
.an-tplbox[open] > summary { margin-bottom: 20px; }
.an-tplbox[open] > summary::after { content: "–"; }
.an-keys { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.an-keys code, .an-tpl code { font-family: inherit; font-size: 13px; padding: 1px 5px; border-radius: 4px; background: #fff; color: var(--ink); font-weight: 400; }
.an-tpl code { background: var(--parchment); }
.an-tpl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 20px; }
.an-tpl .wide { grid-column: 1 / -1; }
.form .an-tpl textarea { min-height: 140px; font-size: 15px; }
.form .an-tpl textarea.short { min-height: 72px; }
.form .an-tpl textarea.an-mid { min-height: 220px; }
.an-tplsep { border-top: 1px solid var(--hairline); padding: 16px 0; margin-top: 4px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }

/* 아래 저장 바 — 흐름 안에 있는 sticky 라 끝까지 내리면 제자리에 놓여 본문을 가리지 않는다 */
.an-save { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 64px; margin: 32px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--hairline); }
.an-save .caption { margin: 0; }

/* ---------------------------------------------------------------- 편집자 데스크 /admin/desk (pub/desk.html) */
/* label 안에 넣은 입력 칸이 label 의 굵기(600)·회색을 물려받던 것 되돌림 */
.adm .form label > input:not([type=checkbox]):not([type=radio]), .adm .form label > textarea { font-weight: 400; color: var(--ink); letter-spacing: -0.01em; margin-top: 6px; }
.adm .vb .n:empty::before { content: "\00a0"; }
.adm .vb .bar.z { background: #e8e8ed; }
.adm-news td { vertical-align: middle; }
.adm-news .c-act .acts { flex-wrap: nowrap; justify-content: flex-end; }
.adm-news .acts button, .adm-arch .acts button, .adm .qrow .acts button { min-height: 30px; }
.adm-arch { border-top: 1px solid var(--hairline); }
.adm-arch:first-of-type { border-top: 0; }
.adm-arch > summary { list-style: none; cursor: pointer; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 48px; padding: 12px 32px 12px 0; }
.adm-arch > summary::-webkit-details-marker { display: none; }
.adm-arch > summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--ink-3); font-size: 22px; line-height: 1; }
.adm-arch[open] > summary::after { content: "–"; }
.adm-arch-t { font-size: 16px; font-weight: 600; color: var(--ink); }
.adm-arch > summary .st { margin-left: auto; font-size: 13px; }
.adm-arch-f { padding: 0 0 16px; }
.adm-arch-f .grid3 { gap: 0 12px; }
.adm-arch-f input { height: 44px; font-size: 16px; }

/* ---------------------------------------------------------------- 반응형 */
@media (max-width: 760px) {
  .adm-todo .kpi { min-height: 104px; }

  .adm-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-filter .search-row { grid-column: 1 / -1; }
  .adm-users thead { display: none; }
  .adm-users, .adm-users tbody { display: block; }
  .adm-users tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); }
  .adm-users tbody tr:first-child { border-top: 1px solid var(--hairline); }
  .adm-users td { display: block; border: 0 !important; padding: 0; }
  .adm-users td.adm-pc { display: none; }
  .adm-users td.c-act { width: auto; }
  .adm-m { display: block; margin-top: 2px; }
  .adm-badge { display: block; }

  .adm-chart { height: 180px; }

  .an-ev { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .an-ev img, .an-ev .nocover { width: 52px; height: 75px; }
  .an-ev > div:last-child { display: contents; }          /* 폰: 입력 칸은 표지 아래까지 꽉 차게 */
  .an-ev .top { margin-bottom: 0; align-self: start; }
  .an-fields { grid-column: 1 / -1; }
  .an-fields, .an-tpl { grid-template-columns: 1fr; }
  .an-imgs, .an-imgs.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .an-imgs figcaption { flex-direction: column; align-items: flex-start; gap: 6px; }
  .an-imgs figcaption > span:first-child { max-width: 100%; }
  .an-save { margin: 24px 0 0; }
  .an-imghead { flex-direction: column; align-items: flex-start; }

  .adm-news .c-act .acts { justify-content: flex-start; }
  .adm-arch-f .grid3 { grid-template-columns: 1fr; }
  .adm-arch > summary .st { margin-left: 0; }
  .adm-arch > summary .caption { order: 2; flex-basis: 100%; }
}

/* ==== shelf: 달력·책속문장·서재(회원)·지난 모임·투표 ==== */
/* 독톡 안쪽 — shelf 묶음 화면 전용 (캘린더·책속문장·책속문장 상세·서재·지난 모임·도서 투표)
   공통 부품(pub.css → app.css)으로 안 되는 것만 둔다. 접두사: cal- ol- od- lib- pe- vt-
   기획: next/PLAN-inner.md 3절. 나중에 app.css "화면별" 블록으로 합친다. */

/* ---------------------------------------------------------------- 공통 부품 임시 보정 (app.css 반영 요청) */
/* 1) 폼을 버튼 하나 감싸는 데 쓸 때 줄을 깨지 않게 */
.inline-form { display: inline; margin: 0; }
/* 2) pub.css `button.danger`(분홍 채움)가 `.link.danger` 버튼에도 붙어 텍스트 링크에 분홍 상자가 생김 */
button.link, button.link.danger { background: none; border: 0; padding: 0; }
/* 3) pub.css `.stack`(첫 화면 표지 더미, height 420/폰 300)이 `.tbl.stack` 표에도 붙어 표가 늘어남 */
.tbl.stack { height: auto; position: static; }
/* 4) `.quote` 를 <figure> 로 쓰면 브라우저 기본 여백(40px)이 붙어 격자에서 밀림 */
figure.quote { margin: 0; }
/* 5) 표지 없는 칸 제목이 길면 표지 밖으로 넘침 */
.cover.blank > span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- 서재(/library) */
.lib-tools { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 32px; }
.lib-tools .caption { margin: 0; }
.book .lib-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-rate { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0; margin-top: 2px; }
.lib-rate.none { color: var(--ink-3); font-weight: 400; }

/* ---------------------------------------------------------------- 지난 모임(/past_events) */
.pe-years { margin: 0; }
.pe-year { scroll-margin-top: 64px; }
.pe-year.title.sec { margin: 40px 0 12px; }
.page-head + .pe-year.title.sec { margin-top: 0; }
.pe-tbl td:first-child { padding-left: 0; }
.pe-tbl td:last-child { padding-right: 0; }
.pe-year .count { margin-left: 0; font-size: inherit; }
.pe-tbl { font-size: 16px; }
.pe-tbl td { vertical-align: middle; }
.pe-main a.t { color: var(--ink); font-weight: 600; }
.pe-main a.t:hover { color: var(--accent); text-decoration: none; }
.pe-main a.t.pe-untitled { color: var(--ink-3); font-weight: 400; }
.pe-type { font-size: 14px; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; margin-left: 2px; }
.pe-tbl .pe-go { width: 32px; color: var(--ink-3); }
.pe-go .ic { vertical-align: middle; }
.pe-tbl tr.click:hover .pe-go { color: var(--accent); }

/* ---------------------------------------------------------------- 캘린더(/calendar) */
.cal-legend { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin: -16px 0 16px; }
.cal-legend .caption { margin: 0; }
.cal-legend p.caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.cal-ics { white-space: nowrap; }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.cal-dot.free { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-dot.subgroup { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--accent); }

.cal { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.cal-head h2 { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekday { padding: 8px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; border-top: 1px solid var(--hairline); }
.cal-day { min-width: 0; min-height: 88px; padding: 6px 4px 10px; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cal-grid > .cal-day:nth-child(7n+1) { border-left: 0; }
.cal-day.other-month { background: none; }
.cal-day .day-number { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: var(--ink); letter-spacing: 0; flex-shrink: 0; }
.cal-day.today .day-number { background: var(--ink); color: #fff; font-weight: 600; }
.cal-events-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cal-icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.cal-icon-link::after { content: ""; position: absolute; inset: -4px; }
.cal-icon-link:hover { text-decoration: none; }
.cal-icon-link img { display: block; width: 24px; height: 36px; object-fit: cover; border-radius: 3px; background: #e8e8ed; box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.cal-icon-link:hover img, .cal-icon-link:focus-visible img { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-icon-link.no-cover { width: 24px; height: 24px; }
.cal-icon-link.no-cover:hover { background: var(--parchment); }

.cal-upcoming .row { min-height: 64px; }
.cal-upcoming .main > span { display: block; }
.cal-date { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.cal-date .m { font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.cal-date .d { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.cal-type { flex-shrink: 0; margin: 0; }

/* ---------------------------------------------------------------- 책속문장 목록(/oneline) */
.ol-links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ol-add-panel { display: none; margin-bottom: 32px; }
.ol-add-panel.open { display: block; }
.ol-msg, .vt-msg { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.ol-msg.danger { color: var(--danger); }
.ol-result-info { min-width: 0; }
.ol-result-info strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ol-result-info small { font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.ol-selected-book { display: none; }
.ol-selected-book.show { display: block; }
.ol-pick { display: flex; gap: 14px; align-items: center; padding: 8px 0 20px; }
.ol-pick .cover { width: 60px; flex-shrink: 0; }
.ol-pick img[src=""] { visibility: hidden; }
.ol-pick .main { min-width: 0; }
.ol-pick .t { font-size: 17px; font-weight: 600; line-height: 1.4; }
.ol-stars, .od-stars { margin: 0 0 14px; }
.ol-sort { margin: 0 0 28px; }
.ol-shelf .cover-wrap > a { display: block; }
.ol-book a.t { color: var(--ink); }
.ol-book a.t:hover { color: var(--accent); text-decoration: none; }
.ol-book .ol-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-stat { font-size: 13px; color: var(--ink-3); letter-spacing: 0; margin-top: 4px; }
.ol-rate { color: var(--ink); font-weight: 600; }
.ol-feed { padding-top: 12px; padding-bottom: 12px; }
a.ol-feed-item { display: flex; gap: 14px; align-items: flex-start; color: var(--ink); }
a.ol-feed-item:hover { text-decoration: none; }
a.ol-feed-item:hover .ol-feed-book { text-decoration: underline; }
.ol-feed-item .cover { width: 40px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.ol-feed-item .cover.blank { padding: 0; }
.ol-feed-item .main { flex: 1; min-width: 0; }
.ol-feed-item .stars { font-size: 13px; }
.ol-feed-book { font-size: 14px; color: var(--accent); }

/* ---------------------------------------------------------------- 책속문장 상세(/oneline/book/N) */
.od-hero { padding-bottom: 48px; }
.od-avg { font-weight: 600; }
.od-desc { margin-top: 20px; max-width: 640px; }
.od-desc summary { list-style: none; cursor: pointer; }
.od-desc summary::-webkit-details-marker { display: none; }
.od-desc-t { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.6; color: var(--ink-2); letter-spacing: -0.005em; }
.od-desc[open] .od-desc-t { display: block; overflow: visible; }
.od-more, .od-less { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--accent); }
.od-desc summary:hover .od-more, .od-desc summary:hover .od-less { text-decoration: underline; }
.od-less, .od-desc[open] .od-more { display: none; }
.od-desc[open] .od-less { display: inline-block; }
.od-desc.fits summary { cursor: default; pointer-events: none; }
.od-desc.fits .od-more, .od-desc.fits .od-less { display: none; }
.od-acts { margin-top: 24px; align-items: center; }
.od-wish.active { color: var(--danger); }
.od-wish.active .ic { color: var(--danger); }
.od-body { padding: 0 0 96px; }

.od-qform { margin-bottom: 24px; }
.od-qrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 0 12px; align-items: end; }
.od-qrow .btn { min-height: 48px; margin-bottom: 14px; }
.od-quotes { margin-top: 4px; }
.od-quotes > .quote:only-child { grid-column: 1 / -1; }
.quote .od-memo { margin: -4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.quote .foot-row { align-items: center; flex-wrap: wrap; }
.od-qacts { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.od-like { gap: 4px; color: var(--ink-2); }
.od-like.on, .od-like.on .ic { color: var(--danger); }
.od-like-n { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3); }
.od-del { font-size: 13px !important; }
.od-talk { margin-bottom: 16px; }
.od-cform { margin-bottom: 8px; }
.od-reply { display: none; margin: 10px 0 0 16px; }
.od-reply.open { display: block; }
.cmt .tools form { display: inline; }

/* ---------------------------------------------------------------- 도서 투표(/votes) */
.vt-create { display: none; margin-bottom: 32px; }
.vt-create.show { display: block; }
.vt-create .poll-search-results:not(.show) { display: none; }
.vt-create .search-row { margin-bottom: 14px; }
.vt-create .poll-search-results { margin-top: -6px; }
.sec-head + .empty { padding-top: 0; }
.vt-options { margin: 0 0 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 0 14px; }
.vt-options:empty { display: none; }
.option-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); }
.option-row:first-child { border-top: 0; }
.option-row img { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--parchment); }
.vt-opt-main { flex: 1; min-width: 0; }
.vt-opt-t { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form .option-row input[type=text] { margin: 0; flex: 1; min-width: 0; }
.form .vt-help { margin: 0 0 12px; }
.vt-meta { margin: -8px 0 4px; }
.vt-result { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.vt-result .meter { flex: 1; max-width: 240px; }

/* ---------------------------------------------------------------- 폰 */
@media (max-width: 760px) {
  .pe-tbl.stack .pe-go { display: none; }
  .pe-tbl.stack .c-date { padding-top: 0; }
  .pe-tbl.stack .pe-main { font-size: 16px; }

  .cal-legend { justify-content: flex-start; margin-top: -12px; }
  .cal-head { padding: 10px 12px; }
  .cal-head h2 { font-size: 18px; }
  .cal-day { min-height: 56px; padding: 4px 2px 6px; gap: 2px; }
  .cal-day .day-number { width: 24px; height: 24px; font-size: 13px; }
  .cal-events-wrap { gap: 2px; }
  .cal-icon-link img { width: 16px; height: 24px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
  .cal-icon-link.no-cover { width: 16px; height: 16px; }
  .cal-dot { width: 7px; height: 7px; }

  .od-hero { padding-bottom: 40px; }
  .od-body { padding-bottom: 64px; }
  .od-qrow { grid-template-columns: 96px minmax(0, 1fr); }
  .od-qrow .btn { grid-column: 1 / -1; width: 100%; }
  .od-acts { margin-top: 20px; }
}

/* ==== 완성 검수(REVIEW-inner.md) 반영 ==== */
/* 폰 터치 영역 44: 모양은 그대로, 누르는 범위만 넓힘 */
@media (max-width: 760px) {
  .place-links a, .place-links button, .cmt .tools button, .cmt .tools a, .crumb, .link.danger,
  .ol-links a, .mp-foot a, .cal-ics, .mp-withdraw .link, .page-head .actions .link { position: relative; }
  .place-links a::after, .place-links button::after, .cmt .tools button::after, .cmt .tools a::after, .crumb::after,
  .link.danger::after, .ol-links a::after, .mp-foot a::after, .cal-ics::after, .mp-withdraw .link::after,
  .page-head .actions .link::after { content: ""; position: absolute; inset: -11px -6px; }
  .cal-icon-link::after { inset: -12px -6px; }
  .axis-dot::after { inset: -11px; }
}
/* 데스크의 삭제·승인 버튼도 다른 관리 화면처럼 테두리만 */
.acts button.danger, .panel button.danger { background: transparent; color: var(--danger); border: 1px solid rgba(215,0,21,.45); }
.acts button.ok, .panel button.ok { background: transparent; color: var(--ok); border: 1px solid rgba(26,127,55,.45); }
/* 데스크 입력 높이도 48 */
.row-form input, .adm-arch-f input { height: 48px; }
/* 회원 관리 PC: 닉네임 열을 줄여 숫자 열을 당김 */
@media (min-width: 761px) { .adm-users th:first-child { width: 36%; } }


/* ==== 데스크 소식 후보함(newsdesk.py) ==== */
.nd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.nd-head .title { margin-bottom: 4px; }
.nd-sub { margin: 0 0 16px; }
.nd-seg { margin-bottom: 8px; }
.nd-seg .num { color: inherit; opacity: .6; font-size: 13px; }
.nd-note { margin: 8px 0 0; }
.nd-row { align-items: flex-start; }
.nd-row .t { display: inline; }
.nd-star { }
.nd-tags { margin: 6px 0 0; }
.nd-others { margin-top: 6px; }
.nd-others summary { cursor: pointer; color: var(--ink-2); }
.nd-others ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.nd-acts { flex-wrap: nowrap; gap: 8px; }
.nd-acts .nd-in { height: 36px; font-size: 14px; width: 200px; padding: 0 12px; }
.nd-more { margin: 16px 0 0; text-align: center; }
.nd-sources { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.nd-sources > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.nd-sources > summary::-webkit-details-marker { display: none; }
.nd-sources > summary::before { content: "›"; display: inline-block; color: var(--ink-3); transition: transform .15s; }
.nd-sources[open] > summary::before { transform: rotate(90deg); }
.nd-src { margin-top: 12px; }
.nd-src .t { font-weight: 600; }
.nd-src tr.nd-off td { opacity: .5; }
.nd-rule { margin-top: 4px; }
.nd-rule summary { cursor: pointer; color: var(--ink-2); }
.nd-rule-f { margin-top: 8px; max-width: 560px; }
.nd-rule-f input { height: 40px; font-size: 15px; }
.nd-add { margin-top: 24px; }
.nd-add h3.part-h { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.nd-daegu { margin: 20px 0 0; }
@media (max-width: 760px) {
  .nd-acts { flex-wrap: wrap; width: 100%; }
  .nd-acts .nd-in { width: 100%; flex: 1 1 100%; }
}
/* 관리 화면 .adm .acts .btn(파란 테두리)이 quiet·danger 를 덮지 않게 */
.adm .acts .btn.quiet { border-color: transparent; background: var(--parchment); color: var(--ink); }
.adm .acts .btn.danger { border-color: rgba(215,0,21,.45); background: transparent; color: var(--danger); }
.pre-line { white-space: pre-line; }
/* 데스크 '처음 오셨나요 안내' 편집 */
.jn-form { margin-top: 16px; max-width: 760px; }
.jn-form h3.part-h { font-size: 17px; font-weight: 600; margin: 24px 0 12px; }
.jn-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.jn-n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; }
.jn-step textarea { min-height: 72px; }
.jn-faq { border-top: 1px solid var(--hairline); padding-top: 14px; }
.jn-faq textarea { min-height: 72px; }
.jn-faq.jn-new input:not(.jn-o), .jn-faq.jn-new textarea { background: var(--parchment); }
.jn-faq-top { display: flex; gap: 8px; align-items: center; }
.jn-faq-top input { margin-bottom: 8px !important; }
.form .jn-o { width: 56px !important; flex-shrink: 0; text-align: center; padding: 0 6px !important; }
.jn-faq-top input[name^=q] { flex: 1; min-width: 0; font-weight: 600; }
.form label.check.jn-del { margin: 0 0 8px; flex-shrink: 0; font-size: 14px; color: var(--ink-2); }

/* ==== 책속문장: SNS처럼 올리기 + 문장 전시 벽 ==== */
.ol-compose { padding: 20px 24px 16px; transition: border-color .2s; }
.ol-compose:focus-within { border-color: rgba(0,102,204,.35); }
.form .ol-compose-text { border: 0; padding: 4px 0; height: auto; min-height: 96px; font-size: 19px; line-height: 1.7; margin-bottom: 12px; resize: vertical; }
.form .ol-compose-text:focus { outline: none; }
.ol-compose-book { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 0 12px; }
.ol-book-in { display: flex; gap: 8px; min-width: 0; }
.ol-book-in input { flex: 1; min-width: 0; }
.ol-book-in .btn { height: 48px; min-height: 48px; flex-shrink: 0; }
.ol-picked { margin: -6px 0 12px; color: var(--ok); }
.ol-compose-foot { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: 14px; }
.ol-compose-foot .check { margin: 0; flex: 1 1 280px; font-size: 15px; }
.ol-compose-foot .check .hint { display: block; }
.ol-wall { columns: 3 280px; column-gap: 20px; }
.ol-post { break-inside: avoid; margin: 0 0 20px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 24px 22px 14px; display: flex; flex-direction: column; gap: 12px; }
.ol-post blockquote { margin: 0; font-size: 18px; line-height: 1.7; letter-spacing: -0.01em; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ol-post .ol-memo { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ol-post .ol-memo::before { content: "— "; }
.ol-post-src { margin: 0; font-size: 14px; color: var(--ink-2); }
.ol-post-src a { color: var(--ink); font-weight: 600; }
.ol-post-foot { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; border-top: 1px solid var(--hairline); padding-top: 12px; font-size: 13px; color: var(--ink-3); letter-spacing: 0; }
.ol-post-foot .who { color: var(--ink-2); font-weight: 600; }
.ol-post-acts { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; }
.ol-like { position: relative; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 2px; color: var(--ink-3); cursor: pointer; font-size: 13px; }
.ol-like::after { content: ""; position: absolute; inset: -10px -8px; }
.ol-like.on { color: var(--danger); }
.ol-post.hot { background: var(--tile); border-color: transparent; }
.ol-post.hot blockquote { color: var(--on-tile); }
.ol-post.hot .ol-memo, .ol-post.hot .ol-post-src, .ol-post.hot .ol-post-foot .who { color: var(--on-tile-2); }
.ol-post.hot .ol-post-src a { color: #fff; }
.ol-post.hot .ol-post-foot { border-color: rgba(255,255,255,.12); color: #8e8e93; }
.ol-post.hot .chip { background: #3a3a3c; color: var(--on-tile); }
.ol-post.hot .ol-like.on { color: #ff6b6b; }
.ol-post.just { animation: ol-just 2.6s ease-out; }
@keyframes ol-just { 0%, 30% { box-shadow: 0 0 0 3px rgba(0,102,204,.55); } 100% { box-shadow: 0 0 0 3px rgba(0,102,204,0); } }
@media (max-width: 760px) {
  .ol-compose { padding: 16px 16px 14px; }
  .form .ol-compose-text { font-size: 17px; min-height: 84px; }
  .ol-compose-book { grid-template-columns: 1fr; }
  .ol-compose-book .ol-page { max-width: 160px; }
  .ol-compose-foot .btn { flex: 1; }
  .ol-post { padding: 20px 18px 12px; }
  .ol-post blockquote { font-size: 17px; }
}

/* ==== 홈 '책 속 한 줄': 흐르다가 가운데를 지나는 문장이 크게 떠오르고, 그때 흐름이 느려져 잠깐 머묾(pub.js 가 --f 0~1) ==== */
.quotes .q-row { padding: 30px 0; }
@media (prefers-reduced-motion: reduce) { .quotes .q-row { padding: 30px 24px; } }  /* 손으로 넘길 때 첫 카드가 가장자리에 붙지 않게 */
.quotes.spot .q { opacity: calc(.2 + .8 * var(--f, 0)); transform: scale(calc(.9 + .16 * var(--f, 0)));
  background-color: rgb(calc(40 + 26 * var(--f, 0)) calc(40 + 26 * var(--f, 0)) calc(42 + 26 * var(--f, 0)));
  box-shadow: 0 0 0 1px rgba(255,255,255, calc(.22 * var(--f, 0))); will-change: opacity, transform; position: relative; z-index: 0; }
.quotes.spot .q::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--accent-dark);
  opacity: var(--f, 0); margin-bottom: -6px; }
.quotes.spot .q.focus { z-index: 2; }
.quotes.spot .q.focus blockquote { color: #fff; }
.quotes.spot .q.focus .src { color: #d1d1d6; }
.q .q-cov { width: 22px; height: 33px; object-fit: cover; border-radius: 3px; vertical-align: -10px; margin-right: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* ==== 공개 '책 속 한 줄': 오늘의 문장 + 전시 벽 ==== */
.q-feature { margin: 40px 0 0; padding: 40px 0 8px; border-top: 1px solid rgba(255,255,255,.12); }
.q-feature blockquote { margin: 0; font-size: 30px; line-height: 1.55; letter-spacing: -0.02em; color: #fff; max-width: 860px; white-space: pre-wrap; }
.q-feature .src { margin-top: 16px; font-size: 15px; color: var(--on-tile-2); }
.q-feature .tag { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-dark); margin-bottom: 14px; letter-spacing: 0; }
.q-wall { columns: 3 300px; column-gap: 20px; margin-top: 40px; }
.q-wall .q { width: auto; break-inside: avoid; margin: 0 0 20px; display: flex; }
@media (max-width: 760px) { .q-feature blockquote { font-size: 23px; } .q-wall { margin-top: 32px; } }

/* ==== 책속문장 전시관(어두운 띠): 스포트라이트 + 전시 벽 ==== */
.ol-gallery .page-head { margin-bottom: 32px; }
.ol-spot { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #2c2c2e; }
.ol-spot-stage { display: grid; }
.ol-slide { grid-area: 1 / 1; margin: 0; position: relative; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; overflow: hidden; }
.ol-slide.on { opacity: 1; visibility: visible; }
.ol-slide-bg { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(50px) saturate(1.25); opacity: .5; transform: scale(1.1); }
.ol-slide-bg::after { content: ""; position: absolute; inset: 0; background: rgba(29,29,31,.45); }
.ol-slide-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 56px; align-items: center; padding: 56px 56px 80px; min-height: 380px; }
.ol-slide-tag { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-dark); letter-spacing: 0; }
.ol-slide blockquote { margin: 14px 0 0; font-size: 32px; line-height: 1.5; letter-spacing: -0.025em; color: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
.ol-slide.long blockquote { font-size: 22px; line-height: 1.65; }
.ol-slide-memo { margin: 16px 0 0; font-size: 17px; color: #d1d1d6; }
.ol-slide figcaption { margin-top: 22px; font-size: 15px; color: var(--on-tile-2); }
.ol-slide figcaption a { color: #fff; font-weight: 600; }
.ol-slide-who { display: block; margin-top: 6px; font-size: 13px; color: #8e8e93; }
.ol-slide-cover { justify-self: center; }
.ol-slide-cover .cover { width: 210px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.ol-slide-cover .cover.blank { width: 210px; }
.ol-spot-nav { position: absolute; z-index: 2; left: 56px; bottom: 22px; display: flex; align-items: center; gap: 14px; }
.ol-spot-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ol-spot-btn:hover { background: rgba(255,255,255,.24); }
.ol-dots { display: inline-flex; gap: 8px; align-items: center; }
.ol-dot { position: relative; width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.32); cursor: pointer; transition: width .3s, background .3s; }
.ol-dot::after { content: ""; position: absolute; inset: -12px -6px; }
.ol-dot.on { width: 22px; background: #fff; }
.ol-wall-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin: 56px 0 20px; }
.ol-wall-head .title { font-size: 24px; }
.ol-wall-head a { color: var(--accent-dark); }
.ol-gallery .ol-wall { columns: 3 280px; column-gap: 20px; }
.ol-gallery .ol-post { background: #2c2c2e; border-color: transparent; transition: transform .2s ease, background .2s; }
.ol-gallery .ol-post:hover { background: #333336; transform: translateY(-2px); }
.ol-gallery .ol-post blockquote { color: var(--on-tile); }
.ol-gallery .ol-post.big blockquote { font-size: 24px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; }
.ol-gallery .ol-post .ol-memo { color: #aeaeb2; }
.ol-gallery .ol-post-src { display: flex; gap: 10px; align-items: center; color: var(--on-tile-2); }
.ol-gallery .ol-post-src img { width: 28px; height: 42px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.ol-gallery .ol-post-src a { color: #fff; }
.ol-gallery .ol-post-foot { border-color: rgba(255,255,255,.1); color: #8e8e93; }
.ol-gallery .ol-post-foot .who { color: #c7c7cc; }
.ol-gallery .ol-like { color: #8e8e93; }
.ol-gallery .ol-like.on { color: #ff6b6b; }
.ol-gallery .chip { background: #3a3a3c; color: var(--on-tile); }
.ol-gallery .chip.line { background: transparent; border-color: rgba(255,255,255,.3); }
.ol-gallery .link.danger { color: #ff6b6b; }
/* 하트 2개 이상 — 어두운 벽에서 하얗게 */
.ol-gallery .ol-post.hot, .ol-gallery .ol-post.hot:hover { background: #f5f5f7; }
.ol-gallery .ol-post.hot blockquote { color: var(--ink); }
.ol-gallery .ol-post.hot .ol-memo, .ol-gallery .ol-post.hot .ol-post-src { color: var(--ink-2); }
.ol-gallery .ol-post.hot .ol-post-src a { color: var(--ink); }
.ol-gallery .ol-post.hot .ol-post-foot { border-color: var(--hairline); color: var(--ink-3); }
.ol-gallery .ol-post.hot .ol-post-foot .who { color: var(--ink-2); }
.ol-gallery .ol-post.hot .ol-like.on { color: var(--danger); }
.ol-gallery .ol-post.hot .chip { background: var(--canvas); color: var(--ink); }
.ol-post.more { display: none; }
.ol-wall.all .ol-post.more { display: flex; }
.ol-gallery .btns { margin-top: 24px; }
.ol-gallery .btn.ghost { color: var(--accent-dark); border-color: var(--accent-dark); }
.ol-compose-band .ol-links { margin-top: 16px; }
@media (max-width: 760px) {
  .ol-slide-in { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px 72px; min-height: 0; }
  .ol-slide-cover { order: -1; justify-self: start; }
  .ol-slide-cover .cover, .ol-slide-cover .cover.blank { width: 96px; }
  .ol-slide blockquote { font-size: 23px; }
  .ol-slide.long blockquote { font-size: 18px; }
  .ol-spot-nav { left: 22px; bottom: 18px; }
  .ol-wall-head { margin-top: 40px; }
  .ol-gallery .ol-post.big blockquote { font-size: 21px; }
}
.ol-wall-head a { white-space: nowrap; }

/* ==== 정모 종류 배지(type_badge) — 모양으로 구분 ==== */
.type-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.type-badge.t-regular { background: var(--ink); color: #fff; }
.type-badge.t-free { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.28); }
.type-badge.t-online_free { background: #e8f0fb; color: #004a99; }
.type-badge.t-subgroup { background: transparent; color: var(--ink-2); border: 1.5px dashed rgba(0,0,0,.35); }
.ev .type-badge { margin-left: 6px; }
.ev-badges { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ev-badges .type-chip { margin: 0; }
.ev-sec:first-of-type { margin-top: 8px; }
.tile .type-badge.t-regular { background: #fff; color: var(--ink); }

/* ==== 책 페이지: 공개된 발제·한줄평, 인용 출처, 책 추천 띠 ==== */
.pt-list { margin: 0; padding: 0; list-style: none; counter-reset: pt; display: flex; flex-direction: column; }
.pt-list li { counter-increment: pt; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.pt-list li:first-child { border-top: 0; }
.pt-list li::before { content: counter(pt); grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.pt-list p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink); }
.pr-grid { columns: 3 280px; column-gap: 20px; }
.pr { break-inside: avoid; margin: 0 0 20px; background: var(--parchment); border-radius: var(--r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.pr .stars { color: var(--ink); font-size: 14px; letter-spacing: 2px; }
.pr blockquote { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.src-note { margin-top: 20px; }
.locked.one { grid-template-columns: 1fr; max-width: 520px; }
.rec-band { padding: 64px 0; }
.rec-band .head-row { margin-bottom: 24px; }
.rec-band .title { font-size: 21px; }
.rec-shelf .book .d { color: var(--ink-2); font-size: 12px; }
@media (max-width: 760px) { .rec-band { padding: 48px 0; } .pt-list p { font-size: 17px; } }
/* 글쓰기 칸 공개 동의 */
.form label.check.pub-ok { font-size: 15px; margin: 4px 0 12px; }
.form label.check.pub-ok .hint { display: block; }
/* 내 글 공개 설정 */
.mc-nav { margin: 8px 0 0; }
.mc-item .mc-text { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.mc-item .btns { margin-top: 12px; }
.wr-row.wr-hidden { opacity: .55; }

/* 스크립트가 띠를 움직일 때(.spot)는 CSS 애니메이션을 끔 */
.quotes.spot .q-row { animation: none; will-change: transform; }

/* ==== 데스크 '책 추천' ==== */
#recs .part-h { font-size: 17px; font-weight: 600; margin: 24px 0 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rc-row { align-items: center; }
.rc-cov { width: 40px; flex-shrink: 0; }
.rc-cov .cover { width: 40px; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.rc-cov .cover.blank { font-size: 9px; padding: 2px; }
.rc-note { display: flex; gap: 8px; align-items: center; margin-top: 6px; max-width: 460px; }
.rc-note .input { height: 36px; font-size: 14px; padding: 0 12px; }
.rc-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.rc-add input { margin: 0 !important; height: 40px !important; font-size: 15px !important; flex: 1 1 220px; }
.rc-add .btn { flex-shrink: 0; }
.rc-auto { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.rc-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-card .cover { width: 100%; }
.rc-card .t { font-size: 13px; font-weight: 600; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-card .d { font-size: 12px; color: var(--ink-3); }
.rc-btns { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.rc-hidden { margin: 0; }
.rc-chip { cursor: pointer; gap: 6px; font-weight: 400; }
.rc-set { margin-top: 24px; }
.rc-form { margin-top: 12px; max-width: 640px; }
.rc-pages input { margin: 0 !important; height: 40px !important; font-size: 15px !important; }
.rec-shelf .book .d.rec-pin { color: var(--accent); font-weight: 600; }
@media (max-width: 1023px) { .rc-auto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rc-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rc-note { flex-wrap: wrap; } }
.rc-form .check .hint { display: block; }

/* 책 페이지 독톡 기록 문장 · 데스크 검색 노출 */
.book-record { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 520px; }
.seo-box { margin-top: 20px; border-top: 1px solid var(--hairline); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.seo-box code { font-size: 12px; background: var(--parchment); padding: 1px 6px; border-radius: 4px; }

/* 데스크 '운영진이 고른 문장' */
.eq-form { margin-top: 12px; max-width: 860px; }
.eq-row { border-top: 1px solid var(--hairline); padding-top: 14px; }
.eq-row textarea { min-height: 64px; }
.eq-row.eq-new input:not(.eq-o), .eq-row.eq-new textarea { background: var(--parchment); }
.eq-top { display: grid; grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.2fr) 72px auto; gap: 8px; align-items: center; }
.eq-top input { margin-bottom: 8px !important; }
.form .eq-o, .form .eq-p { text-align: center; padding: 0 6px !important; }
.form label.check.eq-del { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) { .eq-top { grid-template-columns: 48px minmax(0, 1fr) 64px; } .eq-top input[name^=a] { grid-column: 2 / 3; } }

.join-ask { margin-top: 24px; font-size: 16px; color: var(--ink-2); }

/* 대구 도서관(정보나루) — 홈 '대구가 빌려 읽은 책' 띠 · 정모/책 '대구 도서관 N곳' · 대구 도서관에서 찾기 */
#news + .lib-band { padding-top: 0; }
#news + .lib-band > .wrap { border-top: 1px solid var(--hairline); padding-top: 72px; }
.lib-tabs { margin: -12px 0 28px; }
.lib-cov { position: relative; display: block; }
.lib-cov .rk { position: absolute; left: -8px; top: -8px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); box-shadow: 0 4px 12px rgba(0,0,0,.12); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.lib-cov .rk.top { background: var(--ink); color: #fff; border-color: var(--ink); }
.lib-shelf .book .d { font-size: 13px; color: var(--ink-3); }
.lib-read { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0; }
.lib-sample { color: var(--warn); font-weight: 600; }
.ev .lib-line { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
.ev .lib-line b { color: var(--ok); }
.ev .lib-line .ic { color: var(--ink-3); flex-shrink: 0; }
.d-row > .d-ic { color: #6e6e73; margin-top: 4px; }
.lib-more { margin-top: 6px; font-size: 15px; }
.lib-more summary { cursor: pointer; color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.lib-more summary::-webkit-details-marker { display: none; }
.lib-more summary::after { content: "›"; display: inline-block; transform: rotate(90deg); transition: transform .15s; }
.lib-more[open] summary::after { transform: rotate(-90deg); }
.lib-more .lib-hold { margin-top: 12px; }
.lib-sum { margin: 0 0 12px; font-size: 16px; }
.lib-sum .ok { color: var(--ok); }
.lib-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.lib-list li { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.4; }
.lib-gu { font-size: 13px; color: var(--ink-3); letter-spacing: 0; }
.lib-nm a { color: var(--ink); }
.lib-nm a:hover { color: var(--accent); }
.lib-st { font-size: 13px; color: var(--ink-3); white-space: nowrap; letter-spacing: 0; }
.lib-st.ok { color: var(--ok); font-weight: 600; }
.lib-hold .fine-note { margin-top: 12px; }
.ed-lib .lib-list li { grid-template-columns: 48px minmax(0,1fr) auto; font-size: 14px; }
.find-form { display: grid; grid-template-columns: minmax(0,1fr) 140px auto; gap: 10px; margin-top: 28px; }
.find-form input, .find-form select { height: 48px; min-width: 0; border: 1px solid #d2d2d7; border-radius: var(--r-md); padding: 0 14px; background: var(--canvas); font-size: 17px; }
.find-form .btn { height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.find-book { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 20px; align-items: center; margin-bottom: 24px; }
.find-book .title { margin: 0 0 4px; }
.find-book .lib-read { font-size: 14px; margin-top: 8px; }
.find-gus { flex-wrap: wrap; overflow: visible; margin-bottom: 20px; }
.band.parchment .seg a:not(.on) { background: var(--canvas); }
.find-count { margin: 0 0 12px; }
.find-results { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.find-results a { display: grid; grid-template-columns: 52px minmax(0,1fr) 20px; gap: 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink); }
.find-results a:hover { text-decoration: none; border-color: rgba(0,0,0,.2); }
.find-results .cover { width: 52px; }
.find-results .cover.blank { font-size: 10px; padding: 4px; }
.fr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-txt b { font-weight: 600; }
.fr-txt .lib-read { margin-top: 2px; }
.fr-go { color: var(--ink-3); }
@media (max-width: 760px) {
  #news + .lib-band > .wrap { padding-top: 48px; }
  .lib-cov .rk { left: -4px; top: -6px; min-width: 26px; height: 26px; font-size: 13px; }
  .find-form { grid-template-columns: minmax(0,1fr) 112px; }
  .find-form .btn { grid-column: 1 / -1; }
  .find-book { grid-template-columns: 76px minmax(0,1fr); }
}
.lib-all { display: inline-block; margin-top: 12px; font-size: 15px; }
.ed-lib .lib-hold > .caption { margin: 0 0 8px; }
.lib-note { margin: -12px 0 24px; }
.lib-note a { white-space: nowrap; }
.lib-shelf .book .lib-why { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- 캘린더에 저장(정모 화면) · 정모 달력 구독(/calendar/add)
   .ics 를 그냥 열면 PC·안드로이드는 파일만 받아져서 — 구글 캘린더 / 아이폰(.ics·webcal) 골라 누르게 */
.ed-2btn .cal-add { flex: 1; position: relative; }
.cal-add > summary { list-style: none; width: 100%; }
.cal-add > summary::-webkit-details-marker { display: none; }
.cal-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; display: grid; padding: 6px;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.cal-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.cal-menu a:hover { background: var(--parchment); }
.cal-menu .caption { font-weight: 400; }
.cal-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.cal-sub { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--hairline); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.cal-sub:hover { border-color: var(--accent); }
.cal-sub svg { color: var(--accent); }
.cal-sub b { font-size: 17px; }
.cal-other { margin: 28px 0 8px; }
.cal-url { display: flex; gap: 8px; }
.cal-url input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--parchment); color: var(--ink-2); }
@media (max-width: 560px) { .cal-subs { grid-template-columns: 1fr; } }
.lib-howto { margin: 0 0 8px; }
.lib-nm a .lib-go { color: var(--accent); }