/* 쌍암고택 v6 — 대청마루로 시작하는 고택: 먹색 × 황토 × 기와 회청 · 명조(Noto Serif KR/SC/JP, 직접 둔 글자만) + 고딕 UI(Pretendard) */
:root{
  --ink:#1b1916;--ink2:#24211d;--ink3:#2f2a25;--sline:rgba(242,236,225,.14);--sline2:rgba(242,236,225,.3);
  --paper:#f2ece1;--paper2:#e9e0d0;--paper3:#ddd1bc;--text:#221f1b;--text2:#5a5147;--pline:rgba(34,31,27,.16);--pline2:rgba(34,31,27,.32);
  --ochre:#b0763e;--ochre-dk:#7c4f24;--ochre-lt:#d9a86c;
  --tile:#56616c;--tile-dk:#3a434c;--tile-lt:#a3aeb8;
  --hd:68px;--wrap:1200px;
  --serif:'SKR','Noto Serif KR',serif;
  --sans:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
html[data-lang=zh]{--serif:'SSC','SKR',serif;--sans:'Noto Sans SC','Pretendard Variable','Pretendard',sans-serif}
html[data-lang=ja]{--serif:'SJP','SKR',serif;--sans:'Noto Sans JP','Pretendard Variable','Pretendard',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) - 1px);-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.85 var(--serif);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
html[data-lang=ja] body{word-break:auto-phrase;line-break:strict}
html[data-lang=zh] body{word-break:normal;line-break:strict}
html[data-lang=en] body{word-break:normal}
img{max-width:100%;height:auto;display:block}
figcaption{text-wrap:balance}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,table{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
:focus-visible{outline:2px solid var(--ochre-lt);outline-offset:3px}

/* 언어: 고른 언어만 */
.i{display:none}
html[data-lang=ko] .i[lang=ko],html[data-lang=en] .i[lang=en],html[data-lang=zh] .i[lang=zh-Hans],html[data-lang=ja] .i[lang=ja]{display:inline}
html[data-lang=ko] .fx{display:none}
.kn{word-break:keep-all;white-space:nowrap}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--ink);padding:10px 16px;font:700 15px/1.3 var(--sans)}
.skip:focus{top:10px}

/* ── 제목 결 ── */
.kick{display:flex;align-items:center;gap:12px;font:600 13px/1.4 var(--sans);letter-spacing:.22em;color:var(--ochre-dk);margin-bottom:16px}
.kick::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
html[data-lang=en] .kick{letter-spacing:.16em;text-transform:uppercase}
.sec-h{font:800 clamp(30px,3.4vw,46px)/1.28 var(--serif);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
html[data-lang=en] .sec-h{letter-spacing:-.005em}
.sm-h{font:700 19px/1.4 var(--serif);color:var(--text)}

/* ── 아이콘 · 버튼(문살처럼 각진 네모) ── */
.ic{width:20px;height:20px;flex:none}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:2px;font:600 16px/1.2 var(--sans);text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.bt-call{background:var(--ochre-lt);color:var(--ink)}
.bt-call:hover{background:#e6b97f}
.bt-num{font:700 17px/1 var(--sans);letter-spacing:.01em;padding-left:12px;border-left:1px solid rgba(27,25,22,.3)}
.bt-book{background:var(--paper);color:var(--ink)}
.bt-book:hover{background:#fff}
.bt-map{min-height:46px;padding:0 16px;font-size:15px;color:var(--paper);border-color:var(--sline2);background:rgba(27,25,22,.38)}
.bt-map:hover{border-color:var(--ochre-lt);color:var(--ochre-lt)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cta-main{display:flex;flex-wrap:wrap;gap:10px}
.cta-dir{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.cta-dl{font:600 13px/1 var(--sans);color:rgba(242,236,225,.72);letter-spacing:.08em;margin-right:2px}

/* ── 머리 ── */
.hd{position:sticky;top:0;z-index:100;height:var(--hd);background:var(--ink);color:var(--paper);border-bottom:1px solid transparent;transition:border-color .25s}
.hd.is-scrolled{border-bottom-color:var(--sline)}
.hd-in{max-width:calc(var(--wrap) + 160px);height:100%;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:22px}
.logo{display:inline-flex;align-items:baseline;gap:12px;min-height:44px;align-items:center;text-decoration:none;flex:none;margin-right:auto}
.logo-t{font:800 24px/1 var(--serif);font-family:'SKR',serif;letter-spacing:.02em;color:var(--paper);white-space:nowrap}
.logo-s{font:600 13px/1 var(--serif);letter-spacing:.32em;color:var(--ochre-lt);white-space:nowrap;padding:5px 0 5px 12px;border-left:1px solid var(--sline2)}
html[data-lang=en] .logo-s{font-size:14px;letter-spacing:.04em}
.gnb{flex:1;min-width:0;display:flex;justify-content:flex-end}
.gnb .navl{display:flex;align-items:center;gap:4px}
.gn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:rgba(242,236,225,.84);font:600 15.5px/1.2 var(--serif);white-space:nowrap;position:relative}
.gn .tv{white-space:nowrap}
.gn::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;background:var(--ochre-lt);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.gn:hover,.gn.on{color:var(--paper)}
.gn:hover::after,.gn.on::after{transform:scaleX(1)}
.lang{position:relative;flex:none}
.lang-cur{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;background:none;border:1px solid var(--sline2);border-radius:2px;font:600 14px/1 var(--sans);color:var(--paper);cursor:pointer}
.lang-cur .ic{width:17px;height:17px}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;background:var(--paper);color:var(--ink);border:1px solid var(--pline2);padding:6px;display:none;box-shadow:0 14px 32px rgba(0,0,0,.28)}
.lang.open .lang-list{display:block}
.lang-list button{display:block;width:100%;text-align:left;min-height:44px;padding:0 14px;background:none;border:0;font:600 15px/1 var(--sans);cursor:pointer}
.lang-list button:hover{background:var(--paper2)}
.lang-list button[aria-pressed=true]{color:var(--ochre-dk)}
.lang-list button[aria-pressed=true]::after{content:" ·";}
.hd-call{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 16px;border:1px solid var(--ochre-lt);color:var(--ochre-lt);text-decoration:none;font:600 15px/1 var(--sans);white-space:nowrap;border-radius:2px}
.hd-call .ic{width:17px;height:17px}
.hd-call:hover{background:var(--ochre-lt);color:var(--ink)}
.burger{display:none;flex:none;width:46px;height:46px;border:1px solid var(--sline2);background:none;border-radius:2px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:20px;height:1.6px;background:var(--paper);transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
html.fold .gnb{display:none}
html.fold .burger{display:flex}
.mnav{position:fixed;left:0;right:0;top:var(--hd);bottom:0;z-index:99;background:var(--ink);color:var(--paper);overflow:auto;padding:18px 24px 36px;border-top:1px solid var(--sline)}
.mnav[hidden]{display:none}
.mnav .navl{display:flex;flex-direction:column;margin-bottom:26px}
.mnav .navl a{display:flex;align-items:center;min-height:56px;font:600 21px/1.3 var(--serif);text-decoration:none;border-bottom:1px solid var(--sline)}
.mnav .cta-dl{color:rgba(242,236,225,.72)}
body.menu-open{overflow:hidden}

/* ── 첫 화면: 대청마루 전면 + 세로 雙巖古宅 ── */
.hero{position:relative;height:calc(100svh - var(--hd));min-height:560px;max-height:1120px;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero-ph{position:absolute;inset:0}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,18,16,.9) 0%,rgba(20,18,16,.62) 26%,rgba(20,18,16,.12) 52%,rgba(20,18,16,0) 70%),
             linear-gradient(90deg,rgba(20,18,16,.62) 0%,rgba(20,18,16,.22) 38%,rgba(20,18,16,0) 60%)}
.hero-cap{position:absolute;right:28px;bottom:22px;z-index:2;font:500 13px/1.4 var(--sans);letter-spacing:.06em;color:rgba(242,236,225,.86);display:flex;align-items:center;gap:10px;max-width:46vw;text-align:right}
.hero-cap::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.hero-in{position:relative;z-index:1;height:100%;max-width:calc(var(--wrap) + 160px);margin:0 auto;padding:0 40px clamp(36px,6vh,72px);display:grid;grid-template-columns:auto 1fr;column-gap:clamp(68px,5.6vw,96px)}
.plaque-col{display:flex;align-items:flex-start;gap:14px;align-self:start;position:relative}
.plaque{writing-mode:vertical-rl;text-orientation:upright;
  background:rgba(27,25,22,.86);color:var(--paper);font:800 clamp(46px,min(7.6vh,6.2vw),88px)/1 'SKR',serif;letter-spacing:.14em;
  padding:clamp(26px,4vh,44px) clamp(18px,1.6vw,26px) clamp(30px,4.4vh,50px);border:1px solid rgba(217,168,108,.55);border-top:0;
  box-shadow:inset 0 0 0 6px rgba(27,25,22,.86),inset 0 0 0 7px rgba(217,168,108,.35)}
/* 이름 유래 = 현판 옆에 건 주련(세로 한 줄, 현판과 같은 먹색 판) — 칸 사이(column-gap)에 들어가 글 칸을 밀지 않는다 */
.origin{position:absolute;left:calc(100% + 10px);top:0;writing-mode:vertical-rl;white-space:nowrap;font:600 15px/1.5 var(--serif);letter-spacing:.08em;color:#f3e7d3;
  background:rgba(27,25,22,.88);border:1px solid rgba(217,168,108,.45);border-top:0;padding:20px 9px 22px}
/* 영어는 가로글 — 현판 바로 아래, 현판 폭 안 */
html[data-lang=en] .origin{writing-mode:horizontal-tb;white-space:normal;left:0;right:-48px;top:calc(100% + 10px);font:500 13.5px/1.5 var(--serif);letter-spacing:0;padding:10px 12px;border-top:1px solid rgba(217,168,108,.45)}
.hero-copy{align-self:end;max-width:760px;padding-bottom:4px}
.badge{display:inline-flex;align-items:center;gap:10px;font:600 13.5px/1.35 var(--sans);letter-spacing:.06em;color:var(--paper);border:1px solid rgba(217,168,108,.7);padding:7px 14px;margin-bottom:22px;background:rgba(27,25,22,.42)}
.badge::before{content:"";width:7px;height:7px;background:var(--ochre-lt);transform:rotate(45deg);flex:none}
.hero-h{font:900 clamp(56px,min(7.4vw,11vh),112px)/1.02 var(--serif);letter-spacing:.02em;color:var(--paper);margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-h .i{display:none}
html[data-lang=ko] .hero-h .i[lang=ko],html[data-lang=en] .hero-h .i[lang=en],html[data-lang=zh] .hero-h .i[lang=zh-Hans],html[data-lang=ja] .hero-h .i[lang=ja]{display:flex;flex-direction:column}
.h1-k{font:600 max(15px,.2em)/1.4 var(--serif);letter-spacing:.06em;color:#f3e6cf;margin-top:10px;text-shadow:0 1px 10px rgba(0,0,0,.7)}
html[data-lang=en] .hero-h{font-size:clamp(46px,min(6.2vw,9.6vh),96px);letter-spacing:0}
.hero-lead{font:600 clamp(18px,1.5vw,22px)/1.55 var(--serif);color:var(--paper);max-width:34em;text-wrap:balance}
.hero-lead2{font:500 15px/1.5 var(--sans);color:rgba(242,236,225,.82);margin:8px 0 26px;letter-spacing:.02em}

/* ── 집 이야기 ── */
.st{padding:clamp(80px,10vw,140px) 0 clamp(64px,8vw,110px);background:var(--paper)}
.st-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.st-ph img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:50% 50%}
.st-ph figcaption,.map figcaption{font:500 13px/1.5 var(--sans);color:var(--text2);margin-top:12px;letter-spacing:.02em}
.st-copy{padding-top:clamp(0px,2vw,24px)}
.yr{display:flex;align-items:flex-end;gap:18px;margin:26px 0 22px;border-bottom:1px solid var(--pline2);padding-bottom:18px}
.yr-n{font:900 clamp(84px,9.4vw,148px)/.82 var(--serif);font-family:'SKR',serif;color:var(--ochre);letter-spacing:-.02em}
.yr-l{font:600 14px/1.5 var(--sans);color:var(--text2);letter-spacing:.06em;padding-bottom:6px}
.st-text p{font-size:18px;line-height:1.9;margin-bottom:.85em;max-width:34em}
.st-text p:first-child{font-weight:700}
.seal{display:flex;align-items:center;gap:18px;margin-top:30px;padding:16px 20px;border:1px solid var(--ochre-dk);max-width:560px;position:relative}
.seal::before{content:"";position:absolute;inset:4px;border:1px solid rgba(124,79,36,.35);pointer-events:none}
.seal-y{font:900 34px/1 'SKR',serif;color:var(--ochre-dk);padding-right:18px;border-right:1px solid rgba(124,79,36,.4)}
.seal p{display:flex;flex-direction:column}
.seal-k{font:600 13px/1.4 var(--sans);letter-spacing:.16em;color:var(--ochre-dk)}
.seal-t{font:700 16px/1.55 var(--serif);color:var(--text)}
.bds-w{margin-top:clamp(56px,7vw,96px)}
.bds-h{display:flex;align-items:center;gap:14px;font:700 15px/1 var(--sans);letter-spacing:.2em;color:var(--text2);margin-bottom:18px}
.bds-h::after{content:"";flex:1;height:1px;background:var(--pline2)}
.bds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bd{background:var(--paper2);padding:20px 22px 22px;border-top:3px solid var(--tile);display:flex;flex-direction:column}
.roof{width:100%;max-width:112px;height:auto;color:var(--tile);margin-bottom:12px}
.bd-t .i>span{display:block}
.bd-n{font:800 clamp(24px,2.3vw,32px)/1.25 var(--serif)}
html:not([data-lang=ko]) .bd-n{font-size:clamp(20px,1.8vw,24px);line-height:1.3}
.bd-k{font:600 14px/1.4 var(--sans);color:var(--text2);margin-top:4px;letter-spacing:.02em}
.bd-m{font:500 14px/1.45 var(--sans);color:var(--text2);margin-top:2px}
.bd-sr .bd-k,.bd-sr .bd-m{color:rgba(242,236,225,.78)}
.bd-sr{background:var(--ink);color:var(--paper);border-top-color:var(--ochre-lt)}
.bd-sr .roof{color:var(--ochre-lt)}
.bd-open{margin-top:auto;padding-top:10px;font:600 13.5px/1.45 var(--sans);color:var(--ochre-lt);letter-spacing:.02em}

/* ── 사랑채 체험(먹색 판 · 요금표) ── */
.ex{background:var(--ink);color:var(--paper);padding:clamp(80px,9vw,128px) 0;position:relative}
.ex .kick{color:var(--ochre-lt)}
.ex .sec-h{color:var(--paper)}
.ex-head{display:flex;flex-direction:column;margin-bottom:40px}
.fee{width:100%;border-collapse:collapse}
.fee thead th{font:600 13px/1.4 var(--sans);letter-spacing:.14em;color:rgba(242,236,225,.7);text-align:left;padding:0 18px 14px;border-bottom:1px solid var(--sline2)}
.fee thead th:last-child{text-align:right}
.fee tbody tr{border-bottom:1px solid var(--sline)}
.fee tbody th{text-align:left;padding:26px 18px;font-weight:400;display:grid;grid-template-columns:44px 64px minmax(0,1fr);align-items:center;gap:0 22px}
.fe-no{font:700 22px/1 'SKR',serif;color:rgba(242,236,225,.48)}
.art{width:64px;height:64px;color:var(--ochre-lt)}
.fe-t .i>span{display:block}
.fe-n{font:700 clamp(21px,2.2vw,28px)/1.35 var(--serif)}
html:not([data-lang=ko]) .fe-n{font-size:clamp(19px,1.8vw,23px)}
.fe-k{font:500 14px/1.4 var(--sans);color:rgba(242,236,225,.72);margin-top:4px}
.fe-m{padding:26px 18px;font:500 16px/1.5 var(--sans);color:rgba(242,236,225,.86);vertical-align:middle}
.fe-w{color:rgba(242,236,225,.72)}
.fe-p{padding:26px 18px;text-align:right;font:700 clamp(24px,2.4vw,32px)/1.2 var(--serif);color:var(--ochre-lt);white-space:nowrap;vertical-align:middle}
.fe-p .i>span{display:block}
.fp-k{font:600 max(13px,.55em)/1.3 var(--sans);color:rgba(242,236,225,.66);margin-top:6px;letter-spacing:.02em}
.ex-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:28px}
.fee-note{font:500 15px/1.5 var(--sans);color:rgba(242,236,225,.8);display:flex;gap:10px;align-items:center}
.fee-note::before{content:"※";color:var(--ochre-lt)}

/* ── 한옥스테이(기와 회청 판 + 빗살 무늬) ── */
.sy{position:relative;background:var(--tile-dk);color:var(--paper);overflow:hidden;padding:clamp(56px,6vw,84px) 0}
.sy-lat{position:absolute;inset:0;opacity:.2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0 16%,var(--tile-lt) 16% calc(16% + 2px),transparent 0 calc(16% + 8px),var(--tile-lt) 0 calc(16% + 10px),transparent 0 48%,
      var(--tile-lt) 48% calc(48% + 2px),transparent 0 calc(48% + 8px),var(--tile-lt) 0 calc(48% + 10px),transparent 0 80%,var(--tile-lt) 80% calc(80% + 2px),transparent 0 calc(80% + 8px),var(--tile-lt) 0 calc(80% + 10px),transparent 0),
    repeating-linear-gradient(90deg,transparent 0 12px,var(--tile-lt) 12px 14px);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 92%);mask-image:linear-gradient(90deg,transparent 30%,#000 92%)}
.sy-in{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.sy .kick{color:var(--ochre-lt)}
.sy-l{font:600 14px/1.4 var(--sans);letter-spacing:.16em;color:#c3ccd4}
.sy-h{font:900 clamp(60px,8vw,120px)/1.05 var(--serif);letter-spacing:.04em;color:var(--paper)}
html:not([data-lang=ko]) .sy-h{font-size:clamp(40px,5vw,72px);letter-spacing:0;line-height:1.15}
.sy-h .i>span{display:block}
.syn-k{font:600 17px/1.4 var(--sans);letter-spacing:.04em;color:#c3ccd4;margin-top:10px}
.syn-m{font:500 italic 19px/1.4 var(--serif);color:#c3ccd4;margin-top:2px}
.sy-act{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:420px}
.sy-rate{font:600 18px/1.6 var(--serif);color:var(--paper)}

/* ── 이용 시간 · 예약 ── */
.hr{background:var(--paper2);padding:clamp(80px,9vw,128px) 0}
.hr-head{margin-bottom:40px}
.hr-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,56px);align-items:start}
.wk{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--paper)}
.wk caption{caption-side:top;text-align:left;font:700 19px/1.4 var(--serif);margin-bottom:14px}
.wk th,.wk td{border:1px solid var(--pline2);text-align:center}
.wk th{font:700 17px/1.3 var(--serif);padding:14px 4px;background:var(--paper3)}
.wk td{padding:22px 4px 24px;vertical-align:middle}
.wk-t{display:block;font:600 17px/1.25 var(--sans);font-variant-numeric:tabular-nums;color:var(--text)}
.wk td i{display:block;width:1px;height:22px;background:var(--pline2);margin:7px auto}
.wk th.wk-off{background:var(--ink);color:var(--paper)}
.wk td.wk-off{background:repeating-linear-gradient(-45deg,var(--paper2) 0 7px,var(--paper3) 7px 8px)}
.wk-c{display:block;font:700 16px/1.3 var(--serif);color:var(--ochre-dk)}
.wk-m{display:block;font:500 13px/1.35 var(--sans);color:var(--text2);margin-top:6px}
.hr-tbl .sm-h{margin:40px 0 16px}
.fac{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fac li{display:flex;align-items:center;gap:14px;background:var(--paper);padding:16px 18px;border-left:3px solid var(--tile);font:600 16px/1.45 var(--sans)}
.fac .ic{width:24px;height:24px;color:var(--tile)}
.bk{background:var(--ink);color:var(--paper);padding:34px 30px 30px;position:relative}
.bk::before{content:"";position:absolute;inset:6px;border:1px solid var(--sline);pointer-events:none}
.bk-h{font:800 30px/1.2 var(--serif);margin-bottom:12px}
.bk-p{font:500 16px/1.7 var(--serif);color:rgba(242,236,225,.86);margin-bottom:22px}
.bk-btn{width:100%;justify-content:flex-start;position:relative;z-index:1}
.bk-btn .go{margin-left:auto}
.bk-tel{position:relative;z-index:1;margin-top:18px;font:500 15px/1.5 var(--sans);color:rgba(242,236,225,.78)}
.tl{font-weight:700;color:var(--ochre-lt);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.tl:hover{text-decoration:underline}
.rv-box{margin-top:clamp(48px,6vw,72px);border-top:2px solid var(--text);padding-top:22px}
.rv-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:16px}
.rv-basis{font:500 14px/1.5 var(--sans);color:var(--text2)}
.kws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
.kws li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--pline);position:relative}
.kws li::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:calc(var(--v) * 100%);background:var(--ochre)}
.kws li:not(.kw-top)::after{background:rgba(176,118,62,.55)}
.kw-k{font:500 17px/1.45 var(--serif)}
.kw-top .kw-k{font-weight:700}
.kw-dot{flex:1;min-width:16px;border-bottom:1px dotted var(--pline2);transform:translateY(-4px)}
.kw-v{font:700 20px/1 var(--serif);font-family:'SKR',serif;color:var(--ochre-dk);white-space:nowrap}
.kw-v small{font:500 13px/1 var(--sans);color:var(--text2);margin-left:4px}

/* ── 사람이 사는 집(눈에 띄는 안내 상자) ── */
.hm{background:var(--ink);color:var(--paper);padding:clamp(80px,9vw,124px) 0;position:relative;overflow:hidden}
.hm::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 31px,var(--paper) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,var(--paper) 31px 32px)}
.hm-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hm .kick{color:var(--ochre-lt)}
.hm-h{font:800 clamp(28px,3vw,40px)/1.3 var(--serif);margin-bottom:34px}
.hm-box{position:relative;display:flex;align-items:center;gap:clamp(20px,3vw,40px);max-width:920px;width:fit-content;padding:clamp(30px,4vw,52px) clamp(26px,4.4vw,64px);
  background:var(--paper);color:var(--ink);text-align:left;box-shadow:0 0 0 6px var(--ink),0 0 0 7px var(--ochre-lt)}
.hm-art{width:clamp(64px,8vw,104px);height:auto;flex:none;color:var(--ochre)}
.hm-t{font:800 clamp(22px,2.6vw,34px)/1.5 var(--serif);text-wrap:pretty;max-width:16.5em}   /* 상자(fit-content)가 줄 바뀐 글 폭에 맞게 — 오른쪽 빈칸 없이 */
html:not([data-lang=ko]) .hm-t{font-size:clamp(20px,2.2vw,28px)}

/* ── 오시는 길 ── */
.lc{background:var(--paper);padding:clamp(80px,9vw,128px) 0}
.lc-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,80px);align-items:start}
.lf{margin:30px 0 24px;border-top:1px solid var(--pline2)}
.lf>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--pline)}
html:not([data-lang=ko]) .lf>div{grid-template-columns:110px minmax(0,1fr)}
.lf dt{font:600 14px/1.7 var(--sans);letter-spacing:.06em;color:var(--ochre-dk)}
.lf dd{font:500 17px/1.7 var(--serif)}
.addr{font-weight:700}
.addr-ko{display:flex;flex-direction:column;gap:6px;margin:12px 0 6px;padding:14px 16px;background:var(--paper2);border-left:3px solid var(--ochre)}
.addr-ko small{font:500 13.5px/1.5 var(--sans);color:var(--text2)}
.addr-k{font:700 21px/1.45 'SKR',serif}
.copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 14px;background:none;border:1px solid var(--pline2);border-radius:2px;font:600 14px/1 var(--sans);cursor:pointer}
.copy .ic{width:17px;height:17px}
.copy-ok{font-weight:500;color:var(--ochre-dk)}
.lc-btn{display:flex;flex-wrap:wrap;gap:10px}
.lc .bt-map{color:var(--ink);border-color:var(--pline2);background:var(--paper)}
.lc .bt-map:hover{border-color:var(--ochre-dk);color:var(--ochre-dk)}
.near{margin-top:36px}
.near .sm-h{margin-bottom:12px}
.near-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.near-l li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--paper2);border-top:2px solid var(--tile)}
.near-n{font:700 18px/1.45 var(--serif)}
.near-d{font:600 14px/1.4 var(--sans);color:var(--text2)}
.near-note{font:500 13.5px/1.5 var(--sans);color:var(--text2);margin-top:10px}
.map-box{position:relative;border:1px solid var(--pline2);overflow:hidden;background:#ece4d6}
.map-box img{width:100%;height:100%;object-fit:cover}
.ml{position:absolute;transform:translateY(-50%);max-width:calc(100% - 12px);font:600 14px/1.3 var(--serif);color:#4a5661;letter-spacing:.1em;white-space:nowrap;background:rgba(236,228,214,.75);padding:2px 6px}
.map-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px}
.map-pin i{width:18px;height:18px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 4px rgba(176,118,62,.28),0 0 0 9px rgba(176,118,62,.12);flex:none}
.map-pin b{font:800 15px/1 'SKR',serif;background:var(--ink);color:var(--paper);padding:7px 10px;white-space:nowrap}

/* ── 맨 아래 ── */
.ft{background:var(--ink);color:var(--paper);padding:clamp(64px,7vw,96px) 0 40px}
.ft-cta{display:flex;align-items:flex-start;gap:clamp(28px,4vw,56px);padding-bottom:44px}
.ft-plq{writing-mode:vertical-rl;text-orientation:upright;font:800 40px/1 'SKR',serif;letter-spacing:.14em;color:var(--paper);padding:18px 12px 22px;border:1px solid rgba(217,168,108,.55);border-top:0;flex:none}
.ft-act{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.ft-name{font:800 clamp(28px,3vw,40px)/1.2 var(--serif)}
.ft-name .i>span{display:block}
.ftn-k{font:600 15px/1.4 var(--sans);color:var(--ochre-lt);margin-top:8px;letter-spacing:.04em}
.ft-lines{border-top:1px solid var(--sline);padding-top:24px}
.ft-lines{display:flex;flex-wrap:wrap;gap:4px 28px;font:500 15px/1.6 var(--sans);color:rgba(242,236,225,.82);align-items:center}
.ft-ig{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--paper)}
.ft-ig .ic{width:18px;height:18px}
.ft-ig:hover{color:var(--ochre-lt)}
.ft-credit{font:500 13.5px/1.6 var(--sans);color:rgba(242,236,225,.7);margin-top:20px}
.ft-note{font:600 13.5px/1.6 var(--sans);color:var(--ochre-lt);margin-top:6px}

/* ── 움직임(위치만 — 투명도 시작 없음, 스크롤 없는 전체 캡처에서도 보이게) ── */
@keyframes up{from{transform:translateY(16px)}to{transform:none}}
html.js .rv.in{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.js .rv.in{animation:none}}

/* ── 반응형 ── */
@media (max-width:1300px){
  /* 영어 머리 로고(Ssangam Gotaek)가 길어 1280 에서 메뉴가 접히지 않게 */
  html[data-lang=en] .gn{padding:0 9px}
  html[data-lang=en] .gn::after{left:9px;right:9px}
}
@media (max-width:1180px){
  .gn{padding:0 9px;font-size:15px}
  .gn::after{left:9px;right:9px}
}
@media (max-width:1023px){
  .gnb{display:none}
  .burger{display:flex}
  .bds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-grid{grid-template-columns:1fr}
}
@media (min-width:861px){
  .map{position:sticky;top:calc(var(--hd) + 24px)}
}
@media (max-width:860px){
  .st-in,.lc-in{grid-template-columns:1fr}
  .st-ph img{aspect-ratio:1/1;object-position:50% 75%}
  .seal{max-width:none}
  .hd-call span{display:none}
  .hd-call{padding:0 12px}
}
@media (max-width:760px){
  :root{--hd:60px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hd-in{padding:0 16px;gap:10px}
  .logo-t{font-size:21px}
  .logo-s{font-size:12px;letter-spacing:.24em;padding-left:9px}
  .hero{height:auto;min-height:calc(100svh - var(--hd));max-height:none}
  .hero-in{min-height:calc(100svh - var(--hd));display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:0 20px 42px}
  .plaque{font-size:clamp(28px,min(5vh,10vw),46px);padding:16px 10px 20px;box-shadow:inset 0 0 0 4px rgba(27,25,22,.86),inset 0 0 0 5px rgba(217,168,108,.35)}
  /* 좁은 화면: 이름 유래는 현판 오른쪽 가로 한 단(먹색 판) — 사진 설명은 아래 오른쪽 */
  .origin,html[data-lang=en] .origin{position:static;writing-mode:horizontal-tb;white-space:normal;flex:1;max-width:320px;align-self:flex-start;margin-top:16px;
    font:600 14px/1.5 var(--serif);letter-spacing:.01em;padding:10px 12px;border:0;border-left:2px solid var(--ochre-lt);text-wrap:balance}
  .hero-h{font-size:clamp(44px,13vw,60px);margin-bottom:12px}
  html[data-lang=en] .hero-h{font-size:clamp(34px,10vw,46px)}
  .badge{font-size:13px;padding:6px 11px;margin-bottom:16px}
  .hero-lead{font-size:17px}
  .hero-lead2{font-size:14px;margin-bottom:18px}
  .hero-cap{bottom:12px;right:16px;max-width:calc(100% - 32px);font-size:12.5px}
  .hero::after{background:linear-gradient(0deg,rgba(20,18,16,.92) 0%,rgba(20,18,16,.7) 34%,rgba(20,18,16,.15) 62%,rgba(20,18,16,.2) 100%)}
  .cta{gap:10px}
  .cta-main{width:100%}
  .cta-main .bt{flex:1 1 auto}
  .bt{min-height:50px;padding:0 16px;font-size:15px}
  .bt-num{font-size:15px;padding-left:10px}
  .bt-map{min-height:44px;padding:0 13px;font-size:14px}
  .yr{gap:12px}
  .st-text p{font-size:17px}
  .seal{flex-direction:column;align-items:flex-start;gap:10px}
  .seal-y{border-right:0;padding-right:0}
  .bds{gap:10px}
  .bd{padding:18px 16px 20px;min-height:0}
  .roof{max-width:110px;margin-bottom:10px}
  .bd-n{font-size:24px}
  html:not([data-lang=ko]) .bd-n{font-size:19px}
  .fee thead{display:none}
  .fee,.fee tbody,.fee tr{display:block}
  .fee tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:18px 0;gap:6px 14px}
  .fe-n{overflow-wrap:anywhere}
  .fee tbody th{grid-column:1/-1;padding:0;grid-template-columns:30px 48px minmax(0,1fr);gap:0 12px}
  .art{width:48px;height:48px}
  .fe-no{font-size:18px}
  .fe-m,.fe-p{display:block;padding:0 0 0 60px}
  .fe-p{padding:0;text-align:right}
  .fe-w{grid-column:1/-1}
  .sy-act{max-width:none}
  .wk{table-layout:auto}
  .wk th{font-size:15px;padding:10px 2px}
  .fe-no{display:none}
  .fee tbody th{grid-template-columns:48px minmax(0,1fr)}
  .fe-m{padding-left:60px}
  .wk td{padding:14px 2px 16px}
  .wk-t{font-size:14px}
  .wk td i{height:14px;margin:4px auto}
  .wk-c{font-size:13px}
  .wk-m{font-size:12px}
  .fac{grid-template-columns:1fr}
  .kws{grid-template-columns:1fr}
  .bk{padding:28px 22px 24px}
  .hm-box{flex-direction:column;align-items:flex-start;text-align:left}
  .lf>div,html:not([data-lang=ko]) .lf>div{grid-template-columns:1fr;gap:2px}
  .near-l{grid-template-columns:1fr}
  .ft-cta{flex-direction:column}
  .ft-plq{writing-mode:horizontal-tb;border:0;border-left:3px solid var(--ochre-lt);padding:4px 0 4px 14px;font-size:28px}
}
@media (max-width:760px) and (max-height:700px){
  .hero-lead2{display:none}
  .hero-lead{margin-bottom:16px}
  .badge{margin-bottom:12px}
  .hero-h{font-size:clamp(38px,11vw,48px)}
}
@media (max-width:560px){
  /* 네 채: 한 줄에 한 채(지붕 선 왼쪽) — 좁은 두 칸에서 읽는 법·병기가 넘치지 않게 */
  .bds{grid-template-columns:1fr}
  .st-ph img{aspect-ratio:4/5;object-position:50% 70%}
  .bd{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center;padding:16px 18px}
  .bd .roof{grid-row:1 / span 2;margin:0}
  .bd-open{grid-column:2;padding-top:6px}
  .bd-k .nw{white-space:normal}
}
@media (max-width:480px){
  html[data-lang=en] .logo-s{display:none}   /* 로마자 둘째 이름이 머리 줄을 넘친다(412) — 첫 화면 h1 에 있다 */
}
@media (max-width:400px){
  .logo-s{display:none}
  .hd-call{display:none}
  .wk th{font-size:14px;padding:9px 1px}
  .wk td{padding:12px 1px 14px}
  .wk-t,.wk-c{font-size:12px}
  .wk-m{font-size:12px;letter-spacing:-.02em}
  .cta-dl{display:none}
  html:not([data-lang=ko]) .fe-n{font-size:18px}
}