@media (min-width: 1024px) and (max-width: 1199px) { .nav-link { padding-inline: var(--space-3); } }
/* ================= BLOG DETAIL ================= */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-links .nav-link { font-weight: var(--weight-semibold); }
@media (max-width: 1023px) { .navbar-inner .btn-wa-nav { display: inline-flex; padding-inline: var(--space-3); } .wa-label { display: none; } }

.progress { position: fixed; left: 0; top: 0; z-index: var(--z-toast); height: 6px; width: 100%; background: transparent; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--color-candy-pink-strong), var(--color-candy-lemon-strong), var(--color-candy-mint-strong), var(--color-candy-lilac-strong)); border-bottom: var(--border-thin) solid var(--color-border-strong); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-8) 0 0; padding: 0; list-style: none; font-size: var(--text-body-sm); color: var(--color-text-muted); }
.crumbs a { color: inherit; text-decoration: none; font-weight: var(--weight-semibold); }
.crumbs a:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); }

.p-head { max-width: none; padding: var(--space-8) 0 var(--space-10); display: grid; gap: var(--space-6); justify-items: start; }
.p-head h1 { margin: 0; font-size: 80px; font-weight: var(--weight-bold); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.p-head .dek { margin: 0; font-size: 24px; line-height: 1.5; color: var(--color-text-secondary); max-width: none; }
.byline { display: flex; align-items: center; gap: var(--space-3); }
.byline .av { width: 44px; height: 44px; border-radius: var(--radius-pill); border: var(--border-base) solid var(--color-border-strong); background: var(--color-candy-lilac); display: grid; place-items: center; font-weight: var(--weight-bold); }
.byline b { display: block; } .byline small { color: var(--color-text-muted); }

/* Hero cover (same sticker language as blog index) */
.cover { position: relative; overflow: hidden; background: var(--bg); }
.cover::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1.5px, transparent 1.6px); background-size: 22px 22px; opacity: .45; }
.sh { position: absolute; border: var(--border-base) solid var(--color-border-strong); box-shadow: var(--shadow-sticker-sm); transition: transform var(--dur-slow) var(--ease-spring); }
.sh.circle, .sh.pill { border-radius: var(--radius-pill); } .sh.box { border-radius: var(--radius-md); }
.sh.blob { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
.sh.star { border: 0; box-shadow: none; clip-path: polygon(50% 0, 61% 30%, 95% 25%, 70% 50%, 95% 75%, 61% 70%, 50% 100%, 39% 70%, 5% 75%, 30% 50%, 5% 25%, 39% 30%); }
.cover-word { position: absolute; left: 5%; bottom: 8%; z-index: 1; padding: var(--space-1) var(--space-4); font-size: var(--text-body-md); font-weight: var(--weight-bold); background: var(--color-bg-surface); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); transform: rotate(-4deg); }
.hero-cover { display: block; height: 420px; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-sticker-md); }
.hero-cover:hover .sh:nth-of-type(1) { transform: translate(-6%, 6%) rotate(-12deg); }
.hero-cover:hover .sh:nth-of-type(2) { transform: translate(8%, -8%) rotate(16deg) scale(1.06); }
.hero-cover:hover .sh:nth-of-type(3) { transform: rotate(40deg); }

/* Layout */
.p-layout { display: grid; grid-template-columns: 240px minmax(0, 680px) minmax(0, 1fr); gap: var(--space-12); padding-top: var(--space-16); }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 110px); align-self: start; }
.toc p { margin: 0 0 var(--space-3); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); border-left: var(--border-base) solid var(--color-border-subtle); }
.toc a { display: block; padding: var(--space-2) var(--space-4); margin-left: calc(var(--border-base) * -1); border-left: var(--border-base) solid transparent; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-body-sm); line-height: 1.35; transition: color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm); }
.toc a:hover { color: var(--color-text-primary); }
.toc a[aria-current="true"] { color: var(--color-text-primary); font-weight: var(--weight-semibold); border-left-color: var(--color-border-strong); background: var(--color-candy-lemon-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.share { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.share #shareBtn[aria-expanded="true"] { transform: translate(3px, 3px); box-shadow: var(--shadow-none); }
.share-pop { position: absolute; left: 0; top: calc(100% + var(--space-3)); z-index: var(--z-dropdown); width: 232px; padding: var(--space-3); display: grid; gap: var(--space-1); background: var(--color-bg-surface); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-md); transform-origin: 20% 0; animation: fs-share-in var(--dur-base) var(--ease-spring); }
.share-pop[hidden] { display: none; }
.share-pop::before { content: ""; position: absolute; top: -9px; left: 120px; width: 14px; height: 14px; background: var(--color-bg-surface); border-left: var(--border-base) solid var(--color-border-strong); border-top: var(--border-base) solid var(--color-border-strong); transform: rotate(45deg); border-radius: 3px 0 0 0; }
.share-pop-title { margin: 0 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.toc .share-item, .share-item { display: flex; margin: 0; border-left: 0; line-height: 1.3; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2); border: 0; background: none; font: inherit; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); text-decoration: none; text-align: left; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-calm); }
.toc .share-item:hover, .share-item:hover, .share-item:focus-visible { color: var(--color-text-primary); background: var(--color-candy-lilac-soft); outline-offset: -2px; }
.share-item[hidden] { display: none; }
.share-item .si { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--c); transition: transform var(--dur-fast) var(--ease-spring); }
.share-item:hover .si { transform: rotate(-10deg) scale(1.08); }
.share-item .si svg { width: 16px; height: 16px; }
@keyframes fs-share-in { from { opacity: 0; transform: translateY(-6px) scale(.92); } to { opacity: 1; transform: none; } }

/* Article typography */
.prose { font-size: 19px; line-height: 1.7; color: var(--color-text-secondary); }
.prose > * { margin: 0 0 var(--space-6); }
.prose h2 { margin: var(--space-16) 0 var(--space-5); color: var(--color-text-primary); font-size: var(--text-heading-lg); line-height: 1.15; letter-spacing: -0.02em; scroll-margin-top: 120px; display: flex; gap: var(--space-4); align-items: baseline; }
.prose h2 .n { flex: none; width: 44px; height: 44px; display: grid; place-items: center; align-self: center; font-size: var(--text-body-md); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--nb, var(--color-candy-pink)); }
.prose strong { color: var(--color-text-primary); }
.prose a { color: var(--color-text-primary); font-weight: var(--weight-semibold); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--color-candy-pink-strong); }
.prose ul { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose .lead { font-size: 23px; line-height: 1.55; color: var(--color-text-primary); }
.callout { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--cb, var(--color-candy-mint-soft)); font-size: var(--text-body-md); line-height: 1.6; color: var(--color-text-primary); }
.callout .ci { width: 44px; height: 44px; display: grid; place-items: center; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg-surface); font-weight: var(--weight-bold); }
.callout p { margin: 0; }
.pull { margin: var(--space-12) 0; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-10); border-left: 6px solid var(--color-border-strong); background: var(--color-candy-pink-soft); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: var(--text-heading-md); line-height: 1.3; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--color-text-primary); }
.check-card { padding: var(--space-8); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-sticker-md); }
.check-card h3 { margin: 0 0 var(--space-5); font-size: var(--text-heading-sm); color: var(--color-text-primary); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.check-list label { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-body-md); line-height: 1.5; color: var(--color-text-primary); cursor: pointer; }
.check-list input { appearance: none; width: 28px; height: 28px; margin: 0; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-surface); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-spring); }
.check-list input:checked { background: var(--color-candy-mint); transform: rotate(-6deg); }
.check-list input:checked::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--color-border-strong); border-bottom: 3px solid var(--color-border-strong); transform: rotate(-45deg) translate(1px, -2px); }
.check-list input:checked + span { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--color-text-muted); }
.score { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-border-subtle); font-size: var(--text-body-md); color: var(--color-text-primary); }
.meter { flex: 1; max-width: 220px; height: 14px; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg-sunken); overflow: hidden; }
.meter span { display: block; height: 100%; width: calc(var(--s, 0) * 100%); background: var(--color-candy-mint-strong); transition: width var(--dur-slow) var(--ease-spring); }

/* After article */
.author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-5); align-items: center; margin-top: var(--space-16); padding: var(--space-6); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-candy-lilac-soft); }
.author .av { width: 72px; height: 72px; border-radius: var(--radius-pill); border: var(--border-base) solid var(--color-border-strong); background: var(--color-candy-lilac); display: grid; place-items: center; font-size: var(--text-heading-md); font-weight: var(--weight-bold); }
.author p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.tags-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }

.related { padding-top: var(--space-24); }
.related h2 { margin: 0 0 var(--space-8); font-size: var(--text-display-lg); line-height: 1; letter-spacing: -0.035em; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.post { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-surface); transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring); }
.post:hover, .post:focus-visible { transform: translate(-3px, -3px) rotate(-0.5deg); box-shadow: var(--shadow-sticker-lg); }
.post .cover { display: block; aspect-ratio: 16 / 10; border-bottom: var(--border-base) solid var(--color-border-strong); }
.post:hover .sh:nth-of-type(1) { transform: translate(-10%, 8%) rotate(-14deg); }
.post:hover .sh:nth-of-type(2) { transform: translate(12%, -10%) rotate(18deg) scale(1.08); }
.post .cover-word { font-size: var(--text-body-sm); }
.post-body { padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; }
.post-body > .badge { justify-self: start; }
.post-body h3 { margin: 0; font-size: var(--text-heading-sm); line-height: 1.2; }
.post-body p { margin: 0; color: var(--color-text-muted); font-size: var(--text-body-sm); }

.cta-band { margin-top: var(--space-24); padding: var(--space-16) var(--space-10); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-xl); background: var(--color-candy-pink-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; box-shadow: var(--shadow-sticker-lg); }
.cta-band h2 { margin: 0; font-size: var(--text-display-lg); line-height: 1; letter-spacing: -0.035em; }
.cta-band p { margin: var(--space-3) 0 0; font-size: var(--text-body-lg); color: var(--color-text-secondary); }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-footer { margin-top: var(--space-24); }
.brand-big { font-size: clamp(52px, 14vw, 220px); font-weight: var(--weight-bold); letter-spacing: -0.06em; line-height: .85; margin: 0; }
.brand-big sup { font-size: .22em; vertical-align: top; position: relative; top: .5em; letter-spacing: 0; }
.footer-tag { font-size: var(--text-heading-lg); font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: var(--space-6) 0 0; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-16); padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-text-inverse); font-size: var(--text-body-sm); }
.footer-row ul { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.footer-row a { color: inherit; opacity: .85; text-decoration: none; } .footer-row a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1199px) {
  .p-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .p-layout > .spacer { display: none; }
}
@media (max-width: 1023px) {
  .p-head h1 { font-size: 60px; }
  .p-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-10); }
  .toc { position: static; padding: var(--space-5); border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
  .toc ol { border-left: 0; } .toc a { border-left: 0; margin-left: 0; padding-inline: 0; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-10) var(--space-6); }
}
@media (max-width: 767px) {
  .wrap { padding: 0 var(--space-4); }
  .p-head h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .p-head .dek { font-size: 19px; }
  .hero-cover { height: 240px; }
  .prose { font-size: 17px; } .prose .lead { font-size: 19px; }
  .prose h2 { font-size: var(--text-heading-md); }
  .pull { padding: var(--space-6); font-size: var(--text-heading-sm); }
  .check-card { padding: var(--space-5); }
  .posts { grid-template-columns: minmax(0, 1fr); }
}

/* Uploaded cover image (CMS) */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* CMS rich text extras */
.prose ol { padding-left: 1.4em; }
.prose h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-heading-sm); line-height: 1.25; }
.prose figure { margin: var(--space-8) 0; }
.prose figure img { display: block; width: 100%; height: auto; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker-sm); }
.prose figcaption { margin-top: var(--space-3); font-size: var(--text-body-sm); color: var(--color-text-muted); }
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-1 { grid-template-columns: minmax(0, 1fr); }
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; border: var(--border-base) solid var(--color-border-strong); border-radius: var(--radius-md); }
.gallery-caption { margin-top: calc(var(--space-3) * -1); font-size: var(--text-body-sm); color: var(--color-text-muted); }
@media (max-width: 767px) { .gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }