/* ==========================================================
   전찬우 portfolio — shared system
   Sizing rule (Plus X 방식): Figma px ÷ 10 = rem
   - PC  (≥1024): 1920 시안 기준, 1rem = 100vw / 192
   - MO  (<1024): 375 시안 기준,  1rem = 100vw / 37.5 (최대 15px)
   글자는 PC에서 max()로 최소 px를 지켜서 1024~1440에서도 읽히게 해요.
   ========================================================== */

:root{
  --paper:#FFFFFF;
  --paper-2:#F6F6F6;
  --ink:#0A0A0A;
  --sub:#555555;
  --mute:#767676;
  --line:#E6E6E6;
  --dark:#0A0A0A;
  --dark-2:#1A1A1A;
  --on-dark:#FFFFFF;
  --on-dark-sub:#A3A3A3;
  --on-dark-line:#2A2A2A;
  --accent:#FFFFFF;        /* 강조(어두운 배경) — 브랜드 컬러 없이 흑백만 */
  --accent-ink:#0A0A0A;    /* 강조(밝은 배경) */

  --fs-hero:max(9.2rem, 40px);
  --fs-h2:max(5.2rem, 28px);
  --fs-h3:max(3rem, 21px);
  --fs-lead:max(2.6rem, 18px);
  --fs-body:max(1.9rem, 15px);
  --fs-small:max(1.6rem, 13px);
  --fs-label:max(1.4rem, 12px);
  --fs-num:22rem;

  --pad-x:16rem;
  --sec-y:20rem;
  --phone:32rem;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{font-size:calc(100vw / 192)}
@media (max-width:1023px){
  html{font-size:min(calc(100vw / 37.5), 15px)}
  :root{
    --fs-hero:3.6rem; --fs-h2:2.8rem; --fs-h3:2rem; --fs-lead:1.8rem;
    --fs-body:1.5rem; --fs-small:1.3rem; --fs-label:1.15rem; --fs-num:8.8rem;
    --pad-x:2rem; --sec-y:8rem; --phone:20rem;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  font-size:var(--fs-body);line-height:1.65;letter-spacing:-0.01em;
  word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ink);color:#fff}

/* ---------- type ---------- */
.label{font-size:var(--fs-label);font-weight:600;letter-spacing:.02em;color:var(--mute);text-transform:uppercase}
/* 제목 + 보조 정보: 괄호 대신 세로 구분선, 위계는 굵기·명도로 */
.tl{display:flex;flex-wrap:wrap;align-items:center;row-gap:.4em}
.tl > *{display:inline-flex;align-items:center}
.tl > * + *::before{content:"";flex:none;width:1px;height:.9em;margin:0 .8em;background:currentColor;opacity:.25}
.tl-sub{font-weight:500;opacity:.55}
/* 라벨 안에서는 주 텍스트를 진하게, 보조는 기본 회색 그대로(대비 확보) */
.label.tl > :first-child{color:var(--ink)}
.is-dark .label.tl > :first-child{color:var(--on-dark)}
.label .tl-sub{opacity:1}
.h-hero{font-size:var(--fs-hero);font-weight:600;line-height:1.18;letter-spacing:-0.035em}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:1.25;letter-spacing:-0.03em}
.h3{font-size:var(--fs-h3);font-weight:700;line-height:1.38;letter-spacing:-0.02em}
.lead{font-size:var(--fs-lead);font-weight:500;line-height:1.55;letter-spacing:-0.02em}
.small{font-size:var(--fs-small);line-height:1.6}
.sub{color:var(--sub)}
.num{font-size:var(--fs-num);font-weight:700;line-height:.9;letter-spacing:-0.05em;font-variant-numeric:tabular-nums}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--sec-y) var(--pad-x)}
.is-dark{background:var(--dark);color:var(--on-dark)}
.is-dark .sub{color:var(--on-dark-sub)}
.is-dark .label{color:#8A8A8A}
.is-tone{background:var(--paper-2)}

.split{display:grid;grid-template-columns:56rem 1fr;gap:12rem;align-items:center}
.split.rev{grid-template-columns:1fr 56rem}
.split.rev > .txt{order:2}
.split > *,.sec-head > *{min-width:0}
.stack > * + *{margin-top:2.4rem}
.sec-head{display:grid;grid-template-columns:56rem 1fr;gap:12rem;margin-bottom:14rem}
@media (max-width:1023px){
  .split,.split.rev,.sec-head{grid-template-columns:1fr;gap:4rem}
  .split.rev > .txt{order:0}
  .sec-head{margin-bottom:5rem}
  .stack > * + *{margin-top:1.4rem}
}

/* ---------- header (floating glass bar) ---------- */
.hd{position:fixed;z-index:60;inset:0 0 auto 0;padding:1.6rem 4rem;pointer-events:none}
.hd-bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:max(6.4rem,52px);padding:0 1rem 0 2.8rem;border-radius:99rem;color:var(--ink);
  border:1px solid transparent;background:transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .3s}
.hd.is-scrolled .hd-bar{
  background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.hd.on-dark .hd-bar{color:var(--on-dark)}
.hd.is-scrolled.on-dark .hd-bar{background:rgba(24,24,23,.55);border-color:rgba(255,255,255,.1);
  box-shadow:0 1.6rem 4rem rgba(0,0,0,.3)}
.hd-left{display:flex;align-items:center;gap:1.4rem}
.hd-home{display:grid;place-items:center;width:max(3.6rem,32px);height:max(3.6rem,32px);border-radius:50%;color:inherit;transition:background-color .3s}
.hd-home:hover{background:rgba(0,0,0,.06)}
.hd.on-dark .hd-home:hover{background:rgba(255,255,255,.12)}
.hd-home svg{width:55%;height:55%}
.hd-name{display:flex;align-items:baseline;gap:1.2rem;text-decoration:none;font-size:var(--fs-label)}
.hd-name b{font-size:max(1.7rem,15px);font-weight:700;letter-spacing:-0.02em}
.hd-name span{font-weight:500;opacity:.7}
.hd-right{display:flex;align-items:center;gap:2.4rem}
.hd-menu{display:flex;align-items:center;gap:1.2rem;height:max(4.4rem,38px);padding:0 1.2rem 0 2rem;border-radius:99rem;
  border:0;cursor:pointer;font:inherit;font-size:var(--fs-label);font-weight:700;background:var(--ink);color:var(--paper);
  transition:background-color .3s,color .3s,transform .3s var(--ease)}
.hd-menu:hover{transform:scale(1.04)}
.hd-menu:focus-visible,.mn a:focus-visible,.hd-name:focus-visible,.hd-home:focus-visible,.dock button:focus-visible,.dock a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hd.on-dark .hd-menu{background:var(--on-dark);color:var(--ink)}
.hd-burger{position:relative;width:1.8rem;height:1.2rem;min-width:14px;min-height:10px}
.hd-burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.hd-burger i:first-child{top:0}.hd-burger i:last-child{top:calc(100% - 2px)}
.menu-open .hd-burger i:first-child{top:calc(50% - 1px);transform:rotate(45deg)}
.menu-open .hd-burger i:last-child{top:calc(50% - 1px);transform:rotate(-45deg)}
@media (max-width:1023px){
  .hd{padding:1rem 1.2rem}
  .hd-bar{padding:0 .6rem 0 1.6rem}
  .hd-name span{display:none}
  .hd-menu{padding:0 1rem 0 1.4rem}
}

/* ---------- menu overlay ---------- */
.menu-open body{overflow:hidden}
.mn{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  opacity:0;transition:opacity .45s var(--ease);overflow-y:auto}
.mn.is-open{opacity:1}
.mn-in{min-height:100%;display:grid;grid-template-columns:1fr 38rem;grid-template-rows:1fr auto;gap:6rem 10rem;
  padding:16rem 16rem 5rem}
.mn-label{font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
/* Work: 프로젝트 이름만 크게, 선 없이 여백으로 구분 */
.mn-list{list-style:none;margin-top:4rem;display:grid;gap:4.8rem}
.mn-name{font-size:max(6.4rem,30px);font-weight:600;letter-spacing:-0.04em;line-height:1.1;column-gap:0}
.mn-name a{text-decoration:none;transition:opacity .3s}
.mn-name a:hover{opacity:.6}
.mn-name .tl-sub{font-size:max(1.6rem,13px);letter-spacing:-0.01em;align-self:flex-end;margin-bottom:.9rem;color:var(--mute);opacity:1}
.mn-name > :first-child + .tl-sub{margin-left:2.4rem}
.mn-name > :first-child + .tl-sub::before{display:none}
.mn-case.is-soon .mn-name > :first-child{color:#BDBDBD}
.mn-side{display:flex;flex-direction:column;gap:2rem;padding-top:6.6rem}
.mn-about{display:flex;flex-direction:column;gap:1rem;padding:3.2rem;border-radius:1.6rem;background:var(--paper-2);text-decoration:none;
  transition:background-color .3s}
.mn-about:hover{background:#EDEDED}
.mn-about b{font-size:max(3rem,20px);font-weight:700;letter-spacing:-0.03em;word-break:break-all}
.mn-about > span:last-child{font-size:var(--fs-small);color:var(--sub)}
.mn-foot{grid-column:1/-1;font-size:var(--fs-label);color:var(--sub)}
/* stagger */
.mn-case,.mn-about,.mn-label{opacity:0;transform:translateY(3rem);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.mn.is-open .mn-case,.mn.is-open .mn-about,.mn.is-open .mn-label{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0) * .05s)}
@media (max-width:1023px){
  .mn-in{grid-template-columns:1fr;grid-template-rows:auto;gap:4rem;padding:10rem var(--pad-x) 3rem}
  .mn-list{margin-top:2rem;gap:3.2rem}
  .mn-name{font-size:3.4rem;row-gap:.6rem}
  .mn-name > :first-child{flex-basis:100%}
  .mn-name > :first-child + .tl-sub{margin-left:0}
  .mn-name .tl-sub{margin-bottom:0}
  .mn-side{padding-top:0;gap:1.2rem}
  .mn-about{padding:2rem;border-radius:1.6rem}
  .mn-about b{font-size:2rem}
}

/* ---------- 외부 링크 (새 창) ---------- */
.ext{display:inline-grid;place-items:center;width:max(3.2rem,28px);height:max(3.2rem,28px);border-radius:50%;color:var(--mute);background:var(--paper-2);text-decoration:none;transition:background-color .3s,color .3s;flex:none}
.ext:hover{background:var(--ink);color:#fff}
.ext svg{width:55%;height:55%}
.is-dark .ext{background:var(--dark-2);color:var(--on-dark-sub)}
.is-dark .ext:hover{background:#fff;color:var(--ink)}
.ext-link{display:inline-flex;align-items:center;gap:.4em;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.ext-link svg{width:1em;height:1em}
.mn-name .ext{align-self:flex-end;margin:0 0 .4rem 1.6rem}
.mn-name .ext::before{display:none}

/* ---------- chapter dock (하단 플로팅) + top ---------- */
.dock{position:fixed;z-index:50;left:0;right:0;bottom:max(2.4rem,16px);display:flex;justify-content:center;pointer-events:none}
.dock-btn,.dock-panel,.to-top{pointer-events:auto}
.dock-btn{display:flex;align-items:center;gap:1.6rem;height:max(5.6rem,48px);padding:0 2rem 0 2.4rem;border:0;border-radius:99rem;cursor:pointer;
  font:inherit;font-size:var(--fs-small);color:#fff;background:rgba(10,10,10,.88);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1rem 3rem rgba(0,0,0,.18);
  opacity:0;transform:translateY(2rem);visibility:hidden;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s}
.dock.has-cur .dock-btn{opacity:1;transform:none;visibility:visible}
.dock-cur{font-weight:600;white-space:nowrap}
.dock-cur .tl-sub{opacity:.6}
.dock-btn svg{width:1.6rem;height:1.6rem;min-width:14px;transition:transform .4s var(--ease)}
.dock.is-open .dock-btn svg{transform:rotate(180deg)}
.dock-panel{position:absolute;bottom:calc(100% + 1rem);left:50%;transform:translateX(-50%);min-width:max(36rem,280px);padding:1rem;border-radius:2.4rem;
  background:rgba(10,10,10,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 2rem 5rem rgba(0,0,0,.25);
  animation:dockUp .35s var(--ease)}
@keyframes dockUp{from{opacity:0;transform:translate(-50%,1.2rem)}to{opacity:1;transform:translate(-50%,0)}}
.dock-panel ol{list-style:none}
.dock-panel a{display:flex;flex-direction:column;gap:.2rem;padding:1.4rem 1.8rem;border-radius:1.6rem;text-decoration:none;color:#fff;transition:background-color .25s}
.dock-panel a:hover{background:rgba(255,255,255,.08)}
.dock-panel a[aria-current]{background:rgba(255,255,255,.14)}
.dock-panel span{font-size:var(--fs-label);opacity:.6}
.dock-panel b{font-size:var(--fs-body);font-weight:600}
.to-top{position:absolute;right:max(4rem,16px);bottom:0;display:grid;place-items:center;width:max(5.6rem,48px);height:max(5.6rem,48px);border:0;border-radius:50%;cursor:pointer;
  color:var(--ink);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1rem 3rem rgba(0,0,0,.1);
  opacity:0;visibility:hidden;transform:translateY(1.2rem);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s}
.to-top svg{width:45%;height:45%}
.dock.show-top .to-top{opacity:1;visibility:visible;transform:none}
.menu-open .dock{display:none}
@media (max-width:1023px){
  .dock{justify-content:flex-start;padding-left:1.6rem}
  .dock-btn{max-width:calc(100vw - 9.6rem);padding:0 1.4rem 0 1.6rem;gap:1rem}
  .dock-cur{overflow:hidden;text-overflow:ellipsis}
  .dock-cur .tl-sub{display:none}
  .dock-panel{left:1.6rem;transform:none;min-width:0;width:calc(100vw - 3.2rem);animation:none}
  .to-top{right:1.6rem}
}

/* ---------- phone mockup ---------- */
.phone{width:var(--phone);flex:none;padding:calc(var(--phone) * .028);background:#121212;
  border-radius:calc(var(--phone) * .15);box-shadow:0 3rem 7rem rgba(0,0,0,.14), inset 0 0 0 .15rem #3a3a3a}
.phone .scr{position:relative;aspect-ratio:375/816;overflow:hidden;border-radius:calc(var(--phone) * .125);background:var(--paper)}
.phone .scr img{width:100%;height:auto}
.phone.lg{--phone:38rem}
.phone.sm{--phone:26rem}
@media (max-width:1023px){.phone.lg{--phone:22rem}.phone.sm{--phone:15rem}}
/* 긴 화면: 프레임 안에서 자동 스크롤. --shift = -(이미지 높이 - 1632) / 이미지 높이 (750px 폭 기준) */
.phone.long .scr img{transform:translateY(0)}
.phone.long.in .scr img{animation:shot 14s var(--ease) 0.6s infinite}
@keyframes shot{0%,12%{transform:translateY(0)}48%,62%{transform:translateY(var(--shift,-53.05%))}96%,100%{transform:translateY(0)}}
.cap{margin-top:2rem;font-size:var(--fs-small);color:var(--mute);text-align:center}
.is-dark .cap{color:#8A8A8A}

/* ---------- app-sim: 폰 안에서 실제 앱처럼 스크롤 (헤더 고정 + 탭 스티키) ---------- */
.app-sim{--u:calc(var(--phone) * .944 / 375)}
.app-sim .app-top{position:absolute;inset:0 0 auto;z-index:3}
.app-sim .app-top img{width:100%;height:auto}
.app-sim .app-view{position:absolute;left:0;right:0;bottom:0;top:calc(var(--top) * var(--u));overflow:hidden}
.app-sim .app-main{width:100%;height:auto;will-change:transform;transform:translateY(calc(var(--y,0) * var(--u) * -1))}
.app-sim .app-sticky{position:absolute;left:0;width:100%;height:auto;top:calc((var(--top) + var(--st,0)) * var(--u));z-index:2}
.app-tap{position:absolute;z-index:4;left:calc(var(--tx,0) * var(--u));top:calc((var(--top) + 20) * var(--u));width:calc(34 * var(--u));height:calc(34 * var(--u));margin:calc(-17 * var(--u)) 0 0 calc(-17 * var(--u));border-radius:50%;background:rgba(0,0,0,.22);opacity:0;transform:scale(.4);pointer-events:none}
.app-tap.on{animation:appTap .52s var(--ease) forwards}
@keyframes appTap{0%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(4rem);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .phone.long.in .scr img{animation:none}
  [data-par]{--py:0px!important}
  .dock-btn,.to-top,.dock-panel,.mn,.mn-case,.mn-about,.mn-label,.hd-bar{transition:none!important}
  .bar .fill{transition:none}
}