@import url('tokens.css');

/* ══════════════════════════════════════════════════════════════
   명소 낱장 — 검색으로 들어오는 사람이 먼저 보는 자리.

   지도가 아니라 글이다. 웹지엘이 없는 기기도, 크롤러도 여기서
   같은 것을 읽는다. 그래서 자바스크립트 없이 다 읽혀야 한다.
   ══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--foreground);
  font-family:"Gowun Batang","Nanum Myeongjo",serif;
  font-size:16px; line-height:1.75;
}
a{color:inherit}

.wrap{max-width:680px; margin:0 auto; padding:0 22px 72px}

/* ── 머리 ── */
.top{display:flex; align-items:center; gap:12px; padding:22px 0 34px}
.top a{display:flex; align-items:center; gap:12px; text-decoration:none}
.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:6px 8px; font-size:14px; letter-spacing:.08em;
}
.top b{font-family:Hahmlet,serif; font-weight:600; font-size:17px; letter-spacing:.24em}
.top span{font-size:11.5px; color:var(--muted-foreground); letter-spacing:.14em}

/* ── 이름 ── */
.meta{margin:0; font-family:"Nanum Myeongjo",serif; font-size:12px;
  color:var(--muted-foreground); letter-spacing:.12em}
h1{
  font-family:Hahmlet,serif; font-weight:500; font-size:40px; line-height:1.12;
  margin:8px 0 6px; letter-spacing:.01em;
}
h1 .han{font-size:.38em; font-weight:400; color:var(--muted-foreground);
  letter-spacing:.16em; margin-left:.5em; vertical-align:.3em}

.verse{margin:22px 0 30px; padding-left:15px; border-left:2px solid var(--border-strong);
  color:var(--ink-2); font-size:17px}

/* ── 날짜 세 칸 — 상자를 그리지 않는다. 칸을 그리면 표가 되고 표는 대시보드다. ── */
.dates{display:grid; grid-template-columns:repeat(3,1fr);
  margin:0 0 34px; padding:16px 0 4px; border-top:1px solid var(--border-strong)}
.dates div{padding:0 16px 0 0}
.dates div+div{padding-left:16px; border-left:1px solid var(--border)}
.dates dt{font-family:"Nanum Myeongjo",serif; font-size:10.5px; letter-spacing:.18em;
  color:var(--muted-foreground); margin:0 0 6px}
.dates dd{margin:0; font-family:Hahmlet,serif; font-size:25px; font-weight:500;
  line-height:1.14; font-variant-numeric:tabular-nums}
.dates dd small{display:block; font-size:11px; font-weight:400; line-height:1.4;
  color:var(--muted-foreground); font-family:"Nanum Myeongjo",serif; letter-spacing:.06em}

/* ── 항목 ── */
.facts{margin:0 0 34px; display:grid; grid-template-columns:auto 1fr; gap:12px 18px}
.facts dt{font-family:"Nanum Myeongjo",serif; font-size:11.5px; letter-spacing:.14em;
  color:var(--muted-foreground); padding-top:4px; white-space:nowrap}
.facts dd{margin:0; color:var(--ink-2)}
.crowd{display:inline-flex; gap:3px; margin-left:8px; vertical-align:1px}
.crowd i{width:4px; height:11px; background:var(--border-strong); display:block; border-radius:1px}
.crowd i.f{background:var(--seal)}

h2{font-family:Hahmlet,serif; font-weight:500; font-size:19px; margin:0 0 14px;
  letter-spacing:.02em; display:flex; align-items:center; gap:10px}
h2 .seal{padding:2px 8px; font-size:11px; letter-spacing:.18em; border-radius:3px}
section{margin:0 0 38px}

/* ── 줄 목록 — 카드가 여럿이면 눈이 그만큼 쪼개진다 ── */
.rows{display:block}
.rows a{
  display:grid; grid-template-columns:1fr auto; column-gap:16px; row-gap:4px;
  padding:13px 0; border-bottom:1px solid var(--border); text-decoration:none;
}
.rows a:last-child{border-bottom:0}
.rows a:hover .nm{color:var(--seal)}
.nm{font-family:Hahmlet,serif; font-size:17.5px; font-weight:500; transition:color .15s}
.rg{grid-column:1; font-family:"Nanum Myeongjo",serif; font-size:11px;
  letter-spacing:.1em; color:var(--muted-foreground)}
.on{grid-column:2; grid-row:1; font-size:13.5px; color:var(--ink-2); align-self:center;
  font-variant-numeric:tabular-nums; white-space:nowrap}

.go{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 18px; font-size:14.5px; transition:background .15s;
}
.go:hover{background:var(--muted)}
.go em{font-style:normal; color:var(--muted-foreground); font-size:12px}

.note{margin:0; font-size:12.5px; line-height:1.7; color:var(--muted-foreground)}
.note + .note{margin-top:10px}
.ad{margin:12px 0 0; font-size:11.5px; line-height:1.6; color:var(--muted-foreground)}
footer{margin-top:46px; padding-top:22px; border-top:1px solid var(--border)}

@media (max-width:560px){
  h1{font-size:32px}
  .dates dd{font-size:21px}
  .wrap{padding:0 18px 56px}
}

/* ── 광고 자리 ──
   남의 코드가 들어오는 자리다. '광고'라고 먼저 말한다 — 표기가 먼저다. */
.ad-blk{margin:0 0 38px}
.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)}
.ad-slot img,.ad-slot iframe{max-width:100%; display:block; border:0}

/* ══ 畵帖 — 요즘 이 산 ══════════════════════════════════════════
   지도 시트와 같은 화첩이되, 낱장은 넓으니 옆으로 밀지 않고 편다.
   접혀 있는 동안 사진은 담채로 물러나 있고, 고른 면만 색이 돈다.
════════════════════════════════════════════════════════════════ */
.cheop-open{margin:0 0 18px}
.cheop-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 15px}
.leaf{
  border:0; background:none; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; display:block; width:100%;
}
.leaf-pic{
  display:block; position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--muted); 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.on .leaf-pic{border-color:var(--seal)}
.leaf-pic.instagram{display:grid; place-items:center}
.leaf-seal{font-family:Hahmlet,serif; font-size:21px; color:var(--paper-hi);
  background:var(--seal); width:38px; height:38px; display:grid; place-items:center;
  border-radius:3px; opacity:.86}
.leaf-mark{position:absolute; left:8px; bottom:8px; width:21px; height:21px;
  display:grid; place-items:center; border-radius:50%; background:#1E2422B8;
  color:#fff; font-size:9px; line-height:1; padding-left:1px}
.leaf-len{position:absolute; right:8px; bottom:8px; padding:1px 6px; border-radius:3px;
  background:#1E2422B8; color:#fff; font-size:10.5px; font-variant-numeric:tabular-nums}
.leaf-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:9px; font-family:Hahmlet,serif; font-size:14px;
  line-height:1.45; transition:color .15s}
.leaf:hover .leaf-t{color:var(--seal)}
.leaf-s{display:block; margin-top:4px; font-family:"Nanum Myeongjo",serif;
  font-size:11px; letter-spacing:.05em; color:var(--muted-foreground);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.pane-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px}
.pane-head b{font-family:Hahmlet,serif; font-weight:500; font-size:16px; line-height:1.45}
.pane-head span{font-family:"Nanum Myeongjo",serif; font-size:11.5px;
  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:12px; padding:4px 11px; cursor:pointer; 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:6px; background:var(--paper-hi)}
.pane-frame.ratio iframe{position:absolute; inset:6px;
  width:calc(100% - 12px); height:calc(100% - 12px);
  border:0; border-radius:2px; background:#000}
.pane-frame.ig{background:var(--paper-hi)}
.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:28px 20px; font-size:13.5px; line-height:1.7;
  color:var(--muted-foreground); text-align:center}
.pane-out{margin:9px 0 0; font-size:12.5px}
.pane-out a{color:var(--ink-2); text-decoration:none; letter-spacing:.04em}
.pane-out a:hover{color:var(--seal)}

.cheop-more{display:flex; gap:9px; margin:18px 0 0; flex-wrap:wrap}
.cheop-more a{display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  border:1px solid var(--border-strong); border-radius:999px; padding:6px 13px;
  color:var(--ink-2); font-size:13px; font-family:Hahmlet,serif;
  transition:border-color .15s, color .15s}
.cheop-more a:hover{border-color:var(--seal); color:var(--seal)}
.cheop-more em{font-style:normal; font-family:"Nanum Myeongjo",serif; font-size:11px;
  letter-spacing:.1em; color:var(--muted-foreground)}
.cheop-note{margin:12px 0 0; font-size:12px; line-height:1.6; color:var(--muted-foreground)}

@media (max-width:560px){
  .cheop-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px}
  .leaf-t{font-size:13px}
}

/* 종이는 흔들리지 않는다 — 이 설정을 켠 사람에겐 색만 돌아온다 */
@media (prefers-reduced-motion:reduce){
  .leaf-pic img{transition:none}
  .leaf:hover .leaf-pic img,.leaf:focus-visible .leaf-pic img,.leaf.on .leaf-pic img{
    transform:none}
  .leaf-wash{transition:none}
}

/* 곁말 — 계산해서 나온 값 옆에 붙는 한마디. 본문과 무게를 나눈다. */
.dim{color:var(--muted-foreground); font-size:.86em}

/* ── 이 산에서 ── 표를 그리지 않는다. 한자 한 글자가 무엇인지 말한다. */
.nears{display:block}
.near{display:grid; grid-template-columns:22px 1fr; column-gap:14px; row-gap:4px;
  padding:13px 0 14px; border-bottom:1px solid var(--border)}
.near:last-child{border-bottom:0}
.near .nk{grid-row:1 / span 3; align-self:start; margin-top:2px;
  font-family:Hahmlet,serif; font-size:14px; color:var(--ink-3); text-align:center}
.near b{grid-column:2; font-weight:500; font-size:17px; font-family:Hahmlet,serif}
.near b a{text-decoration:none; transition:color .15s}
.near b a:hover{color:var(--seal)}
.near .nn{grid-column:2; font-size:15px; line-height:1.7; color:var(--ink-2)}
.near em{grid-column:2; font-style:normal; font-family:"Nanum Myeongjo",serif;
  font-size:11px; letter-spacing:.08em; color:var(--muted-foreground)}

/* 한글은 띄어쓰기에서만 줄을 바꾼다 — 폰에서 "10월 23 / 일", "낮 11.0시 / 간", "시내버 / 스"가 됐다.
   긴 설명은 그대로 접히고, 날짜 셋만 한 줄로 묶는다 */
body{word-break:keep-all; overflow-wrap:break-word}
.dates dd{white-space:nowrap}
@media (max-width: 420px){ .dates dd{font-size:18px} .dates div+div{padding-left:12px} .dates div{padding-right:10px} }
.cheop-more .cheop-tag{align-self:center; font-size:12px; color:var(--muted-foreground)}

/* 임베드 중단 요청 — 다른 분들의 게시물 옆에 작게 */
.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}