/* 여헌기념관 v7 — 한지 흰색 바탕 + 먹 글씨, Nanum Myeongjo. 붉은 도장색은 표지·가운데 정거장에만 아주 작게 */
:root{
  --paper:#F7F4EC; --paper2:#EFEADF; --card:#FBF9F3;
  --ink:#1F1E1B; --ink2:#45433E; --ink3:#69655D;
  --line:#DAD3C4; --line2:#B9B09D; --seal:#9A4A3C;
  --serif:'Nanum Myeongjo','Noto Serif KR',serif;
  --sans:Pretendard,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --hd:76px; --gut:max(40px,calc((100vw - 1200px) / 2));
}
html:lang(zh-CN){--serif:'Noto Serif SC','Nanum Myeongjo',serif}
html:lang(ja){--serif:'Noto Serif JP','Nanum Myeongjo',serif}
html:lang(en){--serif:'Noto Serif','Nanum Myeongjo',serif}   /* Nanum Myeongjo 의 붙임표(-)가 길어 영문은 라틴 명조로 */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.8 var(--serif);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
html:lang(zh-CN) body,html:lang(ja) body{word-break:normal;line-break:strict}   /* 중·일 글은 글자 사이에서 꺾는다 — 한글 낱말만 keep-all */
:lang(ko){word-break:keep-all}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{max-width:100%}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;font:600 14px var(--sans)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
html[lang=ko] .fx-only{display:none!important}
.kr{display:block;font-family:'Nanum Myeongjo',serif;font-size:max(12px,.6em);font-weight:700;letter-spacing:.02em;color:var(--ink3);margin-top:.3em}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.nw{white-space:nowrap}
.ic{width:18px;height:18px;flex:none}
.wrap{padding:0 var(--gut)}

/* ── 머리 ── */
.hd{position:fixed;left:0;right:0;top:0;z-index:50;transition:background .3s,box-shadow .3s}
.hd.is-scrolled,.hd.is-open{background:rgba(247,244,236,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.hd-in{height:var(--hd);padding:0 var(--gut);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:11px;flex:none;min-height:44px}
.brand .mark{width:34px;height:34px;color:var(--ink)}
.brand b{font:800 21px/1 'Nanum Myeongjo',serif;letter-spacing:-.02em}
.bn{display:flex;flex-direction:column;gap:4px}
.bn small{font:600 12px/1.2 var(--sans);color:var(--ink3);white-space:nowrap}   /* 외국어 판: 한글 이름 아래 외국어 이름 */
.bn small:empty{display:none}
.hd-nav{flex:1;min-width:0;display:flex;justify-content:flex-end;align-self:stretch;align-items:center}
.gnb{min-width:0;max-width:100%}
.gnb ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 4px}
.gnb a{position:relative;display:block;padding:10px 14px;font:700 16px/1.3 var(--serif);white-space:nowrap;color:var(--ink2);transition:color .2s}
.gnb a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.gnb a:hover,.gnb a.on{color:var(--ink)}
.gnb a:hover::after,.gnb a.on::after{transform:scaleX(1)}
.hd-tools{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.lang{position:relative}
.lang-cur{display:none}
.lang-list{display:flex;border:1px solid var(--line2)}
.lang-list button{min-width:44px;height:36px;padding:0 10px;font:600 13px/1 var(--sans);color:var(--ink2);border-left:1px solid var(--line);transition:background .2s,color .2s}
.lang-list button:first-child{border-left:0}
.lang-list button:hover{background:var(--paper2);color:var(--ink)}
.lang-list button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line2);align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.hd.is-open .burger span{background:transparent}
.hd.is-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.hd.is-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(31,30,27,.5);padding:8px var(--gut) 28px;max-height:calc(100svh - var(--hd));overflow:auto}
.hd.is-open .mnav{display:block}
.mnav li a{display:block;padding:16px 2px;border-bottom:1px solid var(--line);font:700 20px/1.4 var(--serif)}
.mnav .acts{margin-top:22px}
/* 좁은 화면, 또는 번역 글이 길어 메뉴가 한 줄에 안 들어갈 때(gnb-fold) — 햄버거 */
html.gnb-fold .hd-nav{display:none}
html.gnb-fold .burger{display:flex}

/* ── 단추(길찾기) ── */
.acts-h{font:600 12.5px/1.4 var(--sans);letter-spacing:.14em;color:var(--ink3);margin-bottom:10px}
.acts-b{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1.5px solid var(--ink);font:600 15px/1.2 var(--sans);color:var(--ink);transition:background .25s,color .25s}
.btn span{white-space:nowrap}   /* 단추 이름은 낱말 가운데서 꺾지 않는다(좁으면 단추째 다음 줄로) */
.btn:first-child{background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--paper2);color:var(--ink)}
.btn:first-child:hover{background:#3A3833;color:var(--paper)}

/* ── 첫 화면: 돌비 클로즈업 + 세로 제목 쪽지(옛 책 표지의 제첨 題簽 꼴) — 사진 오른쪽(새긴 글자 밖, 돌 어깨·소나무 쪽)에 얹는다 ── */
.hero{padding:calc(var(--hd) + 44px) 0 48px}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(48px,5vw,72px)}   /* 왼쪽 글 묶음은 사진 높이의 가운데 */
.badge{grid-area:2/1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.badge .bd{padding:6px 12px 5px;border:1px solid var(--ink);font:600 13.5px/1.45 var(--sans);color:var(--ink)}
.badge .rg{font:500 13px/1.4 var(--sans);color:var(--ink3);white-space:nowrap}
.hero-ph{grid-area:1/2/5/3;margin-right:calc(-1 * min(var(--gut),120px))}   /* 오른쪽은 화면 끝 쪽으로(아주 넓은 화면은 120px 까지만) */
.hero-ph img{display:block;width:100%;height:auto}
.slip{grid-area:1/2/5/3;z-index:2;justify-self:end;align-self:start;translate:calc(min(var(--gut),120px) - 16px) -28px;
  writing-mode:vertical-rl;padding:30px 24px;background:var(--card);border:1px solid var(--ink2);outline:1px solid var(--line2);outline-offset:-8px;
  box-shadow:0 18px 40px -26px rgba(31,30,27,.55);font:800 clamp(48px,6.6vw,100px)/1 var(--serif);letter-spacing:.04em;white-space:nowrap;color:var(--ink)}
.slip .kr{margin:0;margin-block-start:14px;font-size:15px;letter-spacing:.12em}
html[lang=en] .slip{font-size:clamp(26px,3vw,46px);letter-spacing:0}   /* 영문은 책등처럼 한 줄로 눕힌다 */
html:lang(zh-CN) .slip,html:lang(ja) .slip{font-size:clamp(44px,5.8vw,90px)}
.hero-body{grid-area:3/1;max-width:460px;padding-top:30px}
.lead{font:400 20px/1.75 var(--serif);color:var(--ink2);text-wrap:pretty}
.src{font:500 12.5px/1.6 var(--sans);color:var(--ink3);white-space:nowrap}
.fact{display:flex;align-items:flex-start;gap:10px;margin-top:22px;font:700 17px/1.55 var(--serif)}
.fact .ic{margin-top:3px}
.fact .kr{margin-top:2px;font-size:14px}
.hero-acts{margin-top:22px}
.fact.hrs{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-weight:400;color:var(--ink2)}

/* ── 구역 머리 ── */
.sec{padding-top:136px}
.near{padding-top:56px}   /* 넓은 화면: 첫 화면 아래 끝에 «가까운 곳» 제목이 걸리게 */
.sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;padding-bottom:20px;border-bottom:1.5px solid var(--ink)}
.sh h2{font:800 clamp(36px,4.3vw,58px)/1.15 var(--serif);letter-spacing:-.03em}
.sh p{font:500 15px/1.6 var(--sans);color:var(--ink3)}

/* ── 01 가까운 곳: 세 정거장 선형 지도 — 점선, 두 칸 길이 같게(축척 아님), 이름은 점 바로 아래 같은 높이 ── */
.route{--lh:214px;position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) 220px minmax(0,1fr) 200px;margin-top:56px}
.route::before{content:"";position:absolute;left:100px;right:100px;top:calc(var(--lh) - 1px);height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 15px);transform-origin:left}
.stop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:calc(var(--lh) - 11px)}
.dot{display:block;flex:none;width:22px;height:22px;border:2.5px solid var(--ink);border-radius:50%;background:var(--paper)}
.stop.here{padding-top:0}
.stop.here .ph{height:calc(var(--lh) - 11px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.stop.here .ph::after{content:"";width:2px;height:20px;background:var(--ink)}
.stop.here .ph img{display:block;width:176px;height:176px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 7px var(--paper),0 0 0 8.5px var(--seal)}
.stop.here .dot{background:var(--seal);border-color:var(--seal);box-shadow:0 0 0 5px var(--paper)}
.stop .nm{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.stop .ty{margin-top:auto}   /* 이름이 두 줄·한 줄로 달라도 양 끝 칩은 같은 높이 */
.stop .nm b{font:800 26px/1.3 var(--serif);letter-spacing:-.02em}
.stop .nm .kr{font-size:13px}
.ty{display:inline-block;font:500 12.5px/1 var(--sans);color:var(--ink3);border:1px solid var(--line2);padding:5px 10px;border-radius:999px;white-space:nowrap}
.seg{height:var(--lh);display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px}
.km{display:inline-flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap}
.km .pre{font:500 13px/1.3 var(--sans);color:var(--ink3)}
.km .v{display:flex;align-items:baseline;gap:5px}
.km .num{font:800 40px/1 var(--serif);letter-spacing:-.02em}
.km .post{font:600 15px/1 var(--sans);color:var(--ink2)}
.note{margin-top:40px;font:500 14px/1.7 var(--sans);color:var(--ink3);text-align:center}
.more{margin-top:80px}
.more h3{font:700 18px/1.4 var(--serif);color:var(--ink2);margin-bottom:14px}
.more ul{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.more li{display:flex;align-items:center;gap:14px;padding:20px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more .dot{width:12px;height:12px;border-width:2px}
.more b{font:800 21px/1.35 var(--serif)}
.more b .kr{font-size:13px}
.more .km{margin-left:auto;align-items:flex-end;gap:4px}
.more .km .num{font-size:28px}

/* ── 02 위치: 지도가 주인공, 주소 카드는 지도 위에 ── */
.where-map{position:relative;margin-top:52px;height:540px;border:1px solid var(--line2);background:var(--paper2)}
.where-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.85) sepia(.18) contrast(.94) brightness(1.03)}
.arrive{position:absolute;left:32px;top:32px;width:min(430px,calc(100% - 64px));padding:34px 34px 30px;background:var(--card);border:1px solid var(--line2);box-shadow:0 22px 44px -30px rgba(31,30,27,.6)}
.arrive .addr{font:800 30px/1.35 var(--serif);letter-spacing:-.02em}
.arrive .tr{margin-top:6px;font:500 14px/1.6 var(--sans);color:var(--ink3)}
.arrive .dir{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font:400 17px/1.7 var(--serif)}
.arrive .acts{margin-top:24px}

/* ── 03 안내: 한 줄 띠 ── */
.visit{padding-top:96px;padding-bottom:128px}
.note-band{display:flex;align-items:center;gap:14px 26px;padding:28px 4px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line2)}
.note-band .mark{width:46px;height:46px;flex:none;color:var(--ink)}
.note-band h2{flex:none;font:600 13px/1.4 var(--sans);letter-spacing:.16em;color:var(--ink3)}
html:not([lang=ko]) .note-band h2{letter-spacing:.04em}
.note-band p{font:700 clamp(19px,2vw,24px)/1.55 var(--serif)}

/* ── 맨 아래(먹 바탕) ── */
.ft{background:var(--ink);color:#ECE7DB;padding:72px 0 56px}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(236,231,219,.2)}
.ft-name{display:flex;align-items:center;gap:16px}
.ft-name .mark{width:50px;height:50px;color:var(--paper);flex:none}
.ft-name b{display:block;font:800 28px/1.3 var(--serif)}
.ft-name b .kr{color:#BDB6A6;font-size:13px}
.ft-name p{margin-top:4px;font:500 14px/1.6 var(--sans);color:#C9C2B2}
.ft .acts-h{color:#BDB6A6}
.ft .btn{border-color:#ECE7DB;color:#ECE7DB}
.ft .btn:first-child{background:#ECE7DB;color:var(--ink)}
.ft .btn:hover{background:rgba(236,231,219,.12);color:#fff}
.ft .btn:first-child:hover{background:#fff;color:var(--ink)}
.disc{margin-top:28px;font:600 14px/1.6 var(--sans);color:#ECE7DB}
.credit{margin-top:6px;font:400 13px/1.7 var(--sans);color:#B3AC9C}
.credit .cr{display:inline-block}

/* ── 움직임 ── */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}
.js .route::before{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.6,0,.2,1) .2s}
.js .route.in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .slip{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .25s both}
  .hero-ph img{animation:fade 1.4s ease both}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .route::before{transform:none;transition:none}
}

/* ── 중간 폭 ── */
@media (max-width:1100px){
  .route{--lh:172px;grid-template-columns:150px minmax(0,1fr) 170px minmax(0,1fr) 150px}
  .route::before{left:75px;right:75px}
  .stop.here .ph img{width:136px;height:136px}
  .stop .nm b{font-size:22px}
  .km .num{font-size:34px}
}
/* 첫 화면은 960 아래에서 한 줄로 쌓는다 — 사진 위 오른쪽에 제목 쪽지 */
@media (max-width:959px){
  .hero{padding:calc(var(--hd) + 24px) 0 40px}
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .badge{grid-area:1/1}
  .hero-ph{grid-area:2/1;margin:20px calc(-1 * var(--gut)) 0}
  .slip{grid-area:2/1;translate:none;padding:16px 13px;outline-offset:-6px;font-size:clamp(40px,10.5vw,80px)}
  .slip .kr{margin-block-start:10px;font-size:14px}
  html[lang=en] .slip{font-size:clamp(20px,5.4vw,42px)}
  html:lang(zh-CN) .slip,html:lang(ja) .slip{font-size:clamp(38px,10vw,74px)}
  .hero-body{grid-area:3/1;max-width:640px;padding-top:22px}

  .where-map{height:auto;margin-top:40px;border:0;background:none}
  .where-map iframe{height:400px;border:1px solid var(--line2);background:var(--paper2)}
  .arrive{position:static;width:auto;margin-top:14px}   /* 지도 아래 — 표지와 OSM 출처 줄을 가리지 않게 */
}

/* ── 좁은 화면 ── */
@media (max-width:767px){
  :root{--hd:64px;--gut:20px}
  body{font-size:16px}
  .hd-nav{display:none}
  .burger{display:flex}
  .brand .mark{width:30px;height:30px}
  .brand b{font-size:19px}
  .lang-cur{display:flex;align-items:center;gap:6px;height:44px;min-width:56px;padding:0 12px;border:1px solid var(--line2);font:600 13px/1 var(--sans)}
  .lang-cur::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .lang-list{display:none;position:absolute;right:0;top:calc(100% + 6px);flex-direction:column;background:var(--paper);box-shadow:0 14px 30px -16px rgba(31,30,27,.45);z-index:3}
  .lang.open .lang-list{display:flex}
  .lang-list button{height:44px;min-width:96px;border-left:0;border-top:1px solid var(--line);text-align:left;padding:0 16px}
  .lang-list button:first-child{border-top:0}

  .badge .bd{font-size:13px}
  .lead{font-size:18px;line-height:1.7}
  .hero-body{display:flex;flex-direction:column}   /* 휴대폰: 무엇 → 길찾기 단추 → 주소 → 운영시간(단추가 첫 화면 안에) */
  .hero-acts{order:1;margin-top:16px}
  .fact{order:2;margin-top:16px;font-size:16px}
  .fact.hrs{order:3;margin-top:18px;padding-top:12px}

  .sec,.near{padding-top:92px}
  .sh{gap:4px 14px}
  .sh h2{font-size:36px}
  .sh p{font-size:14px}

  .route{display:block;margin-top:36px}
  .route::before{display:none}
  .stop{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding-top:0}
  .stop:not(:last-child)::after,.seg::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--ink) 0 8px,transparent 8px 14px)}
  .seg::before{top:0}
  .stop .nm{align-items:flex-start;margin-top:-3px}
  .stop .nm b{font-size:22px}
  .stop.here .ph{order:3;flex:none;height:auto;margin-left:auto}
  .stop.here .ph::after{display:none}
  .stop.here .ph img{width:88px;height:88px;box-shadow:0 0 0 5px var(--paper),0 0 0 6.5px var(--seal)}
  .seg{position:relative;height:auto;min-height:104px;padding:20px 0 20px 38px;align-items:center;justify-content:flex-start}
  .km{align-items:flex-start}
  .km .num{font-size:32px}
  .note{text-align:left;margin-top:28px}
  .more{margin-top:56px}
  .more ul{grid-template-columns:1fr}
  .more li+li{border-top:0}
  .more li{flex-wrap:wrap;gap:8px 12px;padding:18px 2px}
  .more b{font-size:19px}

  .where-map{margin-top:32px}
  .where-map iframe{height:300px}
  .arrive{padding:26px 20px 22px}
  .arrive .addr{font-size:25px}
  .arrive .dir{font-size:16px}

  .visit{padding-top:72px;padding-bottom:92px}
  .note-band{flex-wrap:wrap;padding:22px 2px}
  .note-band .mark{width:38px;height:38px}
  .note-band p{flex-basis:100%}

  .ft{padding:56px 0 44px}
  .ft-name b{font-size:24px}
  .btn{flex:1 1 140px}
  html:lang(zh-CN) .btn,html:lang(ja) .btn{padding:0 14px;gap:6px}   /* 중·일 단추 이름이 한 줄에 들도록 */
  .ft .acts{width:100%}
}