/* 제19회 한솔제 운영위원회 — 교육부·KRDS 공공 누리집 형식 참고, 그린나래 남색 */
:root {
  --pri: #1b3a6b; --pri-d: #11284d; --pri-l: #e7edf6; --pri-ll: #f4f7fb; --navy-t: #063a74;
  --tx: #1e2124; --tx2: #464c53; --mu: #6d7882; --ln: #d6dce1; --ln2: #e9edf0;
  --bg: #f4f5f6; --card: #fff;
  --ok: #157a3c; --ok-l: #e5f4ea; --warn: #a15c00; --warn-l: #fff3df; --err: #c62828; --err-l: #fdecec; --info: #1c62c4; --info-l: #e8f0fc;
  --r: 8px; --sh: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --wrap: 1200px; --hdr: 76px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: 'Pretendard GOV Variable', 'Pretendard GOV', 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif; font-size: 17px; line-height: 1.6; color: var(--tx); background: var(--bg); word-break: keep-all; overflow-wrap: anywhere; }
body.noscroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; letter-spacing: -.01em; }
p { margin: 0 0 .5em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
.ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.ic.sm { width: 15px; height: 15px; vertical-align: -2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: var(--pri); color: #fff; padding: 8px 16px; z-index: 100; }
.skip:focus { left: 0; }
.pre { white-space: pre-line; }
.muted { color: var(--mu); } .small { font-size: 14px; } .mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
.err-t { color: var(--err); } .warn-t { color: var(--warn); background: var(--warn-l); padding: 8px 12px; border-radius: 6px; font-size: 14px; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }
.sp { flex: 1; }

/* 상단 */
.topbar { background: #f4f5f6; border-bottom: 1px solid var(--ln2); font-size: 13px; color: var(--tx2); }
.topbar .wrap { display: flex; align-items: center; height: 36px; gap: 12px; }
.gov-mark { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-links { margin-left: auto; display: flex; gap: 14px; white-space: nowrap; }
.top-links a:hover { text-decoration: underline; }
.hdr { background: #fff; border-bottom: 1px solid var(--ln); position: sticky; top: 0; z-index: 30; }
.hdr .wrap { display: flex; align-items: center; height: var(--hdr); gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand small { display: block; font-size: 12px; color: var(--mu); line-height: 1.2; }
.brand strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--tx); }
.logo { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.gnb { display: flex; margin-left: auto; height: 100%; }
.gnb-item { position: relative; display: flex; align-items: center; }
.gnb-item > a { padding: 0 20px; font-size: 18px; font-weight: 700; color: var(--navy-t); height: 100%; display: flex; align-items: center; border-bottom: 3px solid transparent; }
.gnb-item:hover > a, .gnb-item.on > a { color: var(--pri); border-bottom-color: var(--pri); }
.gnb-sub { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--ln); border-radius: 0 0 var(--r) var(--r); box-shadow: 0 8px 20px rgba(0,0,0,.08); min-width: 160px; padding: 8px; }
.gnb-item:hover .gnb-sub, .gnb-item:focus-within .gnb-sub { display: block; }
.gnb-sub a { display: block; padding: 8px 12px; border-radius: 6px; white-space: nowrap; font-size: 15px; }
.gnb-sub a:hover { background: var(--pri-l); color: var(--pri); }
.hdr-act { display: flex; align-items: center; gap: 4px; }
.menu-btn { display: none; }

.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--tx2); }
.icon-btn:hover { background: var(--bg); }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn.danger { color: var(--err); }
.dot { display: none; position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
.dot.show { display: block; }
.cnt { display: none; margin-left: 4px; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--err); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; }
.cnt.show { display: inline-block; }

/* 드로어 (모바일 메뉴) */
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; opacity: 0; pointer-events: none; visibility: hidden; overflow: hidden; transition: opacity .2s, visibility .2s; }
.drawer.open { opacity: 1; pointer-events: auto; visibility: visible; }
.drawer-in { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 86vw); background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); padding-bottom: 40px; }
.drawer.open .drawer-in { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--ln); background: var(--pri-ll); }
.who { display: flex; gap: 10px; align-items: center; } .who small { display: block; color: var(--mu); }
.drawer-g { padding: 12px 16px; border-bottom: 1px solid var(--ln2); }
.drawer-g b { display: block; font-size: 13px; color: var(--mu); margin-bottom: 4px; }
.drawer-g a { display: block; padding: 9px 0; font-weight: 600; }

/* 서브 비주얼 */
.subvis { background: #fff; border-bottom: 1px solid var(--ln2); }
.subvis .wrap { padding-top: 22px; padding-bottom: 22px; }
.subvis h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.subvis p { display: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--mu); align-items: center; }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: #aab2b9; }
.lnb { background: #fff; border-bottom: 1px solid var(--ln); position: sticky; top: var(--hdr); z-index: 20; }
.lnb .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.lnb .wrap::-webkit-scrollbar { display: none; }
.lnb a { padding: 13px 14px; white-space: nowrap; font-weight: 600; color: var(--tx2); border-bottom: 3px solid transparent; }
.lnb a.on { color: var(--pri); border-bottom-color: var(--pri); }
.main { padding-top: 28px; padding-bottom: 60px; min-height: 50vh; display: block; }
.main.full { padding: 0 0 60px; }
.main.narrow { max-width: 520px; }

/* 하단 */
.ftr { background: #1e2124; color: #c9d0d6; font-size: 14px; padding: 28px 0 32px; }
.ftr-brand { display: flex; align-items: center; gap: 8px; color: #fff; margin-bottom: 8px; }
.ftr-brand .logo { width: 32px; height: 32px; }
.ftr .muted { color: #8b949c; margin-top: 8px; }

/* 하단 탭바 (모바일) */
.tabbar { display: none; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--ln); background: #fff; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { border-color: #aab2b9; background: #fafbfc; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn.primary:hover { background: var(--pri-d); }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg); }
.btn.ghost.danger { color: var(--err); background: transparent; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 14px; }
.btn.lg { height: 50px; padding: 0 22px; font-size: 16px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.link { background: none; border: 0; padding: 0; color: var(--info); cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; }

/* 카드·공통 */
.card { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 20px; margin-bottom: 16px; }
.card h3 { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-h h2, .card-h h3 { font-size: 20px; font-weight: 700; margin: 0; }
.more { margin-left: auto; font-size: 14px; color: var(--mu); display: flex; align-items: center; }
.more:hover { color: var(--pri); }
.h2 { font-size: 22px; margin: 32px 0 12px; } .h3 { font-size: 17px; margin: 24px 0 8px; } .h4 { font-size: 15px; margin: 16px 0 6px; color: var(--tx2); display: flex; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.card .toolbar:last-child { margin-bottom: 0; margin-top: 12px; }
.empty { text-align: center; padding: 48px 16px; color: var(--mu); }
.empty .ic { width: 40px; height: 40px; color: #b8c0c7; margin-bottom: 8px; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--bg); color: var(--tx2); font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid var(--ln2); }
.badge.pri { background: var(--pri-l); color: var(--pri); border-color: transparent; }
.badge.ok { background: var(--ok-l); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-l); color: var(--warn); border-color: transparent; }
.badge.err { background: var(--err-l); color: var(--err); border-color: transparent; }
.badge.info { background: var(--info-l); color: var(--info); border-color: transparent; }
.badge.muted { color: var(--mu); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--bg); border: 1px solid var(--ln2); font-size: 13px; font-weight: 600; color: var(--tx2); cursor: default; }
a.chip, button.chip { cursor: pointer; }
.chip.on { background: var(--pri); color: #fff; border-color: var(--pri); }
.chip.person { background: #eef4ff; color: #2a55a8; border-color: transparent; }
.chip.unit { background: var(--pri-l); color: var(--pri); border-color: transparent; }
.chip.div { background: #f3ecff; color: #6a3fc0; border-color: transparent; }
.chip.all { background: #e8ebef; color: #33404d; border-color: transparent; }
.chips-f { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--ln); border-radius: 8px; padding: 3px; gap: 2px; overflow-x: auto; max-width: 100%; }
.seg a, .seg button { padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--tx2); border: 0; background: none; cursor: pointer; }
.seg .on { background: #fff; color: var(--pri); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.seg b { color: var(--mu); font-weight: 600; margin-left: 2px; }
.seg.wide { display: flex; margin-bottom: 16px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 12px 0; font-size: 15px; }
.dl dt { color: var(--mu); } .dl dd { margin: 0; }
.dl.compact { gap: 2px 10px; font-size: 14px; margin: 6px 0; }
.plain li { padding: 6px 0; border-bottom: 1px solid var(--ln2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.order-btns { display: inline-flex; }

/* 폼 */
.form { display: block; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--tx2); }
.field > span em { color: var(--err); font-style: normal; }
.field small { display: block; color: var(--mu); font-size: 13px; margin-top: 4px; }
.field.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.field.inline > span { margin: 0; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color])), :where(select), :where(textarea) { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #b9c1c8; border-radius: 6px; background: #fff; font-size: 16px; }
:where(textarea) { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(27,58,107,.18); }
input:disabled { background: var(--bg); color: var(--mu); }
input[type=color] { width: 60px; height: 40px; border: 1px solid var(--ln); border-radius: 6px; padding: 2px; }
.chk, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.radio { display: flex; padding: 8px 0; }
.chk input, .radio input { width: 18px; height: 18px; accent-color: var(--pri); flex: none; }
.chk.big { display: flex; padding: 12px 14px; background: var(--pri-ll); border: 1px solid var(--pri-l); border-radius: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-bottom: 14px; }
.row3 .field { flex: 1 1 160px; margin: 0; }
.q, .search input { max-width: 260px; }
.search { display: flex; gap: 4px; }
.tg-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px dashed var(--ln); border-radius: 6px; }

/* 모달 */
.modal-wrap { position: fixed; inset: 0; background: rgba(15,20,25,.5); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.2); animation: pop .18s cubic-bezier(.2,.8,.2,1); }
.modal.wide { max-width: 860px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--ln2); }
.modal-head h3 { font-size: 18px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ln2); flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.96) translateY(8px); opacity: 0; } }
#toasts { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #222; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.2); animation: pop .2s; transition: opacity .3s, transform .3s; max-width: 90vw; }
.toast.err { background: var(--err); }
.toast.out { opacity: 0; transform: translateY(6px); }

/* 태그 선택기 */
.tabs-s { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs-s button { flex: 1; padding: 8px; border: 1px solid var(--ln); background: #fff; border-radius: 6px; font-weight: 700; cursor: pointer; }
.tabs-s .on { background: var(--pri); color: #fff; border-color: var(--pri); }
.tp-list { max-height: 300px; overflow-y: auto; margin: 10px 0; border: 1px solid var(--ln2); border-radius: 6px; }
.tp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ln2); cursor: pointer; }
.tp-row:hover { background: var(--pri-ll); }
.tp-row input { width: 18px; height: 18px; accent-color: var(--pri); }
.tp-row small { color: var(--mu); }
.tp-sel { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; }

.av { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pri); color: #fff; font-weight: 700; font-size: 14px; flex: none; letter-spacing: -.03em; }
.av.xs { width: 24px; height: 24px; font-size: 10px; vertical-align: middle; }
.av.sm { width: 32px; height: 32px; font-size: 12px; }
.av.lg { width: 64px; height: 64px; font-size: 20px; }
.av.grp { background: #5b6670; }
.profile { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.profile h2, .profile h3 { font-size: 22px; }

/* 홈 */
.hero { background: var(--pri); color: #fff; }
.hero-in { display: flex; align-items: center; gap: 32px; padding-top: 44px; padding-bottom: 64px; }
.hero-in > div:first-child { flex: 1; }
.kicker { font-weight: 500; opacity: .8; margin-bottom: 6px; font-size: 16px; }
.hero h1 { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; margin-bottom: 22px; }
.lead { font-size: 18px; opacity: .9; margin: 14px 0 26px; max-width: 640px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.ghost-w { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.btn.ghost-w:hover { background: rgba(255,255,255,.2); }
.hero .btn.primary { background: #fff; color: var(--pri); border-color: #fff; }
.dday { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 18px 28px; text-align: center; min-width: 180px; }
.dday b { display: block; font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dday small { display: block; opacity: .85; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: -28px; position: relative; }
.home-grid > .quick { grid-column: 1 / -1; }
.home-grid > *, .my-grid > *, .two > * { min-width: 0; }
.quick a { min-width: 0; }
.quick { display: grid; grid-template-columns: repeat(8, 1fr); background: #fff; border: 1px solid var(--ln); border-radius: 8px; box-shadow: var(--sh); padding: 10px; }
.quick a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center; }
.quick a:hover { background: var(--pri-ll); color: var(--pri); }
.quick .ic { width: 28px; height: 28px; color: var(--pri); }
.quick .dot { right: calc(50% - 26px); top: 6px; }
.home-grid .card { margin: 0; }
.todo li, .list-line li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ln2); }
.todo li:last-child, .list-line li:last-child { border-bottom: 0; }
.todo a, .list-line a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.todo a:hover, .list-line a:hover { color: var(--pri); text-decoration: underline; }
.todo small, .list-line time { color: var(--mu); font-size: 13px; white-space: nowrap; }
.list-line .badge { margin-right: 6px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ln); border-radius: 6px; margin-bottom: 8px; }
.stat-row a { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; }
.stat-row a + a { border-left: 1px solid var(--ln); }
.stat-row a:hover { background: var(--pri-ll); }
.stat-row span { font-size: 14px; color: var(--tx2); }
.stat-row b { font-size: 26px; font-weight: 700; color: var(--pri); line-height: 1.3; font-variant-numeric: tabular-nums; }
.kind-t { flex: none; width: 52px; font-size: 13px; font-weight: 600; color: var(--pri); }
.sched li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ln2); flex-wrap: wrap; }
.sched li:last-child { border: 0; }
.sched .sd { font-weight: 700; min-width: 76px; font-size: 14px; color: var(--tx2); }
.sched small { color: var(--mu); display: inline-flex; align-items: center; gap: 2px; }
.org-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.org-mini a { border: 1px solid var(--ln); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.org-mini a:hover { border-color: var(--pri); }
.org-mini small { color: var(--mu); } .org-mini span { font-size: 13px; color: var(--tx2); }

/* 소개 */
.prose { font-size: 16px; line-height: 1.8; }
.prose h3 { font-size: 18px; margin: 18px 0 6px; color: var(--pri); }
.prose p { margin: 0 0 .6em; }
.prose table { border-collapse: collapse; width: 100%; }
.prose td, .prose th { border: 1px solid #999; padding: 4px 8px; }
.prose ul { list-style: disc; padding-left: 1.4em; } .prose ol { list-style: decimal; padding-left: 1.4em; }

/* 조직도 */
.oc-wrap { overflow-x: auto; padding: 28px 16px; }
.oc, .oc ul { display: flex; justify-content: center; position: relative; }
.oc { min-width: max-content; margin: 0 auto; }
.oc-n { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 10px; }
.oc-kids.h { padding-top: 22px; position: relative; }
.oc-kids.h::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid #555; }
.oc-kids.h > .oc-n { padding-top: 22px; }
.oc-kids.h > .oc-n::before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 1.5px solid #555; }
.oc-kids.h > .oc-n:first-child::before { left: 50%; } .oc-kids.h > .oc-n:last-child::before { right: 50%; }
.oc-kids.h > .oc-n:only-child::before { display: none; }
.oc-kids.h > .oc-n::after { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid #555; }
.oc-kids.v { flex-direction: column; align-items: stretch; padding: 10px 0 0 22px; position: relative; gap: 10px; }
.oc-kids.v::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 22px; border-left: 1.5px solid #555; }
.oc-kids.v > .oc-n { padding: 0; align-items: stretch; }
.oc-kids.v > .oc-n::before { content: ''; position: absolute; left: -12px; top: 22px; width: 12px; border-top: 1.5px solid #555; }
.oc-box { border: 1.5px solid #8796a8; background: #fff; min-width: 170px; padding: 8px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.oc-box b { font-size: 16px; }
.oc-box small { font-size: 13px; color: var(--tx2); }
.oc-box.top { background: var(--pri); color: #fff; border-color: var(--pri); min-width: 200px; }
.oc-box.top > small, .oc-box.top .oc-name { color: #fff !important; }
.oc-box.top > small { font-weight: 800; color: var(--tx); font-size: 15px; }
.oc-name, .oc-vice button { background: none; border: 0; cursor: pointer; letter-spacing: .3em; padding: 0; font-size: 15px; }
.oc-vice { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.oc-vice button { background: #f3f3f3; border: 1px solid #aaa; padding: 3px 8px; letter-spacing: 0; font-size: 13px; display: flex; flex-direction: column; line-height: 1.3; }
.oc-vice small { font-weight: 700; }
.oc-box.k-division { background: var(--pri-l); border-color: var(--pri); min-width: 190px; }
.oc-box.k-division b { font-size: 16px; }
.oc-box.k-dept { min-width: 150px; }
.oc-box.k-advisor { border-style: dashed; background: var(--pri-ll); }
.tbl-wrap { overflow-x: auto; border-top: 2px solid var(--pri); margin-bottom: 8px; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--ln); padding: 10px 12px; vertical-align: middle; text-align: left; }
.tbl thead th { background: #f4f7fb; color: var(--navy-t); font-weight: 700; text-align: center; white-space: nowrap; }
.tbl tbody th { background: #fafbfc; font-weight: 700; text-align: center; }
.tbl td.c { text-align: center; }
.tbl tr.off td { opacity: .5; }
.tbl.adm input.code { width: 96px; height: 34px; font-family: ui-monospace, Consolas, monospace; }
.mem-g { margin-bottom: 8px; }

/* 조직 편집 */
.oe-unit { margin-left: calc(var(--d) * 22px); background: #fff; border: 1px solid var(--ln); border-left: 4px solid var(--pri); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.oe-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oe-head b { font-size: 17px; }
.kind { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--bg); }
.kind.k-division { background: #f3ecff; color: #6a3fc0; } .kind.k-dept { background: var(--pri-l); color: var(--pri); } .kind.k-top { background: var(--pri); color: #fff; }
.oe-meta { margin: 8px 0; font-size: 14px; } .oe-meta select { width: auto; height: 34px; display: inline-block; margin-left: 6px; }
.oe-mem li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--ln2); flex-wrap: wrap; }
.oe-mem li input { width: 150px; height: 32px; font-size: 14px; }
.oe-mem li.add { border-top: 0; }

/* 문서 */
.doc-list { display: grid; gap: 10px; }
.doc-list > li > a { display: block; background: #fff; border: 1px solid var(--ln); border-radius: var(--r); padding: 14px 16px; transition: border-color .15s; }
.doc-list > li > a:hover { border-color: var(--pri); }
.doc-list b { display: block; font-size: 17px; margin: 4px 0; }
.dl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--mu); }
.steps { display: flex; gap: 3px; margin-top: 8px; }
.steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--ln); max-width: 60px; }
.steps i.st-approved { background: var(--ok); } .steps i.st-rejected { background: var(--err); } .steps i.st-skipped { background: #b8c0c7; }
.steps i.cur { background: #f2a900; }
.steps.sm { margin: 0; width: 80px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tpl-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: #fff; border: 1px solid var(--ln); border-radius: 10px; }
.tpl-card:hover { border-color: var(--pri); box-shadow: var(--sh); }
.tpl-card .ic { width: 32px; height: 32px; color: var(--pri); margin-bottom: 6px; }
.tpl-card b { font-size: 18px; } .tpl-card small { color: var(--tx2); }

.pg-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.pg-tabs a { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 7px; border-radius: 20px; background: #fff; border: 1px solid var(--ln); font-size: 14px; font-weight: 600; white-space: nowrap; scroll-snap-align: start; }
.pg-tabs a span { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); font-size: 12px; }
.pg-tabs a.done span { background: var(--ok-l); color: var(--ok); }
.pg-tabs a.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.pg-tabs a.on span { background: rgba(255,255,255,.25); color: #fff; }
.ed-h { font-size: 22px; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--pri); }
.ed-h .num, .num { color: var(--pri); font-weight: 800; }
.fe { margin-bottom: 22px; }
.fe-lab { margin-bottom: 6px; } .fe-lab b { font-size: 15px; } .fe-lab small { color: var(--mu); margin-left: 6px; }
.fe-list li { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.fe-list .ord { width: 26px; font-weight: 700; flex: none; text-align: right; padding-right: 4px; }
.fe-row { border: 1px solid var(--ln); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #fcfdfd; }
.fe-table .fe-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fe-row-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.fe-row-h > b { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--tx2); color: #fff; font-size: 12px; align-items: center; justify-content: center; }
.fe-row-h .calc { margin-left: auto; font-size: 14px; color: var(--tx2); }
.fe-row label span { display: block; font-size: 12px; font-weight: 700; color: var(--mu); margin-bottom: 2px; }
.fe-row label.w2 { grid-column: span 2; }
.fe-row input { height: 40px !important; }
.fe-total { text-align: right; font-size: 17px; padding: 6px 4px 10px; } .fe-total b { color: var(--pri); font-size: 20px; }
.fe-mem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ed-nav { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border: 1px solid var(--ln); border-radius: 10px; padding: 10px; box-shadow: 0 -4px 16px rgba(0,0,0,.05); }
.ed-nav .saved { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ed-foot { margin-top: 30px; text-align: right; }
.line-ed li { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--ln); border-radius: 8px; margin-bottom: 6px; background: #fff; flex-wrap: wrap; }
.line-ed .ln { width: 26px; height: 26px; border-radius: 50%; background: var(--pri); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.line-ed input.ll { width: 120px; height: 34px; }
.line-ed select { width: auto; height: 34px; }
.appr-prev { margin: 16px 0; overflow-x: auto; }
.submit-box { display: flex; gap: 8px; justify-content: center; padding: 18px; background: var(--pri-ll); border-radius: 10px; flex-wrap: wrap; }

/* 결재란 */
.appr-box { border-collapse: collapse; background: #fff; font-size: 13px; }
.appr-box th, .appr-box td { border: 1px solid #333; text-align: center; padding: 3px 6px; min-width: 66px; }
.appr-box th { background: #f2dcdb; font-weight: 700; }
.appr-box th.v { min-width: 24px; width: 24px; line-height: 1.3; }
.appr-box th.cur { background: #ffe08a; }
.appr-box td.sig { height: 58px; }
.appr-box td.sig img { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto; }
.appr-box .who { color: #aab2b9; font-size: 12px; }
.appr-box .rej { color: var(--err); font-weight: 800; } .appr-box .skip { color: var(--mu); }
.appr-box td.dt { font-size: 11px; height: 20px; color: var(--tx2); }
.doc-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.dh-r { overflow-x: auto; max-width: 100%; }
.act-box { border: 2px solid #f2a900; background: #fffbea; }
.act-box textarea { margin-bottom: 10px; }
.sig-now { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sig-now img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--ln); border-radius: 6px; }
.paper { background: #fff; border: 1px solid var(--ln); box-shadow: var(--sh); padding: 48px 56px; margin: 0 auto 20px; max-width: 820px; color: #000; overflow-x: auto; }
.paper img { max-width: 100%; }
.exp-opts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.exp-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.exp-prev { padding: 28px; max-height: 50vh; overflow-y: auto; margin-top: 10px; box-shadow: none; }
.hist li { padding: 8px 0; border-bottom: 1px solid var(--ln2); font-size: 15px; }
.hist time { color: var(--mu); font-size: 13px; margin-right: 8px; }
.cmt-t { color: var(--tx2); margin: 4px 0 0 4px; }

/* 서식 편집기 */
.rt { border: 1px solid #b9c1c8; border-radius: 8px; background: #fff; }
.rt:focus-within { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(27,58,107,.18); }
.rt-bar { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--ln2); background: #f8f9fa; overflow-x: auto; position: sticky; top: calc(var(--hdr) + 48px); z-index: 5; border-radius: 8px 8px 0 0; scrollbar-width: thin; }
.modal .rt-bar { top: 0; }
.rt-b { flex: none; min-width: 34px; height: 34px; border: 0; border-radius: 5px; background: none; cursor: pointer; font-size: 15px; color: var(--tx); }
.rt-b:hover { background: #e3e7ea; }
.rt-a { color: #d1242f; border-bottom: 3px solid #d1242f; font-weight: 800; }
.rt-hl { background: #fff3a3; padding: 0 2px; font-weight: 800; }
.rt-sep { flex: none; width: 1px; height: 20px; background: var(--ln); margin: 0 3px; }
.rt-size { flex: none; width: auto !important; height: 32px !important; font-size: 14px !important; padding: 0 6px !important; }
.rt-area { position: relative; min-height: 160px; padding: 14px 16px; outline: none; font-size: 16px; line-height: 1.75; font-family: inherit; }
.rt-area.is-empty::before { content: attr(data-ph); color: #aab2b9; white-space: pre-line; pointer-events: none; position: absolute; left: 16px; top: 14px; right: 16px; }
.rt-area p, .rt-area div { margin: 0; }
.rt-area table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.rt-area td, .rt-area th { border: 1px solid #333; padding: 4px 8px; min-width: 40px; }
.rt-area ul { list-style: disc; padding-left: 1.4em; } .rt-area ol { list-style: decimal; padding-left: 1.4em; }
.rt-area blockquote { margin: 0 0 0 2em; }
.rt-pop { position: absolute; z-index: 90; background: #fff; border: 1px solid var(--ln); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; }
.rt-pop button { width: 30px; height: 30px; border: 1px solid var(--ln); border-radius: 5px; cursor: pointer; }
.rt-pop.txt { grid-template-columns: repeat(7, 34px); }
.rt-pop.txt button { width: 34px; height: 34px; background: #fff; font-size: 16px; }
.rt-pop.txt button:hover { background: var(--pri-l); }

/* 업무 보드 */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.kb-col { background: #eceff1; border-radius: 10px; padding: 10px; min-height: 120px; }
.kb-col h3 { font-size: 15px; padding: 4px 6px 10px; display: flex; gap: 6px; } .kb-col h3 b { color: var(--mu); }
.kb-card { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--ln); border-radius: 8px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.kb-card:hover { border-color: var(--pri); box-shadow: var(--sh); }
.kb-card.late { border-left: 4px solid var(--err); }
.kb-t { font-weight: 700; } .kb-m { font-size: 13px; color: var(--mu); }
.kb-empty { text-align: center; padding: 16px 0; }
.td-h { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .td-t { font-size: 19px; }
.td-desc { background: var(--bg); padding: 12px; border-radius: 8px; }
.cmts li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ln2); } .cmts p { margin: 2px 0 0; }
.cmt-in { display: flex; gap: 6px; margin-top: 10px; }

/* 게시물 */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--tx2); background: #fff; border: 1px solid var(--ln); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.flow span { font-weight: 600; }
.post-list { display: grid; gap: 10px; }
.post { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
.pl-main { flex: 1; min-width: 0; } .pl-t { display: block; font-size: 17px; margin: 4px 0; }
.post.s-expired { border-color: var(--err); }
.stamp { flex: none; width: 82px; height: 82px; border: 3px solid #d1242f; border-radius: 50%; color: #d1242f; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; line-height: 1.2; transform: rotate(-12deg); text-align: center; opacity: .9; font-family: serif; }
.stamp small { font-size: 11px; font-weight: 600; font-family: inherit; }

/* 공지 */
.blog { display: grid; gap: 12px; }
.post-card { display: flex; gap: 16px; background: #fff; border: 1px solid var(--ln); border-radius: var(--r); padding: 16px; }
.post-card:hover { border-color: var(--pri); }
.thumb { width: 140px; height: 96px; border-radius: 6px; background: var(--bg) center/cover; flex: none; }
.pc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-body b { font-size: 18px; }
.excerpt { color: var(--tx2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article header { border-bottom: 2px solid var(--pri); padding-bottom: 14px; margin-bottom: 18px; }
.article h2 { font-size: 26px; margin: 8px 0; }
.att-box { background: var(--bg); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.att-box a { color: var(--info); } .att-box a:hover { text-decoration: underline; }
.att li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; }

/* 건의함 */
.sug-form { border-top: 4px solid var(--pri); }
.sug-list { display: grid; gap: 10px; margin-top: 14px; }
.sug-list .card { margin: 0; } .sug-list b { display: block; font-size: 17px; margin: 6px 0 4px; }
.answer { background: var(--pri-ll); border-left: 3px solid var(--pri); padding: 10px 14px; border-radius: 0 8px 8px 0; margin-top: 10px; }
.answer b { display: inline; font-size: 15px; color: var(--pri); }

/* 캘린더 */
.cal-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-top h2 { font-size: 24px; min-width: 130px; text-align: center; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 14px; }
.ev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #888; flex: none; }
.t-meeting { --c: #1c62c4; } .t-event { --c: #d1242f; } .t-prep { --c: #2a7f86; } .t-deadline { --c: #b77900; } .t-etc { --c: #6d7882; } .t-task { --c: #7c3aed; } .t-post { --c: #4a5a6a; }
.ev-dot[class*="t-"] { background: var(--c); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); background: #fff; border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.cal-w { text-align: center; font-weight: 700; font-size: 13px; padding: 8px 0; background: #f6f7f8; border-bottom: 1px solid var(--ln); }
.cal-w.sun, .cal-d.sun .n { color: var(--err); } .cal-w.sat, .cal-d.sat .n { color: var(--info); }
.cal-d { min-height: 110px; border-right: 1px solid var(--ln2); border-bottom: 1px solid var(--ln2); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-d:nth-child(7n) { border-right: 0; }
.cal-d.empty { background: #fafbfc; }
.cal-d:hover { background: var(--pri-ll); }
.cal-d.sel { background: var(--pri-l); box-shadow: inset 0 0 0 2px var(--pri); }
.cal-d .n { font-size: 14px; font-weight: 700; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-d.today .n { background: var(--pri); color: #fff !important; }
.cal-d.fest { background: #eef3fb; }
.fest-t { font-size: 11px; font-weight: 800; color: var(--err); }
.evs { display: flex; flex-direction: column; gap: 2px; }
.ev { font-size: 12px; line-height: 1.4; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--c, #888) 14%, #fff); color: var(--c, #555); border-left: 3px solid var(--c, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ev.done { text-decoration: line-through; opacity: .6; }
.ev.more { background: none; border: 0; color: var(--mu); }
.dots { display: none; }
.day-list .sched li { gap: 8px; }

/* 메신저 */
.chat-page { padding-top: 16px; }
.chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100dvh - var(--hdr) - 220px); min-height: 480px; background: #fff; border: 1px solid var(--ln); border-radius: 12px; overflow: hidden; }
.c-side { border-right: 1px solid var(--ln); display: flex; flex-direction: column; min-height: 0; }
.c-list-h { display: flex; align-items: center; gap: 6px; padding: 12px; border-bottom: 1px solid var(--ln2); }
.c-list { overflow-y: auto; flex: 1; }
.c-list a { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--ln2); }
.c-list a:hover { background: var(--bg); } .c-list a.on { background: var(--pri-l); }
.cl-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-b b small { color: var(--mu); font-weight: 500; }
.cl-b > small { color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--mu); }
.c-main { display: flex; flex-direction: column; min-height: 0; background: #dfe6ee; }
.c-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,.85); border-bottom: 1px solid var(--ln); }
.c-back { display: none; }
.c-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.cdate { text-align: center; margin: 10px 0; } .cdate span { background: rgba(27,58,107,.35); color: #fff; font-size: 12px; padding: 3px 12px; border-radius: 12px; }
.msg { display: flex; gap: 8px; max-width: 80%; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .msg-av { display: none; }
.msg-av { width: 32px; flex: none; border: 0; background: none; padding: 0; cursor: pointer; }
.msg-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-n { font-size: 13px; font-weight: 600; color: var(--tx2); }
.msg-row { display: flex; align-items: flex-end; gap: 4px; }
.msg.me .msg-row { flex-direction: row-reverse; }
.bub { background: #fff; padding: 8px 12px; border-radius: 4px 14px 14px 14px; white-space: pre-wrap; word-break: break-word; font-size: 15px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.msg.me .bub { background: var(--pri); color: #fff; border-radius: 14px 4px 14px 14px; }
.msg.cont .bub { border-radius: 14px; }
.bub a { color: var(--info); text-decoration: underline; }
.bub-file { display: flex; align-items: center; gap: 4px; text-decoration: none !important; }
.msg-meta { font-size: 11px; color: #5a6670; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.msg.me .msg-meta { align-items: flex-end; }
.msg-meta i { color: var(--pri); font-style: normal; font-weight: 800; }
.c-empty, .c-none { text-align: center; margin: auto; color: var(--tx2); }
.c-none .ic { width: 48px; height: 48px; opacity: .4; }
.c-in { display: flex; align-items: flex-end; gap: 6px; padding: 8px; background: #fff; border-top: 1px solid var(--ln); }
.c-in textarea { height: 44px; min-height: 44px; resize: none; }
.c-in .btn { height: 44px; }
.mem-l li { display: flex; align-items: center; gap: 8px; }

/* 마이페이지 */
.my-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.my-grid .card { margin: 0; } .my-grid .wide { grid-column: 1 / -1; }
.sign-prev { display: flex; align-items: center; gap: 14px; padding: 10px; background: var(--bg); border-radius: 8px; }
.sign-prev img { width: 80px; height: 80px; object-fit: contain; background: #fff; border: 1px solid var(--ln); border-radius: 6px; }
.pad { width: 100%; height: auto; aspect-ratio: 600/260; border: 2px dashed var(--ln); border-radius: 8px; touch-action: none; background: #fff; cursor: crosshair; }
.login h2 { font-size: 22px; display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.demo { background: var(--pri-ll); }
.demo-list { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-list small { color: var(--mu); font-weight: 500; }

/* 관리 */
.perm-list { display: grid; gap: 8px; }
.perm { padding: 0; margin: 0; }
.perm summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.perm summary::-webkit-details-marker { display: none; }
.perm[open] summary { border-bottom: 1px solid var(--ln2); }
.perm fieldset { border: 0; padding: 10px 16px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.perm legend { font-weight: 700; font-size: 13px; color: var(--mu); padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.perm > p { padding: 12px 16px; margin: 0; }
.bulk select { width: auto; max-width: 100%; }
.order-l li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 8px; margin-bottom: 6px; background: #fff; }
.order-l li > span:first-child, .order-l li > label { flex: 1; }
.order-l.big li { padding: 12px 14px; } .order-l.big a { flex: 1; } .order-l.big a:hover b { color: var(--pri); text-decoration: underline; }
.tpl-page .card-h input.pt { font-size: 18px; font-weight: 700; max-width: 360px; }
.tf-list li { border: 1px solid var(--ln); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: #fcfdfd; }
.tf-main, .tf-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-sub { margin-top: 6px; }
.tf-main input { flex: 1 1 160px; height: 38px; } .tf-main select, .tf-sub select { width: auto; height: 38px; font-size: 14px; }
.tf-sub input { flex: 1 1 200px; height: 36px; font-size: 14px; }
.danger-zone { border-color: var(--err); }

/* ── 반응형 ── */
@media (max-width: 1080px) {
  .gnb-item > a { padding: 0 11px; font-size: 16px; }
  .quick { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  :root { --hdr: 60px; }
  .wrap { padding: 0 16px; }
  .gnb { display: none; } .menu-btn { display: inline-flex; } .hdr-act { margin-left: auto; }
  .hdr-act > a.icon-btn { display: none; }
  .brand strong { font-size: 16px; } .brand small { font-size: 11px; } .logo { width: 34px; height: 34px; }
  .topbar .gov-mark { font-size: 12px; }
  .subvis .wrap { padding-top: 14px; padding-bottom: 14px; }
  .subvis h1 { font-size: 23px; } .subvis p { font-size: 14px; }
  .main { padding-top: 18px; padding-bottom: 96px; }
  .main.full { padding-bottom: 96px; }
  .ftr { padding-bottom: 96px; }
  .card { padding: 16px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--ln); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0,0,0,.05); }
  .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 11px; font-weight: 600; color: var(--mu); }
  .tabbar a.on { color: var(--pri); }
  .tabbar .ic { width: 23px; height: 23px; }
  .tabbar .dot { right: calc(50% - 22px); top: 3px; }
  #toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .hero-in { flex-direction: column; align-items: stretch; padding-top: 32px; padding-bottom: 52px; gap: 20px; }
  .hero h1 { font-size: 28px; } .lead { font-size: 16px; }
  body { font-size: 16px; }
  .dday { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 12px; }
  .dday b { font-size: 30px; }
  .home-grid, .my-grid, .two { grid-template-columns: 1fr; }
  .quick { grid-template-columns: repeat(4, 1fr); padding: 6px; }
  .quick a { padding: 10px 2px; font-size: 12px; }
  .org-mini { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .kanban { grid-template-columns: repeat(3, 85%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .kb-col { scroll-snap-align: start; }
  .fe-row { grid-template-columns: 1fr 1fr; }
  .fe-row label.w2 { grid-column: 1 / -1; }
  .ed-nav { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .rt-bar { top: var(--hdr); }
  .pg-doc-edit .lnb { display: none; }
  .paper { padding: 22px 16px; font-size: 14px; }
  .post-card { flex-direction: column-reverse; } .thumb { width: 100%; height: 150px; }
  .post { flex-direction: column; } .stamp { position: absolute; right: 14px; top: 14px; width: 64px; height: 64px; font-size: 11px; } .post { position: relative; }
  .cal-d { min-height: 58px; padding: 2px; align-items: center; }
  .cal-d .evs { display: none; } .dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
  .cal-top h2 { font-size: 20px; min-width: 110px; }
  .chat-page { padding: 0 !important; max-width: none; }
  .chat { grid-template-columns: 1fr; border-radius: 0; border: 0; height: calc(100dvh - var(--hdr) - 36px - 64px - env(safe-area-inset-bottom)); min-height: 0; }
  .chat-page.has-room .c-side { display: none; }
  .chat-page:not(.has-room) .c-main { display: none; }
  .c-back { display: inline-flex; }
  .msg { max-width: 88%; }
  .tbl { font-size: 14px; } .tbl th, .tbl td { padding: 8px; }
  .oc-wrap { padding: 16px 8px; }
  .q, .search input { max-width: none; flex: 1; }
  .modal-wrap { align-items: flex-end; padding: 0; }
  .modal { max-width: none !important; border-radius: 16px 16px 0 0; max-height: 92dvh; animation: up .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes up { from { transform: translateY(40px); opacity: 0; } }
  .modal-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) { .pg-chat-page .subvis, .pg-chat-page .ftr { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .topbar, .hdr, .subvis, .lnb, .ftr, .tabbar, .toolbar, .act-box, .doc-head, .hist, .card:not(.paper) { display: none !important; }
  body { background: #fff; } .paper { border: 0; box-shadow: none; padding: 0; }
}

/* ── 누리집 / 업무공간 구분 ── */
.space-tabs { display: flex; height: 100%; }
.space-tabs a { display: flex; align-items: center; padding: 0 14px; font-weight: 600; color: var(--mu); border-right: 1px solid var(--ln2); }
.space-tabs a:first-child { border-left: 1px solid var(--ln2); }
.space-tabs a.on { background: #fff; color: var(--pri); }
.topbar .wrap { padding-top: 0; padding-bottom: 0; }
.top-links span { color: var(--tx2); font-weight: 600; }
.brand strong em { font-style: normal; font-size: 13px; font-weight: 600; color: #fff; background: var(--pri); border-radius: 4px; padding: 1px 7px; margin-left: 8px; vertical-align: 3px; }
.mode-work .hdr { border-bottom: 3px solid var(--pri); }
.hero.work { background: var(--pri-d); }
.hero.work .hero-in { padding-top: 32px; padding-bottom: 56px; }
.c { text-align: center; }
.drawer-space { display: flex; gap: 6px; }
.drawer-space a { flex: 1; text-align: center; border: 1px solid var(--ln); border-radius: 6px; padding: 8px 0 !important; }
.drawer-space a.on { background: var(--pri); color: #fff; border-color: var(--pri); }
.home-grid .wide { grid-column: 1 / -1; }
.quick.q5 { grid-template-columns: repeat(5, 1fr); }

/* 홍보실 */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pr-grid.sm { grid-template-columns: repeat(4, 1fr); }
.pr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; }
.pr-card:hover { border-color: var(--pri); }
.pr-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--pri-l) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--pri); }
.pr-thumb .ic { width: 36px; height: 36px; opacity: .5; }
.pr-play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-style: normal; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pr-b { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.pr-b b { font-size: 16px; line-height: 1.4; }
.pr-b time { font-size: 13px; color: var(--mu); }
.pr-b .badge { align-self: flex-start; }
.pr-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 14px; }
.pr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.pr-img { display: block; width: 100%; border-radius: 6px; margin-bottom: 12px; }
.pr-ed-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pr-ed-imgs span { position: relative; }
.pr-ed-imgs img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ln); }
.pr-ed-imgs .icon-btn { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.9); }

/* 공개 일정 */
.fest-card { display: flex; align-items: center; justify-content: space-between; background: var(--pri); color: #fff; border-color: var(--pri); }
.fest-card b { font-size: 22px; }
.sched.pub li { align-items: baseline; }
.sched.pub b { font-weight: 600; }
.sched.pub p { width: 100%; margin: 2px 0 0; }
.sched.past { opacity: .7; }

/* 알림 */
.notice-bar { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--pri-ll); border-color: var(--pri-l); }
.noti-list { background: #fff; border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; }
.noti-list li + li { border-top: 1px solid var(--ln2); }
.noti-list a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; }
.noti-list a:hover { background: var(--pri-ll); }
.noti-list li.unread a { background: #f4f7fb; }
.noti-list li.unread .nt-body b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--err); margin-right: 6px; vertical-align: 2px; }
.nt-type { flex: none; width: 56px; font-size: 13px; font-weight: 700; color: var(--pri); padding-top: 2px; }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nt-body span { color: var(--tx2); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-list time { flex: none; font-size: 13px; color: var(--mu); }
.noti-list .empty { border: 0; }
.ns-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; }
.ns-rooms li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--ln2); }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: #c3cad1; border-radius: 13px; transition: background .15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + i { background: var(--pri); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 3px solid #f2a900; outline-offset: 2px; }
.mute-btn.off { color: #aab2b9; }
.muted-ic { font-style: normal; font-size: 12px; }
.bub-link { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--pri) !important; text-decoration: none !important; }
.msg.me .bub-link { color: #fff !important; }

/* 관리 */
.perm-all { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.chk.off { color: var(--mu); }
.duty-u .card-h { margin-bottom: 8px; }
.duty-m { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 14px; }
.doc-rule { margin: 6px 0; } .doc-rule select { width: auto; height: 34px; font-size: 14px; }

@media (max-width: 900px) {
  .hdr-act > a.icon-btn.keep { display: inline-flex; }
  .space-tabs a { padding: 0 10px; }
  .quick.q5 { grid-template-columns: repeat(5, 1fr); }
  .quick.q5 a { font-size: 11px; }
  .pr-grid, .pr-grid.sm { grid-template-columns: 1fr 1fr; gap: 10px; }
  .brand strong em { display: none; }
  .nt-type { width: 44px; }
}
.task-chip { background: #eef2f7; color: var(--pri); border-color: transparent; }
.task-chip.st-done { color: var(--mu); }
a.task-chip:hover { text-decoration: underline; }
.rel-tasks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--tx2); margin: 6px 0; }
.login-switch { display: flex; width: 100%; padding: 4px; margin-bottom: 18px; background: var(--bg); border: 1px solid var(--ln); border-radius: 8px; cursor: pointer; }
.login-switch span { flex: 1; padding: 10px 0; border-radius: 6px; font-weight: 700; font-size: 16px; color: var(--mu); text-align: center; transition: background .15s, color .15s; }
.login-switch span.on { background: var(--pri); color: #fff; }
.scope-pick { border: 0; padding: 0; margin: 0 0 14px; }
.scope-pick legend { font-weight: 700; font-size: 14px; color: var(--tx2); margin-bottom: 6px; padding: 0; }
.scope-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scope-pick legend { grid-column: 1 / -1; }
.scope-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ln); border-radius: 8px; cursor: pointer; background: #fff; }
.scope-opt input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--pri); flex: none; }
.scope-opt span { display: flex; flex-direction: column; }
.scope-opt small { color: var(--mu); font-size: 13px; }
.scope-opt:has(input:checked) { border-color: var(--pri); background: var(--pri-ll); box-shadow: inset 0 0 0 1px var(--pri); }
@media (max-width: 900px) { .scope-pick { grid-template-columns: 1fr; } }
.nt-appr { margin-top: 12px; overflow-x: auto; }
.nt-act { margin: 0 0 18px; padding: 16px; border-radius: 8px; }

/* 로그인 필요 안내 · 참여 신청 · 예산 */
.login-need { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--pri-ll); border-color: var(--pri-l); }
.quick.q6 { grid-template-columns: repeat(6, 1fr); }
.prog-list { display: grid; gap: 10px; }
.prog { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.prog:hover { border-color: var(--pri); }
.prog b { font-size: 17px; }
.pf-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--ln); border-radius: 8px; margin-bottom: 6px; }
.pf-list input:not([type=checkbox]) { flex: 1 1 160px; height: 36px; }
.pf-list select { width: auto; height: 36px; }
.tbl.apps td { vertical-align: top; }
.tbl.apps select { width: auto; height: 34px; font-size: 14px; }
.budget-sum { margin-bottom: 16px; background: #fff; }
.budget-sum > div { display: flex; flex-direction: column; align-items: center; padding: 14px 4px; }
.budget-sum > div + div { border-left: 1px solid var(--ln); }
.bud-sub { color: var(--pri); }
.num-c { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .quick.q6 { grid-template-columns: repeat(3, 1fr); } .login-need { flex-direction: column; align-items: stretch; text-align: center; } }

/* 설문 */
.sv-ed { border: 1px dashed var(--ln); border-radius: 8px; padding: 12px; margin-bottom: 8px; background: #fbfcfd; }
.sv-q { border: 1px solid var(--ln); border-radius: 8px; padding: 10px; margin: 8px 0; background: #fff; }
.sv-q-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sv-q-h > b { width: 24px; height: 24px; border-radius: 50%; background: var(--pri); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.sv-q-h input:not([type=checkbox]) { flex: 1 1 200px; height: 38px; }
.sv-q-h select { width: auto; height: 38px; font-size: 14px; }
.sv-opts { margin: 8px 0 4px 30px; }
.sv-opts li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sv-opts input { height: 36px; }
.sv-mark { width: 14px; height: 14px; border: 2px solid #9aa5b0; border-radius: 50%; flex: none; }
.sv-mark.multi { border-radius: 3px; }
.sv-box { border: 1px solid var(--ln); border-top: 3px solid var(--pri); border-radius: 8px; padding: 16px; margin-top: 20px; background: #fbfcfd; }
.sv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.sv-head b { font-size: 17px; display: flex; align-items: center; gap: 6px; }
.sv-fq { border: 0; padding: 0; margin: 0 0 14px; }
.sv-fq legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.sv-fq legend em { color: var(--err); font-style: normal; }
.sv-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 6px; margin-bottom: 4px; background: #fff; cursor: pointer; }
.sv-opt input { width: 18px; height: 18px; accent-color: var(--pri); }
.sv-opt:has(input:checked) { border-color: var(--pri); background: var(--pri-ll); }
.sv-res { margin-top: 14px; border-top: 1px solid var(--ln2); padding-top: 12px; }
.sv-res h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sv-rq { margin-bottom: 12px; }
.sv-bar { display: grid; grid-template-columns: minmax(80px, 30%) 1fr 32px; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; }
.sv-track { height: 10px; background: var(--ln2); border-radius: 5px; overflow: hidden; }
.sv-track i { display: block; height: 100%; background: var(--pri); border-radius: 5px; }
.sv-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sv-texts li { padding: 6px 10px; background: #fff; border: 1px solid var(--ln2); border-radius: 6px; margin: 4px 0; font-size: 14px; }
/* 채팅 투표 */
.bub-poll { min-width: 240px; background: #fff !important; color: var(--tx) !important; }
.poll { display: flex; flex-direction: column; gap: 6px; }
.poll-q { font-size: 15px; }
.poll-o { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; text-align: left; font-size: 14px; }
.poll-o.on { border-color: var(--pri); font-weight: 700; color: var(--pri); }
.poll-o:disabled { cursor: default; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pri-l); z-index: 0; transition: width .2s; }
.poll-t, .poll-n { position: relative; z-index: 1; }
.poll-act { display: flex; gap: 12px; font-size: 13px; }
.poll-ed li { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
/* 동의 · 설치 안내 */
.consent { background: var(--bg); border: 1px solid var(--ln); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.consent p { margin: 6px 0 8px; color: var(--tx2); }
.steps-guide { list-style: decimal; padding-left: 1.4em; } .steps-guide li { padding: 4px 0; }

.boot { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--mu); }

/* 오디션 */
.narrow-card { max-width: 520px; margin-left: auto; margin-right: auto; }
.res-box { max-width: 520px; margin: 0 auto; }
.res { text-align: center; padding: 28px 20px; }
.res-big { display: block; font-size: 34px; font-weight: 800; margin: 8px 0; color: var(--tx2); }
.res-big.ok { color: var(--ok); } .res-big.err { color: var(--err); } .res-big.info { color: var(--info); }
.res .answer { text-align: left; }
.code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .15em; color: var(--pri); }
.code.big { font-size: 34px; font-weight: 800; margin: 8px 0; }
.done-box { background: var(--ok-l); border: 1px solid #b9e3c6; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.score-list { display: grid; gap: 10px; }
.score-card { margin: 0; }
.sc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-h b { font-size: 17px; }
.sc-avg { font-size: 14px; color: var(--tx2); } .sc-avg b { font-size: 20px; color: var(--pri); }
.sc-info { margin: 4px 0 10px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; align-items: end; }
.sc-grid label span { display: block; font-size: 13px; font-weight: 700; color: var(--tx2); margin-bottom: 2px; }
.sc-grid input { height: 42px !important; font-size: 18px !important; text-align: center; font-weight: 700; }
.sc-memo { grid-column: span 2; } .sc-memo input { font-size: 14px !important; text-align: left !important; font-weight: 400 !important; }
.sc-sum { text-align: right; font-size: 14px; color: var(--tx2); padding-bottom: 8px; } .sc-sum b { font-size: 20px; color: var(--tx); }
.aud-pub { display: flex; align-items: center; gap: 12px; }
.aud-pub b { font-size: 17px; }
.quick.q7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 900px) { .quick.q7 { grid-template-columns: repeat(4, 1fr); } }

/* 메신저: 휴대폰에서 대화방은 화면을 꽉 채우고 입력창은 맨 아래 */
.bub { cursor: pointer; }
.bub-del { color: var(--mu) !important; background: transparent !important; border: 1px dashed var(--ln); font-style: italic; cursor: default; box-shadow: none; }
.msg-pre { background: var(--bg); padding: 10px 12px; border-radius: 8px; max-height: 160px; overflow: auto; }
@media (max-width: 900px) {
  .pg-chat-page.pg-has-room .topbar, .pg-chat-page.pg-has-room .lnb, .pg-chat-page.pg-has-room .tabbar { display: none !important; }
  .pg-chat-page.pg-has-room .chat { position: fixed; left: 0; right: 0; top: calc(var(--hdr) + 3px); bottom: 0; height: auto !important; z-index: 15; }
  .pg-chat-page.pg-has-room .c-in { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .pg-chat-page.pg-has-room .c-msgs { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body:has(#app.pg-has-room) { overflow: hidden; }
  .pg-chat-page:not(.pg-has-room) .chat { height: auto !important; min-height: 0; }
  .pg-chat-page:not(.pg-has-room) .c-list { overflow: visible; }
  .c-in textarea { font-size: 16px; }
}