/* ============================================================
   idle.ipe.rest — "The Quiet Frequency" (2026-10-20)
   Shared stylesheet for the home page and /journal/ pages.
   Light is the default (Davy, 10-18); dark via the header toggle.
   Breakpoints: 1100 / 760 / 420. Bump ?v= in every page when this file changes.
   ============================================================ */
:root {
  --bg: #f6f8fa;
  --band-top: #eef2f6;
  --band-bottom: #f4f7f9;
  --surface: #ffffff;
  --surface-2: #eff3f7;
  --surface-3: #e7edf3;
  --text: #1f2933;
  --text-2: #33404c;
  --muted: #56636f;        /* 5.9:1 on --bg */
  --muted-2: #62707c;      /* 4.9:1 on --bg — mono meta */
  --line: #dbe2e9;
  --line-strong: #c7d1db;
  --accent: #36577a;       /* links, 7:1 on white */
  --play-bg: #34414f;
  --play-fg: #ffffff;
  --cover-shadow: rgba(39, 56, 76, .22);
  --lp-1: #15181c;
  --lp-2: #22272d;
  --focus: #36577a;
  --radius: 10px;
  --max: 1120px;
  --gutter: 32px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans", Roboto,
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
    "Geeza Pro", "Noto Sans Arabic", "Segoe UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Noto Sans Mono CJK KR", monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #11151a;
  --band-top: #161c23;
  --band-bottom: #12171c;
  --surface: #181f27;
  --surface-2: #1b232c;
  --surface-3: #212b35;
  --text: #e7ecf1;
  --text-2: #d0d8e0;
  --muted: #a6b2bd;
  --muted-2: #95a2ae;
  --line: #29333e;
  --line-strong: #364250;
  --accent: #a3bfdb;
  --play-bg: #d3dde7;
  --play-fg: #11151a;
  --cover-shadow: rgba(0, 0, 0, .45);
  --lp-1: #0b0d10;
  --lp-2: #1b1f24;
  --focus: #a3bfdb;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text-2);
  background: var(--bg);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--text); margin: 0; font-weight: 600; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: anywhere; }
p { margin: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--mono); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); }
.skip-link:focus { top: 12px; }

.shell { width: min(calc(100% - 2 * var(--gutter)), var(--max)); margin-inline: auto; }

/* ---------- header ---------- */
.band { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); border-bottom: 1px solid var(--line); }
.band-plain { background: var(--band-top); border-bottom: 1px solid var(--line); }
.site-header { position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand-group { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font: 600 26px/1 var(--sans); letter-spacing: -.03em; text-decoration: none; }
.brand-tag { color: var(--muted-2); font: 12px/1.2 var(--mono); }
.nav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-2); font-size: 14px; text-decoration: none; border-radius: 8px; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.tools { display: flex; align-items: center; gap: 10px; }
.tools::before { content: ""; width: 1px; height: 22px; background: var(--line-strong); margin-inline-end: 6px; }
.theme-switch {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 6px; border: 0; background: transparent; cursor: pointer; color: var(--text-2);
}
.theme-switch svg { width: 20px; height: 20px; }
.theme-switch .i-moon { display: none; }
:root[data-theme="dark"] .theme-switch .i-moon { display: block; }
:root[data-theme="dark"] .theme-switch .i-sun { display: none; }
.switch-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-strong); }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s ease; }
:root[data-theme="dark"] .switch-track { background: var(--accent); }
:root[data-theme="dark"] .switch-track::after { transform: translateX(18px); background: var(--bg); }
[dir="rtl"] .switch-track::after { left: auto; right: 2px; }
[dir="rtl"]:root[data-theme="dark"] .switch-track::after, :root[dir="rtl"][data-theme="dark"] .switch-track::after { transform: translateX(-18px); }
select.lang {
  height: 44px; min-width: 64px; padding: 0 26px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-2); font: 13px/1 var(--mono); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 10px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
[dir="rtl"] select.lang { padding: 0 12px 0 26px; background-position: left 10px center, left 14px center; }
select.lang option { color: #1f2933; background: #fff; }
.lang-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text-2); font-size: 13px; text-decoration: none; }
.lang-link:hover { color: var(--accent); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; cursor: pointer; place-items: center; }
.menu-btn svg { width: 20px; height: 20px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; padding: 44px 0 36px; }
.eyebrow { color: var(--muted-2); font: 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 18px 0 16px; font: 500 clamp(34px, 4.1vw, 48px)/1.16 var(--sans); letter-spacing: -.03em; }
.hero-lead { color: var(--text-2); font-size: 18px; line-height: 1.5; }
.hero-body { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: 15px; }
.hero-rule { width: 32px; height: 2px; margin: 22px 0 0; background: var(--accent); opacity: .6; border: 0; }
.art { --cover: clamp(240px, 27vw, 330px); display: flex; justify-content: center; align-items: center; gap: 24px; }
.art-stage { position: relative; width: calc(var(--cover) * 1.28); height: var(--cover); flex: none; }
.art-cover {
  position: absolute; inset: 0 auto 0 0; z-index: 2; width: var(--cover); height: var(--cover); object-fit: cover;
  border-radius: 4px; box-shadow: 0 22px 44px -18px var(--cover-shadow), 0 2px 6px rgba(20, 30, 40, .12);
}
.lp {
  position: absolute; z-index: 1; top: 4%; left: calc(var(--cover) * .36); width: calc(var(--cover) * .92); height: calc(var(--cover) * .92);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, var(--lp-1) 0 1.4px, var(--lp-2) 1.4px 3px),
    var(--lp-1);
  box-shadow: 0 16px 34px -14px rgba(10, 15, 20, .5), inset 0 0 0 1px rgba(255,255,255,.05);
}
.lp::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 12%, rgba(255,255,255,.10) 17%, transparent 23% 62%, rgba(255,255,255,.07) 67%, transparent 73%);
}
.lp-label {
  position: absolute; top: 50%; left: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%;
  background: url("covers/dear-you.jpg") center / cover no-repeat, #c9b79a;
  box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}
.lp-label::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9%; height: 9%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--band-top); }
.art-vertical {
  writing-mode: vertical-rl; color: var(--muted-2); font: 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  align-self: flex-start; padding-top: 6px; border-inline-start: 0;
}

/* ---------- player bar ---------- */
.player-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 22px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 26px -18px rgba(30, 45, 60, .35);
}
.pb-thumb { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; }
.pb-meta { min-width: 0; }
.pb-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pb-no { color: var(--muted-2); font: 12px/1 var(--mono); }
.pb-title { color: var(--text); font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { display: block; margin-top: 4px; padding-inline-start: 30px; color: var(--muted-2); font: 12px/1.3 var(--mono); }
.pb-controls { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
.pb-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--play-bg); color: var(--play-fg); text-decoration: none; box-shadow: 0 6px 16px -8px rgba(30, 45, 60, .6); }
.pb-play svg { width: 18px; height: 18px; margin-inline-start: 3px; }
.pb-side { display: flex; align-items: center; gap: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
.seg-label { margin-inline-end: 8px; color: var(--muted-2); font: 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.seg button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 12px/1 var(--mono); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); font-weight: 600; }
.yt-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text-2); font-size: 13px; text-decoration: none; }
.yt-link:hover { border-color: var(--accent); color: var(--accent); }
.yt-link svg { width: 18px; height: 18px; flex: none; }

/* ---------- ad slots (placeholders only — no ad code until AdSense approval) ---------- */
.ad-slot {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 120px; margin: 24px 0 0; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); overflow: hidden;
}
.ad-label { position: absolute; top: 10px; inset-inline-start: 14px; color: var(--muted-2); font: 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.band .ad-slot { margin-bottom: 40px; }
/* AdSense not approved yet: <html data-ads="off"> hides every slot (no empty gap). Set data-ads="on" to show them. */
[data-ads="off"] .ad-slot { display: none !important; }
[hidden] { display: none !important; }

/* ---------- sections ---------- */
.section { padding: 56px 0 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; margin-bottom: 22px; }
.section-head h2 { font: 500 26px/1.2 var(--sans); }
.section-head > div { min-width: 0; }
.section-head > p.section-sub { }
.section-sub { margin-top: 6px; color: var(--muted-2); font: 13px/1.5 var(--mono); }
.more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; color: var(--accent); font-size: 14px; text-decoration: none; }
.more-link:hover { text-decoration: underline; }

/* album + tracklist */
.album { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.album-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; box-shadow: 0 18px 36px -22px var(--cover-shadow); }
.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tracklist li { border-bottom: 1px solid var(--line); }
.track { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px; color: var(--text-2); text-decoration: none; border-radius: 6px; }
.track:hover { background: var(--surface-2); color: var(--text); }
.track:hover .t-play { color: var(--accent); border-color: var(--accent); }
.t-no { color: var(--muted-2); font: 12px/1 var(--mono); }
.t-play { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--text-2); }
.t-play svg { width: 10px; height: 10px; margin-inline-start: 2px; }
.t-title { font-size: 15px; overflow-wrap: anywhere; }
.t-code { color: var(--muted-2); font: 12px/1 var(--mono); }
.album-note { margin-top: 14px; color: var(--muted); font-size: 14px; }

/* singles */
.singles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.single { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.single-art { position: relative; width: 112px; height: 84px; border-radius: 4px; overflow: hidden; }
.single-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.single-art span { position: absolute; left: 10px; bottom: 8px; font: 10px/1 var(--mono); }
.art-morning { background: linear-gradient(160deg, #cfe0f0 0%, #e9eff5 55%, #f7efe2 100%); color: #3a5068; }
.art-night { background: linear-gradient(160deg, #26364a 0%, #1a2433 60%, #121923 100%); color: #c8d6e4; }
.single h3 { font: 500 17px/1.3 var(--sans); }
.single .s-meta { margin-top: 4px; color: var(--muted-2); font: 11px/1.4 var(--mono); }
.single .s-desc { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.round-play { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--text-2); text-decoration: none; }
.round-play:hover { border-color: var(--accent); color: var(--accent); }
.round-play svg { width: 12px; height: 12px; margin-inline-start: 2px; }

/* journal cards (home + list) */
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.j-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 22px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.j-card:hover { border-color: var(--accent); }
.j-card:focus-visible { border-radius: var(--radius); }
.j-card:hover h3 { color: var(--accent); }
.j-date { color: var(--muted-2); font: 12px/1.4 var(--mono); }
.j-date .j-cat { white-space: nowrap; }  /* time may wrap: the viewer's-time-zone text can be longer than the static KST one */
.j-date time { direction: ltr; unicode-bidi: isolate; }
.j-card h3 { font: 500 19px/1.35 var(--sans); overflow-wrap: anywhere; }
.j-card p { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.j-card .more-link { margin-top: auto; }
.empty-note { padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.empty-note strong { display: block; color: var(--text); font-weight: 500; }

/* about / how it's made */
.about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; padding: 30px 32px; background: var(--surface-2); border-radius: var(--radius); }
.about-head { padding-inline-end: 32px; border-inline-end: 1px solid var(--line-strong); }
.about-head h2 { font: 500 24px/1.25 var(--sans); }
.about-body { padding-inline-start: 32px; color: var(--muted); font-size: 15px; }
.about-body p + p { margin-top: 12px; }
.about-more { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.card { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card h3 { font: 500 18px/1.35 var(--sans); }
.card p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.app-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; }
.app-row img { width: 72px; height: 72px; border-radius: 18px; border: 1px solid var(--line); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.badge { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font: 11px/1.2 var(--mono); }

/* ---------- footer ---------- */
.site-footer { margin-top: 64px; border-top: 1px solid var(--line); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; flex-wrap: wrap; }
.footer-brand .brand { font-size: 24px; }
.footer-brand p { margin-top: 6px; color: var(--muted-2); font: 12px/1.4 var(--mono); }
.footer-links, .social { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.footer-links a, .social a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 10px; color: var(--text-2); font-size: 13px; text-decoration: none; }
.footer-links a:hover, .social a:hover { color: var(--accent); }
.social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 28px; border-top: 1px solid var(--line); color: var(--muted-2); font: 12px/1.4 var(--mono); }
.footer-bottom { align-items: center; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }

/* ---------- journal pages ---------- */
.page-head { padding: 48px 0 32px; }
.page-head h1 { font: 500 clamp(30px, 4vw, 42px)/1.2 var(--sans); }
.page-head p { margin-top: 10px; color: var(--muted); }
.j-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.j-list li { padding: 24px 0; border-bottom: 1px solid var(--line); }
.j-list h2 { margin-top: 6px; font: 500 21px/1.35 var(--sans); }
.j-list h2 a { text-decoration: none; }
.j-list h2 a:hover { color: var(--accent); }
.j-list p { margin-top: 6px; color: var(--muted); }
.article { max-width: 720px; margin-inline: auto; }
.article-head { padding: 48px 0 28px; border-bottom: 1px solid var(--line); }
.j-no { display: inline-block; margin-inline-end: 10px; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-weight: 600; white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; font: 14px/1 var(--mono); }
.pager a, .pager .pg-num { min-width: 40px; min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .pg-num[aria-current] { background: var(--text); border-color: var(--text); color: var(--bg, #fff); font-weight: 600; }
.article-head .j-date { display: flex; flex-wrap: wrap; gap: 10px; }
.article-head h1 { margin-top: 12px; font: 500 clamp(28px, 4vw, 40px)/1.25 var(--sans); }
.article-head p { margin-top: 12px; color: var(--muted); font-size: 17px; }
.draft-flag { display: inline-block; padding: 2px 8px; border: 1px solid #b4532a; border-radius: 999px; color: #b4532a; font: 11px/1.4 var(--mono); }
.prose { padding: 28px 0 8px; color: var(--text-2); font-size: 17px; line-height: 1.8; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font: 600 23px/1.35 var(--sans); }
.prose h3 { margin-top: 1.5em; font: 600 19px/1.4 var(--sans); }
.prose a { color: var(--accent); }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-inline-start: 3px solid var(--line-strong); color: var(--muted); }
.prose code { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); font: .88em var(--mono); }
.prose pre { overflow-x: auto; padding: 16px; border-radius: 8px; background: var(--surface-2); font: 14px/1.6 var(--mono); }
.prose pre code { padding: 0; background: none; }
.prose .table-wrap { overflow-x: auto; margin: 1.2em 0; }
.prose table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { color: var(--text); font-weight: 600; white-space: nowrap; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose img { border-radius: 6px; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 8px; color: var(--muted-2); font-size: 14px; line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.doc { max-width: 760px; margin-inline: auto; padding-bottom: 8px; }
.doc .prose { padding-top: 8px; }
.doc .meta { margin-top: 12px; color: var(--muted-2); font: 13px/1.5 var(--mono); }
html[lang="ko"] .doc .meta { font-family: var(--sans); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.doc-table th, .doc-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.doc-table th { color: var(--text); font-weight: 600; }
.doc-table th, .doc-table td { overflow-wrap: anywhere; hyphens: auto; }
.table-wrap { overflow-x: auto; }
.prose .contact-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.prose .contact-card a { overflow-wrap: anywhere; }
.article-foot { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0 0; border-top: 1px solid var(--line); margin-top: 24px; }

/* ============ tablet ≤1100 ============ */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .art { --cover: clamp(240px, 40vw, 320px); }
  .player-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pb-side { grid-column: 1 / -1; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
  .singles { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ mobile ≤760 ============ */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .journal-grid { grid-template-columns: 1fr; }
  .header-inner { min-height: 64px; gap: 8px; }
  .brand { font-size: 23px; }
  .brand-tag { display: none; }
  .tools { margin-inline-start: auto; gap: 6px; }
  .tools::before { display: none; }
  .switch-track { display: none; }
  .theme-switch { width: 44px; justify-content: center; padding: 0; }
  select.lang { min-width: 58px; padding: 0 22px 0 10px; }
  .menu-btn { display: grid; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px 16px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(20, 30, 40, .35);
  }
  .nav.is-open { display: flex; }
  .nav a { min-height: 48px; padding: 0 4px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:last-child { border-bottom: 0; }
  .hero { padding: 24px 0 28px; gap: 28px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 38px); margin: 14px 0 12px; }
  .hero-lead { font-size: 17px; }
  .art { --cover: min(290px, 66vw); }
  .art-vertical { display: none; }
  .player-bar { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 12px; }
  .pb-thumb { width: 48px; height: 48px; }
  .pb-sub { padding-inline-start: 0; }
  .pb-line { gap: 8px; }
  .pb-controls { grid-column: 1 / -1; justify-content: center; }
  .pb-side { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .ad-slot { min-height: 100px; }
  .section { padding-top: 44px; }
  .section-head h2 { font-size: 23px; }
  .album { grid-template-columns: 1fr; gap: 24px; }
  .album-cover { max-width: 240px; }
  .track { grid-template-columns: 24px 30px minmax(0, 1fr); gap: 10px; padding: 6px 4px; }
  .t-code { display: none; }
  .single { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; }
  .single-art { width: 88px; height: 72px; }
  .about { grid-template-columns: 1fr; padding: 22px 18px; }
  .about-head { padding: 0 0 16px; border-inline-end: 0; border-bottom: 1px solid var(--line-strong); }
  .about-body { padding: 16px 0 0; }
  .about-more { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-links, .social { margin-inline-start: -10px; }
  .footer-bottom { flex-direction: column; }
  .prose { font-size: 16px; }
}

/* ============ small ≤420 ============ */
@media (max-width: 420px) {
  .yt-text { display: none; }
  .yt-link { width: 44px; justify-content: center; padding: 0; }
  .seg-label { display: none; }
  .single { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding: 10px; }
  .single-art { width: 72px; height: 64px; }
  .single-art span { display: none; }
  .card { padding: 18px; }
  .app-row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .app-row img { width: 56px; height: 56px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
:root[data-theme="dark"] .lp { box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 16px 34px -14px rgba(0, 0, 0, .7); }
/* CJK: keep Korean words whole; mono labels fall back to sans for Hangul/Kana/Han */
html[lang="ko"] p, html[lang="ko"] li, html[lang="ko"] .t-title { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ko"] .section-sub, html[lang="ja"] .section-sub, html[lang="zh"] .section-sub,
html[lang="ko"] .seg-label, html[lang="ko"] .ad-label { font-family: var(--sans); letter-spacing: 0; }
@media (max-width: 760px) { .footer-bottom { align-items: flex-start; } }

/* journal i18n — CJK/Indic/Arabic glyph order per language (Han unification), AI-translation notice, language list */
html:lang(ja) body { font-family: "Inter", -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; }
html:lang(zh) body { font-family: "Inter", -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
html:lang(ar) body { font-family: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
html:lang(hi) body { font-family: "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mukta", sans-serif; }
:lang(ja) :is(h1, h2, h3, p, li), :lang(zh) :is(h1, h2, h3, p, li) { line-break: strict; overflow-wrap: anywhere; }
:lang(ar) .prose, :lang(hi) .prose { line-height: 1.85; }
.ai-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--text-2); font-size: 14px; }
.ai-badge { padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 12px/1.6 var(--sans); letter-spacing: .04em; }
[dir="rtl"] .article-foot .more-link span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }

/* home language hint (root "/" only; suggests, never redirects) */
.lang-hint { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; box-shadow: 0 -2px 10px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; background: var(--accent); color: #fff; font-size: 14px; }
.lang-hint[hidden] { display: none; }
.lang-hint a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; }
.lang-hint button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }

/* About / Contact / Privacy x-default page: no-JS list of the 12 language pages */
.lang-pick { margin: 4px 0 8px; padding: 18px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lang-pick-label { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.lang-card { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 15px; }
.lang-card:hover, .lang-card:focus-visible { border-color: var(--accent); color: var(--accent); }

/* post end: older/newer + related posts (build_journal.py related_html) */
.post-more { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-more h2 { font: 500 16px/1.4 var(--sans); color: var(--muted); margin: 24px 0 8px; }
.post-step, .post-related { list-style: none; margin: 0; padding: 0; }
.post-step { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.post-step a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-height: 44px; }
.post-step a:hover { border-color: var(--accent); }
.post-step .ps-word { display: block; font-size: 13px; color: var(--muted); }
.post-step .ps-title { display: block; margin-top: 2px; overflow-wrap: anywhere; color: var(--accent); }
.post-related li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.post-related a { color: var(--accent); }
.post-related .j-date { margin-left: 8px; font-size: 13px; }
[dir="rtl"] .post-step .ps-word span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .post-related .j-date { margin-left: 0; margin-right: 8px; }