:root {
  --brand-blue:#3B82F6; --brand-cyan:#89DDFF;
  --bg-base:#FFFFFF; --bg-elev-1:#FBFBFB; --bg-elev-2:#F5F5F7;
  --text-primary:#1E293B; --text-body:#334155; --text-secondary:#64748B; --text-tertiary:#9CA3AF;
  --border-subtle:rgba(0,0,0,0.06); --divider:#EFEFEF;
  --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:100px;
  --photo-bottom-grad:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.72) 100%);
  --shadow-card:0 4px 16px rgba(15,23,42,0.06);
  --shadow-pop:0 12px 32px rgba(15,23,42,0.10);
  --ease-out:cubic-bezier(0.33,1,0.68,1); --t-fast:200ms;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  background:var(--bg-base); color:var(--text-primary); line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:inherit; border:0; background:none; cursor:pointer; color:inherit; }

nav.top {
  position:fixed; top:0; left:0; right:0; z-index:100; height:64px;
  padding:0 clamp(20px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-subtle);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-cta {
  background:linear-gradient(135deg,#3B82F6 0%,#89DDFF 100%); color:#fff;
  font-weight:700; font-size:14px; padding:9px 20px; border-radius:var(--r-pill);
  transition:opacity var(--t-fast), transform 120ms;
}
.nav-cta:hover { opacity:0.88; }
.nav-cta:active { transform:scale(0.98); }

.section { max-width:1200px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(20px,4vw,32px); }

/* ─── HERO — 홈과 동일 문법: 풀블리드 대표 사진 + 좌측 화이트 그라데이션 (사진 확대감 줄인 낮은 높이) ─── */
.hero {
  position:relative; min-height:clamp(380px,46vh,500px);
  display:flex; align-items:center;
  padding:84px clamp(20px,4vw,32px) clamp(36px,5vw,52px);
  overflow:hidden;
}
/* 사진은 우측 60%에만 — 와이드 영역 전체를 채울 때의 과한 확대(잘림)를 줄여 피사체가 알아보이게 */
.hero { background:#FFFFFF; }
.hero-photo { position:absolute; top:0; bottom:0; right:0; left:40%; background-color:#FFFFFF; background-size:cover; background-position:center; }
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 82%, rgba(255,255,255,0.35) 100%),
    linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 37%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.35) 57%, rgba(255,255,255,0) 68%);
}
.hero-inner { max-width:1200px; width:100%; margin:0 auto; position:relative; z-index:1; }
.hero-content { max-width:580px; }
h1.hero-title {
  font-size:clamp(30px,4.4vw,52px); font-weight:800; line-height:1.1;
  letter-spacing:-1.8px; color:#0F172A;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.hero-title-en { font-size:0.42em; font-weight:600; color:var(--text-tertiary); letter-spacing:-0.02em; }
.hero-hook {
  margin-top:14px; font-size:clamp(16px,2vw,22px); font-weight:700;
  color:#0F172A; letter-spacing:-0.5px; line-height:1.5; max-width:560px; word-break:keep-all;
}
.hero-info { margin-top:clamp(20px,2.6vw,30px); display:flex; flex-direction:column; gap:7px; }
.hero-info-row { display:flex; gap:14px; font-size:clamp(12.5px,1.3vw,14.5px); align-items:baseline; }
.hero-info-label { flex:0 0 auto; font-weight:800; color:var(--brand-blue); letter-spacing:0.02em; }
.hero-info-row span:last-child { color:var(--text-body); font-weight:500; word-break:keep-all; }
.hero-credit {
  position:absolute; bottom:10px; right:12px; z-index:2;
  background:rgba(80,80,80,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:rgba(255,255,255,0.88); font-size:9px; line-height:1;
  padding:4px 9px; border-radius:999px; white-space:nowrap; max-width:70%;
  overflow:hidden; text-overflow:ellipsis;
}

.section-eyebrow {
  display:inline-block; font-size:12px; font-weight:800;
  background:linear-gradient(135deg,#3B82F6 0%,#89DDFF 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:12px;
}
.section-title {
  font-size:clamp(20px,3vw,32px); font-weight:800; letter-spacing:-1.2px; line-height:1.2;
  color:var(--text-primary); word-break:keep-all;
}
.section-head { margin-bottom:28px; }

/* ─── 명소 카드 6개 ─── */
.lm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,36px) clamp(14px,1.8vw,22px); }
/* min-width:0 필수 — 그리드 아이템 기본값(auto)이면 nowrap 주소 줄이 열을 밀어내 그리드가 우측으로 넘침(서울·오사카에서 실제 발생) */
.lm { display:flex; flex-direction:column; min-width:0; }
.lm-photo-card {
  position:relative; aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg,#475569,#1E293B);
  transition:transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.lm:hover .lm-photo-card { transform:translateY(-4px); box-shadow:var(--shadow-pop); }
@media (prefers-reduced-motion: reduce) { .lm:hover .lm-photo-card { transform:none; } }
.lm-photo-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lm-photo-card::after { content:''; position:absolute; inset:0; background:var(--photo-bottom-grad); }
.lm-tag {
  position:absolute; top:14px; left:14px; z-index:1;
  background:rgba(255,255,255,0.95); color:var(--brand-blue);
  font-size:11px; font-weight:800; padding:5px 10px; border-radius:var(--r-pill); letter-spacing:0.02em;
}
.lm-foot {
  position:absolute; left:16px; right:14px; bottom:14px; z-index:1;
  display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
}
.lm-foot > div:first-child { min-width:0; }   /* 영문명 말줄임이 실제로 작동하도록 */
.lm-foot h2 { font-size:clamp(16px,1.8vw,20px); font-weight:800; letter-spacing:-0.5px; line-height:1.15; color:#fff; word-break:keep-all; }
.lm-name-en {
  display:block; font-size:11px; font-weight:500; color:rgba(255,255,255,0.78); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.lm-credit {
  flex-shrink:1; min-width:0;
  color:rgba(255,255,255,0.5); font-size:9px; line-height:1.4; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%;
}
.lm-desc {
  font-size:clamp(13px,1.2vw,14.5px); color:var(--text-body); font-weight:500;
  line-height:1.7; margin-top:14px; word-break:keep-all;
}
.lm-meta {
  font-size:12px; font-weight:500; color:var(--text-tertiary); margin-top:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ─── 남은 명소 유도 — 풀폭 밴드로 위아래 구분 ─── */
.more-wrap { background:var(--bg-elev-2); }
.more-band {
  max-width:1200px; margin:0 auto;
  padding:clamp(36px,5vw,56px) clamp(20px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,36px);
}
.more-left { display:flex; align-items:flex-end; gap:clamp(16px,2.4vw,28px); min-width:0; }  /* 숫자·문구 하단 정렬 */
.more-band strong.count {
  font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-2px; line-height:1; flex-shrink:0;
  background:linear-gradient(135deg,#3B82F6 0%,#89DDFF 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.more-band h2 { font-size:clamp(17px,2.2vw,24px); font-weight:800; letter-spacing:-0.8px; word-break:keep-all; line-height:1.2; margin-bottom:3px; }
.dl-btn {
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 24px; border-radius:var(--r-pill);
  background:linear-gradient(135deg,#3B82F6 0%,#89DDFF 100%); color:#fff;
  font-size:14px; font-weight:700;
  transition:opacity var(--t-fast), transform 120ms;
}
.dl-btn:hover { opacity:0.9; transform:translateY(-2px); }
.dl-btn:active { transform:scale(0.98); }

/* ─── 다른 도시 — 홈과 동일한 드래그 캐러셀 ─── */
.dest-tabs { display:flex; gap:8px; margin-bottom:24px; }
.dest-tab {
  height:clamp(30px,3vw,38px); padding:0 clamp(12px,1.4vw,18px);
  border-radius:var(--r-pill); background:var(--bg-elev-2);
  font-size:clamp(12px,1.1vw,14px); font-weight:700; color:var(--text-secondary);
  transition:background var(--t-fast), color var(--t-fast);
}
.dest-tab.active { background:linear-gradient(135deg,#3B82F6 0%,#89DDFF 100%); color:#fff; }
.dest-grid {
  --dest-card-w: calc(18vw - 12px);
  width:90vw; margin-left:calc(50% - 45vw);
  overflow:hidden; padding:14px 0;
  cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.dest-grid.is-dragging { cursor:grabbing; }
.dest-grid.is-dragging .dest-card { pointer-events:none; }
.dest-track { display:flex; flex-wrap:nowrap; gap:14px; width:max-content; will-change:transform; }
.dest-card {
  position:relative; flex:0 0 var(--dest-card-w); width:var(--dest-card-w);
  height:calc(var(--dest-card-w) * 4 / 3);
  border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg,#475569,#1E293B);
  user-select:none; -webkit-user-select:none;
}
.dest-card img.dest-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.dest-card::after { content:''; position:absolute; inset:0; z-index:0; background:var(--photo-bottom-grad); }
.dest-info { position:absolute; bottom:26px; left:16px; right:16px; z-index:1; color:#fff; }
.dest-name-kr { font-size:clamp(14px,1.8vw,20px); font-weight:800; letter-spacing:-0.5px; line-height:1.1; display:block; }
.dest-name-en { font-size:11px; font-weight:500; color:rgba(255,255,255,0.78); display:block; }
.dest-credit {
  position:absolute; bottom:10px; left:16px; right:16px; z-index:1;
  color:rgba(255,255,255,0.5); font-size:9px; line-height:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ─── CTA (홈과 동일) ─── */
.cta-wrap { background:linear-gradient(135deg,#1E40AF 0%,#3B82F6 50%,#89DDFF 100%); padding:0 clamp(20px,4vw,32px); }
.cta { max-width:1200px; margin:0 auto; padding:clamp(56px,7vw,88px) 0; text-align:center; color:#fff; }
.cta-title { font-size:clamp(30px,4vw,48px); font-weight:800; letter-spacing:-1.8px; line-height:1.15; }
.store-buttons { display:flex; gap:clamp(22px,2.6vw,32px); justify-content:center; flex-wrap:wrap; align-items:center; margin-top:clamp(30px,3.6vw,42px); }
.store-btn { display:inline-flex; transition:transform var(--t-fast), filter var(--t-fast); }
.store-btn:hover { transform:translateY(-2px); filter:drop-shadow(0 8px 16px rgba(0,0,0,0.18)); }
.store-badge-img { height:clamp(38px,3.8vw,52px); width:auto; display:block; }

/* ─── FOOTER (도시 링크는 한 줄 인라인 스트립) ─── */
footer { background:var(--bg-base); padding:clamp(40px,5vw,56px) clamp(20px,4vw,32px) clamp(28px,3vw,40px); border-top:1px solid var(--border-subtle); }
.footer-grid {
  max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start;
  gap:clamp(28px,4vw,56px); padding-bottom:28px; border-bottom:1px solid var(--border-subtle);
}
.footer-company { flex:1; }
.footer-brand-wrap { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.footer-tagline { font-size:13px; font-weight:500; color:var(--text-secondary); line-height:1.6; max-width:280px; }
.footer-policies { display:flex; flex-direction:column; gap:6px; align-items:flex-start; flex-shrink:0; }
.footer-link { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); padding:6px 0; transition:color var(--t-fast); }
.footer-link:hover { color:var(--brand-blue); }
.footer-cities-strip {
  max-width:1200px; margin:0 auto; padding:16px 0 0;
  font-size:12.5px; font-weight:500; color:var(--text-tertiary); line-height:2;
  word-break:keep-all;
}
.footer-cities-strip .strip-label { font-weight:800; color:var(--text-secondary); margin-right:10px; }
.footer-cities-strip a { color:var(--text-secondary); transition:color var(--t-fast); }
.footer-cities-strip a:hover { color:var(--brand-blue); }
.footer-meta { max-width:1200px; margin:0 auto; padding-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-tertiary); }

.reveal { opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.7,0.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition:none; transform:none; opacity:1; } }

@media (max-width: 960px) {
  .lm-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  .lm-grid { grid-template-columns:1fr; }
  .dest-grid { --dest-card-w: 56vw; }
  .hero { min-height:clamp(420px,56vh,540px); }
  .hero-photo { left:0; }   /* 모바일은 세로 화면이라 풀폭이어도 잘림이 적음 */
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.82) 74%, rgba(255,255,255,0.95) 100%),
      linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 40%, rgba(255,255,255,0.25) 70%, rgba(255,255,255,0.05) 100%);
  }
  .more-band { flex-direction:column; text-align:center; gap:16px; }
  .more-left { flex-direction:column; gap:10px; }
  .footer-grid { flex-direction:column; }
  .footer-meta { flex-direction:column; gap:8px; align-items:flex-start; }
}

/* ══════════ v4 (2026-10-19) — 장소 페이지 · 전체 명소 목록 · 도시 목록 · 외국어 ══════════ */
/* 일본어·중국어는 띄어쓰기가 없어 keep-all 이면 줄이 안 바뀐다 → 글자 단위 줄바꿈 */
html[lang="ja"] *, html[lang^="zh"] * { word-break:normal !important; overflow-wrap:anywhere; }
html[lang="ja"] body { font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,system-ui,sans-serif; }
html[lang^="zh"] body { font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif; }

.nav-right { display:flex; align-items:center; gap:clamp(10px,1.6vw,18px); }
.lang-sw { display:flex; gap:clamp(8px,1vw,12px); font-size:13px; font-weight:600; color:var(--text-secondary); }
.lang-sw a { padding:4px 0; transition:color var(--t-fast); }
.lang-sw a:hover { color:var(--brand-blue); }
.lang-sw a[aria-current="page"] { color:var(--brand-blue); }
.lang-sw .short { display:none; }
@media (max-width: 640px) {
  .lang-sw .long { display:none; }
  .lang-sw .short { display:inline; }
  .nav-cta { padding:8px 14px; font-size:13px; }
}
a:focus-visible, button:focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; border-radius:6px; }

.crumb { font-size:13px; color:var(--text-secondary); margin-bottom:12px; display:flex; flex-wrap:wrap; gap:6px; }
.crumb a:hover { color:var(--brand-blue); }
.crumb span[aria-hidden] { color:var(--text-tertiary); }
.hero-sub-name { display:block; margin-top:6px; font-size:clamp(14px,1.5vw,16px); font-weight:600; color:var(--text-secondary); letter-spacing:-0.2px; }

/* 명소 카드가 링크가 됨 */
a.lm { color:inherit; }
a.lm:hover h2 { text-decoration:underline; text-underline-offset:3px; }

/* 전체 명소 목록 */
.all-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px 14px; }
.all-item { display:flex; flex-direction:column; gap:2px; padding:12px 16px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--bg-base); transition:border-color var(--t-fast), box-shadow var(--t-fast); min-width:0; }
.all-item:hover { border-color:rgba(59,130,246,0.35); box-shadow:var(--shadow-card); }
.all-name { font-size:15px; font-weight:700; color:var(--text-primary); line-height:1.35; }
.all-sub { font-size:12px; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.all-meta { font-size:12px; color:var(--brand-blue); font-weight:600; margin-top:2px; }

/* 장소 페이지 */
.lp-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }
.lp-block + .lp-block { margin-top:clamp(32px,4vw,48px); }
.lp-title { font-size:clamp(18px,2.2vw,24px); font-weight:800; letter-spacing:-0.6px; color:var(--text-primary); margin-bottom:14px; word-break:keep-all; }
.lp-about p { font-size:clamp(14.5px,1.35vw,16px); line-height:1.85; color:var(--text-body); word-break:keep-all; }
.lp-about p + p { margin-top:10px; }
.lp-count { font-size:13px; font-weight:700; color:var(--brand-blue); margin:-6px 0 12px; }
.stories { list-style:none; border-top:1px solid var(--divider); }
.story { display:flex; gap:12px; align-items:baseline; padding:12px 2px; border-bottom:1px solid var(--divider); }
.story-kind { flex:0 0 64px; font-size:11.5px; font-weight:800; color:var(--brand-blue); letter-spacing:0.02em; }
.story-text { flex:1; min-width:0; font-size:14.5px; line-height:1.5; color:var(--text-primary); font-weight:600; word-break:keep-all; }
.story-spot { display:block; font-size:12.5px; font-weight:500; color:var(--text-secondary); margin-bottom:1px; }
.story-dur { flex:0 0 auto; font-size:12.5px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.preview { background:var(--bg-elev-2); border-radius:var(--r-xl); padding:clamp(20px,3vw,30px); }
.preview p { font-size:clamp(14.5px,1.35vw,16px); line-height:1.9; color:var(--text-body); word-break:keep-all; }
.preview .preview-more { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid rgba(0,0,0,0.06); }
.preview .preview-note { font-size:13px; color:var(--text-secondary); }
.facts { display:flex; flex-direction:column; border-top:1px solid var(--divider); }
.fact { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; padding:11px 2px; border-bottom:1px solid var(--divider); font-size:14px; }
.fact dt { font-weight:800; color:var(--text-secondary); font-size:12.5px; padding-top:1px; }
.fact dd { color:var(--text-body); line-height:1.6; word-break:keep-all; }
.lp-side { position:sticky; top:84px; }
@media (max-width: 960px) {
  .lp-grid { grid-template-columns:1fr; }
  .lp-side { position:static; }
}

/* 도시 목록(허브) */
.hub-head { max-width:1200px; margin:0 auto; padding:calc(64px + clamp(32px,5vw,56px)) clamp(20px,4vw,32px) 0; }
.hub-head h1 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-1.4px; line-height:1.15; color:#0F172A; word-break:keep-all; }
.hub-lead { margin-top:12px; font-size:clamp(14.5px,1.6vw,17px); color:var(--text-secondary); max-width:62ch; line-height:1.7; word-break:keep-all; }
.hub-group-title { font-size:clamp(18px,2.4vw,24px); font-weight:800; letter-spacing:-0.6px; color:var(--text-primary); margin-bottom:6px; }
.hub-group-note { font-size:13px; color:var(--text-secondary); margin-bottom:18px; }
.city-grid { display:grid; gap:clamp(14px,2vw,20px); grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.city-card { display:flex; flex-direction:column; background:var(--bg-base); border:1px solid var(--border-subtle); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease; min-width:0; }
.city-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-pop); }
@media (prefers-reduced-motion: reduce) { .city-card:hover { transform:none; } }
.city-photo { position:relative; aspect-ratio:16/10; background:linear-gradient(160deg,#475569,#1E293B); }
.city-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.city-photo .city-credit { position:absolute; right:8px; bottom:6px; max-width:70%; font-size:9px; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.38); padding:2px 7px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.city-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.city-name { font-size:18px; font-weight:800; color:var(--text-primary); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; letter-spacing:-0.4px; }
.city-en { font-size:12px; font-weight:500; color:var(--text-secondary); }
.city-hook { font-size:13.5px; color:var(--text-secondary); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:keep-all; }
.city-count { font-size:12.5px; font-weight:700; color:var(--brand-blue); }
.how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); }
.how-item { background:var(--bg-elev-2); border-radius:var(--r-xl); padding:clamp(18px,2.4vw,24px); }
.how-item strong { display:block; font-size:16px; font-weight:800; color:var(--text-primary); margin-bottom:6px; letter-spacing:-0.3px; }
.how-item p { font-size:14px; color:var(--text-body); line-height:1.7; word-break:keep-all; }
@media (max-width: 760px) { .how { grid-template-columns:1fr; } }
.footer-lang a { color:var(--text-secondary); }
.footer-lang a:hover { color:var(--brand-blue); }

/* ══════════ v4b (2026-10-19) — 소유자 「나열이 좀 적었으면」: 전체 목록·긴 이야기 목록은 접어 둔다 ══════════ */
details.all-more, details.stories-more { margin-top:clamp(22px,3vw,32px); }
details.stories-more { margin-top:0; }
details.all-more > summary, details.stories-more > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--r-pill); background:var(--bg-elev-2);
  font-size:14px; font-weight:700; color:var(--text-primary); transition:background var(--t-fast);
}
details.stories-more > summary { height:auto; padding:12px 2px; border-radius:0; background:none; color:var(--brand-blue); font-size:13.5px; }
details.all-more > summary::-webkit-details-marker, details.stories-more > summary::-webkit-details-marker { display:none; }
details.all-more > summary::after, details.stories-more > summary::after { content:'▾'; font-size:12px; color:var(--text-secondary); transition:transform var(--t-fast); }
details[open].all-more > summary::after, details[open].stories-more > summary::after { transform:rotate(180deg); }
details.all-more > summary:hover { background:#ECEEF2; }
details.stories-more[open] > summary { display:none; }
.all-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.all-chip { font-size:13.5px; font-weight:600; color:var(--text-body); padding:7px 14px; border:1px solid var(--border-subtle); border-radius:var(--r-pill); background:var(--bg-base); transition:border-color var(--t-fast), color var(--t-fast); }
.all-chip:hover { border-color:rgba(59,130,246,0.4); color:var(--brand-blue); }