/* 꿈꾸는 자작나무 — 한소은 작가 (2026-10-15 3판: 현대 화랑식)
   흑 · 백 · 회색만. 글꼴은 Pretendard 한 벌, 굵기와 크기로만 위계. 사진은 전부 흑백으로 맞춤.
   장식 없음 — 힘은 큰 글자 · 큰 사진 · 여백에서. */
:root{
  --bg:#0c0c0b; --ink:#ecebe6; --mute:#8b8a84; --line:#262624; --dark:#141413;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gut:clamp(20px,4vw,56px); --head:68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font:400 16px/1.75 var(--sans);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:300;letter-spacing:-.04em;line-height:1.1}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
section[id]{scroll-margin-top:var(--head)}
.wrap{padding:0 var(--gut);max-width:1440px;margin:0 auto}
.label{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--mute);margin-bottom:20px}
.credit,figcaption{font-size:11.5px;color:var(--mute);letter-spacing:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-bottom:72px}
.sec-head .label{margin:0;color:var(--ink)}
.sec-head h2{font-size:clamp(44px,8vw,120px);font-weight:200;letter-spacing:-.05em;line-height:.9}

/* 머리 — 사진 위에서는 흰 글씨, 내려가면 바탕이 깔림 */
.top{position:fixed;inset:0 0 auto;height:var(--head);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);
  color:#fff;transition:background .4s,color .4s,border-color .4s;border-bottom:1px solid transparent}
.top.on{background:rgba(12,12,11,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);border-color:var(--line)}
.brand{font-size:16px;font-weight:400;letter-spacing:-.02em;text-decoration:none}
.nav{display:flex;gap:32px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;opacity:.75;transition:opacity .2s}
.nav a:hover{opacity:1}

/* 1. 첫 화면 — 흑백 숲 + 아주 큰 이름 */
.hero{position:relative;height:100svh;min-height:600px;color:#fff;overflow:hidden;background:#222}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;filter:grayscale(1) contrast(1.08) brightness(.62)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,11,.45) 0,rgba(12,12,11,0) 30%,rgba(12,12,11,.05) 50%,rgba(12,12,11,.85) 100%)}
.hero-in{position:absolute;inset:0;z-index:1;display:grid;grid-template-rows:1fr auto auto;padding:calc(var(--head) + 28px) var(--gut) 32px}
.hero-meta{display:flex;flex-direction:column;font-size:15px;font-weight:500;line-height:1.5}
.hero-name{font-size:clamp(110px,24vw,380px);font-weight:200;letter-spacing:-.065em;line-height:.82;margin:0 0 28px -.04em}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid rgba(255,255,255,.28);padding-top:18px;font-size:clamp(16px,1.5vw,20px);font-weight:300}
.hero-down{font-size:14px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.hero-down::after{content:"";width:1px;height:22px;background:#fff}
.hero-credit{position:absolute;z-index:1;right:var(--gut);top:calc(var(--head) + 30px);color:rgba(255,255,255,.6)}
/* 열 때 글자가 아래에서 밀려 올라옴 */
.ln{display:block;overflow:hidden}
.ln>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .ln>span{animation:up 1.2s cubic-bezier(.2,.8,.2,1) both}
  .hero-meta .ln:nth-child(2)>span{animation-delay:.08s}
  .hero-name .ln>span{animation-delay:.18s;animation-duration:1.4s}
  .hero-foot .ln>span{animation-delay:.5s}
  .hero-img img{animation:settle 3s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
@keyframes settle{from{transform:scale(1.12)}to{transform:scale(1)}}

/* 2. 작가의 말 — 큰 글 한 덩어리 */
.statement{padding:clamp(120px,14vw,200px) 0 clamp(100px,10vw,160px)}
.big{font-size:clamp(26px,3.4vw,52px);font-weight:300;letter-spacing:-.045em;line-height:1.28;max-width:20em;color:var(--mute)}
.big em{font-style:normal;color:var(--ink)}
.statement-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:clamp(64px,8vw,120px);padding-top:28px;border-top:1px solid var(--line)}
blockquote p{font-size:clamp(20px,1.9vw,26px);font-weight:300;letter-spacing:-.035em;line-height:1.45;max-width:16em}
blockquote cite{display:block;margin-top:16px;font-style:normal;font-size:13px;color:var(--mute)}
.small{color:var(--mute);max-width:30em}

/* 3. 사진 두 장 — 어긋나게 */
.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gut);padding:0 var(--gut) clamp(120px,12vw,180px);max-width:1440px;margin:0 auto}
.pair figure img{width:100%;filter:grayscale(1)}
.pair figcaption{margin-top:10px}
.pair-a{grid-column:1/8}
.pair-a img{aspect-ratio:4/5;object-fit:cover}
.pair-b{grid-column:9/13;align-self:end}
.pair-b img{aspect-ratio:3/4;object-fit:cover}
.pair-note{grid-column:9/13;grid-row:1;align-self:start;font-size:15px;color:var(--mute);max-width:22em;padding-top:8px}

/* 4. 작품 — 큰 제목 목록, 누르면 펼침 */
.works{padding-bottom:clamp(120px,12vw,180px)}
.index{list-style:none;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;transition:padding .45s cubic-bezier(.2,.8,.2,1),color .3s}
.index summary::-webkit-details-marker{display:none}
.index .t{font-size:clamp(30px,4.6vw,72px);font-weight:200;letter-spacing:-.05em;line-height:1.05}
.index .m{font-size:14px;color:var(--mute);white-space:nowrap;display:flex;align-items:center;gap:14px}
.index .m::after{content:"";width:14px;height:14px;flex:none;background:linear-gradient(currentColor,currentColor) center/14px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 14px no-repeat;transition:transform .4s}
.index details[open] .m::after{transform:rotate(45deg)}
.index summary:hover{padding-left:18px}
.index:hover summary{color:#4a4a46}
.index summary:hover,.index details[open] summary{color:var(--ink)}
.index details p{font-size:clamp(16px,1.3vw,19px);max-width:34em;padding:0 0 32px;color:var(--mute)}
.index details[open] p{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.works-note{margin-top:28px;font-size:14px;color:var(--mute)}

/* 5. 숲 띠 */
.band{position:relative;height:110vh;overflow:hidden;color:#fff;background:#222}
.band img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;filter:grayscale(1) brightness(.5);will-change:transform}
.band figcaption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut);color:#fff}
.band figcaption span{font-size:clamp(26px,3.6vw,56px);font-weight:200;letter-spacing:-.05em;line-height:1.2}
.band .credit{position:absolute;right:var(--gut);bottom:20px;color:rgba(255,255,255,.6)}

/* 6. 전시 */
.shows{padding:clamp(120px,12vw,180px) 0}
.count{display:flex;align-items:flex-end;gap:18px;margin-bottom:56px}
.count strong{font-size:clamp(120px,16vw,240px);font-weight:100;letter-spacing:-.07em;line-height:.78;font-variant-numeric:tabular-nums}
.count span{font-size:18px;font-weight:300;line-height:1.35;padding-bottom:4px}
.count small{font-size:13px;color:var(--mute);font-weight:400}
.rows{list-style:none;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:120px 1.4fr 1fr 60px;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:background .3s}
.rows .y{font-size:15px;font-weight:300;color:var(--mute);font-variant-numeric:tabular-nums}
.rows .n{font-size:clamp(20px,1.9vw,28px);font-weight:300;letter-spacing:-.04em}
.rows .n small{display:block;font-size:13px;font-weight:400;color:var(--mute);letter-spacing:0;margin-top:4px}
.rows .p{color:var(--mute)}
.rows a{font-size:13px;justify-self:end;text-underline-offset:4px}
.rows li:hover{background:#121211}

/* 7. 약력 — 검은 면 */
.cv{background:var(--dark);color:#f2f2f0;padding:clamp(120px,12vw,180px) 0}
.cv .sec-head{border-color:#2c2c2a}
.cv .sec-head .label{color:#f2f2f0}
.cv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.cv-grid div{border-top:1px solid #3a3a38;padding-top:18px}
.cv-grid dt{font-size:13px;color:#8d8d88;margin-bottom:14px}
.cv-grid dd{font-size:17px;line-height:1.7;font-weight:300}

/* 8. 수업 */
.teach{display:grid;grid-template-columns:7fr 5fr;align-items:end;gap:var(--gut);padding:clamp(120px,12vw,180px) var(--gut);max-width:1440px;margin:0 auto}
.teach img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1)}
.teach figcaption{margin-top:10px}
.teach h2{font-size:clamp(30px,3.4vw,52px);margin-bottom:24px;font-weight:200}
.teach-text p:not(.label){color:var(--mute);margin-bottom:36px;max-width:24em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;font-size:15px;font-weight:400;letter-spacing:.02em;transition:transform .2s,background .4s,color .4s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:active{transform:scale(.97)}

/* 9. 자주 묻는 질문 */
.faq{padding:0 0 clamp(120px,12vw,180px)}
.faq-grid .sec-head{margin-bottom:24px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:24px 0;font-size:clamp(18px,1.6vw,22px);font-weight:300;letter-spacing:-.03em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-weight:300;font-size:24px;line-height:1;transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{color:var(--mute);padding:0 0 26px;max-width:40em}

/* 10. 문의 */
.contact{padding:clamp(120px,12vw,180px) 0;border-top:1px solid var(--line)}
.contact-big{font-size:clamp(40px,6.4vw,104px);font-weight:200;letter-spacing:-.06em;line-height:1.02;margin-bottom:56px}
.contact-slot{display:inline-block;border:1px solid var(--line);padding:28px 32px;min-width:min(100%,460px)}
.contact-slot p{font-size:20px;font-weight:300;letter-spacing:-.03em;margin-bottom:4px}
.contact-slot small{font-size:13px;color:var(--mute)}

/* 바닥 */
.foot{background:var(--bg);color:var(--mute);padding:96px 0 36px;border-top:1px solid var(--line)}
.foot-name{font-size:clamp(52px,11vw,180px);font-weight:100;letter-spacing:-.06em;line-height:.9;color:var(--ink);margin-bottom:64px}
.foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;border-top:1px solid var(--line);padding-top:18px}
.foot-row a{text-underline-offset:3px}

/* 스크롤 — 글은 살짝 떠오르고, 사진은 아래에서 위로 걷힘 */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.js [data-r].in{opacity:1;transform:none}
.js [data-wipe] img{clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1),transform 2s cubic-bezier(.2,.8,.2,1)}
.js [data-wipe].in img{clip-path:inset(0);transform:none}
@media (prefers-reduced-motion:reduce){.js [data-r],.js [data-wipe] img{opacity:1;transform:none;clip-path:none;transition:none}}

/* 휴대폰 */
@media screen and (max-width:860px){
  :root{--head:58px}
  .nav{gap:16px;font-size:13px}
  .nav a:nth-child(1),.nav a:nth-child(4){display:none}
  .hero-name{font-size:31vw;margin-bottom:20px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-credit{top:auto;bottom:8px}
  .sec-head{margin-bottom:44px}
  .statement-row{grid-template-columns:1fr;gap:28px}
  .pair{grid-template-columns:1fr 1fr;gap:28px 14px}
  .pair-a{grid-column:1/3}
  .pair-b{grid-column:2/3;grid-row:2}
  .pair-note{grid-column:1/2;grid-row:2;align-self:end}
  .index summary{flex-direction:column;align-items:flex-start;gap:6px;padding:20px 0}
  .index summary:hover{padding-left:0}
  .index .m{font-size:13px}
  .band{height:80vh}
  .rows li{grid-template-columns:1fr auto;gap:6px 16px}
  .rows .y{grid-column:1/3}
  .rows .n{grid-column:1/2}
  .rows .p{grid-column:1/2;font-size:14px}
  .rows a{grid-column:2/3;grid-row:2/4;align-self:center}
  .cv-grid{grid-template-columns:1fr;gap:28px}
  .teach{grid-template-columns:1fr}
  .contact-slot{display:block}
  .foot-row{flex-direction:column;gap:8px}
}

/* 사진 두 장 — 작은 사진과 글을 큰 사진 옆 한 칸에 */
@media screen and (min-width:861px){
  .pair-b{grid-row:1;align-self:end}
  .pair-note{grid-row:1}
}
.contact{border-top:none}

/* 먹색 판 손질 — 사진은 올리면 천천히 밝아짐, 약력 면은 한 단계 밝게 */
.pair figure img,.teach img{transition:filter 1.2s ease,clip-path 1.4s cubic-bezier(.7,0,.2,1),transform 2s cubic-bezier(.2,.8,.2,1);filter:grayscale(1) brightness(.85)}
.pair figure:hover img,.teach figure:hover img{filter:grayscale(1) brightness(1)}
.cv{background:var(--dark)}
.big em{font-weight:400}
:focus-visible{outline-color:var(--ink)}
::selection{background:var(--ink);color:var(--bg)}