/* The Talk — 일반 사이트 구조(머리띠·본문·바닥글). 기준색 빨간색. 디자인 네 벌(미니멀 기본·링·그라데이션·위젯)과 화이트(기본)·블랙 — html.light 가 화이트. */
:root {
  --bg: #000000; --label: #ffffff; --label2: #8e8e93; --sep: #2a2a2c;
  --fill: rgba(118,118,128,0.24); --red: #ff453a; --accent: var(--red); --accent-rgb: 255,69,58; --card: #1c1c1e; --head: #000000;
  --fs: 1; --f1: calc(13px * var(--fs)); --f2: calc(15px * var(--fs)); --f3: calc(17px * var(--fs));   /* --fs = 설정 > 디자인 > 글자 크기 배율(사이트 모든 글자) */
  --fade: 1.35s;        /* 우측 하단 버튼이 나타나고 사라지는 시간 */
  --page-fade: 0.45s;   /* 페이지가 들어오고(새로고침 포함) 나갈 때 시간 — 모두 같은 값 (2026-11-01) */
}
html.light {
  --bg: #ffffff; --label: #000000; --label2: #8e8e93; --sep: #ececec;
  --fill: rgba(120,120,128,0.12); --red: #ff3b30; --accent-rgb: 255,59,48; --card: #f7f7f9; --head: #ffffff;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif; background: var(--bg); color: var(--label); font-size: var(--f2); line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 36px; }   /* 좌우 여백 36px (2026-11-01 사용자 지시, 40에서 조금 좁힘) */
/* 페이지 전환 — 기본은 항상 보인다(CSS만으로 보장). 자바스크립트가 html.js 를 붙인 경우에만 처음 숨겼다가
   첫 그리기 뒤 body.ready 로 페이드 인하고, 어떤 이유로든 ready 가 안 오면 CSS 애니메이션이 1.2초 뒤 강제로 보여 준다. 떠날 때는 body.leaving 으로 페이드 아웃 */
main.wrap { flex: 1; padding-top: 16px; padding-bottom: 32px; transition: opacity var(--page-fade) ease-in-out; }
html.js body:not(.ready) main.wrap { opacity: 0; animation: forceshow 0s 1.8s forwards; }
@keyframes forceshow { to { opacity: 1; } }
body.leaving main.wrap { opacity: 0 !important; animation: none; }
a, .btn, .item, .set-row, .nb, .cmt-act a { transition: opacity .2s ease, background-color .2s ease, color .2s ease; }

/* 머리띠 — 왼쪽 로고, 가운데 로그인·회원, 오른쪽 끝 설정 */
/* 머리띠 — 아이폰처럼 반투명 빨간색 + 배경 흐림: 스크롤하면 뒤로 글이 비쳐 지나간다 (2026-11-01 사용자 지시) */
/* 머리띠 — 흰색 반투명 + 배경 흐림, 펜 버튼과 같은 옅은 아래 그림자. 로고는 빨강 (2026-11-01 사용자 지시) */
header.top { background: var(--bg); border-bottom: none; box-shadow: none; position: sticky; top: 0; z-index: 10; }   /* 페이지 배경색 단색, 선·그림자·반투명 없음 (2026-11-01 사용자 지시) */
.logo { color: var(--accent); }
header nav a.who { color: var(--label); }
header nav { color: var(--label2); }
header.top .wrap { display: flex; align-items: center; height: 52px; gap: 12px; }
.logo { white-space: nowrap; font-size: calc(20px * min(var(--fs), 1.1)); font-weight: 800; letter-spacing: -0.5px; color: var(--accent); }
header nav { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: var(--f1); color: var(--label2); }
header nav a.who { color: var(--label); font-weight: 600; }
.person { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; border-radius: 50%; color: var(--label2); }   /* 비로그인 때 사람 아이콘 → 로그인 화면 (2026-11-01 사용자 지시) */
.person svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
footer { border-top: 1px solid var(--sep); padding: 16px 0 28px; font-size: var(--f1); color: var(--label2); text-align: center; }

/* 본문 공통 */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 8px; border-bottom: 2px solid var(--accent); margin-bottom: 4px; }
.bar h2 { font-size: var(--f3); font-weight: 700; }
.bar .hd { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bar .hd h2 { flex: 0 0 auto; }
.bdesc { font-size: var(--f1); color: var(--label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec { margin-bottom: 36px; }   /* 메인 게시판 묶음 사이 간격 26→36 (2026-11-01 사용자 지시) */
.sec:first-child { margin-top: 12px; }   /* 상단 바~첫 게시판 28px (본문 위 여백 16 + 12, 2026-11-01 사용자 지시로 36에서 줄임) */
.crumb { font-size: var(--f1); color: var(--label2); margin-bottom: 10px; }
.crumb a { color: var(--label2); }
.desc { margin: 6px 0 2px; }
.muted { color: var(--label2); font-size: var(--f1); }
.empty { color: var(--label2); font-size: var(--f1); padding: 18px 0; text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.row.end { justify-content: flex-end; margin-top: 8px; }

/* 목록 줄 */
.item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sep); }
.item .main { min-width: 0; flex: 1; }
.item b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item small { display: block; font-size: var(--f1); color: var(--label2); margin-top: 2px; }
.item .side { text-align: right; flex: 0 0 auto; color: var(--label2); }
.item .side b { font-weight: 600; color: var(--label); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: none; border-radius: 10px; font-size: var(--f2); font-weight: 600; white-space: nowrap; line-height: 1; cursor: pointer; font-family: inherit; }
.btn:active { opacity: 0.7; }
.btn.sm { height: auto; min-height: 22px; padding: 3px 7px; font-size: calc(11px * var(--fs)); border-radius: 6px; font-weight: 500; }
.btn.wide { width: 100%; height: 46px; margin-top: 6px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--fill); color: var(--label); }
.btn-danger { background: var(--red); color: #fff; }

/* 상자(양식·안내) */
.box { background: var(--card); border-radius: 14px; padding: 18px 16px; margin-bottom: 20px; }
.box.narrow { max-width: 420px; margin: 24px auto; }
.box h2 { font-size: var(--f3); font-weight: 700; margin-bottom: 12px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--sep); border-radius: 10px; background: var(--bg); color: var(--label); font-size: var(--f2); font-family: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
select { width: auto; min-width: 0; height: 34px; }
textarea { padding: 10px 12px; line-height: 1.5; resize: none; overflow: hidden; box-sizing: border-box; }   /* 높이는 글자 수에 맞춰 스크립트가 늘린다 (2026-11-02) */
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { font-size: var(--f1); color: var(--label2); margin-top: 4px; }
.form .check { display: flex; align-items: center; gap: 6px; color: var(--label2); font-size: var(--f1); }
.form .check input { width: auto; min-height: 0; }
.alt { text-align: center; font-size: var(--f1); margin-top: 6px; }
.alt a { color: var(--accent); font-weight: 600; cursor: pointer; }
.msg { font-size: var(--f1); color: var(--red); padding: 10px 12px; border-radius: 10px; background: var(--fill); margin-bottom: 10px; }
.msg.ok { color: var(--label); }
.hint { font-size: var(--f1); color: var(--label2); min-height: 18px; padding: 0 4px; margin-top: -4px; }
.hint:empty { display: none; }
.hint.ok { color: var(--label); }
.hint.bad { color: var(--red); }

.lk { color: var(--accent); }
.likebox { display: flex; justify-content: center; margin-top: 32px; }   /* 본문 끝~하트 14px → 32px (2026-11-03) */
/* 좋아요 — 큰 하트, 가운데 숫자. 안 누름: 테두리+옅은 속, 누름: 빨강 채움+흰 숫자 (2026-11-01 사용자 지시) */
.heart { position: relative; display: grid; place-items: center; width: 24px; height: 22px; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.heart svg { grid-area: 1 / 1; width: 100%; height: 100%; display: block; fill: rgba(var(--accent-rgb),0.28); stroke: none; transition: fill .15s, transform .15s; }
.heart span { grid-area: 1 / 1; line-height: 1; text-box: trim-both cap alphabetic; text-align: center; font-size: calc(9px * var(--fs)); font-weight: 800; color: var(--accent); pointer-events: none; }   /* 글자 상자를 숫자 높이(윗선~밑선)로 잘라 글꼴마다 다른 위아래 여백과 무관하게 하트 정중앙에 놓는다 */
@supports not (text-box: trim-both cap alphabetic) { .heart span { transform: translateY(-9%); } }
.heart.on svg { fill: var(--accent); }
.heart.on span { color: #fff; }
.heart:active svg { transform: scale(0.92); }

/* 글 보기 */
.post { padding: 6px 0 18px; margin-bottom: 10px; }   /* 하트 아래 옅은 선 없앰 — 바로 아래 버튼 줄의 빨간 선이 경계 (2026-11-03) */
.post-title { font-size: calc(22px * var(--fs)); font-weight: 700; letter-spacing: -0.5px; line-height: 1.3; margin-bottom: 22px; word-break: keep-all; }   /* 제목과 글 정보 사이 한 줄 (2026-11-01) */
.post-body { margin-top: 16px; padding-top: 34px; border-top: 1px solid var(--sep); white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
/* 본문 글자 크기 — 설정에서 고르며 기기에 저장(html[data-font]). 보통=기본 글자 크기(15px) */
html[data-font="s"] { --fs: 0.87; }   /* 작게 13/15 */
html[data-font="l"] { --fs: 1.13; }   /* 크게 17/15 */
html[data-font="xl"] { --fs: 1.33; }  /* 아주 크게 20/15 — 2026-11-03: 본문만이 아니라 모든 글자에 적용 */
.post + .bar { border-bottom: none; }

/* 설정 */
.card { margin-bottom: 22px; }
.card h3 { font-size: var(--f1); font-weight: 600; color: var(--label2); margin: 0 0 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--sep); }
.set-name { font-weight: 600; }
.set-val { color: var(--label2); text-align: right; word-break: break-all; }
.kvs { font-size: var(--f2); margin: 0 0 12px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.kv span:first-child { color: var(--label2); }

/* 팝업 */
#appDialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
#appDialog.show { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
#appDialog .box { transform: scale(0.96); transition: transform .25s ease; }
#appDialog.show .box { transform: none; }
#appDialog .box { width: 100%; max-width: 360px; border: 1px solid var(--sep); border-radius: 20px; padding: 22px 20px 16px; margin: 0; }
#appDialog .msg { font-size: var(--f2); line-height: 1.5; color: var(--label); white-space: pre-line; word-break: keep-all; background: none; padding: 0; margin: 0; }
#appDialog .row { display: flex; gap: 10px; margin-top: 18px; }
#appDialog .row .btn { flex: 1; height: 44px; border-radius: 14px; }

/* ════ 디자인 네 벌 — 위는 미니멀(기본), 아래는 링·그라데이션·위젯 덮어쓰기 ════ */
/* 링 — 목록을 카드로, 머리띠 로고에 빨간 고리 */
html[data-skin="ring"] .list { display: flex; flex-direction: column; gap: 8px; }
html[data-skin="ring"] .item { background: var(--card); border: none; border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--sep); }
html[data-skin="ring"] .item:active { box-shadow: inset 0 0 0 2px var(--accent); }
html[data-skin="ring"] .bar { border-bottom: none; }
html[data-skin="ring"] .logo { padding: 2px 10px; border: 2px solid var(--accent); border-radius: 20px; font-size: calc(16px * var(--fs)); }
html[data-skin="ring"] .bar h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 3px solid var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
/* 그라데이션 — 빨간 그라데이션 머리띠 */
html[data-skin="grad"] header.top { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.6) 0%, rgba(var(--accent-rgb),0.45) 55%, rgba(var(--accent-rgb),0.3) 100%); border-bottom: none; box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.2); }
html[data-skin="grad"] .logo, html[data-skin="grad"] header nav, html[data-skin="grad"] header nav a.who, html[data-skin="grad"] .person { color: #fff; }
html[data-skin="grad"] header nav { color: rgba(255,255,255,0.85); }
html[data-skin="grad"] .bar { border-bottom: none; border-left: 4px solid var(--accent); padding-left: 10px; background: linear-gradient(90deg, var(--fill), transparent); border-radius: 0 8px 8px 0; }
html[data-skin="grad"] .btn-primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #fff)); }
html.light[data-skin="grad"] { --bg: #f2f2f7; --card: #ffffff; }
html[data-skin="grad"] .item { background: var(--card); border: none; border-radius: 10px; padding: 11px 14px; margin-bottom: 6px; }
/* 위젯 — 둥근 큰 카드 묶음 */
html[data-skin="widget"] .sec, html[data-skin="widget"] .post, html[data-skin="widget"] .card { background: var(--card); border-radius: 18px; padding: 6px 16px 10px; border: none; }
html[data-skin="widget"] .bar { border-bottom: none; }
html[data-skin="widget"] .item:last-child, html[data-skin="widget"] .set-row:last-child { border-bottom: none; }
html[data-skin="widget"] .logo { background: var(--accent); color: #fff; border-radius: 10px; padding: 3px 10px; font-size: calc(16px * var(--fs)); }
html[data-skin="widget"] .box { border-radius: 18px; }
html[data-skin="widget"] .btn { border-radius: 14px; }

/* ── 댓글·첨부·검색·쪽수·표·관리자 (2026-11-01 옛 사이트 이관으로 추가) ── */
.tag { display: inline-block; font-size: calc(11px * var(--fs)); font-weight: 600; color: #fff; background: var(--accent); border-radius: 5px; padding: 1px 6px; vertical-align: 1px; }
.tag.gray { background: var(--label2); }
.cnt { color: var(--accent); font-size: var(--f1); font-weight: 600; }
.clip { font-size: var(--f1); }
.post-imgs { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.post-imgs img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.files { list-style: none; margin-top: 12px; font-size: var(--f1); }
.files li { padding: 6px 0; border-top: 1px solid var(--sep); }
.files li a { color: var(--accent); }
.files.edit { display: flex; flex-direction: column; gap: 4px; }
.search { display: flex; gap: 8px; margin: 10px 0 4px; }
.search input { flex: 1; min-height: 38px; }
.search .btn { height: 38px; }
.pager { display: flex; justify-content: center; gap: 6px; margin: 18px 0 6px; flex-wrap: nowrap; }   /* 한 줄 고정 — 좁으면 칸이 줄어든다 */
.pager a { flex: 0 1 34px; min-width: 28px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--fill); font-size: var(--f1); font-weight: 600; }
.pager a.on { background: var(--accent); color: #fff; }
.cmts { margin-top: 18px; }
.cmts h3 { font-size: var(--f2); font-weight: 700; margin-bottom: 6px; }
.cmt { padding: 10px 0; border-top: 1px solid var(--sep); }
.cmt.reply { margin-left: 18px; padding-left: 10px; border-top: none; border-left: 2px solid var(--sep); }
.cmt-hd { display: flex; align-items: baseline; gap: 8px; font-size: var(--f1); }
.cmt-hd b { color: var(--label); }
.cmt-act { margin-left: auto; display: flex; gap: 10px; }
.cmt-act a { color: var(--label2); cursor: pointer; }
.cmt-act form { display: inline; }
.cmt-body { white-space: pre-wrap; word-break: break-word; margin-top: 3px; line-height: 1.55; }
.cmt-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; transition: opacity .25s ease; }
.cmt-form.fade { opacity: 0; }
.cmt-form textarea { flex: 1; min-height: 44px; }
.cmt .cmt-form { margin: 8px 0 0 18px; }
/* 표 — 열 간격 자동 축소, 제목 2줄까지, 한계에서 표만 좌우 스크롤 */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--f1); min-width: 520px; }
.tbl th { text-align: left; color: var(--label2); font-weight: 600; padding: 8px 6px; border-bottom: 2px solid var(--accent); white-space: normal; line-height: 1.25; max-height: 2.6em; }
.tbl td { padding: 9px 6px; border-bottom: 1px solid var(--sep); white-space: nowrap; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:active { background: var(--fill); }
.grid2, .grid3 { display: grid; gap: 8px; }
.grid2 { grid-template-columns: 1fr 100px; }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.grid2 label, .grid3 label { display: block; font-size: var(--f1); color: var(--label2); margin: 4px 0 2px; }
.bform h2 { font-size: var(--f2); }
.set-more summary { list-style: none; cursor: pointer; }
.set-more summary::-webkit-details-marker { display: none; }
input[type="file"] { font-size: var(--f1); color: var(--label2); }

.flinks { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; font-size: min(1em, 3.8vw); white-space: nowrap; }   /* 세 링크는 줄바꿈 없이 한 줄 — 좁은 폰은 글자를 줄여 맞춘다 */
.flinks a { color: var(--label2); }
.flinks a + a::before { content: '·'; margin-right: 8px; }
.page-body { padding: 12px 0; line-height: 1.7; word-break: break-word; }
.page-body img { max-width: 100%; }
.tbl td form { display: inline; }
.rolef select, .set-row select { height: 30px; font-size: var(--f1); max-width: 150px; }

/* 글 끝 이동 버튼 — 글 끝에 닿으면 우측 하단에 ◀ 이전 글 · ▲ 맨 위 · ▶ 다음 글 (없으면 흐리게) */
/* 나타남·사라짐 모두 같은 0.9초·같은 곡선 (2026-11-01 사용자 지시) */
.navbtns { position: fixed; right: 16px; bottom: 20px; display: flex; gap: 8px; z-index: 20; opacity: 0; visibility: hidden; transition: opacity var(--fade) ease-in-out, visibility 0s linear var(--fade); }
.navbtns.show { opacity: 1; visibility: visible; transition: opacity var(--fade) ease-in-out, visibility 0s; }
.nb { width: 40px; height: 40px; border: none; border-radius: 50%; background: color-mix(in srgb, var(--accent) 60%, #fff);   /* 흰 바탕 위 반투명 강조색(60%)과 같은 색을 불투명으로 — 뒤에 글자가 있어도 네 버튼이 똑같이 보인다. 색상 설정을 따른다 */ color: #fff; box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.nb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nb:active { opacity: 0.8; }
.nb.off { pointer-events: none; }   /* 이전·다음 글이 없어도 색·그림자는 같게, 누름만 막음 (2026-11-01 사용자 지시: 네 버튼 색 통일) */
.navbtns.top .nb:not(:last-child) { display: none; }   /* 맨 위에서는 홈만 */
button.homebtn { border: none; background: none; padding: 0; cursor: pointer; }

/* 글쓰기 — 펜 아이콘 버튼 (2026-11-01 사용자 지시) */
.btn.icon { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: #fff; color: var(--label2); border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }   /* 흰 바탕에 글 수 글자와 같은 옅은 회색 펜, 테두리 없이 옅은 그림자 */
.btn.icon .pen { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bar.end { justify-content: flex-end; }
.cmt-note { display: block; text-align: center; padding: 14px 0; margin-top: 4px; }

/* 설정 > 디자인 > 색상 견본, 설정의 버그 리포팅 항목 (2026-11-02) */
.colorrow { align-items: flex-start; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 62%; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--sw); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--sep); }
.sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--label); }
.bugname { display: inline-flex; align-items: center; gap: 8px; }
.bugic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--label2); }
.nbadge { display: inline-block; min-width: calc(18px * var(--fs)); padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: calc(11px * var(--fs)); font-weight: 700; line-height: calc(18px * var(--fs)); text-align: center; }
.bugs textarea { width: 100%; }
.namerow { gap: 10px; }   /* 설정 > 정보 > 이름 바꾸기 (2026-11-02) */
.namebox { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end; min-width: 0; }
.namebox input { max-width: 170px; min-height: 34px; height: 34px; text-align: right; }
.namebox .btn.sm { height: 30px; padding: 0 10px; font-size: var(--f1); }
.namebox .btn:disabled { opacity: .4; }
/* 설정의 온오프 스위치 (2026-11-02) */
.pushctl { display: inline-flex; align-items: center; gap: 10px; }
.toggle { position: relative; width: 46px; height: 28px; border: none; border-radius: 999px; background: var(--fill); padding: 0; cursor: pointer; transition: background .2s ease; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: left .2s ease; }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 20px; }
.toggle:disabled { opacity: .5; }
.permhelp { font-size: var(--f1); color: var(--label2); padding: 10px 0 4px; line-height: 1.6; }   /* 알림 차단 시 허용 경로 안내 (2026-11-02) */
.permhelp ol { margin: 6px 0 0 18px; padding: 0; }
.permhelp b { color: var(--label); }
/* 알림함 (2026-11-02) */
.who-badge { margin-left: -8px; text-decoration: none; }
.notif { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; }
.notif .dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; }
.notif.unread .dot { background: var(--accent); }
.notif .nbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif .ntitle { font-weight: 600; }
.notif small { color: var(--label2); font-size: var(--f1); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif .ntime { -webkit-line-clamp: 1; }
.bar .btn.sm { margin-left: auto; }
/* 새 비밀번호 화면 (2026-11-03) — 입력칸 하나 + 표시/숨김 + 저장 */
.rsbox { text-align: center; }
.rsbox .form { text-align: left; }
.rsmsg { font-size: var(--f2); color: var(--label); margin: 6px 0 16px; }
.pwwrap { position: relative; }
.pwwrap input { padding-right: 44px; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: none; color: var(--label2); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eye.on { color: var(--accent); }
/* 설정 > 접속 추이 (2026-11-03) */
.seg { display: inline-flex; gap: 2px; background: var(--fill); border-radius: 9px; padding: 2px; }
.seg a { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--label2); padding: 4px 10px; border-radius: 7px; text-decoration: none; }
.seg a.on { background: var(--card, #fff); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chart { width: 100%; height: auto; display: block; margin: 6px 0 2px; overflow: visible; }
.chart .grid { stroke: var(--fill); stroke-width: 1; }
.chart .bar { fill: rgba(var(--accent-rgb), .55); }
.chart .bar.today { fill: var(--accent); }
.chart .lbl { font-size: calc(22px * var(--fs)); fill: var(--label2); }   /* viewBox 600 기준 → 폰에서 약 11px */
.hint { font-size: var(--f1); color: var(--label2); margin: 6px 0 0; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 게시판 검색 — 돋보기 버튼으로 여닫기 (2026-11-03) */
.search.hidden { display: none; }
.btn.icon.on { opacity: 1; }
/* 목록 안에 펼친 본문 (2026-11-03) */
.item.open b { white-space: normal; font-size: calc(16px * var(--fs)); font-weight: 700; letter-spacing: -0.5px; line-height: 1.3; word-break: keep-all; }   /* 펼치면 제목을 글 화면 제목 크기로 (2026-11-03) */
.item.loading { opacity: .6; }
:root { --line-strong: color-mix(in srgb, var(--label) 55%, transparent); }   /* 펼친 본문 경계선 — 진한 실선 */
.item.open { border-bottom: none; padding-top: 43px; }   /* 펼친 글은 카드 안 — 선 없음 (2026-11-03) */
.open-card { margin: 14px -16px; padding: 0 16px 6px; border-radius: 16px; background: var(--bg); box-shadow: 0 0 0 rgba(0,0,0,0); transition: box-shadow var(--card-fade) ease-in-out; }   /* 펼친 글 = 선 없이 음영으로 떠 있는 카드 (2026-11-03 사용자 지시) */
.open-card.in { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 3px 10px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.16); }   /* 카드가 더 드러나게 음영 강화 (2026-11-03) */
.item:has(+ .open-card) { border-bottom-color: transparent; }   /* 카드 바로 위 글의 선도 감춘다 */
.inline-post .post-body { border-top: none; margin-top: 0; padding-top: 16px; }   /* 제목~본문 첫 줄 간격 줄임 (2026-11-03) */
.inline-post { opacity: 0; transition: opacity var(--card-fade) ease-in-out; padding: 0 0 22px; }   /* 안쪽은 글 화면과 똑같고, 바깥 경계는 카드 음영 */
.inline-post.in { opacity: 1; }
.inline-post .post { padding-top: 0; }

.item { scroll-margin-top: 64px; }   /* 펼친 글로 옮겨 갈 때 제목이 위 고정 막대 밑에 가리지 않게 (2026-11-03) */
header.top nav, header nav a.who { white-space: nowrap; }   /* 글자를 키워도 위 막대의 이름이 두 줄로 깨지지 않게 */
html:not(.light) .open-card { background: var(--card); }   /* 어두운 화면에서는 음영이 안 보이므로 바탕색을 한 단계 밝게 */
#postEnd + .bar, .post-end + .bar { border-bottom-width: 1px; }   /* 본문 아래 목록·댓글 버튼 줄(댓글 위) 선을 얇게 — 글 화면·펼친 카드 공통 (2026-11-03) */
:root { --card-fade: 0.7s; }   /* 펼친 카드가 나타나고 사라지는 시간 (2026-11-03 사용자 지시: 천천히) */
/* 퍼 가기 아이콘 — 카카오톡(노랑 말풍선)·인스타그램(무지개 카메라) (2026-11-03) */
.share { width: 26px; height: 26px; border: none; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.share svg { width: 16px; height: 16px; }
.share.kakao { background: #fee500; }
.share.kakao svg { fill: #3c1e1e; }
.share.insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.share.insta svg { fill: none; stroke: #fff; stroke-width: 2; }
.share.insta svg .dot { fill: #fff; stroke: none; }