/* ---- 홈 (ko / en) — 그림 한 점에서 시작해 지도를 연다 ----
   토큰은 site.css 의 :root 만 쓴다. 공통 부품(.wrap .head .eyebrow .card .wgrid .wcard .btn .daily)에 홈 전용 규칙만 얹는다.
   좁은 화면이 기본이고 861px 부터 두 단으로 넓힌다. 누르는 자리는 44px 이상. */

/* 1 첫 화면 — 글 | 그림 한 점. 그림은 배경이 아니다: 종이 틀(5:6) 안에 온전한 비례로 놓는다(자르지 않음).
   좁은 화면의 순서는 글 → 그림 → 입구 셋. 글자 크기와 틀 너비는 화면 높이도 함께 본다(min(vw, vh)) —
   낮은 노트북 화면에서도 이름·다섯 줄·입구·그림이 첫 화면 안에 들어오게. */
.hm-open{padding:clamp(24px,min(4.4vw,6vh),56px) 0 clamp(30px,4vw,52px)}
.hm-open-in{max-width:var(--max);margin:auto;padding:0 var(--gap);display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center}
.hm-left{display:contents}
.hm-copy{order:1}
.hm-work{order:2}
.hm-doors{order:3}
.hm-name{font-size:clamp(60px,min(8vw,13.5vh),120px);line-height:.96;letter-spacing:-.05em;margin:0 0 .16em}
.hm-name-sub{margin:0;font-size:12px}
.lang-en .hm-name{font-size:clamp(40px,min(5.3vw,9.4vh),80px);line-height:1;letter-spacing:-.015em;margin-bottom:.22em}
.lang-en .hm-name-sub{font-size:15px;letter-spacing:.32em}
.hm-lines{margin:clamp(20px,min(3vw,4.6vh),42px) 0 0;font-size:clamp(23px,min(2.35vw,4vh),34px);line-height:1.46;letter-spacing:-.02em}
.hm-lines span{display:block}
.hm-lines .hm-turn{margin-top:.55em}
.hm-doors{border-top:1px solid var(--line)}
.hm-doors a{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:54px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:clamp(18px,1.55vw,22px);line-height:1.3;letter-spacing:-.01em;transition:color .15s}
.hm-doors a::after{content:"→";flex:none;margin-top:-.2em;color:var(--gold);font:600 18px/1 var(--sans);transition:transform .15s}
.hm-doors a:hover{color:var(--gold-2)}
.hm-doors a:hover::after{transform:translateX(4px)}

.hm-work{--hm-h:100vh;position:relative;margin:0;justify-self:center;width:100%}
@supports (height:100svh){.hm-work{--hm-h:100svh}}
.hm-frame{position:relative;aspect-ratio:5/6;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.hm-frame img{position:absolute;top:0;left:0;width:100%;height:100%;padding:clamp(10px,1.3vw,18px);object-fit:contain}
.hm-frame .noimg,.hm-clv .noimg{text-align:center;font:13px/1.5 var(--sans);color:var(--muted);padding:16px}
.hm-frame .noimg b,.hm-clv .noimg b{display:block;font:600 26px/1.2 var(--serif);color:var(--gold);margin-bottom:6px}
.hm-work figcaption{margin-top:12px;font:13px/1.5 var(--sans);letter-spacing:.03em}
.hm-work figcaption a{color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .15s,border-color .15s}
.hm-work figcaption a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}   /* 그림 전체가 작품 쪽으로 가는 하나의 링크 */
.hm-work:hover figcaption a{color:var(--gold-2);border-color:var(--gold)}

@media (min-width:601px){
  /* 태블릿: 그림이 글 아래 첫 화면에 들어오는 크기로 */
  .hm-work{width:min(100%,clamp(420px,calc((var(--hm-h) - 480px)*.8333),620px))}
}
@media (min-width:861px){
  .hm-open-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,84px)}
  .hm-left{display:flex;flex-direction:column;min-width:0}
  .hm-copy,.hm-work,.hm-doors{order:0}
  .hm-doors{margin-top:clamp(22px,min(3vw,4.6vh),42px);max-width:540px}
  .hm-doors a{min-height:clamp(48px,7.5vh,54px)}
  .hm-work{justify-self:end;width:min(100%,clamp(260px,calc((var(--hm-h) - 232px)*.8333),620px))}
}

/* 구획 머리: 첫 화면의 이름보다 낮은 목소리로 */
.hm-sec .head{margin-bottom:22px}
.hm-sec .head h2{font-size:clamp(27px,3.1vw,42px);line-height:1.12;letter-spacing:-.03em}
.hm-sec .head p.lead{font-size:16px}
.hm-sec .head>.btn,.hm-more .btn,.hm-voice-more .btn{min-height:46px;padding:0 20px;font-size:14px}
.kind-home main a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.kind-home.lang-ko main{word-break:keep-all;overflow-wrap:break-word}   /* 한국어는 낱말 가운데서 줄을 끊지 않는다 */

/* 2 처음 만나는 작품 6점 — .wgrid/.wcard 를 두 단(좁은 화면)·세 단으로 */
.wgrid.hm-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hm-six .wcard .ph{aspect-ratio:3/2}
.hm-six .wcard .cb{padding:11px 12px 13px}
.hm-six .wcard .ct{font-size:clamp(16px,1.5vw,20px)}
.hm-more{margin:22px 0 0}
@media (min-width:861px){
  .wgrid.hm-six{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .hm-six .wcard .ph img{padding:12px}
  .hm-six .wcard .cb{padding:14px 16px 16px}
}

/* 3 오늘의 이야기 한 편 + 풍토일력 */
.card.hm-story{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3.4vw,52px);align-items:center;min-height:0;padding:clamp(20px,3vw,38px) clamp(20px,3.4vw,44px)}
.hm-story-n{font:400 clamp(44px,13vw,120px)/.86 var(--serif);letter-spacing:-.05em;color:var(--gold)}
.hm-story-b{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hm-story .hm-story-b h3{font-size:clamp(24px,2.6vw,36px);line-height:1.15;letter-spacing:-.03em;margin:0 0 6px}
.hm-story p.hm-story-w{font:13px/1.5 var(--sans);letter-spacing:.04em;color:var(--muted);margin:0 0 14px}
.hm-story p.hm-story-x{font-size:clamp(17px,1.5vw,20px);line-height:1.75;color:var(--ink-2);margin:0 0 16px;max-width:36em}
.hm-story .hm-story-b .go{margin-top:0;font-size:13px}
.hm-today .hm-story+.daily{margin-top:15px}
.hm-daily-only:not(:has(>.daily:not([hidden]))){display:none}   /* 일력만 있는 구획(en): 일력이 아직 비었거나 불러오지 못하면 빈 자리를 남기지 않는다 */

/* 4 화가의 목소리 — 실제 구술. 인용은 글자 그대로, 회차·날짜와 출전은 바로 아래에.
   좁은 화면: 머리말 → 인용 → 단추 / 넓은 화면: 머리말·단추(왼쪽) | 인용(오른쪽) */
.hm-voice-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.hm-voice .head{margin-bottom:0}
.card.hm-quote{margin:0;min-height:0;padding:clamp(22px,3vw,40px)}
.card.hm-quote:hover{border-color:var(--line)}   /* 링크가 아니다 — .card 의 hover 표시를 끈다 */
.hm-quote blockquote{margin:0 0 22px;padding:0 0 0 clamp(16px,1.8vw,24px);border-left:2px solid var(--gold);font-style:normal;color:var(--ink);font-size:clamp(18px,1.7vw,24px);line-height:1.85}
.hm-quote blockquote p{margin:0;font-size:inherit;color:inherit}
.hm-quote blockquote strong{font-weight:inherit}
.hm-quote blockquote em{font-style:normal;color:var(--muted)}
.hm-quote p.hm-src{font:600 12px/1.6 var(--sans);letter-spacing:.06em;color:var(--gold-2);margin:0 0 6px}
.hm-quote p.hm-pub{font:12px/1.7 var(--sans);color:var(--muted);margin:0}
.hm-pub span{display:block}
.hm-voice-more{margin:0}
@media (min-width:861px){
  .hm-voice-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,5vw,80px)}
  .hm-voice .head{grid-column:1;grid-row:1}
  .hm-quote{grid-column:2;grid-row:1/span 2}
  .hm-voice-more{grid-column:1;grid-row:2}
}

/* 5 색·선·여백 — 좁은 화면: 그림(왼쪽) + 글 / 넓은 화면: 세 장 */
.hm-clv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:15px}
.card.hm-clv{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);column-gap:16px;min-height:0;padding:16px}
.hm-clv .ph{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-s)}
.hm-clv .ph img{position:absolute;top:0;left:0;width:100%;height:100%;padding:6px;object-fit:contain}
.hm-clv p.hm-credit{font:11px/1.5 var(--sans);letter-spacing:.05em;color:var(--muted);margin:8px 0 0}
.hm-clv-b{display:flex;flex-direction:column;min-width:0}
.hm-clv .hm-clv-b h3{font-size:clamp(17px,1.4vw,20px);font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);margin:0 0 10px}
.hm-clv .hm-clv-b h3 b{font-size:1.7em;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-right:.12em}
.hm-clv .hm-clv-b h3 span{display:inline-block}   /* 뒷말은 한 덩어리로 다음 줄에 */
.hm-clv .hm-clv-b p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 16px}
@media (min-width:861px){
  .hm-clv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card.hm-clv{display:flex;padding:22px}
  .hm-clv .ph{aspect-ratio:3/2}
  .hm-clv .ph img{padding:10px}
  .hm-clv-b{flex:1;margin-top:16px}
}

/* 6 연구와 전체 아카이브 — 목차처럼 줄로. 숫자는 조용히 */
.hm-quiet{font:12px/1.6 var(--sans);letter-spacing:.14em;color:var(--muted);margin:0 0 10px}
.hm-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,4vw,64px)}
.hm-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;column-gap:16px;row-gap:2px;min-height:76px;padding:12px 4px;border-bottom:1px solid var(--line)}
.hm-index li:first-child a{border-top:1px solid var(--line)}
.hm-index b{font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.015em;transition:color .15s}
.hm-index span{grid-column:1;font:14px/1.55 var(--sans);color:var(--muted)}
.hm-index a::after{content:"→";grid-column:2;grid-row:1/span 2;color:var(--gold);font:600 15px/1 var(--sans);transition:transform .15s}
.hm-index a:hover b{color:var(--gold-2)}
.hm-index a:hover::after{transform:translateX(4px)}
@media (min-width:861px){
  .hm-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-index li:nth-child(2) a{border-top:1px solid var(--line)}
}

/* 7 전시·소식 — 100주년 띠 */
.card.hm-cent{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 22px;padding:20px 24px}
.card.hm-cent .num{color:var(--gold-soft)}
.hm-cent-copy{font-size:18px;line-height:1.4}
.card.hm-cent .go{margin-top:0;margin-left:auto;color:var(--gold-soft)}

/* aspect-ratio 를 모르는 옛 브라우저(iOS 14 이하): 그림 틀이 0 높이로 접히지 않게 높이를 잡아 준다 */
@supports not (aspect-ratio:1/1){
  .hm-frame::before{content:"";display:block;padding-top:120%}
  .hm-clv .ph::before{content:"";display:block;padding-top:100%}
  @media (min-width:861px){.hm-clv .ph::before{padding-top:66.67%}}
}

@media (prefers-reduced-motion:reduce){
  .hm-doors a::after,.hm-index a::after{transition:none}
}

/* ---- 그림 읽기 모듈 (대표작 바로 아래) ---- */
.hm-reading{padding-top:8px}
.hm-reading-head{max-width:760px;margin-bottom:26px}
.hm-reading-title{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em;margin:4px 0 14px}
.hm-reading-lines{font-size:clamp(18px,1.9vw,24px);line-height:1.5;margin:0 0 10px;color:var(--ink)}
.hm-reading-lines span{display:block}
.hm-reading-turn{color:var(--gold-2)}
.hm-reading-note{font:13px/1.6 var(--sans);color:var(--muted);margin:0}
.hm-reading-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.hm-reading-cards{grid-template-columns:1fr}}
.hm-rcard{min-height:0;padding:14px;gap:12px}
.hm-rcard-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--line-2)}
.hm-rcard-ph img{width:100%;height:100%;object-fit:contain;padding:8px}
.hm-rcard-b{display:flex;flex-direction:column;gap:6px}
.hm-rcard-b b{font-size:clamp(22px,2vw,26px);line-height:1.15}
.hm-rcard-b > span{font-size:15px;line-height:1.6;color:var(--ink-2)}
.hm-rcard-b .hm-credit{font:11px/1 var(--sans);letter-spacing:.06em;color:var(--gold);margin-top:4px}
/* ---- 사이트 소개와 공통 크레딧 ---- */
.hm-about{border-top:1px solid var(--line);margin-top:24px}
.hm-about-text{max-width:760px;font-size:15px;line-height:1.75;color:var(--ink-2);margin:0 0 12px}
.hm-credit-lines{font:600 12px/1.9 var(--sans);letter-spacing:.1em;color:var(--gold-2);margin:0}
.hm-credit-lines span{display:block}

/* 전시 한 건 (홈 7절) */
.card.hm-exh{min-height:0;margin-bottom:14px;padding:22px 24px 20px}
.card.hm-exh h3{font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.02em;margin:4px 0 14px}
.hm-exh-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:16px 0 0}
.hm-exh-more{font:500 13px var(--sans);color:var(--gold-2)}


/* 한 문장 소개와 짧은 관람 안내 (2026-10-04 재점검 R06·R07) */
.hm-intro{margin:10px 0 0;max-width:30em;font:16px/1.75 var(--sans);color:var(--ink-2)}
.hm-visit{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:26px 0 0;padding:14px 16px;
  border:1px solid var(--line);border-left:2px solid var(--gold-2);background:var(--paper);border-radius:0 var(--r-s) var(--r-s) 0;transition:background .15s,border-color .15s}
.hm-visit:hover{background:var(--paper-2);border-color:var(--gold)}
.hm-visit b{font:600 17px/1.4 var(--serif);color:var(--ink)}
.hm-visit-when{flex-basis:100%;font:13.5px/1.7 var(--sans);color:var(--muted)}
.hm-visit .go{font:12px/1.8 var(--sans);letter-spacing:.08em;color:var(--gold-2)}
@media (max-width:640px){.hm-visit{margin-top:20px}}
.nh-exh-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:12px 0 0}