/*
 * 여행 노트 스타일 — 오너 목업(아티팩트 note/note.css)을 옮겼다. 검색용 글 페이지: 답 먼저, 페이지마다 H1 하나, 넓은 화면엔 목차 기둥.
 * 바뀐 점: 글꼴은 Pretendard 동적 부분집합(CDN, 쓰는 글자만 받음) · 밝은 화면만(사이트 전체와 같음) · 자리표시 사진 → 실제 사진.
 */
:root{
  --blue:#0097E0; --blue-ink:#0072AB; --blue-50:#E8F5FC;
  --bg:#FFFFFF; --bg-2:#F4F7FA; --fg:#141B26; --fg-2:#3F4856; --fg-3:#687383; --line:#E3E8EE; --card:#FFFFFF;
  --c-season:#C2410C; --c-season-bg:#FFF1E6;
  --c-city:#0072AB; --c-city-bg:#E8F5FC;
  --c-fest:#7C3AED; --c-fest-bg:#F3EEFF;
  --c-benefit:#15803D; --c-benefit-bg:#E7F6EC;
  --c-story:#7A5A12; --c-story-bg:#FBF3DC;
  --warn-bg:#FFF6DA; --warn-fg:#6B5300;
  --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);letter-spacing:-.015em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;overflow-x:clip;font-size:16px}  /* break-word: '연풍순교성지·목도양조장·수옥폭포에서'처럼 칸보다 긴 낱말만 꺾는다 (iPhone 360px 3px 넘침, 2026-10-01 QA) */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:24px}
@media (max-width:760px){.wrap{padding-inline:16px}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:none;padding-inline:24px}  /* 소개 페이지 상단 바와 같은 폭 — 탭을 오갈 때 로고·버튼이 튀지 않게 */
@media (max-width:760px){.top .wrap{padding-inline:16px}}
.top .logo{height:22px;width:auto}
.top nav{display:flex;gap:28px;font-size:15px;font-weight:700;color:var(--fg-2)}
.top nav a[aria-current="page"]{color:var(--fg);font-weight:800}
.top nav a:hover{color:var(--fg)}
.cta{height:40px;padding:0 18px;border-radius:12px;background:var(--blue);color:#fff;font-size:15px;font-weight:800;display:inline-flex;align-items:center;flex-shrink:0}
/* 탭 3개(서비스 소개·여행 노트·About)는 폰에서도 그대로 — 글자·간격만 줄인다. 분류(도시·시즌…)는 탭이 아니라 페이지 안 칩 */
@media (max-width:760px){.top .wrap{gap:10px}.top .logo{height:18px}.top nav{gap:14px;font-size:14px;white-space:nowrap}.cta{height:34px;padding:0 11px;font-size:13px;border-radius:10px}}
@media (max-width:370px){.top .logo{height:16px}.top nav{gap:11px;font-size:13px}}
/* 언어 고르기 + 앱 받기 — 서비스 소개 상단 바(intro.css .ri-top-end · .ri-lang)와 같은 모양. select 는 투명하게 겹쳐 기기 기본 목록을 연다 */
.top-end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lang{position:relative;height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--fg-2);display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;cursor:pointer}
.lang:hover{border-color:var(--fg-3);color:var(--fg)}
.lang select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.lang:focus-within{outline:3px solid var(--blue);outline-offset:2px}
@media (max-width:760px){.lang{height:34px;padding:0 8px;border-radius:10px}.lang span{display:none}.top-end{gap:6px}}
/* 언어별 줄바꿈·글꼴 (외국어 노트는 /en·/ja·/zh 폴더, <html lang> 으로 가른다) — 한국어만 낱말 단위(keep-all).
 * 띄어쓰기 없는 일본어·중국어에 keep-all 이 남으면 문장이 한 덩어리로 화면 밖으로 밀린다 (서비스 소개 2026-10-01 QA 와 같은 이유) */
.nw{white-space:nowrap}  /* 외국어 "1-night 2-day"·"1泊2日"·"1晚2天" 을 한 줄로 (i18n/localize.mjs KEEP) */
html:lang(en) body{word-break:normal;overflow-wrap:break-word}
html:lang(ja) body{word-break:normal;line-break:strict;font-family:"Pretendard Variable","Pretendard","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif}
html:lang(zh) body{word-break:normal;line-break:strict;font-family:"Pretendard Variable","Pretendard","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}

/* category label */
.cat{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.02em}
.cat.season{background:var(--c-season-bg);color:var(--c-season)}
.cat.city{background:var(--c-city-bg);color:var(--c-city)}
.cat.fest{background:var(--c-fest-bg);color:var(--c-fest)}
.cat.benefit{background:var(--c-benefit-bg);color:var(--c-benefit)}
.cat.story{background:var(--c-story-bg);color:var(--c-story)}

/* photo */
.ph{position:relative;overflow:hidden;background:var(--bg-2);border-radius:16px;margin:0}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- list page ---------- */
.n-hero{padding-block:44px 8px}
.n-hero h1{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.04em}
.n-hero p{margin-top:10px;font-size:17px;color:var(--fg-2);line-height:1.6;max-width:640px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.filters a{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:15px;font-weight:700;display:inline-flex;align-items:center;color:var(--fg-2)}
.filters a[aria-current="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center;margin-top:32px;padding:24px;border-radius:28px;background:var(--bg-2)}
.feature .ph{aspect-ratio:16/10}
.feature h2{font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.3;margin-top:12px}
.feature p{margin-top:10px;color:var(--fg-2);line-height:1.6}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--fg-3);font-weight:600;margin-top:14px}
.meta b{color:var(--fg-2)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-top:56px}
.sec-h h2{font-size:24px;font-weight:800;letter-spacing:-.03em}
.sec-h a{font-size:14px;font-weight:800;color:var(--blue-ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;margin-top:20px}
.card .ph{aspect-ratio:4/3}
.card h3{font-size:18px;font-weight:800;letter-spacing:-.025em;line-height:1.4;margin-top:12px}
.card p{font-size:14px;color:var(--fg-3);line-height:1.55;margin-top:6px}
.card .cat{margin-top:14px}
.card:hover h3{color:var(--blue-ink)}
.cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.cal a{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--card)}
.cal small{font-size:12px;font-weight:800;color:var(--c-fest)}
.cal b{display:block;font-size:16px;font-weight:800;margin-top:6px}
.cal span{display:block;font-size:13px;color:var(--fg-3);margin-top:4px}
@media (max-width:900px){.feature{grid-template-columns:1fr;padding:16px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* ---------- article ---------- */
.crumb{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--fg-3);font-weight:600;padding-top:24px}
.crumb a:hover{color:var(--fg)}
.crumb span[aria-hidden]{opacity:.5}
.art{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:64px;justify-content:space-between;padding-bottom:40px}
.art-head{padding-top:18px}
.art-head h1{font-size:clamp(28px,3.8vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.28;margin-top:12px}
.art-head .dek{font-size:18px;color:var(--fg-2);line-height:1.6;margin-top:12px}
.byline{display:flex;gap:12px;align-items:center;margin-top:20px;padding:14px 0;border-block:1px solid var(--line)}
.byline .av{width:40px;height:40px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.byline .av img{width:30px}
.byline b{font-size:14px;font-weight:800;display:block}
.byline small{font-size:13px;color:var(--fg-3);font-weight:600}
.upd{margin-left:auto;font-size:12px;font-weight:800;color:var(--blue-ink);background:var(--blue-50);padding:4px 9px;border-radius:6px;white-space:nowrap}
.hero-ph{aspect-ratio:16/9;margin-top:24px}
.answer{margin-top:28px;border-radius:20px;background:var(--bg-2);padding:20px 22px}
.answer .lbl{font-size:13px;font-weight:800;color:var(--blue-ink);letter-spacing:.02em}
.answer p{margin-top:8px;font-size:17px;font-weight:600;line-height:1.65}
.answer dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0 0;font-size:15px}
.answer dt{color:var(--fg-3);font-weight:700}
.answer dd{margin:0;font-weight:700}
.body{margin-top:12px}
.body h2{font-size:25px;font-weight:800;letter-spacing:-.03em;margin-top:52px;line-height:1.35}
.body h3{font-size:19px;font-weight:800;margin-top:28px}
.body p{font-size:17px;line-height:1.8;color:var(--fg-2);margin-top:14px;max-width:68ch}
.body ul,.body ol{margin:14px 0 0;padding-left:22px;font-size:17px;line-height:1.75;color:var(--fg-2)}
.body li+li{margin-top:6px}
.body li b,.body p b{color:var(--fg)}
.tbl{margin-top:18px;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tbl th{text-align:left;font-size:13px;color:var(--fg-3);font-weight:800;background:var(--bg-2);padding:12px 14px}
.tbl td{padding:13px 14px;border-top:1px solid var(--line);font-weight:600}
.tbl td:first-child{font-weight:800}
.spot{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;margin-top:22px;align-items:start}
.spot .ph{aspect-ratio:1}
.spot h3{margin-top:2px}
.spot p{margin-top:6px;font-size:16px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tags i{font-style:normal;font-size:12px;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--bg-2);color:var(--fg-2)}
.tags i.ok{background:var(--c-benefit-bg);color:var(--c-benefit)}
.tags i.off{background:var(--c-season-bg);color:var(--c-season)}
.tags i a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px}
.body p a,.body li a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.rank{display:flex;gap:14px;align-items:baseline}
.rank .n{font-size:30px;font-weight:900;color:var(--c-season);font-variant-numeric:tabular-nums;min-width:40px}
.callout{margin-top:22px;border-radius:16px;padding:16px 18px;background:var(--warn-bg);color:var(--warn-fg);font-size:15px;line-height:1.6;font-weight:600}
.callout b{color:inherit}
.quote{margin-top:18px;border-radius:18px;border:1px solid var(--line);padding:18px 20px;background:var(--card)}
.quote p{margin:0;font-size:16px;color:var(--fg);font-weight:600;line-height:1.65}
.quote small{display:block;margin-top:10px;font-size:13px;color:var(--fg-3);font-weight:600}
.film-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.film-row .ph{aspect-ratio:3/4;border-radius:8px}
.steps-ol{counter-reset:s;list-style:none;padding:0!important}
.steps-ol li{counter-increment:s;position:relative;padding-left:44px;min-height:32px}
.steps-ol li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-size:17px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--fg-3);font-weight:600}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:10px;font-size:16px}
.src{margin-top:52px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--fg-3);line-height:1.8}
.src b{color:var(--fg-2)}
.src ul{margin:6px 0 0;padding-left:18px}
.report{display:inline-flex;margin-top:12px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:800;color:var(--fg-2);align-items:center;background:var(--card)}
.appbox{margin-top:40px;border-radius:24px;background:var(--blue);color:#fff;padding:24px;display:flex;gap:18px;align-items:center;position:relative;overflow:hidden}
.appbox b{font-size:20px;font-weight:800;display:block;line-height:1.35}
.appbox small{display:block;font-size:14px;opacity:.88;margin-top:4px}
.appbox a{margin-left:auto;height:44px;padding:0 18px;border-radius:12px;background:#fff;color:#0072AB;font-size:15px;font-weight:800;display:inline-flex;align-items:center;flex-shrink:0;position:relative;z-index:1}
.appbox img{width:64px;flex-shrink:0}
.related{margin-top:44px}
.related h2{font-size:20px;font-weight:800}
.related .grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.related .card h3{font-size:16px}
/* side rail */
.rail{position:sticky;top:96px;align-self:start;padding-top:24px}
.rail .lbl{font-size:12px;font-weight:800;color:var(--fg-3);letter-spacing:.06em}
.rail ol{list-style:none;margin:10px 0 0;padding:0;border-left:2px solid var(--line)}
.rail li a{display:block;padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;font-weight:700;color:var(--fg-3);line-height:1.4}
.rail li a.on{color:var(--fg);border-color:var(--blue)}
.rail .mini{margin-top:24px;border-radius:18px;background:var(--bg-2);padding:16px}
.rail .mini b{font-size:14px;font-weight:800;display:block}
.rail .mini small{font-size:13px;color:var(--fg-3);display:block;margin-top:4px;line-height:1.5}
.toc-m{display:none;margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.toc-m summary{font-size:15px;font-weight:800;cursor:pointer}
.toc-m ol{margin:8px 0 0;padding-left:20px;font-size:15px;line-height:1.9;color:var(--fg-2)}
@media (max-width:1000px){.art{grid-template-columns:minmax(0,1fr)}.rail{display:none}.toc-m{display:block}.related .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.spot{grid-template-columns:96px minmax(0,1fr);gap:12px}.appbox{flex-wrap:wrap}.appbox a{margin-left:0}.related .grid{grid-template-columns:1fr}.body p,.body ul,.body ol{font-size:16px}.byline{flex-wrap:wrap}.upd{margin-left:52px}}


@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* 사이트 공용 푸터 (src/components/Footer.jsx 의 Tailwind 값 그대로) */
.sf{font-weight:600;margin-top:64px;padding:32px 16px;border-top:1px solid #E5E7EB;background:#F9FAFB;color:#6B7684;overflow-x:hidden}
.sf-grid{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
.sf-logo{height:24px;width:auto;opacity:.9;margin-bottom:12px;filter:brightness(1.05) contrast(1.15) saturate(1.1)}
.sf-biz{font-size:12px;line-height:1.625;margin:0}
.sf h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#111827}
.sf-kakao{display:inline-block;margin-bottom:12px;padding:8px 12px;border:1px solid #D1D5DB;border-radius:6px;font-size:14px;font-weight:500;color:#374151;background:#fff}
.sf-kakao:hover{background:#F9FAFB;border-color:#9CA3AF}
.sf ul{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.6}
.sf li+li{margin-top:6px}
.sf-bottom{max-width:72rem;margin:32px auto 0;padding-top:24px;border-top:1px solid #E5E7EB;text-align:center;font-size:12px}
.sf-links{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:8px}
.sf-links a:hover{text-decoration:underline}
@media (min-width:640px){.sf{padding:40px 24px}.sf-grid{grid-template-columns:1fr 1fr;gap:32px}.sf-logo{height:28px;margin-bottom:16px}.sf-biz,.sf ul{font-size:14px}.sf h4{font-size:16px;margin-bottom:16px}.sf li+li{margin-top:8px}.sf-bottom{margin-top:40px;padding-top:32px}}
@media (min-width:768px){.sf{padding:48px 32px}.sf-logo{height:32px}.sf-bottom{margin-top:48px}}