/* 💬 함께 안식 — 업무 앱(새 앱 로그인 화면)과 같은 따뜻한 갈색 · 초록 */
:root {
  --bg: #FBF8F4; --panel: #FFFFFF; --line: #E9E4DC; --ink: #292524; --sub: #78716C; --faint: #A8A29E;
  --side: #5A5249; --side-ink: #F6F1EA; --side-sub: #D9D0C4; --side-on: #4F6B57; --side-hover: rgba(246,241,234,.10);
  --accent: #4F6B57; --accent-ink: #fff; --hit: #FDF3DC; --hit-line: #E8B64C; --badge: #C2410C; --tag: #F3EBDD; --tag-ink: #7A5A2E;
  --danger: #B42318;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
button { font: inherit; cursor: pointer; color: inherit; }
[hidden] { display: none !important; }

/* 로그인 · 안내 */
.gate { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.gate-card { width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 32px 28px; text-align: center; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 24px rgba(41,37,36,.06); }
.gate .logo { font-size: 40px; }
.gate h1 { margin: 0; font-size: 22px; }
.gate h1 em { font-style: normal; font-size: 12px; color: var(--tag-ink); background: var(--tag); border-radius: 6px; padding: 2px 8px; vertical-align: middle; }
.gate .sub { margin: 0; color: var(--sub); font-size: 14px; }
.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; height: 40px; padding: 0 16px; font-weight: 600; }
.primary:hover { background: #435C4A; }
.primary.sm { height: 32px; font-size: 13.5px; padding: 0 12px; }
.ghost { background: none; border: 1px solid var(--line); border-radius: 8px; height: 40px; padding: 0 14px; }
.ghost.danger { color: var(--danger); border-color: #F1C9C4; }

/* 틀: 왼쪽 방 목록 · 가운데 글 · 오른쪽 스레드 */
.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.app.has-thread { grid-template-columns: 260px minmax(0, 1fr) minmax(320px, 400px); }
.side { background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; min-height: 0; }
.ws { padding: 14px 16px 10px; border-bottom: 1px solid rgba(246,241,234,.12); }
.ws b { font-size: 17px; }
.ws em { font-style: normal; font-size: 11.5px; background: rgba(246,241,234,.16); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.ws .me { font-size: 13px; color: var(--side-sub); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #A8A29E; flex: none; }
.live.on { background: #7BC47F; }
.find { padding: 8px 12px 2px; }
.find input { width: 100%; font: inherit; font-size: 13.5px; border: 0; border-radius: 7px; padding: 6px 10px; background: rgba(246,241,234,.14); color: var(--side-ink); outline: 0; }
.find input::placeholder { color: var(--side-sub); }
.find input:focus { background: #fff; color: var(--ink); }
.side .list { flex: 1; overflow-y: auto; padding: 6px 8px 12px; }
.sec { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 4px; font-size: 12.5px; color: var(--side-sub); font-weight: 600; }
.sec .fold-b { flex: 1; display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sec .fold-b small { font-weight: 400; opacity: .75; }
.sec .fold-b .car { width: 12px; display: inline-block; font-size: 10px; }
.sec .on-n { font-size: 11.5px; font-weight: 400; }
.ch.who { position: relative; }
.on-dot { position: absolute; left: 26px; top: 50%; margin-top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--side-bg, #3B352F); }
.ch { position: relative; }
.sec button { background: none; border: 0; color: var(--side-sub); font-size: 16px; line-height: 1; width: 26px; height: 26px; border-radius: 6px; }
.sec button:hover { background: var(--side-hover); color: var(--side-ink); }
.ch { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--side-sub); text-decoration: none; font-size: 14.5px; min-height: 32px; }
.ch:hover { background: var(--side-hover); }
.ch.on { background: var(--side-on); color: #fff; }
.ch.unread { color: #fff; font-weight: 700; }
.ch .ic { width: 18px; text-align: center; flex: none; opacity: .85; }
.ch .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch.more { font-size: 13.5px; }
.ch.gone { opacity: .6; }
.gone-box summary { font-size: 12.5px; color: var(--side-sub); padding: 6px 8px; cursor: pointer; }
.tag.link { text-decoration: none; background: #EEF3EF; color: var(--accent); }
.tag { font-size: 11px; font-weight: 600; background: var(--tag); color: var(--tag-ink); border-radius: 5px; padding: 0 6px; white-space: nowrap; flex: none; }
.side .tag { background: rgba(246,241,234,.18); color: var(--side-ink); }
.badge { background: var(--badge); color: #fff; font-size: 11.5px; border-radius: 9px; min-width: 20px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side .hint { color: var(--side-sub); font-size: 12.5px; margin: 4px 8px; }
.side-foot { padding: 8px 12px; border-top: 1px solid rgba(246,241,234,.12); }
.side-foot button { background: none; border: 0; color: var(--side-sub); font-size: 13px; }

/* 아바타 */
.av { width: 36px; height: 36px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; font-size: 15px; }
.av.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }
.av.grp { background: #8C8279; }

/* 가운데 */
.main, .thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.thread { border-left: 1px solid var(--line); }
.empty { margin: auto; color: var(--sub); }
.head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.head .ttl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head .ttl b { font-size: 16.5px; display: inline-flex; gap: 4px; }
.head .ttl .ic { color: var(--sub); }
.head .topic { color: var(--sub); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.head .mem, .head .x { background: none; border: 1px solid var(--line); border-radius: 8px; height: 32px; padding: 0 10px; color: var(--sub); white-space: nowrap; }
.head .x { border: 0; font-size: 16px; }
.head .mem.meet { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.back { display: none; background: none; border: 0; font-size: 26px; line-height: 1; padding: 0 6px 0 0; color: var(--sub); }

.msgs { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
.loading, .start { color: var(--sub); text-align: center; padding: 18px; font-size: 14px; }
.start b { color: var(--ink); }
.older { text-align: center; padding: 8px; }
.older button { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px; font-size: 13px; color: var(--sub); }
.day, .newline { display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px; font-size: 12.5px; color: var(--sub); font-weight: 600; }
.day::before, .day::after, .newline::before, .newline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.day.sm { margin: 8px 16px; }
.newline { color: var(--badge); }
.newline::before, .newline::after { background: #F3B7A0; }
.hint { color: var(--sub); font-size: 13px; }
.hint.big { text-align: center; padding: 24px; font-size: 14px; }

.msg { position: relative; display: flex; gap: 10px; padding: 6px 16px 4px; }
.msg.compact { padding-top: 1px; }
.msg:hover { background: #FAF7F2; }
.msg.hit { background: var(--hit); box-shadow: inset 3px 0 0 var(--hit-line); }
.msg .tm-s { width: 36px; flex: none; font-size: 11px; color: transparent; text-align: right; padding-top: 3px; }
.msg.compact:hover .tm-s { color: var(--faint); }
.bd { flex: 1; min-width: 0; }
.hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hd b { font-size: 14.5px; }
.hd time { font-size: 12px; color: var(--faint); }
.hz { font-size: 11px; background: var(--tag); color: var(--tag-ink); border-radius: 4px; padding: 0 5px; }
.tx { word-break: break-word; overflow-wrap: anywhere; }
.tx a { color: #1F5E8C; }
.tx.gone { color: var(--faint); font-style: italic; }
.ed { color: var(--faint); font-size: 12px; }
.pinned { font-size: 12px; color: var(--tag-ink); margin: 1px 0 2px; }
.edbox { border: 1px solid var(--accent); border-radius: 8px; background: #fff; margin: 2px 0; }
.edbox textarea { width: 100%; border: 0; outline: 0; resize: none; font: inherit; padding: 8px 10px 2px; display: block; min-height: 44px; }
.edbar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px 10px; }
.ghost.sm { height: 30px; font-size: 13px; padding: 0 10px; }
.msg.flash { animation: flash 2s ease-out; }
@keyframes flash { 0% { background: #FBE3B5; } 100% { background: transparent; } }
.ackt { background: none; border: 1px solid var(--line); border-radius: 7px; height: 30px; padding: 0 10px; font-size: 12.5px; color: var(--sub); flex: none; }
.ackt[aria-pressed="true"] { background: #E7F0E9; border-color: #A9C4AF; color: var(--accent); font-weight: 700; }
.hits { display: flex; flex-direction: column; gap: 4px; }
.hit-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.hit-row:hover { background: var(--bg); }
.hit-row .where { font-size: 12px; color: var(--sub); }
.hit-row .who { font-size: 12.5px; text-align: right; }
.hit-row .who time { color: var(--faint); }
.hit-row .what { grid-column: 1 / -1; word-break: break-word; }
.hit-row mark { background: #FBE3B5; border-radius: 3px; }
.at { background: #E8EEF6; color: #1F4E79; border-radius: 4px; padding: 0 2px; font-weight: 600; }
.at.me { background: #FBE3B5; color: #7A4A0A; }
.acts-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acts-go .go { background: #EEF3EF; border: 1px solid #C9DACD; color: var(--accent); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
.acts-go .go:hover { background: #E1ECE4; }
.leave { border: 1px solid var(--line); border-left: 4px solid #E8B64C; border-radius: 10px; padding: 8px 12px; margin: 2px 0; background: #FFFCF5; max-width: 560px; }
.leave.st-승인 { border-left-color: var(--accent); background: #F4F8F5; }
.leave.st-반려, .leave.st-취소 { border-left-color: #A8A29E; background: #FAF8F5; opacity: .85; }
.leave .lv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.leave .lv-b { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tag-ink); }
.leave .lv-d { font-size: 14px; margin-top: 2px; }
.leave .lv-m { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.leave .lv-btn { display: flex; gap: 6px; margin-top: 6px; }
.leave .lv-btn:empty { display: none; }
.lv-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.row3 { display: flex; gap: 14px; flex-wrap: wrap; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.f select { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.f input[type=time], .f input[type=date] { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.asklog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; background: #FFF7E6; border: 1px dashed #E8B64C; border-radius: 8px; font-size: 13px; }
.asklog .go { background: #fff; border: 1px solid #C9DACD; color: var(--accent); border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.asklog .no { background: none; border: 0; color: var(--sub); font-size: 12px; text-decoration: underline; }
.acts-go button.go { font: inherit; cursor: pointer; }
.ack { margin-top: 4px; font-size: 13px; color: var(--accent); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ack button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 2px 10px; font-size: 12.5px; }
.ack button.undo { background: none; color: var(--sub); border: 1px solid var(--line); }
.rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.r { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; height: 24px; font-size: 13px; }
.r.mine { background: #E7F0E9; border-color: #A9C4AF; }
.r.add { color: var(--sub); opacity: 0; }
.msg:hover .r.add { opacity: 1; }
.rep { margin-top: 4px; background: none; border: 0; padding: 2px 6px 2px 0; color: #1F5E8C; font-weight: 600; font-size: 13px; }
.rep span { color: var(--faint); font-weight: 400; }
.rep:hover { text-decoration: underline; }
.acts { position: absolute; right: 12px; top: -12px; display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 6px rgba(41,37,36,.08); }
.acts button { background: none; border: 0; width: 32px; height: 28px; font-size: 15px; }
.acts button:hover { background: var(--bg); }
.msg:hover .acts { display: flex; }

.newpill { position: relative; height: 0; }
.newpill button { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; background: var(--accent); color: #fff; border: 0; border-radius: 16px; padding: 4px 14px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* 글 쓰기 */
.compose { padding: 4px 16px 14px; }
.compose .warn { margin: 0 0 6px; font-size: 12.5px; color: var(--tag-ink); background: var(--tag); border-radius: 6px; padding: 4px 10px; }
.cbox { border: 1px solid #CFC8BE; border-radius: 10px; background: #fff; }
.cbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,107,87,.15); }
.cbox textarea { width: 100%; border: 0; outline: 0; resize: none; padding: 10px 12px 4px; font: inherit; background: transparent; max-height: 200px; display: block; }
.pend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 4px; }
.pf { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px 4px 2px 8px; font-size: 12.5px; max-width: 100%; }
.pf.err { border-color: #F1C9C4; color: var(--danger); }
.pf small { color: var(--faint); }
.pf button { background: none; border: 0; color: var(--sub); width: 22px; height: 22px; }
.who { padding: 0 10px 4px; }
.sugg { background: #FFF7E6; border: 1px dashed #E8B64C; border-radius: 8px; padding: 3px 10px; font-size: 12.5px; color: var(--tag-ink); text-align: left; }
.pchip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; background: #EEF3EF; border: 1px solid #C9DACD; color: var(--accent); border-radius: 12px; padding: 1px 10px; font-size: 12.5px; font-weight: 600; }
.pinned.from { color: var(--sub); }
.pop.menu { display: flex; flex-direction: column; min-width: 220px; }
.pop.menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.pop.menu button:hover { background: var(--bg); }
.linkbtn { display: inline-flex; align-items: center; text-decoration: none; color: var(--accent); font-weight: 600; align-self: flex-start; }
.av.ai { background: #EEE7F7; font-size: 18px; }
.av.sm.ai { font-size: 13px; }
.aibusy { display: flex; align-items: center; gap: 8px; color: var(--sub); font-size: 13.5px; padding: 8px 16px; }
.aibusy small { color: var(--faint); }
.aiout { display: flex; flex-direction: column; gap: 8px; }
.aitext { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.65; word-break: break-word; }
.pol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pol > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aiedit { font: inherit; border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; min-height: 120px; resize: vertical; }
@media (max-width: 600px) { .pol { grid-template-columns: 1fr; } }
.hint.bad { color: var(--danger); }
.pop .pm { margin: 4px 10px 6px; font-size: 11.5px; }
.clip { background: none; border: 0; font-size: 17px; width: 32px; height: 30px; border-radius: 7px; flex: none; }
.clip:hover { background: var(--bg); }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; text-align: left; }
.file:hover { background: var(--bg); border-color: #CFC8BE; }
.file .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 260px; font-weight: 600; font-size: 13.5px; }
.file .fs { color: var(--faint); font-size: 12px; flex: none; }
.cbar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px 12px; }
.cl { flex: 1; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send { background: var(--accent); color: #fff; border: 0; border-radius: 7px; height: 30px; padding: 0 14px; font-size: 13.5px; font-weight: 600; flex: none; margin-left: auto; }

/* 떠 있는 창: @ 자동완성 · 반응 고르기 */
.pop { position: fixed; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(41,37,36,.16); padding: 4px; }
.pop.ac { width: 280px; max-width: calc(100vw - 16px); }
.pop.ac button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 6px; text-align: left; }
.pop.ac button.on, .pop.ac button:hover { background: #EEF3EF; }
.pop.ac button span:last-child { color: var(--sub); font-size: 12.5px; }
.pop.rxp { display: flex; gap: 2px; }
.pop.rxp button { border: 0; background: none; font-size: 20px; width: 38px; height: 38px; border-radius: 8px; }
.pop.rxp button:hover { background: var(--bg); }

/* 창 */
.modal-wrap { position: fixed; inset: 0; background: rgba(41,37,36,.35); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--panel); border-radius: 14px; width: 460px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.2); }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 16px; gap: 8px; }
.modal header .x { background: none; border: 0; font-size: 18px; color: var(--sub); }
.modal .mb { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.f { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; border: 0; padding: 0; margin: 0; }
.f legend { padding: 0; margin-bottom: 4px; }
.f input:not([type=radio]) { font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.f .opt { color: var(--faint); font-weight: 400; }
.rd { font-weight: 400; display: flex; gap: 6px; align-items: baseline; padding: 3px 0; }
.pq { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
.plist { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.pgh { font-size: 12px; color: var(--sub); font-weight: 700; padding: 8px 4px 2px; }
.pp { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; }
label.pp:hover { background: var(--bg); cursor: pointer; }
.pp .em { color: var(--faint); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.add summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 4px 0; }
.add { display: flex; flex-direction: column; gap: 8px; }
.add > .primary { align-self: flex-end; margin-top: 8px; }
.glist { display: flex; flex-direction: column; gap: 6px; }
.gi { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.gi.off { opacity: .6; }
.gi > button { flex: none; white-space: nowrap; }
.gi .em { color: var(--faint); font-size: 12px; }
.inv { border-top: 1px solid var(--line); padding-top: 12px; gap: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.side-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.blist { display: flex; flex-direction: column; gap: 8px; }
.bi { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.bi p { margin: 2px 0 0; color: var(--sub); font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #292524; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 80; font-size: 14px; max-width: calc(100vw - 32px); transition: opacity .4s; }
.toast.bad { background: var(--danger); }
.toast.out { opacity: 0; }
.fakebar { position: fixed; left: 8px; bottom: 44px; max-width: 244px; z-index: 40; background: #FFF7E6; border: 1px solid #F0D9A8; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.fakebar select { font: inherit; }

/* 휴대폰: 한 칸씩 (방 목록 → 글 → 스레드) */
@media (max-width: 760px) {
  .app, .app.has-thread { grid-template-columns: 1fr; }
  .app .side, .app .main, .app .thread { display: none; }
  .app.v-list .side, .app.v-main .main, .app.v-thread .thread { display: flex; }
  .app.v-thread .thread { border-left: 0; }
  .back { display: block; }
  .head .x { display: none; }
  .head .topic { flex-basis: 100%; }
  .msg { padding-left: 12px; padding-right: 12px; }
  .msg:hover { background: none; }
  .msg:hover .acts { display: none; }
  .msg.sel { background: #FAF7F2; }
  .msg.sel .acts { display: flex; right: 8px; top: -14px; }
  .acts button { width: 38px; height: 34px; }
  .r.add { opacity: 1; }
  .cl { display: none; }
  .compose { padding: 4px 10px 10px; }
  .fakebar { bottom: auto; top: auto; left: auto; right: 8px; bottom: 8px; }
  .app.v-main ~ .fakebar, .app.v-thread ~ .fakebar { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .app.has-thread { grid-template-columns: 220px minmax(0, 1fr) 340px; }
  .app { grid-template-columns: 220px minmax(0, 1fr); }
}

/* 🖼 같이 보기 판 — 화면 전체를 덮음 */
.board { position: fixed; inset: 0; z-index: 60; background: #3f3b38; display: flex; flex-direction: column; }
.bd-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.bd-bar button { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; min-height: 34px; padding: 0 10px; }
.bd-bar button:disabled { opacity: .35; }
.bd-bar .x { border: 0; font-size: 18px; }
.bd-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pg { white-space: nowrap; }
.bd-tools { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bd-bar .bd-t.on, .bd-bar button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.bd-bar .bd-c { width: 26px; min-height: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.bd-bar .bd-c.on { box-shadow: 0 0 0 2px var(--ink); }
.bd-who { font-size: 13px; color: var(--sub); }
.bd-f { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.bd-bar .grow { flex: 1; }
/* 🌐 외부 회의방 */
.tag.ext { background: #fef3c7; color: #92400e; }
div.ext { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.ext-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ext-s { font-size: 13px; color: var(--sub); }
.ext-meet { display: inline-flex; align-items: center; padding: 0 14px; height: 40px; border-radius: 8px; text-decoration: none; }
.ext-l { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.ext-m { max-width: 680px; }
.ext-mh { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.ext-mh span { color: var(--faint); font-size: 12px; }
.ext-m.x .ext-mh b { color: #92400e; }
.ext-mt { font-size: 15px; word-break: break-word; margin-top: 2px; }
.ext-f { font-size: 13px; color: var(--sub); }
.ext-f span { color: var(--faint); }
.ext-c { display: flex; gap: 8px; padding: 10px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.ext-c textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
/* (2026-10-10 B) 앱 모양 확인 창 · 판 도구 접기 · 키보드로 글 단추 */
.ask-wrap { z-index: 90; }
.modal.ask { max-width: 420px; }
.modal.ask p { margin: 0 0 10px; line-height: 1.55; }
.modal.ask .ask-in { width: 100%; box-sizing: border-box; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; }
.bd-bar .bd-tg { display: none; }
@media (max-width: 760px) {
  .bd-bar .bd-tg { display: inline-block; }
  .bd-bar .bd-x { display: none; }
  .bd-bar.open .bd-x { display: inline-flex; }
}
.msg:focus-within .acts, .msg:focus .acts { display: flex; }
.msg:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.bd-main { flex: 1; min-height: 0; display: flex; position: relative; }
.bd-chat { width: 340px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); }
.bd-chat[hidden] { display: none; }
.bd-ch-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.bd-ch-h button { border: 0; background: none; font-size: 16px; }
.bd-ch-l { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 10px; }
.bd-cm-h { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bd-cm-h .meta { color: var(--sub); font-size: 12px; }
.bd-cm-t { margin: 2px 0 0 30px; font-size: 14px; word-break: break-word; }
.bd-cm-t .meta { color: var(--sub); font-size: 12px; }
.bd-ch-c { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); align-items: flex-end; }
.bd-ch-c textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.bd-new { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e11d48; color: #fff; font-size: 12px; }
@media (max-width: 760px) { .bd-chat { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 55%; border-left: 0; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.25); z-index: 3; } }
.bd-stage { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; justify-content: center; align-items: flex-start; }
.bd-stage > .hint { color: #e7e5e4; }
.bd-page { position: relative; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.35); }
.bd-page canvas { display: block; }
.bd-ink { position: absolute; left: 0; top: 0; }
.bd-html { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.hint.warn { color: #b45309; }
.bd-tx { position: absolute; z-index: 2; min-width: 160px; font: 600 15px sans-serif; padding: 4px 6px; border: 2px dashed var(--accent); border-radius: 6px; background: rgba(255,255,255,.92); resize: none; }
.bd-go { margin: 4px 0 0 6px; border: 1px solid var(--accent); color: var(--accent); background: none; border-radius: 8px; min-height: 30px; padding: 0 10px; font-size: 13px; }
.file.gdoc .fs { color: var(--accent); font-weight: 600; }
/* 📲 설치 띠 (업무 앱 #na-inst 와 같은 모양) */
#tk-inst, #tk-push { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 55; display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(41,37,36,.18); padding: 12px 14px; width: min(560px, calc(100vw - 32px)); box-sizing: border-box; }
#tk-inst img, #tk-push img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
#tk-inst .t, #tk-push .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#tk-inst .t span, #tk-push .t span { color: var(--sub); font-size: 13px; }
#tk-inst .t .tr, #tk-push .t .tr { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; cursor: pointer; }
#tk-inst .b, #tk-push .b { display: flex; flex-direction: column; gap: 4px; flex: none; }
#tk-inst .b button, #tk-push .b button { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; white-space: nowrap; }
#tk-inst .b button.primary, #tk-push .b button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 760px) {
  #tk-inst, #tk-push { bottom: 96px; }   /* 글쓰기 칸 위 */
  .head { flex-wrap: wrap; row-gap: 6px; }
  .head .mem .lb { display: none; }   /* 휴대폰: 머리 단추는 그림만 (2026-10-10 점검 — 회의방 머리 가로 넘침) */
}
.au-tr { margin: 8px 0; font-size: 13px; }
.au-tr .aitext { max-height: 30vh; overflow-y: auto; padding: 6px 8px; background: var(--bg); border-radius: 6px; }
.df-out { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.df-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.df-n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.df-n .meta { font-size: 12px; color: var(--sub); }
.df-row a.ghost { display: inline-flex; align-items: center; height: 32px; text-decoration: none; color: inherit; }
.bd-pick { display: block; width: 100%; text-align: left; padding: 10px 12px; margin: 4px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sec-t { font-size: 13px; color: var(--sub); margin: 10px 0 2px; }

/* 🚗 차량 예약 창: 그날 예약 목록 */
.cf-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cf-row.mine { font-weight: 600; }

/* 2026-10-10 C: 고정 글 띠 · 다음 안 읽은 방 · 끈 방 */
.pinbar { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: #FFF8E1; border-bottom: 1px solid var(--line); font-size: 13.5px; min-width: 0; }
.pinbar .pb-t { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--text, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font: inherit; }
.pinbar .pb-n, .pinbar .pb-x { flex: none; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.pinbar .pb-x { border: 0; }
.quick { display: flex; gap: 6px; padding: 0 12px 6px; flex-wrap: wrap; }
.quick button, .quick .q-none { background: rgba(246,241,234,.08); border: 1px solid rgba(246,241,234,.16); color: var(--side-sub); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
.quick .q-none { border-color: transparent; background: none; }
.quick button b { color: #fff; }
.ch.muted { opacity: .55; }
.logged { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: #EEF6F1; color: #3F7C6A; font-size: 11.5px; white-space: nowrap; vertical-align: 1px; cursor: default; }
.leave .lv-o { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.leave .lv-o:empty { display: none; }

/* 🌐 손님 화면: 누가 있나 · 나가기 (2026-10-10 C) */
.ext-hb { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ext-hb .ghost.sm { height: 32px; }
.ext-who { padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }

/* 👀 글자 크기 (talk.fs → --fs) */
body { font-size: calc(15px * var(--fs, 1)); }
.ch { font-size: calc(14.5px * var(--fs, 1)); }
.hd b { font-size: calc(14.5px * var(--fs, 1)); }
.cbox textarea, .ed-ta, .ext-c textarea { font-size: calc(15px * var(--fs, 1)); }

/* 🌙 어두운 화면 (talk.theme → html[data-theme=dark]) */
html[data-theme=dark] { color-scheme: dark;
  --bg: #1C1A18; --panel: #262321; --line: #3B3631; --ink: #ECE6DE; --sub: #B5ACA2; --faint: #8C847C;
  --side: #22201D; --side-ink: #EDE7DF; --side-sub: #C9C0B4; --side-on: #3F5A47; --side-hover: rgba(246,241,234,.08);
  --accent: #5E8468; --hit: #3A3122; --hit-line: #B88A2E; --tag: #3A3226; --tag-ink: #E6C994; }
html[data-theme=dark] input, html[data-theme=dark] textarea, html[data-theme=dark] select { background: var(--panel); color: var(--ink); border-color: var(--line); }
html[data-theme=dark] .find input:focus, html[data-theme=dark] .edbox, html[data-theme=dark] .cbox, html[data-theme=dark] .asklog .go, html[data-theme=dark] .bd-page { background: var(--panel); }
html[data-theme=dark] .msg:hover, html[data-theme=dark] .msg.sel { background: #2A2724; }
html[data-theme=dark] .leave, html[data-theme=dark] .leave.st-승인, html[data-theme=dark] .leave.st-반려, html[data-theme=dark] .leave.st-취소 { background: #2B2825; }
html[data-theme=dark] .asklog, html[data-theme=dark] .sugg, html[data-theme=dark] .fakebar, html[data-theme=dark] .pinbar { background: #332B1E; }
html[data-theme=dark] .tag.link, html[data-theme=dark] .acts-go .go, html[data-theme=dark] .pchip, html[data-theme=dark] .pop.ac button.on, html[data-theme=dark] .pop.ac button:hover, html[data-theme=dark] .logged { background: #2C3A31; color: #BFD8C6; }
html[data-theme=dark] .av.ai { background: #3A3346; }
html[data-theme=dark] .hit-row mark { background: #5A4520; color: var(--ink); }
html[data-theme=dark] .tx a, html[data-theme=dark] .rep { color: #8CC0E8; }
html[data-theme=dark] .at { color: #9CC3EA; }
html[data-theme=dark] .at.me { color: #E8B870; }
html[data-theme=dark] .tag.ext, html[data-theme=dark] .ext-m.x .ext-mh b { color: #F0B47A; }
html[data-theme=dark] .tag.ext { background: #3A2E1A; }
html[data-theme=dark] .hint.warn { color: #E8A050; }
html[data-theme=dark] .ghost.danger { border-color: #6B2C26; color: #F08A80; }
html[data-theme=dark] .modal-wrap { background: rgba(0,0,0,.55); }

/* 방 머리: 단추가 많아도 방 이름이 눌리지 않게 (2026-10-10 C) — 가운데 칸이 좁으면 단추는 그림만, 그래도 모자라면 둘째 줄로 */
#main { container-type: inline-size; }
.head { flex-wrap: wrap; }
.head .ttl { min-width: min(220px, 100%); }
@container (max-width: 980px) { .head .mem .lb { display: none; } }
#tk-push .ic { font-size: 30px; flex: none; }
.quiet { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.quiet .days { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; align-items: center; }
.quiet input[type=time] { height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font: inherit; }
/* 🗳 투표 */
.poll { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0; max-width: 480px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.poll .pl-o { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: none; overflow: hidden; min-height: 34px; }
.poll .pl-o:not([disabled]):hover { border-color: var(--accent); }
.poll .pl-o.on { border-color: var(--accent); font-weight: 600; }
.poll .pl-o.top { border-color: var(--hit-line); }
.poll .pl-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(79,107,87,.14); z-index: 0; transition: width .2s; }
.poll .pl-t { position: relative; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll .pl-n { position: relative; color: var(--sub); font-size: 13px; }
.poll .pl-f { font-size: 12.5px; color: var(--sub); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pn-opts { display: flex; flex-direction: column; gap: 6px; }
.pn-opts input { height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; }
.fnd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fnd #fd-q { flex: 1 1 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; }
.fnd select, .fnd input[type=date] { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; font: inherit; max-width: 100%; }
.fnd .fd-d, .fnd .fd-qk { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.rm-p { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-p button { height: auto; padding: 6px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rm-p small { color: var(--sub); font-size: 11.5px; }
/* 🟡 상태 */
.st { font-size: 12.5px; margin-left: 3px; cursor: default; }
.ws .st-me { background: none; border: 1px solid rgba(246,241,234,.2); color: var(--side-sub); border-radius: 10px; padding: 0 7px; font-size: 11.5px; margin-left: 4px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* ❓ 사용법 */
.modal.wide { width: 720px; }
.hp { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.hp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-tabs button { border: 1px solid var(--line); background: none; border-radius: 16px; padding: 4px 10px; font-size: 13px; white-space: nowrap; }
.hp-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.hp-body h3 { margin: 4px 0 6px; font-size: 17px; }
.hp-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }
/* (페이블 점검) 휴대폰 글쓰기 칸 — 🗳 ⏱ 가 늘어 「보내기」가 잘리던 것 */
@media (max-width: 760px) { .cbar { gap: 2px; padding-left: 6px; } .cbar .clip { padding: 0 5px; min-width: 0; } }