/* 시담 — 여백과 활자 중심. 외부 폰트 없이 시스템 명조 계열을 쓴다. */
@font-face {
  font-family: "SidamSerif"; src: url("/static/fonts/NanumMyeongjo-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* 고시조 원문의 옛한글(아래아·옛 자모)은 나눔명조에 없어 Noto Serif KR의 자모 영역만 따로 싣는다. */
@font-face {
  font-family: "SidamOldHangul"; src: url("/static/fonts/noto-serif-kr-yet-hangul-v1.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3131-318E, U+A960-A97F, U+D7B0-D7FF;
}
:root {
  --paper: #f6f3ec;
  --ink: #1d1c1a;
  --ink-2: #5c5850;
  --mute: #9a958a;
  --line: #dcd6ca;
  --seal: #a23b2a;
  --serif: "SidamSerif", "SidamOldHangul", "Nanum Myeongjo", "AppleMyungjo", "Noto Serif KR", "Noto Serif CJK KR", "Batang", "바탕", serif;
  --sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --latin: "Bellefair", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --header-h: 64px;
  color-scheme: light;
  --village-green: #426b57;
  --village-wash: #eaf0e9;
  --village-surface: color-mix(in srgb, #d9e5cf 25%, var(--paper));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #171614; --ink: #ece7dc; --ink-2: #b4aea1; --mute: #a49d90; --line: #35322d; --seal: #d46a57; color-scheme: dark; --village-green: #a1c4aa; --village-wash: #23312a; --village-surface: #202720; }
}
:root[data-theme="dark"] { --paper: #171614; --ink: #ece7dc; --ink-2: #b4aea1; --mute: #a49d90; --line: #35322d; --seal: #d46a57; color-scheme: dark; --village-green: #a1c4aa; --village-wash: #23312a; --village-surface: #202720; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }

/* ── 헤더 ── */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--header-h);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, 2.5vw, 36px);
  padding: 0 clamp(20px, 4vw, 48px); transition: color .6s;
}
body[data-tone="light"] .top, body[data-tone="light"] .chips, body[data-tone="light"] .side, body[data-tone="light"] .hint { color: #1d1c1a; }
body[data-tone="dark"] .top, body[data-tone="dark"] .chips, body[data-tone="dark"] .side, body[data-tone="dark"] .hint { color: #f1ece1; }
.logo { display: flex; align-items: baseline; gap: 10px; }
.top .logo { justify-self: start; }
.logo-mark { font-size: 1.15rem; letter-spacing: .44em; margin-right: -.44em; }
.logo-sub { font-family: var(--latin); font-size: max(.8rem, var(--mobile-text-min, 0px)); letter-spacing: .3em; opacity: .55; }
.lang-control { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 0 8px; border-bottom: 1px solid color-mix(in srgb, currentColor 50%, transparent); font-family: var(--sans); font-size: max(.78rem, var(--mobile-text-min, 0px)); line-height: 1.2; white-space: nowrap; }
.lang-control:hover, .lang-control:focus-within { border-color: currentColor; }
.lang-control:focus-within { outline: 1px solid currentColor; outline-offset: 4px; }
.lang-chevron { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: none; }
.lang-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: inherit; }
.lang-native option { color: #1d1c1a; background: #f6f3ec; }
.end-link { display: block; margin: 1.2rem auto 0; font-size: max(.85rem, var(--mobile-text-min, 0px)); letter-spacing: .1em; border-bottom: 1px solid currentColor; padding-bottom: 3px; opacity: .8; }
.nav { justify-self: center; font-family: var(--sans); display: flex; align-items: center; gap: clamp(18px, 2.1vw, 30px); font-size: max(.86rem, var(--mobile-text-min, 0px)); letter-spacing: .12em; white-space: nowrap; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; opacity: .68; transition: opacity .3s, border-color .3s; }
.nav a:hover, .nav a[aria-current] { opacity: 1; border-color: currentColor; }
.nav-channel-short { display: none; }

/* ── 장르 칩 ── */
.chips {
  position: fixed; z-index: 19; top: var(--header-h); left: 0; right: 0;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; justify-content: safe center;
  padding: 4px clamp(20px, 4vw, 48px) 10px; transition: color .6s;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  font-family: var(--sans); flex: none; font-size: max(.8rem, var(--mobile-text-min, 0px)); letter-spacing: .1em; padding: 7px 14px; border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 24%, transparent); border-radius: 999px; opacity: .76;
  transition: opacity .25s, background .25s, color .25s, border-color .25s;
}
.chip:hover { opacity: 1; }
.chip[aria-pressed="true"], .chip[aria-current="true"] { opacity: 1; border-color: currentColor; background: color-mix(in srgb, currentColor 6%, transparent); }
.source-chip { border-radius: 4px; font-size: max(.75rem, var(--mobile-text-min, 0px)); }
.chip-divider { height: 22px; margin: 5px 7px 0; border-left: 1px solid currentColor; opacity: .35; flex: none; }
.static-chips { position: static; justify-content: flex-start; flex-wrap: wrap; padding: 0; margin: 0 0 40px; overflow: visible; }
.author-chips { align-items: center; gap: 22px; }
.author-back { font-family: var(--sans); font-size: max(.76rem, var(--mobile-text-min, 0px)); opacity: .7; white-space: nowrap; }
.author-back:hover { opacity: 1; }
.author-heading { font-size: .9rem; letter-spacing: .13em; white-space: nowrap; }

/* ── 피드 ── */
.feed {
  height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
  overscroll-behavior-y: contain; outline: none;
}
.feed::-webkit-scrollbar { display: none; }
.poem {
  position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: calc(var(--header-h) + 72px) 28px calc(var(--header-h) + 72px); overflow: hidden;
  -webkit-user-select: none; user-select: none; touch-action: pan-y;
}
.poem-viewport { position: relative; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.poem-inner { position: relative; width: 100%; max-width: 30rem; text-align: center; }
.poem.long .poem-viewport { display: block; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to bottom, transparent 0 40px, #000 96px); mask-image: linear-gradient(to bottom, transparent 0 40px, #000 96px); }
.poem.long .poem-viewport::-webkit-scrollbar { display: none; }
.poem-scroll-hint { display: none; position: absolute; left: 50%; bottom: calc(var(--header-h) + 18px); transform: translateX(-50%); font: 22px/1 var(--sans); opacity: .5; pointer-events: none; animation: hint-bob 1.6s ease-in-out infinite; }
.poem.long:not(.scrolled) .poem-scroll-hint { display: block; }
@keyframes hint-bob { 50% { transform: translate(-50%, 5px); } }
.poem.long .poem-inner { position: relative; margin: 0 auto; padding: var(--long-start) 0 28dvh; }
.poem-meta { position: absolute; top: calc(var(--header-h) + 62px); left: 0; right: 0; display: flex; justify-content: center; gap: 12px; align-items: baseline; font-size: max(.78rem, var(--mobile-text-min, 0px)); letter-spacing: .24em; opacity: .82; }
.poem-meta .genre { font-family: var(--sans); letter-spacing: .12em; font-size: max(.72rem, var(--mobile-text-min, 0px)); padding-left: 12px; border-left: 1px solid currentColor; }
.poem-meta .seal { font-family: var(--serif); font-size: max(.68rem, var(--mobile-text-min, 0px)); letter-spacing: .2em; padding: 2px 6px 1px; border: 1px solid var(--seal); color: var(--seal); border-radius: 2px; }
.poem-meta .origin-tag { font-family: var(--sans); font-size: max(.67rem, var(--mobile-text-min, 0px)); letter-spacing: .04em; padding: 3px 6px; border: 1px solid currentColor; border-radius: 3px; opacity: .65; }
.poem-meta .origin-profile { opacity: .8; }
.poem-meta .origin-profile:hover { opacity: 1; }
.poem-title { margin: 0; font-size: .95rem; letter-spacing: .3em; }
.poem-body { letter-spacing: .035em; font-size: var(--fs, 1.2rem); line-height: var(--lh, 2.05); word-break: keep-all; overflow-wrap: anywhere; }
.poem-body .ln { display: block; min-height: calc(var(--lh, 2.05) * 1em); }
.poem-body .ln.gap { min-height: 1.1em; }
/* 지은이는 시 바로 아래에 붙되, 본문만 화면 중앙에 오도록 흐름 밖에 둔다 */
.poem-author { position: absolute; top: 100%; left: 0; right: 0; margin: 1.5rem 0 0; text-align: center; font-size: max(.85rem, var(--mobile-text-min, 0px)); letter-spacing: .2em; opacity: .72; }
.poem button.poem-author:hover { opacity: 1; }
.poem .ln, .poem .poem-meta, .poem .poem-author { opacity: 0; transform: translateY(6px); transition: opacity .65s ease, transform .65s ease; transition-delay: calc(var(--i, 0) * 85ms); }
.poem.active .ln { opacity: 1; transform: none; }
.poem.active .poem-meta { opacity: .82; transform: none; }
.poem.active .poem-author { opacity: .72; transform: none; transition-delay: calc(var(--i, 0) * 85ms + 100ms); }
.dwell { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: currentColor; opacity: .35; }
.poem.active .dwell { width: 100%; transition: width var(--read, 8s) linear; }

/* 오른쪽 액션 (쇼츠 스타일: 동그란 아이콘 + 아래 숫자) */
.actions { position: absolute; right: clamp(10px, 2.5vw, 36px); bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--sans); font-size: max(.64rem, var(--mobile-text-min, 0px)); }
.act-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, currentColor 27%, transparent); border-radius: 50%;
  background: color-mix(in srgb, currentColor 4%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, transform .2s; }
.act:hover .act-ico { background: color-mix(in srgb, currentColor 13%, transparent); border-color: color-mix(in srgb, currentColor 55%, transparent); }
.act:active .act-ico { transform: scale(.92); }
.act-text { opacity: .78; min-height: 1em; }
.act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: fill .25s, stroke .25s; }
.act svg circle { fill: currentColor; stroke: none; }
.act[data-role="like"][aria-pressed="true"] svg { fill: var(--seal); stroke: var(--seal); animation: pop .4s ease; }
.act[data-role="save"][aria-pressed="true"] svg { fill: var(--seal); stroke: var(--seal); }
@keyframes pop { 40% { transform: scale(1.3); } }
.burst { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; pointer-events: none; fill: var(--seal); animation: burst .8s ease-out forwards; }
@keyframes burst { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: .9; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3) translateY(-30px); } }

.side { position: fixed; z-index: 15; right: clamp(14px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; }
.ghost-btn { width: 36px; height: 36px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); border-radius: 50%; opacity: .6; transition: opacity .25s; }
.ghost-btn:hover { opacity: 1; }
@media (hover: hover) and (min-width: 900px) { .side { display: flex; } .actions { right: clamp(80px, 9vw, 130px); bottom: 7vh; } }

.act[data-role="sound"][aria-pressed="true"] .act-ico { background: color-mix(in srgb, currentColor 13%, transparent); }
.hint { position: fixed; z-index: 15; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); font-size: max(.75rem, var(--mobile-text-min, 0px)); letter-spacing: .25em; opacity: .68; transition: opacity .6s; pointer-events: none; }
.hint span { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
.hint.gone { opacity: 0; }
@keyframes bob { 50% { transform: translateY(5px); } }
.end { text-align: center; }
.end p { line-height: 2; opacity: .7; }
.end a { display: inline-block; margin-top: 1.4rem; border-bottom: 1px solid currentColor; padding-bottom: 3px; letter-spacing: .15em; }

/* Each poem keeps its own mood in both reading palettes. */
.poem { --poem-tone: light; --poem-browser: #f6f3ec; }
.bg-paper  { background: radial-gradient(ellipse at 50% 35%, #fffaf0, #f0eadf); color: #29251f; }
:is(.bg-dawn, .bg-paper[data-reading-mood="dawn"])   { --poem-browser: #f8e9dc; background: linear-gradient(180deg, #f8e9dc, #eed3da); color: #3a2a2a; }
:is(.bg-rose, .bg-paper[data-reading-mood="rose"])   { --poem-browser: #f6e6e6; background: radial-gradient(ellipse at 70% 30%, #faeeee, #ecd0d4); color: #3b2a2e; }
:is(.bg-night, .bg-paper[data-reading-mood="night"])  { --poem-browser: #e7e8f2; background: linear-gradient(180deg, #e7e8f2, #d4daeb); color: #2b3048; }
:is(.bg-dusk, .bg-paper[data-reading-mood="dusk"])   { --poem-browser: #f1e1e8; background: linear-gradient(180deg, #f1e1e8, #edcfbc); color: #443044; }
:is(.bg-sea, .bg-paper[data-reading-mood="sea"])    { --poem-browser: #e1eeed; background: linear-gradient(180deg, #e1eeed, #c9dfe0); color: #243f46; }
:is(.bg-forest, .bg-paper[data-reading-mood="forest"]) { --poem-browser: #e8ede2; background: radial-gradient(ellipse at 30% 20%, #eef2e6, #d4dfcc); color: #293b2d; }
:is(.bg-ink, .bg-paper[data-reading-mood="ink"])    { --poem-browser: #e9e6df; background: linear-gradient(180deg, #e9e6df, #d7d4cd); color: #292723; }
:root[data-theme="dark"] .poem { --poem-tone: dark; --seal: #e7a694; color: #eee8de; }
:root[data-theme="dark"] .bg-paper { --poem-browser: #191714; background: radial-gradient(ellipse at 50% 38%, #30291f 0%, #211d18 45%, #151412 100%); color: #eee4d2; }
:root[data-theme="dark"] :is(.bg-dawn, .bg-paper[data-reading-mood="dawn"]) { --poem-browser: #231b25; background: radial-gradient(ellipse at 50% 85%, #563835 0%, #34242d 44%, #1b1923 100%); color: #f3e1d6; }
:root[data-theme="dark"] :is(.bg-rose, .bg-paper[data-reading-mood="rose"]) { --poem-browser: #261b23; background: radial-gradient(ellipse at 75% 30%, #482b3a 0%, #2d1e29 48%, #19151c 100%); color: #f1dde5; }
:root[data-theme="dark"] :is(.bg-night, .bg-paper[data-reading-mood="night"]) { --poem-browser: #101526; background: radial-gradient(ellipse at 50% 30%, #263456 0%, #171e35 48%, #0e1220 100%); color: #e2e7f5; }
:root[data-theme="dark"] :is(.bg-dusk, .bg-paper[data-reading-mood="dusk"]) { --poem-browser: #231d32; background: linear-gradient(180deg, #1b192d 0%, #3e2a43 62%, #654338 100%); color: #f4e1db; }
:root[data-theme="dark"] :is(.bg-sea, .bg-paper[data-reading-mood="sea"]) { --poem-browser: #12252c; background: radial-gradient(ellipse at 50% 72%, #24505a 0%, #163039 48%, #101b23 100%); color: #dfeeed; }
:root[data-theme="dark"] :is(.bg-forest, .bg-paper[data-reading-mood="forest"]) { --poem-browser: #17251e; background: radial-gradient(ellipse at 30% 25%, #304735 0%, #1d3026 48%, #121d18 100%); color: #e3ebda; }
:root[data-theme="dark"] :is(.bg-ink, .bg-paper[data-reading-mood="ink"]) { --poem-browser: #121212; background: radial-gradient(ellipse at 50% 40%, #262626, #101010 85%); color: #e7e3dd; }
/* 시담 이야기 배경: 얼어붙은 차가운 밤하늘에 시담 이야기 1화와 같은 눈(1~2.6px의 작은 눈송이, 무작위 밝기, 거의 수직으로 왼쪽에 쏠리며 천천히 낙하)이 내린다.
   붉은 요소는 없다. 시담이 직접 쓴 시 전용이며 두 읽기 팔레트에서 같다.  */
.bg-sidam, :root[data-theme="dark"] .bg-sidam { --poem-tone: dark; --poem-browser: #0d1117; color: #e7eaf0; isolation: isolate;
  background: repeating-linear-gradient(115deg, rgba(200,214,235,.055) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #151b25 0%, #0f141b 60%, #090c11 100%); }
/* 눈송이는 shared/sidam-snow.ts가 넣는다(시담 이야기 1화와 같은 무작위 방식). 보이는 동안(.sidam-live)만 움직이고 움직임 줄이기에서는 숨긴다. */
@keyframes sidam-poem-flake { from { translate: 0 -12px; } to { translate: var(--dx) calc(var(--fall, 720px) + 12px); } }
.bg-sidam > .sidam-snow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-sidam > .sidam-snow i { position: absolute; left: var(--x); top: 0; width: var(--s); height: var(--s); border-radius: 50%; background: #ffeaea; opacity: var(--o); animation: sidam-poem-flake var(--d) linear var(--l) infinite paused; }
.bg-sidam.sidam-live > .sidam-snow i { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .bg-sidam > .sidam-snow { display: none; } }

/* ── 온보딩 시트 ── */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(20,18,15,.5); backdrop-filter: blur(6px); }
.sheet { width: 100%; max-width: 30rem; background: var(--paper); color: var(--ink); padding: clamp(28px, 6vw, 48px); border: 1px solid var(--line); }
.sheet h2 { margin: 6px 0 10px; font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; }
.sheet-sub { margin: 0 0 28px; color: var(--ink-2); font-size: .9rem; line-height: 1.8; }
.sheet-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-grid .chip { color: var(--ink); }
.chip-grid .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── 일반 페이지 (쓰기·인기) ── */
.page { max-width: 36rem; margin: 0 auto; padding: calc(var(--header-h) + 64px) 24px 120px; }
.eyebrow { margin: 0; font-family: var(--latin); font-size: max(.8rem, var(--mobile-text-min, 0px)); letter-spacing: .4em; color: var(--mute); }
.page h1 { margin: 14px 0 12px; font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.4rem); letter-spacing: .1em; }
.lead { margin: 0 0 56px; color: var(--ink-2); line-height: 1.9; }
.lead a { border-bottom: 1px solid currentColor; }
.field { display: block; margin: 0 0 36px; padding: 0; border: 0; position: relative; }
.field > span, .field > legend { display: block; padding: 0; margin-bottom: 10px; font-size: max(.8rem, var(--mobile-text-min, 0px)); letter-spacing: .2em; color: var(--ink-2); }
.field em { font-style: normal; color: var(--mute); letter-spacing: .05em; margin-left: 6px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 0; border-radius: 0; outline: none; transition: border-color .3s; resize: vertical; line-height: 1.9;
}
.field textarea { font-size: 1.15rem; border: 1px solid var(--line); padding: 16px; }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field ::placeholder { color: var(--mute); }
.count { position: absolute; right: 0; bottom: -22px; font-family: var(--sans); font-size: max(.72rem, var(--mobile-text-min, 0px)); color: var(--mute); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--ink); border-radius: 50%; }
.preview-label { font-size: max(.8rem, var(--mobile-text-min, 0px)); letter-spacing: .2em; color: var(--ink-2); margin: 0 0 10px; }
.preview { position: relative; min-height: 300px; display: grid; place-items: center; padding: 40px 24px; margin-bottom: 36px; transition: background .5s, color .5s; }
.preview .poem-body { font-size: 1.1rem; }
.preview .poem-author { position: static; margin-top: 1.5rem; }
.preview .ln, .preview .poem-author { opacity: 1; transform: none; }
.error { min-height: 1.4em; margin: 0 0 16px; color: var(--seal); font-size: .9rem; }
.line-btn { padding: 12px 26px; border: 1px solid var(--ink); font-size: .9rem; letter-spacing: .2em; color: var(--ink); transition: background .25s, color .25s, opacity .25s; }
.line-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.line-btn.solid { background: var(--ink); color: var(--paper); }
.line-btn.solid:hover:not(:disabled) { opacity: .85; }
.line-btn:disabled { opacity: .35; cursor: not-allowed; }
.wide { width: 100%; padding: 16px; }
.member-write-note { margin: -10px 0 34px; color: var(--ink-2); font-family: var(--sans); font-size: max(.82rem, var(--mobile-text-min, 0px)); line-height: 1.7; }
.report-dialog { width: min(440px, calc(100% - 32px)); padding: 32px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: 0 18px 60px #0004; }
.report-dialog::backdrop { background: #091b22a8; }
.report-dialog h2 { margin: 8px 0 12px; font-size: 1.5rem; font-weight: 400; }
.report-dialog label { display: block; padding: 10px 0; font-family: var(--sans); font-size: .88rem; }
.report-dialog input { accent-color: var(--seal); margin-right: 8px; }
.draft-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; color: var(--ink-2); font-family: var(--sans); font-size: max(.78rem, var(--mobile-text-min, 0px)); }
.draft-row > div { display: flex; align-items: center; gap: 16px; }
.draft-row .line-btn { padding: 9px 15px; font-family: var(--sans); font-size: max(.78rem, var(--mobile-text-min, 0px)); letter-spacing: 0; }
.draft-clear { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .draft-row { align-items: flex-start; flex-direction: column; } }

/* ── 회원 · 채널 ── */
.member-page { max-width: 680px; }
.login-page { text-align: center; padding-top: calc(var(--header-h) + 100px); }
.login-page .lead { max-width: 30rem; margin: 0 auto 42px; }
.google-login { display: inline-flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: .9rem; letter-spacing: .02em; }
.google-mark { display: grid; place-items: center; width: 24px; height: 24px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 700; }
.login-footnote, .member-setup { margin: 30px auto 0; max-width: 25rem; font-family: var(--sans); color: var(--mute); font-size: max(.8rem, var(--mobile-text-min, 0px)); line-height: 1.8; }
/* Channel: identity, actions, belongings, then the reading list. */
.channel-page { max-width: 820px; padding-top: calc(var(--header-h) + 28px); }
.channel-hero { padding-bottom: 18px; }
.channel-identity { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 24px; }
.channel-avatar { display: grid; place-items: center; width: 112px; height: 112px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--village-surface); color: var(--village-green); font: 2.2rem var(--serif); cursor: pointer; }
.channel-avatar img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.channel-avatar img[data-profile-photo] { padding: 0; object-fit: cover; }
.channel-info { min-width: 0; }
.channel-label { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; color: var(--ink-2); font: 11px/1.6 var(--sans); }
.channel-label span { padding: 2px 8px; border-radius: 20px; color: var(--village-green); background: var(--village-wash); }
.channel-page h1 { margin: 7px 0 9px; font-size: clamp(24px,4vw,32px); letter-spacing: .02em; overflow-wrap: anywhere; }
.channel-summary { display: block; width: 100%; padding: 0; text-align: left; font-family: var(--sans); cursor: pointer; }
.channel-bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.channel-intro-link { display: inline-block; margin-top: 7px; color: var(--village-green); font-size: 11px; }
.channel-summary:hover .channel-intro-link { text-decoration: underline; text-underline-offset: 3px; }
.channel-stats { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 21px 0 18px; color: var(--ink-2); font: 12px/1.5 var(--sans); }
.channel-stats b { margin-right: 4px; color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.channel-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.channel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-actions .line-btn, .channel-settings summary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border-radius: 10px; font: 12px/1.5 var(--sans); letter-spacing: 0; }
.channel-actions .solid { background: var(--village-green); border-color: var(--village-green); color: var(--paper); }
.channel-settings { position: relative; flex: none; font-family: var(--sans); }
.channel-settings summary { gap: 12px; border: 1px solid var(--line); list-style: none; cursor: pointer; }
.channel-settings summary::-webkit-details-marker, .channel-poem-menu summary::-webkit-details-marker { display: none; }
.channel-settings-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: 240px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 36px #0002; }
.channel-settings-panel p { margin: 8px 10px 4px; color: var(--mute); font-size: 10px; }
.channel-settings-panel a, .channel-settings-panel button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 10px; border-radius: 7px; text-align: left; font: 12px/1.5 var(--sans); }
.channel-settings-panel a:hover, .channel-settings-panel button:hover { background: var(--village-wash); }
.channel-belongings { display: flex; align-items: center; gap: 15px; margin-top: 16px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--village-surface); font: 11px/1.5 var(--sans); }
.channel-belongings-label { flex: none; color: var(--mute); }
.channel-scroll { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; min-width: 0; padding: 3px 0; color: var(--village-green); text-align: left; font: 12px/1.5 var(--sans); }
button.channel-scroll { cursor: pointer; }
.channel-scroll-state { font-size: 11px; white-space: nowrap; }
.channel-scroll.is-unowned { color: var(--ink-2); }
.channel-scroll.sparkling .channel-scroll-state { color: var(--seal); }
.channel-tabs { display: flex; gap: 28px; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.channel-tabs button { flex: none; min-height: 48px; padding: 14px 0 12px; border-bottom: 2px solid transparent; color: var(--ink-2); font: 13px/1.5 var(--sans); cursor: pointer; }
.channel-tabs button[aria-selected="true"] { border-color: var(--village-green); color: var(--village-green); font-weight: 600; }
.channel-tabs #unreadCount { display: inline-block; min-width: 17px; margin-left: 3px; padding: 0 5px; border-radius: 10px; background: var(--village-wash); color: var(--village-green); font-size: 10px; text-align: center; }
.channel-list, .channel-tabs + .channel-list { padding-top: 22px; }
.channel-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.channel-list-head h2 { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: .03em; }
.channel-list-head span { color: var(--mute); font: 12px var(--sans); }
.channel-card { padding: 20px 0; border-top: 1px solid var(--line); }
.channel-card.is-hidden { opacity: .65; }
.channel-review { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.channel-review.is-held { color: #a4482f; }
:root[data-theme="dark"] .channel-review.is-held { color: #eba08a; }
.channel-card-link { display: block; min-width: 0; }
.channel-card-genre { color: var(--village-green); font: 11px var(--sans); }
.channel-card h3 { margin: 9px 0 8px; font-size: 18px; font-weight: 400; overflow-wrap: anywhere; }
.channel-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.channel-card p { overflow: hidden; margin: 0; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; line-height: 1.7; }
.channel-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 13px; color: var(--mute); font: 11px/1.5 var(--sans); }
.channel-poem-menu { flex: none; text-align: right; }
.channel-poem-menu summary { min-height: 30px; padding: 5px 0 5px 10px; list-style: none; color: var(--ink-2); cursor: pointer; }
.channel-card-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding-top: 7px; }
.channel-card-controls button, .channel-card-controls a { padding: 5px 0; border-bottom: 1px solid currentColor; }
.channel-card-controls .channel-delete { color: var(--seal); }
.channel-empty { margin: 0; padding: 26px 0; color: var(--ink-2); font: 13px/1.8 var(--sans); }
.channel-more { display: block; margin: 22px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font: 13px var(--sans); }
.channel-page .list-chips { margin-bottom: 16px; }
.channel-page .list-delete { font: 11px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.channel-profile-dialog { width: min(620px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 90px #0004; }
.channel-profile-dialog::backdrop { background: #15221bcc; backdrop-filter: blur(4px); }
.channel-dialog-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.channel-dialog-header h2 { margin: 0; font: 20px/1.5 var(--serif); overflow-wrap: anywhere; }
.channel-dialog-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font: 13px var(--sans); }
.channel-profile-body { padding: 22px 28px 28px; }
.channel-profile-portrait { display: grid; place-items: center; height: 210px; margin-bottom: 24px; border-radius: 16px; background: var(--village-surface); color: var(--village-green); font: 60px var(--serif); }
.channel-profile-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.virtual-persona { font-family: var(--sans); }
.virtual-persona .eyebrow { margin: 0 0 8px; color: var(--village-green); font-size: 11px; }
.virtual-persona h2 { margin: 0 0 12px; font: 20px/1.65 var(--serif); }
.virtual-persona p:not(.eyebrow), .channel-member-intro > p:last-child { margin: 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.9 var(--sans); }
.virtual-persona > span { display: block; margin-top: 22px; color: var(--mute); font-size: 11px; }
.channel-profile-dialog .animal-story { border-top: 1px solid var(--line); padding-top: 4px; }
.channel-edit-dialog { width: min(460px,calc(100vw - 32px)); }
.profile-form { margin: 0; padding: 24px; }
.profile-form .field { margin-bottom: 20px; }
.profile-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.profile-photo-row label { position: relative; cursor: pointer; }
.profile-photo-row label:focus-within { outline: 2px solid var(--village-green); outline-offset: 2px; }
.profile-photo-row label.is-disabled { opacity: .6; cursor: progress; }
.profile-photo small { display: block; margin-top: 8px; color: var(--muted, #6b6b6b); line-height: 1.5; }
.channel-edit-actions { display: flex; justify-content: flex-end; gap: 10px; }
.channel-member-intro h3 { margin: 8px 0 12px; font: 22px var(--serif); }
.channel-page :is(button,a,summary):focus-visible, .channel-profile-dialog :is(button,input,textarea):focus-visible { outline: 2px solid var(--village-green); outline-offset: 4px; }
@media(max-width:550px) {
  .channel-page { padding: calc(var(--header-h) + 20px) 18px 110px; }
  .channel-identity { grid-template-columns: 88px minmax(0,1fr); gap: 16px; }
  .channel-avatar { width: 88px; height: 96px; border-radius: 18px; }
  .channel-page h1 { font-size: 25px; }
  .channel-label { font-size: 10px; gap: 6px; }
  .channel-bio { font-size: 12px; }
  .channel-stats { gap: 8px 16px; margin: 18px 0 16px; font-size: 11px; }
  .channel-stats b { font-size: 13px; }
  .channel-actions { gap: 6px; }
  .channel-actions .line-btn, .channel-settings summary { padding-inline: 11px; font-size: 11px; }
  .channel-tabs { gap: 23px; }
  .channel-tabs button { font-size: 12px; }
  .channel-belongings { padding: 10px 12px; gap: 12px; }
  .channel-card-foot { flex-wrap: wrap; }
  .channel-profile-body { padding: 20px; }
  .channel-dialog-header { padding: 14px 20px; }
  .channel-dialog-header h2 { font-size: 18px; }
}

.rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ranking-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; margin: -20px 0 32px; border: 1px solid var(--line); font-family: var(--sans); font-size: max(.86rem, var(--mobile-text-min, 0px)); }
.ranking-tabs a { padding: 12px 8px; text-align: center; color: var(--ink-2); }
.ranking-tabs a[aria-current] { background: var(--ink); color: var(--paper); }
.ranking-tabs a:hover:not([aria-current]) { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.ranking-periods { display: flex; align-items: baseline; gap: clamp(20px, 4vw, 38px); border-bottom: 1px solid var(--line); margin: -15px 0 24px; font-family: var(--sans); }
.ranking-tabs + .ranking-periods { margin-top: 0; }
.ranking-periods a { padding: 12px 1px 15px; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.ranking-periods a[aria-current] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.ranking-sources { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ranking-sources a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: max(.8rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.ranking-sources a[aria-current] { border-color: var(--ink); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.best .static-chips { margin-bottom: 35px; }
.rank li { display: flex; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.rank-main { display: flex; flex-direction: column; gap: 6px; }
.rank-main:hover .rank-title, .rank-author:hover { text-decoration: underline; text-underline-offset: 4px; }
.rank-no { font-family: var(--latin); font-size: 1.6rem; color: var(--mute); width: 2.4rem; flex: none; line-height: 1.2; }
.rank-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rank-title { letter-spacing: .15em; }
.rank-line { color: var(--ink-2); line-height: 1.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-meta { font-family: var(--sans); font-size: max(.75rem, var(--mobile-text-min, 0px)); color: var(--mute); letter-spacing: .05em; }
.rank-author { color: var(--ink-2); }
.rank-signals { display: flex; gap: 7px; align-items: center; font-family: var(--sans); font-size: max(.75rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.rank-signals b { color: var(--ink); font-weight: 600; }
.author-rank li { align-items: center; gap: 18px; }
.author-rank .rank-body { flex: 1; gap: 8px; }
.rank-avatar { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: color-mix(in srgb, var(--seal) 12%, var(--paper)); color: var(--seal); font-size: 1.2rem; }
.rank-avatar img { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.rank-author-main { display: inline-flex; align-items: baseline; gap: 10px; align-self: flex-start; }
.rank-author-main:hover .rank-title { text-decoration: underline; text-underline-offset: 4px; }
.rank-channel-arrow { font-family: var(--sans); color: var(--mute); font-size: max(.85rem, var(--mobile-text-min, 0px)); }
.author-rank .rank-line { font-size: max(.87rem, var(--mobile-text-min, 0px)); }
.author-rank .rank-no { width: 2rem; }
.empty { padding: 40px 0; color: var(--mute); }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 72px; transform: translate(-50%, 12px); padding: 12px 22px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: max(.85rem, var(--mobile-text-min, 0px)); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: calc(100vw - 40px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .top { column-gap: 12px; padding: 0 14px; }
  .chips:not(.static-chips) { justify-content: flex-start; padding-left: 18px; padding-right: 28px; }
  .nav { gap: 11px; font-size: max(.78rem, var(--mobile-text-min, 0px)); letter-spacing: .03em; }
	.nav-channel-full { display: none; }
	.nav-channel-short { display: inline; }
  .lang-control { font-size: max(.72rem, var(--mobile-text-min, 0px)); gap: 6px; }
  .logo-mark { letter-spacing: .3em; margin-right: -.3em; }
  .logo-sub { letter-spacing: .15em; font-size: max(.7rem, var(--mobile-text-min, 0px)); }
  .hint { display: none; }
  .poem { padding: calc(var(--header-h) + 52px) 56px calc(var(--header-h) + 52px); }
  .poem-inner { max-width: 100%; }
  /* 좁은 화면에서도 제목과 장르를 한 줄의 중심에 둔다 */
  .poem-meta { top: calc(var(--header-h) + 54px); left: 20px; right: 20px; max-width: none; margin: 0; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: max(.7rem, var(--mobile-text-min, 0px)); letter-spacing: .16em; text-align: center; }
  .poem-meta .genre { font-size: max(.66rem, var(--mobile-text-min, 0px)); padding-left: 8px; }
  .actions { right: 10px; bottom: calc(18px + env(safe-area-inset-bottom)); gap: 10px; }
}
@media (max-width: 370px) {
  .logo-sub { display: none; }
  .top { column-gap: 8px; }
  .nav { gap: 8px; }
  .poem { padding-inline: 48px; }
  .author-rank li { gap: 12px; }
  .rank-avatar { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .poem .ln, .poem .poem-meta, .poem .poem-author { opacity: 1; transform: none; }
  .poem.long .poem-viewport { -webkit-mask-image: none; mask-image: none; }
  .poem.long .poem-author { position: static; display: block; margin-top: 1.5rem; }
}

/* ── 댓글: 화면 위에 뜨는 플로팅 카드. 열어 둔 채로 시를 넘기면 그 시의 댓글로 바뀐다 ── */
.cm { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 44vh; height: 44dvh; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .28); animation: cm-up .25s ease-out; }
.cm[hidden] { display: none; }
@keyframes cm-up { from { transform: translateY(24px); opacity: 0; } }
/* 열려 있는 동안 시와 버튼이 카드 위로 올라가 가려지지 않게 한다 */
body.float-open .poem { padding-bottom: calc(44dvh + 28px); transition: padding .25s; }
body.float-open .actions { bottom: calc(44dvh + 20px + env(safe-area-inset-bottom)); }
body.float-open .hint { display: none; }
/* 카드가 열린 동안은 버튼 줄이 위 메뉴와 겹치지 않게 작게 줄인다 (좋아요·댓글 숫자만 남김) */
body.float-open .actions { gap: 6px; }
body.float-open .act { gap: 1px; }
body.float-open .act-ico { width: 36px; height: 36px; }
body.float-open .act svg { width: 18px; height: 18px; }
body.float-open .act-text { display: none; }
body.float-open .act[data-role="like"] .act-text, body.float-open .act[data-role="comment"] .act-text { display: block; }
.cm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.cm-head h3 { margin: 0; margin-right: auto; font-size: 1rem; font-weight: 600; }
.cm-count { color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.cm-sorts { display: flex; gap: 6px; }
.cm-sort { font-size: max(.78rem, var(--mobile-text-min, 0px)); padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.cm-sort[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cm-close { width: 32px; height: 32px; border-radius: 50%; font-size: .95rem; color: var(--ink-2); }
.cm-close:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.cm-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 12px; }
.cm-list, .cm-replies { list-style: none; margin: 0; padding: 0; }
.cm-item { padding: 14px 0 4px; }
.cm-reply { padding: 10px 0 2px; }
.cm-replies { margin: 6px 0 4px 14px; padding-left: 12px; border-left: 1px solid var(--line); }
.cm-meta { display: flex; align-items: baseline; gap: 8px; font-size: max(.78rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.cm-author { font-weight: 600; color: var(--ink); }
.cm-badge { font-size: max(.66rem, var(--mobile-text-min, 0px)); padding: 1px 7px; border-radius: 999px; background: var(--seal); color: #fff; }
.cm-body { margin: 5px 0 6px; font-size: .92rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: max(.76rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.cm-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; font-size: max(.76rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.cm-act:hover { color: var(--ink); }
.cm-del:hover { color: var(--seal); }
.cm-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; display: block; }
.cm-like[aria-pressed="true"] { color: var(--seal); }
.cm-like[aria-pressed="true"] svg { fill: var(--seal); stroke: var(--seal); }
.cm-empty { padding: 36px 0; text-align: center; color: var(--mute); font-size: .88rem; }
.cm-more { display: block; margin: 8px auto 0; padding: 8px 16px; font-size: max(.8rem, var(--mobile-text-min, 0px)); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; }
.cm-formhost { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.cm-form { display: flex; gap: 8px; align-items: flex-end; }
.cm-input { flex: 1; resize: none; font: inherit; font-size: .92rem; line-height: 1.5; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); border: 0; border-radius: 18px; padding: 9px 14px; outline: none; max-height: 110px; }
.cm-send { flex: none; padding: 9px 14px; font-size: max(.85rem, var(--mobile-text-min, 0px)); font-weight: 600; color: var(--seal); }
.cm-send:disabled { opacity: .4; }
.cm-chip { display: inline-block; margin-bottom: 8px; padding: 3px 10px; font-size: max(.74rem, var(--mobile-text-min, 0px)); border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
.cm-login { display: block; text-align: center; padding: 10px; font-size: .88rem; color: var(--seal); border: 1px solid var(--line); border-radius: 999px; }
@media (min-width: 900px) {
  .cm { left: auto; right: 24px; top: calc(var(--header-h) + 54px); bottom: 24px; height: auto; width: 380px; max-width: 380px; margin: 0; animation: cm-in .25s ease-out; }
  @keyframes cm-in { from { transform: translateX(24px); opacity: 0; } }
  body.float-open .poem { padding-bottom: calc(var(--header-h) + 72px); padding-right: 440px; }
  body.float-open .actions { bottom: 7vh; right: 424px; --act-r:424px; }
  body.float-open .side { right: 488px; }
  body.float-open .actions { gap: 12px; }
  body.float-open .act { gap: 3px; }
  body.float-open .act-ico { width: 40px; height: 40px; }
  body.float-open .act svg { width: 20px; height: 20px; }
  body.float-open .act-text { display: block; }
}

/* 글쓰기: 고른 소리의 곡·연주자·저작권 정보 */
.sound-info { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-family: var(--sans); font-size: max(.82rem, var(--mobile-text-min, 0px)); line-height: 1.6; color: var(--ink-2); }
.sound-info-head { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.sound-kind { font-size: max(.68rem, var(--mobile-text-min, 0px)); padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.sound-info-desc, .sound-info-meta { margin: 4px 0 0; }
.sound-info-meta { color: var(--mute); font-size: max(.78rem, var(--mobile-text-min, 0px)); }
.sound-info-link { display: inline-block; margin-top: 6px; font-size: max(.78rem, var(--mobile-text-min, 0px)); color: var(--seal); border-bottom: 1px solid currentColor; }

/* 원작자 표기: 원작 줄 + 올린이 줄 */
.poem-author[data-credited] { white-space: pre-line; line-height: 1.8; }
.preview .poem-author { white-space: pre-line; line-height: 1.8; }
.credit-box { border: 0; padding: 0; margin: 0 0 28px; }
.credit-toggle, .credit-rights { display: flex; align-items: flex-start; gap: 10px; font-family: var(--sans); font-size: .9rem; line-height: 1.5; cursor: pointer; }
.credit-toggle input, .credit-rights input { margin-top: 3px; accent-color: var(--seal); flex: none; }
.credit-fields { margin-top: 16px; display: grid; gap: 4px; }
.credit-fields[hidden] { display: none; }
.credit-rights { font-size: max(.8rem, var(--mobile-text-min, 0px)); color: var(--ink-2); margin-top: 4px; }
.credit-box .credit-toggle input, .credit-box .credit-rights input { width: 18px; height: 18px; padding: 0; border: 0; flex: none; }
.credit-box .credit-toggle span, .credit-box .credit-rights span { display: inline; margin: 0; padding: 0; letter-spacing: 0; color: inherit; }
.credit-box .credit-toggle { color: var(--ink); }
.credit-years { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.credit-rule { margin: 0 0 6px; font-family: var(--sans); font-size: max(.8rem, var(--mobile-text-min, 0px)); color: var(--ink-2); line-height: 1.6; }
.credit-rule.bad { color: var(--seal); }

/* ── 저작권 카드 (댓글 카드와 같은 자리에 뜨는 작은 카드) ── */
.cr { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, .28); animation: cm-up .25s ease-out; }
.cr[hidden] { display: none; }
.cr-body { padding: 8px 18px 16px; overflow-y: auto; max-height: 38dvh; }
.cr-list { margin: 0; }
.cr-row { display: grid; grid-template-columns: 4.2rem 1fr; gap: 10px; padding: 7px 0; font-size: .88rem; line-height: 1.55; border-bottom: 1px solid var(--line); }
.cr-row dt { color: var(--ink-2); }
.cr-row dd { margin: 0; overflow-wrap: anywhere; }
.cr-strong { color: var(--seal); font-weight: 600; }
.cr-note { margin: 12px 0 0; font-size: max(.76rem, var(--mobile-text-min, 0px)); line-height: 1.6; color: var(--mute); }
@media (min-width: 900px) {
  .cr { left: auto; right: 24px; top: auto; bottom: 24px; width: 380px; max-width: 380px; margin: 0; }
}

/* 유명한 시 하위 분류 칩 */
.sub-chip { font-size: max(.74rem, var(--mobile-text-min, 0px)); padding: 5px 11px; margin-left: -2px; border-style: dashed; }
.sub-chip[aria-pressed="true"] { border-style: solid; }
.textbook-tag { color: var(--seal); border-color: var(--seal); }
.credit-years select { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; outline: none; }
.credit-years select option { color: #1d1c1a; background: #f6f3ec; }

.channel-avatar.is-virtual > span { font-size: 3.4rem; line-height: 1; }
.animal-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-family: var(--sans); }
.animal-facts span { padding: 4px 10px; font-size: max(.74rem, var(--mobile-text-min, 0px)); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.animal-story { margin-top: 20px; text-align: left; }
.animal-story summary { color: var(--seal); font-size: max(.85rem, var(--mobile-text-min, 0px)); cursor: pointer; padding: 8px 0; }
.animal-story dl { margin: 10px 0 0; }
.animal-story dt { margin: 18px 0 5px; color: var(--ink); font-size: max(.8rem, var(--mobile-text-min, 0px)); font-family: var(--sans); }
.animal-story dd { margin: 0; color: var(--ink-2); font-size: max(.85rem, var(--mobile-text-min, 0px)); line-height: 1.9; }
.rank-avatar > span { font-size: 1.7rem; }

/* 시담 마을: 안부광장 공동 게시판 */
body[data-page="/village"] .top{background:var(--paper);border-bottom:1px solid var(--line)}
.village-page{--v-green:var(--village-green);--v-wash:var(--village-wash);max-width:1160px;margin:0 auto;padding:110px 28px 64px}.village-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}.village-heading h1{font-size:38px;font-weight:400;letter-spacing:-.025em;margin:8px 0 14px}.village-heading p{color:var(--ink-2);font-family:var(--sans);font-size:14px;line-height:1.8;margin:0}.village-kicker{font-family:var(--sans);font-size:max(11px, var(--mobile-text-min, 0px))!important;font-weight:600;color:var(--v-green)!important;letter-spacing:.07em}.village-world-link{font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px));color:var(--v-green);white-space:nowrap;padding-bottom:6px;border-bottom:1px solid var(--line)}
.village-today{display:grid;grid-template-columns:210px minmax(0,1fr);gap:30px;padding:26px 30px;border:1px solid var(--line);background:var(--v-wash);border-radius:16px;margin-bottom:38px}.village-clock{display:flex;flex-direction:column;gap:9px;border-right:1px solid color-mix(in srgb,var(--v-green) 20%,transparent);padding-right:26px}.village-clock strong{font-family:var(--sans);font-size:23px;font-weight:600;letter-spacing:-.035em}.village-clock p{font-size:max(13px, var(--mobile-text-min, 0px));margin:0;font-family:var(--sans)}.village-today small{font-family:var(--sans);font-size:max(10px, var(--mobile-text-min, 0px));color:var(--ink-2);line-height:1.8}.village-event h2{font-size:20px;font-weight:400;margin:7px 0 12px}.village-event p{font-size:max(13px, var(--mobile-text-min, 0px));line-height:1.9;max-width:620px;margin:0 0 8px;word-break:keep-all;overflow-wrap:anywhere}
.village-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}.village-board-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}.village-board-heading h2{font-size:27px;font-weight:400;margin:6px 0 0}.village-board-heading p{margin:0}.village-board-heading>span{font-family:var(--sans);font-size:max(10px, var(--mobile-text-min, 0px));color:var(--ink-2)}.village-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}.village-filters button{padding:7px 11px;border:1px solid var(--line);border-radius:20px;font-family:var(--sans);font-size:max(11px, var(--mobile-text-min, 0px))}.village-filters button[aria-pressed="true"]{background:var(--v-green);color:var(--paper);border-color:var(--v-green)}.village-posts{display:grid;gap:22px}.village-poem{position:relative;border:1px solid var(--line);border-radius:3px;background:color-mix(in srgb,var(--paper) 94%,white);padding:27px 30px 22px;box-shadow:0 4px 12px rgba(45,39,26,.025)}.village-poem:before{content:"";position:absolute;top:-7px;left:36px;width:34px;height:14px;transform:rotate(-3deg);background:color-mix(in srgb,var(--v-green) 20%,var(--paper));opacity:.8}.village-poem-header{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px))}.village-author{font-size:14px;font-weight:650}.village-ai-badge{font-size:max(9px, var(--mobile-text-min, 0px));border:1px solid var(--line);border-radius:20px;padding:2px 6px;color:var(--ink-2)}.village-poem-header time{margin-left:auto;font-size:max(10px, var(--mobile-text-min, 0px));color:var(--mute)}.village-poem-place{font-family:var(--sans);font-size:max(10px, var(--mobile-text-min, 0px));color:var(--ink-2);margin:10px 0 0}.village-poem h3{font-size:19px;font-weight:400;margin:29px 0 15px}.village-poem-body{font-size:19px;line-height:2.05;letter-spacing:.015em;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;margin:0 0 24px}.village-event-tag{font-size:max(10px, var(--mobile-text-min, 0px));color:var(--v-green);font-family:var(--sans);background:var(--v-wash);padding:8px 10px;border-radius:6px;margin:0 0 20px}.village-poem-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:var(--sans);font-size:max(11px, var(--mobile-text-min, 0px));padding-top:15px;border-top:1px solid var(--line)}.village-action[aria-pressed="true"]{color:var(--v-green);font-weight:650}.village-poem-actions>a{margin-left:auto;color:var(--mute);font-size:max(10px, var(--mobile-text-min, 0px))}.village-action{min-height:28px}.village-action:disabled{opacity:.4}.village-threads{font-family:var(--sans)}.village-thread{margin-top:18px}.village-comment{font-size:max(12px, var(--mobile-text-min, 0px));padding:9px 0}.village-comment-name{display:flex;align-items:center;gap:7px;font-weight:600}.village-comment-name small{font-size:max(9px, var(--mobile-text-min, 0px));color:var(--mute);font-weight:400}.village-comment p{color:var(--ink-2);line-height:1.8;margin:5px 0 0;overflow-wrap:anywhere}.village-comment.reply{border-left:2px solid var(--line);padding:7px 0 7px 15px;margin-left:12px}.village-friends{padding:23px 20px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--paper) 94%,white);font-family:var(--sans)}.village-friends>h2{font-size:18px;margin:8px 0 12px;letter-spacing:-.02em}.village-friends>.village-kicker{margin:0}.village-small{font-size:max(12px, var(--mobile-text-min, 0px));color:var(--ink-2);line-height:1.8}.village-resident{border-top:1px solid var(--line);padding:13px 0}.village-resident summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:max(12px, var(--mobile-text-min, 0px))}.village-resident summary::-webkit-details-marker{display:none}.village-resident summary small{margin-left:auto;font-size:max(10px, var(--mobile-text-min, 0px));color:var(--mute)}.village-dot{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}.village-dot.active{background:var(--v-green)}.village-resident-body{padding:13px 0 0 14px;font-size:max(11px, var(--mobile-text-min, 0px));line-height:1.8;color:var(--ink-2)}.village-resident-body>a{color:var(--v-green);text-decoration:underline}.village-resident-body p{margin:6px 0}.village-resident-body small{font-size:max(10px, var(--mobile-text-min, 0px))}.village-more{display:block;margin:28px auto 0}.village-empty{padding:35px;border:1px dashed var(--line);text-align:center}.village-empty h3{font-size:17px;font-weight:400}.village-empty p,.village-message{font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px));color:var(--ink-2);line-height:1.8}.village-footer{font-family:var(--sans);font-size:max(10px, var(--mobile-text-min, 0px));color:var(--mute);line-height:1.8;border-top:1px solid var(--line);padding-top:20px;margin-top:40px}

@media(max-width:850px){.village-layout{grid-template-columns:1fr}.village-friends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.village-friends>h2,.village-friends>.village-kicker,.village-friends>.village-small{grid-column:1/-1}.village-heading h1{font-size:32px}}
@media(max-width:550px){.village-page{padding:92px 18px 40px}.village-heading{display:block}.village-world-link{display:inline-block;margin-top:18px}.village-today{grid-template-columns:1fr;gap:20px;padding:22px}.village-clock{border-right:0;border-bottom:1px solid var(--line);padding:0 0 17px}.village-clock strong{font-size:22px}.village-poem{padding:23px 20px 18px}.village-poem-body{font-size:17px}.village-poem-header time{flex-basis:100%;margin-left:0}.village-poem-actions{gap:10px}.village-poem-actions>a{flex-basis:100%;margin:0}.village-board-heading{align-items:flex-start}.village-board-heading>span{max-width:95px;line-height:1.7}.village-friends{grid-template-columns:1fr}.village-heading h1{font-size:30px}.village-heading p{font-size:max(13px, var(--mobile-text-min, 0px))}}

.village-new-posts{display:block;width:100%;padding:12px 16px;margin:0 0 24px;background:var(--v-wash);border:1px solid var(--line);border-radius:8px;color:var(--v-green);font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px))}

.village-weather-source{font-family:var(--sans);font-size:max(10px, var(--mobile-text-min, 0px));color:var(--v-green);text-decoration:underline}.village-weather-details{display:block;margin-top:10px}

/* Original forest resident portraits. */
.village-resident-portrait { flex: none; width: 54px; height: 64px; object-fit: contain; }
.village-section-nav{display:flex;gap:24px;flex-wrap:wrap;font:max(12px, var(--mobile-text-min, 0px)) var(--sans);padding:0 0 20px;border-bottom:1px solid var(--line);margin-bottom:28px;color:var(--v-green)}
.village-page section[id],.village-resident{scroll-margin-top:100px}
.village-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;margin-bottom:64px}
.village-landscape{margin:0;overflow:hidden;border-radius:24px;background:#edf0db}
.village-landscape img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.village-landscape figcaption{font:max(11px, var(--mobile-text-min, 0px)) var(--sans);text-align:center;color:#63735c;padding:14px}
.village-intro-copy h2{font-size:30px;font-weight:400;line-height:1.5;margin:10px 0 20px;letter-spacing:-.025em}
.village-intro-copy>p:not(.village-kicker){font:max(13px, var(--mobile-text-min, 0px))/2 var(--sans);color:var(--ink-2);word-break:keep-all}
.village-intro-link{display:inline-block;margin-top:12px;font:max(12px, var(--mobile-text-min, 0px)) var(--sans);color:var(--v-green);border-bottom:1px solid var(--line);padding-bottom:7px}
.village-explore{margin-bottom:52px}
.village-section-heading{display:flex;gap:25px;justify-content:space-between;align-items:end;margin-bottom:24px}
.village-section-heading h2{font-size:27px;font-weight:400;margin:8px 0 0}
.village-section-heading>p{font:max(12px, var(--mobile-text-min, 0px))/1.8 var(--sans);color:var(--ink-2);max-width:300px;word-break:keep-all}
.village-map-tabs{display:flex;gap:8px;margin-bottom:14px}
.village-map-tabs button{padding:10px 20px;border:1px solid var(--line);border-radius:24px;font:max(13px, var(--mobile-text-min, 0px)) var(--sans)}
.village-map-tabs button[aria-pressed=true]{background:var(--v-green);color:var(--paper);border-color:var(--v-green)}
.village-map-description,.village-map-economy{font:max(12px, var(--mobile-text-min, 0px))/1.9 var(--sans);color:var(--ink-2);word-break:keep-all}
.village-map-layout{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,1fr);gap:24px;align-items:start;margin-top:22px}
.village-map-canvas{position:relative;border-radius:22px;overflow:hidden;background:#edf0db;border:6px solid #eee4cf;box-shadow:0 12px 32px #423e2512}
.village-map-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.village-map-stamp{position:absolute;left:18px;top:18px;padding:10px 16px;background:#fff9e9e8;border:1px solid #d1bea0;border-radius:3px;box-shadow:0 2px 6px #45362216;font:max(13px, var(--mobile-text-min, 0px)) var(--serif);color:#64573d;letter-spacing:.03em;pointer-events:none}
.village-map-pin{position:absolute;transform:translate(-50%,10px);border:1px solid #bca787;border-radius:5px;padding:8px 12px;white-space:nowrap;background:#fffaf0ed;color:#564d3c;box-shadow:0 3px 8px #41392330;font:max(11px, var(--mobile-text-min, 0px)) var(--sans);min-height:34px;transition:background .15s,box-shadow .15s}
.village-map-pin:before{content:'';position:absolute;left:calc(50% - 3px);top:-7px;width:6px;height:6px;border-radius:50%;background:#fffaf0;box-shadow:0 0 0 2px #9e8b69}
.village-map-pin:hover{background:#fffaf0;box-shadow:0 4px 12px #41392340}
.village-map-pin[aria-pressed=true]{background:#426b57;color:#fffaf0;border-color:#426b57}
.village-place-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.village-place-index button{display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:10px;font:max(12px, var(--mobile-text-min, 0px)) var(--sans)}
.village-place-index small{font-size:max(10px, var(--mobile-text-min, 0px));color:var(--mute)}
.village-place-index button[aria-pressed=true]{background:var(--v-wash);border-color:var(--v-green);color:var(--v-green)}
.village-place-detail{padding:24px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--v-wash) 45%,var(--paper));font:max(13px, var(--mobile-text-min, 0px))/1.9 var(--sans)}
.village-place-scene{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;margin-bottom:24px;background:#e7e5cd}
.village-place-scene img{position:absolute;left:50%;top:50%;width:280%;max-width:none;height:auto}
.village-place-detail h3{font:26px var(--serif);margin:12px 0 22px;font-weight:400}
.village-place-detail h4{font-size:max(12px, var(--mobile-text-min, 0px));margin:22px 0 8px;color:var(--v-green)}
.village-place-detail p{color:var(--ink-2);word-break:keep-all}
.village-place-purpose{border-top:1px solid var(--line);margin-top:24px}
.village-place-friends{display:flex;gap:14px;flex-wrap:wrap}
.village-place-friends a{display:flex;align-items:center;gap:7px;font-size:max(12px, var(--mobile-text-min, 0px));color:var(--v-green);text-decoration:underline}
.village-place-portrait{width:48px;height:55px;object-fit:contain}
.village-map-note{font-size:max(10px, var(--mobile-text-min, 0px));line-height:1.8;border-top:1px solid var(--line);padding-top:18px;margin-top:24px}
.village-friends-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;padding:28px;margin-bottom:48px}
.village-friends-gallery>h2,.village-friends-gallery>.village-kicker,.village-friends-gallery>.village-small{grid-column:1/-1}
.village-friends-gallery>h2{font-size:27px;font-weight:400}
.village-friends-gallery .village-resident{align-self:start}
.village-friends-gallery summary:after{content:'+';margin-left:3px;font-size:18px;color:var(--v-green)}
.village-friends-gallery details[open] summary:after{content:'−'}
.village-friends-gallery .village-resident-body{padding:0;font-size:max(12px, var(--mobile-text-min, 0px))}
.village-friend-picture{display:block;width:100%;height:210px;object-fit:contain;padding:16px}
.village-friend-role{color:var(--v-green);font-weight:600}
.village-friend-facts{margin:20px 0}
.village-friend-facts dt{font-size:max(10px, var(--mobile-text-min, 0px));color:var(--v-green);font-weight:600;margin-top:15px}
.village-friend-facts dd{margin:4px 0 0;word-break:keep-all}
.village-friend-story h3{font-size:max(12px, var(--mobile-text-min, 0px));font-weight:600;margin:24px 0 10px}
.village-friend-bonds{padding:0;list-style:none;font-size:max(11px, var(--mobile-text-min, 0px))}
.village-friend-bonds li{margin:7px 0}.village-friend-bonds a{color:var(--v-green);text-decoration:underline}
.village-place-link{font:max(11px, var(--mobile-text-min, 0px)) var(--sans);color:var(--v-green);padding:10px 0;margin-bottom:14px;border-bottom:1px solid var(--line)}
.village-friend-mood{font-size:max(11px, var(--mobile-text-min, 0px));color:var(--v-green)}
.village-page .village-layout{grid-template-columns:1fr;max-width:780px;margin:0 auto}
.village-board-page{max-width:860px;padding-top:96px}
.village-board-page .village-heading{margin-bottom:26px}
.village-board-page .village-heading h1{font-size:30px;margin-bottom:8px}
.village-board-page .village-board-heading{margin-bottom:16px}
.village-today-disclosure{max-width:780px;margin:34px auto 0;border-top:1px solid var(--line);font-family:var(--sans)}
.village-today-disclosure>summary{padding:16px 0;cursor:pointer;font-size:max(12px, var(--mobile-text-min, 0px));color:var(--v-green)}
.village-today-disclosure .village-today{margin:0}
.village-page button:focus-visible,.village-page a:focus-visible,.village-page summary:focus-visible{outline:2px solid var(--v-green);outline-offset:4px}
@media(max-width:850px){.village-intro{grid-template-columns:1fr;gap:24px}.village-intro-copy{max-width:640px}.village-intro-copy h2 br{display:none}.village-map-layout{grid-template-columns:1fr}.village-friends-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.village-place-detail{padding:24px}}
@media(max-width:550px){.village-section-nav{gap:16px;font-size:max(11px, var(--mobile-text-min, 0px))}.village-intro{margin-bottom:40px}.village-intro-copy h2{font-size:25px}.village-section-heading{display:block}.village-section-heading>p{max-width:none}.village-map-pin{font-size:max(10px, var(--mobile-text-min, 0px));padding:5px 7px;transform:translate(-50%,8px)}.village-map-canvas{border-radius:16px}.village-place-index{grid-template-columns:repeat(2,minmax(0,1fr))}.village-friends-gallery{grid-template-columns:1fr;padding:22px}.village-friend-picture{height:240px}.village-section-heading h2{font-size:24px}.village-landscape{border-radius:18px}}
.village-page-links{display:flex;flex-wrap:wrap;gap:9px;font:max(12px, var(--mobile-text-min, 0px)) var(--sans)}
.village-page-links a{padding:10px 14px;border:1px solid var(--line);border-radius:8px;color:var(--v-green)}
.village-page-links a:hover{background:var(--v-wash)}
.village-board-page{max-width:1160px}
.village-board-page .village-layout{max-width:none;grid-template-columns:minmax(0,1fr) 248px;gap:32px}
.village-neighbours{border:1px solid var(--line);border-radius:14px;padding:20px;background:color-mix(in srgb,var(--paper) 94%,white);font-family:var(--sans)}
.village-neighbours>.village-kicker{margin:0}.village-neighbours h2{font-size:17px;font-weight:500;margin:7px 0 15px}
.village-neighbour-list{display:grid;gap:4px}.village-neighbour{display:flex;gap:10px;align-items:center;border-radius:8px;padding:5px 2px}
.village-neighbour:hover{background:var(--v-wash)}.village-neighbour-art{width:40px;height:46px;object-fit:contain;flex:none}
.village-neighbour>span:not(.village-dot){display:flex;flex-direction:column;gap:4px}.village-neighbour b{font-size:max(12px, var(--mobile-text-min, 0px));font-weight:550}.village-neighbour small{font-size:max(10px, var(--mobile-text-min, 0px));color:var(--mute)}.village-neighbour .village-dot{margin-left:auto}
.village-neighbour-initial{width:40px;height:40px;border-radius:50%;background:var(--v-wash);align-items:center;justify-content:center;color:var(--v-green);font-size:18px}
.village-neighbour-more{display:block;padding-top:16px;margin-top:14px;border-top:1px solid var(--line);font-size:max(11px, var(--mobile-text-min, 0px));color:var(--v-green)}
.village-people-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:16px 0 26px;font-family:var(--sans)}
.village-people-toolbar .village-map-tabs{margin:0}.village-people-search{display:flex;flex-direction:column;gap:8px;font-size:max(11px, var(--mobile-text-min, 0px));color:var(--ink-2)}
.village-people-search input{width:270px;padding:11px 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font:max(12px, var(--mobile-text-min, 0px)) var(--sans)}
.village-people-page .village-friends-gallery{padding:0;border:0;background:none;gap:22px}
.village-people-page .village-resident{--resident-surface:color-mix(in srgb,var(--paper) 96%,var(--resident-color,var(--paper)));padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--resident-surface)}
.village-people-page .village-resident summary{display:flex;flex-direction:column;gap:0;text-align:center;padding:22px;align-items:stretch;background:linear-gradient(180deg,var(--v-wash),transparent 80%)}
.village-people-page .village-resident summary:after{display:none}.village-person-art{display:flex;align-items:center;justify-content:center;height:180px;margin-bottom:16px}
.village-people-page .village-resident-portrait{width:170px;height:180px}.village-person-initial{display:grid;place-items:center;width:120px;height:120px;border-radius:50%;background:var(--paper);color:var(--v-green);font:46px var(--serif);border:1px solid var(--line)}
.village-person-label{display:flex;flex-direction:column;align-items:center;gap:10px}.village-person-label>small{margin:0!important;font-size:max(10px, var(--mobile-text-min, 0px))!important;color:var(--v-green)!important}.village-person-label>b{font-size:22px;font-weight:500}
.village-person-role{font-size:max(12px, var(--mobile-text-min, 0px));line-height:1.7;color:var(--ink-2);min-height:40px;word-break:keep-all}.village-person-open{font-size:max(11px, var(--mobile-text-min, 0px));padding:9px 18px;border:1px solid var(--line);border-radius:24px;color:var(--v-green);background:var(--paper);margin-top:5px}
.village-people-page .village-resident[open]{border-color:var(--v-green)}.village-people-page .village-resident-body{padding:0 24px 24px}.village-people-page .village-friend-picture{display:none}.village-people-page #villagePeopleEmpty{grid-column:1/-1;padding:30px;text-align:center}
@media(max-width:850px){.village-board-page .village-layout{grid-template-columns:minmax(0,1fr) 210px;gap:22px}.village-neighbours{padding:15px}.village-people-toolbar{align-items:start;flex-direction:column}.village-people-search{width:100%}.village-people-search input{width:100%}}
@media(max-width:650px){.village-board-page .village-layout{grid-template-columns:1fr}.village-neighbour-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}.village-page-links{margin-top:16px}.village-people-page .village-friends-gallery{grid-template-columns:1fr}.village-person-art{height:160px}.village-people-page .village-resident-portrait{height:160px}.village-people-toolbar .village-map-tabs{flex-wrap:wrap}}
.village-person-card{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:22px;text-align:center;border:0;cursor:pointer;font-family:var(--sans);background:transparent;color:var(--ink)}
.village-person-card:hover .village-person-open{background:var(--v-green);color:var(--paper)}
.village-person-dialog{--resident-surface:color-mix(in srgb,var(--paper) 94%,var(--resident-color,var(--paper)));--v-green:var(--village-green);--v-wash:var(--village-wash);width:min(680px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 90px #0003;background:var(--resident-surface);color:var(--ink);font:max(13px, var(--mobile-text-min, 0px))/1.9 var(--sans);overscroll-behavior:contain}
.village-person-dialog::backdrop{background:#15221bcc;backdrop-filter:blur(4px)}
.village-person-dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--resident-surface)}
.village-person-dialog-header h2{margin:0;font:25px var(--serif);font-weight:400}.village-person-close{font:max(12px, var(--mobile-text-min, 0px)) var(--sans);padding:8px 13px;border:1px solid var(--line);border-radius:20px;cursor:pointer;flex:none}
.village-person-dialog-body{padding:22px 32px 32px}.village-person-dialog .village-friend-picture{height:230px;padding:0 16px 18px}.village-person-dialog p{word-break:keep-all;color:var(--ink-2)}
.village-person-dialog .village-friend-facts{display:grid;grid-template-columns:95px minmax(0,1fr);gap:14px 18px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.village-person-dialog .village-friend-facts dt{margin:0;font-size:max(11px, var(--mobile-text-min, 0px))}.village-person-dialog .village-friend-facts dd{margin:0;font-size:max(12px, var(--mobile-text-min, 0px));color:var(--ink-2)}
.village-person-now{padding:18px 22px;background:var(--v-wash);border-radius:12px;margin:20px 0}.village-person-now h3{font-size:max(13px, var(--mobile-text-min, 0px));margin:0 0 12px}.village-person-now p{font-size:max(12px, var(--mobile-text-min, 0px));margin:5px 0}.village-person-now small{font-size:max(10px, var(--mobile-text-min, 0px));color:var(--ink-2)}
.village-person-channel{display:block;text-align:center;padding:12px;border:1px solid var(--v-green);border-radius:10px;color:var(--v-green);font-size:max(12px, var(--mobile-text-min, 0px))}.village-person-dialog button:focus-visible,.village-person-dialog a:focus-visible{outline:2px solid var(--v-green);outline-offset:3px}

@media(max-width:550px){.village-person-dialog{max-height:calc(100dvh - 24px);border-radius:16px}.village-person-dialog-header{padding:15px 20px}.village-person-dialog-body{padding:18px 22px 24px}.village-person-dialog .village-friend-facts{grid-template-columns:1fr;gap:4px}.village-person-dialog .village-friend-facts dt:not(:first-child){margin-top:12px}.village-person-dialog .village-friend-picture{height:200px}}

.village-map-pin-home:not([aria-pressed=true]){padding:0;width:28px;height:28px;min-height:28px;font-size:19px;line-height:26px;border-radius:50%;background:#fffaf0e8}
.village-map-pin-home:before{display:none}
@media(max-width:550px){.village-map-pin-home:not([aria-pressed=true]){width:24px;height:24px;min-height:24px;line-height:22px;font-size:17px}}

/* Human visitors' daily prose journal. */
.diary-welcome{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:34px 40px;border:1px solid var(--line);border-radius:24px;background:var(--paper);margin:24px 0 42px}
.diary-welcome h2{font-family:var(--serif);font-size:30px;line-height:1.45;margin:8px 0 18px}.diary-welcome p{line-height:1.85}.diary-schedule{font-size:max(13px, var(--mobile-text-min, 0px));opacity:.7}.diary-authors{display:flex;gap:8px}.diary-authors figure{margin:0;text-align:center;font-size:14px}.diary-author-portrait{width:110px;height:135px;object-fit:contain}.diary-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.diary-toolbar h2{font-size:20px}.diary-sheet{max-width:760px;margin:24px auto 36px;padding:36px 48px;border:1px solid var(--line);border-radius:8px 24px 24px 8px;background:var(--paper);box-shadow:0 8px 30px #40302408}.diary-sheet header{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink-2);font-size:max(13px, var(--mobile-text-min, 0px))}.diary-byline{display:flex;align-items:center;gap:8px}.diary-portrait{width:36px;height:42px;object-fit:contain}.diary-sheet h3{font-size:26px;margin:24px 0;line-height:1.5}.diary-prose{white-space:pre-line;overflow-wrap:anywhere;font-size:16px;line-height:2.15;letter-spacing:.01em}.diary-poems-link{display:inline-block;margin-top:28px;font-size:max(13px, var(--mobile-text-min, 0px));color:var(--ink-2)}.diary-toolbar button[aria-pressed=true]{font-weight:bold}
@media(max-width:700px){.diary-welcome{flex-direction:column;align-items:flex-start;padding:24px;gap:16px}.diary-welcome h2{font-size:26px}.diary-authors{align-self:center}.diary-author-portrait{width:88px;height:110px}.diary-sheet{padding:24px 22px}.diary-sheet header{flex-wrap:wrap}.diary-sheet h3{font-size:22px}.diary-prose{font-size:15px}}
/* 일기장 카드: 주민의 옷 색을 배경·테두리에 아주 옅게 입힌다 */
.diary-sheet[data-author]{background:color-mix(in srgb,var(--tint) 11%,transparent);border:1px solid color-mix(in srgb,var(--tint) 55%,transparent)}
.village-board-page .village-poem[data-author],.village-poem[data-author]{background:color-mix(in srgb,var(--tint) 8%,var(--paper));border-color:color-mix(in srgb,var(--tint) 35%,var(--line))}
.diary-day{max-width:760px;margin:48px auto 0}.diary-day-title{display:flex;align-items:center;gap:16px;margin:0 0 4px;font-family:var(--sans);font-size:max(14px, var(--mobile-text-min, 0px));font-weight:650;color:var(--ink-2)}.diary-day-title::after{content:"";flex:1;height:1px;background:var(--line)}.diary-day .diary-sheet{margin:16px 0 0}
.diary-sheet header{justify-content:flex-start}
.village-comment[data-author],.wall-comment[data-author],.cm-item[data-author]{border-left:0!important;padding-left:18px!important}
.village-comment[data-author] .village-comment-name,.wall-comment[data-author] .wall-byline,.cm-item[data-author]>.cm-meta{position:relative}
.village-comment[data-author] .village-comment-name::before,.wall-comment[data-author] .wall-byline::before,.cm-item[data-author]>.cm-meta::before{content:"";position:absolute;left:-14px;top:50%;width:4px;height:42px;transform:translateY(-50%);border-radius:4px;background:color-mix(in srgb,var(--tint) 70%,transparent)}
.village-reply-to,.cm-reply-to,.wall-comment .wall-recipient{display:block;margin:0 0 4px;font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px));font-weight:650;color:var(--ink-2)}
.diary-sheet[data-author] .diary-poems-link{color:color-mix(in srgb,var(--tint) 55%,var(--ink-2))}
.diary-sheet[data-author="sidam"],.village-poem[data-author="sidam"],.village-comment[data-author="sidam"],.wall-post[data-author="sidam"],.wall-comment[data-author="sidam"],.cm-item[data-author="sidam"]{--tint:#287D78}
.diary-sheet[data-author="sodam"],.village-poem[data-author="sodam"],.village-comment[data-author="sodam"],.wall-post[data-author="sodam"],.wall-comment[data-author="sodam"],.cm-item[data-author="sodam"]{--tint:#DE8B38}
.diary-sheet[data-author="byeoldam"],.village-poem[data-author="byeoldam"],.village-comment[data-author="byeoldam"],.wall-post[data-author="byeoldam"],.wall-comment[data-author="byeoldam"],.cm-item[data-author="byeoldam"]{--tint:#568BB5}
.diary-sheet[data-author="bomdam"],.village-poem[data-author="bomdam"],.village-comment[data-author="bomdam"],.wall-post[data-author="bomdam"],.wall-comment[data-author="bomdam"],.cm-item[data-author="bomdam"]{--tint:#CB6F91}
.diary-sheet[data-author="bamdam"],.village-poem[data-author="bamdam"],.village-comment[data-author="bamdam"],.wall-post[data-author="bamdam"],.wall-comment[data-author="bamdam"],.cm-item[data-author="bamdam"]{--tint:#344A78}
.diary-sheet[data-author="supdam"],.village-poem[data-author="supdam"],.village-comment[data-author="supdam"],.wall-post[data-author="supdam"],.wall-comment[data-author="supdam"],.cm-item[data-author="supdam"]{--tint:#4D8060}
.diary-sheet[data-author="gyeoldam"],.village-poem[data-author="gyeoldam"],.village-comment[data-author="gyeoldam"],.wall-post[data-author="gyeoldam"],.wall-comment[data-author="gyeoldam"],.cm-item[data-author="gyeoldam"]{--tint:#8357B2}
.diary-sheet[data-author="ondam"],.village-poem[data-author="ondam"],.village-comment[data-author="ondam"],.wall-post[data-author="ondam"],.wall-comment[data-author="ondam"],.cm-item[data-author="ondam"]{--tint:#C7B78D}
.diary-sheet[data-author="daldam"],.village-poem[data-author="daldam"],.village-comment[data-author="daldam"],.wall-post[data-author="daldam"],.wall-comment[data-author="daldam"],.cm-item[data-author="daldam"]{--tint:#6E4D68}
.diary-sheet[data-author="bitdam"],.village-poem[data-author="bitdam"],.village-comment[data-author="bitdam"],.wall-post[data-author="bitdam"],.wall-comment[data-author="bitdam"],.cm-item[data-author="bitdam"]{--tint:#D8B52A}
.diary-sheet[data-author="seori"],.village-poem[data-author="seori"],.village-comment[data-author="seori"],.wall-post[data-author="seori"],.wall-comment[data-author="seori"],.cm-item[data-author="seori"]{--tint:#7F9A5A}
.diary-sheet[data-author="moa"],.village-poem[data-author="moa"],.village-comment[data-author="moa"],.wall-post[data-author="moa"],.wall-comment[data-author="moa"],.cm-item[data-author="moa"]{--tint:#E28A72}
.diary-sheet[data-author="yuna"],.village-poem[data-author="yuna"],.village-comment[data-author="yuna"],.wall-post[data-author="yuna"],.wall-comment[data-author="yuna"],.cm-item[data-author="yuna"]{--tint:#9D86C4}

/* Readable place symbols, including public facilities and shared homes. */
.village-map-pin.village-map-symbol{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px;border-radius:12px;min-width:36px;min-height:36px;width:36px;height:36px;border:1.5px solid #8b775b;background:#fffaf0f5;box-shadow:0 2px 8px #41392335;color:#57482e;z-index:1}
.village-map-pin.village-map-symbol:before{display:none}.village-place-icon{width:21px;height:21px;flex:none;pointer-events:none}.village-map-pin-label{display:none;pointer-events:none}.village-map-pin.village-map-symbol[aria-pressed=true],.village-map-pin.village-map-symbol:hover,.village-map-pin.village-map-symbol:focus-visible{width:auto;z-index:3}.village-map-symbol[aria-pressed=true] .village-map-pin-label,.village-map-symbol:hover .village-map-pin-label,.village-map-symbol:focus-visible .village-map-pin-label{display:inline}.village-map-pin.village-map-symbol[aria-pressed=true]{background:#426b57;color:#fffaf0;border-color:#426b57}.village-map-symbol:focus-visible{outline:3px solid #fffaf0;outline-offset:2px}
@media(max-width:550px){.village-map-pin.village-map-symbol{min-width:34px;min-height:34px;width:34px;height:34px;padding:6px;font-size:max(10px, var(--mobile-text-min, 0px))}.village-place-icon{width:19px;height:19px}.village-map-pin.village-map-symbol[aria-pressed=true],.village-map-pin.village-map-symbol:hover,.village-map-pin.village-map-symbol:focus-visible{width:auto}}

/* The village's public daybook shares the board's paper and portraits. */
.village-life{padding:28px 32px 30px;margin-bottom:42px;border:1px solid var(--line);border-radius:12px;background:var(--v-wash)}
.village-life-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.village-life-heading h2{font-size:28px;font-weight:400;margin:6px 0 10px}.village-life-heading p{margin:0;font-size:max(12px, var(--mobile-text-min, 0px));line-height:1.8;color:var(--ink-2)}.village-life-heading>a{font-family:var(--sans);font-size:max(11px, var(--mobile-text-min, 0px));white-space:nowrap;color:var(--v-green)}
.village-life-tools{display:flex;gap:12px;align-items:center;margin:22px 0 12px;font-family:var(--sans);font-size:max(11px, var(--mobile-text-min, 0px))}.village-life-tools select{font:inherit;color:var(--ink);background:var(--paper);padding:7px 24px 7px 10px;border:1px solid var(--line);border-radius:16px}.village-life-tools button{margin-left:auto;color:var(--v-green);padding:8px}
.village-life-day{font-family:var(--sans);font-size:max(11px, var(--mobile-text-min, 0px));font-weight:500;color:var(--ink-2);margin:25px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.village-life-entry{display:flex;gap:18px;position:relative;padding:13px 0}.village-life-entry:before{content:'';position:absolute;left:24px;top:62px;bottom:-12px;width:1px;background:var(--line)}.village-life-entry:last-child:before{display:none}.village-life-person{flex:none;align-self:flex-start;width:50px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--paper)}.village-life-art{width:44px;height:54px;object-fit:contain}.village-life-body{min-width:0;flex:1}.village-life-body header{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px))}.village-life-body header span{color:var(--ink-2);font-size:max(10px, var(--mobile-text-min, 0px))}.village-life-body time{margin-left:auto;font-size:max(10px, var(--mobile-text-min, 0px));color:var(--mute)}.village-life-body p{font-size:15px;line-height:1.9;margin:9px 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}.village-life-body>a{font-family:var(--sans);font-size:max(10px, var(--mobile-text-min, 0px));color:var(--v-green)}
@media(max-width:600px){.village-life{padding:22px 16px}.village-life-heading{align-items:flex-start}.village-life-heading>a{font-size:max(10px, var(--mobile-text-min, 0px));padding-top:8px}.village-life-tools{gap:8px}.village-life-tools label{font-size:max(10px, var(--mobile-text-min, 0px))}.village-life-entry{gap:12px}.village-life-body p{font-size:14px}.village-life-body header{gap:6px}}

/* Rounded square face portraits, cropped from the top of original artwork. */
.character-face{position:relative;display:block;overflow:hidden;flex:none;aspect-ratio:1;width:44px;height:44px;border-radius:22%;background:color-mix(in srgb,var(--v-wash) 80%,var(--paper));border:1px solid var(--line)}
.character-face>.character-face-image{position:absolute;display:block;left:var(--face-left,50%);top:0;transform:translateX(-50%);width:var(--face-zoom,220%);height:var(--face-zoom,220%);max-width:none;object-fit:contain;object-position:center top}
.diary-author-portrait.character-face{width:100px;height:100px;border-radius:24px;margin-bottom:12px}.diary-authors{gap:16px}.diary-authors figcaption{font-family:var(--sans);font-size:max(12px, var(--mobile-text-min, 0px))}
.diary-portrait.character-face{width:38px;height:38px;border-radius:11px}.village-neighbour-art.character-face{width:42px;height:42px;border-radius:12px}.village-place-portrait.character-face{width:48px;height:48px;border-radius:14px}
.village-life-person{width:50px;height:50px;background:none;border-radius:14px}.village-life-art.character-face{width:50px;height:50px;border-radius:14px}
.village-people-page .village-resident-portrait.character-face{width:148px;height:148px;border-radius:32px}.village-people-page .village-person-art{height:160px}
@media(max-width:700px){.diary-author-portrait.character-face{width:82px;height:82px;border-radius:20px}.diary-authors{gap:12px}}
.character-face>.character-face-cropped{left:0;top:0;transform:none;width:100%;height:100%;object-fit:cover;object-position:center}
/* A compact day summary keeps the greeting board close to the page heading. */
:is(.village-board-page, .wall-page) .village-today{grid-template-columns:170px 210px minmax(0,1fr);max-width:none;margin:0 0 28px;gap:22px;padding:18px 22px;border-radius:12px;background:color-mix(in srgb,var(--v-wash) 60%,var(--paper));align-items:start}
:is(.village-board-page, .wall-page) .village-clock{gap:5px;padding:0;border:0;min-width:0}
:is(.village-board-page, .wall-page) .village-clock strong{font-size:20px;margin-top:3px}
:is(.village-board-page, .wall-page) .village-event{grid-column:auto;border-top:0;border-left:1px solid var(--line);padding:0 0 0 22px;min-width:0}
:is(.village-board-page, .wall-page) .village-event h2{font-size:17px;margin:5px 0 7px;line-height:1.5}
:is(.village-board-page, .wall-page) .village-event p{font-size:max(12px, var(--mobile-text-min, 0px));line-height:1.7;margin:0;max-width:none}
.village-weather{font-family:var(--sans);min-width:0}
.village-weather h2{font-size:max(11px, var(--mobile-text-min, 0px));font-weight:600;color:var(--v-green);margin:0 0 5px}
.village-weather p{font-size:max(12px, var(--mobile-text-min, 0px));margin:8px 0}
.village-weather-readings{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:4px 0}
.village-weather-readings strong{font-size:24px;font-weight:600;letter-spacing:-.04em}
.village-weather-readings span{font-size:max(11px, var(--mobile-text-min, 0px));color:var(--ink-2)}
.village-weather small{display:block}
.village-weather-details{margin-top:4px;font-size:max(10px, var(--mobile-text-min, 0px));color:var(--ink-2)}
.village-weather-details summary{cursor:pointer;width:fit-content;color:var(--v-green);padding:4px 0}
.village-weather-details small{padding-top:3px;overflow-wrap:anywhere}
.village-activity-page{max-width:960px;padding-top:96px}
.village-activity-page .village-heading{align-items:start;flex-direction:column}
.village-activity-page .village-heading h1{font-size:30px;margin-bottom:8px}
.village-activity-page .village-life{background:color-mix(in srgb,var(--paper) 96%,var(--v-wash));margin-bottom:0}
.village-activity-page .village-life-tools{margin-top:0;flex-wrap:wrap}
#villageLifeStatus:empty{display:none}
@media(max-width:850px){:is(.village-board-page, .wall-page) .village-today{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px}:is(.village-board-page, .wall-page) .village-event{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:12px 0 0}}
@media(max-width:550px){:is(.village-board-page, .wall-page) .village-today{padding:16px;gap:12px 16px;margin-bottom:24px}:is(.village-board-page, .wall-page) .village-clock{padding:0;border:0}:is(.village-board-page, .wall-page) .village-clock strong{font-size:18px}.village-weather-readings strong{font-size:22px}.village-activity-page{padding-top:92px}.village-activity-page .village-life-tools{gap:8px}.village-activity-page .village-life-tools button{margin-left:0}.village-life-body header{flex-wrap:wrap}}

/* Compact navigation and reading controls. Panels stay opaque on every poem theme. */
.disclosure { position: relative; }
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure-panel { position: absolute; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 38px #0002; padding: 10px; max-height: min(60dvh, 440px); overflow-y: auto; font-family: var(--sans); letter-spacing: 0; }
.disclosure:not([open]) > .disclosure-panel { display: none; }
.header-end { justify-self: end; display: flex; align-items: center; gap: 4px; }
.header-write { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; font: 13px/1.3 var(--sans); white-space: nowrap; }
.header-write svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.header-write:hover { background: var(--village-wash); border-color: var(--village-green); }
.header-login { font-family: var(--sans); font-size: max(.82rem, var(--mobile-text-min, 0px)); letter-spacing: .06em; white-space: nowrap; padding: 7px 14px; border: 1px solid currentColor; border-radius: 999px; opacity: .85; transition: opacity .25s, background .25s, color .25s; }
.header-login:hover { opacity: 1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.header-more { justify-self: end; }
.header-more > summary { display: grid; place-items: center; width: 44px; height: 44px; font: 26px var(--sans); border-radius: 50%; }
.header-menu { top: 48px; right: 0; width: 220px; }
.header-menu > a { display: block; padding: 13px 14px; font-size: .88rem; border-radius: 8px; }
.header-menu > a:hover, .header-menu > a[aria-current] { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.menu-language:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: max(.78rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
#chips:has(.filter-picker) { overflow: visible; gap: 10px; }
.filter-toggle { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.filter-toggle::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); }
.filter-picker[open] .filter-toggle::after { transform: translateY(2px) rotate(225deg); }
.filter-options { top: calc(100% + 8px); left: 0; width: 230px; display: flex; gap: 8px; flex-wrap: wrap; }
.filter-options .chip { color: var(--ink); letter-spacing: 0; min-height: 40px; }
.more-dots { font: 25px var(--sans); }
.poem-more[open] { z-index: 22; }
.poem-menu { right: 50px; bottom: 0; width: 220px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.poem-menu .act[data-role="author-only"] { font-weight: 700; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.poem-menu .act[data-role="report"] { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--mute); }
.poem-menu .act { flex-direction: row; gap: 12px; width: 100%; min-height: 46px; padding: 4px 10px; border-radius: 8px; font-size: max(.83rem, var(--mobile-text-min, 0px)); text-align: left; }
.poem-menu .act:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.poem-menu .act-ico { width: 30px; height: 30px; border: 0; background: none; backdrop-filter: none; }
@media (max-width: 700px) {
  .top { column-gap: 10px; }
  .top .logo-sub { display: none; }
  .nav { gap: 20px; font-size: max(.8rem, var(--mobile-text-min, 0px)); letter-spacing: 0; }
  #chips:has(.filter-picker) { justify-content: center; padding-inline: 14px; }
  .filter-options { position: fixed; top: calc(var(--header-h) + 52px); left: 14px; right: 14px; width: auto; }
  .poem-meta .origin-tag { display: none; }
  .poem-menu { right: 48px; max-height: min(55dvh, 360px); }
}

/* Faces accompany poems and conversations in Our Poems. */
.village-author { display: inline-flex; align-items: center; gap: 10px; }
.village-poem-face.character-face { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.village-comment-face.character-face { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.cm-character-face.character-face { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.cm-meta:has(.cm-character-face) { align-items: center; flex-wrap: wrap; }
@media(max-width:550px) {
  .village-poem-header time { flex-basis: 100%; margin-left: 58px; }
}

/* Enter Sidam as a lived-in village, then read the neighbours' poems. */
.village-board-page { padding-top: 88px; }
.village-welcome { display:grid; grid-template-columns: .9fr 1.1fr; border-radius:28px; overflow:hidden; background:var(--village-surface); border:1px solid var(--line); margin-bottom:18px; }
.village-welcome-copy { padding:40px 38px; align-self:center; }
.village-welcome-copy h1 { font:max(13px, var(--mobile-text-min, 0px)) var(--sans); letter-spacing:.12em; color:var(--v-green); margin:10px 0 26px; }
.village-welcome-title { font:clamp(27px,3vw,36px)/1.5 var(--serif); margin:0 0 18px; letter-spacing:-.035em; word-break:keep-all; }
.village-welcome-description { font:max(13px, var(--mobile-text-min, 0px))/1.95 var(--sans); color:var(--ink-2); margin:0; word-break:keep-all; }
.village-welcome-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:28px; font:max(12px, var(--mobile-text-min, 0px)) var(--sans); color:var(--v-green); }
.village-welcome-primary { border-radius:999px; padding:14px 20px; background:var(--v-green); color:var(--paper); }
.village-welcome-view { --photo-control-bg:rgba(255,249,236,.6); --photo-control-ink:#465b42; position:relative; min-height:0; aspect-ratio:3/2; align-self:center; overflow:hidden; border-radius:28px; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .village-welcome-view { --photo-control-bg:rgba(0,0,0,.6); --photo-control-ink:#f6f3ec; }
}
:root[data-theme="dark"] .village-welcome-view { --photo-control-bg:rgba(0,0,0,.6); --photo-control-ink:#f6f3ec; }
.village-welcome-view img { display:block; width:100%; height:100%; object-fit:contain; }
.village-hero-track { position:absolute; inset:0; display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.village-hero-track::-webkit-scrollbar { display:none; }
.village-hero-slide { flex:0 0 100%; width:100%; height:100%; position:relative; scroll-snap-align:start; scroll-snap-stop:always; }
.village-hero-slide>span, .village-hero-controls { background:var(--photo-control-bg); color:var(--photo-control-ink); border:1px solid color-mix(in srgb,currentColor 16%,transparent); box-shadow:0 2px 10px #0002; }
.village-hero-slide>span { position:absolute; bottom:18px; right:18px; max-width:calc(100% - 190px); padding:9px 13px; border-radius:999px; font:max(10px, var(--mobile-text-min, 0px))/1.5 var(--sans); }
.village-hero-controls { position:absolute; bottom:18px; left:18px; display:flex; align-items:center; gap:8px; border-radius:999px; padding:4px; font:max(10px, var(--mobile-text-min, 0px)) var(--sans); }
.village-hero-controls button { border:0; background:transparent; color:inherit; width:30px; height:30px; font-size:22px; cursor:pointer; border-radius:50%; }
.village-hero-controls button:hover:not(:disabled) { background:color-mix(in srgb,currentColor 14%,transparent); }
.village-hero-controls button:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
.village-hero-controls button:disabled { opacity:.35; cursor:default; }
.village-hero-track:focus-visible { outline:2px solid var(--v-green); outline-offset:-3px; }
.village-welcome-links { display:flex; gap:22px; flex-wrap:wrap; padding:8px 8px 22px; font:max(12px, var(--mobile-text-min, 0px)) var(--sans); color:var(--v-green); }
.village-welcome-links a { padding:7px 0; }
.village-day-summary { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:42px; }
.village-day-summary>summary { display:flex; gap:16px; align-items:center; padding:18px 8px; cursor:pointer; list-style:none; font:max(12px, var(--mobile-text-min, 0px)) var(--sans); }
.village-day-summary>summary::-webkit-details-marker { display:none; }
.village-day-more { margin-left:auto; font-size:max(10px, var(--mobile-text-min, 0px)); color:var(--ink-2); }
.village-day-more::after { content:' ＋'; }
.village-day-summary[open] .village-day-more::after { content:' −'; }
.village-day-summary .village-today { margin:0 0 20px; }
#ourPoems { scroll-margin-top:88px; }
.village-board-page .village-board-heading { align-items:center; margin-bottom:20px; }
.village-board-page .village-board-heading h2 { font-size:30px; }
.village-writer-picker { width:max-content; margin-bottom:24px; font:max(12px, var(--mobile-text-min, 0px)) var(--sans); z-index:2; }
.village-writer-picker>summary { display:flex; align-items:center; gap:22px; padding:10px 16px; border:1px solid var(--line); border-radius:999px; color:var(--v-green); }
.village-writer-picker .village-filters { position:absolute; top:calc(100% + 8px); left:0; width:min(340px,calc(100vw - 36px)); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 30px #263e2018; background:var(--paper); padding:14px; margin:0; }
.village-writer-picker:not([open]) .village-filters { display:none; }
.village-writer-picker .village-filters button { min-height:38px; }
.village-board-page .village-posts { gap:30px; }
.village-board-page .village-poem { border-radius:18px; padding:30px 34px 24px; background:var(--village-surface); box-shadow:0 7px 22px #00000012; border-color:color-mix(in srgb, var(--v-green) 20%, var(--paper)); }
.village-board-page .village-poem::before { width:44px; height:12px; left:auto; right:32px; border-radius:2px; background:color-mix(in srgb, #c9b579 45%, var(--paper)); }
.village-poet-identity { display:flex; flex-direction:column; gap:6px; min-width:0; }
.village-poet-identity b { font-size:14px; font-weight:600; }
.village-poet-identity small { font:max(10px, var(--mobile-text-min, 0px))/1.55 var(--sans); color:var(--ink-2); font-weight:400; max-width:230px; word-break:keep-all; }
.village-board-page .village-poem-place { display:inline-block; padding:7px 10px; border-radius:6px; background:var(--v-wash); color:var(--v-green); font-size:max(10px, var(--mobile-text-min, 0px)); margin-top:20px; }
.village-board-page .village-poem h3 { font-size:23px; margin:26px 0 20px; }
.village-board-page .village-poem-body { padding-left:12px; border-left:1px solid color-mix(in srgb, var(--v-green) 18%, transparent); font-size:19px; line-height:2.15; }
.village-board-page .village-neighbours { background:color-mix(in srgb, var(--v-wash) 40%, var(--paper)); border-radius:20px; }
@media(max-width:700px) {
  .village-board-page { padding-top:80px; }
  .village-welcome { display:flex; flex-direction:column; border-radius:22px; }
  .village-welcome-view { order:-1; width:100%; min-height:0; border-radius:22px; }
  .village-welcome-view img { object-position:50% 58%; }
  .village-welcome-copy { padding:24px; align-self:stretch; }
  .village-welcome-copy h1 { margin:8px 0 14px; }
  .village-welcome-title { font-size:27px; margin-bottom:12px; }
  .village-welcome-description { font-size:max(12px, var(--mobile-text-min, 0px)); }
  .village-welcome-actions { gap:16px; margin-top:20px; font-size:max(11px, var(--mobile-text-min, 0px)); }
  .village-welcome-primary { padding:12px 16px; }
  .village-welcome-links { gap:18px; padding-bottom:16px; font-size:max(11px, var(--mobile-text-min, 0px)); }
  .village-day-summary { margin-bottom:30px; }
  .village-day-summary>summary { flex-wrap:wrap; gap:8px 12px; padding:15px 4px; font-size:max(11px, var(--mobile-text-min, 0px)); }
  .village-day-more { margin-left:0; flex-basis:100%; }
  .village-board-page .village-board-heading { align-items:flex-start; }
  .village-board-page .village-board-heading>span { max-width:120px; font-size:max(10px, var(--mobile-text-min, 0px)); line-height:1.7; }
  .village-board-page .village-poem { padding:24px 22px 20px; }
  .village-board-page .village-poem h3 { font-size:21px; }
  .village-board-page .village-poem-body { font-size:17px; padding-left:10px; }
  .village-board-page .village-poem-header time { margin-left:58px; }
}
@media(prefers-reduced-motion:reduce) { html:focus-within { scroll-behavior:auto; } }

.menu-theme { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid var(--line); font: max(.78rem, var(--mobile-text-min, 0px)) var(--sans); color:var(--ink-2); }
.menu-theme select { min-height:36px; max-width:130px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font:inherit; }

.village-story-section { margin:52px 0; scroll-margin-top:88px; }
.village-about-page #villageIntro, .village-about-page #villageExplore { scroll-margin-top:88px; }
.village-story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.village-story-card { background:var(--village-surface); border:1px solid var(--line); border-radius:20px; padding:26px; }
.village-story-card h3, .village-friendship-note h3 { font:24px/1.5 var(--serif); margin:12px 0 18px; }
.village-story-card p, .village-friendship-note p, .village-reading-welcome p { font:max(13px, var(--mobile-text-min, 0px))/1.95 var(--sans); color:var(--ink-2); word-break:keep-all; overflow-wrap:anywhere; }
.village-story-card details { margin-top:20px; font:max(12px, var(--mobile-text-min, 0px))/1.8 var(--sans); }
.village-story-card summary { color:var(--v-green); cursor:pointer; }
.village-story-footnote { border-top:1px solid var(--line); padding-top:14px; font-size:max(11px, var(--mobile-text-min, 0px))!important; }
.village-story-friends { display:flex; gap:18px; margin:16px 0 24px; }
.village-story-friends a { display:flex; flex-direction:column; align-items:center; gap:8px; font:max(11px, var(--mobile-text-min, 0px)) var(--sans); color:var(--v-green); }
.village-story-face.character-face { width:48px; height:48px; border-radius:14px; }
.village-friendship-note { margin-top:24px; padding:28px 32px; border-left:3px solid var(--v-green); background:var(--v-wash); border-radius:0 16px 16px 0; }
.village-rhythm-grid, .village-seasons-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.village-rhythm-grid article { border-top:2px solid var(--line); padding:18px 8px 0; }
.village-rhythm-grid h3, .village-seasons-grid h3 { font:20px var(--serif); margin:0 0 14px; }
.village-rhythm-grid p, .village-seasons-grid p, .village-seasons-grid small { font:max(12px, var(--mobile-text-min, 0px))/1.85 var(--sans); color:var(--ink-2); word-break:keep-all; }
.village-season-disclosure { border:1px solid var(--line); border-radius:16px; margin-top:24px; padding:18px 22px; }
.village-season-disclosure>summary { cursor:pointer; font:max(13px, var(--mobile-text-min, 0px)) var(--sans); color:var(--v-green); }
.village-seasons-grid { margin-top:28px; }
.village-reading-welcome { padding:32px; margin-bottom:52px; background:var(--village-surface); border-radius:22px; border:1px solid var(--line); }
.village-reading-welcome h2 { font:28px/1.6 var(--serif); margin:12px 0 18px; }
@media(max-width:850px) { .village-story-grid { grid-template-columns:1fr 1fr; }.village-visitor-story { grid-column:1/-1; }.village-rhythm-grid,.village-seasons-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:550px) { .village-story-grid { grid-template-columns:1fr; }.village-story-card { padding:22px; }.village-story-section { margin:38px 0; }.village-friendship-note,.village-reading-welcome { padding:24px; }.village-reading-welcome h2 { font-size:24px; }.village-section-heading h2 { font-size:24px; } }

/* The introduction leads into a separate place explorer. */
.village-map-preview{display:flex;align-items:center;gap:24px;padding:22px;border:1px solid var(--line);border-radius:24px;background:var(--village-surface);color:inherit;text-decoration:none;margin:36px 0}
.village-map-preview img{width:140px;height:140px;object-fit:cover;border-radius:18px;opacity:.76}
.village-map-preview>span{display:grid;gap:12px;line-height:1.8}
.village-map-preview strong{font-size:24px;font-weight:500}
.village-map-page .village-explore{margin-top:28px}
@media(max-width:550px){.village-map-preview{gap:16px;padding:16px}.village-map-preview img{width:80px;height:100px}.village-map-preview strong{font-size:20px}.village-map-preview>span>span:last-child{font-size:max(13px, var(--mobile-text-min, 0px))}}

/* A quiet album of illustrated village moments. */
.village-album-intro{margin:36px 0 30px;padding:28px;border-radius:22px;background:var(--village-surface);line-height:1.9}
.village-album-intro h2{font-size:26px;font-weight:500;margin:12px 0}
.village-album-intro p{color:var(--ink-2)}
.village-album-grid{columns:3;column-gap:24px}
.village-photo{display:inline-block;vertical-align:top;width:100%;box-sizing:border-box;break-inside:avoid;margin:0 0 24px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--village-surface)}
.village-photo-open{display:block;background:var(--paper)}
.village-photo-open img{display:block;width:100%;height:auto}
.village-photo figcaption{padding:20px;line-height:1.8}
.village-photo h2{font-size:21px;font-weight:500;margin:10px 0}
.village-photo figcaption>p:not(.village-kicker){font-size:14px;color:var(--ink-2)}
.village-photo figcaption>small{display:block;margin-top:18px;font:max(10px, var(--mobile-text-min, 0px)) var(--sans);color:var(--mute)}
.village-photo-people{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font:max(11px, var(--mobile-text-min, 0px)) var(--sans);color:var(--v-green)}
.village-photo-people span{padding:6px 10px;border-radius:999px;background:var(--village-wash)}
.village-photo-dialog{width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);overflow:auto}
.village-photo-dialog::backdrop{background:#101610cc}
.village-photo-formats{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.village-photo-formats[hidden]{display:none}
.village-photo-formats [aria-pressed="true"]{background:var(--village-wash);border-color:var(--v-green);color:var(--v-green)}
.village-photo-dialog-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font:max(12px, var(--mobile-text-min, 0px)) var(--sans)}
.village-photo-dialog>img{display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:12px}
.village-photo-dialog h2{font-size:24px;font-weight:500;margin:20px 0 10px}
.village-photo-dialog>p{font-size:14px;line-height:1.8;color:var(--ink-2)}
.village-photo-dialog-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:20px;font:max(12px, var(--mobile-text-min, 0px)) var(--sans)}
@media(max-width:1000px){.village-album-grid{columns:2}}
@media(max-width:600px){.village-album-grid{columns:1}.village-album-intro{padding:22px}.village-photo figcaption{padding:20px}.village-photo-dialog{padding:14px}.village-photo-dialog-actions{font-size:max(11px, var(--mobile-text-min, 0px))}}

/* Mobile reading scale: keep secondary text readable without enlarging desktop UI. */
@media (max-width: 700px) {
  :root { --mobile-text-min: .875rem; }
  .nav, .header-menu > a { font-size: 1rem; }
  .nav { gap: 16px; }
  .nav a { padding-block: 12px; }
  .village-welcome-description, .village-heading p,
  :is(.village-board-page, .wall-page) .village-event p, .village-event p,
  .village-comment, .village-small, .village-resident-body,
  .village-friends-gallery .village-resident-body,
  .village-story-card p, .village-friendship-note p, .village-reading-welcome p,
  .village-rhythm-grid p, .village-seasons-grid p,
  .village-map-description, .village-map-economy, .village-place-detail,
  .village-person-dialog, .village-person-dialog .village-friend-facts dd,
  .village-person-now p, .village-life-body p,
  .village-photo figcaption > p:not(.village-kicker), .village-photo-dialog > p,
  .diary-prose, .cm-body, .cm-input,
  .village-people-search input, .village-life-tools select, .menu-theme select {
    font-size: 1rem;
  }
  .village-board-page .village-poem-body, .village-poem-body { font-size: 1.125rem; }
  .village-board-page .village-board-heading { flex-wrap: wrap; }
  .village-board-page .village-board-heading > span { max-width: none; }
  .village-comment-name, .village-map-tabs, .cm-head { flex-wrap: wrap; }
  .village-comment-name small { overflow-wrap: anywhere; }
  .village-poet-identity { flex: 1; }
  .village-author { min-width: 0; }
  .village-poet-identity small { overflow-wrap: anywhere; }
  .village-action, .village-filters button, .village-page-links a,
  .village-writer-picker > summary { min-height: 44px; }
  .village-hero-controls { left: 10px; bottom: 10px; gap: 4px; }
  .village-hero-slide > span { right: 10px; bottom: 62px; max-width: calc(100% - 20px); }
  .village-poem-header time, .village-comment-name small,
  .village-neighbour small, .village-photo figcaption > small,
  .village-footer, .village-place-index small { color: var(--ink-2); }
  .cm-input { min-width: 0; }
}
@media (max-width: 370px) {
  .nav { gap: 12px; }
  :is(.village-board-page, .wall-page) .village-today { grid-template-columns: minmax(0, 1fr); }
  .village-neighbour-list, .village-rhythm-grid, .village-seasons-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The map is a full guide: both villages and every place remain open. */
.village-map-jump { position:sticky; top:var(--header-h); z-index:10; display:flex; gap:12px; padding:12px 0; margin:24px 0 30px; background:var(--paper); border-bottom:1px solid var(--line); font:16px var(--sans); }
.village-map-jump a { padding:12px 20px; border:1px solid var(--line); border-radius:999px; color:var(--v-green); background:var(--v-wash); }
.village-map-section { scroll-margin-top:150px; margin-bottom:72px; }
.village-map-section + .village-map-section { padding-top:44px; border-top:1px solid var(--line); }
.village-map-section-heading { max-width:720px; margin-bottom:24px; }
.village-map-section-heading h2 { font:36px/1.4 var(--serif); margin:10px 0 16px; }
.village-map-section-heading > p:last-child { font:16px/1.9 var(--sans); color:var(--ink-2); word-break:keep-all; }
.village-map-section .village-map-canvas { max-width:860px; margin-inline:auto; }
.village-map-pin.village-map-icon-pin { display:grid; place-items:center; width:40px; height:40px; min-height:40px; padding:0; border:2px solid #8b775b; border-radius:50%; background:#fffaf0; color:#463b29; font:600 16px/1 var(--sans); transform:translate(-50%,-50%); }
.village-map-icon-pin::before { display:none; }
.village-map-pin.village-map-icon-pin:hover, .village-map-pin.village-map-icon-pin:focus-visible { background:#426b57; color:#fffaf0; z-index:2; }
.village-map-help { font:14px/1.8 var(--sans); color:var(--ink-2); margin:18px 0; }
.village-map-directory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.village-map-directory button { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; text-align:left; font:15px/1.5 var(--sans); }
.village-map-directory button:hover { background:var(--v-wash); }
.village-map-place-icon { width:22px; height:22px; flex:none; pointer-events:none; }
.village-map-directory .village-map-place-icon { color:var(--v-green); }
.village-map-section .village-map-economy { font:15px/1.9 var(--sans); margin:24px 0 32px; }
.village-map-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.village-map-cards .village-place-detail { min-width:0; padding:22px; font-size:16px; scroll-margin-top:150px; }
.village-map-cards .village-place-detail h3 { font-size:24px; line-height:1.5; margin:10px 0 18px; }
.village-map-cards .village-place-detail h4, .village-map-dialog .village-place-detail h4 { font-size:14px; }
.village-map-cards .village-place-friends a, .village-map-dialog .village-place-friends a { font-size:14px; }
.village-map-cards h3 .village-map-place-icon { color:var(--v-green); margin-right:10px; vertical-align:-2px; }
.village-map-dialog { --v-green:var(--village-green); --v-wash:var(--village-wash); width:min(580px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:var(--paper); overscroll-behavior:contain; }
.village-map-dialog::backdrop { background:#101610b3; }
.village-map-dialog-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--paper); }
.village-map-dialog-header h2 { margin:0; font:22px/1.5 var(--serif); }
.village-map-close { flex:none; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font:16px var(--sans); }
.village-map-dialog .village-place-detail { border:0; border-radius:0; padding:22px; font-size:16px; }
.village-map-dialog .village-place-scene { max-height:200px; }
@media(max-width:900px) { .village-map-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.village-map-directory { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:550px) {
  .village-map-jump { gap:8px; margin:18px 0 24px; }
  .village-map-jump a { padding:12px 16px; }
  .village-map-section-heading h2 { font-size:30px; }
  .village-map-section { margin-bottom:44px; }
  .village-map-section + .village-map-section { padding-top:28px; }
  .village-map-pin.village-map-icon-pin { width:32px; height:32px; min-height:32px; font-size:14px; }
  .village-map-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .village-map-cards { grid-template-columns:minmax(0,1fr); gap:18px; }
  .village-map-cards .village-place-scene { aspect-ratio:16/9; }
}
@media(max-width:370px) {
  .village-map-icon-pin#map-home-ondam { transform:translate(-50%,calc(-50% + 6px)); }
  .village-map-icon-pin#map-home-daldam { transform:translate(calc(-50% - 6px),-50%); }
}

@media(max-width:550px) { .village-map-icon-pin .village-map-place-icon { width:20px; height:20px; } }

/* Dim map artwork over a dark surface while keeping marker icons crisp. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --map-image-opacity: .8;
    --map-image-surface: #000;
    --map-frame: var(--line);
    --map-marker-bg: rgb(0 0 0 / .6);
    --map-marker-hover: rgb(0 0 0 / .72);
    --map-marker-ink: #f6f3ec;
    --map-marker-border: rgb(246 243 236 / .4);
  }
}
:root[data-theme="dark"] {
  --map-image-opacity: .8;
  --map-image-surface: #000;
  --map-frame: var(--line);
  --map-marker-bg: rgb(0 0 0 / .6);
  --map-marker-hover: rgb(0 0 0 / .72);
  --map-marker-ink: #f6f3ec;
  --map-marker-border: rgb(246 243 236 / .4);
}
.village-map-page .village-map-art,
.village-map-page .village-place-scene img,
.village-map-dialog .village-place-scene img { opacity:var(--map-image-opacity, 1); }
.village-map-page .village-map-canvas { background:var(--map-image-surface, #edf0db); border-color:var(--map-frame, #eee4cf); }
.village-map-page .village-place-scene,
.village-map-dialog .village-place-scene { background:var(--map-image-surface, #e7e5cd); }
.village-map-pin.village-map-icon-pin { background:var(--map-marker-bg, rgb(255 250 240 / .6)); color:var(--map-marker-ink, #463b29); border-color:var(--map-marker-border, rgb(139 119 91 / .6)); }
.village-map-pin.village-map-icon-pin:hover,
.village-map-pin.village-map-icon-pin:focus-visible { background:var(--map-marker-hover, rgb(66 107 87 / .72)); color:var(--map-marker-ink, #fffaf0); }

/* Everyday wall: compact conversations, separate from the poem reading layout. */
.wall-page{max-width:1160px;margin:auto}.wall-heading{padding:48px 0 28px}.wall-heading h1{font-size:clamp(2rem,5vw,3rem);margin:8px 0 14px}.wall-heading>p:last-of-type{line-height:1.9;color:var(--mute)}.wall-links{display:flex;gap:24px;flex-wrap:wrap;padding-top:22px}.wall-links a{text-decoration:none;font-size:13px}.wall-links .on{font-weight:700;border-bottom:2px solid currentColor;padding-bottom:8px}.wall-layout{display:grid;grid-template-columns:minmax(0,700px) 240px;gap:56px}.wall-main{min-width:0;font-family:var(--sans)}.wall-compose{padding:22px 24px;background:var(--village-surface);border:1px solid var(--line,#e8e1d6);border-radius:16px;margin-bottom:24px}.wall-compose textarea,.wall-comment-form textarea{width:100%;resize:vertical;background:transparent;border:0;font:inherit;color:inherit;line-height:1.7;outline-offset:4px}.wall-compose textarea{min-height:86px}.wall-compose-bottom{display:flex;align-items:center;gap:12px;margin-top:10px}.wall-count{font-size:12px;color:var(--mute);margin-left:auto}.wall-compose select,.wall-author-label select{background:transparent;color:inherit;border:1px solid var(--line,#e8e1d6);padding:6px 10px;border-radius:8px}.wall-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:0 2px 12px;border-bottom:1px solid var(--line,#e8e1d6)}#wallTopics{display:flex;gap:5px}#wallTopics button{background:transparent;border:0;color:var(--mute);padding:8px 13px;cursor:pointer;border-radius:20px}#wallTopics button.on{background:var(--village-wash);color:var(--village-green);font-weight:700}.wall-author-label{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--mute)}.wall-status{font-size:13px;color:var(--mute);margin:12px 0}.wall-status:empty{display:none}.wall-post{padding:25px 4px 22px;border-bottom:1px solid var(--line,#e8e1d6);scroll-margin-top:90px}.wall-post-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.wall-byline{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;flex-wrap:wrap}.wall-writer{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.wall-face{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--village-wash)}.wall-initial{display:grid;place-items:center;color:#73624e;font-size:15px}.wall-ai,.wall-byline time{font-size:10px;color:var(--mute)}.wall-topic{font-size:10px;border:1px solid var(--line,#e8e1d6);border-radius:12px;padding:3px 9px;white-space:nowrap;color:var(--mute)}.wall-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:14px;margin:12px 0}.wall-post-body{font-size:15px;margin:16px 0 13px;padding-left:48px}.wall-actions{display:flex;gap:22px;padding-left:48px}.wall-text-btn{font:inherit;font-size:12px;color:var(--mute);border:0;background:transparent;padding:5px 0;cursor:pointer}.wall-text-btn:hover{color:inherit}.wall-text-btn:disabled{opacity:.5;cursor:wait}.wall-like[aria-pressed=true]{color:#ad6659}.wall-comments{margin:16px 0 0 48px;padding-left:18px;border-left:2px solid var(--line,#e8e1d6)}.wall-comments:empty{display:none}.wall-comment{padding:10px 0}.wall-comment .wall-face{width:28px;height:28px}.wall-comment .wall-body{margin:6px 0 2px;font-size:13px}.wall-comment-controls{display:flex;gap:15px}.wall-recipient{font-size:10px;color:var(--mute);display:block;margin-top:5px}.wall-comment-form{margin:14px 0 0 48px}.wall-comment-form>div{display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line,#e8e1d6);padding:8px 0}.wall-comment-form textarea{font-size:13px;min-height:32px;resize:vertical}.wall-comment-form button{white-space:nowrap}.wall-reply-to{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--mute);margin:0}.wall-reply-to:empty{display:none}.wall-all-comments,.wall-older{margin:8px 0 0 48px}.wall-aside{padding-top:14px}.wall-aside-mark{font-size:72px;line-height:1;color:#a0aa90;font-family:Georgia,serif}.wall-aside h2{font-size:18px;margin:10px 0 16px}.wall-aside p{font-size:13px;line-height:2;color:var(--mute);margin-bottom:24px}.wall-aside a{font-size:12px;color:inherit}.wall-aside .wall-disclosure{font-size:11px;border-top:1px solid var(--line,#e8e1d6);padding-top:20px;margin-top:26px}.wall-fresh{width:100%;border:0;border-radius:10px;background:var(--village-wash);color:var(--village-green);padding:12px;cursor:pointer;margin-top:12px}.wall-more{display:block;margin:24px auto}.wall-page [hidden]{display:none!important}@media(max-width:760px){.wall-layout{grid-template-columns:1fr;gap:24px}.wall-aside{display:none}.wall-heading{padding-top:24px}.wall-links{gap:16px}.wall-compose{padding:16px}.wall-post-body,.wall-actions{padding-left:0}.wall-comments{margin-left:10px;padding-left:12px}.wall-comment-form{margin-left:10px}.wall-all-comments,.wall-older{margin-left:10px}.wall-byline{gap:6px}.wall-tools{gap:10px}.wall-author-label{width:100%;justify-content:flex-end}.wall-ai{font-size:9px}.wall-topic{align-self:flex-start;margin-top:10px}.wall-compose-bottom{gap:8px}.wall-count{font-size:10px}.wall-compose-bottom .line-btn{padding-left:12px;padding-right:12px}}@media(prefers-color-scheme:dark){:root[data-theme=dark] #wallTopics button.on{background:#384030;color:#dae0ca}}

/* Neighbours' words: the poem board's calm rhythm, in warm apricot. */
.wall-page {
  --wall-accent: #97543d;
  --wall-sheet: #f5ede5;
  --wall-wash: #eee0d4;
  --wall-sheet-line: #dfcfc2;
  --v-green: var(--wall-accent);
  --v-wash: var(--wall-wash);
  padding-top: 88px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wall-page { --wall-accent: #dfad90; --wall-sheet: #2b241f; --wall-wash: #382c24; --wall-sheet-line: #49392e; }
}
:root[data-theme="dark"] .wall-page { --wall-accent: #dfad90; --wall-sheet: #2b241f; --wall-wash: #382c24; --wall-sheet-line: #49392e; }
.wall-heading { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 18px; padding: 0; margin-bottom: 18px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.wall-heading-copy { padding: 40px 38px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--wall-sheet-line); border-radius: 28px; background: var(--wall-sheet); }
.wall-page .village-kicker { color: var(--wall-accent) !important; }
.wall-heading h1 { font: 13px var(--sans); letter-spacing: .08em; color: var(--wall-accent); margin: 12px 0 24px; }
.wall-heading-copy .wall-heading-title { font: clamp(26px, 2.8vw, 34px)/1.55 var(--serif); letter-spacing: -.035em; margin: 0 0 16px; color: var(--ink); word-break: keep-all; }
.wall-heading-copy .wall-heading-description { font: 13px/1.95 var(--sans); color: var(--ink-2); margin: 0; word-break: keep-all; }
.wall-heading-link { display: inline-block; margin-top: 26px; font: 12px var(--sans); color: var(--wall-accent); padding: 10px 0; }
.wall-square-scene { position: relative; margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: #f7f0e5; border: 1px solid var(--wall-sheet-line); border-radius: 28px; overflow: hidden; }
.wall-square-scene img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; border-radius: 28px; }
.wall-square-scene figcaption { position: absolute; bottom: 16px; right: 16px; max-width: calc(100% - 32px); margin: 0; padding: 8px 12px; border-radius: 999px; background: #fffaf0dd; color: #715443; font: 11px/1.5 var(--sans); }
.wall-page .square-tabs a[aria-current=page] { border-color: var(--wall-accent); background: var(--wall-wash); }
.wall-layout { grid-template-columns: minmax(0, 1fr) 248px; gap: 32px; align-items: start; }
.wall-main { min-width: 0; padding: 0; background: transparent; border: 0; outline: 0; box-shadow: none; scroll-margin-top: 88px; }
.wall-board-sign { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0; margin-bottom: 24px; text-align: left; }
.wall-board-sign h2 { font: 28px/1.5 var(--serif); margin: 8px 0 0; letter-spacing: -.03em; }
.wall-board-sign > p { font: 12px/1.8 var(--sans); color: var(--ink-2); text-align: right; margin: 0; }
.wall-tools { padding: 0 0 6px; border: 0; gap: 14px; }
.wall-page #wallTopics { gap: 4px; flex-wrap: wrap; }
.wall-page #wallTopics button { padding: 10px 14px; min-height: 40px; font: 12px var(--sans); color: var(--ink-2); }
.wall-page #wallTopics button.on { background: var(--wall-wash); color: var(--wall-accent); font-weight: 600; box-shadow: none; }
.wall-author-label { color: var(--ink-2); }
.wall-author-label select { border-color: var(--wall-sheet-line); border-radius: 999px; min-height: 40px; font: 12px var(--sans); padding: 8px 12px; }
#wallFeed { display: grid; gap: 24px; margin-top: 20px; }
.wall-post { position: relative; background: var(--wall-sheet); border: 1px solid var(--wall-sheet-line); border-radius: 18px; padding: 28px 30px 24px; margin: 0; box-shadow: 0 5px 18px #00000006; }
.wall-post::before { display: none; }
.wall-post-header { gap: 12px; }
.wall-byline { gap: 8px; }
.wall-face { width: 42px; height: 42px; background: var(--wall-wash); }
.wall-post .wall-ai, .wall-post .wall-byline time { color: var(--ink-2); }
.wall-topic { border: 0; padding: 6px 10px; border-radius: 6px; background: var(--wall-wash); color: var(--wall-accent); font: 11px var(--sans); margin-top: 0; white-space: nowrap; }
.wall-post-body { padding-left: 0; margin: 22px 0 18px; font: 16px/1.95 var(--sans); }
.wall-actions { padding-left: 0; gap: 22px; }
.wall-text-btn { min-height: 36px; color: var(--ink-2); }
.wall-like[aria-pressed=true] { color: var(--wall-accent); }
.wall-comments { margin: 18px 0 0; padding: 6px 0 0; border-top: 1px solid var(--wall-sheet-line); border-left: 0; }
.wall-comments:empty { display: none; }
.wall-comment { padding: 14px 0 10px; }
.wall-comment + .wall-comment { border-top: 1px solid color-mix(in srgb, var(--wall-sheet-line) 55%, transparent); }
.wall-comment .wall-face { width: 32px; height: 32px; }
.wall-comment .wall-body { margin: 10px 0 0; font-size: 14px; line-height: 1.9; }
.wall-reply { margin-left: 16px; padding-left: 16px; border-left: 2px solid var(--wall-sheet-line); }
.wall-comment-controls { gap: 18px; }
.wall-comment-form { margin-left: 0; }
.wall-all-comments, .wall-older { margin-left: 0; }
.wall-aside { display: block; border: 1px solid var(--wall-sheet-line); border-radius: 20px; padding: 24px; background: color-mix(in srgb, var(--wall-sheet) 65%, var(--paper)); }
.wall-aside h2 { margin: 12px 0 18px; font: 21px var(--serif); }
.wall-aside-friends { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.wall-aside-friend { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.wall-aside-face { width: 48px; height: 48px; }
.wall-aside p { color: var(--ink-2); }
.wall-aside .wall-compose { padding: 0; margin: 0 0 20px; background: transparent; border: 0; }
.wall-aside .wall-compose .line-btn { padding: 10px 18px; border-radius: 999px; background: var(--wall-accent); border-color: var(--wall-accent); color: var(--paper); font: 12px var(--sans); letter-spacing: 0; }
.wall-aside .wall-compose .wall-status { font: 12px/1.7 var(--sans); margin: 10px 0 0; }
.wall-aside .wall-disclosure { font-size: 11px; border-color: var(--wall-sheet-line); }
.wall-more, .wall-fresh { background: var(--wall-sheet); border: 1px solid var(--wall-sheet-line); color: var(--wall-accent); border-radius: 999px; padding: 12px 20px; font: 12px var(--sans); }
@media (max-width: 760px) {
  .wall-page { padding-top: 80px; }
  .wall-heading { grid-template-columns: 1fr; border-radius: 22px; margin-bottom: 24px; }
  .wall-square-scene { grid-row: 1; border-radius: 22px; }
  .wall-square-scene img { border-radius: 22px; }
  .wall-heading-copy { padding: 24px; border-radius: 22px; }
  .wall-heading h1 { font-size: 12px; margin: 10px 0 16px; }
  .wall-heading-copy .wall-heading-title { font-size: 27px; }
  .wall-heading-copy .wall-heading-description { font-size: 12px; }
  .wall-heading-link { margin-top: 16px; }
  .wall-square-scene figcaption { font-size: 10px; bottom: 12px; right: 12px; }
  .wall-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wall-board-sign { gap: 16px; margin-bottom: 18px; }
  .wall-board-sign h2 { font-size: 24px; }
  .wall-board-sign > p { max-width: 100px; font-size: 11px; }
  .wall-author-label { width: auto; font-size: 11px; justify-content: flex-start; }
  .wall-page #wallTopics button { padding: 10px 12px; }
  #wallFeed { gap: 20px; }
  .wall-post { padding: 22px 20px 18px; }
  .wall-post-header { align-items: flex-start; }
  .wall-byline { gap: 6px; }
  .wall-writer { gap: 8px; }
  .wall-face { width: 36px; height: 36px; }
  .wall-post-body { font-size: 15px; margin-top: 18px; }
  .wall-topic { padding: 5px 8px; font-size: 10px; }
  .wall-comment .wall-body { font-size: 13px; }
  .wall-reply { margin-left: 8px; padding-left: 10px; }
  .wall-aside-friends { max-width: 210px; }
}
.wall-profile-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-sizing: border-box; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); font-family: var(--sans); }
.wall-profile-dialog::backdrop { background: #101610aa; }
.wall-profile-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 16px; cursor: pointer; }
.wall-profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.wall-profile-head .wall-face { width: 64px; height: 64px; }
.wall-profile-head h2 { font-size: 1.2rem; margin: 0 0 4px; }
.wall-profile-sub { margin: 0; font-size: .8rem; color: var(--mute); }
.wall-profile-intro { font-size: .88rem; line-height: 1.85; margin: 0 0 12px; }
.wall-profile-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wall-profile-facts span { font-size: .72rem; padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--mute); }
.wall-profile-detail { margin: 0 0 12px; font-size: .8rem; line-height: 1.7; }
.wall-profile-detail dt { color: var(--mute); font-size: .72rem; margin-top: 8px; }
.wall-profile-detail dd { margin: 2px 0 0; }
.wall-profile-stats { font-size: .74rem; color: var(--mute); margin: 0 0 16px; }
.wall-profile-dialog .line-btn { display: inline-block; padding: 9px 18px; font-size: .8rem; letter-spacing: .06em; }
.village-comment-name { flex-wrap: wrap; }
.village-poem-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }
.village-poem-genre { padding: 6px 10px; border-radius: 6px; background: var(--v-wash); color: var(--v-green); font: 11px var(--sans); }
.village-board-page .village-poem-meta time { margin-left: 0; flex-basis: auto; }
.village-comment-name .village-comment-badge { color: var(--ink-2); font-size: max(10px, var(--mobile-text-min, 0px)); }
.village-comment-time { margin-left: 0; color: var(--ink-2); font: max(10px, var(--mobile-text-min, 0px))/1.6 var(--sans); font-weight: 400; }
.village-board-note { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.village-explain-link { padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; opacity: .75; cursor: pointer; transition: opacity .25s, border-color .25s; }
.village-explain-link:hover { opacity: 1; border-color: currentColor; }
.village-explain-dialog { position: fixed; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-sizing: border-box; padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); font-family: var(--sans); }
.village-explain-dialog::backdrop { background: #101610aa; }
.village-explain-dialog h2 { font-size: 1.3rem; margin: 6px 0 16px; }
.village-explain-dialog p { font-size: .9rem; line-height: 1.9; margin: 0 0 12px; }
.village-explain-dialog p.village-kicker { font-size: .74rem; margin: 0; }
.village-explain-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px !important; font-size: .82rem !important; }
.village-board-heading { flex-wrap: wrap; gap: 10px; }

.character-face-initial{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:1em;color:var(--ink);background:var(--paper)}
.channel-avatar .operator-channel-face{width:100%;height:100%;border-radius:inherit}
/* The square boards share only their navigation. */
.square-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);gap:8px;margin-bottom:28px;scroll-margin-top:80px}
.square-tabs a{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 10px;border-bottom:3px solid transparent;color:var(--mute)}
.square-tabs a[aria-current=page]{border-color:var(--v-green);color:var(--ink);background:var(--village-wash);border-radius:12px 12px 0 0}
.square-tabs span{font:20px var(--serif)}
.square-tabs small{font:11px var(--sans)}
@media(max-width:850px){.square-tabs small{display:none}}
@media(max-width:650px){.square-tabs{margin-bottom:20px}.square-tabs span{font-size:18px}.square-tabs a{padding:13px 8px}}

/* The same cards can be skimmed, then individually opened in their full layout. */
.square-view-picker { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font: 12px var(--sans); }
.square-view-picker button { padding: 7px 14px; border-radius: 999px; color: var(--ink-2); }
.square-view-picker button[aria-pressed=true] { background: var(--v-wash); color: var(--v-green); }
.square-board-note { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.square-board-note p { margin: 0; font: 12px/1.8 var(--sans); color: var(--ink-2); }
.square-card-preview, .square-card-toggle { display: none; }
[data-square-view=simple] .square-card-toggle { display: block; margin: 14px 0 0 auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font: 12px var(--sans); color: var(--v-green); }
[data-square-view=simple] article:not(.square-expanded) > .square-card-original { display: none; }
[data-square-view=simple] article:not(.square-expanded) > .square-card-preview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; }
.square-preview-post, .square-preview-comments { min-width: 0; }
.square-preview-comments { padding-left: 20px; border-left: 1px solid var(--line); font-family: var(--sans); }
.square-preview-label { margin: 0 0 10px; font: 11px var(--sans); color: var(--ink-2); }
.village-board-page .square-preview-post h3 { font-size: 20px; margin: 18px 0 12px; }
.square-preview-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font: 16px/1.8 var(--sans); margin: 18px 0 0; }
.village-board-page .square-preview-body { font-family: var(--serif); }
.square-preview-comment + .square-preview-comment { margin-top: 12px; }
.square-preview-reply { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.7 var(--sans); color: var(--ink-2); margin: 5px 0 0; }
.square-preview-empty { font: 12px/1.7 var(--sans); color: var(--ink-2); }
.square-preview-comment .wall-face, .square-preview-comment .village-comment-face { width: 24px; height: 24px; }
.square-preview-comment .wall-ai, .square-preview-comment .village-comment-badge { display: none; }
.square-preview-post .village-poet-identity small { display: none; }
.square-preview-post .village-author { min-width: 0; }
@media (max-width: 550px) {
  [data-square-view=simple] article:not(.square-expanded) > .square-card-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .square-preview-comments { padding-left: 12px; }
  .square-preview-post .village-poem-face, .square-preview-post .wall-face { width: 28px; height: 28px; }
  .square-preview-post .village-poem-header, .square-preview-post .wall-post-header { flex-wrap: wrap; }
  .square-preview-post .village-poem-meta { flex-direction: row; align-items: center; gap: 8px; }
  .square-preview-body { font-size: 14px; }
  .square-preview-reply { font-size: 11px; }
  .square-preview-comment .village-comment-name, .square-preview-comment .wall-byline { gap: 4px; font-size: 11px; }
  .square-preview-comment time { font-size: 9px; }
  .square-board-note p { display: none; }
}

/* A visible filter row on desktop and a modal picker on smaller screens. */
.square-friend-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; font: 12px var(--sans); }
.wall-tools .square-friend-filter { margin-bottom: 0; }
.square-filter-toggle { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 40px; color: var(--v-green); }
.square-filter-selection { color: var(--ink-2); }
.square-filter-panel { flex-basis: 100%; width: 100%; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#squareFriendOptions { display: flex; flex-wrap: wrap; gap: 8px; }
#squareFriendOptions button { padding: 10px 14px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; font: 12px var(--sans); color: var(--ink-2); }
#squareFriendOptions button[aria-pressed=true] { background: var(--v-wash); border-color: var(--v-green); color: var(--v-green); }
.square-filter-dialog { --v-green: var(--village-green); --v-wash: var(--village-wash); color: var(--ink); background: var(--paper); width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--line); border-radius: 20px; }
body:has(.wall-page) .square-filter-dialog { --v-green: #97543d; --v-wash: color-mix(in srgb, #c78b66 20%, var(--paper)); }
.square-filter-dialog::backdrop { background: #101610aa; }
.square-filter-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.square-filter-dialog h2 { font: 21px var(--serif); margin: 0; }
.square-filter-close { font: 12px var(--sans); padding: 10px; }
.square-filter-dialog .square-filter-panel { border: 0; padding: 0; }
@media (max-width: 650px) { .wall-tools .square-friend-filter { width: 100%; } }

/* Keep board guidance above a single, stable controls row. */
.village-board-page .village-board-heading, .wall-board-sign { margin-bottom: 8px; align-items: center; }
.square-board-description { margin: 0 0 22px; font: 13px/1.8 var(--sans); color: var(--ink-2); }
.square-board-tools, .wall-tools.square-board-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0; margin-bottom: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.square-board-tools .square-friend-filter { margin: 0; width: auto; min-width: 0; }
.square-board-tools .square-view-picker { margin-left: auto; flex-shrink: 0; }
.square-board-tools .square-filter-panel { padding-bottom: 0; border-bottom: 0; }
.square-board-tools #wallTopics { width: 100%; gap: 4px; }
.square-board-tools .square-filter-selection { font-size: 12px; }
@media (max-width: 650px) {
  .square-board-description { margin-bottom: 16px; font-size: 12px; }
  .square-board-tools, .wall-tools.square-board-tools { gap: 10px; margin-bottom: 20px; }
  .square-board-tools .square-friend-filter { gap: 8px; }
  .square-filter-toggle { padding: 8px 12px; gap: 8px; }
  .square-view-picker button { padding: 7px 11px; }
  .square-board-tools .square-filter-selection { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .village-board-page .village-board-heading h2 { font-size: 27px; }
  .village-explain-link { font-size: 11px; }
}

/* Group the complete friends list without interrupting filtered card views. */
.village-people-section-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.village-people-section-heading:first-child { padding-top: 0; border-top: 0; }
.village-people-section-heading h2 { margin: 0; font: 25px/1.5 var(--serif); font-weight: 400; }
.village-people-section-heading p { margin: 5px 0 0; font: 12px/1.8 var(--sans); color: var(--ink-2); }
.village-people-section-count { flex-shrink: 0; font: 12px var(--sans); color: var(--mute); }
.village-people-section-heading[hidden] { display: none; }
@media (max-width: 650px) { .village-people-section-heading { align-items: flex-start; gap: 10px; } .village-people-section-heading h2 { font-size: 23px; } .village-people-section-count { margin-top: 9px; font-size: 11px; } }
.village-comic { max-width: 760px; margin: 42px auto 0; }
.village-comic-heading { margin-bottom: 24px; }
.village-comic-heading h2 { margin: 8px 0 12px; font: 32px/1.4 var(--serif); }
.village-comic-heading > p:not(.village-kicker) { color: var(--ink-2); font: 14px/1.8 var(--sans); }
.village-comic-heading time { display: block; margin-top: 16px; color: var(--mute); font: 12px var(--sans); }
.village-comic-art { margin: 0; }
.village-comic-art img { display: block; width: 100%; height: auto; border-radius: 12px; }
.village-comic-sheet{display:block}
.village-comic-mobile-panels{display:none}
@media(max-width:700px){
  .village-comic-responsive .village-comic-sheet{display:none}
  .village-comic-mobile-panels{display:grid;gap:12px}
  /* Each crop uses its inspected source bounds, excluding the sheet title. */
  .village-comic-panel{display:block;position:relative;overflow:hidden;aspect-ratio:var(--crop-aspect);border-radius:12px}
  .village-comic-panel img{position:absolute;left:var(--crop-left);top:var(--crop-top);width:var(--crop-width);max-width:none;height:auto;border-radius:0}
  .village-comic-crop-1{--crop-aspect:494/750;--crop-width:207.287449%;--crop-left:-2.834008%;--crop-top:-1.600000%}
  .village-comic-crop-2{--crop-aspect:493/750;--crop-width:207.707911%;--crop-left:-105.273834%;--crop-top:-1.600000%}
  .village-comic-crop-3{--crop-aspect:494/749;--crop-width:207.287449%;--crop-left:-2.834008%;--crop-top:-103.204272%}
  .village-comic-crop-4{--crop-aspect:493/749;--crop-width:207.707911%;--crop-left:-105.273834%;--crop-top:-103.204272%}
  .village-comic-crop-5{--crop-aspect:489/675;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-13.037037%}
  .village-comic-crop-6{--crop-aspect:489/675;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-13.037037%}
  .village-comic-crop-7{--crop-aspect:489/727;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-106.464924%}
  .village-comic-crop-8{--crop-aspect:489/727;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-106.464924%}
  .village-comic-crop-9{--crop-aspect:489/637;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-23.547881%}
  .village-comic-crop-10{--crop-aspect:489/637;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-23.547881%}
  .village-comic-crop-11{--crop-aspect:489/609;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-131.855501%}
  .village-comic-crop-12{--crop-aspect:489/609;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-131.855501%}
  .village-comic-crop-13{--crop-aspect:647/92;--crop-width:158.268934%;--crop-left:-29.057187%;--crop-top:-1534.782609%}
  .village-comic-crop-14{--crop-aspect:489/676;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-12.869822%}
  .village-comic-crop-15{--crop-aspect:489/676;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-12.869822%}
  .village-comic-crop-16{--crop-aspect:489/728;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-106.181319%}
  .village-comic-crop-17{--crop-aspect:489/728;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-106.181319%}
  .village-comic-crop-18{--crop-aspect:489/675;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-13.037037%}
  .village-comic-crop-19{--crop-aspect:489/675;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-13.037037%}
  .village-comic-crop-20{--crop-aspect:489/727;--crop-width:209.406953%;--crop-left:-3.271984%;--crop-top:-106.464924%}
  .village-comic-crop-21{--crop-aspect:489/727;--crop-width:209.406953%;--crop-left:-106.134969%;--crop-top:-106.464924%}
}
.village-comic-art figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 14px 0; color: var(--ink-2); font: 12px/1.8 var(--sans); }
.village-comic-art figcaption a { text-decoration: underline; text-underline-offset: 4px; }
.village-comic-transcript { margin-top: 16px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 14px/1.9 var(--sans); }
.village-comic-transcript summary { cursor: pointer; }
.village-comic-transcript ol { padding-left: 24px; color: var(--ink-2); }
.village-comic-transcript-plain ol{list-style:none;padding-left:0}
.village-comic-transcript li + li { margin-top: 14px; }
@media (max-width: 600px) { .village-comic { margin-top: 28px; } .village-comic-heading h2 { font-size: 26px; } }

/* ── 시담 마을 강조 · 모바일 하단 탭 ── */
.nav .nav-village { opacity: 1; padding: 6px 14px; margin-inline: -4px; border: 1px solid color-mix(in srgb, var(--seal) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--seal) 10%, transparent); letter-spacing: .08em; }
.nav .nav-village::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--seal); vertical-align: 2px; }
.nav .nav-village:hover, .nav .nav-village[aria-current] { background: color-mix(in srgb, var(--seal) 20%, transparent); border-color: var(--seal); }
.tabbar { display: none; }
@media (max-width: 700px) {
  :root { --tab-h: 58px; }
  .top .nav { display: none; }
  .top { grid-template-columns: 1fr auto; }
  .tabbar { position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--sans); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tab-h); padding: 6px 2px; font-size: max(.7rem, var(--mobile-text-min, 0px)); opacity: .62; letter-spacing: 0; }
  .tabbar a[aria-current] { opacity: 1; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  body:not(:has(#feed)) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
  body:has(#feed) .actions { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
  body:has(#feed) .poem { padding-bottom: calc(var(--tab-h) + 52px); }
  .toast { bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom)); }
  .village-page { padding-bottom: 24px; }
}

/* ── 처음 방문 안내 카드 (읽기를 막지 않음) ── */
.welcome { position: fixed; z-index: 25; left: clamp(14px, 3vw, 40px); bottom: clamp(18px, 4vh, 40px); width: min(360px, calc(100vw - 28px)); max-height: calc(100dvh - var(--header-h) - 40px); overflow: auto; padding: 22px 22px 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 40px #0003; font-family: var(--sans); }
.welcome[hidden] { display: none; }
.welcome h2 { margin: 4px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; }
.welcome-sub { margin: 0 0 14px; color: var(--ink-2); font-size: max(.86rem, var(--mobile-text-min, 0px)); line-height: 1.75; }
.welcome-sub strong { color: var(--seal); font-weight: 700; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.welcome-actions .line-btn { padding: 11px 16px; font-size: max(.84rem, var(--mobile-text-min, 0px)); letter-spacing: .04em; }
.welcome-pick { margin-bottom: 14px; }
.welcome-pick .chip-grid { margin-bottom: 14px; }
.welcome-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; opacity: .6; }
.welcome-close:hover { opacity: 1; }
@media (max-width: 700px) {
  .welcome { left: 10px; right: 10px; width: auto; bottom: calc(var(--tab-h, 58px) + 10px + env(safe-area-inset-bottom)); }
}

/* ── 신고 대화상자 ── */
.report-dialog .sheet-sub { margin-bottom: 14px; }
.report-reason { display: flex !important; align-items: flex-start; gap: 4px; padding: 12px 14px !important; margin-bottom: 8px; border: 1px solid var(--line); cursor: pointer; }
.report-reason:has(input:checked) { border-color: var(--seal); background: color-mix(in srgb, var(--seal) 8%, transparent); }
.report-reason input { margin-top: 4px; flex: none; }
.report-reason span { display: flex; flex-direction: column; gap: 2px; }
.report-reason small { color: var(--ink-2); font-size: max(.78rem, var(--mobile-text-min, 0px)); line-height: 1.5; }
.report-dialog .error { min-height: 1.2em; margin: 8px 0 0; color: var(--seal); font-family: var(--sans); font-size: .85rem; }
.report-dialog [hidden] { display: none; }

/* The surrounding pages are different rooms in the same quiet evening. */
:root[data-theme="dark"][data-scene="village"] { --paper:#171e19; --ink:#e6eddf; --ink-2:#b0beac; --mute:#94a28f; --line:#344237; --seal:#cba783; --village-surface:#212d23; --village-wash:#29382c; }
:root[data-theme="dark"][data-scene="write"] { --paper:#211c18; --ink:#f0e5d5; --ink-2:#c3b5a2; --mute:#a99a88; --line:#42372d; --seal:#d4a47e; }
:root[data-theme="dark"][data-scene="best"] { --paper:#181d29; --ink:#e5e9f3; --ink-2:#b2bacc; --mute:#959fb5; --line:#343d53; --seal:#cbb48e; }
:root[data-theme="dark"][data-scene="channel"] { --paper:#211b25; --ink:#eee4ef; --ink-2:#bfb0c4; --mute:#a594ae; --line:#413349; --seal:#daa6b4; }
body:not(:has(.feed)) .top { background:color-mix(in srgb,var(--paper) 94%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
body:has(.feed) .tabbar { color:inherit; }
body[data-tone="dark"] .tabbar { color:#f1ece1; }
body[data-tone="light"] .tabbar { color:#1d1c1a; }
.poem-meta .poem-title { font-size:1.05rem; font-weight:400; }
.poem-meta { gap:14px; }
@media (max-width:700px) {
  .header-more > summary { width:34px; height:38px; }
  .header-login { padding:7px 10px; }
  .nav { gap:12px; }
  .poem-meta .poem-title { font-size:.9rem; }
}
@media (max-width:370px) {
  .top { padding-inline:10px; column-gap:6px; }
  .nav { gap:8px; font-size:.75rem; }
  .header-login { padding:7px 8px; font-size:.75rem; }
}

.sort-seg { display: flex; gap: 6px; flex: none; }

/* Keep the reading filters on one line on small phones. */
@media (max-width:700px) {
  #chips:has(.sort-seg) { gap:6px; }
  .sort-seg { display:flex; align-items:center; gap:3px; flex:none; }
  .sort-seg .chip { padding:7px 9px; letter-spacing:0; white-space:nowrap; }
  #chips:has(.sort-seg) .chip-divider { margin-inline:2px; }
  #chips:has(.sort-seg) .filter-toggle { padding-inline:10px; gap:8px; letter-spacing:0; white-space:nowrap; }
}

/* 시 쓰기·내 채널: PC는 헤더에 바로, 모바일은 하단 탭이 맡는다 */
.header-quick { font-family: var(--sans); font-size: max(.86rem, var(--mobile-text-min, 0px)); letter-spacing: .1em; white-space: nowrap; padding: 6px 12px; opacity: .68; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.header-quick:hover, .header-quick[aria-current] { opacity: 1; border-color: currentColor; }
@media (max-width: 700px) { .header-quick { display: none; } }


/* Shared navigation and a distinct title area for reading. */
.top { column-gap:28px; }
.header-end { gap:10px; }
.header-more > summary { width:44px; height:44px; font-size:26px; }
.nav .nav-village { margin:0; padding:6px 0; border:0; border-bottom:1px solid transparent; border-radius:0; background:none; opacity:.68; letter-spacing:.12em; }
.nav .nav-village::before { display:none; }
.nav .nav-village:hover, .nav .nav-village[aria-current] { opacity:1; background:none; border-color:currentColor; }
.chips:not(.static-chips) { top:calc(var(--header-h) + 8px); align-items:center; gap:12px; padding-block:0; }
.sort-seg { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid color-mix(in srgb,currentColor 22%,transparent); border-radius:999px; background:color-mix(in srgb,currentColor 4%,transparent); }
.sort-seg .chip { min-height:32px; padding:7px 16px; border:0; letter-spacing:0; font-size:.82rem; line-height:1.2; white-space:nowrap; }
.sort-seg .chip[aria-current="true"] { background:color-mix(in srgb,currentColor 14%,transparent); }
#chips .filter-toggle { min-height:40px; padding:10px 16px; font-size:.82rem; letter-spacing:0; white-space:nowrap; }
#chips .chip-divider { margin:0 3px; height:20px; opacity:.18; }
.poem-meta { top:calc(var(--header-h) + 74px); left:28px; right:28px; flex-wrap:wrap; align-items:center; gap:8px 12px; font-family:var(--sans); letter-spacing:0; line-height:1.5; }
.poem-meta .poem-title { text-align:center; flex-basis:100%; font-family:var(--serif); font-size:1.2rem; line-height:1.6; letter-spacing:.12em; overflow-wrap:anywhere; }
.poem-meta .genre { border:0; padding:0; font-size:.75rem; letter-spacing:.04em; }
.poem-meta .origin-tag { font-size:.7rem; padding:2px 7px; border-color:color-mix(in srgb,currentColor 30%,transparent); }
.poem { padding-top:calc(var(--header-h) + 150px); }
@media (max-width:700px) {
  :root { --header-h:56px; --tab-h:64px; }
  .top { padding-inline:18px; column-gap:12px; }
  .header-end { gap:6px; }
  .header-login { padding:7px 12px; font-size:.82rem; }
  #chips:has(.sort-seg), #chips:has(.filter-picker) { gap:8px; padding-inline:16px; }
  .sort-seg .chip { padding:7px 10px; font-size:.78rem; }
  #chips .filter-toggle { padding:10px 12px; gap:8px; font-size:.78rem; }
  #chips .chip-divider { display:none; }
  .poem-meta { top:calc(var(--header-h) + 72px); left:20px; right:20px; gap:6px 10px; }
  .poem-meta .poem-title { font-size:1.08rem; letter-spacing:.08em; }
  .poem-meta .genre { font-size:.78rem; }
  .poem { padding-top:calc(var(--header-h) + 136px); }
  .tabbar { background:color-mix(in srgb,var(--reading-surface,var(--paper)) 96%,transparent); }
  .tabbar a, .tabbar .tab-village { opacity:.65; color:inherit; font-weight:400; gap:5px; font-size:.75rem; }
  .tabbar a[aria-current] { opacity:1; font-weight:600; }
  .tabbar a[aria-current] svg { stroke-width:1.8; }
  .tabbar a[aria-current] span { border:0; }
  .tabbar a[aria-current]::before { content:""; position:absolute; top:0; width:24px; height:2px; border-radius:0 0 2px 2px; background:currentColor; }
  .tabbar .tab-village svg { stroke-width:1.5; }
  .header-menu { width:min(280px,calc(100vw - 36px)); }
  .menu-theme { padding:12px; font-size:.875rem; }
  .menu-theme select { max-width:150px; min-height:42px; }
}
@media (max-width:350px) {
  #chips:has(.sort-seg), #chips:has(.filter-picker) { gap:5px; padding-inline:10px; }
  .sort-seg .chip { padding-inline:8px; }
  #chips .filter-toggle { padding-inline:9px; }
}

@media (min-width:701px) { .top { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } }


/* Feed categories live with the other reading settings in the overflow menu. */
.menu-category { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; font:.82rem var(--sans); color:var(--ink-2); }
.menu-category select { min-width:0; width:145px; min-height:40px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font:inherit; }
.header-menu { width:280px; }
@media (max-width:700px) {
  .tabbar { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .menu-category { padding:12px; font-size:.875rem; }
  .header-menu { width:min(280px,calc(100vw - 36px)); }
}


/* The author sits above the reactions on the left, with a direct channel link. */
.actions { --act-r:clamp(14px,3vw,40px); right:var(--act-r); left:auto; }
/* The author's profile stays at the left edge while the reactions sit on the right. */
.actions .poem-profile { position:absolute; bottom:0; right:calc(100vw - var(--act-r) - clamp(14px,3vw,40px) - 60px); left:auto; width:60px; }
.poem-profile { display:flex; flex-direction:column; align-items:center; gap:5px; max-width:60px; text-align:center; font-family:var(--sans); }
.poem-profile .poem-profile-face { width:44px; height:44px; border-radius:50%; background:color-mix(in srgb,currentColor 9%,transparent); border-color:color-mix(in srgb,currentColor 28%,transparent); }
.poem-profile-name { max-width:60px; font-size:.75rem; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poem-profile-ai { font-size:.6rem; opacity:.65; }
.poem-profile:hover .poem-profile-face { border-color:currentColor; }
.poem-menu { right:50px; left:auto; }
@media (hover:hover) and (min-width:900px) { .actions { --act-r:clamp(80px,9vw,130px); } }
@media (max-width:700px) {
  .actions { left:auto; right:12px; gap:10px; }
  .actions .poem-profile { right:auto; width:auto; left:calc(64px - 100vw); max-width:44px; }
  .poem-profile-name { max-width:44px; font-size:.7rem; }
  .poem-profile .poem-profile-face { width:40px; height:40px; }
  .poem { padding-inline:68px; }
  .poem-menu { left:auto; right:48px; }
  .sort-seg .chip { padding-inline:12px; }
}
@media (max-width:350px) { .sort-seg .chip { padding-inline:10px; } }


.member-empty-inner { max-width:30rem; }
.member-empty .empty-kicker { margin:0 0 12px; font:.75rem var(--sans); letter-spacing:.14em; opacity:.6; }
.member-empty h2 { font-weight:400; font-size:clamp(1.45rem,4vw,1.9rem); margin:0 0 18px; letter-spacing:.04em; }
.member-empty .empty-message { font:.9rem/1.85 var(--sans); white-space:pre-line; opacity:.75; margin:0 0 30px; }
.empty-recommendations { display:grid; gap:12px; text-align:left; }
.member-empty .empty-recommendation { display:grid; gap:7px; margin:0; padding:18px 20px; border:1px solid color-mix(in srgb,currentColor 22%,transparent); border-radius:14px; background:color-mix(in srgb,currentColor 4%,transparent); font-family:var(--sans); letter-spacing:0; }
.empty-recommendation strong { font-size:.95rem; font-weight:500; }
.empty-recommendation span { font-size:.8rem; line-height:1.6; opacity:.7; }
.empty-recommendation:hover { background:color-mix(in srgb,currentColor 9%,transparent); }
.member-empty .empty-write { font:.8rem var(--sans); margin-top:26px; letter-spacing:0; opacity:.7; }
body:has(.member-empty.active) .side { display:none; }
@media(max-width:700px) {
  .poem.member-empty { padding-inline:24px; }
  .member-empty .empty-message { font-size:.85rem; }
  .member-empty .empty-recommendation { padding:16px; }
}
@media(max-height:650px) {
  .poem.member-empty { padding-top:calc(var(--header-h) + 64px); }
  .member-empty .empty-message { margin-bottom:16px; }
  .member-empty .empty-recommendation { padding:12px 16px; }
  .member-empty .empty-write { margin-top:16px; }
}


@media(max-width:700px) {
  #chips:has(.sort-seg) { justify-content:center; }
  .actions > .act, .actions > .poem-more > summary { opacity:.76; }
  .actions > .act .act-text, .actions > .poem-more > summary .act-text { opacity:1; }
}


.poem-ai-badge { display:inline-block; padding:2px 5px; border:1px solid color-mix(in srgb,currentColor 38%,transparent); border-radius:4px; font:10px/1.2 var(--sans); letter-spacing:.02em; vertical-align:middle; white-space:nowrap; }
.poem-author .poem-ai-badge { margin-left:5px; }


.menu-theme.theme-tabs { display:block; min-width:0; margin:8px 0 0; padding:16px 12px 12px; border:0; border-top:1px solid var(--line); }
.theme-tabs legend { float:left; width:100%; margin-bottom:12px; padding:0; font:inherit; }
.theme-options { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--ink) 3%,transparent); }
.theme-choice { min-height:38px; border-radius:7px; font:.8rem var(--sans); color:var(--ink-2); }
.theme-choice[aria-pressed="true"] { background:color-mix(in srgb,var(--ink) 12%,transparent); color:var(--ink); }
.theme-choice:hover { color:var(--ink); }

/* Writing desk: keep the words spacious, the atmosphere choices compact. */
.page.write { max-width: 1120px; padding-top: calc(var(--header-h) + 40px); }
.write-heading .lead { margin-bottom: 32px; }
.write-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.write-editor, .write-styling { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--ink) 3%, var(--paper)); }
.write-editor .field:last-child, .write-styling .preview { margin-bottom: 0; }
.write-title input { font-size: 1.4rem; }
.write-body textarea { min-height: 340px; padding: 18px 0; border: 0; border-top: 1px solid var(--line); line-height: 2.1; }
.write-body textarea:focus { border-color: var(--ink-2); }
.write .member-write-note { margin: 0 0 28px; font-size: .8rem; }
.write-styling h2 { margin: 0 0 8px; font-weight: 400; font-size: 1.1rem; }
.write-hint { margin: 0 0 20px; color: var(--ink-2); font: .8rem/1.7 var(--sans); }
.write-styling > .write-hint { margin-bottom: 28px; }
.write-optional { color: var(--mute); letter-spacing: 0; margin-left: 6px; }
.write .chip-grid { gap: 7px; }
.write .chip { padding: 8px 12px; font: .8rem/1.5 var(--sans); letter-spacing: 0; }
.write .swatches { gap: 14px; }
.write .swatch { width: 34px; height: 34px; }
.write .sound-info { padding: 12px; font-size: .78rem; }
.write .preview { min-height: 260px; border-radius: 12px; overflow: hidden; }
.write .preview-inner { max-width: 100%; overflow-wrap: anywhere; }
.write .preview .poem-title { font-size: 1.3rem; }
.write .preview .poem-body { font-size: 1rem; }
.write .credit-box { padding-top: 18px; border-top: 1px solid var(--line); }
.write-publish { max-width: 560px; margin: 28px auto 0; }
.write-publish .wide { border-radius: 12px; }
@media (max-width: 760px) {
  .page.write { padding: calc(var(--header-h) + 28px) 18px 120px; }
  .write-heading .lead { font-size: .9rem; margin-bottom: 24px; }
  .write-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .write-editor, .write-styling { padding: 22px 18px; border-radius: 16px; }
  .write-body textarea { min-height: 300px; font-size: 1.05rem; }
  .write .draft-row { gap: 12px; }
}

/* Floating glass navigation, with a separate capsule for the bundled tools. */
@media (max-width: 700px) {
  :root { --tab-h: 76px; }
  .tabbar {
    --glass-surface: var(--reading-surface, var(--paper));
    --glass-fill: color-mix(in srgb, var(--glass-surface) 72%, transparent);
    --glass-edge: color-mix(in srgb, currentColor 18%, transparent);
    inset: auto auto calc(12px + env(safe-area-inset-bottom)) 50%;
    transform: translateX(-50%); width: min(390px, calc(100% - 32px));
    display: flex; align-items: stretch; gap: 12px; padding: 0;
    background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tabbar-primary, .tabbar-bundle > summary, .tabbar-bundle-panel {
    background: linear-gradient(145deg, #ffffff14, #ffffff02 55%), var(--glass-fill);
    border: 1px solid var(--glass-edge);
    box-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff08, 0 8px 28px #00000024;
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  }
  .tabbar-primary { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 32px; }
  .tabbar-primary > a { position: relative; min-height: 54px; border-radius: 26px; padding: 5px 12px; opacity: .8; }
  .tabbar-primary > a[aria-current] { background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 1px 0 #ffffff18; }
  .tabbar a[aria-current]::before { content: none; }
  .tabbar .tab-village { color: inherit; }
  .tabbar .tab-village svg { background: none; width: 22px; height: 22px; padding: 0; border-radius: 0; }
  .tabbar .tab-village[aria-current] svg { background: none; }
  .tabbar-bundle { position: relative; flex: 0 0 66px; }
  .tabbar-bundle > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; border-radius: 32px; cursor: pointer; list-style: none; font-size: .75rem; }
  .tabbar-bundle > summary::-webkit-details-marker { display: none; }
  .tabbar-bundle[open] > summary, .tabbar-bundle[data-current] > summary { background: linear-gradient(145deg, #ffffff20, #ffffff04), color-mix(in srgb, var(--glass-surface) 85%, transparent); border-color: color-mix(in srgb, currentColor 35%, transparent); }
  .tabbar-bundle[open] > summary svg { transform: rotate(90deg); }
  .tabbar-bundle > summary svg { transition: transform .2s ease; }
  .tabbar-bundle-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(240px, calc(100vw - 32px)); padding: 8px; border-radius: 24px; }
  .tabbar-bundle-panel > a { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 12px 14px; font-size: .9rem; opacity: 1; border-radius: 16px; }
  .tabbar-bundle-panel > a:hover, .tabbar-bundle-panel > a[aria-current] { background: color-mix(in srgb, currentColor 10%, transparent); }
  .tabbar-arrow { margin-left: auto; opacity: .45; }
}
@media (prefers-reduced-motion: reduce) { .tabbar-bundle > summary svg { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
  .tabbar-primary, .tabbar-bundle > summary, .tabbar-bundle-panel { --glass-fill: var(--glass-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.list-picker { display: grid; gap: 8px; }
.list-option { text-align: left; padding: 12px 14px; border: 1px solid var(--line); font-family: var(--sans); }
.list-option[aria-pressed="true"] { border-color: var(--seal); color: var(--seal); }
.list-new { display: flex; gap: 8px; margin-top: 8px; }
.list-new input { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; }
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.list-chip { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: .82rem; }
.list-chip[aria-pressed="true"] { border-color: var(--seal); color: var(--seal); }
.list-delete { margin-left: 6px; color: var(--mute); }

/* A quiet bookshop and a personal poetry shelf. */
:root[data-theme="dark"][data-scene="library"] { --paper:#1b2028; --ink:#eee9df; --ink-2:#b7b9c2; --line:#39414c; --mute:#a0a7b3; --seal:#e0b27c; }
:root[data-theme="light"][data-scene="library"] { --paper:#f5f2ec; --ink:#292d35; --ink-2:#69717b; --line:#dadad6; --seal:#8a603c; }
.library-page { max-width:1060px; margin:auto; padding:calc(var(--header-h) + 56px) 28px 130px; }
.library-heading .eyebrow { color:var(--seal); font-size:.7rem; letter-spacing:.3em; }
.library-heading h1 { margin:18px 0; font-size:clamp(2rem,5vw,3rem); font-weight:400; letter-spacing:.06em; }
.library-heading > p:last-child { color:var(--ink-2); line-height:1.9; margin-bottom:38px; font-size:.95rem; }
.library-segments { display:flex; gap:6px; padding:5px; width:fit-content; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:999px; margin-bottom:28px; background:color-mix(in srgb,var(--ink) 3%,transparent); font-family:var(--sans); }
.library-segments button, .library-segments a { padding:10px 18px; border-radius:999px; font-size:.84rem; color:var(--ink-2); white-space:nowrap; }
.library-segments button[aria-pressed="true"], .library-segments a[aria-current] { color:var(--paper); background:var(--ink); }
.library-categories { display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 30px; font-family:var(--sans); }
.library-categories button { padding:9px 15px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); font-size:.8rem; }
.library-categories button[aria-pressed="true"] { border-color:var(--seal); background:color-mix(in srgb,var(--seal) 12%,var(--paper)); color:var(--seal); }
.library-categories button:focus-visible { outline:2px solid var(--seal); outline-offset:2px; }
.library-book-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px; }
.library-book-card { display:block; min-width:0; }
.book-cover { position:relative; isolation:isolate; aspect-ratio:3/4; min-width:0; padding:30px; border-radius:4px 16px 16px 4px; overflow:hidden; color:#eee2bf; box-shadow:inset 5px 0 8px #0004, inset 10px 0 0 #ffffff06, 0 18px 40px #0003; transition:transform .25s,box-shadow .25s; }
.library-book-card:hover .book-cover { transform:translateY(-4px); box-shadow:inset 5px 0 8px #0004,0 24px 48px #0004; }
.book-cover::after { content:""; position:absolute; inset:14px 14px 14px 20px; border:1px solid #efddb82b; pointer-events:none; }
.book-cover-stars { background:radial-gradient(ellipse at 72% 38%,#416077 0,transparent 55%),linear-gradient(145deg,#17273b,#111b2b 70%,#2c3a4c); }
.book-cover-flowers { background:radial-gradient(ellipse at 70% 30%,#b78588 0,transparent 65%),linear-gradient(145deg,#71465b,#4a3548); color:#f7e4ce; }
.book-edition { position:relative; z-index:1; font: .6rem var(--sans); letter-spacing:.22em; opacity:.7; }
.book-cover h2 { position:relative; z-index:1; font-weight:400; font-size:clamp(1.6rem,4vw,2.7rem); line-height:1.5; letter-spacing:.15em; margin:32px 0 16px; max-width:7em; }
.book-cover-author { position:relative; z-index:1; font-size:.9rem; letter-spacing:.25em; }
.book-cover-imprint { position:absolute; bottom:30px; left:30px; font-size:.7rem; letter-spacing:.15em; opacity:.75; }
.book-cover-art { position:absolute; inset:0; z-index:0; pointer-events:none; }
.book-cover-stars .book-cover-art { background-image:radial-gradient(circle at 22% 57%,#f4dfa6 0 1px,transparent 2px),radial-gradient(circle at 65% 24%,#fff7d0 0 1px,transparent 2px),radial-gradient(circle at 80% 62%,#f4dfa6 0 1px,transparent 2px),radial-gradient(circle at 45% 78%,#f4dfa6 0 1px,transparent 2px),radial-gradient(circle at 61% 68%,#f4dfa6 0 2px,transparent 3px); }
.book-cover-stars .book-cover-art::before { content:""; position:absolute; width:24%; aspect-ratio:1; border-radius:50%; top:43%; left:53%; box-shadow:12px 5px 0 -2px #e3d3a37d; transform:rotate(-20deg); }
.book-cover-stars .book-cover-art::after { content:""; position:absolute; bottom:-6%; left:-20%; width:150%; height:30%; background:#121c2d; border-radius:50%; transform:rotate(-12deg); }
.book-cover-flowers .book-cover-art::before { content:""; position:absolute; width:32%; aspect-ratio:1; top:49%; left:52%; border-radius:50% 10% 50% 15%; background:linear-gradient(140deg,#e9b5b14f,#edc9b624); transform:rotate(-30deg); box-shadow:-35px 18px 0 #e7b9b929, -14px 48px 0 #d791a52b, 35px 40px 0 #edc9b624; }
.book-cover-flowers .book-cover-art::after { content:""; position:absolute; height:30%; width:1px; background:#e9d2b76b; top:62%; left:61%; transform:rotate(20deg); }
.book-cover-azalea { background:radial-gradient(ellipse at 70% 30%,#d98aa6 0,transparent 62%),linear-gradient(145deg,#7a3552,#3f2a3d); color:#f7e4ce; }
.book-cover-favorites { background:radial-gradient(ellipse at 72% 28%,#b39068 0,transparent 58%),linear-gradient(145deg,#514232,#262a32); color:#f6e9cc; }
.book-cover-favorites .book-cover-art::before { content:""; position:absolute; width:66%; height:1px; top:67%; left:20%; background:#f6e9cc80; transform:rotate(-14deg); box-shadow:0 15px 0 #f6e9cc55,0 30px 0 #f6e9cc33; }
.book-cover-ink { background:radial-gradient(ellipse at 70% 30%,#6a6a70 0,transparent 62%),linear-gradient(145deg,#2b2b2e,#151517); color:#e8e2d0; }
.book-cover-sea { background:radial-gradient(ellipse at 70% 30%,#5b9aa6 0,transparent 62%),linear-gradient(145deg,#123a4a,#0b2230); color:#e3efe8; }
.book-cover-peony { background:radial-gradient(ellipse at 70% 30%,#c4636e 0,transparent 62%),linear-gradient(145deg,#7a2f3d,#3b1f2b); color:#f7e4ce; }
.book-cover-grape { background:radial-gradient(ellipse at 70% 30%,#7d6b9e 0,transparent 62%),linear-gradient(145deg,#3b2f5c,#1d1a33); color:#e6dff2; }
.book-cover-lotus { background:radial-gradient(ellipse at 70% 30%,#c9b26a 0,transparent 62%),linear-gradient(145deg,#3f5a4a,#22352b); color:#f1ead0; }
.book-cover-ember { background:radial-gradient(ellipse at 70% 30%,#d88a3c 0,transparent 62%),linear-gradient(145deg,#5b2a16,#2a140c); color:#f6e2c0; }
.book-cover-garden { background:radial-gradient(ellipse at 70% 30%,#8fae7c 0,transparent 62%),linear-gradient(145deg,#3a5240,#1f2d25); color:#eef0d8; }
.book-cover-quill { background:radial-gradient(ellipse at 70% 30%,#8a4a4a 0,transparent 62%),linear-gradient(145deg,#3a2430,#1b1218); color:#efe0cf; }
.library-book-meta { padding:22px 3px; }
.library-book-byline { color:var(--seal); font:.8rem var(--sans); }
.library-book-meta h3 { font-size:1.35rem; font-weight:400; margin:10px 0; }
.library-book-meta > p:not(.library-book-byline) { color:var(--ink-2); font-size:.88rem; line-height:1.7; }
.library-price { display:inline-block; border:1px solid var(--line); padding:7px 12px; border-radius:999px; color:var(--ink-2); font:.76rem var(--sans); }
.library-footnote { margin-top:28px; color:var(--mute); font:.78rem/1.8 var(--sans); }
.library-resume { display:flex; align-items:center; gap:20px; padding:22px; margin-bottom:32px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--seal) 7%,var(--paper)); }
.library-resume-icon { font-size:2rem; color:var(--seal); }
.library-resume small, .library-resume strong, .library-resume div > span { display:block; }
.library-resume small { font:.75rem var(--sans); color:var(--seal); }
.library-resume strong { font-size:1.25rem; font-weight:400; margin:8px 0; }
.library-resume div > span { font:.78rem var(--sans); color:var(--ink-2); }
.library-empty { text-align:center; padding:55px 20px; border:1px dashed var(--line); border-radius:20px; }
.library-empty > span { color:var(--seal); font-size:2rem; }
.library-empty h2 { font-weight:400; font-size:1.35rem; }
.library-empty p, .library-hint { color:var(--ink-2); font:.8rem/1.8 var(--sans); }
.library-book-progress { font:.78rem var(--sans); color:var(--seal); }
.book-progress-track { height:3px; border-radius:999px; background:color-mix(in srgb,var(--ink) 15%,transparent); overflow:hidden; margin-top:10px; }
.book-progress-track > span { display:block; height:100%; background:var(--seal); border-radius:inherit; transition:width .3s; }
.library-back { display:inline-block; color:var(--ink-2); margin-bottom:30px; font:.85rem var(--sans); }
.library-detail { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:center; gap:50px; }
.library-detail-info h1 { font-weight:400; font-size:2.5rem; line-height:1.5; }
.library-detail-author { color:var(--seal); }
.library-detail-description { color:var(--ink-2); line-height:2; }
.library-benefits { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; font:.75rem var(--sans); color:var(--ink-2); }
.library-benefits span { border:1px solid var(--line); border-radius:8px; padding:8px; }
.library-cta { display:block; width:100%; text-align:center; padding:16px 20px; background:var(--ink); color:var(--paper); border-radius:14px; font:.88rem var(--sans); }
.library-cta:disabled { opacity:.5; cursor:wait; }
.library-book-extras { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:56px; }
.library-book-extras h2 { font-weight:400; font-size:1.3rem; }
.library-toc ol { padding-left:24px; color:var(--ink-2); }
.library-toc li { padding:10px 6px; border-bottom:1px solid var(--line); font-size:.9rem; }
.library-excerpt { padding:28px; border:1px solid var(--line); border-radius:20px; }
.library-excerpt > p:last-child { white-space:pre-line; font-size:.96rem; line-height:2.1; }
.library-excerpt-author { color:var(--seal); font:.78rem var(--sans); }
@media(max-width:700px) {
 .tabbar-primary { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .tabbar-primary > a { padding-inline:4px; font-size:.7rem; }
 .tabbar .tab-village { font-size:.7rem; }
 .library-page { padding:calc(var(--header-h) + 32px) 22px 120px; }
 .library-book-grid { gap:20px; }
 .book-cover { padding:18px 15px; border-radius:3px 12px 12px 3px; }
 .book-cover::after { inset:9px 8px 9px 12px; }
 .book-edition { font-size:.42rem; letter-spacing:.1em; }
 .book-cover h2 { font-size:1.25rem; letter-spacing:.08em; margin:18px 0 10px; }
 .book-cover-author { font-size:.65rem; }
 .book-cover-imprint { bottom:16px; left:16px; font-size:.48rem; letter-spacing:.03em; }
 .library-book-meta { padding-top:14px; }
 .library-book-meta h3 { font-size:1.1rem; }
 .library-book-byline { font-size:.72rem; }
 .library-book-meta > p:not(.library-book-byline) { font-size:.76rem; }
 .library-price { font-size:.69rem; padding:6px 8px; }
 .library-detail { grid-template-columns:1fr; gap:28px; }
 .library-detail > .book-cover { width:68%; margin:0 auto; padding:24px; }
 .library-detail .book-cover h2 { font-size:1.8rem; margin-top:32px; }
 .library-detail-info h1 { font-size:1.9rem; }
 .library-book-extras { grid-template-columns:1fr; gap:24px; margin-top:32px; }
}

/* Owned books read one poem at a time, apart from the public feed's reactions. */
body.book-reading-open { overflow:hidden; }
body.book-reading-open > .top { display:none; }
.book-reading { height:100dvh; position:relative; }
.book-reading-head { position:absolute; z-index:3; top:18px; left:24px; right:24px; display:flex; align-items:center; gap:20px; font-family:var(--sans); }
.book-reading-head > a { font-size:1.5rem; padding:10px; }
.book-reading-head div { flex:1; min-width:0; }
.book-reading-head p { font-size:.9rem; margin:0 0 6px; }
.book-reading-head small { font-size:.75rem; color:var(--ink-2); }
.book-reading-head > button { border:1px solid var(--line); padding:10px 16px; border-radius:999px; font-size:.8rem; }
.book-pages { position:relative; height:100%; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; }
.book-pages::-webkit-scrollbar { display:none; }
.book-page { position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; }
.book-poem-scroll { height:100%; overflow-y:auto; padding:105px 80px 125px; scrollbar-width:thin; }
.book-poem { min-height:100%; max-width:620px; margin:auto; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.book-poem-number { font: .7rem var(--latin); letter-spacing:.3em; color:var(--seal); margin:0 0 26px; }
.book-poem h1 { font-weight:400; font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.6; margin:0 0 28px; letter-spacing:.08em; }
.book-poem-body { font-size:clamp(.98rem,2vw,1.15rem); line-height:2; width:100%; overflow-wrap:anywhere; }
.book-poem-body .ln { display:block; opacity:1; transform:none; animation:none; }
.book-poem-body .gap { height:1em; }
.book-poem-author { font-size:.88rem; color:var(--ink-2); margin-top:30px; }
.book-actions { position:absolute; z-index:2; right:24px; bottom:150px; display:flex; flex-direction:column; gap:16px; font-family:var(--sans); }
.book-action { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:40px; opacity:.76; }
.book-action-icon { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:1.5rem; background:color-mix(in srgb,var(--paper) 60%,transparent); backdrop-filter:blur(12px); }
.book-action small { font-size:.7rem; }
.book-action[aria-pressed="true"] { color:var(--seal); opacity:1; }
.book-action:disabled { opacity:.35; }
.book-reading-progress { position:absolute; z-index:3; bottom:26px; left:50%; transform:translateX(-50%); width:min(400px,calc(100% - 40px)); display:flex; gap:20px; align-items:center; font-family:var(--sans); }
.book-reading-progress > div { flex:1; text-align:center; font-size:.78rem; }
.book-reading-progress small { display:block; font-size:.65rem; color:var(--mute); margin-top:10px; }
.book-reading-progress > button { border:1px solid var(--line); border-radius:50%; width:38px; height:38px; }
.book-reading-progress > button:disabled { opacity:.25; }
.library-dialog { width:min(520px,calc(100% - 28px)); max-height:80dvh; overflow-y:auto; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:0 30px 90px #0006; }
.library-dialog::backdrop { background:#10172199; backdrop-filter:blur(5px); }
.library-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.library-dialog-head h2 { font-size:1.3rem; font-weight:400; margin:0; }
.library-dialog-head button { padding:10px; }
.library-dialog textarea { display:block; width:100%; font: .95rem/1.8 var(--sans); resize:vertical; background:color-mix(in srgb,var(--ink) 3%,transparent); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
.library-dialog .library-segments { margin-bottom:20px; }
.library-dialog [role="status"] { font:.8rem/1.7 var(--sans); color:var(--seal); }
#contentsList { list-style:none; padding:0; margin:0; }
#contentsList button { display:flex; width:100%; text-align:left; gap:16px; padding:18px 6px; border-bottom:1px solid var(--line); font-size:.9rem; }
#contentsList button > span:first-child { color:var(--mute); font-family:var(--latin); }
#contentsList small { margin-left:auto; color:var(--seal); font:.7rem var(--sans); white-space:nowrap; }
#contentsList button[aria-current] { color:var(--seal); }
#bookCommentList { list-style:none; padding:0; }
#bookCommentList > li { padding:18px 0; border-bottom:1px solid var(--line); }
.book-comment-meta { display:flex; align-items:center; gap:14px; font:.8rem var(--sans); }
.book-comment-meta time { color:var(--mute); font-size:.7rem; }
#bookCommentList p { font:.9rem/1.8 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; }
.book-comment-delete { font:.75rem var(--sans); color:var(--mute); }
.library-reader-error { text-align:center; padding:160px 24px; }
@media(max-width:700px) {
 .book-reading-head { top:14px; left:12px; right:18px; gap:12px; }
 .book-poem-scroll { padding:96px 58px 168px 36px; }
 .book-poem h1 { font-size:1.3rem; }
 .book-poem-body { font-size:1rem; }
 .book-actions { right:12px; bottom:calc(var(--tab-h) + 88px + env(safe-area-inset-bottom)); }
 .book-action-icon { width:36px; height:36px; font-size:1.3rem; }
 .book-reading-progress { bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
 .library-dialog { padding:22px 18px; }
}
.book-cover h2, .library-book-meta h3, .library-detail-info h1 { word-break:keep-all; }
.book-action-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.book-action-icon svg.is-filled { fill:color-mix(in srgb,currentColor 30%,transparent); }
:root[data-book-cover="stars"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#6278970b,transparent 70%); }
:root[data-book-cover="flowers"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#c590a21a,transparent 70%); }
:root[data-book-cover="azalea"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#d98aa61a,transparent 70%); }
:root[data-book-cover="ink"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#6a6a701a,transparent 70%); }
:root[data-book-cover="sea"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#5b9aa61a,transparent 70%); }
:root[data-book-cover="peony"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#c4636e1a,transparent 70%); }
:root[data-book-cover="grape"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#7d6b9e1a,transparent 70%); }
:root[data-book-cover="lotus"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#c9b26a1a,transparent 70%); }
:root[data-book-cover="ember"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#d88a3c1a,transparent 70%); }
:root[data-book-cover="garden"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#8fae7c1a,transparent 70%); }
:root[data-book-cover="quill"] .book-reading { background:radial-gradient(ellipse at 50% 25%,#8a4a4a1a,transparent 70%); }
@media(prefers-reduced-motion:reduce) { .library-book-card .book-cover, .book-progress-track > span { transition:none; } }
.book-poem-body .ln { word-break:keep-all; }
@media(min-width:701px) {
 .library-book-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:center; }
 .library-book-card .book-cover { padding:24px; }
 .library-book-card .book-cover h2 { font-size:1.5rem; }
 .library-book-card .book-edition { font-size:.48rem; letter-spacing:.1em; }
 .library-book-card .book-cover-imprint { bottom:24px; left:24px; font-size:.55rem; }
}

/* Four destinations, with reading, writing and rankings inside the shared poetry space. */
body[data-section="plaza"] { --main-header-h:calc(64px + var(--safe-top)); --header-h:calc(64px + var(--safe-top)); }
.top { height:var(--main-header-h,64px); }
.top .main-nav { gap:clamp(20px,3vw,38px); letter-spacing:.04em; }
.main-nav .nav-village { padding:6px 0; margin:0; border:0; border-bottom:1px solid transparent; border-radius:0; background:none; color:inherit; opacity:.68; }
.main-nav .nav-village::before { content:none; }
.main-nav .nav-village:hover, .main-nav .nav-village[aria-current] { opacity:1; border-color:currentColor; background:none; }
.mobile-space-name { display:none; }
@media(max-width:700px) {
 body[data-section="plaza"] { --main-header-h:calc(56px + var(--safe-top)); --header-h:calc(56px + var(--safe-top)); }
 .top { height:var(--main-header-h,56px); grid-template-columns:1fr auto 1fr; gap:8px; }
 .top .logo { grid-column:1; }
 .top .main-nav { display:none; }
 .mobile-space-name { display:block; grid-column:2; font:.8rem var(--sans); letter-spacing:.08em; opacity:.72; }
 .top .header-end { grid-column:3; }
 .header-end { gap:5px; }
 .header-login { font-size:.72rem; }
 .space-tabbar .tabbar-channel { flex:0 0 66px; min-height:64px; padding:6px 2px; border-radius:32px; gap:5px; opacity:.8; background:linear-gradient(145deg,#ffffff14,#ffffff02 55%),var(--glass-fill); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #ffffff08,0 8px 28px #00000024; backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); }
 .space-tabbar .tabbar-channel[aria-current] { opacity:1; background:linear-gradient(145deg,#ffffff20,#ffffff04),color-mix(in srgb,var(--glass-surface) 85%,transparent); border-color:color-mix(in srgb,currentColor 35%,transparent); }
 .space-tabbar .tabbar-channel svg { width:22px; height:22px; }
}
@media(prefers-reduced-transparency:reduce) { .space-tabbar .tabbar-channel { background:var(--reading-surface,var(--paper)); backdrop-filter:none; -webkit-backdrop-filter:none; } }
.space-menu { display:grid; gap:14px; padding:0; margin:0; font:13px/1.5 var(--sans); }
.space-menu a { display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 12px; border:0; border-radius:10px; font:inherit; color:var(--ink); opacity:.8; }
.space-menu a:hover, .space-menu a[aria-current] { background:color-mix(in srgb,var(--village-green) 12%,var(--paper)); opacity:1; }
.space-menu a[aria-current] { color:var(--village-green); font-weight:700; }
.space-menu a:focus-visible { outline:2px solid var(--village-green); outline-offset:2px; }
.space-menu svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.plaza-menu-arrow { margin-left:auto; color:var(--mute); }
.space-menu section { display:grid; gap:2px; min-width:0; }
.space-menu section+section { padding-top:14px; border-top:1px solid var(--line); }
.space-menu h2 { margin:0 10px 6px; padding:0; font:700 11px/1.4 var(--sans); letter-spacing:.035em; color:var(--village-green); }
.space-menu .plaza-menu-arrow { display:none; }
.header-menu:has(.space-menu) { width:min(360px,calc(100vw - 32px)); max-height:min(80dvh,680px); padding:16px; border-radius:20px; box-shadow:0 16px 48px #0004; overflow-y:auto; }
.header-menu .space-menu { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; padding-bottom:16px; }
.header-menu .space-menu section { padding-top:10px; border-top:1px solid var(--line); }
.header-menu .space-menu h2 { margin:0 6px 6px; font-size:12px; }
.header-menu .space-menu a { gap:8px; min-height:44px; padding:8px 6px; }
.header-menu .space-menu a span { min-width:0; word-break:keep-all; }

/* Let the page canvas continue behind iPhone status UI; keep controls below it. */
:root { --safe-top:env(safe-area-inset-top,0px); --header-h:calc(64px + var(--safe-top)); --main-header-h:var(--header-h); }
html, body { background-color:var(--reading-surface,var(--paper)); }
.top { padding-top:var(--safe-top); }
@media(max-width:700px) {
 :root { --header-h:calc(56px + var(--safe-top)); }
 body[data-page] .top { background:var(--reading-surface,var(--paper)); backdrop-filter:none; -webkit-backdrop-filter:none; }
 .top { padding-left:max(18px,env(safe-area-inset-left,0px)); padding-right:max(18px,env(safe-area-inset-right,0px)); }
 .book-reading-head { top:calc(14px + var(--safe-top)); }
 .book-poem-scroll { padding-top:calc(96px + var(--safe-top)); }
}

.library-purchase-list { display:grid; gap:14px; }
.library-purchase { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:18px; padding:20px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--paper) 70%,transparent); font-family:var(--sans); }
.purchase-cover { display:grid; place-items:center; width:64px; height:86px; border-radius:3px 10px 10px 3px; color:#e7dfb9; background:linear-gradient(145deg,#193547,#0c1728); box-shadow:inset 4px 0 0 #ffffff14; font-family:var(--serif); font-size:1.5rem; }
.purchase-cover-flowers { background:linear-gradient(145deg,#624459,#302331); }
.purchase-cover-azalea { background:linear-gradient(145deg,#7a3552,#3f2a3d); color:#f7e4ce; }
.purchase-cover-ink { background:linear-gradient(145deg,#2b2b2e,#151517); color:#e8e2d0; }
.purchase-cover-sea { background:linear-gradient(145deg,#123a4a,#0b2230); color:#e3efe8; }
.purchase-cover-peony { background:linear-gradient(145deg,#7a2f3d,#3b1f2b); color:#f7e4ce; }
.purchase-cover-grape { background:linear-gradient(145deg,#3b2f5c,#1d1a33); color:#e6dff2; }
.purchase-cover-lotus { background:linear-gradient(145deg,#3f5a4a,#22352b); color:#f1ead0; }
.purchase-cover-ember { background:linear-gradient(145deg,#5b2a16,#2a140c); color:#f6e2c0; }
.purchase-cover-garden { background:linear-gradient(145deg,#3a5240,#1f2d25); color:#eef0d8; }
.purchase-cover-quill { background:linear-gradient(145deg,#3a2430,#1b1218); color:#efe0cf; }
.library-purchase h2 { font-size:1rem; margin:0 0 5px; word-break:keep-all; }
.library-purchase p { font-size:.8rem; color:var(--mute); margin:4px 0; }
.library-purchase small { color:var(--seal); font-size:.75rem; }
.purchase-read { padding:9px 12px; border:1px solid var(--line); border-radius:99px; font-size:.8rem; white-space:nowrap; }
@media(max-width:600px) { .library-purchase { padding:16px; gap:14px; grid-template-columns:54px minmax(0,1fr); } .purchase-cover { width:54px; height:76px; } .purchase-read { grid-column:2; justify-self:start; } }

/* The library is a reading room, separate from the poetry rankings. */
.library-page { max-width:1220px; }
.library-heading { max-width:740px; padding-bottom:18px; }
.library-heading h1 { font-size:clamp(2.3rem,5vw,4.1rem); letter-spacing:-.035em; }
.library-heading > p:last-child { font-size:1rem; }
.library-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.library-topline .library-segments { margin-bottom:28px; }
.library-history-link { padding:12px 2px; color:var(--ink-2); font:.8rem var(--sans); white-space:nowrap; }
.library-history-link:hover { color:var(--seal); }
.library-feature { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 230px; align-items:center; gap:55px; min-height:350px; padding:48px clamp(34px,6vw,78px); overflow:hidden; border-radius:26px; color:#f1e8d7; background:radial-gradient(ellipse at 82% 24%,#967a566b,transparent 46%),linear-gradient(125deg,#272c31,#3a3430 66%,#25292d); box-shadow:0 24px 54px #0002; }
.library-feature::before { content:""; position:absolute; inset:18px; border:1px solid #f6e9cc26; border-radius:17px; pointer-events:none; }
.library-feature::after { content:""; position:absolute; width:46%; height:42%; right:-8%; bottom:-27%; border:1px solid #e4cc9c27; border-radius:50%; transform:rotate(-18deg); pointer-events:none; }
.library-feature-copy { position:relative; z-index:1; }
.library-feature .eyebrow { color:#ddc198; letter-spacing:.19em; font:.7rem var(--sans); }
.library-feature h2 { max-width:10em; margin:18px 0; font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:400; line-height:1.45; word-break:keep-all; }
.library-feature-copy > p:not(.eyebrow) { max-width:35em; color:#e5d9c8; font:.9rem/1.9 var(--sans); }
.library-feature-link { display:inline-block; margin-top:27px; padding-bottom:8px; border-bottom:1px solid #d6b784; color:#f4d8a9; font:.9rem var(--sans); }
.library-feature .book-cover { width:100%; transform:rotate(4deg); box-shadow:inset 5px 0 8px #0004,0 24px 42px #0007; }
.library-feature:hover .book-cover { transform:rotate(1deg) translateY(-4px); }
.library-continue { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:30px; padding:24px 30px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--seal) 6%,var(--paper)); }
.library-continue .eyebrow { margin:0; color:var(--seal); font:.65rem var(--sans); letter-spacing:.2em; }
.library-continue h2 { margin:7px 0; font-size:1.18rem; font-weight:400; }
.library-continue p:last-child { margin:0; color:var(--ink-2); font:.8rem var(--sans); }
.library-continue a { padding:11px 17px; border:1px solid var(--seal); border-radius:999px; color:var(--seal); font:.8rem var(--sans); white-space:nowrap; }
.library-shelf { margin-top:64px; }
.library-section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.library-section-head .eyebrow { margin:0 0 7px; color:var(--seal); font:.65rem var(--sans); letter-spacing:.2em; }
.library-section-head h2 { margin:0; font-size:1.8rem; font-weight:400; }
.library-section-head > span { color:var(--mute); font:.82rem var(--sans); }
.library-categories { margin:20px 0 32px; }
.library-book-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px; }
.library-book-card { display:block; padding:0 0 12px; border-bottom:1px solid var(--line); }
.library-book-card .book-cover { width:100%; padding:24px; }
.library-book-card .book-cover h2 { font-size:clamp(1.2rem,2vw,1.8rem); }
.library-book-meta { padding:18px 1px 6px; }
.library-book-meta h3 { font-size:1.13rem; line-height:1.45; min-height:1.45em; }
.library-book-subtitle { min-height:2.9em; }
.library-book-open { display:block; margin-top:13px; color:var(--seal); font:.72rem var(--sans); }
.library-book-progress { margin-top:8px; }
.library-empty { grid-column:1/-1; }
.library-detail { grid-template-columns:minmax(260px,.72fr) minmax(0,1fr); gap:clamp(35px,6vw,85px); padding:32px clamp(24px,4vw,55px); border:1px solid var(--line); border-radius:24px; background:color-mix(in srgb,var(--seal) 4%,var(--paper)); }
.library-detail > .book-cover { max-width:350px; width:100%; justify-self:center; }
.library-detail-info .eyebrow { color:var(--seal); font:.72rem var(--sans); letter-spacing:.14em; }
.library-detail-info h1 { margin:12px 0; font-size:clamp(2rem,3.5vw,3rem); }
.library-detail-description { max-width:35em; }
.library-detail .library-cta { max-width:340px; }
.library-book-extras { align-items:start; }
.library-toc { padding:8px 0; }
.library-toc ol { padding-left:27px; }
.library-toc li { line-height:1.6; }
.library-excerpt { background:color-mix(in srgb,var(--seal) 4%,var(--paper)); }
@media(max-width:900px) { .library-book-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
 .library-page { padding-top:calc(var(--header-h) + 29px); }
 .library-heading h1 { font-size:2.3rem; }
 .library-heading > p:last-child { font-size:.87rem; }
 .library-topline { align-items:center; }
 .library-topline .library-segments { max-width:calc(100% - 80px); margin-bottom:22px; }
 .library-segments button { padding:9px 12px; }
 .library-history-link { font-size:.72rem; }
 .library-feature { grid-template-columns:minmax(0,1fr) 105px; gap:12px; min-height:250px; padding:25px 23px; border-radius:18px; }
 .library-feature::before { inset:9px; }
 .library-feature h2 { font-size:1.45rem; margin:13px 0; }
 .library-feature-copy > p:not(.eyebrow) { display:none; }
 .library-feature-link { margin-top:10px; font-size:.72rem; line-height:1.5; }
 .library-feature .book-cover { padding:12px 9px; }
 .library-feature .book-cover h2 { font-size:.85rem; }
 .library-feature .book-cover-author,.library-feature .book-cover-imprint { font-size:.45rem; }
 .library-continue { margin-top:18px; padding:18px; }
 .library-continue a { padding:9px 11px; font-size:.72rem; }
 .library-shelf { margin-top:43px; }
 .library-section-head h2 { font-size:1.45rem; }
 .library-categories { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:18px -22px 24px; padding:0 22px 4px; }
 .library-categories::-webkit-scrollbar { display:none; }
 .library-categories button { white-space:nowrap; }
 .library-book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
 .library-book-card { display:block; }
 .library-book-card .book-cover { padding:18px 14px; }
 .library-book-card .book-cover h2 { font-size:1.12rem; }
 .library-book-meta h3 { font-size:1rem; }
 .library-book-subtitle { min-height:0; }
 .library-detail { display:grid; grid-template-columns:1fr; gap:25px; padding:22px; }
 .library-detail > .book-cover { width:min(70%,270px); }
 .library-detail-info h1 { font-size:2rem; }
 .library-detail .library-cta { max-width:none; }
}

.writer-policy { margin:28px 0; padding:24px; border:1px solid var(--line); border-radius:16px; }
.writer-policy h2 { font-size:1.25rem; margin:0 0 12px; }
.writer-policy h3 { font-size:1rem; margin:24px 0 8px; }
.writer-policy p, .writer-policy dd { line-height:1.8; color:var(--ink-2); }
.writer-privacy-details dt { font-weight:bold; margin-top:18px; }
.writer-privacy-details dd { margin:6px 0 0; }
.writer-check { display:flex; align-items:flex-start; gap:12px; margin:18px 0; font-family:var(--sans); line-height:1.6; }
.writer-check input { flex-shrink:0; width:18px; height:18px; margin-top:4px; accent-color:var(--ink); }
#writerCodeForm { margin-top:20px; }

/* Serialized four-panel journey, alongside the short daily comics. */
.village-comic-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;border-bottom:1px solid var(--line)}
.village-comic-tabs a{padding:14px 24px;border-bottom:3px solid transparent;color:var(--ink-2)}
.village-comic-tabs a[aria-current="page"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.journey-series{max-width:860px;margin:36px auto}
.journey-series-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.journey-series-heading h2{font:28px/1.5 var(--serif);margin:8px 0}
.journey-series-heading p:last-child{color:var(--ink-2);line-height:1.8}
.journey-episode-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.journey-episode{display:flex;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.journey-episode img{width:120px;height:140px;object-fit:cover;object-position:top;border-radius:10px;flex-shrink:0}
.journey-episode h3{font:23px/1.5 var(--serif);margin:8px 0}
.journey-episode p:last-child{font:14px/1.8 var(--sans);color:var(--ink-2);margin:0}
.journey-episode-arrow{margin-left:auto;padding:12px;font-size:24px}
.journey-episode:hover h3{text-decoration:underline;text-underline-offset:5px}
.journey-reader-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:760px;margin:28px auto}
.journey-reader-nav a{padding:12px 18px;border:1px solid var(--line);border-radius:8px}
.journey-endnote{max-width:760px;margin:24px auto;color:var(--ink-2);font:14px/1.9 var(--sans);text-align:center}
.journey-endnote a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.journey-series-heading{align-items:flex-start;flex-direction:column}.journey-episode{gap:14px;padding:20px 0}.journey-episode img{width:80px;height:104px}.journey-episode h3{font-size:19px}.journey-episode-arrow{display:none}.journey-episode p:last-child,.journey-endnote{font-size:var(--mobile-text-min,14px)}.journey-reader-nav{gap:8px}.journey-reader-nav a{padding:12px}.village-comic-tabs a{padding:14px 20px}}

.journey-square-guide{max-width:760px;margin:32px auto;padding:24px;border-radius:16px;background:var(--village-surface)}
.journey-square-guide h2{font:24px/1.5 var(--serif);margin:8px 0 12px}
.journey-square-guide>p:not(.village-kicker){color:var(--ink-2);font:15px/1.9 var(--sans)}
.journey-square-guide>div{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media(max-width:600px){.journey-square-guide{padding:20px}.journey-square-guide>p:not(.village-kicker){font-size:1rem}}

/* Journey entry points in the comics and world guide. */
.journey-banner{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);max-width:800px;margin:24px auto 32px;background:var(--village-surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.journey-banner-art{display:block;min-height:200px}
.journey-banner-art img{display:block;width:100%;height:100%;object-fit:cover}
.journey-banner-copy{padding:20px 24px;align-self:center}
.journey-banner-copy h2{font:28px/1.5 var(--serif);margin:4px 0 8px}
.journey-banner-copy>p:not(.village-kicker),.journey-world-guide>p:not(.village-kicker){color:var(--ink-2);font:15px/1.9 var(--sans)}
.journey-banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.journey-banner-actions>a{padding:10px 14px}
.journey-banner .journey-banner-actions{gap:12px;margin-top:14px}
.journey-banner-copy>p:not(.village-kicker){font-size:14px;margin:8px 0}
.journey-banner a:focus-visible,.journey-world-guide a:focus-visible,.village-journey-links a:focus-visible{outline:2px solid var(--village-green);outline-offset:4px}
.comic-story-banners{display:grid;gap:12px;max-width:800px;margin:24px auto 32px}
.comic-story-banners .journey-banner-compact{grid-template-columns:160px minmax(0,1fr);margin:0;border-radius:16px}
.journey-banner-compact .journey-banner-art{min-height:140px}
.journey-banner-compact .journey-banner-art img{height:100%;object-fit:cover}
.journey-banner-compact .journey-banner-copy{padding:14px 20px}
.journey-banner-compact .journey-banner-copy h2{font-size:23px;line-height:1.4;margin:0 0 6px}
.journey-banner-compact .journey-banner-copy>p:not(.village-kicker){margin:0;line-height:1.6}
.journey-banner-compact .journey-banner-actions{margin-top:10px;gap:8px}
.journey-banner-compact .journey-banner-actions>a{padding:7px 10px;font-size:14px}
.journey-world-guide{padding:32px;margin:36px 0;border:1px solid var(--line);border-radius:16px;background:var(--village-surface)}
.journey-world-guide h2{font:26px/1.6 var(--serif);margin:8px 0 12px}
.village-journey-links{clear:both;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.village-journey-links h4{font:600 16px/1.6 var(--sans);margin:0 0 8px}
.village-journey-links p{color:var(--ink-2);font:14px/1.8 var(--sans);margin:0 0 10px}
.village-journey-links ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.village-journey-links a{display:inline-block;padding:5px 0;color:var(--village-green);font:14px/1.8 var(--sans);text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.journey-banner{grid-template-columns:1fr;margin:20px auto 28px}.journey-banner-art{min-height:0}.journey-banner-art img{height:150px;object-position:center 58%}.journey-banner-copy{padding:18px 20px}.journey-world-guide{padding:24px}.journey-banner-copy h2{font-size:25px}.journey-world-guide h2{font-size:23px}.journey-banner-copy>p:not(.village-kicker),.journey-world-guide>p:not(.village-kicker),.village-journey-links p,.village-journey-links a{font-size:var(--mobile-text-min,14px)}}

/* Village introduction: everyday scenes, then places and people. */
.village-about-renewed{max-width:1120px}
.village-about-renewed section[id]{scroll-margin-top:90px}
.about-hero-art{margin:0;overflow:hidden;border-radius:22px}
.about-hero-art img{display:block;width:100%;height:auto}
.about-hero-art figcaption{padding:12px 4px;font:13px/1.7 var(--sans);color:var(--ink-2)}
.about-opening-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;padding:30px 0 12px}
.about-opening-copy .village-kicker{grid-column:1}
.about-opening-copy h2{grid-column:1;grid-row:2/5;font:32px/1.6 var(--serif);margin:8px 0}
.about-opening-copy>p:not(.village-kicker){grid-column:2;color:var(--ink-2);font:15px/1.95 var(--sans);margin:0 0 12px;word-break:keep-all}
.about-opening-copy>.village-intro-link{grid-column:2;justify-self:start}
.about-section{margin:64px 0}
.about-section-heading{margin-bottom:28px;max-width:760px}
.about-section-heading h2{font:30px/1.6 var(--serif);margin:8px 0 12px}
.about-section-heading>p:not(.village-kicker){font:15px/1.9 var(--sans);color:var(--ink-2)}
.about-world-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.about-world-card{padding:28px;background:var(--village-surface);border:1px solid var(--line);border-radius:16px}
.about-world-card h3{font:26px/1.5 var(--serif);margin:8px 0 14px}
.about-world-card>p:not(.village-kicker),.about-door p:not(.village-kicker),.about-people-heading p,.about-person>p,.about-friendship>p:not(.village-kicker),.about-sidam p:not(.village-kicker){font:14px/1.9 var(--sans);color:var(--ink-2);word-break:keep-all}
.about-place-links{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:20px}
.about-place-links a,.about-inline-links a,.about-door-links a{font:14px/1.8 var(--sans);color:var(--village-green);text-decoration:underline;text-underline-offset:4px}
.about-door{display:grid;grid-template-columns:1fr 220px;gap:40px;padding:28px 0;margin-top:20px;border-bottom:1px solid var(--line)}
.about-door h3,.about-people-heading h3{font:23px/1.6 var(--serif);margin:8px 0 12px}
.about-door-links{display:flex;flex-direction:column;justify-content:center;gap:16px}
.about-people-heading{max-width:760px;margin:36px 0 20px}
.about-visitors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.about-residents{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.about-person{padding:22px 18px;border:1px solid var(--line);border-radius:16px;min-width:0;background:var(--paper)}
.about-person-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:20px/1.6 var(--serif)}
.about-person-name small{font:12px/1.5 var(--sans);color:var(--ink-2)}
.about-person-face{width:64px;height:64px;flex-shrink:0}
.about-person .about-person-role{color:var(--ink);margin:14px 0 0}
.about-person .village-journey-links{margin-top:16px;padding-top:12px}
.about-person .village-journey-links>p{display:none}
.about-friendship{padding:20px 24px;margin-top:24px;border-left:3px solid var(--village-green);background:var(--village-surface)}
.about-friendship p{margin:4px 0}
.about-sidam{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center;padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--village-surface);margin:64px 0}
.about-sidam>img{display:block;width:100%;height:330px;object-fit:contain;border-radius:14px}
.about-sidam h2{font:30px/1.6 var(--serif);margin:8px 0 18px}
.about-inline-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px}
.about-reading-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-reading-grid>a{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:14px}
.about-reading-grid strong{font:20px/1.6 var(--serif);font-weight:400}
.about-reading-grid span{font:14px/1.9 var(--sans);color:var(--ink-2)}
.about-reading-grid a:hover,.about-person-name:hover{color:var(--village-green)}
.village-about-renewed a:focus-visible{outline:2px solid var(--village-green);outline-offset:5px}
@media(max-width:900px){.about-residents{grid-template-columns:repeat(3,minmax(0,1fr))}.about-person-name{font-size:18px}.about-sidam{grid-template-columns:180px 1fr;gap:24px}.about-reading-grid{grid-template-columns:1fr 1fr}.about-visitors{gap:12px}}
@media(max-width:600px){.about-hero-art{border-radius:14px}.about-opening-copy{display:block;padding:24px 0 0}.about-opening-copy h2,.about-section-heading h2,.about-sidam h2{font-size:25px}.about-opening-copy h2{margin-bottom:20px}.about-section,.about-sidam{margin:40px 0}.about-world-grid,.about-visitors,.about-door,.about-sidam,.about-reading-grid{grid-template-columns:1fr}.about-world-card{padding:22px}.about-door{gap:16px}.about-door-links{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:12px 20px}.about-residents{grid-template-columns:1fr 1fr;gap:12px}.about-person{padding:18px 14px}.about-person-name{flex-direction:column;align-items:flex-start;gap:6px}.about-visitors .about-person-name{flex-direction:row;align-items:center}.about-person-face{width:56px;height:56px}.about-sidam{padding:24px;gap:20px}.about-sidam>img{height:260px}.about-friendship{padding:18px}.about-reading-grid>a{padding:20px}.about-opening-copy>p:not(.village-kicker),.about-section-heading>p:not(.village-kicker){font-size:14px}}

/* Read journey episodes without leaving the page. */
.journey-scroll-hint{max-width:760px;margin:24px auto 12px;color:var(--ink-2);font:14px/1.9 var(--sans)}
.journey-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.village-heading:has(.journey-title-row)>div{width:100%}
.journey-contents-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;font:14px/1.5 var(--sans)}
.journey-contents-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.journey-contents{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 64px);box-sizing:border-box;margin:auto;padding:0;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 16px 60px #0004}
.journey-contents::backdrop{background:#0007}
.journey-contents .journey-series-heading{flex-direction:row;align-items:center}
.journey-contents .journey-series-heading>button{flex:none;white-space:nowrap;padding:10px 14px;min-height:44px;font:14px/1.5 var(--sans)}
.journey-contents .journey-series{margin:0;padding:20px}
.journey-stream .journey-reading-episode{scroll-margin-top:90px}
.journey-stream .journey-reading-episode+.journey-reading-episode{border-top:1px solid var(--line);margin-top:48px;padding-top:16px}
.journey-load-area{max-width:760px;margin:24px auto 40px;text-align:center}
.journey-load-area p{font:14px/1.8 var(--sans);color:var(--ink-2)}
.journey-load-area a[aria-disabled="true"]{opacity:.6;cursor:progress}
.journey-endnote[hidden],#journeyLoadMore[hidden]{display:none}
@media(max-width:600px){.journey-scroll-hint{font-size:var(--mobile-text-min,14px)}.journey-contents .journey-series{padding:16px}.journey-stream .journey-reading-episode+.journey-reading-episode{margin-top:32px}}

/* Cropped panels keep column-major source sheets in story order on phones. */
.journey-webtoon-art { max-width: 560px; margin-inline: auto; }
.journey-webtoon-strips { display: grid; gap: 24px; }
.journey-webtoon-strips a { display: block; min-width: 0; }
.journey-webtoon-art img { border-radius: 0; }
@media (max-width: 600px) {
  .journey-webtoon-art { max-width: none; margin-inline: -18px; }
  .journey-webtoon-art figcaption { padding-inline: 18px; }
  .journey-webtoon-strips { gap: 16px; }
}

/* Resident portrait collections keep one-image introductions unchanged. */
.character-gallery{margin:0 0 24px}.character-gallery-view{margin:0;text-align:center}
.character-gallery-selected{display:block;width:100%;height:300px;object-fit:contain}
.character-gallery-caption{margin-top:12px;font-size:13px;color:var(--ink-2)}
.character-gallery-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin:12px 0 18px}
.character-gallery-arrow{border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);width:36px;height:36px;cursor:pointer}
.character-gallery-counter{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.character-gallery-collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.character-gallery-thumb{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:none;color:var(--ink-2);cursor:pointer}
.character-gallery-thumb[aria-pressed=true]{border-color:var(--v-green);background:var(--paper)}
.character-gallery-thumb img{width:100%;height:95px;object-fit:contain}.character-gallery-thumb span{font-size:12px;word-break:keep-all}
.character-gallery button:focus-visible{outline:2px solid var(--v-green);outline-offset:3px}
.character-gallery-editor-list{display:grid;gap:16px;margin:18px 0}.character-gallery-editor-preview{display:block;width:100%;height:140px;object-fit:contain}
@media(max-width:550px){.character-gallery-selected{height:240px}.character-gallery-collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character-gallery-thumb{padding:8px 4px}.character-gallery-thumb img{height:75px}.character-gallery-thumb span{font-size:max(11px,var(--mobile-text-min,0px))}}

.scroll-open{position:fixed;right:18px;bottom:22px;z-index:50;border:1px solid var(--ink);border-radius:20px;padding:10px 16px;background:var(--paper);color:var(--ink);cursor:pointer}.scroll-open.sparkling{box-shadow:0 0 14px 3px #e6c86e88;border-color:#d4b458;animation:scroll-glow 3s ease-in-out infinite}.scroll-dialog{width:min(580px,calc(100vw - 32px));max-height:85vh;overflow:auto}.scroll-dialog select,.scroll-dialog textarea{width:100%;padding:10px;color:var(--ink);background:var(--paper);border:1px solid currentColor;border-radius:6px}.scroll-thread{display:grid;gap:10px;margin:16px 0;max-height:38vh;overflow:auto}.scroll-message{padding:10px 14px;border:1px solid #8884;border-radius:10px}.scroll-message.mine{margin-left:20px}.scroll-note{display:block;margin:8px 0}.scroll-dialog form{display:grid;gap:10px}.scroll-dialog [hidden]{display:none}@keyframes scroll-glow{50%{box-shadow:0 0 22px 6px #e6c86e44}}@media(prefers-reduced-motion:reduce){.scroll-open.sparkling{animation:none}}

.about-scroll-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}.about-scroll-art{margin:0;position:sticky;top:30px}.about-scroll-art img{display:block;width:100%;height:auto;border-radius:16px}.about-scroll-art figcaption{font:13px/1.8 var(--sans);color:var(--ink-2);margin-top:12px}.about-scroll-copy h3{font:27px/1.6 var(--serif);margin:8px 0 18px}.about-scroll-copy>p:not(.village-kicker),.about-scroll-notice p{font:14px/1.95 var(--sans);color:var(--ink-2);word-break:keep-all}.about-scroll-notice{border-left:3px solid var(--village-green);padding:4px 0 4px 18px;margin:24px 0}.about-scroll-notice strong{font:16px/1.7 var(--serif)}.about-scroll-copy .about-inline-links{display:flex;flex-wrap:wrap;gap:12px 20px}@media(max-width:760px){.about-scroll-layout{grid-template-columns:1fr;gap:24px}.about-scroll-art{position:static}.about-scroll-copy h3{font-size:24px}}

/* 원본(1774 × 887)의 투명 여백을 마스크에서 제외한다.
   로고 영역은 실제 글자 폭·높이만 차지하므로 gap으로 간격을 조절한다. */
.top .logo{--brand-height:54px;align-items:flex-end;gap:5px;margin-left:0}
.logo-ci,.logo-ci-en{display:block;flex-shrink:0;width:calc(var(--ci-height)*var(--ci-ink-width)/887);height:calc(var(--ci-height)*var(--ci-ink-height)/887);background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--ci-height)*2) var(--ci-height);mask-size:calc(var(--ci-height)*2) var(--ci-height);-webkit-mask-position:calc(var(--ci-height)*var(--ci-left)/-887) calc(var(--ci-height)*var(--ci-top)/-887);mask-position:calc(var(--ci-height)*var(--ci-left)/-887) calc(var(--ci-height)*var(--ci-top)/-887)}
.logo-ci{--ci-height:var(--brand-height);--ci-ink-width:1042;--ci-ink-height:511;--ci-left:396;--ci-top:207;-webkit-mask-image:url('/static/sidam-ci-ko-si-spacing-v5.png?w=960');mask-image:url('/static/sidam-ci-ko-si-spacing-v5.png?w=960')}
.logo-ci-en{--ci-height:calc(var(--brand-height)*.50);--ci-ink-width:1709;--ci-ink-height:716;--ci-left:33;--ci-top:105;opacity:.5;-webkit-mask-image:url('/static/sidam-ci-en-v1.png?w=960');mask-image:url('/static/sidam-ci-en-v1.png?w=960')}
@media(max-width:700px){.top{grid-template-columns:minmax(0,1fr) auto;padding-inline:20px;gap:10px}.top .logo{--brand-height:48px;gap:1px}.top .mobile-space-name{display:none}.top .header-end{grid-column:2}}

/* 간단한 사이트 정보 */
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 clamp(20px,4vw,48px); padding:24px 0 28px; border-top:1px solid var(--line); color:var(--ink-2); font:12px/1.8 var(--sans); }
.site-footer-info { display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; }
.site-footer-info small { font-size:11px; color:var(--mute); }
.site-footer>a { flex:none; padding:6px 0; }
.site-footer>a[aria-current=page] { color:var(--ink); font-weight:700; }
.site-footer>a:hover { text-decoration:underline; text-underline-offset:4px; }
.site-footer>a span { margin-left:8px; }
body:has(#feed)>.site-footer { display:none; }
.feed .end>.site-footer { position:absolute; bottom:0; left:0; right:0; }
@media(max-width:700px) {
  .site-footer { gap:16px; padding:20px 0; }
  .site-footer-info { flex-direction:column; align-items:flex-start; gap:2px; }
  .feed .end>.site-footer { bottom:calc(var(--tab-h) + env(safe-area-inset-bottom)); }
}

/* 봄담이 건네는 마을시의 첫 장. */
.village-poetry-help{align-self:center;flex:none;width:25px;height:25px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;opacity:.65;font:13px var(--sans);cursor:pointer}
.village-poetry-help:hover{opacity:1}
.village-poetry-intro{width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:20px 20px 24px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 24px 90px #13251e40;text-align:center}
.village-poetry-intro::backdrop{background:#14291fc2;backdrop-filter:blur(5px)}
.village-poetry-close{position:absolute;right:28px;top:28px;z-index:1;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #dcd6ca;border-radius:50%;background:#fffaf0ed;color:#426b57;font:14px var(--sans);cursor:pointer}
.village-poetry-photo{margin:0;padding:7px 7px 0;border:1px solid var(--line);border-radius:15px;background:var(--village-surface)}
.village-poetry-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:9px}
.village-poetry-photo figcaption{padding:11px 4px 12px;color:var(--ink-2);font:11px/1.5 var(--sans);letter-spacing:.03em}
.village-poetry-letter{padding:19px 12px 0}
.village-poetry-from{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 13px;color:var(--village-green);font:12px/1.5 var(--sans)}
.village-poetry-from span{padding:3px 9px;border-radius:20px;background:var(--village-wash);font-size:10px}
.village-poetry-intro h2{margin:0 0 17px;font:27px/1.4 var(--serif);font-weight:400;letter-spacing:-.04em}
.village-poetry-description{color:var(--ink-2);font:14px/1.85 var(--sans);word-break:keep-all}
.village-poetry-description p{margin:0 0 12px}
.village-poetry-note{margin:16px 0 18px;color:var(--ink-2);font:11px/1.65 var(--sans);word-break:keep-all}
.village-poetry-read{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding:14px 16px;border:1px solid var(--village-green);border-radius:13px;background:var(--village-green);color:var(--paper);font:14px/1.4 var(--sans);cursor:pointer}
.village-poetry-read:hover{filter:brightness(.94)}
.village-poetry-intro button:focus-visible,.village-poetry-help:focus-visible{outline:2px solid var(--village-green);outline-offset:4px}
.village-poetry-mobile-break{display:none}
@media(max-width:500px){.village-poetry-intro{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:14px 14px 18px;border-radius:20px}.village-poetry-close{right:22px;top:22px}.village-poetry-letter{padding:17px 8px 0}.village-poetry-intro h2{font-size:25px}.village-poetry-description{font-size:14px}.village-poetry-mobile-break{display:initial}}
@media(max-height:740px){.village-poetry-photo img{max-height:220px;object-fit:contain}.village-poetry-letter{padding-top:14px}.village-poetry-intro h2{margin-bottom:12px}.village-poetry-description p{margin-bottom:9px}.village-poetry-note{margin:12px 0 14px}}

.cms-transcript{white-space:pre-line}
.cms-comic-strip{display:block}
.cms-comic-strip img{position:static;width:100%;height:auto}
.cms-auto-panel{display:block;overflow:hidden;border-radius:12px}.cms-auto-panel svg{display:block;width:100%;height:auto}

.village-person-status{font-size:.78rem;color:var(--ink-muted,#696b62);line-height:1.5}

.village-album-tabs{display:flex;gap:12px;margin:24px 0}.village-album-tabs a{border:1px solid var(--line);border-radius:24px;padding:10px 18px;font-size:13px}.village-album-tabs a[aria-current=page]{background:var(--ink);color:var(--paper)}.village-photo-calligraphy .village-photo-open img{aspect-ratio:2/3;object-fit:contain;background:#faf9f5}.village-photo-calligraphy figcaption>p{white-space:pre-line}.village-album-empty{padding:40px 0;font-size:14px;line-height:1.8;color:var(--mute)}

/* Keep the complete conversation readable without excess space between replies. */
.village-board-page .village-thread { margin-top: 10px; }
.village-board-page .village-comment { padding: 6px 0; }
.village-board-page .village-comment.reply { padding: 6px 0 6px 12px; }
.village-board-page .village-comment p { margin-top: 3px; white-space: pre-wrap; }
.village-board-page .village-comment-face { width: 24px; height: 24px; }
.wall-page .wall-comments { margin-top: 12px; padding-top: 2px; }
.wall-page .wall-comment { padding: 8px 0; }
.wall-page .wall-comment.wall-reply { padding-left: 12px; border-left: 0; }
.wall-page .wall-comment .wall-face { width: 24px; height: 24px; }
.wall-page .wall-comment .wall-byline::before { height: 24px; }
.wall-page .wall-comment .wall-body { margin-top: 4px; line-height: 1.7; }
.wall-page .wall-comment-controls { margin: 0 0 0 auto; gap: 12px; }
.square-preview-comment + .square-preview-comment { margin-top: 8px; }
.square-preview-child { margin-left: 8px; border-left: 2px solid var(--line); padding-left: 8px; }

/* Book covers keep text comfortably inside the printed keyline. */
.book-cover { padding:clamp(29px,14%,46px); }
.book-cover-pine { background:radial-gradient(ellipse at 70% 27%,#809b7e 0,transparent 61%),linear-gradient(145deg,#23463d,#172c2c 75%); color:#e8ecd3; }
.book-cover-old { background:radial-gradient(ellipse at 66% 25%,#aa9270 0,transparent 60%),linear-gradient(145deg,#574537,#292929 78%); color:#f3e8d0; }
.book-cover::after { inset:12px; }
.book-cover h2 { max-width:100%; margin:27px 0 14px; font-size:clamp(1.25rem,2vw,2rem); line-height:1.37; letter-spacing:.035em; overflow-wrap:anywhere; word-break:keep-all; }
.book-cover-latin h2 { letter-spacing:.015em; word-break:normal; }
.book-cover-long h2 { margin-top:18px; font-size:clamp(1rem,1.5vw,1.42rem); line-height:1.3; letter-spacing:0; }
.book-cover-author { max-width:100%; margin:0; font-size:clamp(.74rem,1.2vw,.96rem); line-height:1.55; letter-spacing:.055em; overflow-wrap:anywhere; }
.book-cover-latin .book-cover-author { letter-spacing:.02em; }
.book-cover-imprint { left:clamp(29px,14%,46px); right:clamp(29px,14%,46px); bottom:clamp(25px,12%,38px); font-size:.65rem; line-height:1.45; letter-spacing:.04em; }
.library-book-card .book-cover { padding:clamp(29px,14%,46px); }
.library-book-card .book-cover h2 { font-size:clamp(1.18rem,1.8vw,1.72rem); }
.library-book-card .book-cover-long h2 { font-size:clamp(.98rem,1.35vw,1.27rem); }
.library-book-match { margin:10px 0 0; color:var(--seal)!important; font:.74rem/1.5 var(--sans)!important; }
.library-search-row { display:flex; gap:12px; margin:-10px 0 28px; font-family:var(--sans); }
.library-search-box,.library-author-box { display:flex; align-items:center; gap:12px; min-height:47px; border:1px solid var(--line); border-radius:12px; padding:0 15px; color:var(--ink-2); background:color-mix(in srgb,var(--ink) 2%,var(--paper)); font-size:.75rem; }
.library-search-box { flex:1; }
.library-search-submit { flex:none; min-height:44px; padding:0 20px; border:1px solid var(--ink); border-radius:12px; background:var(--ink); color:var(--paper); font:.85rem var(--sans); cursor:pointer; }
.library-search-poets { display:flex; flex-wrap:wrap; gap:9px; }
.library-search-poets a { display:grid; gap:2px; padding:11px 16px; border:1px solid var(--line); border-radius:13px; font:14px var(--sans); }
.library-search-poets a:hover { border-color:var(--seal); }
.library-search-poets span { color:var(--ink-2); font-size:11px; }
.library-poem-card small mark { background:color-mix(in srgb,var(--seal) 22%,transparent); color:inherit; border-radius:3px; padding:0 1px; }
.library-search-box input,.library-author-box select { min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:.85rem var(--sans); }
.library-search-box input { width:100%; padding:12px 0; }
.library-author-box select { min-width:145px; padding:12px 0; }
.library-sort-row { margin:-16px 0 8px; }
.library-book-stats { margin:0; font:.72rem var(--sans); color:var(--mute); }
.library-sort-note { margin:0 0 28px; font:.72rem/1.7 var(--sans); color:var(--mute); }
.library-search-box:focus-within,.library-author-box:focus-within { border-color:var(--seal); box-shadow:0 0 0 2px color-mix(in srgb,var(--seal) 20%,transparent); }
.library-results { min-height:120px; }
.library-main-nav { display:flex; gap:7px; overflow-x:auto; margin:0 0 26px; padding:3px 0 9px; scrollbar-width:none; font:13px var(--sans); }
.library-main-nav::-webkit-scrollbar { display:none; }
.library-main-nav a { flex:none; padding:9px 16px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); }
.library-main-nav a[aria-current=page] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.library-home-hero { display:grid; grid-template-columns:1fr 185px; align-items:center; gap:30px; padding:clamp(28px,5vw,58px); border:1px solid var(--line); border-radius:24px; background:radial-gradient(ellipse at 83% 33%,#a5a07c55,transparent 48%),linear-gradient(135deg,#303a36,#26312e); color:#f4efdf; }
.library-home-hero .eyebrow { color:#c8b78e; letter-spacing:.18em; font:11px var(--sans); }
.library-home-hero h2 { max-width:12em; margin:14px 0; font:400 clamp(28px,3.4vw,46px)/1.35 var(--serif); word-break:keep-all; }
.library-home-hero p:not(.eyebrow) { max-width:38em; color:#e7e2d5; font:14px/1.9 var(--sans); word-break:keep-all; }
.library-home-symbol { display:grid; place-items:center; width:170px; aspect-ratio:1; border:1px solid #eddec659; border-radius:50%; color:#e8d3ab; font:90px var(--serif); transform:rotate(-8deg); }
.library-home-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:27px; font:13px var(--sans); }
.library-home-actions a { padding:11px 17px; border:1px solid #e4d8bd88; border-radius:999px; }
.library-home-actions a:first-child { background:#e8dcc3; color:#26312e; }
.library-home-section { margin:58px 0; }
.library-home-section .library-section-head,.library-list-section .library-section-head { margin-bottom:25px; }
.library-section-link { color:var(--seal); font:13px var(--sans); white-space:nowrap; }
.library-list-section { margin:30px 0 60px; }
.library-list-intro { margin:-6px 0 23px; color:var(--ink-2); font:13px/1.8 var(--sans); }
.library-poem-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.library-poem-card { display:grid; grid-template-columns:38px minmax(0,1fr) 20px; gap:17px; min-height:148px; padding:23px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--seal) 3%,var(--paper)); transition:border-color .2s,transform .2s; }
.library-poem-card:hover,.library-theme-card:hover { border-color:var(--seal); transform:translateY(-2px); }
.library-poem-card-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:color-mix(in srgb,var(--seal) 12%,var(--paper)); color:var(--seal); font:19px var(--serif); }
.library-poem-card p { margin:0 0 5px; color:var(--seal); font:12px var(--sans); }
.library-poem-card h3 { margin:0 0 11px; font:400 22px/1.35 var(--serif); }
.library-poem-card small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-2); font:13px/1.7 var(--sans); }
.library-card-arrow { justify-self:end; color:var(--seal); font:14px var(--sans); }
.library-theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.library-theme-card { position:relative; min-height:211px; padding:25px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,#7d9a8c 16%,var(--paper)); transition:border-color .2s,transform .2s; }
.library-theme-card { color:var(--ink); }
.library-theme-snow { background:color-mix(in srgb,#7aa3b8 18%,var(--paper)); }.library-theme-spring { background:color-mix(in srgb,#c98f6e 16%,var(--paper)); }.library-theme-longing { background:color-mix(in srgb,#9b8bb5 18%,var(--paper)); }.library-theme-courage { background:color-mix(in srgb,#8fa07a 17%,var(--paper)); }.library-theme-old { background:color-mix(in srgb,#b8a06a 17%,var(--paper)); }
.library-theme-decoration { position:absolute; top:19px; right:28px; color:color-mix(in srgb,var(--ink) 28%,transparent); font:72px var(--serif); }
.library-theme-count { position:relative; color:var(--seal); font:11px var(--sans); }
.library-theme-card .library-theme-count,.library-theme-card .library-card-arrow { color:var(--seal); }
.library-theme-card h3 { position:relative; margin:29px 0 9px; font:400 25px/1.4 var(--serif); }
.library-theme-card p { position:relative; margin:0 0 17px; color:var(--ink-2); font:13px/1.6 var(--sans); }
.library-theme-card p { color:var(--ink-2); }
.library-theme-card .library-card-arrow { position:relative; }
.library-home-authors { padding:25px 0 45px; border-top:1px solid var(--line); }
.library-home-authors h2 { margin:0 0 19px; font:400 23px var(--serif); }
.library-home-authors>div { display:flex; flex-wrap:wrap; gap:9px; }
.library-home-authors a { padding:9px 13px; border:1px solid var(--line); border-radius:999px; font:12px var(--sans); }
.library-single-poem { max-width:740px; margin:30px auto; padding:clamp(28px,6vw,70px); border:1px solid var(--line); border-radius:17px; background:var(--paper); }
.library-single-poem .eyebrow { color:var(--seal); font:11px var(--sans); letter-spacing:.15em; }
.library-single-poem h2 { margin:25px 0 9px; font:400 clamp(29px,4vw,43px)/1.4 var(--serif); }
.library-single-poem-author { margin:0 0 40px; color:var(--ink-2); font:13px var(--sans); }
.library-single-poem-body { font:18px/2.05 var(--serif); white-space:pre-wrap; overflow-wrap:anywhere; }
.library-single-poem-body .ln { display:block; min-height:2.05em; }
.library-single-poem-body .ln.gap { min-height:1.2em; }
.library-single-poem-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 25px; margin:25px 0 50px; color:var(--seal); font:13px var(--sans); }
.library-poem-connections { max-width:740px; margin:0 auto; display:grid; gap:14px; }
.library-garden-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:20px 23px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--village-green,#5f7f6b) 9%,var(--paper)); transition:border-color .2s; }
.library-garden-link:hover { border-color:var(--seal); }
.library-garden-link .eyebrow { grid-column:1; color:var(--seal); font:11px var(--sans); letter-spacing:.15em; }
.library-garden-link strong { grid-column:1; font:400 20px/1.4 var(--serif); }
.library-garden-link span:not(.eyebrow):not(.library-card-arrow) { grid-column:1; color:var(--ink-2); font:13px/1.6 var(--sans); }
.library-garden-link .library-card-arrow { grid-column:2; grid-row:1 / span 3; align-self:center; }
.library-poem-books h3 { margin:6px 0 10px; color:var(--ink-2); font:13px var(--sans); }
.library-poem-books ul { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.library-poem-books a { display:inline-flex; gap:8px; align-items:baseline; padding:9px 14px; border:1px solid var(--line); border-radius:999px; font:13px var(--sans); }
.library-poem-books a:hover { border-color:var(--seal); }
.library-poem-books span { color:var(--ink-2); font-size:11px; }
.library-share { justify-self:center; padding:9px 18px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font:13px var(--sans); cursor:pointer; }
.library-share:hover { border-color:var(--seal); }
@media(max-width:700px) { .library-home-hero { grid-template-columns:1fr; padding:27px; }.library-home-symbol { display:none; }.library-poem-grid,.library-theme-grid { grid-template-columns:1fr; }.library-home-section { margin:43px 0; }.library-poem-card { padding:18px; min-height:130px; }.library-theme-card { min-height:185px; }.library-section-link { font-size:11px; }.library-single-poem-body { font-size:16px; } }
@media(max-width:700px) {
 .library-search-row { flex-direction:column; gap:9px; }
 .library-search-box,.library-author-box { min-height:43px; }
 .library-author-box select { flex:1; }
 .library-book-card .book-cover { padding:clamp(22px,14%,29px); }
 .library-book-card .book-cover h2 { font-size:1.1rem; }
 .library-book-card .book-cover-long h2 { font-size:.91rem; }
 .book-cover-imprint { left:clamp(22px,14%,29px); right:clamp(22px,14%,29px); bottom:clamp(20px,12%,28px); font-size:.53rem; }
 .library-feature .book-cover { padding:14px; }
 .library-feature .book-cover::after { inset:6px; }
 .library-feature .book-cover h2 { font-size:.8rem; margin-top:10px; }
 .library-feature .book-cover-long h2 { font-size:.65rem; }
 .library-feature .book-cover-imprint { left:14px; bottom:12px; }
}

@media(max-width:600px){.comic-story-banners{gap:10px;margin:20px auto 28px}.comic-story-banners .journey-banner-compact{grid-template-columns:100px minmax(0,1fr)}.journey-banner-compact .journey-banner-art{min-height:145px}.journey-banner-compact .journey-banner-art img{height:100%;object-position:center}.journey-banner-compact .journey-banner-copy{padding:12px}.journey-banner-compact .journey-banner-copy h2{font-size:20px}.journey-banner-compact .journey-banner-actions{gap:4px 8px;margin-top:8px}.journey-banner-compact .journey-banner-actions>a{padding:6px 8px}}

.rodam-story-banner .journey-banner-art img{object-position:62% 28%}

@media(max-width:600px){.village-comic-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.village-comic-tabs a{text-align:center;padding:14px 12px}}

.library-poet-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin:16px 0;font:13px var(--sans);color:var(--seal)}
.library-poet-links a,.book-poem-author a{text-decoration:underline;text-underline-offset:5px}

/* Translation modes keep the original below the Korean text without changing poem identity. */
.poem-reading-modes{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 24px;font:12px var(--sans)}
.poem-reading-modes button{padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--paper)}
.poem-reading-modes button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.poem-reading-modes button:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.poem-original-companion{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:.82em;opacity:.65}
.poem-original-title{font-size:1em;margin:0 0 16px;line-height:1.7}
.poem-translation-note{font:12px/1.8 var(--sans);color:var(--ink-2);margin:26px 0 0;white-space:normal}
.has-reading-modes .book-reading-head{flex-wrap:wrap;row-gap:10px}.book-reading-modes{flex:0 0 100%;display:flex;justify-content:center}
.book-reading-modes[hidden]{display:none}.book-reading-modes .poem-reading-modes{margin:0;flex:0 1 auto}
.has-reading-modes .book-poem-scroll{padding-top:156px}
@media(max-width:700px){.has-reading-modes .book-poem-scroll{padding-top:calc(164px + var(--safe-top))}.poem-reading-modes button{padding:8px 12px}}
.library-detail-info{min-width:0}.library-detail-description{overflow-wrap:anywhere}

.font-glyph { font: 700 1.05rem var(--serif, serif); line-height: 1; }

.poem-next { position: absolute; left: 50%; bottom: calc(var(--header-h) + 14px); transform: translateX(-50%); max-width: min(70vw, 26rem); padding: 6px 14px; border: 0; background: none; color: inherit; font: .78rem var(--sans); opacity: .45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.poem-next:hover { opacity: .8; }
.poem.long:not(.scrolled) .poem-next, .poem.end .poem-next { display: none; }
.poem.picking .ln:not(.gap) { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 6px; }
@media (max-width: 700px) { .poem-next { bottom: calc(var(--header-h) + 8px); } }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.poem.picking .ln:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Wide screens keep the spaces in a left rail; the header menu keeps only reading settings. */
.side-rail { display: none; }
@media (min-width: 1100px) {
  body { padding-left: 220px; }
  .side-rail { display: flex; flex-direction: column; gap: 22px; position: fixed; z-index: 20; left: 0; top: var(--main-header-h, 64px); bottom: 0; width: 220px; padding: 22px 14px; overflow-y: auto; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); font-family: var(--sans); scrollbar-width: thin; }
  .side-rail a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: .92rem; letter-spacing: 0; opacity: .75; }
  .side-rail a:hover, .side-rail a[aria-current] { opacity: 1; background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .side-rail a[aria-current] { font-weight: 700; }
  .side-rail svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  /* Extend the scrolling artwork behind the transparent rail; keep text in the reading area. */
  body:has(#feed) .side-rail { background: transparent; }
  #feed { margin-left: -220px; }
  #feed .poem { padding-left: 248px; }
  #feed .poem-meta { left: 248px; }
  #feed .poem-next, body:has(#feed) .hint { left: calc(50% + 110px); }
  #feed .end > .site-footer { left: 220px; }
  #feed .actions .poem-profile { right: calc(100vw - 220px - var(--act-r) - clamp(14px,3vw,40px) - 60px); }
  body:has(#feed) #chips { left: 220px; }
  .side-rail-main { display: grid; gap: 4px; }
  .side-rail .space-menu { display:grid; gap:14px; padding:16px 0 0; border-top:1px solid var(--line); flex-shrink:0; }
  .side-rail .space-menu a { gap:10px; min-height:40px; padding:8px 12px; font:13px/1.5 var(--sans); opacity:.8; }
  .side-rail .space-menu a:hover, .side-rail .space-menu a[aria-current] { background:color-mix(in srgb,var(--village-green) 12%,var(--paper)); opacity:1; }
  .side-rail .space-menu a[aria-current] { font-weight:700; }
  .side-rail .space-menu svg { width:18px; height:18px; }
  .side-rail .plaza-menu-arrow { margin-left: auto; opacity: .4; }
  .top .main-nav { display: none; }
  .header-menu :is(.space-menu, .village-browse) { display: none; }
  .header-menu:has(.space-menu) { width: 280px; }
  .header-menu .menu-theme.theme-tabs { margin-top: 0; border-top: 0; }
}

@media (min-width: 1100px) {
  .side-rail-settings { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
  .side-rail-settings:empty { display: none; }
  .side-rail-settings .menu-category { padding: 8px 12px; font-size: .8rem; }
  .side-rail-settings .menu-category { flex-direction: column; align-items: stretch; gap: 6px; }
  .side-rail-settings .menu-category select { width: 100%; }
}

/* Tablet widths use the same bottom bar as phones; the left rail takes over from 1100px. */
@media (min-width: 701px) and (max-width: 1099px) {
  :root { --tab-h: 58px; }
  .tabbar { position: fixed; z-index: 30; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--sans); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tab-h); padding: 6px 2px; font-size: max(.7rem, var(--mobile-text-min, 0px)); opacity: .62; letter-spacing: 0; }
  .tabbar a[aria-current] { opacity: 1; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  body:not(:has(#feed)) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
  body:has(#feed) .actions { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
  body:has(#feed) .poem { padding-bottom: calc(var(--tab-h) + 52px); }
  .toast { bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom)); }
  .welcome { left: 10px; right: 10px; width: auto; bottom: calc(var(--tab-h, 58px) + 10px + env(safe-area-inset-bottom)); }
  :root { --header-h:56px; --tab-h:64px; }
  .tabbar { background:color-mix(in srgb,var(--reading-surface,var(--paper)) 96%,transparent); }
  .tabbar a, .tabbar .tab-village { opacity:.65; color:inherit; font-weight:400; gap:5px; font-size:.75rem; }
  .tabbar a[aria-current] { opacity:1; font-weight:600; }
  .tabbar a[aria-current] svg { stroke-width:1.8; }
  .tabbar a[aria-current] span { border:0; }
  .tabbar a[aria-current]::before { content:""; position:absolute; top:0; width:24px; height:2px; border-radius:0 0 2px 2px; background:currentColor; }
  .tabbar .tab-village svg { stroke-width:1.5; }
  .tabbar { grid-template-columns:repeat(5,minmax(0,1fr)); }
  :root { --tab-h: 76px; }
  .tabbar {
    --glass-surface: var(--reading-surface, var(--paper));
    --glass-fill: color-mix(in srgb, var(--glass-surface) 72%, transparent);
    --glass-edge: color-mix(in srgb, currentColor 18%, transparent);
    inset: auto auto calc(12px + env(safe-area-inset-bottom)) 50%;
    transform: translateX(-50%); width: min(390px, calc(100% - 32px));
    display: flex; align-items: stretch; gap: 12px; padding: 0;
    background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tabbar-primary, .tabbar-bundle > summary, .tabbar-bundle-panel {
    background: linear-gradient(145deg, #ffffff14, #ffffff02 55%), var(--glass-fill);
    border: 1px solid var(--glass-edge);
    box-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff08, 0 8px 28px #00000024;
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  }
  .tabbar-primary { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 32px; }
  .tabbar-primary > a { position: relative; min-height: 54px; border-radius: 26px; padding: 5px 12px; opacity: .8; }
  .tabbar-primary > a[aria-current] { background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 1px 0 #ffffff18; }
  .tabbar a[aria-current]::before { content: none; }
  .tabbar .tab-village { color: inherit; }
  .tabbar .tab-village svg { background: none; width: 22px; height: 22px; padding: 0; border-radius: 0; }
  .tabbar .tab-village[aria-current] svg { background: none; }
  .tabbar-bundle { position: relative; flex: 0 0 66px; }
  .tabbar-bundle > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; border-radius: 32px; cursor: pointer; list-style: none; font-size: .75rem; }
  .tabbar-bundle > summary::-webkit-details-marker { display: none; }
  .tabbar-bundle[open] > summary, .tabbar-bundle[data-current] > summary { background: linear-gradient(145deg, #ffffff20, #ffffff04), color-mix(in srgb, var(--glass-surface) 85%, transparent); border-color: color-mix(in srgb, currentColor 35%, transparent); }
  .tabbar-bundle[open] > summary svg { transform: rotate(90deg); }
  .tabbar-bundle > summary svg { transition: transform .2s ease; }
  .tabbar-bundle-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(240px, calc(100vw - 32px)); padding: 8px; border-radius: 24px; }
  .tabbar-bundle-panel > a { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 12px 14px; font-size: .9rem; opacity: 1; border-radius: 16px; }
  .tabbar-bundle-panel > a:hover, .tabbar-bundle-panel > a[aria-current] { background: color-mix(in srgb, currentColor 10%, transparent); }
  .tabbar-arrow { margin-left: auto; opacity: .45; }
  .tabbar-primary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tabbar-primary > a { padding-inline:4px; font-size:.7rem; }
  .tabbar .tab-village { font-size:.7rem; }
  .book-actions { right:12px; bottom:calc(var(--tab-h) + 88px + env(safe-area-inset-bottom)); }
  .book-reading-progress { bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
  .top .main-nav { display:none; }
  .mobile-space-name { display:block; grid-column:2; font:.8rem var(--sans); letter-spacing:.08em; opacity:.72; }
  .space-tabbar .tabbar-channel { flex:0 0 66px; min-height:64px; padding:6px 2px; border-radius:32px; gap:5px; opacity:.8; background:linear-gradient(145deg,#ffffff14,#ffffff02 55%),var(--glass-fill); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #ffffff08,0 8px 28px #00000024; backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); }
  .space-tabbar .tabbar-channel[aria-current] { opacity:1; background:linear-gradient(145deg,#ffffff20,#ffffff04),color-mix(in srgb,var(--glass-surface) 85%,transparent); border-color:color-mix(in srgb,currentColor 35%,transparent); }
  .space-tabbar .tabbar-channel svg { width:22px; height:22px; }
  .top .mobile-space-name{display:none}
  .feed .end>.site-footer { bottom:calc(var(--tab-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 701px) and (max-width: 1099px) { .top { grid-template-columns: minmax(0, 1fr) auto; } .top .header-end { grid-column: 2; } }

/* Keep the village entrance and poem list focused; replies open in the existing dialog. */
.village-board-page .village-welcome-copy h1{font:clamp(28px,4vw,40px)/1.4 var(--serif);letter-spacing:-.035em;color:var(--ink);margin:10px 0 14px}
.village-board-page .village-welcome-copy{padding:28px}
.village-board-page .village-welcome-view{max-height:280px}
.village-browse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0;font:14px/1.8 var(--sans)}
.village-browse>section{min-width:0;border:1px solid var(--line);border-radius:12px;padding:0 16px}
.village-browse h2{margin:0;padding:14px 0;font:inherit;font-weight:500;color:var(--v-green)}
.village-browse>section>div{display:flex;flex-direction:column;padding-bottom:12px}
.village-browse a{padding:8px 0;color:var(--ink-2)}
.village-browse a:focus-visible{outline:2px solid var(--v-green);outline-offset:3px}
.village-board-page .village-day-summary{margin-bottom:22px}
.village-board-page .village-layout{grid-template-columns:minmax(0,1fr) 248px;max-width:none;align-items:start}
@media(max-width:850px){.village-board-page .village-layout{grid-template-columns:minmax(0,1fr) 210px;gap:22px}}
@media(max-width:760px){.village-board-page .village-layout{grid-template-columns:minmax(0,1fr)}}
.village-board-page .square-card-original .village-threads,.village-board-page .square-preview-comments{display:none}
.village-board-page[data-square-view=simple] article:not(.square-expanded)>.square-card-preview{grid-template-columns:minmax(0,1fr)}
@media(max-width:650px){.village-browse{gap:6px;font-size:13px}.village-browse>section{padding:0 10px}.village-board-page .village-welcome-view{aspect-ratio:3/2;width:100%;max-height:220px}.village-board-page .village-welcome-copy{padding:20px}.village-board-page .village-welcome-actions{margin-top:16px}}
/* Library improvements: shelves, badges, today's poem, poet strip, sources */
.library-search-box>span,.library-author-box>span { white-space:nowrap; flex-shrink:0; }
.library-book-badges { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 4px; }
.library-book-badges span { padding:3px 8px; border:1px solid color-mix(in srgb,var(--seal) 35%,var(--line)); border-radius:999px; color:var(--seal); font:11px var(--sans); }
.library-poem-card-meta { display:block; margin-top:9px; color:var(--mute); font:11px var(--sans); }
.book-cover-portrait { position:absolute; z-index:1; right:22px; bottom:44px; width:56px; height:auto; aspect-ratio:1; object-fit:cover; object-position:50% 22%; border-radius:50%; border:1px solid #efddb84d; filter:grayscale(.15) sepia(.12); opacity:.92; }
.library-today { display:block; margin:6px 0 44px; padding:clamp(24px,5vw,44px); border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,var(--seal) 4%,var(--paper)); transition:border-color .2s; }
.library-today:hover { border-color:var(--seal); }
.library-today .eyebrow { color:var(--seal); font:11px var(--sans); letter-spacing:.15em; }
.library-today h2 { margin:14px 0 6px; font:400 clamp(26px,4vw,36px)/1.4 var(--serif); }
.library-today-author { margin:0 0 16px; color:var(--ink-2); font:13px var(--sans); }
.library-today-excerpt { margin:0 0 16px; max-width:640px; color:var(--ink-2); font:16px/1.9 var(--serif); }
.library-poet-strip { display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x mandatory; }
.library-poet-chip { flex:0 0 132px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border:1px solid var(--line); border-radius:15px; text-align:center; transition:border-color .2s; }
.library-poet-chip:hover { border-color:var(--seal); }
.library-poet-chip img { width:72px; height:72px; object-fit:cover; object-position:50% 22%; border-radius:50%; }
.library-poet-chip strong { font:400 15px/1.4 var(--serif); word-break:keep-all; }
.library-poet-chip span { color:var(--mute); font:11px var(--sans); }
.library-toc li small { display:block; color:var(--mute); font:12px var(--sans); }
.library-toc li .library-toc-author { margin-top:1px; }
.library-source-box { margin-top:18px; font:12px/1.8 var(--sans); color:var(--ink-2); }
.library-source-box summary { cursor:pointer; color:var(--seal); }
.library-sources { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:12px 0 0; }
.library-sources dt { color:var(--mute); white-space:nowrap; }
.library-sources dd { margin:0; overflow-wrap:anywhere; }
.library-sources a { text-decoration:underline; text-underline-offset:3px; }
.library-related { margin-top:56px; }
@media(max-width:700px) { .library-poet-chip { flex-basis:116px; }.book-cover-portrait { width:40px; right:14px; bottom:30px; }.library-sources { grid-template-columns:1fr; gap:2px; }.library-sources dd { margin-bottom:8px; } }

.quote-count { margin: 0 0 14px; font-family: var(--sans); font-size: max(.84rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.quote-count a { border-bottom: 1px solid currentColor; }
.quote-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.quote-list li { padding: 22px 2px; border-bottom: 1px solid var(--line); }
.quote-list blockquote { margin: 0; }
.quote-list p { margin: 0 0 10px; font-size: 1.12rem; line-height: 1.7; color: var(--ink); word-break: keep-all; }
.quote-list footer { font-family: var(--sans); font-size: max(.84rem, var(--mobile-text-min, 0px)); color: var(--ink-2); }
.quote-list cite { font-style: normal; }
.quote-tag { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .78em; white-space: nowrap; }
.quote-list .quote-original { font-size: .92rem; color: var(--ink-2); font-style: italic; }
.quote-credit { display: block; margin-top: 4px; font-size: .8em; }

.comic-search{max-width:760px;margin:28px auto;font:14px/1.8 var(--sans)}
.comic-search label{display:block;margin-bottom:8px;color:var(--ink);font-weight:600}
.comic-search-input{display:flex;gap:10px;flex-wrap:wrap}
.comic-search input{flex:1;min-width:160px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.comic-search p{margin-top:8px;color:var(--ink-2)}

/* A compact illustrated welcome, followed by always-visible village links. */
.village-board-page { --wall-accent: var(--village-green); --wall-sheet: var(--village-surface); --wall-sheet-line: var(--line); }
.village-board-page .village-kicker { color: var(--wall-accent); }
:is(.village-board-page, .wall-page) .village-day-summary { margin-bottom: 18px; }
:is(.village-board-page, .wall-page) .wall-heading { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; margin-bottom: 24px; }
.wall-heading-copy { padding: 18px 24px; border: 0; background: transparent; }
.wall-heading h1 { margin: 4px 0 10px; }
.wall-heading-copy .wall-heading-title { font-size: 24px; line-height: 1.45; margin-bottom: 10px; }
.wall-heading-copy .wall-heading-description { line-height: 1.7; }
.wall-heading-link { margin-top: 6px; padding: 6px 0; }
.wall-square-scene, .village-board-page .wall-heading .village-welcome-view { grid-row: auto; align-self: center; aspect-ratio: 3/2; max-height: none; border-radius: 18px; }
.wall-square-scene img { height: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.wall-square-scene picture { display: block; width: 100%; height: 100%; }
figure.wall-square-scene > img { position: absolute; inset: 0; }
.wall-square-scene figcaption { bottom: 8px; right: 8px; padding: 4px 8px; font-size: 10px; }
.village-browse { margin: 0 0 18px; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.village-browse > section { border: 0; border-radius: 0; padding: 0; }
.village-browse h2 { padding: 0 0 4px; font-size: 11px; }
.village-browse > section > div { flex-direction: row; flex-wrap: wrap; gap: 0 14px; padding: 0; }
.village-browse a { padding: 6px 0; }
@media (max-width: 650px) {
  :is(.village-board-page, .wall-page) .wall-heading { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; }
  .wall-heading-copy { padding: 0; }
  .wall-heading-copy .village-kicker { letter-spacing: 0; font-size: 10px !important; }
  .wall-heading h1 { font-size: 12px; margin: 6px 0 8px; }
  .wall-heading-copy .wall-heading-title { font-size: 18px; }
  .wall-heading-copy .wall-heading-description { font-size: 12px; }
  .wall-heading-copy br { display: none; }
  .wall-square-scene, .village-board-page .wall-heading .village-welcome-view { aspect-ratio: 3/4; max-height: 200px; }
  .wall-square-scene figcaption { position: absolute; padding: 5px 7px; border-radius: 8px; font-size: 9px; }
  .wall-square-scene img { min-height: 0; }
  .village-browse { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
  .village-browse > section { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; padding: 0; }
  .village-browse h2 { padding: 0; }
  .village-browse > section > div { gap: 0 12px; }
  .village-browse a { font-size: 12px; padding: 8px 0; }
}
:is(.village-board-page, .wall-page) .square-tabs { margin-bottom: 16px; }
:is(.village-board-page, .wall-page) .square-tabs a { padding-top: 10px; padding-bottom: 10px; }
:is(.village-board-heading, .wall-board-sign) .village-kicker { margin: 0; }
:is(.village-board-heading, .wall-board-sign) h2 { margin: 4px 0 0; font-size: 24px; }
:is(.village-board-page, .wall-page) .square-board-description { margin-bottom: 12px; }
:is(.village-board-page, .wall-page) .square-board-tools { padding: 8px 0; margin-bottom: 12px; }
@media (max-width: 650px) { .village-browse a { padding: 6px 0; } }
@media (max-width: 760px) {
  :is(.village-board-page, .wall-page) .wall-heading { grid-template-columns: minmax(0, 1fr); }
  :is(.village-board-page, .wall-page) .wall-heading-copy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  :is(.village-board-page, .wall-page) .wall-square-scene { display: block; width: 100%; aspect-ratio: 3/2; max-height: none; }
  :is(.village-board-page, .wall-page) .wall-square-scene figcaption,
  .village-board-page .village-hero-slide > span { display: none; }
}
@media (max-width: 760px) {
  .village-board-page .village-neighbours { display: none; }
}
.village-hero-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:0 4px;border-radius:999px;background:#0004}
.village-hero-dots button{display:grid;place-items:center;width:36px;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:50%}
.village-hero-dots button::after{content:'';width:7px;height:7px;border-radius:50%;background:#ffffff80;box-shadow:0 0 2px #0005}
.village-hero-dots button[aria-current=true]::after{background:#fff;transform:scale(1.3)}
.village-hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
@media (max-width: 760px) {
  :is(.village-board-page, .wall-page) .wall-heading { display: none; }
}

.comic-story-banners{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1104px}
.comic-story-banners .journey-banner-compact{grid-template-columns:140px minmax(0,1fr)}
.comic-story-banners .journey-banner-art{position:relative;min-height:0;align-self:stretch;overflow:hidden}
.comic-story-banners .journey-banner-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comic-story-banners .journey-banner-copy{min-width:0;padding:14px 12px 18px}
.comic-story-banners .journey-banner-copy h2{font-size:20px}
.comic-story-banners .journey-banner-actions{margin-top:14px}
.comic-story-banners .journey-banner-actions>a{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;max-width:100%;padding:10px 14px;text-align:center;font:600 13px/1.5 var(--sans)}
.comic-story-banners .sidam-story-banner{background:radial-gradient(ellipse at bottom right,#9b34332b,transparent 80%),var(--village-surface);border-color:color-mix(in srgb,var(--line) 65%,#95464c)}
.sidam-story-banner .village-welcome-primary{background:color-mix(in srgb,var(--paper) 82%,#a65358);color:var(--ink)}
@media(min-width:901px){
  .comic-story-banners .journey-banner-copy>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:900px){
  .comic-story-banners{gap:8px}
  .comic-story-banners .journey-banner-compact{display:flex;flex-direction:column;align-items:stretch}
  .comic-story-banners .journey-banner-art{width:100%;height:auto;aspect-ratio:1;flex:none;align-self:stretch;margin:0;border-radius:0}
  .comic-story-banners .journey-banner-copy{padding:12px 8px 16px;flex:1;display:flex;flex-direction:column}
  .comic-story-banners .journey-banner-copy h2{font-size:16px;word-break:keep-all}
  .comic-story-banners .journey-banner-copy>p{font-size:13px}
  .comic-story-banners .journey-banner-actions{margin-top:auto;padding-top:16px}
  .comic-story-banners .journey-banner-actions>a{width:100%;font-size:12px;padding:10px 8px}
}

.village-comic-tabs .sidam-story-tab{position:relative;isolation:isolate;color:color-mix(in srgb,var(--ink) 78%,#a45458)}
.sidam-story-tab>span{position:relative;z-index:1}
.sidam-tab-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8}
.village-comic-tabs .sidam-story-tab:hover .sidam-tab-glow,.village-comic-tabs .sidam-story-tab:focus-visible .sidam-tab-glow{opacity:1}
.village-comic-tabs .sidam-story-tab[aria-current="page"]{border-color:#9a5358;color:var(--ink)}

.village-back-top{position:fixed;right:20px;bottom:24px;z-index:25;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:linear-gradient(145deg,#ffffff26,#ffffff04 55%),color-mix(in srgb,var(--paper) 68%,transparent);color:var(--ink);border-color:color-mix(in srgb,currentColor 20%,transparent);box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff10,0 8px 28px #0003;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);cursor:pointer}
.village-back-top[hidden]{display:none}
.village-back-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.village-back-top:hover{background:linear-gradient(145deg,#ffffff38,#ffffff08 55%),color-mix(in srgb,var(--paper) 78%,transparent)}
.village-back-top:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:1099px){.village-back-top{right:16px;bottom:calc(var(--tab-h,64px) + env(safe-area-inset-bottom) + 24px)}}

.reader-chrome>.top,.reader-chrome>.tabbar,.reader-chrome>.village-back-top{transition:transform .22s ease,opacity .22s ease,visibility .22s}
.reader-chrome-hidden>.top{transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none}
.reader-chrome-hidden>.village-back-top{opacity:0;visibility:hidden;pointer-events:none}
.reader-chrome-hidden>.tabbar{transform:translateY(calc(100% + 32px + env(safe-area-inset-bottom)));opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.reader-chrome>.top,.reader-chrome>.tabbar,.reader-chrome>.village-back-top{transition:none}}
@supports not (backdrop-filter:blur(1px)){.village-back-top{background:var(--paper)}}

:root[data-story="sidam"][data-theme="dark"][data-scene="village"]{--paper:#180f12;--ink:#eedfdd;--ink-2:#c4acab;--mute:#ac9092;--line:#493037;--seal:#d48b88;--village-green:#d3a1a2;--village-surface:#28191e;--village-wash:#342027}

.village-about-tabs{position:sticky;top:var(--main-header-h,64px);z-index:10;display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;margin:0 0 28px;padding:8px 0;border-bottom:1px solid var(--line);background:var(--paper);font:500 14px/1.5 var(--sans)}
.village-about-tabs a{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:10px 16px;border-radius:12px;color:var(--ink-2);white-space:nowrap}
.village-about-tabs a:hover{background:var(--village-wash)}
.village-about-tabs a[aria-selected="true"]{background:var(--village-wash);color:var(--village-green);font-weight:700;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--village-green) 25%,transparent)}
.village-about-renewed [role="tabpanel"]{margin-top:24px;scroll-margin-top:calc(var(--main-header-h,64px) + 76px)}
@media(max-width:600px){.village-about-tabs{top:var(--main-header-h,56px);font-size:13px}.village-about-tabs a{padding:10px 13px}}

.village-about-renewed [role="tabpanel"]:focus-visible{outline:1px solid color-mix(in srgb,var(--village-green) 35%,transparent);outline-offset:8px;border-radius:12px}

/* PC: 내 채널은 사이드 레일 대신 상단 오른쪽 원형 버튼으로 연다. */
.header-me { display:none; }
@media (min-width:1100px) {
  .header-me { display:grid; place-items:center; width:38px; height:38px; margin-left:6px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb,var(--ink) 8%,transparent); color:inherit; }
  .header-me:hover, .header-me[aria-current] { background:color-mix(in srgb,var(--ink) 16%,transparent); border-color:currentColor; }
  .header-me svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
}
@media (min-width:1100px) { .header-me { overflow:hidden; } .header-me img { width:100%; height:100%; object-fit:cover; object-position:50% 12%; } }

/* Phones: the reading feed sits between the header and the floating tab bar. */
@media (max-width: 700px) {
  /* Body and author are centered together (sizeCard sets --author-room). */
  #feed .poem:not(.long) .poem-inner { top: calc(var(--author-room, 0px) / -2); }
  /* Keep the next-poem hint above the floating tab bar instead of under it. */
  #feed .poem-next { bottom: calc(var(--tab-h) + 4px + env(safe-area-inset-bottom)); }
  /* 시뜰 header: a light tint over the scrolling artwork, easing to the new card color. */
  body[data-page]:has(#feed) .top { background: color-mix(in srgb, var(--reading-surface, var(--paper)) 28%, transparent); transition: color .6s, background-color .6s; }
}

/* PC: the top menu moves to the side rail, so keep 로그인·내 정보 in the right column instead of the middle one. */
@media (min-width: 1100px) { .top .header-end { grid-column: 3; justify-self: end; } }

/* 이전·다음 시 버튼: 오른쪽 액션 버튼과 같은 세로줄, 그 바로 위의 빈 공간에 둔다(--side-bottom은 feed.ts가 계산). */
.side { display: flex; right: clamp(10px, 2.5vw, 36px); top: auto; bottom: var(--side-bottom, 60%); transform: none; gap: 12px; }
.side .ghost-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: inherit; border-color: color-mix(in srgb, currentColor 27%, transparent); background: color-mix(in srgb, currentColor 4%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: .85; transition: opacity .25s, background .25s, border-color .25s, transform .2s; }
.side .ghost-btn:hover { background: color-mix(in srgb, currentColor 13%, transparent); border-color: color-mix(in srgb, currentColor 55%, transparent); }
.side .ghost-btn:active { transform: scale(.92); }
.side .ghost-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* PC: 액션 줄과 화살표 모두 오른쪽 끝에 붙인다(댓글 패널이 열리면 패널 왼쪽으로 비킨다). */
@media (hover: hover) and (min-width: 900px) { .actions { --act-r: clamp(14px, 3vw, 40px); } .side { right: clamp(14px, 3vw, 40px); } body.float-open .actions { --act-r: 424px; } body.float-open .side { right: 424px; } }
@media (max-width: 700px) { .side { right: 12px; } }

/* 다음 시 미리보기: 첫 줄은 말줄임, 시인 이름은 항상 보이게. */
.poem-next { display: flex; align-items: baseline; justify-content: center; gap: .6em; }
.poem-next .pn-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.poem-next .pn-author { flex: none; opacity: .8; font-size: .72rem; letter-spacing: .04em; }
.poem-next .pn-author::before { content: "— "; }

/* 오늘의 시 표시, 시 해설, 끝 카드의 서재 링크. */
.poem-meta .daily-tag { color: var(--seal); border-color: var(--seal); opacity: .9; }
@media (max-width: 700px) { .poem-meta .daily-tag { display: inline-block; } }
.cr-guide { margin: 4px 0 0; font-size: .95rem; line-height: 1.75; }
.end .end-library { display: block; margin-top: 1.4rem; }

/* 내 채널 · 시뜰 읽기 설정 */
.reading-settings { display: grid; gap: 22px; padding: 18px 22px 22px; font-family: var(--sans); }
.reading-settings h3 { margin: 0 0 8px; font-size: 1rem; }
.reading-settings p { margin: 0 0 10px; font-size: .88rem; line-height: 1.7; color: var(--ink-2); }
.reading-effects { display: grid; gap: 8px; margin: 14px 0; }
.reading-effects > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; line-height: 1.65; }
.reading-effects dt { font-weight: 700; }
.reading-effects dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.reading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.reading-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; }
.reading-result { margin-top: 12px; color: var(--village-green); font-weight: 600; }
@media (max-width: 480px) { .reading-effects > div { grid-template-columns: 1fr; gap: 2px; } }
.channel-settings .settings-label { display: inline-flex; align-items: center; gap: 7px; }
.channel-settings .settings-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 함께광장(우리들의 시·이웃들의 한마디) 정리: 소개는 짧은 띠, 탭이 게시판 제목, 도구는 한 줄.
   시담의 지금(.village-day-summary)은 건드리지 않는다. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 761px) {
  /* 사진은 3:2 그대로 두고 열 폭만 줄여 높이를 약 350px로 낮춘다(잘리는 부분 없음). */
  :is(.village-board-page, .wall-page) .wall-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px; align-items: center; }
  :is(.village-board-page, .wall-page) .wall-heading-copy { padding: 0 8px; }
  :is(.village-board-page, .wall-page) .wall-heading-copy .wall-heading-title { font-size: clamp(26px, 2.6vw, 32px); margin: 10px 0 12px; }
  :is(.village-board-page, .wall-page) .wall-heading-copy .wall-heading-description { font-size: 15px; line-height: 1.8; }
}
/* 탭이 곧 게시판 제목: 이름은 크게, 부제는 읽히게. 좁은 화면에서도 부제를 아래 줄로 보인다. */
:is(.village-board-page, .wall-page) .square-tabs span { font-size: 24px; }
:is(.village-board-page, .wall-page) .square-tabs small { display: inline; font-size: 14px; }
@media (max-width: 850px) {
  :is(.village-board-page, .wall-page) .square-tabs a { flex-direction: column; gap: 2px; }
  :is(.village-board-page, .wall-page) .square-tabs span { font-size: 20px; }
  :is(.village-board-page, .wall-page) .square-tabs small { display: block; font-size: 12px; text-align: center; }
}
/* 도구 한 줄: 분류·필터·안내·보기. 글씨는 14px. */
:is(.village-board-page, .wall-page) .square-board-tools { gap: 10px; }
:is(.village-board-page, .wall-page) .square-friend-filter, :is(.village-board-page, .wall-page) .square-board-tools .square-filter-selection { font-size: 14px; }
:is(.village-board-page, .wall-page) .square-view-picker button { font-size: 14px; }
.square-help { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; color: var(--v-green, var(--village-green)); font: 600 15px var(--sans); cursor: pointer; }
.square-help:hover { background: var(--village-wash); }
.square-help:focus-visible { outline: 2px solid var(--village-green); outline-offset: 3px; }
.square-board-tools .square-help + .square-view-picker { margin-left: 0; }
/* 분류가 한 줄을 다 차지하지 않게: 넓으면 필터·안내·보기와 한 줄, 좁으면 자연스럽게 줄바꿈. */
.wall-page .square-board-tools #wallTopics { width: auto; flex: 0 1 auto; }
.wall-page .square-board-tools #wallTopics button { font-size: 14px; }

/* Inline webtoon comments (reuses the .cm-* item styles of the poem comment card) */

/* Shared text actions: rounded frame, inset surface and compact sans-serif labels. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.line-btn, .seg-item, .village-album-tabs a, .journey-reader-nav a, .village-welcome-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 18px; border: 3px solid var(--village-wash); border-radius: 12px;
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), inset 0 1px 2px #0001;
  backdrop-filter: none; -webkit-backdrop-filter: none; filter: none;
  font: 500 max(14px, var(--mobile-text-min, 0px))/1.5 var(--sans); letter-spacing: 0;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
:is(.line-btn, .seg-item, .village-album-tabs a, .journey-reader-nav a, .village-welcome-primary):hover:not(:disabled) { background: var(--village-wash); border-color: var(--line); color: var(--ink); }
:is(.line-btn, .seg-item, .village-album-tabs a, .journey-reader-nav a, .village-welcome-primary):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.village-album-tabs { flex-wrap: wrap; }
.village-album-tabs a[aria-current=page], .village-photo-formats .line-btn[aria-pressed=true] { background: var(--village-wash); border-color: var(--village-green); color: var(--ink); font-weight: 600; }
.sidam-story-banner .village-welcome-primary { background: var(--paper); color: var(--ink); }
.sidam-story-banner .village-welcome-primary:hover { background: var(--village-wash); color: var(--ink); }
.journey-reader-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: 760px; margin: 24px auto 12px; }
.journey-reader-bar .journey-scroll-hint { margin: 0; flex: 1 1 260px; }
.journey-reader-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.journey-reader-actions .journey-edition-tools { margin: 0; }
@media (max-width: 600px) { .seg-item, .village-album-tabs a, .journey-reader-nav a, .village-welcome-primary { padding: 10px 14px; letter-spacing: 0; } }

/* Webtoon comments */
.wc { max-width: 760px; margin: 24px auto 0; color: var(--ink); font: 400 15px/1.65 "Gulim", "굴림", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Arial, sans-serif; letter-spacing: normal; }
.wc-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; }
.wc-toggle:hover { background: color-mix(in srgb, var(--village-green) 5%, var(--paper)); }
.wc :is(button, a, textarea):focus-visible { outline: 2px solid var(--village-green); outline-offset: 3px; }
.wc-ico { width: 19px; height: 19px; fill: none; stroke: var(--village-green); stroke-width: 1.6; stroke-linejoin: round; }
.wc-num { min-width: 26px; margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--village-wash); color: var(--village-green); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.wc-body { margin-top: 8px; padding: 0 18px; }
.wc-form { margin-top: 14px; }
.wc .cm-item { margin: 0; padding: 20px 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.wc .cm-meta { flex-wrap: wrap; gap: 8px; font-size: 12px; line-height: 1.5; }
.wc .cm-author { font-size: 13px; }
.wc .cm-meta time { margin-left: auto; color: var(--ink-2); }
.wc .cm-body { margin: 9px 0 8px; color: var(--ink); font-size: 15px; line-height: 1.75; }
.wc .cm-actions { gap: 16px; }
.wc .cm-act { min-height: 36px; font-size: 12px; }
.wc .cm-badge { padding: 2px 7px; background: var(--village-wash); color: var(--village-green); font-size: 11px; }
.wc .cm-replies { margin: 12px 0 0 6px; padding-left: 14px; border-left: 2px solid var(--line); }
.wc .cm-reply { margin: 8px 0 0; padding: 12px 14px 8px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, var(--paper)); }
.wc .cm-form { gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.wc .cm-form:focus-within { border-color: var(--village-green); }
.wc .cm-input { min-width: 0; padding: 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 16px; }
.wc .cm-input::placeholder { color: var(--ink-2); opacity: 1; }
.wc .cm-send { min-height: 44px; padding: 10px 16px; border-radius: 10px; background: var(--village-green); color: var(--paper); font-size: 13px; font-weight: 600; }
.wc .cm-send:hover:not(:disabled) { filter: brightness(.93); }
.wc .cm-more { width: 100%; min-height: 44px; margin-top: 14px; border-radius: 10px; font-size: 13px; }
.wc .cm-empty { padding: 40px 12px; color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.wc .cm-login { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--village-wash); color: var(--village-green); font-size: 14px; }
.wc-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: #0008; }
.wc-sheet { display: flex; flex-direction: column; width: 100%; max-height: 82dvh; height: 82dvh; border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -8px 40px #0002; animation: wc-up .22s ease-out; }
.wc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.wc-sheet-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.wc-close { width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); }
.wc-close:hover { background: var(--village-wash); }
.wc-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 16px; }
.wc-sheet .wc-body { margin: 0; padding: 0; }
.wc-sheet-form { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.wc-sheet-form .wc-form, .wc-sheet-form .cm-login { margin: 0; }
body.wc-lock { overflow: hidden; }
@keyframes wc-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wc-sheet { animation: none; } }

.diary-sheet[data-author="operator"],.village-poem[data-author="operator"],.village-comment[data-author="operator"],.wall-post[data-author="operator"],.wall-comment[data-author="operator"],.cm-item[data-author="operator"]{--tint:#596169}

.diary-sheet[data-author="rodam"],.village-poem[data-author="rodam"],.village-comment[data-author="rodam"],.wall-post[data-author="rodam"],.wall-comment[data-author="rodam"],.cm-item[data-author="rodam"]{--tint:#91A4BD}

.diary-sheet[data-author="bodam"],.village-poem[data-author="bodam"],.village-comment[data-author="bodam"],.wall-post[data-author="bodam"],.wall-comment[data-author="bodam"],.cm-item[data-author="bodam"]{--tint:#C5B793}

/* Resident theme colours remain subtle on the neighbours’ message sheets. */
.wall-post[data-author]{background:color-mix(in srgb,var(--tint) 6%,var(--wall-sheet));border-color:color-mix(in srgb,var(--tint) 24%,var(--wall-sheet-line))}

.wall-edit-form{display:grid;gap:12px;margin:20px 0;font-family:var(--sans)}
.wall-edit-form textarea{width:100%;min-height:110px;resize:vertical;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;line-height:1.8}
.wall-edit-form select{justify-self:start;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit}
.wall-edit-actions{display:flex;gap:18px;align-items:center}.wall-edit-error{margin:0;color:var(--ink-2);font-size:13px}