/* 포포패밀리 — 시스템 v3 (미쉐린 × 유럽 장터)
   미쉐린의 단정한 활자 위에, 장터의 햇빛과 석회암 · 초록 매대 · 차양 · 손글씨 가격표.
   레퍼런스: 이탈리아 광장의 아케이드와 흰 파라솔, 파리 시장 골목의 초록 매대.
   새 값은 아래 토큰에서 고른다. */

:root {
  color-scheme: light;
  --bg: #FBF7EF;          /* 햇빛 든 크림 */
  --bg-2: #F1E8D9;        /* 석회암 */
  --ink: #1C1A16;
  --mute: #5A5348;
  --faint: #675F52;
  --line: #E3D9C7;
  --line-2: #CCBFA8;
  --accent: #1D5C3D;      /* 파리 시장 매대 초록 = 포포농장 초록 */
  --stall: #0E4A30;       /* 가격표 바탕 */
  --sky: #1F68B0;         /* 광장 위 하늘 — 아주 조금만 */
  --ochre: #94621F;
  --red: #B0122A;         /* 미쉐린 이야기에만 */
  --dark: #1C1A16;
  --dark-text: #F1E8D9;
  --dark-mute: #B9AE9C;
  --gold: #E9C46A;

  --farm: #4C6A2A;
  --cafe: #8C5F0E;
  --table: #1D4A68;
  --pocha: #A5352A;

  --serif: "Noto Serif KR", "AppleMyungjo", serif;
  --latin: "Cormorant Garamond", "Noto Serif KR", serif;
  --hand: "Nanum Pen Script", "Noto Serif KR", cursive;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --t1: 11.5px;
  --t2: 13.5px;
  --t3: 15px;
  --t4: 17px;
  --t5: 20px;
  --t6: 24px;
  --t7: clamp(26px, 3.2vw, 34px);
  --t8: clamp(30px, 4.4vw, 46px);
  --t9: clamp(38px, 6.4vw, 72px);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 80px;
  --s9: 128px;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
}

.st-farm  { --st: var(--farm); }
.st-cafe  { --st: var(--cafe); }
.st-table { --st: var(--table); }
.st-pocha { --st: var(--pocha); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--t4); line-height: 1.75;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.en { font-family: var(--latin); font-style: italic; font-weight: 500; letter-spacing: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); background: var(--ink); color: #fff; padding: var(--s2) var(--s4); z-index: 100; }

/* 라벨 — 작은 대문자, 넓은 자간 */
.label {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--t1); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.label--mute { color: var(--faint); }

/* 네 점 장식 */
.dots { display: inline-grid; grid-template-columns: 6px 6px; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--farm); }
.dots i:nth-child(2) { background: var(--cafe); }
.dots i:nth-child(3) { background: var(--table); }
.dots i:nth-child(4) { background: var(--pocha); }

/* ── 공지 띠 ───────────────────────────── */
.notice { background: var(--dark); color: var(--dark-text); font-size: var(--t2); line-height: 1.5; }
.notice a { display: block; padding: 10px var(--gutter); text-decoration: none; text-align: center; }
.notice b { color: var(--gold); font-weight: 600; margin-right: var(--s2); letter-spacing: 0.02em; }
.notice a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── 헤더 ─────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(251,247,239,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex-shrink: 0; }
.brand svg { width: 22px; height: 22px; }
.brand strong { font-family: var(--serif); font-size: var(--t5); font-weight: 600; letter-spacing: -0.02em; }
.brand small { font-family: var(--latin); font-style: italic; font-size: var(--t4); color: var(--faint); }
.nav { display: flex; gap: var(--s5); margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { position: relative; padding: var(--s2) 0; font-size: var(--t2); font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--mute); display: flex; align-items: center; gap: 7px; }
.nav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st, transparent); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.nav a.nav-visit { color: var(--accent); }
.nav a.nav-visit::before { display: none; }
@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; gap: 0; padding-top: var(--s2); }
  .brand small { display: none; }
  .nav { width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s2); gap: var(--s4); }
}

/* ── 섹션 ─────────────────────────────── */
.sec { padding: var(--s9) 0; }
.sec--alt { background: var(--bg-2); }
.sec--tight { padding: var(--s8) 0; }
.sec + .sec:not(.sec--alt):not(.dark) { border-top: 1px solid var(--line); }
.head { text-align: center; max-width: 760px; margin: 0 auto var(--s8); }
.head .label { margin-bottom: var(--s4); }
.head h2 { font-size: var(--t8); }
.head p { margin-top: var(--s5); color: var(--mute); font-size: var(--t4); }
.head--left { text-align: left; margin-left: 0; }
.rule-orn { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s5); }
.rule-orn::before, .rule-orn::after { content: ""; width: 48px; height: 1px; background: var(--line-2); }

.cites { font-size: 0.6em; line-height: 0; margin-left: 1px; vertical-align: super; font-family: var(--sans); font-weight: 600; }
.cite { color: var(--accent); text-decoration: none; padding: 0 1px; }
.cite:hover { text-decoration: underline; }
.cite + .cite::before { content: ","; color: var(--faint); }
.dark .cite { color: var(--gold); }

/* ── 사진 ─────────────────────────────── */
.ph { position: relative; }
.ph img { width: 100%; height: auto; background: var(--bg-2); }
.dark .ph img { background: #1E1C1A; }
.ph figcaption { margin-top: var(--s3); font-size: var(--t2); color: var(--faint); line-height: 1.5; }
.ph figcaption a { color: var(--faint); text-decoration: none; border-bottom: 1px solid var(--line-2); margin-left: 4px; }
.ph figcaption a:hover { color: var(--ink); }
.ph--fill { height: 100%; }
.ph--fill img { height: 100%; object-fit: cover; }
.dark .ph figcaption, .dark .ph figcaption a { color: var(--dark-mute); }

/* ── 히어로 ───────────────────────────── */
.hero { padding: var(--s8) 0 var(--s8); }
.hero .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); align-items: center; }
.hero h1 { font-size: var(--t9); line-height: 1.18; letter-spacing: -0.035em; font-weight: 600; margin-top: var(--s5); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead { margin-top: var(--s6); font-size: var(--t5); line-height: 1.7; color: var(--mute); max-width: 30em; }
.hero-lead strong { color: var(--ink); font-weight: 600; }
.trio { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s6); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.trio a { text-decoration: none; display: block; }
.trio b { display: block; font-family: var(--serif); font-size: var(--t6); font-weight: 600; }
.trio span { display: flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--faint); }
.trio span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
@media (max-width: 900px) {
  .hero .grid { grid-template-columns: 1fr; gap: var(--s7); }
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .trio b { font-size: var(--t5); }
}

/* ── 노선도 ───────────────────────────── */
.route { display: grid; grid-template-columns: repeat(4, 1fr); }
.route li { position: relative; }
.route li::after { content: ""; position: absolute; top: 8px; left: 18px; right: 0; height: 1px; background: var(--ink); }
.route li:last-child::after { display: none; }
.route li.route-gap::after { background: none; border-top: 1px dashed var(--line-2); height: 0; }
.route a { display: block; text-decoration: none; padding-right: var(--s5); }
.route .dot { position: relative; z-index: 1; display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink); }
.route .dot::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--st); }
.route a:hover .verb { color: var(--accent); }
.route .no { display: block; margin-top: var(--s4); font-family: var(--latin); font-style: italic; font-size: var(--t5); color: var(--faint); }
.route .verb { display: block; font-family: var(--serif); font-size: var(--t7); font-weight: 600; line-height: 1.25; transition: color 0.2s ease; }
.route .name { display: block; font-size: var(--t3); font-weight: 600; margin-top: var(--s2); }
.route .loc { display: block; font-size: var(--t2); color: var(--faint); }
.route .gap-label { position: absolute; top: -20px; left: 45%; font-size: var(--t1); letter-spacing: 0.14em; color: var(--faint); white-space: nowrap; }
@media (max-width: 760px) {
  .route { grid-template-columns: 1fr; }
  .route li { padding-left: 36px; padding-bottom: var(--s6); }
  .route li::after { top: 17px; left: 8px; right: auto; width: 1px; height: 100%; }
  .route li.route-gap::after { border-top: 0; border-left: 1px dashed var(--line-2); width: 0; }
  .route .dot { position: absolute; left: 0; top: 0; }
  .route .no { margin-top: 0; }
  .route .gap-label { top: auto; bottom: 6px; left: 36px; }
}

/* ── 어두운 판 ───────────────────────── */
.dark { background: var(--dark); color: var(--dark-text); }
.dark .label { color: var(--gold); }
.dark p { color: var(--dark-mute); }
.dark h2 { color: var(--dark-text); }
.plaque .grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s8); align-items: center; }
.plaque h2 { font-size: var(--t8); margin-top: var(--s5); line-height: 1.32; }
.plaque p { margin-top: var(--s5); font-size: var(--t4); max-width: 32em; }
.plaque blockquote { margin: var(--s6) 0 0; padding-left: var(--s5); border-left: 1px solid var(--gold); font-family: var(--serif); font-size: var(--t6); color: var(--dark-text); }
@media (max-width: 900px) { .plaque .grid { grid-template-columns: 1fr; gap: var(--s7); } }

/* ── 세 사람 ───────────────────────────── */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
.person { display: flex; flex-direction: column; }
.person h3 { font-size: var(--t8); margin-top: var(--s5); letter-spacing: -0.03em; }
.person .role { display: flex; align-items: center; gap: var(--s2); font-size: var(--t2); font-weight: 600; letter-spacing: 0.04em; color: var(--mute); margin-top: var(--s1); }
.person .role::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.person .line { margin-top: var(--s4); font-size: var(--t3); line-height: 1.75; color: var(--mute); }
.person .facts { margin-top: var(--s4); border-top: 1px solid var(--line); }
.person .facts li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t2); color: var(--mute); line-height: 1.65; }
.person .more { margin-top: auto; padding-top: var(--s5); }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; gap: var(--s8); max-width: 520px; margin: 0 auto; } }

.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait.no-photo { background: var(--st); color: #fff; }
.portrait .type { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s5); }
.portrait .type b { font-family: var(--serif); font-weight: 600; font-size: clamp(72px, 9vw, 120px); line-height: 0.92; letter-spacing: -0.06em; }
.portrait .type small, .portrait .type i { font-style: normal; font-size: var(--t1); letter-spacing: 0.16em; }
.portrait-cap { margin-top: var(--s2); font-size: var(--t1); color: var(--faint); }
.portrait-cap a { color: var(--faint); }

/* ── 인용 ─────────────────────────────── */
.quote { margin: var(--s5) 0 0; }
.quote p { font-family: var(--serif); font-size: var(--t5); line-height: 1.6; font-weight: 500; color: var(--ink); }
.quote p::before { content: "“"; color: var(--accent); margin-right: 2px; }
.quote p::after { content: "”"; color: var(--accent); margin-left: 2px; }
.quote cite { display: block; margin-top: var(--s2); font-style: normal; font-size: var(--t2); color: var(--faint); }

/* ── 링크·버튼 ─────────────────────────── */
.go { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t2); font-weight: 600; letter-spacing: 0.08em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.go::after { content: "→"; transition: transform 0.2s ease; }
.go:hover { color: var(--accent); }
.go:hover::after { transform: translateX(3px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0 var(--s5); min-height: 44px; font-size: var(--t2); font-weight: 600; letter-spacing: 0.06em; text-decoration: none; border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: background 0.15s ease, color 0.15s ease; }
.btn:hover { background: var(--ink); color: #fff; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ── 다섯 가지 반대 ───────────────────── */
.rules { max-width: 980px; margin: 0 auto; border-top: 1px solid var(--ink); }
.rule { display: grid; grid-template-columns: 72px 1fr 1.3fr; gap: var(--s6); padding: var(--s6) 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.rule .n { font-family: var(--latin); font-style: italic; font-size: var(--t7); color: var(--accent); line-height: 1; }
.rule .usual { color: var(--faint); font-size: var(--t3); }
.rule .usual small, .rule .ours small { display: block; font-size: var(--t1); font-weight: 600; letter-spacing: 0.22em; margin-bottom: var(--s2); }
.rule .usual s { text-decoration-thickness: 1px; }
.rule .ours small { color: var(--accent); }
.rule .ours b { display: block; font-family: var(--serif); font-size: var(--t6); line-height: 1.45; font-weight: 600; }
.rule .ours p { margin-top: var(--s2); font-size: var(--t3); color: var(--mute); }
@media (max-width: 760px) { .rule { grid-template-columns: 1fr; gap: var(--s3); } }

/* ── 네 개의 문 ───────────────────────── */
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
.door { display: flex; flex-direction: column; text-decoration: none; }
.door .ph { aspect-ratio: 4 / 5; overflow: hidden; }
.door .ph img { height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.door:hover .ph img { transform: scale(1.03); }
.door .meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.door .no { font-family: var(--latin); font-style: italic; font-size: var(--t5); color: var(--faint); }
.door .verb { font-size: var(--t1); font-weight: 600; letter-spacing: 0.22em; color: var(--accent); }
.door h3 { font-size: var(--t6); margin-top: var(--s4); }
.door .en { display: block; font-size: var(--t4); color: var(--faint); }
.door .who { display: flex; align-items: center; gap: 6px; font-size: var(--t2); font-weight: 600; margin-top: var(--s3); color: var(--mute); }
.door .who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.door p { margin-top: var(--s3); font-size: var(--t3); color: var(--mute); line-height: 1.7; }
.door .loc { margin-top: auto; padding-top: var(--s4); font-size: var(--t2); color: var(--faint); }
.door .go { margin-top: var(--s3); align-self: flex-start; }
@media (max-width: 1000px) { .doors { grid-template-columns: repeat(2, 1fr); gap: var(--s7) var(--s5); } }
@media (max-width: 560px) { .doors { grid-template-columns: 1fr; } }

/* ── 같은 프레임 (접시·밭) ─────────────── */
.frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); }
.frames .ph img { aspect-ratio: 4 / 5; object-fit: cover; }
.frames .ph figcaption b { display: block; font-weight: 600; color: var(--ink); font-size: var(--t2); }
@media (max-width: 900px) { .frames { grid-template-columns: repeat(2, 1fr); } }

/* ── 숫자 ─────────────────────────────── */
.nums { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.num { padding: var(--s6) var(--s4); text-align: center; }
.num + .num { border-left: 1px solid var(--line); }
.num b { display: block; font-family: var(--serif); font-size: var(--t8); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.num b small { font-size: 0.45em; margin-left: 2px; letter-spacing: 0; font-weight: 500; }
.num span { display: block; margin-top: var(--s3); font-size: var(--t2); color: var(--mute); line-height: 1.55; }
@media (max-width: 1000px) {
  .nums { grid-template-columns: repeat(3, 1fr); }
  .num:nth-child(4) { border-left: 0; }
  .num:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .nums { grid-template-columns: repeat(2, 1fr); }
  .num:nth-child(odd) { border-left: 0; }
  .num:nth-child(even) { border-left: 1px solid var(--line); }
  .num:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ── 네 계절 ─────────────────────────── */
.season-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: var(--s7); border-bottom: 1px solid var(--line); }
.season-tabs button { font: inherit; font-family: var(--serif); font-size: var(--t5); min-height: 48px; padding: var(--s2) var(--s6); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--faint); cursor: pointer; }
.season-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.season-tabs button .now { font-family: var(--sans); font-size: var(--t1); margin-left: var(--s2); color: var(--accent); letter-spacing: 0.1em; }
.season { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s8); align-items: start; }
.js .season[hidden] { display: none; }
.season + .season { margin-top: var(--s8); }
.js .season + .season { margin-top: 0; }
.season h3 { font-size: var(--t8); margin-bottom: var(--s2); }
.season h3 small { font-family: var(--latin); font-style: italic; font-weight: 500; font-size: var(--t5); color: var(--faint); margin-left: var(--s3); letter-spacing: 0; }
.season ul { margin-top: var(--s5); border-top: 1px solid var(--ink); }
.season li { display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: var(--t3); line-height: 1.65; }
.season li .where { font-size: var(--t1); font-weight: 600; letter-spacing: 0.18em; padding-top: 3px; color: var(--st, var(--accent)); }
.season li.w-sea { --st: var(--table); }
.season li.w-field { --st: var(--farm); }
.season li.w-dish { --st: var(--accent); }
@media (max-width: 860px) { .season { grid-template-columns: 1fr; gap: var(--s5); } .season .ph img { aspect-ratio: 4 / 3; object-fit: cover; } .season-tabs button { padding: var(--s2) var(--s4); } }

/* ── 연표 ─────────────────────────────── */
.timeline { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 170px 1fr; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: var(--t3); }
.timeline time { font-family: var(--latin); font-style: italic; font-size: var(--t5); line-height: 1.4; }
.timeline li.is-next time { color: var(--accent); }
.timeline li.is-next span::after { content: "다가오는 일"; margin-left: var(--s2); font-size: var(--t1); font-weight: 600; letter-spacing: 0.1em; color: #fff; background: var(--accent); padding: 2px 8px; vertical-align: 2px; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 0; } }

/* ── 다섯 번째 문 ─────────────────────── */
.fifth .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s8); align-items: center; }
.fifth h2 { font-size: var(--t9); line-height: 1.12; margin-top: var(--s5); }
.fifth h2 .en { color: var(--gold); }
.fifth p { font-size: var(--t4); margin-top: var(--s5); max-width: 30em; }
.fifth .doorframe { justify-self: center; width: min(300px, 64vw); }
.fifth .doorframe svg { width: 100%; height: auto; }
@media (max-width: 860px) { .fifth .grid { grid-template-columns: 1fr; gap: var(--s7); } }

/* ── 계정 ─────────────────────────────── */
.accounts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.accounts a { display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); min-height: 42px; border: 1px solid var(--line-2); font-size: var(--t2); font-weight: 600; text-decoration: none; }
.accounts a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st, var(--ink)); }
.accounts a span { color: var(--faint); font-weight: 400; }
.accounts a:hover { border-color: var(--ink); }

/* ── 찾아오기 ─────────────────────────── */
.visit { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
.vcard { border-top: 1px solid var(--ink); padding-top: var(--s5); display: flex; flex-direction: column; }
.vcard h3 { font-size: var(--t6); }
.vcard .who { display: flex; align-items: center; gap: 6px; font-size: var(--t2); color: var(--mute); font-weight: 600; margin-top: var(--s1); }
.vcard .who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.vcard dl { margin: var(--s4) 0 0; font-size: var(--t3); }
.vcard dt { font-size: var(--t1); font-weight: 600; letter-spacing: 0.2em; color: var(--faint); margin-top: var(--s4); }
.vcard dd { margin: 2px 0 0; line-height: 1.65; }
.vcard .btns { margin-top: auto; padding-top: var(--s5); }
.vcard .btn { padding: 0 var(--s4); min-height: 40px; }
@media (max-width: 1000px) { .visit { grid-template-columns: repeat(2, 1fr); gap: var(--s7) var(--s5); } }
@media (max-width: 560px) { .visit { grid-template-columns: 1fr; } }

/* ── 상세 페이지 ───────────────────────── */
.station-hero { padding: var(--s8) 0 var(--s7); text-align: center; }
.station-hero .label { justify-content: center; }
.station-hero .name { font-family: var(--serif); font-size: var(--t9); font-weight: 600; letter-spacing: -0.04em; margin-top: var(--s4); line-height: 1.15; }
.station-hero .en { display: block; font-size: var(--t6); color: var(--faint); margin-top: var(--s1); }
.station-hero .statement { font-family: var(--serif); font-size: var(--t7); font-weight: 500; line-height: 1.45; margin: var(--s6) auto 0; max-width: 22em; }
.station-hero .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-top: var(--s5); font-size: var(--t2); color: var(--mute); }
.station-hero .meta span + span::before { content: "·"; margin-right: var(--s5); color: var(--line-2); }
.station-hero .lead { margin: var(--s5) auto 0; font-size: var(--t4); color: var(--mute); max-width: 36em; }

.mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s4); height: min(78vh, 760px); }
.mosaic .ph { overflow: hidden; }
.mosaic .ph img { height: 100%; object-fit: cover; }
.mosaic .ph:first-child { grid-row: span 2; }
.mosaic figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: var(--s2) var(--s3); background: rgba(251,247,239,0.92); font-size: var(--t1); }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; } .mosaic .ph:first-child { grid-column: span 2; grid-row: auto; } .mosaic .ph img { aspect-ratio: 4 / 5; } .mosaic .ph:first-child img { aspect-ratio: 4 / 3; } }

.profile { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: var(--s8); align-items: start; }
.profile h2 { font-size: var(--t9); letter-spacing: -0.05em; margin-top: var(--s4); }
.profile .role { font-size: var(--t3); font-weight: 600; color: var(--mute); margin-top: var(--s2); }
.profile .line { font-family: var(--serif); font-size: var(--t6); line-height: 1.55; margin-top: var(--s5); font-weight: 500; }
.profile .facts { margin-top: var(--s5); border-top: 1px solid var(--ink); }
.profile .facts li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--mute); font-size: var(--t3); }
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; gap: var(--s6); } .profile .portrait { max-width: 420px; } }

.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s6); border-top: 1px solid var(--ink); }
.item { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.item h3 { font-size: var(--t5); }
.item .tag { display: block; font-size: var(--t1); font-weight: 600; letter-spacing: 0.2em; color: var(--accent); margin-bottom: var(--s2); }
.item p { font-size: var(--t3); color: var(--mute); margin-top: var(--s2); }
@media (max-width: 900px) { .items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .items { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); }
.gallery .ph img { aspect-ratio: 4 / 5; object-fit: cover; }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gallery, .gallery--4 { grid-template-columns: repeat(2, 1fr); } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.split--rev > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s6); } .split--rev > :first-child { order: 0; } }

.log { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--ink); }
.log li { display: grid; grid-template-columns: 150px 1fr; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.log time { font-family: var(--latin); font-style: italic; font-size: var(--t5); line-height: 1.4; }
.log b { display: block; font-weight: 600; }
.log p { color: var(--mute); font-size: var(--t3); margin-top: var(--s1); }
.log li.is-next time { color: var(--accent); }
@media (max-width: 560px) { .log li { grid-template-columns: 1fr; gap: var(--s1); } }

.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.flow li { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line); }
.flow li b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.flow li.own b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.flow li span { display: block; font-size: var(--t2); color: var(--faint); margin-top: 2px; }

.callout { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: var(--s7) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
.callout p { font-family: var(--serif); font-size: var(--t7); font-weight: 600; line-height: 1.4; }
.callout small { display: block; font-family: var(--sans); font-size: var(--t2); color: var(--faint); font-weight: 400; margin-top: var(--s2); }

.prose { max-width: 680px; }
.prose p + p { margin-top: var(--s4); }
.prose p { color: var(--mute); }
.note { font-size: var(--t2); color: var(--faint); margin-top: var(--s4); }

.next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.next a { display: block; padding: var(--s5) 0; border-top: 1px solid var(--ink); text-decoration: none; }
.next a small { font-size: var(--t1); font-weight: 600; letter-spacing: 0.2em; color: var(--faint); }
.next a b { display: block; font-family: var(--serif); font-size: var(--t6); font-weight: 600; margin-top: var(--s1); }
.next a:hover b { color: var(--accent); }
.next a:last-child { text-align: right; }
@media (max-width: 560px) { .next { grid-template-columns: 1fr; } .next a:last-child { text-align: left; } }

/* ── 출처 ─────────────────────────────── */
.sources { counter-reset: src; font-size: var(--t2); color: var(--mute); columns: 2; column-gap: var(--s7); }
.sources li { break-inside: avoid; padding: var(--s2) 0 var(--s2) 30px; position: relative; line-height: 1.55; }
.sources li::before { counter-increment: src; content: counter(src); position: absolute; left: 0; font-family: var(--latin); font-style: italic; font-size: var(--t4); color: var(--accent); line-height: 1.2; }
.sources li:target { background: #FFF4D6; }
.sources a { text-underline-offset: 2px; }
@media (max-width: 760px) { .sources { columns: 1; } }

/* ── 푸터 ─────────────────────────────── */
.foot { background: var(--dark); color: var(--dark-mute); padding: var(--s8) 0; font-size: var(--t2); }
.foot .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.foot strong { font-family: var(--serif); font-size: var(--t5); color: var(--dark-text); display: block; margin-bottom: var(--s2); font-weight: 600; }
.foot h4 { font-family: var(--sans); font-size: var(--t1); letter-spacing: 0.22em; color: var(--gold); margin-bottom: var(--s3); font-weight: 600; }
.foot li { padding: 3px 0; }
.foot a { text-decoration: none; color: var(--dark-text); }
.foot a:hover { text-decoration: underline; }
.foot .fine { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid #2A2826; font-size: var(--t1); line-height: 1.8; }
@media (max-width: 760px) { .foot .grid { grid-template-columns: 1fr; } }

.lost { padding: var(--s9) 0; min-height: 60vh; text-align: center; }
.lost h1 { font-size: var(--t9); margin-top: var(--s4); }
.lost p { margin: var(--s5) 0 var(--s8); color: var(--mute); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print { .top, .notice { display: none; } }

/* ── 매장 로고 ─────────────────────────── */
.brand img { height: 36px; width: auto; }
.brand .en { font-size: var(--t5); color: var(--ink); }
.door-logo { display: flex; align-items: center; height: 44px; margin-top: var(--s5); }
.door-logo img { max-height: 100%; width: auto; max-width: 72%; }
.door-logo.round { height: 60px; }
.door-logo.round img { height: 60px; border-radius: 18%; }
.station-logo { display: flex; justify-content: center; margin-top: var(--s6); }
.station-logo img { height: clamp(56px, 8vw, 92px); width: auto; }
.station-logo.round img { height: clamp(96px, 12vw, 140px); border-radius: 18%; }
.foot-mark { height: 46px; width: auto; margin-bottom: var(--s4); }
@media (max-width: 760px) { .brand img { height: 30px; } }


/* ── 장터 요소 ─────────────────────────── */
/* 차양: 매장 색과 크림의 줄무늬 + 물결 테 */
.awning {
  display: block; position: relative; height: 30px; margin-bottom: 14px;
  border-top: 5px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--st, var(--accent)) 0 22px, #FFFFFF 22px 44px);
  filter: drop-shadow(0 2px 1.5px rgba(60, 40, 10, 0.18));
}
.awning::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 11px;
  background:
    radial-gradient(circle at 11px 0, var(--st, var(--accent)) 10.5px, transparent 11px) 0 0 / 44px 11px repeat-x,
    radial-gradient(circle at 33px 0, #FFFFFF 10.5px, transparent 11px) 0 0 / 44px 11px repeat-x;
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; pointer-events: none;
  background: radial-gradient(circle at 7px 0, var(--accent) 6.5px, transparent 7px) 0 0 / 14px 7px repeat-x;
  opacity: 0.9;
}
.top { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--accent); }

/* 손글씨 가격표 — 파리 시장 매대의 초록 팻말 */
.tag, .item .tag, .frames .ph figcaption b {
  display: inline-flex; align-items: center; gap: 7px; width: auto;
  background: var(--stall); color: #FFF9EC;
  font-family: var(--hand); font-size: 22px; font-weight: 400; letter-spacing: 0; line-height: 1;
  padding: 5px 12px 6px 10px; border-radius: 3px; transform: rotate(-1.5deg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.tag::before, .item .tag::before, .frames .ph figcaption b::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bg); flex: none;
}
.item .tag { margin-bottom: var(--s3); }
.frames .ph { position: relative; }
.frames .ph figcaption { margin-top: var(--s3); }
.frames .ph figcaption b { margin-bottom: var(--s2); }
.frames .ph:nth-child(even) figcaption b { transform: rotate(1.2deg); }

/* 아케이드 아치 — 이탈리아 광장의 회랑 */
.arch img, .portrait.arch { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
.portrait.arch { overflow: hidden; }
.hero .arch img { border-radius: 50% 50% 0 0 / 26% 26% 0 0; }

/* 문 카드 = 장터 매대 */
.door { background: transparent; }
.door .ph { aspect-ratio: 4 / 5; }
.door .meta { border-bottom-color: var(--line-2); }

/* 광장 하늘 — 노선의 태안→서울 구간만 */
.route .gap-label { color: var(--sky); }
.route li.route-gap::after { border-top-color: var(--sky); }
@media (max-width: 760px) { .route li.route-gap::after { border-left-color: var(--sky); } }

/* 미쉐린 이야기는 빨강으로 */
.plaque .label { color: var(--gold); }
.mich { color: var(--red); }

.frames .ph figcaption b { display: flex; width: fit-content; }