/* Haenah-Kent — 두 개의 방을 가진 한 채의 집.
   물증이 주인공이고 디자인은 비켜선다. 규칙은 CLAUDE.md 를 볼 것. */

:root{
  --paper:#f6f4ef;
  --paper-2:#efece4;
  --ink:#191713;
  --ink-2:#4a453d;
  --ink-3:#7d766a;
  --line:#d8d3c7;
  --seal:#8c2f24;          /* 낙관 붉은색. 강조는 이것 하나뿐 */
  --maxw:1180px;
  --serif:"Cormorant Garamond","Apple SD Gothic Neo","Noto Serif KR",Georgia,"Times New Roman",serif;
  --sans:"Inter","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.center{text-align:center}
.muted{color:var(--ink-3)}
.serif{font-family:var(--serif)}

/* ---------- 상단 ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(246,244,239,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--seal)}
.site-nav{display:flex;gap:22px;margin-inline-start:auto;flex-wrap:wrap}
.site-nav a{
  text-decoration:none;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--seal)}
.lang-toggle{
  display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;
}
.lang-toggle button{
  border:0;background:transparent;font:inherit;font-size:.75rem;letter-spacing:.08em;
  padding:6px 12px;cursor:pointer;color:var(--ink-3);
}
.lang-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- 공통 블록 ---------- */
section{padding:clamp(56px,8vw,110px) 0}
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--seal);
  margin:0 0 18px;font-weight:600;
}
.rule{height:1px;background:var(--line);border:0;margin:0}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.5;color:var(--ink-2)}

/* ---------- 현관 ---------- */
.entrance{padding:clamp(70px,12vw,150px) 0 clamp(40px,6vw,70px)}
.entrance h1{max-width:16ch}
.bridge{
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.6;
  border-inline-start:2px solid var(--seal);padding-inline-start:22px;margin:36px 0 0;max-width:44ch;
}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--line);
  border-block:1px solid var(--line)}
.door{
  background:var(--paper);padding:clamp(34px,5vw,60px);text-decoration:none;display:block;
  transition:background .25s ease;
}
.door:hover{background:var(--paper-2)}
.door .years{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.door h2{margin:12px 0 14px}
.door p{color:var(--ink-2);margin:0}
.door .go{display:inline-block;margin-top:22px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--seal)}

/* ---------- 카드/그리드 ---------- */
.grid{display:grid;gap:34px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
figure{margin:0}
.plate{
  background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;overflow:hidden;
}
.plate img{width:100%;height:100%;object-fit:cover}
.plate.tall{aspect-ratio:3/4}
.plate.contain{background:#fff}
.plate.contain img{object-fit:contain}
.plate .await{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;padding:18px;
}
figcaption{margin-top:12px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
figcaption .t{font-family:var(--serif);font-size:1.05rem;color:var(--ink);display:block}
figcaption .m{color:var(--ink-3);font-size:.84rem}

/* 캡션 규격: Title (제목) / 재료 / 치수 / 연도 */
.caption-block{font-size:.88rem;line-height:1.7;color:var(--ink-2)}
.caption-block .t{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}

/* ---------- 명단 ---------- */
.roster{
  display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--serif);
  font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.9;color:var(--ink-2);
}
.roster span:not(:last-child)::after{content:"·";color:var(--seal);margin:0 .6em}

/* ---------- 연표 ---------- */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.timeline li{
  display:grid;grid-template-columns:96px 1fr;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.timeline .yr{font-family:var(--serif);color:var(--seal);font-size:1.05rem}
.timeline .ev{color:var(--ink-2)}

/* ---------- 물증 ---------- */
.evidence{background:var(--ink);color:var(--paper)}
.evidence .eyebrow{color:#d9a49c}
.evidence h2,.evidence .lede{color:var(--paper)}
.evidence .lede{color:#cdc7bb}
.evidence .plate{background:#211e19;border-color:#3a352d}
.evidence .plate .await{color:#8c857a}
.evidence figcaption{color:#cdc7bb}
.evidence figcaption .t{color:var(--paper)}
.label-card{
  background:#fffdf8;color:#191713;border:1px solid var(--line);
  padding:26px 28px;font-family:var(--sans);font-size:.82rem;line-height:1.9;letter-spacing:.04em;
  max-width:460px;
}
.label-card b{display:block;font-size:.95rem;letter-spacing:.08em;margin-bottom:6px}
.label-card .code{color:var(--seal);letter-spacing:.1em}

/* ---------- 지도 ---------- */
.map-wrap{position:relative;border:1px solid var(--line);background:var(--paper-2)}
#map{height:min(70vh,620px);width:100%}
.map-fallback{padding:28px;color:var(--ink-2);font-size:.92rem}
.map-legend{
  display:flex;gap:22px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3);
  padding:14px 0 0;
}
.count-strip{
  display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin:0 0 40px;background:#fff;
}
.count-strip div{flex:1 1 160px;padding:22px 24px;border-inline-end:1px solid var(--line)}
.count-strip div:last-child{border-inline-end:0}
.count-strip .n{font-family:var(--serif);font-size:2.2rem;line-height:1;display:block}
.count-strip .l{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;display:block}

.place-list{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.place-list li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.place-list .kr{color:var(--ink-3);font-size:.85rem;margin-inline-start:8px}

/* ---------- 인용 ---------- */
.pull{
  font-family:var(--serif);font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.45;
  color:var(--ink);max-width:22ch;margin:0;
}
.pull .em{color:var(--seal);font-style:italic}

/* ---------- 문의 ---------- */
.contact a{color:var(--seal);text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- 푸터 ---------- */
.site-foot{border-top:1px solid var(--line);padding:44px 0;font-size:.85rem;color:var(--ink-3)}
.site-foot .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
.site-foot a{color:var(--ink-2)}

/* ---------- 반응형 ---------- */
@media (max-width:760px){
  .site-head .wrap{min-height:auto;padding-block:12px;flex-wrap:wrap;gap:12px}
  .site-nav{gap:16px;order:3;width:100%;margin-inline-start:0}
  .place-list{columns:1}
  .timeline li{grid-template-columns:74px 1fr;gap:14px}
}

/* 아랍어는 쓰지 않지만 논리 속성으로 통일해 둔다(deother 규칙 승계) */

/* ---------- 한국어 조판 ----------
   한글은 같은 크기에서 라틴보다 훨씬 크게 보이고 줄바꿈이 잘 안 된다.
   제목만 한 단계 줄이고 자간·행간을 풀어 준다. */
html[lang="ko"] h1{font-size:clamp(1.9rem,4.2vw,3.1rem);letter-spacing:-.02em;line-height:1.3}
html[lang="ko"] h2{font-size:clamp(1.45rem,2.8vw,2.05rem);line-height:1.35}
html[lang="ko"] h3{font-size:clamp(1.05rem,1.8vw,1.2rem)}
html[lang="ko"] .lede{font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.7}
html[lang="ko"] .bridge{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.8}
html[lang="ko"] .pull{font-size:clamp(1.15rem,2.4vw,1.65rem);line-height:1.6;max-width:26ch}
html[lang="ko"] .roster{font-size:clamp(.98rem,1.7vw,1.15rem)}
html[lang="ko"] body{word-break:keep-all}   /* 한글은 어절 단위로 끊는다 */