@import url('tokens.css');

/* ══════════════════════════════════════════════════════════════
   가을 · 단풍 그림지도
   토큰 구조는 shadcn/ui 를 따른다 (background/foreground/card/muted/
   border/ring/radius). 빌드 없는 바닐라라 React 컴포넌트 대신
   같은 디자인 시스템을 CSS 로 구현했다. 나중에 React 로 옮겨도
   토큰 이름이 그대로 맞는다.

   색은 화선지 — 흰빛에 가까운 찬 회백. 세월은 누런 기가 아니라
   명도 편차와 얼룩으로 드러낸다. 난색은 낙관의 인주 하나뿐.
   ══════════════════════════════════════════════════════════════ */


*{box-sizing:border-box}
/* 작성자 규칙의 display 가 브라우저 기본 [hidden] 을 이기므로 여기서 못 박는다 */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; color:var(--foreground);
  font-family:"Gowun Batang","Nanum Myeongjo",serif;
  font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow:hidden;

  /* 세월 든 화선지 — 누런 기 없이, 명도 편차와 얼룩으로만 */
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 23% 19%, #7F8C8814 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 71% 44%, #7F8C8810 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 86% 77%, #7F8C880f 0 1px, transparent 2.2px),
    radial-gradient(circle at 34% 86%, #7F8C8812 0 1.3px, transparent 2.6px),
    repeating-linear-gradient(97deg, #1e242200 0 2px, #1e242205 2px 3px, #1e242200 3px 12px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23b)' opacity='0.30'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='0.38'/%3E%3C/svg%3E");
  background-size:360px 360px,480px 480px,620px 620px,540px 540px,auto,640px 640px,170px 170px;
  background-blend-mode:normal,normal,normal,normal,normal,multiply,multiply;
  background-attachment:fixed;
}

#map{position:fixed; inset:0}
#leaves,#breeze{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:3}
.breeze-hint{
  position:fixed; left:50%; bottom:28px; z-index:23; margin:0; padding:8px 13px;
  transform:translate(-50%,8px); opacity:0; pointer-events:none;
  color:var(--ink-2); background:color-mix(in srgb,var(--paper-hi) 92%,transparent);
  border:1px solid var(--border-strong); border-radius:999px;
  font-family:"Nanum Myeongjo",serif; font-size:13px;
  transition:opacity .2s ease,transform .2s ease;
}
.breeze-hint.on{opacity:1;transform:translate(-50%,0)}

/* 능선을 둘러보는 동안의 한 줄. 지도 아래 가운데, 조용히. */
.orbit-hint{
  position:fixed; left:50%; bottom:28px; z-index:8; margin:0; padding:8px 14px;
  transform:translateX(-50%); pointer-events:none;
  color:var(--muted-foreground);
  background:color-mix(in srgb,var(--paper-hi) 92%,transparent);
  border:1px solid var(--border-strong); border-radius:999px;
  font-family:"Nanum Myeongjo",serif; font-size:12.5px; letter-spacing:.02em;
  animation:hintIn .3s ease both;
}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,7px)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:819px){ .orbit-hint{bottom:auto; top:calc(env(safe-area-inset-top) + 74px)} }
body.stage-open #breeze{z-index:22}

/* 산을 고른 뒤 실제 지형을 건너는 동안만 나타나는 짧은 길잡이. */
.journey{
  position:fixed; left:50%; bottom:38px; z-index:8; transform:translateX(-50%);
  width:min(420px,calc(100vw - 36px)); display:grid;
  grid-template-columns:38px 1fr; align-items:center; gap:11px;
  padding:10px 14px 12px; color:var(--ink-2);
  background:color-mix(in srgb,var(--paper-hi) 94%,transparent);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-md); overflow:hidden; animation:journeyIn .28s ease both;
}
.journey-mark{grid-row:1 / span 2; width:34px; height:34px; display:grid; place-items:center;
  border-radius:3px; background:var(--seal); color:var(--paper-hi);
  font-family:Hahmlet,serif; font-size:15px}
.journey p{margin:0;display:flex;align-items:baseline;gap:9px}
.journey b{font-family:Hahmlet,serif;font-size:15px;font-weight:500}
.journey i{font-style:normal;font-family:"Nanum Myeongjo",serif;
  font-size:11.5px;color:var(--muted-foreground)}
.journey-line{grid-column:2;position:relative;height:2px;background:var(--border)}
.journey-line::after{content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,var(--seal),#B87955);animation:journeyLine 2.35s ease both}
@keyframes journeyIn{from{opacity:0;transform:translate(-50%,9px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes journeyLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.maplibregl-ctrl-attrib{display:none}
canvas{outline:none}

/* 지도 위 종이결 — 아주 옅게 */
#map::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.10; mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8 0.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(97deg, #00000000 0 1px, #1e242206 1px 2px, #00000000 2px 9px);
}

/* 족자 — 가장자리로 스미는 먹 */
.scroll-edge{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 80px 24px #1e242210, inset 0 0 210px 64px #1e24220a;
}
.scroll-edge::before{
  content:""; position:absolute; inset:0;
  border:8px solid var(--paper-edge);
  border-image:linear-gradient(150deg,#EDF1EF,#DFE5E2 42%,#F0F3F2 72%,#E3E8E6) 1;
}
.scroll-edge::after{content:""; position:absolute; inset:8px; border:1px solid var(--border)}

/* ── 낙관 ── */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--seal); color:#F6F3EE;
  font-family:Hahmlet,serif; font-weight:600;
  border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px #00000022, inset 0 -2px 5px #00000018;
  padding:7px 9px; font-size:16px; letter-spacing:.08em;
}
.seal.sm{padding:2px 8px; font-size:11px; letter-spacing:.18em; border-radius:3px}

/* ── 상단 ── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper) 94%, transparent) 24%, transparent);
  pointer-events:none;
}
.topbar>*{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px}
.bt{display:flex; flex-direction:column; line-height:1.15}
/* 대동여지도의 현판처럼 — 한자를 크게 새기고 한글을 아래에 작게 */
.bt b{font-family:"Nanum Myeongjo","Song Myung",serif; font-weight:800;
  font-size:22px; letter-spacing:.14em; line-height:1.1}
.bt i{font-style:normal; font-family:"Song Myung","Nanum Myeongjo",serif;
  font-size:11.5px; letter-spacing:.24em; color:var(--muted-foreground); margin-top:2px}

/* shadcn Input */
.search{position:relative; flex:0 1 300px}
/* 찾기 칸도 종이 위에 앉는다. 그림자를 얹으면 화면에서 떠오른다. */
.search input{
  width:100%; height:38px; font:inherit; font-size:14px; color:var(--foreground);
  background:color-mix(in srgb, var(--paper-hi) 88%, transparent);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:0 12px 0 34px; transition:border-color .15s, box-shadow .15s;
}
.search input::placeholder{color:var(--muted-foreground);
  font-family:"Nanum Myeongjo",serif; font-size:13px; letter-spacing:.04em}
.search input:focus{outline:none; border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 16%, transparent)}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; stroke:var(--muted-foreground); fill:none; stroke-width:1.7}

/* ── 도구 ──
   한자 한 글자만 두면 아무도 못 읽는다. 글자는 표식이고 뜻은 한글이 말한다.
   그림자와 채운 색을 걷었다 — 인주는 낙관과 고른 명소에만 쓴다.
   좁아지면 한글은 접고 표식만 남긴다. */
.rail{margin-left:auto; display:flex; gap:6px}
.rbtn{
  height:38px; padding:0 12px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--border-strong); border-radius:var(--radius);
  background:color-mix(in srgb, var(--paper-hi) 88%, transparent);
  color:var(--ink-2); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.rbtn b{font-family:Hahmlet,serif; font-size:14px; font-weight:500; color:var(--ink)}
.rbtn b.tri{font-family:inherit; font-size:11px}
.rbtn span{font-family:"Nanum Myeongjo",serif; font-size:12px; letter-spacing:.1em}
.rbtn:hover{background:var(--card); border-color:var(--ink-3)}
.rbtn[aria-pressed="true"]{border-color:var(--seal); color:var(--seal)}
.rbtn[aria-pressed="true"] b{color:var(--seal)}
.rbtn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
@media (max-width:760px){ .rbtn span{display:none} .rbtn{padding:0 11px} }

.proto{
  margin:0; font-family:"Nanum Myeongjo",serif; font-size:11px; letter-spacing:.14em;
  color:var(--muted-foreground); background:var(--card);
  border:1px solid var(--border); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:3px}

/* ── 시트 ── */
/* 지도 위에 얹은 판이 아니라 같은 종이의 오른쪽 면이다.
   그림자를 드리우면 그 순간 대시보드가 된다 — 접힌 자리만 남긴다. */
.sheet{
  position:fixed; top:0; right:0; bottom:0; width:var(--sheet-w); z-index:5;
  display:flex; flex-direction:column;
  background:var(--paper-hi);
  border-left:1px solid var(--border-strong);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.sheet.closed{transform:translateX(calc(100% - 40px))}
.grip{
  position:absolute; left:-1px; top:50%; transform:translate(-100%,-50%);
  width:22px; height:66px; border:1px solid var(--border); border-right:0;
  border-radius:var(--radius) 0 0 var(--radius); background:var(--card);
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-sm);
}
.grip span{width:3px; height:26px; background:var(--ink-3); border-radius:2px; display:block}

/* 절기 자 */
.dial{padding:56px 24px 6px; border-bottom:1px solid var(--border-strong); flex:0 0 auto}
/* 절기 자는 축(軸)이다. 늘 위에 있지만 머리기사는 아니다 — 산보다 작게. */
.dial-date{font-family:Hahmlet,serif; font-size:19px; font-weight:500;
  letter-spacing:.02em; font-variant-numeric:tabular-nums}
.dial-date em{font-style:normal}
.dial-date span{color:var(--seal); margin-left:10px; font-size:.72em}
.dial-say{margin:5px 0 0; color:var(--ink-3); font-size:12.5px; line-height:1.62}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; background:transparent;
  margin:14px 0 0; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--border-strong); border-radius:2px}
input[type=range]::-moz-range-track{height:2px; background:var(--border-strong); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:20px;
  background:var(--seal); border-radius:3px; margin-top:-9px; box-shadow:var(--shadow-sm)}
input[type=range]::-moz-range-thumb{width:14px; height:20px; background:var(--seal);
  border:0; border-radius:3px}
.ticks{position:relative; height:46px; margin-top:4px; overflow:hidden}
.ticks b{position:absolute; top:0; transform:translateX(-50%); text-align:center; font-weight:400}
.ticks b::before{content:""; display:block; width:1px; height:5px;
  background:var(--border-strong); margin:0 auto 4px}
.ticks b.end{transform:translateX(-100%); text-align:right}
.ticks b.start{transform:none; text-align:left}
.ticks b.end::before{margin:0 0 4px auto}
.ticks b.start::before{margin:0 0 4px}
.ticks em{display:block; font-style:normal; font-family:"Nanum Myeongjo",serif;
  font-size:11px; letter-spacing:.12em; color:var(--ink-2)}
.ticks small{display:block; font-size:10px; color:var(--muted-foreground); font-variant-numeric:tabular-nums}

.sheet-body{overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto}

/* ── 족자 본문 ──
   산이 주인공이다. 날짜는 그 산에 딸린 소식이지 머리기사가 아니다.
   구획 사이 여백을 일부러 고르지 않게 둔다 — 균등한 리듬은 목록이고,
   목록은 대시보드다. 큰 숨은 크게, 잔 항목은 붙여 둔다. */
.chup{padding:26px 24px 30px; border-bottom:1px solid var(--border)}
.meta{margin:0; font-family:"Nanum Myeongjo",serif; font-size:11.5px;
  color:var(--muted-foreground); letter-spacing:.12em}
.meta.elev{margin-top:5px}
.chup h2{
  font-family:Hahmlet,serif; font-weight:500; font-size:34px;
  line-height:1.12; margin:7px 0 0; letter-spacing:.01em;
}
.chup h2 .han{font-size:.34em; font-weight:400; color:var(--muted-foreground);
  letter-spacing:.16em; margin-left:.55em; vertical-align:.34em}

.verse{margin:20px 0 0; padding-left:14px; border-left:2px solid var(--border-strong);
  color:var(--ink-2); font-size:14.5px; line-height:1.78}

/* ── 언제 ──
   세 칸 표를 걷었다. 알고 싶은 건 하나다 — 지금 가면 되는가.
   그 답을 가장 크게 놓고, 날짜는 그 아래 잔글씨로 붙인다. */
.when{
  margin:26px 0 0; padding-top:18px; border-top:1px solid var(--border-strong);
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 14px;
}
.when .phase{grid-column:1; grid-row:1}
.when b{
  grid-column:1; grid-row:2; font-family:Hahmlet,serif; font-weight:500;
  font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums;
}
.when b small{font-size:.42em; font-weight:400; color:var(--muted-foreground);
  font-family:"Nanum Myeongjo",serif; letter-spacing:.06em; margin-left:.3em}
.when-sub{
  grid-column:2; grid-row:2; text-align:right;
  font-family:"Nanum Myeongjo",serif; font-size:12px; color:var(--ink-2);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.when-sub em{display:block; font-style:normal; margin-top:3px; color:var(--muted-foreground)}

/* 상태는 알약이 아니라 점과 글자. 테를 두르면 버튼처럼 읽힌다. */
.phase{display:inline-flex; align-items:center; gap:7px;
  font-family:"Nanum Myeongjo",serif; font-size:11.5px; letter-spacing:.16em;
  white-space:nowrap; color:var(--ink-2)}
.phase i{width:7px; height:7px; border-radius:50%; display:block; background:var(--cheongnok)}

/* ── 항목 ── 잔글씨는 붙여 둔다. 여기서 숨을 크게 쉬면 흐름이 끊긴다. */
.facts{margin:24px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:14px}
.facts dt{font-family:"Nanum Myeongjo",serif; font-size:11px; letter-spacing:.14em;
  color:var(--muted-foreground); padding-top:3px; white-space:nowrap}
.facts dd{margin:0; color:var(--ink-2); line-height:1.7}
.crowd{display:inline-flex; gap:3px; margin-left:7px; vertical-align:1px}
/* 가는 길 옆 투어 한 줄 — 챙겨 갈 것(gearlink)과 같은 말투, 한 줄만 */
.tourlink{display:flex; align-items:center; gap:8px; margin-top:6px; padding:6px 0;
  border-top:1px dashed var(--border); color:var(--ink-2); text-decoration:none}
.tourlink .ic{width:18px; height:18px; flex:0 0 auto; display:grid; place-items:center;
  font-family:"Nanum Myeongjo",serif; font-size:11px; color:var(--seal);
  border:1px solid currentColor; border-radius:3px}
.tourlink b{font-weight:400; font-size:13.5px; transition:color .15s;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tourlink em{font-style:normal; margin-left:auto; font-size:11px; color:var(--muted-foreground); white-space:nowrap}
.tourlink:hover b{color:var(--seal)}
.tourlink:active{opacity:.6}
.tour-note{display:block; font-size:11px; line-height:1.55; color:var(--muted-foreground)}
.crowd i{width:4px; height:10px; background:var(--border-strong); display:block; border-radius:1px}
.crowd i.f{background:var(--seal)}

/* ── 절 ── */
.col{display:flex; flex-direction:column}
/* 낙관은 화제 한 곳에만 찍는다. 절마다 찍으면 도장이 무늬가 된다. */
.blk{padding:22px 24px 24px; border-bottom:1px solid var(--border)}
.blk-h{
  margin:0 0 4px; font-family:"Nanum Myeongjo",serif; font-weight:400;
  font-size:11.5px; letter-spacing:.18em; color:var(--muted-foreground);
}

/* 네 곳 — 카드 격자를 목록으로. 카드가 넷이면 눈이 넷으로 쪼개진다. */
.picks{display:block; margin:-4px 0 0}
.pick{
  width:100%; border:0; background:none; padding:11px 0; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; column-gap:14px; row-gap:5px;
  border-bottom:1px solid var(--border); transition:opacity .15s;
}
.pick:last-child{border-bottom:0}
.pick:hover .nm{color:var(--seal)}
.pick:active{opacity:.6}
.pick .nm{font-family:Hahmlet,serif; font-size:16.5px; font-weight:500;
  transition:color .15s}
.pick .rg{font-family:"Nanum Myeongjo",serif; font-size:10.5px;
  letter-spacing:.1em; color:var(--muted-foreground);
  grid-column:1; align-self:center; display:flex; align-items:center; gap:6px}
/* 색만으로 상태를 말하지 않는다. 점 옆에 늘 글자가 있다. */
.pick .rg i{width:6px; height:6px; border-radius:50%; display:block; flex:0 0 auto}
.pick .st{grid-column:2; grid-row:1; font-size:12px; color:var(--ink-2);
  align-self:center; white-space:nowrap; font-variant-numeric:tabular-nums}
.pick .bar{grid-column:2; grid-row:2; width:64px; height:2px;
  background:var(--border-strong); position:relative; align-self:center}
.pick .bar i{position:absolute; inset:0 auto 0 0; display:block}

/* ══ 畵帖 — 요즘 이 산 ══════════════════════════════════════════
   남의 사진과 영상을 종이 위에 올리는 일. 상자를 그대로 떨어뜨리면
   그 순간 민화가 끝나므로, 접힌 낱장으로 두었다가 고른 면만 편다.
   접혀 있는 동안 사진은 담채로 물러나 있고, 손이 닿으면 색이 돌아온다.
   — 옛 화첩에서 낱장을 들추면 그 면만 환해지던 것과 같다.
════════════════════════════════════════════════════════════════ */
.blk-han{font-family:Hahmlet,serif; font-size:10.5px; letter-spacing:.22em;
  color:var(--ink-3); margin-left:7px}

.cheop{margin-top:10px}

/* 접힌 낱장 줄. 화첩은 옆으로 편다 — 세로로 쌓으면 목록이 된다. */
.cheop-strip{
  display:flex; gap:11px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-inline:24px; padding-bottom:3px;
  margin:0 -24px; padding-left:24px; padding-right:24px;
  scrollbar-width:none;
  /* 오른쪽 끝을 종이로 흐린다. 잘린 게 아니라 더 있다는 뜻이 된다. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);
}
.cheop-strip::-webkit-scrollbar{display:none}

.leaf{
  flex:0 0 150px; min-width:0; scroll-snap-align:start;
  border:0; background:none; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; display:block;
}
.leaf-pic{
  display:block; position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--paper-lo);
  /* 표구 — 그림에 두르는 얇은 테. 그림자를 주지 않는다, 종이는 뜨지 않는다. */
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 3px var(--paper-hi);
}
.leaf-pic img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* 접혀 있을 때는 담채 — 색을 반쯤 빼고 종이 쪽으로 물린다 */
  filter:saturate(.26) contrast(.88) brightness(1.05);
  transition:filter .45s ease, transform .6s ease;
}
.leaf-wash{
  position:absolute; inset:0; background:var(--paper);
  mix-blend-mode:screen; opacity:.46; transition:opacity .45s ease;
  pointer-events:none;
}
.leaf:hover .leaf-pic img,
.leaf:focus-visible .leaf-pic img,
.leaf.on .leaf-pic img{filter:none; transform:scale(1.03)}
.leaf:hover .leaf-wash,
.leaf:focus-visible .leaf-wash,
.leaf.on .leaf-wash{opacity:0}

/* 인스타그램은 미리보기를 내주지 않는다. 빈 상자 대신 낙관을 찍는다. */
.leaf-pic.instagram{display:grid; place-items:center}
.leaf-seal{
  font-family:Hahmlet,serif; font-size:19px; color:var(--paper-hi);
  background:var(--seal); width:34px; height:34px; display:grid; place-items:center;
  border-radius:3px; opacity:.86;
}
.leaf-mark{
  position:absolute; left:7px; bottom:7px; width:19px; height:19px;
  display:grid; place-items:center; border-radius:50%;
  background:#1E2422B8; color:#fff; font-size:8.5px; line-height:1;
  padding-left:1px; backdrop-filter:blur(2px);
}
.leaf-len{
  position:absolute; right:7px; bottom:7px; padding:1px 5px; border-radius:3px;
  background:#1E2422B8; color:#fff; font-size:9.5px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.leaf-t{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:8px; font-family:Hahmlet,serif;
  font-size:12.5px; line-height:1.42; transition:color .15s;
}
.leaf:hover .leaf-t{color:var(--seal)}
.leaf-s{
  display:block; margin-top:3px; font-family:"Nanum Myeongjo",serif;
  font-size:10.5px; letter-spacing:.05em; color:var(--muted-foreground);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.leaf.on .leaf-pic{border-color:var(--seal)}

/* 펼친 면 */
.cheop-open{margin:0 0 14px}
.pane-head{display:flex; align-items:baseline; gap:9px; margin-bottom:8px}
.pane-head b{
  font-family:Hahmlet,serif; font-weight:500; font-size:13.5px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pane-head span{
  font-family:"Nanum Myeongjo",serif; font-size:10.5px; letter-spacing:.05em;
  color:var(--muted-foreground); white-space:nowrap;
}
.pane-x{
  margin-left:auto; flex:0 0 auto; border:1px solid var(--border-strong);
  background:var(--paper-hi); color:var(--ink-2); border-radius:var(--radius-sm);
  font:inherit; font-size:11px; padding:3px 9px; cursor:pointer;
  font-family:"Nanum Myeongjo",serif; letter-spacing:.08em;
}
.pane-x:hover{color:var(--seal); border-color:var(--seal)}
.pane-frame{
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--paper-lo); overflow:hidden;
}
/* 검은 화면이 종이에 뚫린 구멍으로 보이지 않도록 표구로 한 겹 두른다.
   가장자리에 종이가 남으면 구멍이 아니라 '붙인 그림'이 된다. */
.pane-frame.ratio{position:relative; aspect-ratio:16/9; padding:5px;
  background:var(--paper-hi)}
.pane-frame.ratio iframe{position:absolute; inset:5px;
  width:calc(100% - 10px); height:calc(100% - 10px);
  border:0; border-radius:2px; background:#000}
.pane-frame.ig{background:var(--paper-hi); padding:0}
.pane-frame.ig .instagram-media{
  min-width:0 !important; max-width:100% !important; width:100% !important;
  margin:0 !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
}
.pane-gone{margin:0; padding:24px 18px; font-size:12.5px; line-height:1.7;
  color:var(--muted-foreground); text-align:center}
.pane-out{margin:7px 0 0; font-size:11.5px; font-family:"Nanum Myeongjo",serif}
.pane-out a{color:var(--ink-2); text-decoration:none; letter-spacing:.06em}
.pane-out a:hover{color:var(--seal)}

/* 태그로 나가는 문 */
.cheop-more{display:flex; gap:8px; margin:12px 0 0; flex-wrap:wrap}
.cheop-more a{
  display:inline-flex; align-items:baseline; gap:6px; text-decoration:none;
  border:1px solid var(--border-strong); border-radius:999px;
  padding:5px 11px; color:var(--ink-2); font-size:11.5px;
  font-family:Hahmlet,serif; transition:border-color .15s, color .15s;
}
.cheop-more a:hover{border-color:var(--seal); color:var(--seal)}
.cheop-more .cheop-tag{align-self:center; font-size:12px; color:var(--muted-foreground)}
.cheop-more em{font-style:normal; font-family:"Nanum Myeongjo",serif;
  font-size:10px; letter-spacing:.1em; color:var(--muted-foreground)}
.cheop-none{margin:2px 0 0; font-size:12.5px; color:var(--muted-foreground); line-height:1.7}
.cheop-note{margin:10px 0 0; font-size:11px; line-height:1.55; color:var(--muted-foreground)}

/* ══ 이 산에서 — 절 · 명당 · 밥 ═══════════════════════════════
   표를 그리지 않는다. 칸을 그리는 순간 대시보드가 된다.
   한자 한 글자가 무엇인지 말하고, 뜻은 이름과 문장이 말한다.
════════════════════════════════════════════════════════════════ */
.nears{display:block; margin:-2px 0 0}
.near{
  width:100%; border:0; background:none; padding:11px 0 12px; margin:0;
  text-align:left; font:inherit; color:inherit; display:grid;
  grid-template-columns:20px 1fr; column-gap:12px; row-gap:3px;
  border-bottom:1px solid var(--border);
}
.near:last-child{border-bottom:0}
.near.go{cursor:pointer; transition:opacity .15s, background .5s}
/* 그림을 누르면 그 줄에 잠깐 불이 든다. 종이에 먹이 한 번 번지는 정도로. */
.near.lit{background:linear-gradient(90deg,#A33B2E14,transparent 70%)}
.near.go:active{opacity:.6}
.near.go:hover b{color:var(--seal)}
/* 한자 한 글자로 무엇인지 말한다. 아이콘을 새로 그리지 않는다. */
.near .nk{
  grid-row:1 / span 3; align-self:start; margin-top:1px;
  font-family:Hahmlet,serif; font-size:13px; color:var(--ink-3);
  text-align:center; letter-spacing:0;
}
.near b{grid-column:2; font-weight:500; font-size:15px; font-family:Hahmlet,serif;
  transition:color .15s}
.near .nn{grid-column:2; font-size:12.5px; line-height:1.62; color:var(--ink-2)}
.near em{grid-column:2; font-style:normal; font-family:"Nanum Myeongjo",serif;
  font-size:10.5px; letter-spacing:.08em; color:var(--muted-foreground)}

/* ── 하루 ──
   절기 자 아래 한 줄. 두 달을 다루면서 하루를 안 다루면 반쪽이다. */
.sun{
  margin:14px 0 0; padding:9px 0 0; border-top:1px solid var(--border);
  font-size:12.5px; line-height:1.7; color:var(--ink-2);
}
.sun b{font-weight:500; font-variant-numeric:tabular-nums; color:var(--foreground)}
.sun span{display:block; font-family:"Nanum Myeongjo",serif; font-size:11px;
  letter-spacing:.06em; color:var(--muted-foreground); margin-top:2px}

.gear{display:block}
.gearlink{display:flex; align-items:center; gap:12px;
  padding:10px 0; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--border); transition:opacity .15s}
.gearlink:last-of-type{border-bottom:0}
.gearlink:hover b{color:var(--seal)}
.gearlink:active{opacity:.6}
/* 한자 한 글자로 무엇인지 말한다. 너무 옅으면 때처럼 보이므로 먹으로 세운다. */
.gearlink .ic{width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center;
  font-family:Hahmlet,serif; font-size:14px; color:var(--ink-3)}
.gearlink b{font-weight:400; font-size:14.5px; transition:color .15s}
.gearlink em{font-style:normal; margin-left:auto; font-size:11px;
  color:var(--muted-foreground); font-family:"Nanum Myeongjo",serif; letter-spacing:.08em}
.ad-note{margin:11px 0 0; font-size:11px; line-height:1.55; color:var(--muted-foreground)}
.disc{margin:0; padding:20px 24px 6px; font-size:12px; line-height:1.65; color:var(--muted-foreground)}
.disc:last-child{padding-bottom:34px}

/* 고도 띠 */
.band{display:grid; gap:3px}
.bandrow{display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:10px;
  font-size:12.5px; color:var(--ink-2)}
.bandrow span{font-family:Hahmlet,serif; font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--muted-foreground); text-align:right}
.bandrow i{height:10px; display:block; border-radius:2px}
.bandrow em{font-style:normal; font-family:"Nanum Myeongjo",serif; font-size:11px;
  letter-spacing:.06em; color:var(--muted-foreground); white-space:nowrap}
.bandnote{margin:12px 0 0; font-size:13px; color:var(--ink-2)}

/* 출처 · 폴백 */
.credit{position:fixed; right:calc(var(--sheet-w) + 14px); bottom:10px; z-index:4;
  max-width:min(320px,60vw); font-size:11px; color:var(--muted-foreground); text-align:right}
.credit summary{cursor:pointer; list-style:none; display:inline-block;
  background:var(--card); border:1px solid var(--border); border-radius:999px;
  padding:3px 11px; font-family:"Nanum Myeongjo",serif; letter-spacing:.16em;
  box-shadow:var(--shadow-sm)}
.credit summary::-webkit-details-marker{display:none}
.credit>div{margin-top:6px; text-align:left; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:9px 11px; line-height:1.6; box-shadow:var(--shadow-md)}
.credit a{color:var(--ink-2)}
.fallback{position:fixed; left:50%; top:66px; transform:translateX(-50%); z-index:7;
  margin:0; max-width:min(420px,88vw); text-align:center; font-size:12.5px; color:var(--ink-2);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 15px; box-shadow:var(--shadow-md)}

/* ── 민화 인물 ── */
.mapfig{pointer-events:none; filter:drop-shadow(0 4px 9px #1e242226)}
.mapfig svg{display:block; width:100%; height:auto;
  transform-origin:50% 92%; animation:sway 9s ease-in-out infinite}
.mapfig:nth-of-type(2) svg{animation-delay:3.2s}
.mapfig:nth-of-type(3) svg{animation-delay:6.1s}
@keyframes sway{
  0%,72%,100%{transform:rotate(0) translateY(0)}
  78%{transform:rotate(-1.1deg) translateY(-1.5px)}
  86%{transform:rotate(.8deg) translateY(0)}
  92%{transform:rotate(-.3deg) translateY(-.5px)}
}

/* ── 좁은 화면 ── */
/* ── 모바일 바텀시트 — 세 자리 ──
   접힘(날짜만) · 중간(명소 한 장) · 펼침. 두 자리만 두면 지도를 보려면
   정보를 통째로 내려야 하고, 정보를 보려면 지도를 통째로 덮어야 한다.

   손잡이에서 시작한 드래그만 시트를 움직인다(js/main.js).
   시트 아무 데서나 끌리면 절기 슬라이더와 목록 스크롤을 가로챈다. */
@media (max-width:819px){
  :root{--sheet-w:100%}
  .sheet{
    top:auto; left:0; height:88vh; border-left:0;
    border-top:1px solid var(--border-strong);
    border-radius:14px 14px 0 0;
    transform:translateY(var(--snap, calc(100% - 128px)));
    transition:transform .34s cubic-bezier(.32,.72,0,1);
  }
  .sheet[data-snap="peek"]{--snap:calc(100% - 128px)}
  .sheet[data-snap="half"]{--snap:calc(100% - 48vh)}
  .sheet[data-snap="full"]{--snap:0px}
  .sheet.dragging{transition:none}          /* 끄는 동안은 손끝을 그대로 따라온다 */
  .sheet.closed{transform:translateY(var(--snap, calc(100% - 128px)))}
  .grip{left:50%; top:-1px; transform:translate(-50%,-100%); width:76px; height:22px;
    border:1px solid var(--border-strong); border-bottom:0;
    border-radius:var(--radius) var(--radius) 0 0;
    touch-action:none;                       /* 손잡이 위에서는 브라우저가 스크롤을 가져가지 않는다 */
    cursor:grab}
  .grip:active{cursor:grabbing}
  .grip span{width:30px; height:3px}
  .dial{padding:16px 18px 2px}
  .search{flex:1 1 auto; min-width:0}
    .credit{right:12px; bottom:calc(128px + 12px)}
  .scroll-edge::before{border-width:5px}
  .scroll-edge::after{inset:5px}
}
@media (max-width:560px){
  .bt i,.proto{display:none}
  .bt b{font-size:18px}
  .topbar{gap:9px; padding:11px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}

/* ── 화제(畵題)와 낙관 ──
   그림의 왼쪽 여백. 세로로 오른쪽에서 왼쪽으로 읽는다. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.hwaje{
  position:fixed; left:30px; top:104px; z-index:5; margin:0;
  display:flex; align-items:flex-start; gap:12px; pointer-events:none;
  color:var(--ink-2);
}
.hwaje-text{writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Nanum Myeongjo","Song Myung",serif; font-weight:700; font-size:17px; line-height:1.9;
  letter-spacing:.22em; opacity:.9; color:var(--ink)}
.hwaje-text p{margin:0}
.hwaje-sign{writing-mode:vertical-rl; text-orientation:upright; margin:0;
  font-family:"Nanum Myeongjo",serif; font-size:11.5px; letter-spacing:.3em;
  color:var(--ink-3); opacity:.8; align-self:flex-start; margin-top:6px}
.hwaje-seal{
  align-self:flex-start; margin-top:2px; padding:6px 7px;
  font-size:13px; letter-spacing:0; opacity:.92; transform:rotate(-2deg);
}

@media (max-width:819px){ .hwaje{display:none} }

/* 좁은 가로형 — 시트를 줄이고 여백의 것들도 함께 줄인다 */
@media (min-width:820px) and (max-width:1099px){
  :root{--sheet-w:336px}
  .hwaje{left:22px; top:92px; gap:9px}
  .hwaje-text{font-size:14.5px; letter-spacing:.18em}
  .hwaje-sign{font-size:10px}
  .hwaje-seal{padding:5px 6px; font-size:11.5px}
        }

/* 갈 수 없는 곳 — 실용 정보 대신 한 줄 */
.far-note{margin:0; padding:12px 14px; font-size:13px; line-height:1.65;
  color:var(--muted-foreground); background:var(--muted);
  border:1px solid var(--border); border-radius:var(--radius)}



/* ── 지도 위의 인물은 걷었다 ──
   흩뿌리면 무동 한 장면이 236px 이 되고 그 안의 사람 하나는 40px 이 된다.
   그 크기에서는 아무리 잘 움직여도 안 보이고, 준법으로 만든 여백만 더럽힌다.
   그림은 이제 무대에서 크게 선다 — 이 파일 끝의 '무대(場)' 절. */

/* ── 먹이 번지며 지도가 나타난다 ──
   빈 화면에 스피너를 돌리면 그때부터 이건 웹앱이다.
   화면을 덮은 종이를 먹방울이 파고들고, 뚫린 자리로 진짜 지도가 드러난다.
   번짐이 곧 전환이다 — 로딩 그림을 보여 준 뒤 지우는 게 아니다. */
/* 걷히는 순서가 중요하다 — 셋이 한꺼번에 일어나면 인물이 지도 위에 겹친다.
   ① 인물이 물러나고 ② 그다음 먹이 번지고 ③ 마지막에 종이가 사라진다. */
.ink{
  --go: .3s;                       /* 인물이 물러나기를 기다리는 시간 */
  position:fixed; inset:0; z-index:9;
  display:grid; place-items:center;
  transition:opacity .45s ease 1.5s;
}
.ink-svg{position:absolute; inset:0; width:100%; height:100%}
/* r 은 SVG 기하 속성이지만 CSS 로 전이시킬 수 있다 — 그래서 SMIL 없이 된다. */
.ink-svg circle{ r:0; transition:r 1.3s cubic-bezier(.18,.72,.28,1) }
.ink.done .ink-svg circle{ r:78; transition-delay:var(--go) }
.ink.done .ink-svg circle:nth-child(2){transition-delay:calc(var(--go) + .09s)}
.ink.done .ink-svg circle:nth-child(3){transition-delay:calc(var(--go) + .17s)}
.ink.done .ink-svg circle:nth-child(4){transition-delay:calc(var(--go) + .13s)}
.ink.done .ink-svg circle:nth-child(5){transition-delay:calc(var(--go) + .22s)}
.ink.done .ink-svg circle:nth-child(6){transition-delay:calc(var(--go) + .28s)}
.ink.done .ink-svg circle:nth-child(7){transition-delay:calc(var(--go) + .2s)}
.ink.done .ink-svg circle:nth-child(8){transition-delay:calc(var(--go) + .25s)}
.ink.done{opacity:0; pointer-events:none}

/* ── 기다리는 동안 ──
   신윤복의 원작을 목과 허리에서 잘라 마디로 돌린다.
   마디마다 박자가 달라야 살아 있다. 한 박자로 같이 흔들면
   그림 한 장을 통째로 흔드는 것이고, 그건 바로 알아본다. */
/* 들어오는 건 애니메이션, 나가는 건 전이 — 한 속성을 둘이 다투면 안 된다.
   animation 이 forwards 로 채워 넣은 값은 transition 이 이기지 못한다.
   그래서 인물이 사라지라는 지시가 통째로 먹히지 않았고, 먹이 번진 자리로
   지도가 보이는데 그 위에 인물이 그대로 남아 있었다.
   들어오는 애니메이션은 안쪽 요소에 걸고, 이 자리는 나가는 전이만 맡는다. */
.waiter{
  position:relative; margin:0; display:grid; justify-items:center;
  transition:opacity .26s ease;
}
.w-cut{position:relative; width:min(38vh, 232px); aspect-ratio:270/573;
  animation:inkWord .45s ease .05s backwards}
.w-part{position:absolute; inset:0}
.w-part img{display:block; width:100%; height:auto;
  /* 원작 스캔은 우리 먹보다 짙다. 종이 쪽으로 조금 물린다. */
  opacity:.93; filter:contrast(.96) brightness(1.02)}
.waiter figcaption{
  animation:inkWord .5s ease .22s backwards;
  margin-top:16px; font-family:Hahmlet,serif; font-weight:600;
  font-size:14px; letter-spacing:.42em; text-indent:.42em; color:var(--ink-3);
}
/* 인물은 먹이 번지기 전에 먼저 물러난다 */
.ink.done .waiter{opacity:0}
/* backwards — 시작 전에는 from 을 쓰고, 끝나면 속성을 놓는다.
   forwards 로 붙잡으면 나갈 때 전이가 걸리지 않는다. */
@keyframes inkWord{ from{opacity:0} to{opacity:1} }

/* 회전축은 관절 자리에 둔다 — 치마는 발밑, 저고리는 허리, 머리는 목.
   지도 위 인물과 달리 여기서는 크게 움직여야 한다. 로딩은 이삼 초에 끝나는데
   주기를 예닐곱 초로 잡으면 한 번도 흔들리지 않고 사라진다. */
.w-part.skirt{transform-origin:55.6% 99.5%; animation:wSkirt 2.9s ease-in-out infinite}
.w-part.torso{transform-origin:61%   65.4%; animation:wTorso 2.4s ease-in-out infinite .16s}
.w-part.head {transform-origin:63%   45%;   animation:wHead  1.9s ease-in-out infinite .3s}

/* 치마는 무겁다 — 크게, 느리게, 늦게 멈춘다 */
@keyframes wSkirt{
  0%,100%{transform:rotate(-1.5deg)}
  50%{transform:rotate(1.6deg)}
}
/* 저고리는 숨을 쉰다 — 회전에 오르내림을 얹는다 */
@keyframes wTorso{
  0%,100%{transform:rotate(1deg) translateY(0)}
  50%{transform:rotate(-1.1deg) translateY(-.7%)}
}
/* 전모는 가볍다 — 가장 크게, 가장 빨리 */
@keyframes wHead{
  0%,100%{transform:rotate(3deg)}
  50%{transform:rotate(-3.2deg)}
}

.w-leaves{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.w-leaves .fill-leaf{fill:#B5533C; opacity:0}
.w-leaves path{animation:wLeaf 3.1s linear infinite}
.w-leaves .a{animation-delay:.2s}
.w-leaves .b{animation-delay:1.5s; animation-name:wLeafB; animation-duration:3.6s}
@keyframes wLeaf{
  0%{opacity:0; transform:translate(52px,-24px) rotate(0)}
  9%{opacity:.85}
  52%{transform:translate(28px,250px) rotate(230deg)}
  88%{opacity:.65}
  100%{opacity:0; transform:translate(46px,560px) rotate(440deg)}
}
@keyframes wLeafB{
  0%{opacity:0; transform:translate(214px,-18px) rotate(0)}
  11%{opacity:.7}
  56%{transform:translate(240px,280px) rotate(-200deg)}
  90%{opacity:.55}
  100%{opacity:0; transform:translate(212px,566px) rotate(-400deg)}
}

/* 움직임을 원치 않으면 그림은 그대로 서 있는다 */
@media (prefers-reduced-motion:reduce){
  .w-part,.w-leaves path{animation:none}
  .w-leaves{display:none}
}

/* 움직임을 원치 않으면 번지지 않는다. 종이가 그냥 걷힌다. */
@media (prefers-reduced-motion:reduce){
  .ink-svg circle{transition:none}
  .ink{transition:opacity .3s ease}
  .ink.done{opacity:0}
}

/* 어느 해 어떤 자료인지 — 날짜 옆에 늘 붙어 있어야 한다 */
.disc-src{display:block; margin-top:6px; color:var(--ink-3); font-size:11px; letter-spacing:.02em}

/* 지도 없이도 닿는 길 — 자바스크립트가 없거나 웹지엘이 없을 때, 그리고 키보드로 */
.nojs{position:fixed; inset:auto 0 0 0; margin:0; padding:16px; text-align:center;
  background:var(--card); border-top:1px solid var(--border); font-size:14px}
.all-spots{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--border-strong)}
.all-spots:hover{color:var(--seal)}
.fallback a{color:var(--seal)}

/* ── 광고 자리 ──
   남의 코드가 들어오는 자리다. 우리 종이 위에 그대로 앉히면 색이 튀므로
   한 겹 물려 둔다. 무엇보다 '광고'라고 먼저 말한다 — 표기가 먼저다. */
.ad-blk{padding-top:16px}
.ad-label{
  margin:0 0 10px; font-family:"Nanum Myeongjo",serif;
  font-size:10.5px; letter-spacing:.22em; color:var(--muted-foreground);
}
.ad-slot{
  max-width:100%; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--muted); opacity:.94;
}
.ad-slot img,.ad-slot iframe{max-width:100%; display:block; border:0}

/* ── 마감 ─────────────────────────────────────────────────────
   손이 아니라 키보드로 오는 사람이 있다. 어디에 있는지 늘 보여야 한다.
   테는 인주가 아니라 ring 을 쓴다 — 인주는 낙관과 고른 명소의 색이다. */
.pick:focus-visible,
.gearlink:focus-visible,
.grip:focus-visible,
.all-spots:focus-visible,
.credit summary:focus-visible,
#slider:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-sm);
}
#slider:focus-visible{outline-offset:6px}

/* 시트 본문이 더 있다는 것을 가장자리로 말한다. 스크롤바는 그림을 자른다. */
.sheet-body{
  --edge: color-mix(in srgb, var(--paper-hi) 96%, transparent);
  background:
    linear-gradient(var(--paper-hi) 30%, transparent) top /100% 26px no-repeat,
    linear-gradient(transparent, var(--paper-hi) 70%) bottom /100% 30px no-repeat,
    radial-gradient(farthest-side at 50% 0, #1e242214, transparent) top /100% 10px no-repeat,
    radial-gradient(farthest-side at 50% 100%, #1e242212, transparent) bottom /100% 10px no-repeat;
  background-attachment:local, local, scroll, scroll;
}
.sheet-body::-webkit-scrollbar{width:9px}
.sheet-body::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:9px;
  border:3px solid var(--paper-hi)}
.sheet-body::-webkit-scrollbar-track{background:transparent}

/* 움직임을 원치 않으면 카메라도 조용히 옮긴다 */
@media (prefers-reduced-motion:reduce){
  .sheet{transition:none}
  .scene, .waiter, .ink{transition-duration:.01ms!important}
}

/* 좁은 화면에서는 제목이 자리를 다 먹어 찾기 칸이 48px 로 눌린다.
   제목은 접고 낙관만 남긴다 — 이름은 시트와 주소창이 이미 말한다. */
@media (max-width:560px){
  .brand .bt{display:none}
  .topbar{gap:10px; padding:12px 14px}
  .search{flex:1 1 auto; min-width:0}
}

/* ══ 낙관 — 산에 들어섰다는 표시 ══════════════════════════════
   화제(말풍선)는 흉했다. 도장은 다르다 — 그림 위에 낙관을 찍는 것은
   원래 있던 일이라, 종이의 말투를 깨지 않는다.
   찍히는 시늉을 낸다. 위에서 눌러 내려와 살짝 튀고 자리를 잡는다.
════════════════════════════════════════════════════════════════ */
.stamp{
  position:fixed; left:26px; bottom:30px; z-index:4; pointer-events:none;
  opacity:0; visibility:hidden;
}
.stamp.on{visibility:visible; animation:stampIn .52s cubic-bezier(.2,1.5,.4,1) forwards}
.stamp.off{animation:stampOut .34s ease forwards}
.stamp b{
  display:grid; place-items:center; width:46px; height:46px;
  background:var(--seal); color:#F6F3EE; border-radius:var(--radius-sm);
  font-family:Hahmlet,serif; font-weight:600; font-size:15px; line-height:1.1;
  letter-spacing:.02em; writing-mode:vertical-rl; padding:4px 0;
  /* 인주는 고르게 묻지 않는다. 가장자리를 눌러 얼룩을 만든다. */
  box-shadow:inset 0 0 0 1px #00000026, inset 0 -3px 7px #0000001f,
             inset 2px 2px 6px #ffffff1a;
}
@keyframes stampIn{
  0%  {opacity:0; transform:translateY(-9px) scale(1.22) rotate(-4deg)}
  55% {opacity:1; transform:translateY(0) scale(.94) rotate(-1.5deg)}
  78% {transform:scale(1.03) rotate(-2.4deg)}
  100%{opacity:1; transform:scale(1) rotate(-2deg)}
}
@keyframes stampOut{ to{opacity:0; transform:scale(.94) rotate(-2deg)} }
@media (max-width:819px){ .stamp{left:16px; bottom:150px} }
@media (prefers-reduced-motion:reduce){
  .stamp.on{animation:none; opacity:1; transform:rotate(-2deg)}
  .stamp.off{animation:none; opacity:0}
}

/* ══ 안개 ═══════════════════════════════════════════════════════
   산수화의 절반은 여백이고, 그 여백을 만드는 것이 안개다.
   무늬를 넣지 않는다 — 무늬가 있으면 종이에 앉은 때가 된다.
   아주 넓고 아주 옅은 띠 둘이 서로 다른 속도로 지나간다.
   가까이 가면 걷힌다. 산 속에서까지 흐리면 길을 못 찾는다.
════════════════════════════════════════════════════════════════ */
.mist{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:var(--mist, 0); transition:opacity 1.2s ease;
}
.mist > i{
  position:absolute; left:-60%; width:220%; display:block;
  background:linear-gradient(180deg,
    #F7F9F800 0%, #F7F9F8B0 38%, #F7F9F8D8 52%, #F7F9F8B0 66%, #F7F9F800 100%);
  filter:blur(14px);
}
.mist > i:nth-child(1){top:14%; height:26%; animation:mistA 168s linear infinite}
.mist > i:nth-child(2){top:52%; height:20%; opacity:.72;
  animation:mistB 231s linear infinite}
@keyframes mistA{
  0%  {transform:translate3d(-14%, 0, 0)}
  50% {transform:translate3d(12%, -1.4%, 0)}
  100%{transform:translate3d(-14%, 0, 0)}
}
@keyframes mistB{
  0%  {transform:translate3d(10%, 0, 0)}
  50% {transform:translate3d(-12%, 1.1%, 0)}
  100%{transform:translate3d(10%, 0, 0)}
}
@media (prefers-reduced-motion:reduce){ .mist > i{animation:none} }

/* ══ 무대(場) ═══════════════════════════════════════════════════
   지도는 목차, 무대는 본문이다. 산을 고르면 카메라가 그리로 날아가고,
   자리를 잡으면 여기 한 폭이 열린다. 그림이 크게 서야 손끝이 보인다.
   종이 위에 종이를 얹는 것이므로 상자를 그리지 않는다 — 표구만 두른다.
════════════════════════════════════════════════════════════════ */
/* 무대는 이 하나뿐이다. 클래스로 잡으면 시트 안의 작은 배지까지
   전면 덮개가 되어 지도가 통째로 사라진다 — 실제로 그랬다.
   그리고 클래스 규칙은 브라우저의 [hidden] 보다 세다. 닫힌 무대가
   화면을 덮지 않도록 여기서 직접 막는다. */
#stage{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:color-mix(in srgb,var(--paper) 97%,transparent); backdrop-filter:blur(8px);
  animation:stageIn .48s ease both;
}
#stage[hidden]{display:none}
@keyframes stageIn{ from{opacity:0} to{opacity:1} }
#stage.out{animation:stageOut .26s ease forwards}
@keyframes stageOut{ to{opacity:0} }
.stage-in{
  position:relative; width:100vw; height:100vh; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,31vw);
  align-items:center; gap:clamp(22px,3vw,50px);
  background:
    radial-gradient(circle at 76% 34%,#FFFFFF9C,transparent 34%),
    linear-gradient(105deg,var(--paper-hi),var(--paper) 64%);
  padding:clamp(34px,5vw,74px);
  animation:stageRise .58s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes stageRise{from{transform:translateY(12px) scale(.992);opacity:.2}to{transform:none;opacity:1}}
#stageCv{
  display:block; width:100%; min-width:0; max-height:calc(100vh - 84px); height:auto;
  object-fit:contain; align-self:center; border-radius:2px;
  box-shadow:0 18px 42px #1E24221A,0 0 0 1px #1E242221;
  cursor:pointer;
}
.stage-txt{align-self:end;min-width:0;padding:0 0 clamp(8px,3vh,34px)}
.stage-where{margin:0; font-family:"Nanum Myeongjo",serif; font-size:12px;
  letter-spacing:.14em; color:var(--muted-foreground)}
.stage-txt h2{margin:5px 0 0; font-family:Hahmlet,serif; font-weight:500;
  font-size:clamp(30px,3vw,46px); letter-spacing:.02em}
.stage-line{margin:14px 0 0; font-size:16px; line-height:1.8; color:var(--ink-2);
  max-width:38ch;overflow-wrap:anywhere}
.stage-act{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap}
.stage-play{
  border:1px solid var(--border-strong); background:var(--paper-hi); color:inherit;
  border-radius:999px; padding:9px 17px; font:inherit; font-size:13.5px;
  font-family:Hahmlet,serif; letter-spacing:.08em; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.stage-play:hover{border-color:var(--seal); color:var(--seal)}
.stage-play.primary{background:var(--seal);border-color:var(--seal);color:#fff}
.stage-play.primary:hover{background:#873126;color:#fff}
.stage-act span{font-family:"Nanum Myeongjo",serif; font-size:11.5px;
  color:var(--muted-foreground); letter-spacing:.05em}
.stage-of{margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--muted-foreground)}
.stage-x{
  position:absolute; top:18px; right:20px; z-index:1;
  border:1px solid var(--border-strong); background:#FCFDFDE6; color:var(--ink-2);
  border-radius:999px; padding:5px 13px; font:inherit; font-size:12px;
  font-family:"Nanum Myeongjo",serif; letter-spacing:.1em; cursor:pointer;
}
.stage-x:hover{color:var(--seal); border-color:var(--seal)}

/* 무대로 드는 문 — 시트 안에서 부른다 */
.stage-door{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:2px;
  border:1px solid var(--border-strong); background:var(--paper-hi); color:inherit;
  border-radius:var(--radius-sm); padding:11px 13px; font:inherit; cursor:pointer;
  text-align:left; transition:border-color .15s;
}
.stage-door:hover{border-color:var(--seal)}
.stage-door b{font-family:Hahmlet,serif; font-weight:500; font-size:15px}
.stage-door em{font-style:normal; margin-left:auto; font-size:11px;
  font-family:"Nanum Myeongjo",serif; letter-spacing:.1em; color:var(--muted-foreground)}
.stage-door:hover em{color:var(--seal)}
.stage-door .nk{font-family:Hahmlet,serif; font-size:13px; color:var(--ink-3); width:20px;
  text-align:center}

@media (max-width:819px){
  .journey{bottom:146px}
  .stage-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;
    gap:18px;padding:58px 14px 18px;overflow:auto}
  #stageCv{max-height:56vh;justify-self:center}
  .stage-txt{align-self:start;padding:0 6px}
  .stage-txt h2{font-size:28px}
  .stage-line{font-size:15px;line-height:1.72}
  .stage-x{top:12px;right:14px}
}
@media (prefers-reduced-motion:reduce){
  .stage,.stage-in,.journey,.journey-line::after{animation:none}
}

/* 그림 한 폭으로 들어가는 문 — 절정 줄 바로 밑. 산을 고르면 스크롤 없이 보여야 한다. */
.scene-slot{margin:2px 0 14px}
.scene-slot .stage-door{width:100%}

/* 포토스팟 — 景 아래 한 줄. 언제·어디서·무엇을. 아이콘을 늘리지 않고 글로만 말한다. */
.near .ns{grid-column:2; display:block; margin-top:3px; font-size:12px; line-height:1.6; color:var(--ink-2)}
.near .ns i{font-style:normal; font-family:"Nanum Myeongjo",serif; font-size:10.5px;
  letter-spacing:.14em; color:var(--seal); margin-right:7px}
/* 갈 수 없는 산 — 알고 보는 자리만 */
.near-far{margin:0 0 6px; font-size:11.5px; color:var(--muted-foreground)}

/* ══ 그 산의 사람 ═════════════════════════════════════════════════
   로딩 화면의 여인과 같은 방식 — 관절에 축을 두고, 무거울수록 느리고 작게.
   로딩은 이삼 초면 끝나지만 여기는 오래 두고 보는 자리라 한 뼘 차분하게 둔다.
   박자가 서로 맞지 않아 같은 모습이 되풀이되어 보이지 않는다. */
.stand{position:fixed; left:34px; bottom:104px; z-index:4; margin:0; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .7s ease, transform .7s ease}
.stand.on{opacity:1; transform:none}
.s-cut{position:relative; height:min(40vh, 380px); aspect-ratio:var(--ar, .38)}
.s-part{position:absolute; inset:0}
.s-part img{display:block; width:100%; height:100%;
  opacity:.93; filter:contrast(.96) brightness(1.02)}
.s-part.legs {transform-origin:var(--o-legs,  50% 98%); animation:sLegs  3.1s ease-in-out infinite}
.s-part.torso{transform-origin:var(--o-torso, 50% 60%); animation:sTorso 2.5s ease-in-out infinite .18s}
.s-part.head {transform-origin:var(--o-head,  50% 22%); animation:sHead  2.0s ease-in-out infinite .34s}
/* 바지와 도포 자락 — 치마보다 가볍게 흔들린다 */
@keyframes sLegs {0%,100%{transform:rotate(-.9deg)} 50%{transform:rotate(1deg)}}
/* 몸통은 숨을 쉰다 — 회전에 오르내림을 얹는다 */
@keyframes sTorso{0%,100%{transform:rotate(.9deg) translateY(0)} 50%{transform:rotate(-1deg) translateY(-.5%)}}
/* 갓은 가볍다 — 가장 크게, 가장 빨리 */
@keyframes sHead {0%,100%{transform:rotate(2.2deg)} 50%{transform:rotate(-2.4deg)}}
@media (max-height:760px){ .s-cut{height:34vh} }
@media (max-width:819px){ .stand{display:none} }
@media (prefers-reduced-motion:reduce){ .s-part{animation:none} }

/* 먹 그림자 — 발밑에 옅게 번진다. 없으면 지도에 붙인 스티커처럼 떠 보였다.
   다리와 같은 박자로 조금 늘었다 줄어, 무게가 발로 옮겨 가는 것처럼 보인다. */
.s-shadow{position:absolute; left:6%; right:2%; bottom:1%; height:6%; display:block;
  background:radial-gradient(ellipse at 50% 55%, rgba(30,36,34,.30) 0%,
    rgba(30,36,34,.15) 42%, rgba(30,36,34,0) 72%);
  filter:blur(1.5px); transform-origin:50% 50%; animation:sShadow 3.1s ease-in-out infinite}
@keyframes sShadow{0%,100%{transform:scaleX(1.04)} 50%{transform:scaleX(.96)}}
/* 지도와 앞뒤 거리감 — 지도를 돌리거나 기울이면 아주 조금 반대로 비켜선다(js) */
.s-cut{transition:transform .4s ease-out}
@media (prefers-reduced-motion:reduce){ .s-shadow{animation:none} .s-cut{transition:none} }

/* ══ 그 산의 한 장면 (ys-) ═══════════════════════════════════════
   옛 그림 한 판을 대표 장소에 세운다. 지도 왼쪽 아래, 지도를 가리지 않을 만큼.
   움직임은 로딩 화면과 같은 방식 — 마디를 품고, 관절에 축, 박자를 달리. */
#yScene{position:fixed; left:26px; bottom:78px; z-index:4; margin:0; pointer-events:none;
  opacity:0; transform:translateY(8px); transition:opacity .9s ease, transform .9s ease}
#yScene.on{opacity:1; transform:none}
/* 폭만 정하면 세로로 긴 그림(여속도첩, 1000×2034)은 화면 위로 넘쳤다.
   높이도 화면의 62% 를 넘지 않게 — 폭을 높이에서 거꾸로 셈해 둘 중 작은 쪽을 쓴다. */
.ys-cut{position:relative; width:min(40vw, 560px, calc(62vh * var(--ar, 1.236)));
  aspect-ratio:var(--ar, 1.236); transition:transform .4s ease-out}
/* 앞뒤 두 겹 — 바깥(ys-pf/pn)은 지도에 따라 비켜서고(js), 안(ys-far/near)은 천천히 숨 쉰다.
   뒤 겹은 조금, 앞 겹은 더 — 그 차이가 깊이다. 크게 하면 판지 두 장이 된다. */
.ys-pf,.ys-pn,.ys-far,.ys-near{position:absolute; inset:0}
.ys-pf,.ys-pn{transition:transform .4s ease-out}
.ys-far-img,.ys-near-img,.ys-part,.ys-part > img{position:absolute; inset:0; width:100%; height:100%; display:block}
.ys-far-img,.ys-near-img,.ys-part > img{opacity:.94; filter:contrast(.96) brightness(1.02)}
.ys-far {transform-origin:50% 30%; animation:ysFar  17s ease-in-out infinite}
.ys-near{transform-origin:50% 70%; animation:ysNear 17s ease-in-out infinite}
@keyframes ysFar {0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.004) translate(-.25%,0)}}
@keyframes ysNear{0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.014) translate(-.8%,-.2%)}}
/* 층 사이 안개 — 뒤 겹의 발치를 덮고 앞 겹 아래로 들어간다 */
.ys-mist{position:absolute; left:-8%; right:-8%; top:13%; height:22%; display:block; pointer-events:none;
  background:linear-gradient(180deg, rgba(247,249,248,0), rgba(247,249,248,.66) 52%, rgba(247,249,248,0));
  filter:blur(7px); animation:ysMist 23s ease-in-out infinite}
@keyframes ysMist{0%,100%{transform:translateX(-4%)} 50%{transform:translateX(4%)}}
/* 움직이는 사람 — 무리마다 js 가 마디를 짜 넣는다. 바깥 마디(b0)는 무겁고 느리게,
   가운데(b1)는 숨 쉬듯, 안쪽(b2)은 가볍고 빠르게. 무리마다 늦춤(--dl)을 달리해 박자가 겹치지 않게. */
.ys-parts,.ys-part{position:absolute; inset:0}
.ys-b0{transform-origin:var(--o); animation:ysSkirt 2.8s ease-in-out infinite var(--dl, 0s)}
.ys-b1{transform-origin:var(--o); animation:sTorso  2.3s ease-in-out infinite calc(var(--dl, 0s) + .2s)}
.ys-b2{transform-origin:var(--o); animation:sHead   1.9s ease-in-out infinite calc(var(--dl, 0s) + .35s)}
@keyframes ysSkirt{0%,100%{transform:rotate(-1.4deg)} 50%{transform:rotate(1.5deg)}}
/* 겹이 하나뿐인 장면 — 뒤 겹과 안개를 두지 않는다 */
#yScene.flat .ys-pf,#yScene.flat .ys-mist{display:none}
/* 떨어지는 잎 — 나무 자리(js 가 --lx --ly 로 준다)에서 */
.ys-leaf{position:absolute; left:var(--lx); top:var(--ly); width:1.3%; aspect-ratio:1;
  background:#B5533C; border-radius:70% 0 70% 0; opacity:0; animation:ysLeaf 5.2s linear infinite}
.ys-leaf.b{left:var(--lx2); top:var(--ly2); animation-delay:1.8s; animation-duration:6s; background:#C8703F}
.ys-leaf.c{left:calc(var(--lx) + 4%); top:var(--ly); animation-delay:3.4s; animation-duration:5.6s}
@keyframes ysLeaf{
  0%{opacity:0; transform:translate(0,0) rotate(0)}
  10%{opacity:.85}
  55%{transform:translate(-26px,120px) rotate(220deg)}
  90%{opacity:.6}
  100%{opacity:0; transform:translate(-10px,230px) rotate(430deg)}
}
.ys-cap{margin:4px 0 0 6px; font-family:"Nanum Myeongjo",serif; font-size:12.5px;
  letter-spacing:.2em; color:var(--ink-2)}
@media (max-height:760px){ .ys-cut{width:min(34vw, 460px, calc(56vh * var(--ar, 1.236)))} }
@media (max-width:819px){ #yScene{display:none} }
@media (prefers-reduced-motion:reduce){ .ys-far,.ys-near,.ys-mist,.ys-part,.ys-leaf{animation:none} .ys-leaf{display:none} }

/* ══ 그 자리 속으로 (pl-) ════════════════════════════════════════
   흔들바위 같은 작은 자리를 화면을 넘겨 3D 로 세운다(js/place3d.js).
   먹이 번지듯 문에서 퍼져 나가고, 닫으면 그 자리로 오므라든다. */
@property --pr{syntax:'<length>'; inherits:false; initial-value:0px}
#place3d{position:fixed; inset:0; z-index:40; background:#F2EEE3; color:#1E2422; --pr:0px;
  -webkit-mask-image:radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 calc(var(--pr) - 140px), transparent var(--pr));
          mask-image:radial-gradient(circle at var(--px, 50%) var(--py, 50%), #000 calc(var(--pr) - 140px), transparent var(--pr));
  transition:--pr 1s cubic-bezier(.55,0,.25,1)}
#place3d.on{--pr:190vmax}
#place3d[hidden]{display:none}
.pl-in{position:absolute; inset:0}
.pl-cv{position:absolute; inset:0; opacity:0; transition:opacity 1s ease .1s}
.pl-cv canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
#place3d.ready .pl-cv{opacity:1}
/* 한지 — 결과 가장자리 그늘. 3D 가 화면 속 모형이 아니라 종이 위 그림이 되게 */
.pl-paper{position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse 78% 72% at 50% 46%, transparent 58%, rgba(96,80,56,.24) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .37  0 0 0 0 .28  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.pl-head{position:absolute; left:34px; top:28px; pointer-events:none}
/* 이름 뒤는 종이로 옅게 비운다 — 나무와 겹쳐도 읽히게 */
.pl-head{isolation:isolate}
.pl-head::before{content:""; position:absolute; inset:-34px -80px -30px -50px; z-index:-1;
  background:radial-gradient(closest-side, rgba(242,238,227,.92), rgba(242,238,227,0))}
.pl-where{margin:0; font-family:"Nanum Myeongjo",serif; font-size:12px; letter-spacing:.14em; color:#6B6A63}
.pl-head h2{margin:5px 0 0; font-family:Hahmlet,serif; font-weight:500; font-size:30px; letter-spacing:.02em}
.pl-head h2{display:inline-block; vertical-align:middle}
/* 낙관 — 지도의 산 도장과 같은 주칠 */
.pl-seal{display:inline-block; vertical-align:middle; margin:5px 0 0 12px; padding:5px 4px 4px;
  background:#A8443A; color:#F6EFE3; font-family:Hahmlet,serif; font-size:13px; line-height:1.05;
  writing-mode:vertical-rl; border-radius:2px; box-shadow:inset 0 0 0 1.5px rgba(246,239,227,.5); opacity:.93}
.pl-seal:empty{display:none}
.pl-x{position:absolute; right:22px; top:20px; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(30,36,34,.28); background:rgba(247,249,248,.82); color:#1E2422;
  font:300 24px/1 system-ui, sans-serif; cursor:pointer}
.pl-x:hover{border-color:#A8443A; color:#A8443A}
.pl-load{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0;
  font-family:"Nanum Myeongjo",serif; font-size:14px; color:#6B6A63; transition:opacity .4s}
#place3d.ready .pl-load{opacity:0}
/* 밀어 보기 — 무대의 '술 한 사발 건네기'와 같은 주칠 단추 */
.pl-act{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); padding:11px 22px; border-radius:999px;
  border:1px solid #A8443A; background:#A8443A; color:#F6EFE3; font:500 14px/1 Hahmlet, serif; letter-spacing:.05em;
  cursor:pointer; box-shadow:0 2px 12px rgba(60,40,30,.18); opacity:0; transition:opacity .6s ease 2.8s, background .15s}
#place3d.ready .pl-act{opacity:1}
.pl-act:hover{background:#963A31}
.pl-act:disabled{background:rgba(168,68,58,.5); border-color:transparent; cursor:default}
@media (max-width:819px){ .pl-act{bottom:34px} }
/* 출처 — 지도의 「출처」와 같은 작은 알약. 눌러야 펼친다 */
.pl-credit{position:absolute; right:18px; bottom:16px; max-width:min(360px, 70vw); font-size:11px;
  color:#6B6A63; text-align:right}
.pl-credit summary{cursor:pointer; list-style:none; display:inline-block; background:rgba(247,249,248,.85);
  border:1px solid rgba(30,36,34,.18); border-radius:999px; padding:3px 11px;
  font-family:"Nanum Myeongjo",serif; letter-spacing:.16em}
.pl-credit summary::-webkit-details-marker{display:none}
.pl-credit>div{margin-top:6px; text-align:left; background:rgba(247,249,248,.95); border:1px solid rgba(30,36,34,.14);
  border-radius:8px; padding:9px 11px; line-height:1.6}
@media (max-width:819px){
  .pl-head{left:18px; top:18px} .pl-head h2{font-size:24px}
  .pl-x{right:14px; top:14px}
}
@media (prefers-reduced-motion:reduce){ #place3d{transition:none} .pl-cv{transition:none} }

/* ── 흔들바위로 가는 길 — 여정 알림은 원래의 「…으로」 알약을 쓴다.
   줄은 정해진 박자로 차오르지 않고 붓끝이 간 만큼 찬다(--jp, js/main.js runJourney) */
.journey.trek .journey-line::after{animation:none; transform:scaleX(var(--jp, 0)); transition:transform .12s linear}

/* ══ 실패 없는 단풍 — 오늘 어디 갈까 · 현장 브리핑 (js/plan.js) ═══════════ */
.ask-btn{display:flex; align-items:center; gap:12px; margin:4px 20px 10px; padding:12px 14px; width:calc(100% - 40px);
  border:1px solid var(--seal); border-radius:var(--radius); background:#FBF3EF; color:var(--ink); cursor:pointer; text-align:left; font:inherit}
.ask-btn b{width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:4px; background:var(--seal);
  color:#F6EFE3; font-family:Hahmlet,serif; font-weight:500; font-size:16px}
.ask-btn span{display:flex; flex-direction:column; gap:2px; font-family:Hahmlet,serif; font-size:16px; font-weight:500}
.ask-btn i{font-style:normal; font-family:"Nanum Myeongjo",serif; font-size:11.5px; font-weight:400; color:var(--muted-foreground)}
.ask-btn:hover{background:#F8EAE4}
.brief{margin:22px 0 0; padding:16px 16px 14px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--paper-hi)}
.brief-h{margin:0 0 10px; font-family:"Nanum Myeongjo",serif; font-size:12px; letter-spacing:.12em; color:var(--seal); font-weight:700}
.brief-l{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13.5px}
.brief-l dt{font-family:"Nanum Myeongjo",serif; font-size:11px; letter-spacing:.12em; color:var(--muted-foreground); padding-top:2px; white-space:nowrap}
.brief-l dd{margin:0; color:var(--ink-2); line-height:1.6}
.brief-l small{font-size:10.5px; color:var(--muted-foreground); border:1px solid var(--border); border-radius:3px; padding:0 4px; margin-left:2px}
.brief-alt{margin:12px 0 0; padding:9px 11px; border-radius:var(--radius-sm); background:#FBF3EF; font-size:13px; line-height:1.6; color:var(--ink-2)}
.brief-alt b{color:var(--seal); font-weight:600; margin-right:4px}
.brief-alt button{margin-left:6px; border:0; background:none; color:var(--seal); text-decoration:underline; cursor:pointer; font:inherit; padding:0}
.brief-go{display:flex; gap:8px; margin:14px 0 0}
.brief-go a{flex:1; text-align:center; padding:9px 8px; border-radius:var(--radius-sm); background:var(--ink); color:#F7F9F8;
  text-decoration:none; font-size:13px; font-weight:500}
.brief-go a.sub{background:var(--paper-hi); color:var(--ink); border:1px solid var(--border-strong)}
.brief-act{display:flex; gap:6px; margin:8px 0 0; flex-wrap:wrap}
.brief-act button{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:none; font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer}
.brief-act button b{font-family:Hahmlet,serif; color:var(--seal); font-weight:500}
.brief-act button:hover{border-color:var(--seal)}
.brief-src{margin:10px 0 0; display:flex; gap:12px; flex-wrap:wrap; font-size:11px}
.brief-src a{color:var(--muted-foreground)}
.saved{display:flex; flex-wrap:wrap; gap:6px}
.sv{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border-strong); border-radius:999px;
  background:none; font:inherit; font-size:13px; cursor:pointer; color:var(--ink)}
.sv i{width:7px; height:7px; border-radius:50%}
.sv em{font-style:normal; font-size:11px; color:var(--muted-foreground)}
/* 물음 — 화면 위에 뜨는 한 장 */
.ask{position:fixed; inset:0; z-index:30; background:rgba(30,36,34,.32); display:grid; place-items:center; padding:18px}
.ask[hidden]{display:none}
.ask-in{position:relative; width:min(560px, 100%); max-height:calc(100vh - 36px); overflow:auto; background:var(--paper-hi);
  border-radius:10px; padding:24px 24px 18px; box-shadow:0 18px 50px rgba(30,36,34,.25)}
.ask-in h2{margin:0; font-family:Hahmlet,serif; font-weight:500; font-size:24px}
.ask-sub{margin:4px 0 16px; font-family:"Nanum Myeongjo",serif; font-size:13px; color:var(--muted-foreground)}
.ask-x{position:absolute; right:14px; top:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong);
  background:none; font-size:20px; cursor:pointer; color:var(--ink)}
.ask-q{margin:0 0 12px}
.ask-q > p{margin:0 0 6px; font-family:"Nanum Myeongjo",serif; font-size:11.5px; letter-spacing:.12em; color:var(--muted-foreground)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips button{padding:7px 12px; border-radius:999px; border:1px solid var(--border-strong); background:none; font:inherit; font-size:13px; cursor:pointer; color:var(--ink-2)}
.chips button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#F7F9F8}
.ask-go{width:100%; margin:6px 0 0; padding:12px; border:0; border-radius:var(--radius); background:var(--seal); color:#F6EFE3;
  font-family:Hahmlet,serif; font-size:16px; cursor:pointer}
.ask-res{margin:14px 0 0}
.ask-wait{margin:0; font-size:13px; color:var(--muted-foreground)}
.ask-head{margin:0 0 8px; font-family:Hahmlet,serif; font-size:16px}
.ask-head b{color:var(--seal); font-weight:600}
.rec{display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; width:100%; text-align:left; padding:11px 12px; margin:0 0 6px;
  border:1px solid var(--border-strong); border-radius:var(--radius); background:none; font:inherit; cursor:pointer; color:var(--ink)}
.rec:hover{border-color:var(--seal)}
.rec .rk{grid-row:1 / span 2; font-family:Hahmlet,serif; font-size:20px; color:var(--seal); align-self:center}
.rec .nm{font-family:Hahmlet,serif; font-size:17px; font-weight:500}
.rec .nm small{font-family:"Nanum Myeongjo",serif; font-size:11px; color:var(--muted-foreground); margin-left:8px; font-weight:400}
.rec .tm{grid-column:3; grid-row:1; align-self:baseline; font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.rec .why{grid-column:2 / span 2; display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.st{font-style:normal; font-size:11.5px; font-weight:600; padding:1px 8px; border-radius:999px; background:#F7E4DE; color:var(--seal)}
.st-early{background:#ECEFE5; color:#56643F} .st-start{background:#F5EDD8; color:#83631C} .st-mid{background:#F8E5D3; color:#9D5019}
.st-past{background:#EEE5DE; color:#72543F} .st-gone{background:#EBEBE8; color:#6F6F6A}
.ask-crit{margin:-2px 0 10px; font-size:12px; color:var(--muted-foreground); line-height:1.5}
.ask-how{margin:10px 0 0; font-size:12px; color:var(--ink-2)}
.ask-how summary{cursor:pointer; color:var(--muted-foreground); width:max-content}
.ask-how ul{margin:6px 0 0; padding-left:18px; line-height:1.65}
.cal{max-width:340px; padding:6px 8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#FFFDF8}
.cal-h{display:flex; align-items:center; justify-content:space-between; margin:0 0 2px}
.cal-h b{font-family:Hahmlet,serif; font-weight:500; font-size:15px}
.cal-nav{width:32px; height:32px; border:0; border-radius:50%; background:none; font-size:20px; line-height:1; color:var(--ink-2); cursor:pointer}
.cal-nav:disabled{opacity:.2; cursor:default}
.cal-nav:not(:disabled):hover{background:#EFE9DD}
.cal-g{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center}
.cal-g i{font-style:normal; font-size:10.5px; color:var(--muted-foreground); padding:2px 0 4px}
.cal-g button{position:relative; height:36px; border:0; border-radius:50%; background:none; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer}
.cal-g .hol{color:#B4432D} .cal-g .sat{color:#3E6190}
.cal-g button:disabled{color:#CFCBC2; cursor:default}
.cal-g button.today::after{content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--seal)}
.cal-g button:not(:disabled):hover{background:#EFE9DD}
.cal-g button[aria-pressed="true"]{background:var(--ink); color:#F7F9F8}
.cal-g button[aria-pressed="true"].today::after{background:#F7F9F8}
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:45; margin:0; padding:10px 16px; border-radius:999px;
  background:var(--ink); color:#F7F9F8; font-size:13px; box-shadow:0 6px 20px rgba(30,36,34,.25)}
.toast[hidden]{display:none}
@media (max-width:819px){
  .ask{padding:0; align-items:end}
  .ask-in{width:100%; max-height:92vh; border-radius:14px 14px 0 0; padding:20px 18px 16px}
  /* 휴대폰에서는 글자를 옆에 두면 찾기 칸이 '산 이' 두 글자로 줄었다 — 行 아래 작은 두 줄로, 인주색으로 */
  .ask-rb{flex-direction:column; gap:0; padding:0 7px !important; background:var(--seal) !important; border-color:var(--seal) !important; color:#F6EFE3 !important}
  .ask-rb b{color:#F6EFE3; line-height:1.05}
  .ask-rb span{display:block !important; font-size:8.5px; line-height:1.1; letter-spacing:0; white-space:nowrap}
  .toast{bottom:150px}
}

/* ── 남이섬 나루 — 두 바다의 두 배 (js/main.js syncSeaBoats) ── */
.seaboat{pointer-events:none; opacity:0; transition:opacity .8s ease}
.seaboat.on{opacity:.95}
.seaboat img{display:block; width:100%; height:auto; transform-origin:50% 90%;
  animation:seaBob 5.2s ease-in-out infinite var(--ph, 0s)}
@keyframes seaBob{0%,100%{transform:translateY(0) rotate(-.5deg)} 50%{transform:translateY(-4px) rotate(.6deg)}}
#yScene.away{opacity:0 !important; visibility:hidden}
@media (prefers-reduced-motion:reduce){ .seaboat img{animation:none} }

/* ── 버튼 아이콘 — 한자 도장을 떼고 가는 선 하나로(js/icons.js) ── */
.ico{width:16px; height:16px; display:block; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.rbtn b{display:inline-flex; align-items:center}
.rbtn b .ico{width:16px; height:16px}
.ask-btn b .ico{width:19px; height:19px; stroke:#F6EFE3}
.brief-act button b{display:inline-flex}
.brief-act button b .ico{width:15px; height:15px}
.tourlink .ic{border:0}
.tourlink .ic .ico{width:15px; height:15px}
.gearlink .ic .ico, .stage-door .nk .ico{width:17px; height:17px}
.stage-door .nk{display:inline-flex; justify-content:center}
.journey-mark .ico{width:18px; height:18px}
/* 휴대폰 윗줄 — 단추 일곱 개에 찾기 칸이 돋보기만 남았다. 재생은 휴대폰에서 덜 쓰니 빼고, 단추를 줄인다 */
@media (max-width:480px){
  #btn-play{display:none}
  .rail .rbtn{padding:0 9px}
  .ask-rb{padding:0 6px !important}
}

/* ── 그날의 산 날씨 (js/wxart.js) ── */
.wx{margin:12px 0 2px; padding:12px 12px 10px; border-radius:var(--radius-sm); background:#F5F2EA}
.wx-say{margin:0 0 8px; display:flex; flex-direction:column; gap:3px}
.wx-say b{font-family:Hahmlet,serif; font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.wx-say span{font-size:12.5px; color:var(--ink-2)}
.wx svg.rib{display:block; width:100%; height:auto; overflow:visible}
.wx text{font-family:"Gowun Batang",serif}
.wx .edge{fill:none; stroke:rgba(38,42,40,.22); stroke-width:1}
.wx .dusk{fill:#2B3136; opacity:.2}
.wx .good{fill:none; stroke:var(--seal); stroke-width:1.6; stroke-linecap:round}
.wx .good-t{fill:var(--seal); font-size:10px; font-weight:700}
.wx .ax{fill:var(--muted-foreground); font-size:10px}
.wx .tt{fill:var(--ink); font-size:11px; font-weight:700}
.wx .rt{fill:#46658F; font-size:10px; font-weight:700}
.wx .gl{fill:none; stroke:rgba(34,38,36,.72); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.wx .now{stroke:var(--seal); stroke-width:1.5}
.wx .drop{stroke:#46658F; stroke-width:1.2; stroke-linecap:round; animation:wxRain 1.1s linear infinite}
@keyframes wxRain{from{transform:translateY(-6px); opacity:0} 20%{opacity:.85} to{transform:translateY(var(--fall, 22px)); opacity:0}}
.wx .fog{fill:#fff; opacity:.7; animation:wxFog 9s ease-in-out infinite alternate}
@keyframes wxFog{from{transform:translateX(-10px)} to{transform:translateX(30px)}}
.wx-rows{margin:10px 0 0; display:grid; gap:6px}
.wx-rows div{display:grid; grid-template-columns:48px 1fr; align-items:baseline}
.wx-rows dt{font-family:"Nanum Myeongjo",serif; font-size:11px; letter-spacing:.08em; color:var(--muted-foreground)}
.wx-rows dd{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:13px; color:var(--ink-2)}
.wx-rows dd b{font-size:14px; font-weight:700; color:var(--ink)}
.wx-rows small{margin-left:auto; font-size:11px; color:var(--muted-foreground)}
.wx-rows .bring dd{color:var(--ink); font-weight:600}
@media (prefers-reduced-motion:reduce){ .wx *{animation:none !important} }

/* ── 유형마다 다른 정보 줄 (renderFacts) ── */
.facts .frow{display:contents}
.facts .frow[hidden]{display:none}
.facts dd small{font-size:10.5px; color:var(--muted-foreground); border:1px solid var(--border); border-radius:3px; padding:0 4px; margin-left:4px}
.facts dd a{color:inherit}
.checked{margin:12px 0 0; font-size:11px; line-height:1.7; color:var(--muted-foreground)}
.checked a{color:inherit; text-underline-offset:2px}

/* ══ 화면 틀(합치기 샘플) — 지도는 넓게, 날짜는 아래 떠 있는 카드, 명소는 오른쪽 카드 (v6 의 틀 + 우리 엔진) ══ */
.type-filter{position:fixed; z-index:6; top:74px; left:50%; transform:translateX(-50%); display:flex; gap:2px; padding:4px;
  background:color-mix(in srgb, var(--paper-hi) 92%, transparent); border:1px solid var(--border-strong); border-radius:999px;
  box-shadow:0 6px 20px rgba(35,42,40,.1); backdrop-filter:blur(8px); max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none}
.type-filter::-webkit-scrollbar{display:none}
.type-filter button{flex:0 0 auto; height:30px; padding:0 12px; border:0; border-radius:999px; background:none; font:inherit; font-size:12.5px;
  color:var(--ink-2); cursor:pointer; white-space:nowrap}
.type-filter button:hover{color:var(--ink)}
.type-filter button[aria-pressed="true"]{background:var(--ink); color:#F7F9F8}
.rbtn-primary{background:var(--ink); border-color:var(--ink); color:#F7F9F8}
.rbtn-primary .ico{stroke:#F7F9F8}
.rbtn-primary:hover{background:#2E3633; border-color:#2E3633}
.detail-head{position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px 10px 18px; background:var(--paper-hi); border-bottom:1px solid var(--border)}
.detail-tabs{display:flex; gap:2px; padding:3px; background:#EDE9E0; border-radius:999px}
.detail-tabs button{height:30px; padding:0 15px; border:0; border-radius:999px; background:none; font:inherit; font-size:13px; color:var(--ink-3); cursor:pointer}
.detail-tabs button[aria-selected="true"]{background:var(--paper-hi); color:var(--ink); box-shadow:0 1px 3px rgba(35,42,40,.12)}
.detail-close{width:32px; height:32px; flex:0 0 auto; border-radius:50%; border:1px solid var(--border-strong); background:var(--paper-hi);
  font-size:18px; line-height:1; color:var(--ink-2); cursor:pointer}
.detail-close:hover{border-color:var(--ink-3)}
.verdict{margin:16px 0 6px; padding:14px 16px 12px; border:1px solid var(--border-strong); border-radius:14px; background:#FBF8F2}
.vd-k{margin:0; display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:var(--muted-foreground); letter-spacing:.06em}
.vd-k small{font-size:10.5px; color:var(--seal); letter-spacing:0; border:1px solid #E7C9C0; border-radius:999px; padding:1px 8px}
.verdict h3{margin:6px 0 2px; font-family:Hahmlet,serif; font-size:19px; font-weight:600; color:var(--ink)}
.verdict.closed h3{color:var(--seal)}
.vd-why{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.55}
/* 기상특보 — 그날이 오늘(특보)이거나 예비특보 날짜일 때만. 할 일을 먼저, 근거는 작게 */
.vd-alert{margin:8px 0 0; padding:7px 10px; border-radius:10px; background:#FBEDE8; color:var(--seal); font-size:12.5px; font-weight:600; line-height:1.45}
.vd-alert + .vd-alert{margin-top:4px}
.vd-alert small{display:block; margin-top:2px; font-weight:400; font-size:11px; color:var(--muted-foreground)}
.vd-alert.soft{padding:0; background:none; color:var(--muted-foreground); font-weight:400; font-size:11.5px}
.verdict dl{margin:10px 0 0; padding-top:10px; border-top:1px solid var(--border); display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:12.5px}
.verdict dt{color:var(--muted-foreground); font-size:11.5px; white-space:nowrap}
.verdict dd{margin:0; color:var(--ink); font-weight:600; line-height:1.45}
.peek-sum{display:none}
.ask-btn{display:none}
@media (min-width:820px){
  :root{--card-w:392px; --sheet-w:calc(var(--card-w) + 28px)}
  body.no-detail{--sheet-w:0px}
  .type-filter{left:calc((100vw - var(--sheet-w)) / 2)}
  .sheet{left:0; width:auto; background:none; border-left:0; pointer-events:none; transform:none!important; display:block}
  .sheet > *{pointer-events:auto}
  .grip{display:none}
  .dial{position:absolute; left:20px; right:calc(var(--sheet-w) + 8px); max-width:720px; margin-inline:auto; bottom:18px; padding:12px 20px 2px;
    background:color-mix(in srgb, var(--paper-hi) 95%, transparent); border:1px solid var(--border-strong); border-radius:16px;
    box-shadow:0 10px 30px rgba(35,42,40,.12); backdrop-filter:blur(8px)}
  .dial-head{display:flex; align-items:baseline; gap:14px; min-width:0}
  .dial-say{margin:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
  .dial input[type=range]{margin-top:8px}
  .ticks{height:38px}
  .sheet-body{position:absolute; top:76px; right:14px; bottom:14px; width:var(--card-w); background-color:var(--paper-hi);
    border:1px solid var(--border-strong); border-radius:16px; box-shadow:0 10px 32px rgba(35,42,40,.14)}
  body.no-detail .sheet-body{display:none}
  .credit{bottom:auto; top:122px}
  .stamp{bottom:150px}
}
@media (min-width:820px) and (max-width:1099px){ :root{--card-w:320px} }
@media (max-width:819px){
  .type-filter{top:70px; left:12px; right:12px; transform:none; justify-content:flex-start}
  .detail-close{display:none}
  .dial{padding:10px 18px 0}
  .dial-say{display:none}
  .ticks{height:34px}
  .sheet[data-snap="peek"]{--snap:calc(100% - 172px)}
  .sheet{transform:translateY(var(--snap, calc(100% - 172px)))}
  .sheet.closed{transform:translateY(var(--snap, calc(100% - 172px)))}
  .peek-sum:not([hidden]){display:flex; align-items:baseline; gap:10px; width:100%; padding:4px 18px 12px; border:0; background:none;
    font:inherit; text-align:left; cursor:pointer; border-bottom:1px solid var(--border)}
  .peek-sum b{font-family:Hahmlet,serif; font-size:17px; font-weight:600; color:var(--ink); white-space:nowrap}
  .peek-sum span{font-size:13px; color:var(--seal); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  .credit{bottom:calc(172px + 12px)}
}

/* 샘플 손질 — 「여행 정보」로 옮긴 줄의 여백, 잘리던 절기 눈금, 재서 맞추는 폰 접힘 높이 */
#detailGuide > .facts, #detailGuide > .checked, #detailGuide > .sun, #detailGuide > .far-note{margin-left:24px; margin-right:24px}
#detailGuide > .facts{margin-top:20px}
@media (min-width:820px){ .dial{padding-bottom:6px} .ticks{height:42px} }
@media (max-width:819px){
  .ticks{height:40px}
  .sheet[data-snap="peek"]{--snap:calc(100% - var(--peek, 172px))}
  .sheet{transform:translateY(var(--snap, calc(100% - var(--peek, 172px))))}
  .sheet.closed{transform:translateY(var(--snap, calc(100% - var(--peek, 172px))))}
  .credit{bottom:calc(var(--peek, 172px) + 12px)}
}

/* 대표 풍경 — 과거 절정 참고사진(Instagram 공식 임베드) */
.featured-view{margin:18px 0 6px}
.featured-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 1px 10px}
.featured-head p{display:flex; align-items:baseline; gap:8px; margin:0}
.featured-head span{color:var(--seal); font-size:11px; letter-spacing:.12em}
.featured-head b{color:var(--ink); font-family:Hahmlet,serif; font-size:15.5px; font-weight:600}
.featured-head nav{display:flex; gap:8px; flex:none}
.featured-head nav a:not([hidden]) + a:not([hidden])::before{content:"·"; margin-right:8px; color:#A9AFAC}
.featured-head a{color:#76817D; font-size:11px; text-decoration:none}
.featured-head a:hover, .featured-head a:focus-visible{color:var(--seal); text-decoration:underline; text-underline-offset:3px}
.featured-media{position:relative; overflow:hidden; width:100%; height:min(500px, 62vh); border:1px solid var(--border-strong); border-radius:14px; background:#ECEEEB}
.featured-frame{display:block; width:100%; height:100%; border:0; background:#fff}
.featured-note{margin:8px 2px 0; color:var(--muted-foreground); font-size:11px; line-height:1.6}
.featured-rights{margin:8px 0 0; padding:9px 11px; border-radius:10px; background:#F1F2EE; color:var(--muted-foreground); font-size:10.5px; line-height:1.6}
@media (max-width:560px){ .featured-media{height:min(480px, 58vh)} }
.featured-view{scroll-margin-top:72px}   /* 탭 머리(붙어 있는 줄) 밑으로 숨지 않게 */

/* 유형 칩 — 지역 앞에 작게(v6) */
.place-type{display:inline-block; margin-right:8px; padding:2px 9px; border-radius:999px; background:#F6E6E1; color:var(--seal);
  font-size:11.5px; font-weight:600; letter-spacing:0; vertical-align:1px}

/* 임베드 중단 요청 — 다른 분들의 게시물 옆에 작게 */
.cheop-note{margin:10px 0 0; font-size:11px; line-height:1.6; color:var(--muted-foreground)}
.cheop-rm{color:inherit; text-decoration:underline; text-underline-offset:2px; margin-left:2px}