/*
Theme Name:   Hangang-View Child
Theme URI:    https://hangang-view.com
Description:  Editorial OKLCH child theme for GeneratePress. Ports the Claude-design prototype.
Author:       daramjwi
Template:     generatepress
Version:      0.1.0
License:      GPL-2.0-or-later
Text Domain:  hangang-view-child
*/

/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
  --ink: oklch(0.22 0.012 80);
  --ink-soft: oklch(0.42 0.012 80);
  --ink-muted: oklch(0.58 0.01 80);
  --paper: oklch(0.985 0.006 85);
  --paper-2: oklch(0.96 0.008 85);
  --rule: oklch(0.88 0.01 80);
  --rule-soft: oklch(0.93 0.008 80);
  --accent: oklch(0.58 0.17 35);
  --accent-soft: oklch(0.94 0.04 35);

  --serif: "Noto Serif KR", "Source Serif 4", Georgia, serif;
  --sans: "Inter", "Pretendard", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 78ch;
  --page-pad: 48px;
}

[data-theme="dark"] {
  --ink: oklch(0.94 0.008 85);
  --ink-soft: oklch(0.78 0.01 85);
  --ink-muted: oklch(0.6 0.01 85);
  --paper: oklch(0.18 0.008 80);
  --paper-2: oklch(0.22 0.008 80);
  --rule: oklch(0.32 0.01 80);
  --rule-soft: oklch(0.26 0.01 80);
  --accent: oklch(0.72 0.15 35);
  --accent-soft: oklch(0.3 0.06 35);
}

/* =============================================================
   2. BASE TYPOGRAPHY (verbatim from styles.css lines 33–70)
   ============================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Safety net: prevent any rogue child (wide table, large image, overflowing
   flex row) from creating page-level horizontal scroll on mobile. Inner
   elements with overflow: auto still create their own scroll context. */
html { overflow-x: hidden; }
body { overflow-x: clip; max-width: 100vw; }
body {
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "liga", "kern";
  line-height: 1.6;
}

.font-sans { font-family: var(--sans); }
.font-mono { font-family: var(--mono); }
.font-serif { font-family: var(--serif); }

/* numeric */
.num { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -0.01em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.rule { border-top: 1px solid var(--rule); }
.rule-soft { border-top: 1px solid var(--rule-soft); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }

::selection { background: var(--accent-soft); color: var(--ink); }

/* =============================================================
   3. GENERATEPRESS OVERRIDES — neutralise parent chrome
   ============================================================= */
.site-content, .content-area, .inside-article {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body.wp-singular, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}
.site-header, .site-footer, .main-navigation { display: none !important; }

/* =============================================================
   4. LAYOUT CONTAINER
   ============================================================= */
.hvc-page {
  max-width: min(1040px, 94vw);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hvc-main { flex: 1; }

/* =============================================================
   5. TOPNAV / HEADER
   ============================================================= */
.hvc-topnav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--rule);
  gap: 24px;
  flex-wrap: wrap;
}

.hvc-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

.hvc-brand__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hvc-brand__eyebrow {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

.hvc-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.hvc-nav a {
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 400;
}

.hvc-nav a:hover { color: var(--ink); }

.hvc-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}

.hvc-nav__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--rule);
  align-self: center;
}

.hvc-theme-toggle {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

/* =============================================================
   6. HERO SECTION
   ============================================================= */
.hvc-hero {
  padding: 84px 0 72px;
  max-width: 640px;
}

.hvc-hero .eyebrow { margin-bottom: 20px; }

.hvc-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.22;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
}

.hvc-hero p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}

/* =============================================================
   7. ARCHIVE / YEAR-GROUPED LIST
   ============================================================= */
.hvc-archive { padding-bottom: 40px; }

.hvc-year-group { margin-bottom: 48px; }

.hvc-year-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.hvc-year-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
}

.hvc-year-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  text-align: right;
}

.hvc-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hvc-post-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
  transition: color 160ms ease;
}

.hvc-post-row:hover .hvc-post-title { color: var(--accent); }

.hvc-post-date {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  font-size: 12px;
  color: var(--ink-muted);
}

.hvc-post-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 160ms ease;
}

.hvc-post-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* =============================================================
   8. READING PROGRESS BAR
   ============================================================= */
.hvc-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
}

.hvc-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 80ms linear;
}

/* =============================================================
   9. SINGLE POST
   ============================================================= */
.hvc-post {
  padding: 64px 0 40px;
  width: 100%;
}
.hvc-main { width: 100%; }

/* CJK: respect Korean word boundaries so text uses the full container width
   instead of breaking mid-word (e.g. 농\n협은행) and looking artificially narrow. */
.hvc-post__title,
.hvc-post__lead,
.entry-content,
.entry-content p,
.entry-content li {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hvc-back {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 40px;
  text-decoration: none;
}
.hvc-back:hover { color: var(--accent); }

.hvc-post__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.28;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
  max-width: none;
}

.hvc-post__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 48px;
  max-width: none;
}

.entry-content {
  border-top: 1px solid var(--rule);
  padding-top: 40px;
  max-width: none;
  /* Prevent any child (images, tables, pre, iframe) from blowing out the
     container width on narrow viewports. */
  overflow-wrap: break-word;
}

/* ---- Embedded media (auto-inserted by post pipeline) ---------------- */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
  border-radius: 8px;
}
/* First image inside a post is the thumbnail banner — it may have inline
   max-height. Keep it responsive but respect the inline 300px cap on desktop. */
.entry-content > img:first-of-type,
.entry-content p:first-of-type > img:first-child {
  margin-top: 8px;
}

/* ---- Tables: scroll container is the WRAPPER, not the table itself.
   functions.php wraps every <table> in <div class="hvc-table-scroll">
   so the horizontal scroll context lives outside the table element. -- */
.entry-content .hvc-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
  /* Right-edge fade to signal "swipe for more" on mobile. */
  background:
    linear-gradient(to right, var(--paper), rgba(255,255,255,0) 8px) 0 0 / 24px 100% no-repeat local,
    linear-gradient(to left,  var(--paper), rgba(255,255,255,0) 8px) 100% 0 / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 0 0 / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0 / 10px 100% no-repeat scroll;
}
.entry-content .hvc-table-scroll > table {
  /* Table stays a real table — no display:block hack. This lets the
     browser compute column widths properly while the wrapper handles
     horizontal overflow. */
  border-collapse: collapse;
  width: 100%;
  min-width: max-content; /* expand so short tables don't stretch weirdly */
  margin: 0;
  font-size: 14px;
}
/* Fallback for any legacy content rendered outside the wrapper. */
.entry-content > table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.entry-content th,
.entry-content td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.entry-content th {
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
}

/* ---- Code / preformatted --- */
.entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: var(--paper-2);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  margin: 24px 0;
}
.entry-content code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}
.entry-content pre code { padding: 0; background: transparent; }

/* ---- Lists: keep markers visible on narrow screens */
.entry-content ul,
.entry-content ol {
  padding-left: 24px;
  margin: 0 0 18px;
}
.entry-content li { margin-bottom: 8px; line-height: 1.7; }

.entry-content p { font-size: 17px; line-height: 1.8; margin: 0 0 18px; }
.entry-content h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}
.entry-content h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  margin: 36px 0 12px;
}

.entry-content blockquote {
  margin: 48px 0;
  padding: 24px 0 24px 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-style: italic;
}
.entry-content blockquote p { font-size: inherit; margin: 0; }

.hvc-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* =============================================================
   10. POST TAGS
   ============================================================= */
.hvc-tags {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hvc-tag-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-muted);
  text-decoration: none;
}
.hvc-tag-chip:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================
   11. RELATED POSTS
   ============================================================= */
.hvc-related {
  border-top: 1px solid var(--rule);
  padding: 48px 0 0;
}

.hvc-related .eyebrow { margin-bottom: 24px; }

.hvc-related__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
}
.hvc-related__row:hover .hvc-related__title { color: var(--accent); }

.hvc-related__title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  transition: color 160ms ease;
}

/* =============================================================
   12. TAG CLOUD
   ============================================================= */
.hvc-tagcloud {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  align-items: baseline;
}

.hvc-tagcloud a {
  font-family: var(--serif);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}
.hvc-tagcloud a:hover { color: var(--accent); }

/* =============================================================
   13. FOOTER
   ============================================================= */
.hvc-footer {
  margin-top: 120px;
  padding-top: 28px;
  padding-bottom: 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}

.hvc-footer__copy {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.hvc-footer__links { font-family: var(--sans); font-size: 13px; }
.hvc-footer__links a { margin-right: 18px; text-decoration: none; }
.hvc-footer__links a:last-child { margin-right: 0; }

/* =============================================================
   14. PAGE ARTICLE (page.php)
   ============================================================= */
.hvc-page-article .hvc-hero { padding: 84px 0 48px; }

/* =============================================================
   14.5 COMMENTS — editorial minimal
   ---------------------------------------------------------------
   GeneratePress parent theme renders the comments area via its own
   comments.php → #comments > .comments-title, .comment-list, etc.
   We override only surface appearance to match the editorial vibe.
   ============================================================= */
.comments-area,
#comments {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--ink);
}
.comments-area .comments-title,
#comments .comments-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.comments-area .comment-list,
#comments .comment-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.comments-area .comment-list .comment,
#comments .comment-list .comment {
  border-bottom: 1px solid var(--rule-soft);
  padding: 20px 0;
}
.comments-area .comment-list .comment:last-child,
#comments .comment-list .comment:last-child {
  border-bottom: none;
}
.comments-area .comment-author,
#comments .comment-author {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.comments-area .comment-author .avatar,
#comments .comment-author .avatar {
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.comments-area .comment-metadata,
#comments .comment-metadata {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.comments-area .comment-metadata a,
#comments .comment-metadata a { color: var(--ink-muted); text-decoration: none; }
.comments-area .comment-content,
#comments .comment-content {
  font-size: 15px;
  line-height: 1.7;
  margin-top: 10px;
  color: var(--ink-soft);
}
.comments-area .reply,
#comments .reply { margin-top: 8px; font-size: 12px; }
.comments-area .reply a,
#comments .reply a {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Comment form */
.comments-area .comment-respond,
#comments .comment-respond { margin-top: 32px; }
.comments-area .comment-reply-title,
#comments .comment-reply-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--ink);
}
.comments-area .comment-form label,
#comments .comment-form label {
  display: block;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea,
#comments .comment-form input[type="text"],
#comments .comment-form input[type="email"],
#comments .comment-form input[type="url"],
#comments .comment-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: 14px;
  box-sizing: border-box;
  transition: border-color 160ms ease;
}
.comments-area .comment-form input:focus,
.comments-area .comment-form textarea:focus,
#comments .comment-form input:focus,
#comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.comments-area .comment-form textarea,
#comments .comment-form textarea {
  min-height: 120px;
  line-height: 1.6;
  resize: vertical;
}
.comments-area .form-submit .submit,
#comments .form-submit .submit {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 160ms ease;
}
.comments-area .form-submit .submit:hover,
#comments .form-submit .submit:hover {
  background: var(--accent);
}
.comments-area .comment-notes,
#comments .comment-notes,
.comments-area .logged-in-as,
#comments .logged-in-as {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

/* =============================================================
   15. PAGINATION
   ============================================================= */
.hvc-pagination {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 48px 0;
  font-family: var(--mono);
  font-size: 12px;
}
.hvc-pagination a, .hvc-pagination span {
  color: var(--ink-muted);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.hvc-pagination a:hover { color: var(--accent); }
.hvc-pagination .current { color: var(--ink); }

/* =============================================================
   15.5 PostWriter STAT CARDS — global (desktop + mobile)
   ---------------------------------------------------------------
   PostWriter emits stat blocks in TWO shapes:

   VARIANT A — one card per <div>:
     <div style="display:inline-flex;flex-direction:column;...">
       <span>1.4rem-value</span>
       <span>0.75rem-label</span>
     </div>
     (Multiple cards → multiple sibling divs.)

   VARIANT B — one <div> holding multiple value/label pairs split by <br>:
     <div style="display:inline-flex;flex-direction:column;...">
       <span>2~3개월</span><span>권장 예약 시점</span><br>
       <span>화·수·목</span><span>상대적 저렴 요일</span><br>
       <span>3곳 이상</span><span>비교 검색 권장 수</span>
     </div>

   Both variants have inline flex-direction:column, which stacks each
   span on its own line — ugly and tall. Flip to row layout so value
   and label sit on the SAME line. Use flex-wrap:wrap + the classic
   `<br> { flex-basis:100% }` trick so variant B's pairs still break
   after each <br>. Clamp() fonts so cards stay compact on every
   viewport; desktop gets slightly larger than mobile via vw term.
   ============================================================= */
.pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] {
  /* Override inline display:inline-flex + flex-direction:column.
     For variant B (multiple pairs + <br>), plain inline-block with
     inline children lets <br> do its native line-break. The flex
     "br { flex-basis:100% }" trick works on Chrome-desktop but drops
     on WebKit-iOS, so we avoid flex here entirely. */
  display: inline-block !important;
  padding: 8px 14px !important;
  margin: 4px 6px 4px 0 !important;
  border-radius: 10px !important;
  vertical-align: top !important;
  text-align: left !important;
  line-height: 1.45 !important;
}
/* Value span (1.4rem/1rem inline default) — fluid, compact, never breaks. */
.pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] > span[style*="font-weight"],
.pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] > span:nth-of-type(odd) {
  font-size: clamp(0.95rem, 1.4vw + 0.6rem, 1.2rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  margin-right: 6px !important;
}
/* Label span (0.75rem gray) — fluid, single line. */
.pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] > span[style*="#6b6b6b"],
.pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] > span:nth-of-type(even) {
  font-size: clamp(0.72rem, 0.5vw + 0.65rem, 0.85rem) !important;
  white-space: nowrap !important;
  color: #6b6b6b !important;
  margin-right: 10px !important;
}

/* =============================================================
   15.6 PostWriter NUMBERED STEPS — global (desktop + mobile)
   ---------------------------------------------------------------
   PostWriter emits:
     <ol style="counter-reset:pw-step;...">
       <li style="padding:14px 18px;...">
         <span style="...badge...">1</span>
         <strong>알림 설정</strong><br>
         특정 가격대에 도달하면…
       </li>
     </ol>
   The <strong> wraps the subtitle and is followed by <br>, so the body
   text naturally starts on the next line. CSS styles the subtitle as a
   distinct heading-like element and gives the badge a consistent
   vertical alignment on every viewport.
   ============================================================= */
.pw-prose ol[style*="counter-reset"] > li > strong:first-of-type {
  display: inline-block !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-size: clamp(0.95rem, 0.6vw + 0.82rem, 1.08rem) !important;
  line-height: 1.35 !important;
  margin-bottom: 2px !important;
}
/* Older posts still have the "subtitle — body" all-inline format. Give the
   badge consistent vertical rhythm regardless of which variant is present. */
.pw-prose ol[style*="counter-reset"] > li > span:first-child {
  flex-shrink: 0;
}

/* =============================================================
   16. MOBILE BREAKPOINT
   ============================================================= */
@media (max-width: 640px) {
  /* Wadiz-inspired compact reading scale: page pad 16px so the content
     column hits ~93% of viewport, tighter vertical rhythm, 14px body. */
  :root { --page-pad: 16px; }
  .hvc-page { max-width: min(1040px, 100vw); }
  .hvc-topnav { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hvc-nav { gap: 4px; flex-wrap: wrap; row-gap: 4px; }
  /* Touch-friendly tap targets: WCAG AA requires ≥24×24, ≥44×44 recommended.
     Default inline-link look kept on desktop; padded hit area only on mobile. */
  .hvc-nav a {
    padding: 10px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .hvc-theme-toggle {
    padding: 10px 14px;
    min-height: 44px;
    min-width: 56px;
  }
  .hvc-nav__sep { display: none; }
  .hvc-post-row { grid-template-columns: 56px 1fr; row-gap: 6px; }
  .hvc-post-row .hvc-post-meta { grid-column: 2; font-size: 10px; }
  .hvc-post-row .hvc-post-title { font-size: 17px; }
  .hvc-hero h1 { font-size: clamp(26px, 8vw, 36px); }

  /* Back link: pad to reach ≥44px tap target on single post */
  .hvc-back {
    padding: 12px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 28px;
  }
  /* Tag chips: bump height + breathing room */
  .hvc-tag-chip {
    padding: 10px 14px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .hvc-tags { gap: 8px; }
  /* Footer social links: give each a ≥44px hit area */
  .hvc-footer { gap: 8px 12px; }
  .hvc-footer__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .hvc-footer__links a {
    padding: 12px 14px;
    min-height: 44px;
    min-width: 44px;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Single post reading layout (Wadiz-style compact) ------------ */
  .hvc-post { padding: 20px 0 24px; }
  .hvc-post__title {
    font-size: 24px;
    line-height: 1.32;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
  }
  .hvc-post__lead {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 24px;
    color: var(--ink-soft, var(--ink-muted));
  }

  /* ---- Entry content typography on mobile (compact) ---------------- */
  .entry-content { padding-top: 20px; }
  .entry-content p,
  .entry-content li {
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 14px;
  }
  .entry-content h2 {
    font-size: 20px;
    line-height: 1.35;
    margin: 32px 0 12px;
    letter-spacing: -0.005em;
  }
  .entry-content h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 24px 0 8px;
  }
  .entry-content blockquote {
    margin: 24px 0;
    padding: 12px 0 12px 14px;
    font-size: 14px;
    line-height: 1.65;
  }
  /* Images: full-width block, tight vertical rhythm, subtle rounding. */
  .entry-content img,
  .entry-content video,
  .entry-content iframe {
    margin: 14px auto;
    border-radius: 6px;
  }
  .entry-content pre {
    padding: 12px;
    font-size: 12px;
    margin: 16px -8px;
    border-radius: 6px;
    line-height: 1.55;
  }
  .entry-content ul,
  .entry-content ol { padding-left: 20px; margin: 0 0 16px; }
  .entry-content li { margin-bottom: 6px; }

  /* ---- Mobile tables: compact, inline with content ------------------
     Wrapper handles horizontal overflow. Font/pad tuned small so the
     table still reads cleanly when swiping. No edge bleed — matches
     Wadiz's uniform content column. */
  .entry-content .hvc-table-scroll {
    margin: 18px 0;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper);
    /* Drop the fancy gradient on mobile — it clutters a small viewport. */
    background-image: none;
  }
  .entry-content .hvc-table-scroll > table {
    font-size: 12.5px;
    min-width: 100%;           /* fill wrapper when narrow */
    width: max-content;        /* grow for wide content, wrapper scrolls */
  }
  .entry-content th,
  .entry-content td {
    padding: 7px 9px;
    min-width: 96px;
    line-height: 1.55;
  }
  .entry-content th { font-size: 12px; }

  /* ----------------------------------------------------------------------
     PostWriter output (.pw-prose) — mobile overrides.
     PostWriter emits inline styles (font-size:1rem, rigid widths,
     multi-column tables). On a narrow viewport those inline rules
     overflow. Attribute selectors + !important override inline styles
     without forking the generator.
     ---------------------------------------------------------------------- */

  /* 1) Stat cards: mobile refinement of the global rule in §15.5.
        Tighter padding/margins; smaller fluid fonts for narrow viewports.
        Selectors use nth-of-type(odd/even) so variant B (multiple pairs
        inside one <div> separated by <br>) also matches. */
  .pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] {
    gap: 3px 6px !important;
    padding: 7px 11px !important;
    margin: 3px 5px 3px 0 !important;
    border-radius: 8px !important;
  }
  .pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] > span:nth-of-type(odd) {
    font-size: clamp(0.9rem, 4vw, 1.15rem) !important;
    line-height: 1.2 !important;
  }
  .pw-prose > div[style*="inline-flex"][style*="flex-direction:column"] > span:nth-of-type(even) {
    font-size: clamp(0.68rem, 2.7vw, 0.78rem) !important;
    white-space: nowrap !important;
  }

  /* 2) PostWriter tables: force-fit to viewport, no horizontal scroll.
        5-column plan-comparison tables at 358px need very tight cells.
        Fixed layout so columns size evenly; allow breaks anywhere. */
  .pw-prose .hvc-table-scroll {
    overflow: hidden !important;
    background-image: none !important;
    border: 1px solid var(--rule) !important;
    border-radius: 6px !important;
    margin: 16px 0 !important;
  }
  .pw-prose .hvc-table-scroll > table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 11px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .pw-prose .hvc-table-scroll th,
  .pw-prose .hvc-table-scroll td {
    padding: 6px 5px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }
  .pw-prose .hvc-table-scroll th {
    font-size: 10.5px !important;
    letter-spacing: -0.01em;
  }

  /* 3) Callout boxes (✅ 결론 / 💡 팁 / ⚠ 주의 / ℹ 참고):
        left-align text, tighten padding so the block doesn't feel
        indented on a narrow screen. */
  .pw-prose div[style*="border-left:4px"],
  .pw-prose div[style*="border-left: 4px"] {
    text-align: left !important;
    padding: 10px 12px !important;
    margin: 14px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  .pw-prose div[style*="border-left:4px"] > strong:first-child,
  .pw-prose div[style*="border-left: 4px"] > strong:first-child {
    margin-bottom: 4px !important;
    font-size: 12px !important;
  }

  /* 4) .pw-prose body text: override inline font-size:1rem / 1.75 with
        the same compact scale used elsewhere. */
  .pw-prose,
  .pw-prose p,
  .pw-prose li {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  /* Lists inside pw-prose have margin-left:1.5rem inline — tighten. */
  .pw-prose ul,
  .pw-prose ol {
    margin: 0.5rem 0 0.9rem 1.1rem !important;
    padding-left: 0.3rem !important;
  }

  /* 5) Numbered step cards (<ol style="counter-reset:pw-step"> with
        circular badge <span> per <li>). PostWriter adds
        padding:12px 14px 12px 52px to each <li> as a gutter for the
        badge, but the badge is inline-block (not absolute) so that
        52px becomes dead whitespace on mobile. Kill the left pad and
        let the badge sit naturally at the start of the line. */
  .pw-prose ol[style*="counter-reset"] {
    margin: 12px 0 !important;
    padding: 0 !important;
  }
  .pw-prose ol[style*="counter-reset"] > li {
    padding: 10px 12px !important;
    margin: 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .pw-prose ol[style*="counter-reset"] > li > span:first-child {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 11px !important;
    margin-right: 8px !important;
  }

  /* ---- Related posts + tags: make rows stack cleanly on narrow ----- */
  .hvc-related { padding: 32px 0 0; }
  .hvc-related__row {
    grid-template-columns: 56px 1fr;
    row-gap: 4px;
    padding: 14px 0;
  }
  .hvc-related__row .hvc-post-meta { display: none; }
  .hvc-related__title { font-size: 15px; }
  .hvc-tagcloud { padding: 24px 0; gap: 12px 14px; }
  .hvc-tagcloud a { font-size: 15px; }

  /* ---- Hero + page padding ---------------------------------------- */
  .hvc-hero { padding: 48px 0 40px; }
  .hvc-hero p { font-size: 15px; line-height: 1.65; }
  .hvc-page-article .hvc-hero { padding: 48px 0 28px; }
}

/* =============================================================
   POPULAR POSTS SLIDER (home hero replacement)
   ============================================================= */
.hvc-popular {
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.hvc-popular__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.hvc-popular__nav { display: flex; gap: 8px; }
.hvc-popular__btn {
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono, monospace);
  font-size: 15px;
  cursor: pointer;
  border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s;
}
.hvc-popular__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.hvc-popular__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.hvc-popular__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.hvc-popular__rail::-webkit-scrollbar { display: none; }
.hvc-popular__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 180px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card, transparent);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
}
.hvc-popular__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: var(--card-hover, transparent);
}
.hvc-popular__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.hvc-popular__title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hvc-popular__card:hover .hvc-popular__title { color: var(--accent); }
.hvc-popular__foot {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .hvc-popular { padding: 32px 0 28px; }
  .hvc-popular__rail { grid-auto-columns: 82%; }
  .hvc-popular__nav { display: none; }
}

/* --------------------------------------------------------------
   §16. Google login for comments (.hvc-gauth)
   Matches the editorial minimal comment styling (§14.5).
   Two states share one container:
     - Logged out: Google-rendered button + note
     - Logged in:  avatar + name + email chip + logout link
   -------------------------------------------------------------- */
.hvc-gauth {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule, #e5e5e5);
  border-radius: 10px;
  background: var(--card, #fafafa);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.hvc-gauth__prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.hvc-gauth__btn-slot {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.hvc-gauth__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #777);
}
.hvc-gauth__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hvc-gauth__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--rule, #e5e5e5);
  flex-shrink: 0;
}
.hvc-gauth__avatar--fallback {
  background: linear-gradient(135deg, var(--accent, #c3513a), var(--accent-2, #8a3524));
}
.hvc-gauth__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #111);
}
.hvc-gauth__email {
  font-size: 12.5px;
  color: var(--muted, #777);
}
.hvc-gauth__logout {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--rule, #e5e5e5);
  border-radius: 6px;
  background: transparent;
  font-size: 12.5px;
  color: var(--muted, #777);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hvc-gauth__logout:hover {
  color: var(--accent, #c3513a);
  border-color: var(--accent, #c3513a);
}
.hvc-gauth + .comment-form-comment,
.hvc-gauth ~ p.comment-form-comment {
  margin-top: 0;
}

@media (max-width: 560px) {
  .hvc-gauth { padding: 12px 14px; }
  .hvc-gauth__chip { gap: 8px; }
  .hvc-gauth__email { flex-basis: 100%; margin-left: 42px; margin-top: -4px; }
  .hvc-gauth__logout { margin-left: auto; }
}

/* --------------------------------------------------------------
   Tweak tokens without editing this file:
     외모 → 커스터마이저 → 추가 CSS
     :root { --accent: oklch(0.62 0.19 25); --serif: "Your Font", serif; }
   Theme updates won't overwrite customizer CSS.
   -------------------------------------------------------------- */