/* ROOTIN_WJY — 포트폴리오 웹사이트
   결: 매거진 B · PIN–UP · POPEYE / 가는 글꼴(굵은 글꼴 쓰지 않음) / 먹 · 종이 · 주황 / 행림 파트만 차가운 회색 · 파랑 · Michroma */
:root{
  --paper:#eeeae3; --paper2:#e6e1d8; --ink:#1d1b19; --ink2:#5d5953; --line:rgba(29,27,25,.22);
  --orange:#dd6440; --orange-t:#b0442a; --cold:#dcdee0; --cold2:#cfd2d6; --blue:#2f55b5;
  --f-en:"Antonio","Arial Narrow",sans-serif; --f-ko:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace; --f-wide:"Michroma","Arial",sans-serif;
  --g:clamp(16px,3.2vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--f-ko);font-weight:300;font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:var(--paper)}

/* 질감 종이(작업판 종이를 화면 전체에 곱하기로) */
.paper{position:fixed;inset:0;z-index:0;pointer-events:none;background:url(img/paper_spread.webp) center/cover;mix-blend-mode:multiply;opacity:.55}
main,.foot,.bar{position:relative;z-index:1}

/* 커서 */
.cursor{position:fixed;left:0;top:0;z-index:50;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--ink);transition:width .35s,height .35s,margin .35s,background .35s;display:grid;place-items:center}
.cursor span{font:400 10px/1 var(--f-en);letter-spacing:.12em;color:var(--paper);opacity:0;transition:opacity .2s}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--orange)}
.cursor.big span{opacity:1}
@media (hover:none){.cursor{display:none}}

/* 위 막대 */
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:14px var(--g);mix-blend-mode:difference;color:#fff}
.mark{font:200 18px/1 var(--f-en);letter-spacing:.08em}
.bar nav{display:flex;gap:clamp(12px,2.4vw,32px);font:300 12px/1 var(--f-en);letter-spacing:.16em}
.bar nav a{position:relative}
.bar nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .4s}
.bar nav a:hover::after{right:0}
.prog{position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}

/* 공통 글 */
.kick{font:300 11px/1.4 var(--f-en);letter-spacing:.18em;text-transform:uppercase;color:var(--orange-t)}
.en{font:200 13px/1.3 var(--f-en);letter-spacing:.22em;color:var(--ink2)}
.tag{display:inline-block;font:400 11px/1 var(--f-ko);padding:6px 10px;border:1px solid var(--line);border-radius:99px;margin:0 6px 6px 0;white-space:nowrap}
.tag.pill{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tag.pill.o{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.spec{display:grid;gap:0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.spec dt{color:var(--ink2);font-weight:300}
.spec dd{font-weight:400}
figcaption{font:300 11px/1.5 var(--f-ko);color:var(--ink2);margin-top:8px}
figcaption b{font:300 10px/1 var(--f-en);letter-spacing:.14em;color:var(--ink);margin-right:6px}
.fr{overflow:hidden}
.fr img{width:100%;height:100%;object-fit:cover}

/* 1. 표지 */
.cover{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:calc(64px + env(safe-area-inset-top,0px)) var(--g) var(--g);position:relative}
.cover-top{display:flex;justify-content:space-between;font:300 11px/1 var(--f-en);letter-spacing:.2em;border-bottom:1px solid var(--line);padding-bottom:12px}
.inflate{align-self:center;font-family:var(--f-en);font-weight:100;font-size:clamp(64px,17.2vw,330px);line-height:.86;letter-spacing:-.01em;
  white-space:nowrap;display:flex;justify-content:center;user-select:none;cursor:default}
.inflate .ch{display:inline-block;font-variation-settings:"wght" 100;transform-origin:50% 85%}
.cover-bot{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--g);align-items:end;border-top:1px solid var(--line);padding-top:14px}
.who b{font-weight:300;font-size:20px;margin-right:10px}
.who{font:200 14px/1.4 var(--f-en);letter-spacing:.2em}
.who b{font-family:var(--f-ko);letter-spacing:0}
.sub{font-size:13px;color:var(--ink2)}
.cue{font:300 11px/1 var(--f-en);letter-spacing:.3em;writing-mode:vertical-rl;animation:cue 2.4s infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}

/* 2. 궤도 목록 */
.orbit{height:260vh;position:relative}
.orbit-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.orbit-center{position:relative;z-index:200;text-align:center;pointer-events:none}
.o-lab{font:100 clamp(60px,12vw,190px)/.9 var(--f-en);letter-spacing:.02em}
.o-no{font:300 11px/1 var(--f-en);letter-spacing:.24em;color:var(--orange-t);margin-top:18px}
.o-pause{margin-top:14px;pointer-events:auto;font:300 11px/1 var(--f-ko);background:none;border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--ink);cursor:pointer}
.o-pause[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.o-pause:focus-visible,.ocard:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.o-title{display:inline-block;font:200 clamp(18px,2.2vw,28px)/1.3 var(--f-ko);margin-top:8px;min-height:1.3em;background:var(--paper);padding:2px 12px}
.o-hint{font-size:11px;color:var(--ink2);margin-top:14px}
.orbit-ring{position:absolute;inset:0;touch-action:pan-y;cursor:grab}
.orbit-ring:active{cursor:grabbing}
.ocard{position:absolute;left:50%;top:50%;width:clamp(120px,15vw,220px);aspect-ratio:4/3;margin-left:calc(clamp(120px,15vw,220px)/-2);
  margin-top:calc(clamp(120px,15vw,220px)*-.375);transition:box-shadow .3s}
.ocard img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ocard span{position:absolute;left:0;top:calc(100% + 6px);font:300 10px/1 var(--f-en);letter-spacing:.18em}
.ocard:hover{box-shadow:0 0 0 1px var(--ink)}

/* 3. 내 작업 */
.sec-head{padding:18vh var(--g) 8vh;display:grid;gap:10px;justify-items:start}
.sec-t{font:100 clamp(60px,13vw,220px)/.85 var(--f-en);letter-spacing:.01em}
.sec-t.inflate{justify-content:flex-start;align-self:auto}
.sec-d{font-size:14px;color:var(--ink2)}
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);padding:0 var(--g) 22vh;position:relative}
.work::before{content:"";position:absolute;left:var(--g);right:var(--g);top:-6vh;border-top:1px solid var(--line)}
.hero{grid-column:1/-1;height:min(92svh,62vw);position:relative;overflow:hidden}
.dz .par{position:absolute;inset:0}
.dz .base,.dz .dot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dz .dot{image-rendering:pixelated;
  -webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),transparent 98%,#000 100%);
          mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),transparent 98%,#000 100%);
  animation:jit .25s steps(2) infinite}
@keyframes jit{0%{transform:translate(0,0) scale(1.004)}100%{transform:translate(-1px,1px) scale(1.004)}}
.hero-no{position:absolute;right:2vw;bottom:-2vw;font:100 clamp(120px,22vw,380px)/1 var(--f-en);color:var(--paper);mix-blend-mode:difference;pointer-events:none}
.work-head{grid-column:1/8;padding-top:4vh}
.wt{font:200 clamp(30px,4.4vw,64px)/1.12 var(--f-ko);letter-spacing:-.02em;margin:12px 0 10px;word-break:keep-all}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>i{display:inline-block;font-style:normal}
.work-body{grid-column:8/-1;padding-top:5vh;display:grid;gap:22px;align-content:start}
.deck{font-size:16px;line-height:1.75;word-break:keep-all}
.strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);margin-top:4vh}
.strip .fr{aspect-ratio:4/3}
.strip figure:nth-child(2){margin-top:8vh}.strip figure:nth-child(4){margin-top:4vh}
.plate{grid-column:3/-1;margin-top:8vh}
.plate .fr{background:var(--paper2)}
.plate .fr img{object-fit:contain;mix-blend-mode:multiply;max-height:80svh}
.work:nth-of-type(even) .plate{grid-column:1/11}

/* 4. 행림 FILES — 차가운 회색 · 파랑 · 넓은 글꼴 */
.files{background:var(--cold);position:relative;overflow:hidden}
.files::before{content:"";position:absolute;inset:0;background:url(img/paper_spread.webp) center/cover;mix-blend-mode:multiply;filter:grayscale(1);opacity:.6;pointer-events:none}
.files-head{position:relative;padding:16vh var(--g) 6vh;display:grid;gap:16px}
.files-head h2{font:400 clamp(40px,7vw,120px)/1 var(--f-wide);letter-spacing:.04em;color:var(--blue)}
.file-meta{font:400 10px/1.4 var(--f-wide);letter-spacing:.12em;color:var(--blue)}
.files-note{max-width:40em;font-size:13px;color:#4a4e55}
.files-track{position:relative;display:flex;flex-direction:column;gap:var(--g);padding:0 var(--g) 14vh}
.files.h .files-stage{height:100svh;display:flex;align-items:center;overflow:hidden}
.files.h .files-track{flex-direction:row;width:max-content;padding:0 var(--g)}
.files.h .file{width:min(78vw,1100px);height:min(80svh,760px)}
.files.h .file-img{min-height:0;height:100%}
.files.h .file-page{max-height:22svh;overflow:hidden}
.file{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--g);background:rgba(255,255,255,.35);border:1px solid rgba(47,85,181,.25);padding:var(--g);position:relative}
.file-tab{display:none;position:absolute;right:-1px;top:var(--t,18px);transform:translateX(100%);background:var(--blue);color:#fff;font:400 9px/1 var(--f-wide);letter-spacing:.1em;padding:8px 6px;writing-mode:vertical-rl}
.file-img{overflow:hidden;background:#e9ebed;min-height:420px}
.file-img img{width:100%;height:100%;object-fit:cover}
.file-txt{display:grid;gap:16px;align-content:start}
.file-txt h3{font:300 clamp(20px,2.2vw,30px)/1.3 var(--f-ko);word-break:keep-all}
.file .spec{border-color:rgba(47,85,181,.3)}
.file .spec div{border-color:rgba(47,85,181,.2);font-family:var(--f-mono);font-size:12px}
.file .tag.pill{background:var(--blue);border-color:var(--blue)}
.file .tag.pill.o{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.role{font-size:13px;line-height:1.7}
.role b{display:block;font:400 10px/1 var(--f-wide);letter-spacing:.12em;color:var(--blue);margin-bottom:6px}
.file-page{background:#fff;padding:8px;border:1px solid rgba(47,85,181,.2);max-width:300px}

.files.h .file-tab{display:block}

/* 5. 짧은 기사 */
.shorts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);padding:0 var(--g) 20vh}
.short .fr{aspect-ratio:16/10;margin-bottom:14px}
.short h3{font:200 26px/1.3 var(--f-ko);margin:6px 0}
.short p{font-size:13px;color:var(--ink2)}
.short .kick .tag{margin:0 0 0 4px;vertical-align:middle}

/* 6. 나 */
.about{display:grid;grid-template-columns:5fr 7fr;gap:var(--g);padding:10vh var(--g) 18vh;border-top:1px solid var(--line)}
.me{position:relative;aspect-ratio:2/3;overflow:hidden}
.about .wt span{font:200 .45em/1 var(--f-en);letter-spacing:.2em;color:var(--ink2);margin-left:8px}
.lst-t{font:300 11px/1 var(--f-en);letter-spacing:.2em;margin:34px 0 8px;color:var(--orange-t)}
.lst{list-style:none;border-top:1px solid var(--line)}
.lst li{display:grid;grid-template-columns:10em 1fr auto;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.lst li span{font:300 13px/1.6 var(--f-en);letter-spacing:.06em;color:var(--ink2)}
.lst li em{font-style:normal;font-size:12px}
.contact{margin-top:40px;display:flex;gap:18px;align-items:baseline;font:200 clamp(22px,3vw,40px)/1.2 var(--f-en);letter-spacing:.04em}
.contact span{font-size:11px;letter-spacing:.24em;color:var(--orange-t)}
.contact a{border-bottom:1px solid var(--line)}

.foot{padding:28px var(--g) calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:11px;color:var(--ink2)}

/* 휴대폰 */
@media (max-width:820px){
  body{font-size:14px}
  .bar nav a:nth-child(1){display:none}
  .cover-bot{grid-template-columns:1fr;gap:8px}.cue{display:none}
  .work-head,.work-body{grid-column:1/-1;padding-top:0}
  .hero{height:auto;aspect-ratio:var(--ar,16/9)}
  .hero-no{font-size:28vw}
  .strip{grid-template-columns:1fr 1fr}.strip figure{margin-top:0!important}
  .plate,.work:nth-of-type(even) .plate{grid-column:1/-1}
  .file{grid-template-columns:1fr}.file-img{min-height:56vw}
  .shorts-grid,.about{grid-template-columns:1fr}
  .lst li{grid-template-columns:1fr;gap:2px}
  .foot{flex-direction:column}
  .orbit{height:200vh}
}
@media (prefers-reduced-motion:reduce){
  .dz .dot,.cue{animation:none}
}