/*
Theme Name: Parangsae Skin (파랑새피부과)
Theme URI: https://bluebirdskin.example
Author: 파랑새피부과
Author URI: https://bluebirdskin.example
Description: 파랑새피부과 공식 홈페이지 테마 — Bluebird Herbarium, Vol. I. 자연주의 리프팅을 추구하는 진료 철학을 담은 식물 표본 저널 스타일.
Version: 1.13.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parangsae-skin
Tags: one-column, custom-logo, custom-menu, editor-style, threaded-comments
*/

@import url("https://cdn.jsdelivr.net/gh/fonts-archive/GangwonEduModu/subsets/GangwonEduModu-dynamic-subset.css");

/* =========================================================
   PARANGSAE DERMATOLOGY — BLUEBIRD HERBARIUM, Vol. I
   Neutral grayscale palette · botanical journal style
========================================================= */

:root {
  /* ============================================================
     COLOR SYSTEM · brand tokens
     ────────────────────────────────────────────────────────────
     Single source of truth. To re-skin the entire site, edit
     only these three tokens — every downstream color (text,
     surface, overlay, accent) auto-derives via color-mix() and
     CSS relative-color rgb(from …) syntax.
  ============================================================ */
  --brand-primary:   #444C38;   /* main accent · dark blocks · body text */
  --brand-secondary: #f0e9d5;   /* surface base · cream paper · page bg */
  --brand-accent:    #c8bd9f;   /* tertiary · tags · subtle accents */

  /* ============================================================
     INK SCALE — derived from --brand-primary
     (mixed with --brand-secondary so grays inherit paper warmth)
  ============================================================ */
  --ink:     var(--brand-primary);
  --ink-2:   var(--brand-primary);
  --ink-3:   color-mix(in srgb, var(--brand-primary) 80%, var(--brand-secondary));
  --ash:     color-mix(in srgb, var(--brand-primary) 55%, var(--brand-secondary));
  --ash-2:   color-mix(in srgb, var(--brand-primary) 38%, var(--brand-secondary));
  --silver:  color-mix(in srgb, var(--brand-primary) 22%, var(--brand-secondary));

  /* ============================================================
     SURFACE SCALE — derived from --brand-secondary
  ============================================================ */
  --paper:   var(--brand-secondary);
  --soft:    color-mix(in srgb, var(--brand-secondary) 94%, var(--brand-primary));
  --mist:    color-mix(in srgb, var(--brand-secondary) 92%, white);
  --pearl:   color-mix(in srgb, var(--brand-secondary) 85%, var(--brand-primary));

  /* ============================================================
     ACCENT — derived from --brand-accent
  ============================================================ */
  --kraft:   var(--brand-accent);

  /* ============================================================
     LEGACY ALIASES (back-compat with existing rules)
  ============================================================ */
  --forest:    var(--ink-3);
  --forest-2:  var(--ink-2);
  --forest-3:  color-mix(in srgb, var(--brand-primary) 92%, black);
  --moss:      var(--ash);
  --moss-2:    var(--ash-2);
  --sage:      var(--pearl);
  --sage-2:    var(--silver);
  --leaf:      var(--ash-2);
  --white:     #ffffff;
  --ivory:     var(--soft);
  --cream:     var(--mist);
  --muted:     var(--ash);

  --line: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.22);
  --line-dotted: rgba(0, 0, 0, 0.32);
  --line-light: rgba(255, 255, 255, 0.22);
  --line-light-dotted: rgba(255, 255, 255, 0.3);

  --serif: "Cormorant Garamond", "Nanum Myeongjo", "Noto Serif KR", Georgia,
    "Times New Roman", serif;
  --script: "Italianno", "Cormorant Garamond", cursive;
  --sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;

  --gutter: clamp(24px, 6vw, 88px);
  --section-pad-y: clamp(80px, 11vw, 160px);
  --content-max: 1200px;

  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: 0;
  background-color: var(--paper);
  background-image:
    var(--paper-grain),
    radial-gradient(ellipse at top, var(--mist) 0%, var(--paper) 35%, var(--soft) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   PRIMITIVES
============================================================ */

.italic, em.italic, span.italic { font-style: italic; }

.script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.latin {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ash);
}

.label {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--ash);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.display {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.display.xl {
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 300;
}
.display .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
}

.lead {
  max-width: 640px;
  margin: 28px auto 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.86;
}
.lead-sm {
  max-width: 460px;
  margin: 14px 0 0;
  color: var(--ash);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.8;
}

.rule-thin {
  display: block;
  width: 64px;
  height: 1px;
  margin: 24px 0 0;
  background: var(--line-strong);
}
.specimen-header.centered .rule-thin { margin-left: auto; margin-right: auto; }

.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px var(--gutter);
}
.ornament-divider .rule {
  flex: 1;
  max-width: 260px;
  height: 1px;
  background: var(--line);
}
.ornament-divider img {
  width: 220px;
  max-width: 30vw;
  opacity: 0.7;
  mix-blend-mode: multiply;
  filter: grayscale(1);
}
.ornament-divider img.small { width: 60px; }

/* ============================================================
   MASTHEAD
============================================================ */

.masthead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 64px var(--gutter) 0;
  text-align: center;
  /* 흰색 로고·메뉴 가독성 확보용 — 헤더 대부분 80%↑ 불투명도 유지,
     하단 끝부분(75% → 100%)에서만 빠르게 페이드. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand-primary) 95%, transparent) 0%,
    color-mix(in srgb, var(--brand-primary) 90%, transparent) 60%,
    color-mix(in srgb, var(--brand-primary) 82%, transparent) 75%,
    transparent 100%
  );
  backdrop-filter: none;
  color: rgba(255, 255, 255, 0.92);
}

.masthead-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding-bottom: 22px;
}

.masthead-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.06em;
  min-width: 0;
}
.masthead-meta.left { justify-content: flex-start; }
.masthead-meta .meta-text { white-space: nowrap; }

.masthead-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.masthead-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  gap: 8px;
}
.masthead-title > * { margin: 0; }
.masthead-title .title-kr-link {
  display: block;
  text-align: center;
}

.masthead-ornament {
  width: 50px;
  height: 50px;
  display: block;
  object-fit: contain;
  opacity: 0.92;
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}
.custom-logo {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
  display: block;
}
.custom-logo-link {
  display: inline-block;
  line-height: 0;
}

.masthead-title .title-kr {
  display: block;
  text-align: center;
  font-family: "GangwonEdu Modu", var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

/* Hamburger lives inside masthead-meta.right; hidden on desktop */
.masthead-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.masthead-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.95);
  position: relative;
}
.masthead-hamburger span::before,
.masthead-hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.95);
}
.masthead-hamburger span::before { top: -6px; }
.masthead-hamburger span::after { top: 6px; }

/* ============================================================
   PRIMARY NAVIGATION
============================================================ */

.masthead-nav {
  margin-top: 12px;
  padding: 12px var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.masthead-nav .nav-list,
.masthead-nav .sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.masthead-nav .nav-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 38px);
  font-family: var(--sans);
  font-size: 13.5px;
}
.masthead-nav .nav-list > li {
  position: relative;
}
.masthead-nav .nav-list > li > a {
  display: inline-block;
  padding: 8px 4px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 180ms ease;
}
.masthead-nav .nav-list > li > a:hover,
.masthead-nav .nav-list > li:focus-within > a {
  color: var(--white);
}

/* Desktop dropdown */
.masthead-nav .sub-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 240px;
  padding: 14px 0;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  z-index: 5;
}
/* 메가메뉴 — nav 어디든 hover/focus 하면 모든 탑레벨의 서브가 동시에 펼쳐짐.
   개별 li hover 도 그대로 유지(키보드 포커스 포함) → 단일 항목 진입 시에도 자연스럽게 동작. */
.masthead-nav .nav-list > li:hover > .sub-list,
.masthead-nav .nav-list > li:focus-within > .sub-list,
.masthead-nav:hover .nav-list > li > .sub-list,
.masthead-nav:focus-within .nav-list > li > .sub-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms ease, transform 200ms ease;
}
.masthead-nav .sub-list a {
  display: block;
  padding: 9px 22px;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.masthead-nav .sub-list a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}
.masthead-nav .sub-list .sub-list--deep {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin: 4px 0 8px 16px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  min-width: 0;
}
.masthead-nav .sub-list .sub-list--deep a {
  padding: 5px 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
}
.masthead-nav .sub-list .sub-list--deep a:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
}

/* Mobile-only toggle button injected by JS — hidden on desktop */
.nav-toggle { display: none; }

/* ============================================================
   MEGAMENU — Desktop only (JS-injected)
   nav 어디든 hover/focus 하면 헤더 아래 다크 솔리드 패널이 페이드인.
   sub-list 들을 한 패널 안에 균등 컬럼으로 정렬한다(JS 가 복제 삽입).
   기존 individual .sub-list 드롭다운은 데스크탑에서 비활성화.
============================================================ */
.masthead-mega { display: none; }

.masthead-mega__grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead-mega__col {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}
.masthead-mega__col:last-child { border-right: 0; }

.masthead-mega__parent {
  display: block;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
}

.masthead-mega__children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.masthead-mega__children a {
  display: block;
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  transition: background 160ms ease, color 160ms ease;
}
.masthead-mega__children a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 1081px) {
  .masthead.megamenu-ready .masthead-mega {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-2);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid var(--brand-accent);
    padding: 32px 0 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
    z-index: 5;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  }
  .masthead.megamenu-ready:hover .masthead-mega,
  .masthead.megamenu-ready:focus-within .masthead-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* 데스크탑에선 개별 li 드롭다운(.sub-list)을 끄고 메가패널로만 보여줌 */
  .masthead.megamenu-ready .masthead-nav .sub-list {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  /* 모바일 — 메가패널 사용 안 함, 기존 드로어 메뉴(.sub-list)가 처리 */
  .masthead-mega { display: none !important; }
}

/* ============================================================
   COVER — full-bleed cinematic hero
============================================================ */

.cover {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--ink-2);
}

/* Hero rotating slides — replaces .cover::before single image */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: hero-rotate 24s infinite ease-in-out;
}
.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: -16s; }
.hero-slide-3 { animation-delay: -8s; }

@keyframes hero-rotate {
  0%, 29% { opacity: 1; }
  33%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide-1 { opacity: 1; }
  .hero-slide-2,
  .hero-slide-3 { opacity: 0; }
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgb(from var(--brand-primary) r g b / 0.82) 0%,
      rgb(from var(--brand-primary) r g b / 0.42) 28%,
      rgb(from var(--brand-primary) r g b / 0.5) 70%,
      rgb(from var(--brand-primary) r g b / 0.88) 100%),
    linear-gradient(90deg,
      rgb(from var(--brand-primary) r g b / 0.58) 0%,
      rgb(from var(--brand-primary) r g b / 0.14) 38%,
      rgb(from var(--brand-primary) r g b / 0.14) 62%,
      rgb(from var(--brand-primary) r g b / 0.46) 100%);
  z-index: 1;
}

.cover-frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(160px, 18vw, 240px) clamp(28px, 7vw, 110px) clamp(80px, 9vw, 140px);
  color: var(--white);
  text-align: left;
}

.cover-overline {
  position: relative;
  margin: 0 0 22px;
  color: var(--pearl);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.cover-title {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.96;
  color: var(--white);
  max-width: 720px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}
.cover-title .line {
  display: block;
  font-size: clamp(56px, 8.4vw, 132px);
  letter-spacing: -0.005em;
}
.cover-title .line.italic {
  font-style: italic;
  font-weight: 400;
  color: var(--white);
  text-indent: 0.5em;
}
.cover-title .line.script { display: none; }

.cover-script {
  position: relative;
  margin: 26px 0 0;
  color: var(--pearl);
  font-family: var(--script);
  font-size: clamp(28px, 2.6vw, 42px);
  letter-spacing: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cover-art { display: none; }

.cover-credits {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 36px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  max-width: 720px;
}
.cover-credits > div {
  display: grid;
  gap: 6px;
  text-align: left;
}
.cover-credits .label { color: var(--pearl); margin: 0; }
.cover-credits strong {
  color: var(--white);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.02em;
}
.cover-credits strong em { font-style: italic; font-weight: 400; }
.cover-credits .latin { font-size: 13px; color: var(--silver); }
.cover-credits .cover-rule {
  width: 1px;
  background: rgba(255, 255, 255, 0.24);
}

.cover + .ornament-divider {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* ============================================================
   SPECIMEN HEADER
============================================================ */

.specimen-header { margin: 0 0 64px; }
.specimen-header.centered { text-align: center; }

.specimen-header .folio {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ash);
  background: rgba(255, 255, 255, 0.5);
}
.specimen-header .display { margin: 0 0 12px; }
.specimen-header .header-icon {
  display: block;
  width: 110px;
  height: 110px;
  margin: 8px auto 16px;
  opacity: 0.8;
  mix-blend-mode: multiply;
  filter: grayscale(1);
}
.specimen-header .latin { display: block; margin: 4px 0 0; }
.specimen-header.centered .folio { margin-bottom: 14px; }

/* ============================================================
   FEATURE
============================================================ */

.feature {
  position: relative;
  padding: var(--section-pad-y) var(--gutter);
  background: transparent;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.ornament-divider {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.specimen-body.two-col {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 1.05fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.specimen-body.centered { text-align: center; max-width: 1080px; margin: 0 auto; }

/* ============================================================
   HERBARIUM CARD
============================================================ */

.herbarium-card { margin: 0; }

.herbarium-card-inner {
  position: relative;
  padding: clamp(18px, 2vw, 28px);
  background-color: #ffffff;
  background-image:
    var(--paper-grain),
    linear-gradient(180deg, #ffffff, #f5f5f4);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.herbarium-card-inner img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.65) contrast(0.99);
}

.herbarium-tag {
  position: relative;
  margin-top: 18px;
  padding: 14px 14px 14px 18px;
  background: var(--kraft);
  background-image: linear-gradient(180deg, #dcdad6, #cfcdca);
  border: 1px solid rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 4px;
  font-family: var(--serif);
  color: var(--ink-3);
}
.herbarium-tag .latin { color: var(--ink-3); font-size: 13px; }
.herbarium-tag span:not(.latin) {
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ash);
}
.herbarium-tag em { font-size: 12px; font-style: italic; color: var(--ash-2); }
.herbarium-tag::before {
  content: "";
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.22);
}
.herbarium-tag.tall { padding-bottom: 18px; }

/* ============================================================
   PROFILE
============================================================ */

.specimen-text { padding-top: 6px; }

.specimen-dl {
  margin: 0 0 32px;
  padding: 0 0 22px;
  border-bottom: 1px dashed var(--line-dotted);
  display: grid;
  gap: 14px;
}
.specimen-dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 20px;
}
.specimen-dl dt {
  margin: 0;
  color: var(--ash);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.specimen-dl dd {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.specimen-dl dd em { font-style: italic; font-weight: 400; color: var(--ash); }

.drop-cap {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.84;
}
.drop-cap::first-letter {
  float: left;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 0.9;
  padding: 6px 12px 0 0;
  color: var(--ink-2);
}

/* 의료진 소개글 — 오른쪽 컬럼 본문 */
.doctor-intro {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--line-dotted);
}
.doctor-intro p {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.85;
  word-break: keep-all;
}
.doctor-intro p:last-child { margin-bottom: 0; }
.doctor-intro-lead {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 500;
  line-height: 1.35 !important;
  color: var(--ink-2);
  margin-bottom: 22px !important;
  letter-spacing: 0.01em;
}

/* 의료진 섹션 하단 — 인용 멘트 (풀-가로) */
.doctor-note {
  position: relative;
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 760px;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 4vw, 56px) 0;
  text-align: center;
}
.doctor-note-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(72px, 7vw, 110px);
  line-height: 0.5;
  color: var(--silver);
  opacity: 0.6;
  margin-bottom: 4px;
  user-select: none;
  pointer-events: none;
}
.doctor-note p {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.65;
  word-break: keep-all;
}

.signature.script {
  margin: 22px 0 0;
  font-family: var(--script);
  font-size: 38px;
  color: var(--ink-2);
}

/* ============================================================
   MANIFESTO — DARK CHARCOAL ACCENT BLOCK
============================================================ */

.feature.manifesto {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.manifesto {
  position: relative;
  background-color: var(--ink-2);
  color: rgba(255, 255, 255, 0.92);
  isolation: isolate;
}
.manifesto > .specimen-header,
.manifesto > .specimen-body {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.manifesto .specimen-header { position: relative; z-index: 1; }
.manifesto .specimen-body { position: relative; z-index: 1; }

.manifesto > .specimen-body.two-col {
  position: relative;
  background: none !important;
}
.manifesto > .specimen-body.two-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-art, none) right center / 60% auto no-repeat;
  filter: grayscale(1) brightness(1.1);
  opacity: 0.32;
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 0;
}
.manifesto > .specimen-body.two-col > * { position: relative; z-index: 1; }

.manifesto .specimen-header .folio {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
}
.manifesto .display { color: var(--white); }
.manifesto .display .italic { color: var(--pearl); }
.manifesto .latin { color: rgba(255, 255, 255, 0.7); }
.manifesto .rule-thin { background: rgba(255, 255, 255, 0.32); }

.pullquote { margin: 0; position: relative; padding-left: 28px; }
.pullquote .quote-mark {
  position: absolute;
  top: -32px; left: -10px;
  font-family: var(--serif);
  font-size: 140px;
  line-height: 1;
  color: var(--silver);
  opacity: 0.75;
}
.pullquote p {
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.18;
  word-break: keep-all;
}
.pullquote p em { font-style: italic; font-weight: 400; color: var(--pearl); }

.manifesto-copy {
  padding-left: 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.26);
}
.manifesto .drop-cap { color: rgba(255, 255, 255, 0.92); }
.manifesto .drop-cap::first-letter { color: var(--pearl); }

/* 매니페스토 — 중앙 단일 문장 변형 */
.manifesto-statement {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 80px);
  text-align: center;
}
.manifesto-statement-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(96px, 9vw, 160px);
  line-height: 0.4;
  color: var(--silver);
  opacity: 0.7;
  margin-bottom: 16px;
  user-select: none;
  pointer-events: none;
}
.manifesto-statement p {
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  word-break: keep-all;
}

.signature-line {
  margin: 30px 0 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px dashed rgba(255, 255, 255, 0.32);
}
.signature-line span:first-child {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.signature-line .script {
  color: var(--white);
  font-family: var(--script);
  font-size: 36px;
}

/* ============================================================
   LIFTING
============================================================ */

.lifting { background: transparent; }
.lifting .specimen-body.centered { max-width: 980px; }
.lifting-plate { margin: 56px auto 0; max-width: 920px; }
.lifting-plate .herbarium-card-inner img {
  aspect-ratio: 16 / 9;
  filter: saturate(0.55) contrast(1.02);
}

/* ============================================================
   TREATMENT INDEX
============================================================ */

.treatments {
  text-align: center;
  position: relative;
  background: transparent;
}
.treatments .specimen-header { text-align: center; }
.treatments .specimen-header .lead-sm { margin-left: auto; margin-right: auto; }
.treatments .specimen-header .rule-thin { margin: 24px auto 0; }

.specimen-grid {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}
.specimen-grid li { margin: 0; }

.specimen-card {
  position: relative;
  margin: 0;
  padding: 36px 36px 28px;
  background-color: #ffffff;
  background-image:
    var(--paper-grain),
    linear-gradient(180deg, #ffffff, #f3f3f2);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
  text-align: left;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.specimen-grid a:hover .specimen-card {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.12);
}
.specimen-card::before {
  content: "";
  position: absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.card-no {
  position: absolute;
  top: 16px; right: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--ash);
}
.card-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  opacity: 0.92;
  mix-blend-mode: multiply;
  filter: grayscale(1);
}
.specimen-card figcaption { display: grid; gap: 6px; margin: 0; }
.specimen-card .latin {
  display: block;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ash);
}
.specimen-card h3 {
  margin: 4px 0 6px;
  color: var(--ink-2);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
}
.specimen-card p {
  margin: 0;
  color: var(--ash);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.6;
}
.specimen-card .card-rule {
  display: block;
  margin: 12px 0 8px;
  width: 36px;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
}
.specimen-card .hint {
  font-style: italic;
  color: var(--ash);
  font-size: 13px;
  letter-spacing: 0.03em;
}

.editorial-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 56px auto 0;
  padding: 14px 0;
  border-top: 1px solid var(--ink-2);
  border-bottom: 1px solid var(--ink-2);
  color: var(--ink-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.04em;
  transition: letter-spacing 200ms ease;
}
.editorial-cta em { font-style: normal; font-family: var(--sans); }
.editorial-cta:hover { letter-spacing: 0.12em; }

/* ============================================================
   PORTFOLIO
============================================================ */

.portfolio {
  position: relative;
  background: transparent;
}
.feature.portfolio {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.portfolio-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: start;
}
.portfolio-grid li { margin: 0; }
.portfolio-grid .offset { transform: translateY(60px); }

.portfolio-grid .herbarium-card-inner img {
  aspect-ratio: 3 / 4;
  object-position: left bottom;
  filter: saturate(0.55) contrast(1.02);
}
.portfolio-grid .paper .herbarium-card-inner img,
.portfolio-grid li:nth-child(3) .herbarium-card-inner img,
.portfolio-grid li:nth-child(4) .herbarium-card-inner img {
  object-position: center;
}
.portfolio-grid .paper .herbarium-card-inner img {
  object-fit: contain;
  background: #ffffff;
  filter: grayscale(1) brightness(1.04) contrast(0.98);
}

/* ============================================================
   DESIGN NOTE
============================================================ */

.design-note .specimen-body.split { align-items: center; }
.design-note .specimen-text p {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.85;
  margin: 0;
}
.note-list {
  list-style: none;
  padding: 22px 0;
  margin: 28px 0 0;
  display: grid;
  gap: 12px;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-2);
  border-top: 1px dashed var(--line-dotted);
  border-bottom: 1px dashed var(--line-dotted);
}
.note-list li { display: flex; align-items: baseline; gap: 10px; }
.note-list .bullet { color: var(--ash-2); font-size: 14px; }
.design-note .signature.script { margin-top: 22px; }

/* ============================================================
   REVIEWS (Specimen No. VI · Naver Place slider)
   풀-블리드 + 다중 카드 그리드 슬라이더 (4 / 3 / 2 / 1)
============================================================ */

.feature.reviews {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.reviews .specimen-header {
  max-width: var(--content-max, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gutter);
  margin-bottom: 56px;
}

.reviews-stage {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 72px);
}
.reviews-viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 14px 0 26px;
  margin: -14px 0 -26px;
}
.reviews-viewport::-webkit-scrollbar { display: none; }
.reviews-track {
  --gap: clamp(16px, 1.6vw, 28px);
  --visible: 4;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--gap);
}
.review-slide {
  flex: 0 0 calc((100% - var(--gap) * (var(--visible) - 1)) / var(--visible));
  scroll-snap-align: start;
  box-sizing: border-box;
  transition: opacity 420ms ease;
}
.review-card {
  position: relative;
  padding: clamp(28px, 2.8vw, 44px) clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 32px);
  min-height: 360px;
  background-color: #ffffff;
  background-image:
    var(--paper-grain),
    linear-gradient(180deg, #ffffff, #faf6ec);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
.review-quote-mark {
  position: absolute;
  top: clamp(2px, 0.8vw, 10px);
  left: clamp(10px, 1.4vw, 22px);
  font-family: var(--serif);
  font-size: clamp(60px, 5vw, 96px);
  line-height: 1;
  color: var(--silver);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.review-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ash);
  letter-spacing: 0.04em;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-dotted);
}
.review-meta .review-author {
  color: var(--ink-2);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
}
.review-meta .review-date,
.review-meta .review-visit { font-style: italic; }
.review-meta .review-sep { color: var(--silver); }
.review-body {
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 1;
  max-height: 16em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}
.review-body p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.review-source {
  position: relative;
  z-index: 1;
  margin: 0;
  align-self: flex-end;
  font-size: 11px !important;
  letter-spacing: 0.16em;
  color: var(--ash);
}

.review-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 0 0 4px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.review-nav:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: #ffffff;
}
.review-nav.prev { left: clamp(4px, 1vw, 20px); }
.review-nav.next { right: clamp(4px, 1vw, 20px); }

.review-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 28px;
  flex-wrap: wrap;
  padding: 0 var(--gutter);
}
.review-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--silver);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 200ms, background 200ms, transform 200ms;
}
.review-dot:hover { opacity: 1; }
.review-dot.is-active {
  background: var(--ink-2);
  opacity: 1;
  transform: scale(1.4);
}

@media (max-width: 1279px) {
  .reviews-track { --visible: 3; }
}
@media (max-width: 980px) {
  .reviews-track { --visible: 2; }
  .review-card { min-height: 340px; }
}
@media (max-width: 640px) {
  .reviews-stage { padding: 0 14px; }
  .reviews-track { --visible: 1.1; --gap: 12px; }
  .review-card {
    min-height: 300px;
    padding: 28px 20px 22px;
    gap: 14px;
  }
  .review-quote-mark { font-size: 60px; top: 0; left: 6px; }
  .review-body { max-height: 14em; }
  .review-body p { font-size: 14.5px; line-height: 1.7; }
  .review-meta { font-size: 12px; }
  .review-meta .review-author { font-size: 14px; }
  .review-nav { width: 38px; height: 38px; font-size: 22px; }
  .review-nav.prev { left: 2px; }
  .review-nav.next { right: 2px; }
}

/* ============================================================
   COMMUNITY (Specimen No. VII · News, Articles & Events)
   /community 통합 피드 — 메인 카드 리스트 + 우측 사이드바
============================================================ */

.feature.community {
  max-width: var(--content-max, 1200px);
  /* 마스트헤드(absolute)가 페이지 상단에 오버레이되므로 그만큼 비워준다. */
  padding-top: clamp(200px, 22vw, 280px);
}
.community .specimen-header { margin-bottom: 36px; }

/* 카테고리 필터 칩 */
.community-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 44px;
}
.community-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ash);
  background: rgba(255, 255, 255, 0.4);
  transition: all 180ms ease;
}
.community-chip:hover {
  color: var(--ink-2);
  border-color: var(--ink-2);
  background: rgba(255, 255, 255, 0.7);
}
.community-chip.is-active {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--white);
}

/* 레이아웃 — 메인 + 사이드바 */
.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}

/* 카드 */
.community-list { display: grid; gap: 22px; }
.community-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  padding: clamp(18px, 2vw, 28px);
  background-color: #ffffff;
  background-image: var(--paper-grain), linear-gradient(180deg, #ffffff, #faf7f0);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.community-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.community-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.community-card-thumb:hover img { transform: scale(1.04); }
.community-card-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 42px;
  color: var(--silver);
  opacity: 0.6;
}

.community-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.community-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--ash);
}
.community-tag.tag-notice { background: var(--ink-2); }
.community-tag.tag-blog   { background: color-mix(in srgb, var(--brand-accent) 70%, var(--brand-primary)); }
.community-tag.tag-event  { background: color-mix(in srgb, var(--brand-primary) 60%, var(--brand-accent)); }

.community-card-title {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.3;
  color: var(--ink-2);
  word-break: keep-all;
}
.community-card-title a { color: inherit; }
.community-card-title a:hover { color: color-mix(in srgb, var(--ink-2) 70%, var(--brand-accent)); }

.community-card-excerpt {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ash);
  word-break: keep-all;
}
.community-card-more {
  margin-left: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.community-card-more:hover { color: var(--brand-primary); }

.community-card-meta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ash);
}
.community-card-meta .meta-author { font-style: italic; color: var(--ink-2); }
.community-card-meta .meta-sep { color: var(--silver); }

/* 페이지네이션 */
.community-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  font-family: var(--serif);
}
.community-pagination .page-num,
.community-pagination .page-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ash);
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: all 160ms ease;
}
.community-pagination .page-num:hover,
.community-pagination .page-arrow:not(.is-disabled):hover {
  color: var(--ink-2);
  border-color: var(--line-strong);
}
.community-pagination .page-num.is-active {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--white);
  font-weight: 500;
}
.community-pagination .page-arrow.is-disabled {
  color: var(--silver);
  cursor: default;
}
.community-empty {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ash);
}

/* 사이드바 */
.community-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 24px;
}
.sidebar-widget {
  padding: 20px 18px;
  background-color: #ffffff;
  background-image: var(--paper-grain), linear-gradient(180deg, #ffffff, #faf7f0);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.sidebar-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.sidebar-title .sidebar-sub {
  margin-left: 6px;
  font-style: italic;
  font-size: 13px;
  color: var(--ash);
  font-weight: 400;
}
.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.sidebar-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  color: inherit;
}
.sidebar-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--mist);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-body { display: grid; gap: 4px; min-width: 0; }
.sidebar-item-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.sidebar-item:hover .sidebar-item-title { color: color-mix(in srgb, var(--ink-2) 70%, var(--brand-accent)); }
.sidebar-item-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ash);
  letter-spacing: 0.03em;
}
.sidebar-empty {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ash);
}

@media (max-width: 980px) {
  /* 모바일/태블릿: Popular 위젯이 본문 위로 올라가도록 재배치
     - .community-sidebar 박스를 display:contents 로 해제 → 두 위젯이 .community-layout 직접 자식으로 승격
     - flex order: 1) Popular (사이드바 첫 위젯) → 2) 본문 → 3) 인기 글 */
  .community-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .community-sidebar {
    display: contents;
    position: static;
  }
  .community-list { order: 2; }
  .community-sidebar > .sidebar-widget:first-child  { order: 1; } /* Popular */
  .community-sidebar > .sidebar-widget:nth-child(2) { order: 3; } /* 인기 글 (조회순) */
}
@media (max-width: 640px) {
  .community-filter { gap: 6px; margin-bottom: 28px; }
  .community-chip { padding: 6px 14px; font-size: 13px; }
  .community-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .community-card-thumb { max-width: 100%; }
  .community-card-title { font-size: 18px; }
  .community-card-excerpt { font-size: 14px; }
  .sidebar-widget { padding: 18px 16px; }
}

/* ============================================================
   COLOPHON
============================================================ */

.colophon {
  position: relative;
  padding: 110px var(--gutter) 56px;
  color: rgba(255, 255, 255, 0.78);
  background: var(--ink-2);
  text-align: center;
  overflow: hidden;
}

.colophon-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.colophon-stamp img {
  width: min(720px, 80%);
  opacity: 0.07;
  filter: invert(1) brightness(2.4) saturate(0);
  mix-blend-mode: screen;
}

.colophon > * { position: relative; z-index: 1; }

.colophon-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px dashed var(--line-light-dotted);
  text-align: left;
}
.colophon-logo { display: grid; gap: 4px; }
.colophon-logo .title-kr {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  color: var(--white);
  letter-spacing: 0.04em;
}
.colophon-logo .title-en {
  font-family: var(--script);
  font-size: 26px;
  color: var(--pearl);
}

.colophon-tag {
  margin: 0;
  text-align: right;
  color: var(--pearl);
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
}
.colophon-tag em { font-style: italic; }

.colophon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px dashed var(--line-light-dotted);
  text-align: left;
}
.colophon-grid .label {
  display: block;
  margin: 0 0 14px;
  color: var(--silver);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.colophon-grid p {
  margin: 4px 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
}
.colophon-grid em { font-style: italic; color: var(--pearl); }

.colophon-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.colophon-bottom .rule-long {
  flex: 1;
  height: 1px;
  background: var(--line-light);
}
.colophon-bottom em { font-style: italic; }
.colophon-link {
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.colophon-link:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}
.colophon-grid p strong {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.colophon-grid p em {
  font-style: italic;
  color: var(--pearl);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1080px) {
  /* Lift entire masthead above the drawer so hamburger stays clickable */
  .masthead { z-index: 60; }

  .masthead-row {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
  }
  .masthead-meta .meta-text { display: none; }
  .masthead-hamburger { display: inline-flex; }

  /* Hamburger → X transition when drawer is open */
  .masthead.is-open .masthead-hamburger span { background: transparent; }
  .masthead.is-open .masthead-hamburger span::before { top: 0; transform: rotate(45deg); }
  .masthead.is-open .masthead-hamburger span::after { top: 0; transform: rotate(-45deg); }
  .masthead-hamburger span,
  .masthead-hamburger span::before,
  .masthead-hamburger span::after { transition: transform 200ms ease, top 200ms ease, background 120ms ease; }

  /* Drawer */
  .masthead-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 100%);
    margin: 0;
    padding: 100px 28px 40px;
    border-top: 0;
    background: var(--ink-2);
    overflow-y: auto;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 280ms ease;
    -webkit-overflow-scrolling: touch;
  }
  .masthead.is-open .masthead-nav {
    transform: translateX(0);
    box-shadow: -24px 0 56px rgba(0, 0, 0, 0.45);
  }
  .masthead.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 40;
    cursor: pointer;
  }

  .masthead-nav .nav-list {
    flex-direction: column;
    gap: 0;
    font-size: 15px;
  }
  .masthead-nav .nav-list > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
  }
  .masthead-nav .nav-list > li > a {
    display: block;
    padding: 16px 36px 16px 0;
    font-size: 16px;
    white-space: normal;
  }

  /* Sub-list inline + collapsed by default */
  .masthead-nav .sub-list {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 12px 4px;
    transition: none;
    display: none;
  }
  .masthead-nav .nav-item.is-expanded > .sub-list { display: block; }
  .masthead-nav .sub-list a {
    padding: 8px 0;
    font-size: 14px;
    white-space: normal;
  }
  .masthead-nav .sub-list .sub-list--deep {
    margin-left: 12px;
    padding: 4px 0;
  }

  /* Caret toggle button injected by JS */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .sub-list .nav-toggle {
    width: 28px;
    height: 28px;
    top: 4px;
    font-size: 18px;
  }

  .cover-frame { padding: 150px clamp(28px, 7vw, 80px) 100px; }

  .cover-credits { flex-direction: column; gap: 18px; }
  .cover-credits .cover-rule {
    width: 80px;
    height: 1px;
    background: rgba(255, 255, 255, 0.32);
  }

  .specimen-body.two-col,
  .specimen-body.split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .manifesto-copy {
    padding-left: 0;
    border-left: 0;
    padding-top: 30px;
    border-top: 1px dashed rgba(255, 255, 255, 0.32);
  }

  .specimen-grid { grid-template-columns: 1fr; gap: 28px; }
  .specimen-card { grid-template-columns: 100px 1fr; padding: 28px; }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid .offset { transform: none; }

  .colophon-top { grid-template-columns: 1fr; gap: 18px; }
  .colophon-tag { text-align: left; }
  .colophon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --gutter: 22px; }

  .masthead { padding: 16px var(--gutter) 0; }
  .masthead-title .title-kr { font-size: 30px; }
  .masthead-ornament { width: 50px; height: 50px; }

  .cover { min-height: 100vh; }
  .cover-frame { padding: 130px 22px 90px; min-height: 100vh; }
  .cover-title .line { font-size: 56px; }
  .cover-script { font-size: 28px; }

  .display { font-size: 32px; }
  .display.xl { font-size: 50px; }

  .pullquote p { font-size: 32px; }
  .pullquote .quote-mark { font-size: 96px; top: -22px; left: -4px; }

  .specimen-card { grid-template-columns: 1fr; text-align: center; }
  .specimen-card::before { inset: 12px; }
  .card-icon { max-width: 140px; margin: 0 auto; }
  .card-no { position: static; display: block; margin-bottom: 10px; }

  .specimen-dl > div { grid-template-columns: 1fr; gap: 4px; }
  .specimen-dl dd { font-size: 17px; }
  .drop-cap { font-size: 17px; }
  .drop-cap::first-letter { font-size: 48px; }
  .doctor-intro p { font-size: 15.5px; line-height: 1.8; }
  .doctor-intro-lead { font-size: 20px !important; }
  .doctor-note p { font-size: 18px; }
  .doctor-note-mark { font-size: 72px; }

  .portfolio-grid { grid-template-columns: 1fr; gap: 18px; }

  .colophon-grid { grid-template-columns: 1fr; gap: 28px; }
  .colophon-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .colophon-bottom .rule-long { width: 100%; }

  .ornament-divider img { width: 160px; }
}

/* ============================================================
   MOBILE MASTHEAD — 고정 헤더 + 로고 좌측 + 타이틀 텍스트 숨김
   (≤ 640px)
============================================================ */
@media (max-width: 640px) {
  .masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    /* 불투명 솔리드 배경 — backdrop-filter/blur 사용 시 새 containing block 이 생겨
       자식 드로어(.masthead-nav)의 position:fixed top/bottom 기준이 마스트헤드 박스로
       바뀌면서 드로어가 마스트헤드 높이로 잘림. */
    background: var(--brand-primary);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
    z-index: 70;
  }
  .masthead-row {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding-bottom: 0;
    align-items: center;
  }
  /* 왼쪽 메타("for body health" 부제) 숨김 — 그 자리에 로고를 배치 */
  .masthead-meta.left { display: none; }
  .masthead-title {
    grid-column: 1;
    justify-self: start;
    align-items: flex-start;
    flex-direction: row;
    gap: 0;
  }
  .masthead-title .title-kr-link,
  .masthead-title .title-kr {
    display: none;
  }
  .masthead-title .custom-logo-link {
    display: inline-block;
    line-height: 0;
  }
  .custom-logo,
  .masthead-ornament {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px;
    max-height: 38px;
    margin: 0;
  }
  .masthead-actions {
    grid-column: 3;
    justify-self: end;
    gap: 8px;
  }
  .masthead-hamburger {
    width: 38px;
    height: 38px;
  }
  /* 드로어가 fixed 헤더에 가려지지 않도록 상단 패딩 확보 */
  .masthead-nav { padding-top: 80px; }

  /* fixed 헤더 만큼 hero 없는 페이지 컨텐츠 보정 */
  .feature.community { padding-top: 92px; }
}

/* ============================================================
   HEADER MARQUEE — 단일 항목 순차 통과 (one-at-a-time pass)
   각 항목은 컨테이너 우측 밖에서 시작 → 좌측 밖으로 빠져나간 뒤
   JS 가 다음 항목을 같은 방식으로 통과시킨다. CSS 키프레임 X.
============================================================ */
.parangsae-marquee {
	width: 100%;
	background: #33392a;
	color: #f1f3f7;
	overflow: hidden;
	/* 마스트헤드(z-index:10) 가 absolute/fixed 로 마키 영역을 덮어 클릭이 가로채지므로
	   마키를 위로 올려서 anchor 의 href 가 정상 동작하도록. */
	position: relative;
	z-index: 80;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	height: 34px;
}

.parangsae-marquee-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.parangsae-marquee-item {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 0 18px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	will-change: transform;
}

.parangsae-marquee-item.is-active {
	display: inline-flex;
}

.parangsae-marquee-item:hover .parangsae-marquee-title {
	text-decoration: underline;
	color: #ffd089;
}

.parangsae-marquee-dot {
	color: #6b7280;
	font-size: 10px;
	opacity: 0.7;
}

.parangsae-marquee-title {
	color: #f1f3f7;
}

@media (max-width: 768px) {
	.parangsae-marquee {
		font-size: 12px;
		height: 30px;
	}
	.parangsae-marquee-item {
		padding: 0 12px;
	}
}

/* ============================================================
   모바일에서 마키 + 고정 마스트헤드 겹침 방지
   - 마키를 fixed top:0 으로 띄우고 마스트헤드(fixed)를 그 아래(top: 30px)로 이동
   - 마키가 있을 때만(:has) 적용해 마키 없는 페이지에선 영향 없음
============================================================ */
@media (max-width: 640px) {
	body:has(.parangsae-marquee) .parangsae-marquee {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 80;
	}
	body:has(.parangsae-marquee) .masthead {
		top: 30px;
	}
	/* 마키 30px + 마스트헤드 ~58px 만큼 본문 상단을 더 띄움 */
	body:has(.parangsae-marquee) .feature.community {
		padding-top: clamp(112px, 22vw, 150px);
	}
}

/* ============================================================
   장비/시술 카드 + 단일 페이지
   - shortcode [parangsae_equipment_cards] 가 임의 페이지 본문에 카드 그리드 출력
   - /equipment/{slug}/ single 페이지 hero + 본문 + 관련 시술 그리드
   skinbooster_post.html 의 .post-skinbooster-* 톤을 글로벌로 승격하되,
   카드/single 만 필요한 최소 범위. 본문에 풀 herbarium 페이지가 있을 때는
   페이지 자체 <style> 토큰이 우선 (.post-skinbooster 안쪽).
============================================================ */
.parangsae-eq-cards,
.parangsae-eq-single {
	--psb-paper:      #f5efe0;
	--psb-paper-soft: #ece4d2;
	--psb-paper-deep: #e4d9bf;
	--psb-ink:        #2c2a24;
	--psb-ink-soft:   #5a5448;
	--psb-ink-faint:  #8f8770;
	--psb-sage:       #6c7a55;
	--psb-sage-deep:  #4b5a3d;
	--psb-terracotta: #b06b48;
	--psb-rule:       #b5a986;
	--psb-max:        1080px;
	--psb-pad:        clamp(20px, 4vw, 56px);
	font-family: "Noto Serif KR", "Cormorant Garamond", serif;
	color: var(--psb-ink);
	word-break: keep-all;
}

/* ---- 카드 그리드 (shortcode 출력) ---- */
.parangsae-eq-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	max-width: var(--psb-max);
	margin: 0 auto;
	padding: clamp(20px, 4vw, 40px) var(--psb-pad);
}
@media (max-width: 760px) {
	.parangsae-eq-cards { grid-template-columns: 1fr; }
}
.parangsae-eq-card {
	background: var(--psb-paper);
	border: 1px solid var(--psb-rule);
	padding: clamp(24px, 3vw, 36px);
	position: relative;
}
.parangsae-eq-card .post-skinbooster-card-num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: "Cardo", "Cormorant Garamond", serif;
	font-style: italic;
	color: var(--psb-ink-faint);
	font-size: 13px;
	letter-spacing: 0.25em;
}
.parangsae-eq-card .post-skinbooster-card-image {
	aspect-ratio: 1 / 1;
	background: var(--psb-paper-soft);
	border: 1px solid var(--psb-rule);
	margin-bottom: 22px;
	overflow: hidden;
}
.parangsae-eq-card .post-skinbooster-card-image img {
	width: 100%; height: 100%; object-fit: cover;
}
.parangsae-eq-card .post-skinbooster-card-title {
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 28px);
	margin: 0 0 4px;
	line-height: 1.3;
	color: var(--psb-ink);
}
.parangsae-eq-card .post-skinbooster-card-latin {
	font-family: "Cardo", "Cormorant Garamond", serif;
	font-style: italic;
	color: var(--psb-sage);
	font-size: 13px;
	letter-spacing: 0.18em;
	margin-bottom: 18px;
}
.parangsae-eq-card ul {
	font-size: 14.5px;
	color: var(--psb-ink-soft);
	line-height: 1.85;
	padding-left: 18px;
	margin: 0;
}
.parangsae-eq-card-link {
	color: inherit;
	text-decoration: none;
	display: block;
}
.parangsae-eq-card-link:hover .post-skinbooster-card-title {
	color: var(--psb-sage-deep);
}

/* ---- single 페이지 hero ---- */
.parangsae-eq-single {
	background: var(--psb-paper);
	line-height: 1.75;
}
.parangsae-eq-hero { padding-bottom: clamp(50px, 8vw, 100px); }
.parangsae-eq-hero-wrap {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
@media (max-width: 860px) {
	.parangsae-eq-hero-wrap { grid-template-columns: 1fr; }
}
.parangsae-eq-hero-text { max-width: 540px; }
.parangsae-eq-hero-text .post-skinbooster-eyebrow {
	text-align: left;
	font-family: "Cardo", "Cormorant Garamond", serif;
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0.22em;
	color: var(--psb-sage);
	text-transform: uppercase;
	margin-bottom: 16px;
}
.parangsae-eq-hero-text .post-skinbooster-hero-title {
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.2;
	margin: 0 0 20px;
	text-align: left;
	color: var(--psb-ink);
	letter-spacing: 0.01em;
}
.parangsae-eq-hero-lede {
	font-size: 16px;
	line-height: 1.9;
	color: var(--psb-ink-soft);
	margin: 0;
}
.parangsae-eq-hero-image img {
	border: 1px solid var(--psb-rule);
	background: var(--psb-paper-soft);
	display: block;
	max-width: 100%;
	height: auto;
}

/* single 본문은 콘솔에서 입력한 자유 HTML — wrapper 만 제공 */
.parangsae-eq-body { background: var(--psb-paper); }

/* 관련 시술 그리드 — 카드 톤 재사용 */
.parangsae-eq-related .post-skinbooster-title {
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-size: clamp(28px, 4vw, 38px);
	text-align: center;
	color: var(--psb-ink);
	margin: 0 0 8px;
}
.parangsae-eq-related .post-skinbooster-title em {
	font-style: italic;
	color: var(--psb-sage-deep);
}
.parangsae-eq-related .post-skinbooster-eyebrow {
	font-family: "Cardo", "Cormorant Garamond", serif;
	font-style: italic;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.32em;
	color: var(--psb-sage);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.parangsae-eq-related .post-skinbooster-rule {
	width: 60px;
	height: 1px;
	background: var(--psb-rule);
	margin: 14px auto 32px;
}
.parangsae-eq-related {
	background: var(--psb-paper-soft);
	border-top: 1px solid var(--psb-rule);
	border-bottom: 1px solid var(--psb-rule);
	padding: clamp(60px, 9vw, 110px) var(--psb-pad);
}
.parangsae-eq-related .post-skinbooster-wrap {
	max-width: var(--psb-max);
	margin: 0 auto;
}