/* Kent Kim — 작품이 화면을 먹는다. 글은 그 사이에 눕는다.
   아카이브(haena-kent)와 일부러 다른 얼굴이다. 같은 얼굴이면 도메인만 다를 뿐 한 사이트로 보인다. */

:root{
  --bg:#0d0c0b;
  --bg-2:#161412;
  --fg:#ece7dd;
  --fg-2:#a9a29a;
  --fg-3:#6f6961;
  --line:#2a2724;
  --gold:#c8a45c;      /* 작업에 쓰는 금색 */
  --silver:#b9bcc0;    /* 은색 */
  --maxw:1400px;
  --serif:"Cormorant Garamond","Noto Serif KR",Georgia,serif;
  --sans:"Inter","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);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:400;line-height:1.1;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,8vw,7rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin:0 0 1.15em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:660px}
.muted{color:var(--fg-3)}
.gold{color:var(--gold)}

/* ---------- 상단 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60}
.site-head::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,8,7,.72),rgba(8,8,7,0))}
.site-head .wrap{position:relative}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{font-family:var(--serif);font-size:1.2rem;letter-spacing:.06em;text-decoration:none;color:#fff}
.site-nav{display:flex;gap:24px;margin-inline-start:auto}
.site-nav a{text-decoration:none;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.75}
.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:1}
.lang-toggle{display:flex;gap:10px}
.lang-toggle button{border:0;background:transparent;font:inherit;font-size:.72rem;letter-spacing:.14em;
  color:#fff;opacity:.5;cursor:pointer;padding:4px 0}
.lang-toggle button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* ---------- 히어로: 그림 한 점이 화면을 가득 ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--bg-2);overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.92}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(10,9,8,.96) 0%,rgba(10,9,8,.86) 26%,rgba(10,9,8,.52) 52%,
                  rgba(10,9,8,.28) 74%,rgba(10,9,8,.55) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(48px,9vh,110px);width:100%}
.hero h1{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.75),0 1px 4px rgba(0,0,0,.5)}
.hero .sub{font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.6rem);color:#ded8ce;
  margin-top:22px;max-width:34ch;text-shadow:0 1px 20px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6)}
.hero .cap{position:absolute;z-index:2;right:28px;bottom:28px;text-align:end;
  font-size:.72rem;letter-spacing:.1em;color:var(--fg-3);max-width:40ch}
/* 히어로 이미지가 아직 없을 때: 글씨만으로 버틴다 */
.hero.no-image{min-height:88svh;background:
  radial-gradient(120% 90% at 70% 10%,#1c1916 0%,#0d0c0b 60%)}
.hero.no-image::after{display:none}

/* ---------- 섹션 ---------- */
section{padding:clamp(64px,10vw,140px) 0}
.eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2.3vw,1.75rem);line-height:1.5;color:var(--fg)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 작품 ---------- */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:clamp(20px,3vw,44px)}
.works.wide{grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr))}
figure{margin:0}
.frame{background:var(--bg-2);border:1px solid var(--line);aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame.landscape{aspect-ratio:4/3}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
figure:hover .frame img{transform:scale(1.03)}
.frame .await{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);padding:20px;text-align:center}
figcaption{margin-top:14px;font-size:.86rem;line-height:1.65;color:var(--fg-2)}
figcaption .t{font-family:var(--serif);font-size:1.15rem;color:var(--fg);display:block;margin-bottom:4px}
figcaption .m{color:var(--fg-3);font-size:.8rem}

/* ---------- 전면 밴드 ---------- */
.band{position:relative;height:min(78svh,760px);background:var(--bg-2);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band .cap{position:absolute;left:28px;bottom:24px;font-size:.72rem;letter-spacing:.1em;color:var(--fg-2)}

/* ---------- 인용 ---------- */
.pull{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.35;
  max-width:20ch;margin:0;color:var(--fg)}
.pull .em{color:var(--gold);font-style:italic}

/* ---------- 지도 ---------- */
.map-wrap{border:1px solid var(--line);background:var(--bg-2)}
#map{height:min(72svh,660px);width:100%}
/* OSM 표준 타일은 밝다. 타일만 반전시켜 어두운 지도로 만든다 —
   마커·팝업까지 반전되면 색이 뒤집히므로 타일 레이어에만 건다. */
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(.92) saturate(.5)}
.leaflet-control-attribution{background:rgba(13,12,11,.75)!important;color:#8b857c!important}
.leaflet-control-attribution a{color:#a9a29a!important}
.leaflet-control-zoom a{background:#1a1815!important;color:#ece7dd!important;border-color:#2a2724!important}
.map-fallback{padding:28px;color:var(--fg-2);font-size:.92rem}
.counts{display:flex;flex-wrap:wrap;border:1px solid var(--line);margin:0 0 36px}
.counts div{flex:1 1 min(170px,100%);padding:24px 26px;border-inline-end:1px solid var(--line)}
.counts div:last-child{border-inline-end:0}
.counts .n{font-family:var(--serif);font-size:2.4rem;line-height:1;display:block;color:var(--gold)}
.counts .l{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-top:10px;display:block}
/* 장소별 묶음 — 「133」은 장소가 아니라 그림 수라서 두 층으로 보인다 */
.place-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap:8px 56px;align-items:start}
.place-group{margin:0 0 30px;padding:0}   /* 전역 section 여백을 지운다 — 이게 없으면 위아래 140px 씩 벌어진다 */
.pg-name{font-size:1.15rem;color:var(--fg);padding-bottom:8px;border-bottom:1px solid var(--line)}
.pg-name .pg-alt{display:block;font-family:var(--sans);font-size:.76rem;letter-spacing:.08em;
  color:var(--fg-3);margin-top:5px}
.pg-works{list-style:none;margin:0;padding:0}
.pg-works li{border-bottom:1px solid var(--line)}
.pg-works a,.pg-works li>.w-word{display:flex;align-items:baseline;gap:10px;
  padding:9px 0;text-decoration:none}
.pg-works a:hover .w-word{color:var(--gold)}
.pg-works a:hover .w-play{opacity:1}
.w-n{flex:0 0 34px;font-size:.72rem;color:var(--fg-3);font-variant-numeric:tabular-nums;padding:9px 0}
.pg-works a{padding-inline-start:0}
.pg-works a .w-n{display:none}
.pg-works li{display:flex;align-items:baseline;gap:10px}
.pg-works li>a{flex:1 1 auto}
.w-word{font-family:var(--serif);font-size:1.12rem;color:var(--fg)}
.w-word.w-none{color:var(--fg-3);font-family:var(--sans);font-size:.86rem}
.w-en{color:var(--fg-3);font-size:.82rem}
.w-play{margin-inline-start:auto;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);opacity:.55}

/* ---------- 이력 ---------- */
.cv{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cv li{display:grid;grid-template-columns:104px 1fr;gap:22px;padding:15px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.cv .yr{font-family:var(--serif);color:var(--gold);font-size:1.05rem}
.cv .ev{color:var(--fg-2)}

/* ---------- 링크 ---------- */
.link{color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor}

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


@media (max-width:640px){
  .site-head .wrap{gap:10px;min-height:60px;flex-wrap:wrap;padding-block:10px}
  .site-nav{gap:14px;flex-wrap:wrap;margin-inline-start:0;order:3;width:100%}
  .site-nav a{font-size:.68rem;letter-spacing:.12em}
  .place-list{grid-template-columns:1fr}
  .cv li{grid-template-columns:82px 1fr;gap:14px}
}

/* 한국어 조판 */
html[lang="ko"] h1{font-size:clamp(2rem,5.5vw,4.4rem);line-height:1.25;letter-spacing:-.02em}
html[lang="ko"] h2{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.35}
html[lang="ko"] .lede{font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.7}
html[lang="ko"] .pull{font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.5;max-width:24ch}
html[lang="ko"] body{word-break:keep-all}

/* 장소 목록에 그 자리에서 그린 낱말 */
.place-list .word{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--gold);
  margin-top:2px;letter-spacing:.01em}
.leaflet-popup-content-wrapper{background:#161412;color:#ece7dd;border-radius:2px}
.leaflet-popup-tip{background:#161412}
.leaflet-container a.leaflet-popup-close-button{color:#6f6961}

/* ---------- 제안 페이지: 카드 ---------- */
.grid-3-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:34px}
.grid-2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(34px,5vw,72px);align-items:start}
.card{background:var(--bg);padding:clamp(26px,3vw,38px)}
.card-n{font-family:var(--serif);font-size:.9rem;color:var(--gold);letter-spacing:.1em;
  display:block;margin-bottom:14px}
.card h3{margin-bottom:12px}
.card p{color:var(--fg-2);font-size:.92rem;margin:0}

/* 히어로 캡션 — 첫 화면의 그림이 무엇이고 어디서 그렸는지, 그리고 그 영상으로 바로 간다 */
.hero .cap{line-height:1.7;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.hero .cap-link{color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor;
  font-size:.74rem;letter-spacing:.08em}
.hero .cap-link:hover{color:#e0c384}
@media (max-width:640px){
  .hero .cap{position:static;text-align:start;padding:0 28px;margin-top:18px}
}

/* 히어로 영상 — 사진 위에 겹쳐 깔린다. 파일이 없으면 이 요소 자체가 생기지 않는다. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}

/* ---------- 속페이지 머리: 검은 화면 대신 그림 한 점 ----------
   글벽 방지. 각 페이지 첫 화면에 그 페이지를 설명하는 사진을 깐다.
   .hero 의 장치를 그대로 쓰되 높이만 낮춘다 — 사진이 없으면 .no-image 로 떨어진다. */
.page-hero{min-height:clamp(360px,58svh,620px)}
.page-hero.no-image{min-height:clamp(300px,42svh,480px)}
.page-hero h1{max-width:20ch}
.page-hero .eyebrow{text-shadow:0 1px 14px rgba(0,0,0,.9)}
.page-hero .lede,.page-hero p{text-shadow:0 1px 18px rgba(0,0,0,.85)}
.page-hero .wrap{padding-top:clamp(90px,14vh,150px)}

/* 본문 사이에 끼우는 가로 밴드 — 글이 길어지는 자리를 그림으로 끊는다.
   ⚠️ 21/9 + object-fit:cover 로 두었더니 세로가 있는 사진에서 **그림이 반으로 잘려**
   나왔다(2026-09-03). 작품 사진을 자르면 안 된다 — 원본 비율 그대로 보여 준다.
   너무 커지지 않게 높이만 화면 기준으로 묶는다. */
.band{position:relative;margin:clamp(40px,6vw,84px) 0;overflow:hidden;
  border-radius:2px;background:var(--bg-2)}
.band .frame{aspect-ratio:auto;border:0;background:transparent}
.band .frame img{width:100%;height:auto;max-height:78svh;object-fit:contain;display:block}
/* 유튜브 임베드 — 16:9 로 고정한다. 추적 쿠키를 덜 심는 nocookie 도메인을 쓴다. */
.video-embed{position:relative;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.band figcaption{margin-top:12px;font-size:.78rem;letter-spacing:.06em;color:var(--fg-3)}
/* ---------- 문의 폼 — 이메일 주소를 화면에 적어두지 않는다 ---------- */
.contact-form{margin-top:28px;display:flex;flex-direction:column;gap:16px;max-width:440px}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;letter-spacing:.04em;color:var(--fg-3)}
.contact-form input,.contact-form textarea{font:inherit;font-size:.95rem;color:var(--fg);
  background:var(--bg-2);border:1px solid var(--line);border-radius:2px;padding:10px 12px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold)}
.contact-form button{align-self:flex-start;margin-top:4px;font:inherit;font-size:.85rem;letter-spacing:.06em;
  color:var(--bg);background:var(--gold);border:0;border-radius:2px;padding:11px 22px;cursor:pointer;transition:opacity .2s}
.contact-form button:hover{opacity:.85}
.contact-form .form-note{margin:0;font-size:.72rem;color:var(--fg-3)}