/*
  something visual
  색 3가지만 써요. 바꾸려면 아래 :root 의 --bg / --ink / --pop 세 줄만 고치면 전체가 바뀌어요
  글꼴: Monsieur La Doulaise(필기체) + Cormorant Garamond(세리프) + 고운바탕(한글), 모두 SIL OFL
  한글 글자를 새로 쓰면 _tools/make_font.sh 를 다시 실행해야 그 글자가 고운바탕으로 나와요
*/
@font-face{font-family:"SV Script";src:url("fonts/monsieur.woff2") format("woff2");font-display:block}
@font-face{font-family:"SV Serif";src:url("fonts/cormorant-400.woff2") format("woff2");font-display:block}
@font-face{font-family:"SV Serif";src:url("fonts/cormorant-400i.woff2") format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"SV Ko";src:url("fonts/gowun-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SV Ko";src:url("fonts/gowun-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#3A2219;   /* 배경: 초콜릿 */
  --ink:#F2C6A0;  /* 글자: 살구 */
  --pop:#7FC2AE;  /* 포인트: 민트 */
  --deep:#28160F; /* 영상 창 배경: 배경보다 한 단계 어둡게 */
  --pad:clamp(16px,3vw,84px);
  --script:"SV Script","Snell Roundhand","Apple Chancery",cursive;
  --serif:"SV Serif","Cormorant Garamond",Georgia,serif;
  --ko:"SV Ko","Gowun Batang","Noto Serif KR","Nanum Myeongjo",Batang,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bg);color-scheme:dark;scrollbar-color:var(--ink) var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--ko);font-weight:400;font-size:16px;line-height:1.7;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(127,194,174,.25)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
ul{list-style:none;padding:0}
img,video{display:block}
::selection{background:var(--pop);color:var(--bg)}
:focus-visible{outline:2px solid var(--pop);outline-offset:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:20;background:var(--ink);color:var(--bg);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}

/* ---------- 겹치는 제목 (필기체 + 세리프) ---------- */
.duo{--ser:clamp(84px,13vw,300px);--scr:calc(var(--ser) * .733);--sx:-22%;--rx:9%;
  display:flex;flex-direction:column;align-items:center;white-space:nowrap;font-weight:400;pointer-events:none;
  text-shadow:0 2px 22px rgba(22,10,6,.6)}
.duo .scr{font-family:var(--script);font-size:calc(var(--scr) * 1.3);line-height:.77;color:var(--pop);translate:var(--sx) 0}
.duo .ser{font-family:var(--serif);font-size:var(--ser);line-height:.8;letter-spacing:-.02em;
  margin-top:calc(var(--ser) * -.2);translate:var(--rx) 0}

/* ---------- 공통 글자 ---------- */
.ko{text-wrap:balance;font-weight:700;font-size:clamp(26px,3.1vw,84px);line-height:1.3;letter-spacing:-.01em;word-break:keep-all}
.lead{font-size:clamp(14px,1.2vw,30px);line-height:1.75;word-break:keep-all}
.lead span{display:block;text-wrap:balance}
.rule{display:block;width:max(48px,3.4vw);height:3px;background:var(--pop);margin:max(22px,2.4svh) 0}
.cap{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,40px);color:var(--pop);line-height:1.3;margin-bottom:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--ink);padding:.75em 1.5em;
  font-weight:700;font-size:clamp(15px,1.15vw,28px);line-height:1.2;transition:background .25s,color .25s,border-color .25s,translate .12s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:active{translate:0 1px}
.btn.fill{background:var(--ink);color:var(--bg)}
.btn.fill:hover{background:var(--pop);border-color:var(--pop)}

/* 액자: 영상과 썸네일을 감싸는 얇은 테두리 */
.mat{display:block;aspect-ratio:9/16;border:1px solid var(--ink);padding:max(6px,.8svh);
  transition:padding .35s var(--ease),border-color .35s}
.mat>span{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:var(--deep)}
.mat img,.mat video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 첫 화면 ---------- */
.hero{--fh:min(60svh,36vw);display:grid;grid-template-columns:1fr auto 1fr;height:100svh;min-height:520px;
  padding:clamp(14px,2.6svh,40px) var(--pad);overflow:clip}
.hero .duo{--ser:min(30svh,21vw);--scr:min(22svh,15vw);margin-top:calc(var(--scr) * -.72)}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.pair{display:flex;gap:clamp(10px,1.4vw,36px)}
.screen{display:flex;flex-direction:column;align-items:center;gap:8px}
.screen b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:max(20px,3.2svh);line-height:1;color:var(--pop)}
.screen .mat{height:var(--fh)}
.screen:hover .mat,.screen:focus-visible .mat{padding:2px;border-color:var(--pop)}
.screen:focus-visible{outline-offset:6px}
.side{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,5svh,70px) 0 clamp(8px,2svh,28px)}
.side.r{align-items:flex-end;text-align:right}
.inds{font-size:clamp(15px,1.35vw,34px);line-height:2}
.inds a,.more,.foot a,.mail{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
.inds a:hover,.foot a:hover{background-size:100% 1px;color:var(--pop)}
.inds a{display:inline-block;padding:0 0 1px}
.more{align-self:flex-start;color:var(--pop);font-size:clamp(15px,1.25vw,30px);background-size:100% 1px;padding-bottom:2px}
.more:hover{color:var(--ink)}

/* ---------- 작품 ---------- */
.work{padding:clamp(80px,14svh,200px) var(--pad) clamp(64px,10svh,160px)}
.work .duo{--sx:-34%;--rx:10%}
.filters{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2svh,30px);margin:clamp(40px,7svh,110px) 0 clamp(36px,6svh,90px)}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(22px,4vw,84px)}
.tab{font-family:var(--serif);font-size:clamp(28px,3.2vw,72px);line-height:1.2;padding:8px 2px 6px;min-height:44px;opacity:.6;
  border-bottom:3px solid transparent;transition:opacity .2s,border-color .2s,translate .12s}
.tab sup{font-family:var(--ko);font-size:.34em;margin-left:.35em;vertical-align:top;position:relative;top:.55em;font-variant-numeric:lining-nums}
.tab:hover{opacity:1}
.tab:active{translate:0 1px}
.tab[aria-pressed=true]{opacity:1;border-color:var(--pop)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px}
.chip{min-height:44px;padding:.5em 1.05em;font-size:clamp(15px,1.15vw,26px);line-height:1.3;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s,translate .12s}
.chip sup{font-size:.7em;margin-left:.35em;opacity:.75;vertical-align:baseline;position:relative;top:-.35em}
.chip:hover{border-color:var(--ink)}
.chip:active{translate:0 1px}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:700}
.note{color:var(--pop);font-size:clamp(14px,1.1vw,24px);display:flex;gap:1.4em;flex-wrap:wrap;justify-content:center}

/* 줄이 다 안 차면 가운데로 모여요 */
.grid{--cols:4;--gx:clamp(16px,2.4vw,60px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(36px,6svh,90px) var(--gx)}
.card{width:calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols) - .1px)}
.card button{display:flex;flex-direction:column;width:100%}
.card .who{color:var(--pop);font-size:clamp(12px,.95vw,22px);line-height:1.5}
.card .what{font-weight:700;font-size:clamp(15px,1.3vw,30px);line-height:1.35;word-break:keep-all;text-wrap:balance;margin:2px 0 clamp(8px,1svh,16px)}
.card .mat{width:100%;padding:max(5px,.45vw)}
.card button:hover .mat,.card button:focus-visible .mat{padding:2px;border-color:var(--pop)}
.card video{opacity:0;transition:opacity .3s}
.card.playing video{opacity:1}
.tag,.len{position:absolute;bottom:0;background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1;
  font-size:clamp(14px,1.05vw,24px);padding:.4em .7em .45em;z-index:1}
.tag{left:0;font-style:italic;color:var(--pop)}
.len{right:0;font-variant-numeric:lining-nums tabular-nums}

/* ---------- 문의 ---------- */
.contact{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(72px,12svh,180px) var(--pad);overflow:clip}
.contact .duo{--sx:-58%;--rx:6%;margin-bottom:clamp(28px,6svh,80px)}
.contact .lead{margin-top:clamp(10px,1.6svh,22px)}
.mail{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.6vw,84px);line-height:1.2;color:var(--pop);
  margin-top:clamp(22px,4svh,56px);padding-bottom:.06em;overflow-wrap:anywhere}
.mail:hover{background-size:100% 1px}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,4svh,52px)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px var(--pad) max(24px,env(safe-area-inset-bottom));
  font-size:clamp(13px,1vw,20px)}
.foot a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 영상 창 ---------- */
.viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--deep);color:var(--ink);overflow:hidden}
.viewer::backdrop{background:var(--deep)}
.v-track{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.v-track::-webkit-scrollbar{display:none}
.slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:auto minmax(0,26rem);
  justify-content:center;align-items:center;gap:clamp(24px,4vw,90px);padding:clamp(16px,4svh,56px) var(--pad)}
.slide .mat{height:min(88svh,calc((100vw - 2 * var(--pad)) * .9));padding:max(6px,.8svh)}
.slide .mat video{object-fit:contain}
.slide.wide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:center;gap:clamp(16px,3svh,36px)}
.slide.wide .mat{aspect-ratio:16/9;height:auto;width:min(100%,calc(62svh * 16 / 9))}
.slide.wide .info{width:min(100%,calc(62svh * 16 / 9));display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,60px);align-items:start}
.slide.wide .info dl{margin-top:0}
.info .c{color:var(--pop);font-size:clamp(14px,1.05vw,22px)}
.info .t{font-weight:700;font-size:clamp(22px,2.2vw,48px);line-height:1.3;word-break:keep-all;text-wrap:balance;margin-top:4px}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:.55em 1.2em;margin-top:clamp(18px,3svh,36px);font-size:clamp(14px,1.05vw,22px);line-height:1.5}
.info dt{font-family:var(--serif);font-style:italic;color:var(--pop);font-size:1.15em;line-height:1.3}
.info dd{margin:0;word-break:keep-all}
.v-bar{position:absolute;right:var(--pad);bottom:clamp(16px,4svh,56px);display:flex;align-items:center;gap:8px}
.v-count{font-family:var(--serif);font-size:clamp(18px,1.4vw,30px);font-variant-numeric:lining-nums tabular-nums;margin-right:10px}
.v-btn{min-height:44px;min-width:64px;padding:.5em 1em;border:1px solid var(--ink);font-weight:700;text-align:center;
  font-size:clamp(14px,1vw,22px);background:var(--deep);transition:background .2s,color .2s,translate .12s}
.v-btn:hover{background:var(--ink);color:var(--deep)}
.v-btn:active{translate:0 1px}
.v-btn:disabled{opacity:.35;pointer-events:none}
.v-close{position:fixed;top:clamp(12px,3svh,40px);right:var(--pad)}

/* ---------- 움직임: 첫 화면이 한 번 써지듯 등장 ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @keyframes sv-write{from{clip-path:inset(-45% 112% -45% -45%)}to{clip-path:inset(-45% -45% -45% -45%)}}
  @keyframes sv-rise{from{opacity:0;translate:var(--rx) .1em}to{opacity:1;translate:var(--rx) 0}}
  @keyframes sv-fade{from{opacity:0}to{opacity:1}}
  .hero .scr{animation:sv-write 1.6s .35s cubic-bezier(.65,.05,.2,1) both}
  .hero .ser{animation:sv-rise 1.1s .95s var(--ease) both}
  .hero [data-in="1"]{animation:sv-fade 1s .1s both}
  /* 아래 제목도 화면에 들어올 때 같은 식으로 써져요 */
  .js :is(.work,.contact) .duo:not(.in) .scr{clip-path:inset(-45% 112% -45% -45%)}
  .js :is(.work,.contact) .duo:not(.in) .ser{opacity:0}
  :is(.work,.contact) .duo.in .scr{animation:sv-write 1.4s .1s cubic-bezier(.65,.05,.2,1) both}
  :is(.work,.contact) .duo.in .ser{animation:sv-rise 1s .6s var(--ease) both}
  .hero [data-in="3"]{animation:sv-fade 1s 1.5s both}
  @keyframes sv-card{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
  .grid.swap .card{animation:sv-card .4s var(--ease) both}
  .grid.swap .card:nth-child(2){animation-delay:.04s}
  .grid.swap .card:nth-child(3){animation-delay:.08s}
  .grid.swap .card:nth-child(n+4){animation-delay:.12s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- 태블릿 ---------- */
@media (max-width:1100px){
  .grid{--cols:3}
}

/* ---------- 폰 ---------- */
@media (max-width:860px){
  .hero{--fh:min(42svh,78vw);grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;gap:34px 12px;
    height:auto;min-height:100svh;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:28px}
  .hero .duo{--ser:31vw;--scr:18vw;--sx:-4%}
  .center{grid-column:1/-1;grid-row:1;justify-content:flex-start}
  .side{padding:0;justify-content:flex-start;gap:14px}
  .rule{margin:10px 0}
  .side .ko{font-size:25px}
  .more{display:none}
  .inds{line-height:1.5}
  .inds a{padding:5px 0}
  .side .btn{padding:10px 16px}
  .work .duo,.contact .duo{--ser:27vw}
  .work .duo{--sx:-22%}
  .contact .duo{--sx:-48%}
  .grid{--cols:2;--gx:12px;gap:30px 12px}
  .chips{gap:4px}
  .chip{padding:.5em .8em}
  .slide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:center;gap:14px;
    padding:64px 16px 76px}
  .slide .mat{height:min(58svh,calc((100vw - 32px) * 16 / 9));padding:5px}
  .slide .info{width:100%}
  .slide.wide .info{grid-template-columns:1fr}
  .info dl{margin-top:10px;gap:.3em 1em}
  .slide.wide .info dl{margin-top:10px}
  .v-bar{left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
  .v-count{margin-right:auto}
  .v-close{top:max(12px,env(safe-area-inset-top));right:16px}
}
@media (max-width:860px) and (max-height:700px){
  .info dl{display:none}
}