/* ─────────────────────────────────────────────────────────────────────────
   Direction C "planner note" skin (approved 2026-10-15).
   Grid-paper canvas, rounded ink boxes, yellow chips, pink highlighter.
   Injected by functions/ko/_middleware.ts (html.vj-stamp + /vj/stamp.css?v=9).
   One variable sans (Pretendard) carries both display and body text.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Pretendard Variable";
  src: url("/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-display: swap;
}

html.vj-stamp {
  --bg: #FFF9F2;
  --surface: #FFFFFF;
  --surface-2: #FFD84D;
  --surface-3: #FF4F9A;
  --fg: #1D1D1D;
  --fg-2: #45403A;
  --fg-3: #7A7068;
  --text: var(--fg);
  --fg-secondary: var(--fg-2);
  --muted: var(--fg-2);
  --faint: var(--fg-3);
  --pink: #FF4F9A;
  --yellow: #FFD84D;
  --mint: #7FD3C9;
  --accent: #C2185B;
  --accent-strong: var(--pink);
  --accent-hover: #9E144B;
  --accent-press: var(--pink);
  --on-accent: var(--fg);
  --marker: var(--yellow);
  --success: #00A86B;
  --warn: #FFB020;
  --danger: #C2185B;
  --free: var(--pink);
  --border: #1D1D1D;
  --border-subtle: #E4DCCF;
  --border-strong: #1D1D1D;
  --veil: #FFF9F2;
  --veil-2: #FFD84D;
  --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: var(--font-sans);
  --radius-sm: 8px;
  --radius: 10px;
  --radius-card: 18px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --ink: 2.5px solid #1D1D1D;
  --stamp-border: var(--ink);
  --stamp-shadow: 0 3px 0 #1D1D1D;
  --stamp-gap: 28px;
  --maxw: 1160px;
  color-scheme: light;
}

/* grid-paper canvas — chrome surfaces share it so the drawer stays opaque */
html.vj-stamp :is(body, .sidebar, .mobile-topbar, .staggered-menu-header, .staggered-menu-panel) {
  background-color: var(--bg);
  background-image: linear-gradient(#0000000b 1px, transparent 1px),
    linear-gradient(90deg, #0000000b 1px, transparent 1px);
  background-size: 24px 24px;
}
html.vj-stamp body {
  margin: 0;
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  font: 500 17px/1.7 var(--font-sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
html.vj-stamp :is(*, *::before, *::after) { box-sizing: border-box; }
html.vj-stamp :is(h1, h2, h3, h4, .t-hero, .t-display, .t-h1, .blog-title, .post-title) {
  font-family: var(--font-sans) !important;
  font-weight: 900;
  color: var(--fg) !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  text-wrap: balance;
}
html.vj-stamp :is(h1, .t-display) { font-size: clamp(33px, 4.5vw, 50px) !important; line-height: 1.15 !important; font-weight: 900 !important; }
html.vj-stamp h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
html.vj-stamp h3 { color: var(--fg) !important; font-weight: 800; line-height: 1.3; }
html.vj-stamp .post-h1 { font-size: clamp(28px, 4vw, 40px) !important; line-height: 1.2 !important; word-break: keep-all; }
html.vj-stamp a { color: var(--accent); }
html.vj-stamp a:hover { color: var(--accent-hover); }
html.vj-stamp :focus-visible { outline: 2.5px solid var(--fg) !important; outline-offset: 3px; border-radius: 6px; }
html.vj-stamp ::selection { background: var(--yellow); color: var(--fg); }
html.vj-stamp .dot-bg { opacity: .12; }
html.vj-stamp .container { min-width: 0; }
html.vj-stamp .section { padding-block: 48px; }

/* ── chrome: sidebar / topbar / staggered menu ── */
html.vj-stamp :is(.mobile-topbar, .sidebar, .staggered-menu-header, .staggered-menu-panel) {
  color: var(--fg);
  backdrop-filter: none;
}
html.vj-stamp .sidebar { border-right: var(--ink); padding: 28px 18px; }
html.vj-stamp .mobile-topbar { border-bottom: var(--ink); height: 64px; }
html.vj-stamp .staggered-menu-header { padding: 16px 32px; border-bottom: var(--ink); }
html.vj-stamp .sm-header-stack { flex-direction: row; width: 100%; align-items: center; justify-content: space-between; }
html.vj-stamp :is(.sm-brand, .m-brand, .brand) { color: var(--fg); font-family: var(--font-sans); font-weight: 900; text-shadow: none; }
html.vj-stamp .sm-brand { line-height: 1.2; }
html.vj-stamp :is(.sm-toggle, .m-toggle) {
  background: var(--yellow); color: var(--fg); border: var(--ink);
  box-shadow: var(--stamp-shadow); min-height: 44px; padding: 8px 16px; border-radius: 10px;
}
html.vj-stamp .m-toggle { width: auto; min-width: 48px; height: 44px; padding: 0 12px; display: inline-grid; place-items: center; }
html.vj-stamp .m-toggle svg { width: 22px; height: 22px; flex: none; stroke: var(--fg); }
html.vj-stamp .nav-list { gap: 4px; }
html.vj-stamp .nav-item {
  font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 600 !important;
  color: var(--fg-2) !important; padding: 8px 12px !important;
  border: 2px solid transparent; border-radius: 10px; line-height: 1.35;
}
html.vj-stamp .nav-item:hover { background: var(--surface) !important; border-color: var(--fg) !important; color: var(--fg) !important; }
html.vj-stamp .nav-item.active { background: var(--yellow) !important; border-color: var(--fg) !important; color: var(--fg) !important; font-weight: 800 !important; }
html.vj-stamp .nav-item.active::before { content: none; }
html.vj-stamp .nav-item.tree-item {
  font-size: 14px !important; font-weight: 500 !important; color: var(--fg-2) !important;
  padding: 7px 10px 7px 14px !important; border: 0 !important;
  border-left: 2px solid var(--border-subtle) !important; border-radius: 0 !important;
  margin-left: 10px; line-height: 1.5;
}
html.vj-stamp .nav-item.tree-item:hover { border-left-color: var(--fg) !important; background: transparent !important; color: var(--fg) !important; }
html.vj-stamp .nav-item.tree-item.active { border-left: 3px solid var(--pink) !important; background: #FFEDF5 !important; color: var(--fg) !important; font-weight: 700 !important; border-radius: 0 8px 8px 0 !important; }
html.vj-stamp .staggered-menu-panel { border: var(--ink); border-radius: 18px; }
html.vj-stamp :is(.nav-group-label, .nav-cat, .sm-section-title) {
  font-family: var(--font-sans) !important; color: var(--fg-3) !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: none;
}
html.vj-stamp .nav-group-label { margin: 20px 0 8px 10px; }
html.vj-stamp .nav-group-label.accent { color: var(--accent) !important; }
html.vj-stamp .sm-panel-list { gap: 4px !important; }
html.vj-stamp .sm-panel-item {
  font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 26px !important;
  line-height: 1.3 !important; letter-spacing: -0.01em !important; padding: 10px 0 !important;
  text-transform: none !important; color: var(--fg) !important;
}
html.vj-stamp .sm-panel-itemLabel { font-family: var(--font-sans) !important; font-weight: 700 !important; }
html.vj-stamp .sm-panel-item:is([aria-current="page"], :hover) { color: var(--accent) !important; }
html.vj-stamp .sm-panel-list[data-numbering] .sm-panel-item::after { font-family: var(--font-sans) !important; font-weight: 600 !important; font-size: 12px !important; opacity: .7; }
html.vj-stamp .staggered-menu-panel :is(h2, h3, .sm-socials-title) { font-family: var(--font-sans) !important; font-weight: 800 !important; }
html.vj-stamp .side-cta { font-family: var(--font-sans) !important; }

/* ── buttons: rounded ink chips, pink for the CTAs ── */
html.vj-stamp :is(.btn, .side-cta, .mini-button, .mini-callout a, a.cta) {
  min-height: 48px; padding: 12px 22px; border: var(--ink) !important;
  border-radius: 12px !important; background: var(--surface); color: var(--fg) !important;
  box-shadow: var(--stamp-shadow) !important; font-family: var(--font-sans);
  font-size: 16px; font-weight: 800; line-height: 1.4; text-decoration: none;
  white-space: normal; justify-content: center; transition: transform .15s, box-shadow .15s;
}
html.vj-stamp :is(.btn-primary, .side-cta, .mini-button, .mini-callout a, a.cta) { background: var(--pink) !important; }
html.vj-stamp :is(.btn, .side-cta, .mini-button, .mini-callout a, a.cta):active {
  transform: translateY(3px); box-shadow: none !important;
}
html.vj-stamp :is(.btn, .side-cta, a.cta)[href*="kakao"],
html.vj-stamp #floating-consultation {
  background: var(--pink) !important; color: var(--fg) !important;
  border: var(--ink) !important; border-radius: 12px !important;
  box-shadow: var(--stamp-shadow) !important; font-family: var(--font-sans); font-weight: 800;
}
html.vj-stamp #floating-consultation { max-width: calc(100% - 32px); }
html.vj-stamp #floating-consultation-space { height: 112px; }

/* ── cards & panels: rounded ink boxes with a soft offset shadow ── */
html.vj-stamp :is(.card, .compare-card, .module, .free-card, .cost-panel, .free-panel, .cta-panel, .start-grid > article, .start-check, .mini-question, .mini-library > a, .translation-note, .post-nav-link, .toc, .post-card) {
  background: var(--surface) !important; color: var(--fg) !important;
  border: var(--ink) !important; border-radius: var(--radius-card) !important;
  box-shadow: var(--stamp-shadow) !important; min-width: 0;
}
html.vj-stamp .cta-panel { border-radius: 20px !important; }
html.vj-stamp .compare-own { background: var(--yellow) !important; }
html.vj-stamp :is(.grid, .mini-library, .compare-grid) { gap: var(--stamp-gap); }
html.vj-stamp :is(a.card, .card-link .card, .mini-library > a, .post-nav-link, .post-card) { transition: transform .15s; }
html.vj-stamp :is(a.card:hover, .card-link:hover .card, .mini-library > a:hover, .post-nav-link:hover, .post-card:hover) { transform: translateY(-3px); }
html.vj-stamp .card-link:hover .card { background: var(--surface) !important; }
html.vj-stamp .post-card { text-align: left; }
html.vj-stamp .post-card :is(.meta-row, .post-tags) { justify-content: flex-start; }
html.vj-stamp .post-card .post-title { font-size: 21px; font-weight: 900; line-height: 1.4; }
html.vj-stamp .mini-library { margin-top: 24px; }
html.vj-stamp .mini-library > a { padding: 24px; color: var(--fg) !important; }
html.vj-stamp .mini-library > a:nth-child(3n + 2) { background: var(--yellow) !important; }
html.vj-stamp .mini-library > a:nth-child(3n + 3) { background: var(--mint) !important; }
html.vj-stamp .post-nav { border-top: 2px solid var(--fg); }
html.vj-stamp .post-nav-link { text-decoration: none; }
html.vj-stamp .post-nav-link .post-nav-title { color: var(--fg); font-weight: 700; }

/* ── chips: pills stay round, kickers/eyebrows get the tab look ── */
html.vj-stamp :is(.pill, .track-badge, .kicker, .hero-badge, .segment-item, .callout .label, .eyebrow) {
  border: 2px solid var(--fg); background: var(--surface); color: var(--fg) !important;
  font-family: var(--font-sans); font-weight: 800; padding: 4px 12px;
}
html.vj-stamp :is(.pill, .hero-badge, .segment-item, .callout .label, .eyebrow) { border-radius: 999px !important; }
html.vj-stamp .kicker { border-radius: 8px; padding: 2px 9px; background: var(--yellow); }
html.vj-stamp .eyebrow { background: var(--mint); padding: 3px 12px; }
html.vj-stamp :is(.track-badge, .segment-item.is-active) { background: var(--yellow); }
html.vj-stamp .segment { flex-wrap: wrap; gap: 8px; background: transparent; padding: 8px 0; }
html.vj-stamp .segment-pill { background: var(--yellow); border-radius: 999px; }
html.vj-stamp .post-taglist :is(a, span) { box-shadow: none !important; }
html.vj-stamp .site-footer { background: var(--surface); border-top: var(--ink); padding-bottom: 112px; }
html.vj-stamp .footer-bottom { border-top: 1px solid var(--fg); }

/* ── /ko boards: planner cards, ≤3 columns at desktop, 3-line titles ── */
html.vj-stamp .vj-board .post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
  padding: 0;
  margin-top: 2rem;
  list-style: none;
}
html.vj-stamp .vj-board .post-card {
  background: var(--surface); color: var(--fg);
  border: var(--ink); border-radius: var(--radius-card);
  box-shadow: var(--stamp-shadow); overflow: hidden;
  text-align: left; transition: transform .15s;
}
html.vj-stamp .vj-board .post-card:hover { transform: translateY(-3px); background: var(--surface); }
html.vj-stamp .vj-board .post-card img { border-bottom: var(--ink); border-radius: 0; }
html.vj-stamp .vj-board .post-card .card-copy { padding: 18px 20px 20px; }
html.vj-stamp .vj-board .post-card .card-copy :is(h2, h3) {
  font-family: var(--font-sans) !important; font-size: 21px !important;
  line-height: 1.4 !important; font-weight: 900 !important; color: var(--fg) !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}
html.vj-stamp .vj-board .post-card .card-copy p {
  color: var(--fg-2); font-size: 15px; line-height: 1.6; margin-block: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
html.vj-stamp .vj-board .post-card .card-copy time { color: var(--fg-3); font-size: 13px; font-weight: 600; }
html.vj-stamp .vj-board .hub-link a { font-weight: 700; }

/* ── hero ── */
html.vj-stamp .hero-split { padding-block: 120px 48px; overflow: visible; }
html.vj-stamp .hero::before { content: none; }
html.vj-stamp .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
html.vj-stamp .hero-copy {
  background: var(--surface); padding: 40px 32px;
  border: var(--ink); border-radius: 20px; box-shadow: var(--stamp-shadow);
}
html.vj-stamp :is(.hero-title, .t-hero) { font-size: clamp(40px, 5.6vw, 64px) !important; line-height: 1.05 !important; font-weight: 900 !important; }
html.vj-stamp .hero-copy .hl {
  color: var(--fg); font-style: normal; font-family: var(--font-sans); font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(transparent 55%, var(--pink) 55%);
  padding-inline: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
html.vj-stamp .hero-copy :is(.lede, .hero-type, .hero-type-cursor) { color: var(--fg-2); font-weight: 500; }
html.vj-stamp .hero-type .text-type__content { background: var(--yellow); font-weight: 800; }
html.vj-stamp .hero-actions { gap: 16px; margin-top: 24px; }
html.vj-stamp .hero-figure {
  order: 0; max-width: none; width: 100%; aspect-ratio: auto;
  background: var(--bg); border: var(--ink); border-radius: 20px; box-shadow: var(--stamp-shadow);
  padding: 24px 16px 0; overflow: visible; isolation: isolate;
}
html.vj-stamp .hero-cut { height: auto; max-height: 600px; filter: none; }
html.vj-stamp :is(.hero-disc, .hero-ring) { display: none; }
html.vj-stamp .hero-figure::after {
  content: "매일\A체크"; white-space: pre; position: absolute; top: -16px; right: 8px;
  width: 112px; height: 112px; display: grid; place-content: center; text-align: center;
  font: 900 24px/1.05 var(--font-sans); color: var(--fg);
  background: var(--yellow); border: var(--ink); border-radius: 50%;
  outline: 2px dashed var(--fg); outline-offset: -10px;
  box-shadow: var(--stamp-shadow); transform: rotate(12deg); z-index: 2;
}

/* ── article body: writes directly on the grid paper ── */
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog, article[data-channel]) {
  background: transparent !important; color: var(--fg) !important;
  font: 500 17px/1.85 var(--font-sans) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  min-width: 0; max-width: 100%;
  padding-left: 0 !important; padding-right: 0 !important;
}
html.vj-stamp :is(.blog-shell, .blog-personal-blog, .personal-blog, article[data-channel]) { padding-top: 8px !important; max-width: 720px !important; margin-inline: auto !important; }
html.vj-stamp .post-prose { max-width: 720px; margin-inline: auto; }
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog) :is(p, li, .blog-p, td) {
  color: var(--fg) !important; font-family: var(--font-sans) !important;
  font-size: 17px !important; font-weight: 400 !important; line-height: 1.85 !important;
  text-align: left !important; letter-spacing: -0.005em !important; word-break: keep-all;
}
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog) :is(p, li, .blog-p) { margin-block: 0 22px !important; }
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog, article[data-channel], body > main) h2 {
  font-family: var(--font-sans) !important; font-weight: 900 !important; color: var(--fg) !important;
  font-size: clamp(22px, 2.4vw, 27px) !important; line-height: 1.35 !important; letter-spacing: -0.02em !important;
  display: inline-block; border: 0 !important; padding: 0 2px !important;
  background: linear-gradient(transparent 60%, var(--pink) 60% 90%, transparent 90%) !important;
  margin: 48px 0 16px !important;
}
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog, article[data-channel], body > main) :is(h3, h4, .section-heading) {
  font-family: var(--font-sans) !important; font-weight: 800 !important; color: var(--fg) !important;
  font-size: 20px !important; line-height: 1.4 !important; letter-spacing: -0.02em !important;
  border: 0 !important; background: transparent !important; padding: 0 !important;
}

/* highlights: yellow marker swipe, pink band on h2 */
html.vj-stamp :is(mark, .prose strong, .summary strong, .blog-shell strong, .hl):not(.hero-copy .hl) {
  color: var(--fg) !important;
  background: linear-gradient(transparent 55%, var(--yellow) 55%) !important;
  padding: 0 1px !important; font-weight: 700 !important; box-shadow: none !important; border: 0 !important;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
html.vj-stamp strong { color: var(--fg); font-weight: 800; }
html.vj-stamp :is(del, s, .del) { text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
html.vj-stamp :is(ins, .ins) { background: var(--mint); color: var(--fg); font-weight: 800; text-decoration: none; padding: 0 4px; border: 2px solid var(--fg); border-radius: 6px; }
html.vj-stamp :is(.prose, article[data-channel], .blog-shell) a { color: var(--accent) !important; text-decoration: underline; text-underline-offset: 4px; }
html.vj-stamp :is(.prose, article[data-channel], .blog-shell) a:is(.btn, .cta) { color: var(--fg) !important; text-decoration: none; }

/* ── callouts & quotes ── */
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog) :is(.quick, .callout, .takeaway),
html.vj-stamp :is(.callout, .quick, .takeaway, .mini-callout) {
  background: var(--yellow) !important; color: var(--fg) !important;
  padding: 20px 22px !important; border: var(--ink) !important;
  border-radius: 16px !important; box-shadow: var(--stamp-shadow) !important;
  margin-block: 24px !important;
}
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog) :is(.box, .notice, .status),
html.vj-stamp :is(.box, .notice, .status, .mini-explanation, .mini-result) {
  background: var(--surface) !important; color: var(--fg) !important;
  padding: 20px 22px !important; border: var(--ink) !important;
  border-radius: 16px !important; box-shadow: var(--stamp-shadow) !important;
  margin-block: 24px !important;
}
html.vj-stamp :is(.callout-warn, .mini-disclaimer) { background: var(--warn) !important; }
html.vj-stamp :is(blockquote, .quote-line) {
  background: var(--surface) !important; color: var(--fg) !important;
  border: var(--ink) !important; border-radius: 16px !important;
  padding: 22px 26px 32px !important; margin: 24px 0 !important;
  box-shadow: var(--stamp-shadow) !important; position: relative;
}
html.vj-stamp :is(blockquote, .quote-line)::before {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 14px;
  height: 10px; background: var(--pink); opacity: .35; border-radius: 4px;
}
html.vj-stamp blockquote :is(p, strong, a),
html.vj-stamp .prose blockquote p,
html.vj-stamp :is(#main, body > main) :is(blockquote, .quote-line) :is(p, li, strong, a) {
  color: var(--fg) !important; background: transparent !important;
}
html.vj-stamp blockquote a { text-decoration: underline; }
html.vj-stamp :is(#main, body > main) blockquote mark strong {
  color: var(--fg) !important; background: var(--yellow) !important;
}

/* ── figures & tables ── */
html.vj-stamp figure { max-width: 100%; margin: 24px 0 !important; }
html.vj-stamp :is(.prose, article[data-channel], body > main) figure img {
  border: var(--ink) !important; border-radius: 16px !important;
  box-shadow: var(--stamp-shadow) !important; max-width: 100%; height: auto;
}
html.vj-stamp figcaption { font: 500 14px/1.6 var(--font-sans); color: var(--fg-3) !important; margin-top: 16px; }
html.vj-stamp :is(table, .decision-table) {
  background: var(--surface) !important; color: var(--fg) !important;
  border: var(--ink) !important; border-radius: 16px !important;
  border-spacing: 0; max-width: 100%; font: 500 16px/1.6 var(--font-sans);
}
html.vj-stamp :is(table, .decision-table) :is(th, td) {
  border: 1px solid var(--fg) !important; padding: 12px !important;
  color: var(--fg) !important; background: var(--surface) !important;
  text-align: left; vertical-align: top;
}
html.vj-stamp :is(table, .decision-table) th { background: var(--yellow) !important; font-weight: 800; }
html.vj-stamp table tr > :first-child { border-bottom: 1px solid var(--fg) !important; }
html.vj-stamp .table-scroll { border: var(--ink); border-radius: 16px; box-shadow: var(--stamp-shadow); }
html.vj-stamp .table-scroll table { max-width: none; border: 0 !important; }
html.vj-stamp .table-hint { background: var(--yellow); color: var(--fg); padding: 8px; border: 2px solid var(--fg); border-radius: 8px; }

/* imported posts with hard-coded dark panels → yellow notes */
html.vj-stamp :is([style*="#1f4f7a" i], [style*="#17324d" i], [style*="#174d7c" i], [style*="#102f4c" i]) {
  color: var(--fg) !important; border-color: var(--fg) !important;
}
html.vj-stamp :is(div, aside, section)[style*="background"]:is([style*="#1f4f7a" i], [style*="#17324d" i], [style*="#edf3f7" i]) {
  background: var(--yellow) !important; border: var(--ink) !important; border-radius: 16px !important;
}

/* standalone HTML guide pages (public/ko/guide/<slug>/index.html use a plain <main>) */
html.vj-stamp body > header:not(.mobile-topbar) {
  padding: 40px 24px; color: var(--fg) !important;
  border-bottom: var(--ink); text-shadow: none;
}
html.vj-stamp body > header h1 { max-width: 920px; margin: auto; }
html.vj-stamp body > header :is(.meta, .eyebrow) { color: var(--fg) !important; }
html.vj-stamp body > main {
  max-width: 760px !important; margin: 32px auto 112px; padding: 24px 20px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html.vj-stamp body > main :is(article[data-channel], .blog-shell) { padding: 0 !important; }
html.vj-stamp body > main :is(p, li) {
  text-align: left !important; font-size: 17px !important; color: var(--fg) !important;
  font-family: var(--font-sans) !important; font-weight: 400 !important; line-height: 1.85 !important; word-break: keep-all;
}
html.vj-stamp body > main p { margin-block: 0 24px; }
html.vj-stamp body > main strong { color: var(--fg); }
html.vj-stamp body > main a { color: var(--accent); }

/* ── mini-quiz widgets ── */
html.vj-stamp .mini-option {
  border: var(--ink); border-radius: 12px; background: var(--surface);
  color: var(--fg); box-shadow: var(--stamp-shadow); margin-block: 16px; font-weight: 500;
}
html.vj-stamp .mini-option:is(:hover, :has(input:checked)) { background: var(--yellow); }
html.vj-stamp .mini-option.is-correct { background: var(--mint); border-color: var(--fg); }
html.vj-stamp .mini-option.is-wrong { background: var(--pink); border-color: var(--fg); }
html.vj-stamp .mini-passage { background: var(--surface); color: var(--fg); border: var(--ink); border-radius: 16px; }
html.vj-stamp .mini-question-head > span { color: var(--fg-3); }
html.vj-stamp .mini-warning { color: var(--accent); }
html.vj-stamp :is(input, progress) { accent-color: var(--accent); }

@media (max-width: 760px) {
  html.vj-stamp { --ink: 2px solid #1D1D1D; }
  html.vj-stamp body { font-size: 16px; overflow-x: clip; }
  html.vj-stamp .container { padding-inline: 16px; }
  html.vj-stamp .section { padding-block: 32px; }
  html.vj-stamp .staggered-menu-header { padding: 12px 16px; }
  html.vj-stamp .hero-split { padding-block: 96px 32px; }
  html.vj-stamp .hero-grid { grid-template-columns: minmax(0, 1fr); }
  html.vj-stamp .hero-copy { padding: 24px 20px; }
  html.vj-stamp :is(.hero-title, .t-hero) { font-size: clamp(34px, 10.5vw, 44px) !important; }
  html.vj-stamp .hero-figure { min-height: 280px; }
  html.vj-stamp .hero-cut { max-height: 320px; }
  html.vj-stamp .hero-figure::after { width: 88px; height: 88px; font-size: 20px; top: 8px; right: 8px; }
  html.vj-stamp .hero-actions .btn { width: 100%; }
  html.vj-stamp .vj-board .post-list { grid-template-columns: 1fr; }
  html.vj-stamp .vj-board .post-card .card-copy { padding: 16px; }
  html.vj-stamp .vj-board .post-card .card-copy :is(h2, h3) { font-size: 19px !important; }
  html.vj-stamp :is(.prose, body > main) table { display: block; overflow-x: auto; }
  html.vj-stamp body > main { margin: 24px 16px 112px; padding: 20px; }
  html.vj-stamp body > header:not(.mobile-topbar) { padding: 32px 16px; }
  html.vj-stamp :is(.callout, .quick, .takeaway, .notice, .status, blockquote, .quote-line, .mini-callout) { padding: 16px !important; }
  html.vj-stamp .sm-panel-item { font-size: 24px !important; padding: 9px 0 !important; }
}
@media (min-width: 761px) and (max-width: 879px) {
  html.vj-stamp .hero-grid { grid-template-columns: minmax(0, 1fr); }
  html.vj-stamp .hero-cut { max-height: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  html.vj-stamp :is(.btn, .side-cta, .mini-button, .mini-callout a, a.cta):active { transform: none; }
  html.vj-stamp :is(a.card, .post-card, .post-nav-link, .mini-library > a) { transition: none; }
}
@media print {
  html.vj-stamp :is(.sidebar, .mobile-topbar, .staggered-menu-wrapper, #floating-consultation, #floating-consultation-space) { display: none !important; }
  html.vj-stamp .app-main.has-sidebar { margin-left: 0; }
  html.vj-stamp .table-scroll { overflow: visible; }
}

/* Article reading surface: the planner grid belongs outside the text. */
html.vj-stamp :is(article.post, article.project, .vj-detail, .univ-detail, body > main) { background: var(--surface) !important; padding: clamp(20px, 3vw, 40px) !important; padding-bottom: 112px !important; }
html.vj-stamp :is(.prose, .blog-shell, .blog-personal-blog, .personal-blog, article[data-channel]) { background: var(--surface) !important; }
html.vj-stamp :is(article.post, article.project, .vj-detail, .univ-detail, body > main) h2 { background: none !important; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 4px; text-underline-offset: 6px; }
html.vj-stamp :is(article.post, article.project, .vj-detail, .univ-detail, body > main) u { text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* Reading content must not disappear while scrolling or during entrance motion. */
html.vj-range-notation article.post del { text-decoration: none; color: inherit; }
html.vj-range-notation article.post del::before, html.vj-range-notation article.post del::after { content: "~"; }
html.vj-stamp a[data-vj-image-zoom] { display: block; }
html.vj-stamp a[data-vj-image-zoom]::after { content: "원본 크게 보기"; display: block; width: fit-content; margin: 8px 0 0 auto; padding: 8px 12px; border: 2px solid var(--fg); border-radius: 8px; background: var(--surface); color: var(--fg); font: 800 14px/1.5 var(--font-sans); }
html.vj-stamp a[data-vj-image-zoom]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
html.vj-stamp :is(article.post, article.project, .vj-detail, .univ-detail) .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (max-width: 760px) {
  html.vj-stamp :is(article.post, article.project, .vj-detail, .univ-detail, body > main) table[data-vj-table="two-column"] { display: table !important; table-layout: fixed !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  html.vj-stamp table[data-vj-table="two-column"] :is(th, td) { min-width: 0 !important; width: auto !important; white-space: normal !important; overflow-wrap: anywhere !important; padding: 10px !important; }
  html.vj-stamp table[data-vj-table="two-column"] tr > :first-child { width: 30% !important; position: static !important; }
  html.vj-stamp .table-hint:has(+ .table-scroll > table[data-vj-table]):not(:has(+ .table-scroll > table:not([data-vj-table]))) { display: none; }
  html.vj-stamp :is(article.post, article.project, .vj-detail, .univ-detail, body > main) table[data-vj-table="stacked"] {
    display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    box-sizing: border-box; overflow: visible; table-layout: auto;
  }
  html.vj-stamp table[data-vj-table="stacked"] :is(thead, tbody, tr) { display: block; width: auto; min-width: 0; }
  /* Keep native column headers in the accessibility tree at mobile widths. */
  html.vj-stamp table[data-vj-table="stacked"] [data-vj-table-header] {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap;
  }
  html.vj-stamp table[data-vj-table="stacked"] tr:not([data-vj-table-header]) + tr { margin-top: 16px; border-top: var(--ink); }
  html.vj-stamp table[data-vj-table="stacked"] tr:not([data-vj-table-header]) > :is(th, td) {
    display: block !important; position: static !important; box-sizing: border-box; float: none !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important;
    white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important;
    overflow: visible !important; text-overflow: clip !important;
  }
  html.vj-stamp table[data-vj-table="stacked"] [data-label]::before {
    content: attr(data-label); content: attr(data-label) / "";
    display: block; width: fit-content; max-width: 100%; margin-bottom: 8px; padding: 0 4px;
    background: var(--yellow); color: var(--fg); font-weight: 800; white-space: normal; overflow-wrap: anywhere;
  }
  html.vj-stamp table[data-vj-table="stacked"] [data-label] :is(img, video, canvas, svg, iframe, object, embed) { max-width: 100% !important; }
}