/* 포트폴리오 컨셉 — 레트로-모던 에디토리얼 리디자인
   디자인 시스템: :root(라이트) / [data-theme="dark"](다크) 토큰으로 관리
   컨셉: 따뜻한 옐로우 grid 배경 위에 떠 있는 아이보리 패널 + 팬톤 컬러칩 UI */

:root{
  /* — surfaces / neutrals — */
  --paper:#fffdf6;        /* 아이보리 패널 (메인 표면) */
  --cream:#fbf3e3;        /* 크림 (보조 표면) */
  --grid-bg:#f6c23e;      /* 골든 옐로우 페이지 바탕 */
  --grid-line:rgba(255,255,255,.45);  /* 흰색 격자 선 */
  --ink:#221d14;          /* warm charcoal */
  --ink-soft:#5c5446;
  --ink-muted:#9b9080;
  --line:#4d493f;
  --line-soft:#f4ecda;

  /* — brand: orange-leaning yellow — */
  --accent:#ff9d1c;
  --accent-2:#ffb74d;
  --accent-ink:#b56309;   /* 종이 위 가독 텍스트 */
  --accent-soft:#ffc266;
  --accent-glow:rgba(255,157,28,.20);

  /* — complementary: vivid blue — */
  --blue:#1b46ff;
  --blue-ink:#1734bf;
  --blue-soft:#e3e7ff;
  --blue-glow:rgba(27,70,255,.18);

  /* — radii — */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  /* — shadow (warm-tinted, layered) — */
  --shadow-sm:0 1px 2px rgba(80,52,8,.06);
  --shadow-md:0 2px 8px rgba(80,52,8,.06),0 16px 40px rgba(80,52,8,.10);
  --shadow-lg:0 8px 24px rgba(60,40,6,.12),0 40px 80px rgba(60,40,6,.16);
  --shadow-chip:0 2px 0 var(--line),0 10px 24px rgba(80,52,8,.08);

  /* — type — */
  --display:'Bricolage Grotesque','Pretendard',sans-serif;
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --maxw:1200px;
}
[data-theme="dark"]{
  --paper:#1b1812;
  --cream:#161309;
  --grid-bg:#0f0d08;
  --grid-line:rgba(255,198,120,.07);
  --ink:#f6efe0;
  --ink-soft:#c4bba8;
  --ink-muted:#8a8170;
  --line:#332c1f;
  --line-soft:#262015;

  --accent:#ffb133;
  --accent-2:#ffc46a;
  --accent-ink:#ffc266;
  --accent-soft:rgba(255,177,51,.14);
  --accent-glow:rgba(255,177,51,.20);

  --blue:#6f86ff;
  --blue-ink:#9fadff;
  --blue-soft:rgba(95,123,255,.16);
  --blue-glow:rgba(95,123,255,.22);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 8px rgba(0,0,0,.4),0 18px 48px rgba(0,0,0,.5);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5),0 44px 90px rgba(0,0,0,.6);
  --shadow-chip:0 2px 0 var(--line),0 12px 28px rgba(0,0,0,.45);
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  color:var(--ink);
  line-height:1.65;
  letter-spacing:-0.01em;
  overflow-x:hidden;
  background-color:var(--grid-bg);
}
/* 따뜻한 옐로우 grid 배경 — 독립 고정 레이어 (모션에 영향받지 않게) */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--grid-bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  background-position:center top;
}
::selection{background:var(--accent);color:#231400;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;position:relative;z-index:2;}

/* mono label */
.mlabel{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:400;
}

/* ============================================================
   NAV — 떠 있는 pill 바
   ============================================================ */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  width:min(var(--maxw),calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:9px 9px 9px 20px;border-radius:var(--r-pill);
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .35s,transform .55s cubic-bezier(.45,0,.15,1),opacity .55s ease,background .4s,border-color .35s;
}
nav.scrolled{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));}
nav.nav-hidden{transform:translateX(-50%) translateY(calc(-100% - 18px));opacity:0;pointer-events:none;}
.nav-logo{font-family:'Lobster',var(--display);font-weight:400;font-size:24px;letter-spacing:0;display:flex;align-items:center;gap:9px;flex-shrink:0;}
.nav-logo .dot{width:9px;height:9px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);transform:rotate(45deg);}
.nav-links{display:flex;gap:4px;align-items:center;margin-left:auto;margin-right:14px;}
.nav-links a{
  font-size:13px;color:var(--ink-soft);font-weight:600;position:relative;
  padding:7px 13px;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:1px;height:3.5px;border-radius:2px;
  background:#f6c23e;transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* 모바일 햄버거 버튼 (기본 숨김) */
.nav-burger{
  display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;flex-shrink:0;padding:0;
}
.nav-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .2s;}
nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
nav.menu-open .nav-burger span:nth-child(2){opacity:0;}
nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* theme toggle */
.toggle{
  width:40px;height:40px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--cream);cursor:pointer;display:grid;place-items:center;
  color:var(--ink-soft);transition:all .25s;flex-shrink:0;
}
.toggle:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px) rotate(-12deg);background:var(--accent-soft);}
.toggle svg{width:17px;height:17px;}
.toggle .sun{display:none;}
.toggle .moon{display:block;}
[data-theme="dark"] .toggle .sun{display:block;}
[data-theme="dark"] .toggle .moon{display:none;}

/* ============================================================
   PANEL — grid 위에 떠 있는 큰 패널
   ============================================================ */
main > section{padding:24px 30px;position:relative;}
main > section > .wrap{
  max-width:calc(var(--maxw) - 60px);   /* 푸터 카드와 동일한 바깥 좌우 여백 */
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:68px 60px;
  box-shadow:var(--shadow-md);
}
main > section.sec-cream > .wrap{background:var(--cream);}

/* ============================================================
   HERO — grid 위 오픈 레이아웃 (임팩트)
   ============================================================ */
.hero{position:relative;min-height:100vh;padding:150px 0 96px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.hero .wrap{position:relative;z-index:2;width:100%;}

/* 메인 우측 필기체 사인 — 글 쓰는 모션 후 고정 */
.hero-sign{
  position:absolute;right:max(30px, calc((100% - var(--maxw)) / 2 + 30px));top:40%;z-index:0;pointer-events:none;
  font-family:'Lobster',var(--display);font-weight:400;
  font-size:clamp(168px,18vw,400px);line-height:.92;white-space:nowrap;text-align:right;
  color:#fdf3d0;   /* 옐로우 도는 아이보리 */
  transform:translateY(-37%) rotate(0deg) skewX(-10deg);transform-origin:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* 글자 다 뜬 뒤(2.2s) 배경 골든톤 쪽으로 살짝만 컬러 이동 (흰기 빠짐) */
  animation:signtint 1.4s ease 2.2s forwards;
}
@keyframes signtint{to{color:#fae3a2;}}
/* 글자 하나씩 써지는 느낌 — 투명도(fade)만 써서 잔상 없이 부드럽게 */
.hero-sign .ch{display:inline-block;opacity:0;animation:charin .4s ease forwards;will-change:opacity;}
@keyframes charin{to{opacity:1;}}

/* scroll down 안내 — 타이포가 다 뜬 뒤(약 5초) 등장 → Scroll+화살표 한 몸으로 두둥실 + 반짝 */
.scroll-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;
  animation:cuein .7s ease 5s both, cuefloat 2.6s ease-in-out 5.7s infinite;
}
@keyframes cuein{from{opacity:0;transform:translateX(-50%) translateY(12px);}to{opacity:.5;transform:translateX(-50%) translateY(0);}}
@keyframes cuefloat{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:.5;}
  50%{transform:translateX(-50%) translateY(-8px);opacity:.95;}
}
.scroll-cue svg{width:24px;height:24px;}
.hero-panel{
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  padding:8px 0 0;
  box-shadow:none;
}
.hero-panel > *{position:relative;z-index:1;}

.avail{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--r-pill);
  background:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 60%,#000 6%);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#231400;font-weight:700;
  margin-bottom:15px;box-shadow:var(--shadow-sm);
}
.avail .pulse{position:relative;width:8px;height:8px;}
.avail .pulse i{position:absolute;inset:0;border-radius:50%;background:#231400;}
.avail .pulse i:first-child{animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0;}}

.hero-kicker{margin-bottom:20px;}
.hero h1{
  font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.12;
  font-size:clamp(36px,6.4vw,74px);max-width:15ch;
  text-shadow:0 5px 16px rgba(80,52,8,.18);
}
.hero h1 .t-thin{font-weight:200;letter-spacing:.04em;}
.hero h1 .hl{
  color:var(--paper);                         /* 네비 배경색(아이보리)으로 채움 */
  -webkit-text-stroke:4px var(--line);        /* 네비 아웃라인색으로 외곽선 */
  paint-order:stroke fill;
  position:relative;white-space:nowrap;
}
.hero-sub{
  margin-top:24px;font-size:clamp(15px,1.7vw,18.5px);color:var(--ink);max-width:52ch;line-height:1.72;font-weight:400;
}
.name-row{
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  margin-bottom:38px;padding-bottom:30px;border-bottom:1px dashed var(--line);
}
.name-row .kr{font-family:'Lobster',var(--display);font-weight:400;font-size:clamp(44px,7vw,82px);letter-spacing:0;line-height:1;color:var(--blue);}
.name-row .meta{display:flex;flex-direction:column;gap:3px;padding-bottom:7px;}
.name-row .meta .role{font-size:14px;font-weight:600;color:var(--ink);}
.name-row .meta .en{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ink);}

.hero-meta{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.hero-meta .cell{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 10px;
  transition:transform .25s,border-color .25s;
}
.hero-meta .cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.hero-meta .cell .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:9px;}
.hero-meta .cell .v{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45;}
.hero-meta .cell .v small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.focus-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.focus-tags span{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:var(--r-xs);background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.sec-head{margin-bottom:46px;}
/* About 'NN / Label' 미니멀 모노 라벨과 통일 */
.sec-head .top{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;}
.sec-head .num{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.18em;color:var(--ink-muted);}
.sec-head .num::after{content:'/';margin-left:7px;color:var(--ink-muted);}
.sec-head .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,48px);letter-spacing:-.03em;line-height:1.06;}
.sec-head .desc{margin-top:14px;color:var(--ink-soft);font-size:15.5px;max-width:58ch;word-break:keep-all;}
@media(min-width:1000px){ #projects .sec-head .desc{white-space:nowrap;max-width:none;} }  /* 넓은 화면: 한 줄, 좁으면 줄바꿈 */

/* ============================================================
   ABOUT — 2단 컴팩트 레이아웃 (좌: 소개·이름·본문 / 우: Currently·Focus)
   ============================================================ */
#about > .wrap{padding:84px 60px;}   /* 세로 여백 확대 (~1.3배) */
.about-layout{display:block;}
.about-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:stretch;}

.about-kicker{margin-bottom:30px;}
.about-title{letter-spacing:-.02em;line-height:1.12;margin-bottom:52px;}  /* 아래 여백 2배 */
.about-title .t-thin{display:block;font-weight:300;font-size:clamp(18px,2.1vw,26px);color:var(--ink-soft);letter-spacing:-.01em;}
.about-title .about-namerow{display:flex;align-items:baseline;flex-wrap:nowrap;gap:.85em;margin-top:12px;white-space:nowrap;}
.about-title .about-name{font-family:'Lobster',var(--display);font-weight:400;font-size:clamp(36px,5vw,62px);letter-spacing:0;color:var(--ink);line-height:1.05;}
.about-title .about-name-kr{font-family:var(--sans);font-weight:400;font-size:clamp(18px,2.5vw,30px);letter-spacing:-.04em;color:var(--ink);line-height:1;}  /* 한 줄 · 영문과 간격 넓힘 */
.about-body p{color:var(--ink-soft);font-size:15px;line-height:1.8;margin-bottom:16px;}
.about-body .about-lead{margin-bottom:22px;}
.about-body p:last-child{margin-bottom:0;}
.about-body strong{color:var(--ink);font-weight:600;background:linear-gradient(transparent 62%,var(--accent-soft) 62%);padding:0 2px;}
.about-body .mark{background:linear-gradient(transparent 62%,var(--accent-soft) 62%);padding:0 2px;}  /* 형광펜만 (굵기 X) */
.about-body .nowrap{white-space:normal;}
@media(min-width:1150px){ .about-body .nowrap{white-space:nowrap;} }  /* 넓은 화면에서만 한 줄 고정 */
.about-body-col{display:flex;flex-direction:column;}
.about-meta-line{display:flex;gap:30px;margin-top:auto;padding-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--ink-muted);letter-spacing:.02em;}

.about-side{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:4px;transform:translateX(-1cm);}  /* CURRENTLY 위·FOCUS 아래로 꽉 채움 + 왼쪽 1cm 이동 · FOCUS 살짝 올림 */
.side-block .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px;}
.side-block .v-line{display:flex;flex-direction:column;gap:6px;}
.side-block .v{font-family:var(--display);font-size:clamp(18px,1.9vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.25;white-space:nowrap;}
.side-block .v-sub{font-size:13.5px;color:var(--ink-soft);white-space:nowrap;}
.side-block .chips{margin-bottom:0;}
.side-block .chip{transition:background .2s,border-color .2s;}
.side-block .chip:hover{background:transparent;}

/* ============================================================
   PROJECTS — 팬톤 컬러칩 카드 (클릭 → 모달)
   ============================================================ */
/* 왼쪽 세로 카드 리스트 + 오른쪽 PROJECT 사인 */
.projects-layout{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:stretch;}
.projects{display:flex;flex-direction:column;gap:14px;width:100px;}  /* 정사각형 버튼 열 */
.pcard{position:relative;--chip:var(--accent);--chip-ink:var(--accent-ink);}
.pcard.feat{grid-column:auto;}

/* 오른쪽 영역 — 버튼 영역 빼고 가로·세로 센터 */
.projects-aside{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100%;}
.projects-intro{width:100%;}
.projects-sign{
  font-family:'Lobster',var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(40px,7vw,112px);line-height:1.1;letter-spacing:0;
  text-align:center;white-space:nowrap;pointer-events:none;
}
.projects-sign .ch{display:inline-block;opacity:0;}
.projects-sign.in .ch{animation:charin .4s ease forwards;}
.projects-tagline{
  margin-top:22px;text-align:center;color:var(--ink-soft);
  font-size:15px;line-height:1.75;
  word-break:keep-all;opacity:0;
}
@media(min-width:1000px){ .projects-tagline{white-space:nowrap;} }  /* 넓은 화면: 한 줄 */
/* 사인 모션이 끝난 뒤 태그라인 서서히 등장 */
.projects-sign.in ~ .projects-tagline{animation:taglinein 1s ease 1.3s forwards;}
@keyframes taglinein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ← Click 힌트 — Scroll 안내와 동일한 폰트·크기·효과(두둥실+호흡) */
.click-hint{
  display:flex;justify-content:center;align-items:center;margin-top:20px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);opacity:0;
}
.projects-sign.in ~ .click-hint{animation:hintin .7s ease 2s both, hintfloat 2.6s ease-in-out 2.7s infinite;}
@keyframes hintin{from{opacity:0;transform:translateY(10px);}to{opacity:.5;transform:translateY(0);}}
@keyframes hintfloat{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-8px);opacity:.95;}}

/* 클릭 시 나타나는 상세 — 창처럼 띄우지 않고 오른쪽 영역에 그대로 */
.projects-detail{width:100%;max-width:680px;background:transparent;border:none;box-shadow:none;transform:translateY(-2cm);}
.projects-aside.detail-open{justify-content:flex-start;}  /* 상세 열리면 상단 고정 — 클릭마다 안 내려감 */
.projects-detail .modal-hd{background:transparent;color:var(--ink);padding:0 0 8px;}
.projects-detail .modal-body{padding:0;}
.projects-detail .modal-hd h3{color:var(--ink);}
/* 부제·설명·정보박스 간격 좁히기 */
.projects-detail .m-sub{margin-top:4px;}
.projects-detail .m-desc{margin-bottom:14px;line-height:1.6;}
.projects-detail .m-facts{margin-bottom:18px;}
.projects-detail .m-fact .fv{text-align:right;}  /* 값만 오른쪽, 라벨은 왼쪽 그대로 */
.m-logo-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center;}
.m-logo{flex:0 0 100%;height:84px;width:auto;max-width:100%;display:block;object-fit:contain;}
.m-title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;}
/* data-shot 버튼은 클릭 가능 */
button.m-plat{cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
button.m-plat:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.m-plat-row{display:flex;justify-content:center;gap:8px;margin-top:12px;}
.m-plat{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-indent:.08em;text-transform:uppercase;
  color:var(--ink-soft);background:#fff;border:1px solid var(--line);
  padding:4px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
  line-height:1;box-sizing:border-box;height:24px;
}

/* ============================================================
   SCREENSHOT SHOWCASE — 브라우저 창 슬라이드쇼 모달
   ============================================================ */
.shot-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:max(24px,4vh) 20px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
.shot-modal.open{opacity:1;visibility:visible;}
.shot-scrim{position:fixed;inset:0;background:rgba(30,20,4,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.shot-wrap{position:relative;z-index:2;width:min(960px,100%);transform:scale(.97);transition:transform .3s cubic-bezier(.2,.8,.25,1);}
.shot-modal.open .shot-wrap{transform:none;}
.shot-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:var(--r-pill);border:none;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s;z-index:3;}
.shot-x:hover{background:rgba(255,255,255,.32);}
.shot-x svg{width:18px;height:18px;}

/* 공통 */
.shot-slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .55s ease;}
.shot-slide.active{opacity:1;}
.shot-progress-fill{height:100%;width:0;background:#8fc94a;}   /* On_You 연두 포인트 */
.shot-dots{display:flex;gap:8px;flex-wrap:wrap;}
.shot-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.45);transition:background .2s,width .2s;}
.shot-dot.active{width:22px;border-radius:4px;background:#8fc94a;}
.shot-caption{font-size:13.5px;color:rgba(255,255,255,.92);font-weight:600;}

/* 좌우 화살표 — 항상 프레임 바깥, iOS 글래스 */
.shot-stage-row{display:flex;align-items:center;justify-content:center;gap:14px;}
.shot-nav{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(16px) saturate(1.7);-webkit-backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .2s,transform .15s;
}
.shot-nav:hover{background:rgba(255,255,255,.26);transform:scale(1.07);}
.shot-nav:active{transform:scale(.96);}

/* ── 브라우저 모드 ── */
.shot-body.browser .shot-frame{flex:1;min-width:0;position:relative;border-radius:14px;overflow:hidden;background:#ececef;border:1px solid #dcdce0;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.shot-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;background:#ececef;border-bottom:1px solid #dcdce0;}
.shot-lights{display:flex;gap:8px;}
.shot-lights span{width:12px;height:12px;border-radius:50%;}
.shot-lights span:nth-child(1){background:#ff5f57;}
.shot-lights span:nth-child(2){background:#febc2e;}
.shot-lights span:nth-child(3){background:#28c840;}
.shot-url{flex:1;height:26px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#fff;border:1px solid #dcdce0;border-radius:7px;font-family:var(--mono);font-size:12.5px;color:#8a8a93;overflow:hidden;white-space:nowrap;}
.shot-url svg{flex:0 0 auto;}
.shot-stage{position:relative;aspect-ratio:16/7.5;background:#000;overflow:hidden;}   /* 위 주소창은 예전만큼, 아래만 살짝 크롭 */
.shot-stage .shot-slide{object-fit:cover;object-position:center 67%;background:#000;}  /* 위 ~120px(예전), 아래 ~60px */
.shot-body[data-gal="steam-web"] .shot-stage .shot-slide{object-position:center 75%;}
/* withDOG — 콘텐츠 비율 그대로 표시(위·아래 크롭 없음) */
.shot-body[data-gal="withdog-web"] .shot-stage{aspect-ratio:1906/906;}
.shot-body[data-gal="withdog-web"] .shot-stage .shot-slide{object-fit:contain;object-position:center;}
.shot-body[data-gal="withdog-web"] .shot-lap-screen{aspect-ratio:1920/911;}
.shot-body[data-gal="withdog-mobile"] .shot-screen{aspect-ratio:382/853;}
.shot-body[data-gal="withdog-mobile"] .shot-screen .shot-slide{object-fit:contain;transform:scale(1.05);}
.shot-body[data-gal="withdog-mobile"] .shot-screen .shot-slide.wd-zoom{transform:scale(1.1);}   /* 소셜로그인 */
.shot-body[data-gal="withdog-mobile"] .shot-screen .shot-slide.wd-noscale{transform:scale(1);}  /* 홈 화면 배너: 원복 */
.shot-stage .shot-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:5;}
.shot-body.browser .shot-footer{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px;}

/* ── Galaxy 폰 모드 ── */
.shot-phone{position:relative;flex:0 0 auto;width:min(300px,74vw);padding:10px;border-radius:44px;background:linear-gradient(145deg,#f2f2f5 0%,#cfcfd6 45%,#a9a9b1 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.4),0 28px 56px -22px rgba(0,0,0,.5);}
.shot-key{position:absolute;right:-3px;width:3px;border-radius:2px;background:linear-gradient(#cdcdd4,#9a9aa2);}
.shot-key.vol{top:20%;height:11%;}
.shot-key.pwr{top:34%;height:7%;}
.shot-screen{position:relative;aspect-ratio:1080/2340;border-radius:34px;overflow:hidden;background:#000;touch-action:pan-y;}
.shot-screen .shot-slide{object-fit:cover;}
.shot-camera{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;z-index:7;background:radial-gradient(circle at 35% 35%,#2b2b35 0%,#060608 62%);box-shadow:0 0 0 1.5px rgba(0,0,0,.45);}
.shot-body.phone .shot-progress{width:min(300px,74vw);height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;margin:22px auto 0;}
.shot-footer.center{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px;}

/* 탭 (Browser / Laptop) — 점 위, 글래스 */
.shot-tabs{display:flex;gap:8px;}
.shot-tab{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:6px 15px;border-radius:var(--r-pill);cursor:pointer;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);transition:background .2s,color .2s,border-color .2s;}
.shot-tab:hover{background:rgba(255,255,255,.22);}
.shot-tab.active{background:#fff;color:#18181b;border-color:#fff;}

/* ── Laptop (PNG) — 브라우저 창과 동일한 점3개+주소창, 크롭 없이 contain ── */
.shot-body.laptop .shot-laptop{flex:1;min-width:0;border-radius:14px;overflow:hidden;background:#ececef;border:1px solid #dcdce0;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.shot-lap-screen{position:relative;aspect-ratio:714/396;background:#fff;overflow:hidden;}  /* PNG 비율과 동일 → 흰 여백 없음 */
.shot-lap-screen .shot-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:5;}
.shot-body.laptop .shot-slide{object-fit:contain;background:#fff;}   /* 크롭 없이 전체 표시 */
/* 세로로 긴 화면(회원가입 등) — 가로폭 맞추고 세로 스크롤 */
.shot-body.laptop .shot-lap-screen:has(.shot-slide.active.wd-scroll){overflow:hidden auto;}
.shot-body.laptop .shot-slide.wd-scroll{inset:auto;top:0;left:0;width:100%;height:auto;object-fit:fill;}

/* 모드별 전체 크기 — Browser 크게, Laptop 작게 */
.shot-modal:has(.shot-body.browser) .shot-wrap{width:min(1600px,96vw);}
.shot-modal:has(.shot-body.laptop) .shot-wrap{width:min(900px,96vw);}

@media (prefers-reduced-motion: reduce){.shot-slide{transition:none;}}
@media(max-width:680px){
  .shot-body.browser .shot-footer{flex-direction:column;align-items:center;gap:8px;}
  .shot-nav{display:none;}   /* 좁은 화면: 스와이프로 */
  .shot-x{top:-42px;}
}
.pd-back{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:none;border:none;cursor:pointer;padding:4px 0;transition:opacity .2s;
}
.pd-back:hover{opacity:.6;}

/* 클릭 가능한 카드 face = 컬러 블록 (좌상단 번호 · 우상단 화살표 · 좌하단 이름) */
.pcard-face{
  position:relative;width:100%;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100px;padding:12px 13px;
  background:var(--chip);border:1px solid var(--chip-border,transparent);border-radius:12px;
  color:var(--chip-on,#231400);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
.pcard-face:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.pcard-face:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

.pcard-face .pc-no{position:absolute;top:10px;left:13px;max-width:42px;line-height:1.2;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--chip-on,#231400);}
.pcard-face .pc-open{position:absolute;top:9px;right:11px;color:var(--chip-on,#231400);transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.pcard-face:hover .pc-open,
.pcard.active .pc-open{transform:rotate(45deg);}  /* hover · 선택된 카드: 시계방향 45도 회전 */
.pc-open svg{width:15px;height:15px;}
.pcard-face h3{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:-.02em;line-height:1.2;color:var(--chip-on,#231400);overflow-wrap:anywhere;}

/* ============================================================
   PROJECT MODAL — 아이보리 대형 창
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;
  padding:max(20px,4vh) 18px;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;
  overflow-y:auto;
}
.modal.open{opacity:1;visibility:visible;}
.modal-scrim{position:fixed;inset:0;background:rgba(40,28,6,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.modal-window{
  position:relative;z-index:2;width:min(840px,100%);margin:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
  transform:translateY(24px) scale(.97);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.25,1),opacity .35s;
}
.modal.open .modal-window{transform:none;opacity:1;}
.modal-close{
  position:absolute;top:18px;right:18px;z-index:5;width:42px;height:42px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center;
  color:var(--ink);transition:all .22s;box-shadow:var(--shadow-sm);
}
.modal-close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(90deg);}
.modal-close svg{width:18px;height:18px;}

/* 모달 헤더 = 컬러칩 톱바 */
.modal-hd{background:var(--chip,var(--accent));padding:34px 38px 28px;color:var(--chip-on,#231400);text-align:center;}
.modal-hd .m-no{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;opacity:.74;}
.modal-hd .m-badges{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0;justify-content:center;}
.modal-hd .m-flag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(35,20,0,.86);color:#fffdf6;padding:4px 10px;border-radius:var(--r-pill);}
.modal-hd .m-live{font-family:var(--mono);font-size:11px;font-weight:700;background:rgba(255,253,246,.9);color:#1a1206;padding:4px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;}
.modal-hd .m-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#138a52;}
.modal-hd h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,40px);letter-spacing:-.03em;line-height:1.05;margin-top:14px;}
.modal-hd .m-sub{font-size:15px;font-weight:600;margin-top:8px;opacity:.9;}
.modal-body{padding:34px 38px 40px;}
.m-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px;}
.m-fact{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;}
.m-fact .fk{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px;}
.m-fact .fv{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.m-desc{color:var(--ink-soft);font-size:15px;line-height:1.8;margin-bottom:24px;text-align:center;}
.onyou-steps{display:flex;flex-direction:row;align-items:flex-start;gap:4px;margin-bottom:28px;justify-content:center;}
.onyou-step-card{flex:1;min-width:0;background:none;border:none;padding:8px 4px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.step-num{font-size:18px;font-weight:700;background:linear-gradient(135deg,#a6d678,#69a83a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.step-icon-wrap{width:56px;height:56px;border-radius:50%;background:#f3f5f2;display:flex;align-items:center;justify-content:center;margin:12px 0;}
.step-title{font-size:12.5px;font-weight:700;color:#33363a;}
.step-desc{font-size:11px;color:#a0a3a8;margin-top:6px;line-height:1.6;}
.step-arrow{display:none;}
.m-desc strong,.pc-points li b{color:var(--ink);font-weight:600;background:linear-gradient(transparent 62%,var(--accent-soft) 62%);padding:0 2px;}

.li-tech{font-size:11px;color:var(--ink-soft);white-space:nowrap;background:var(--cream);border:none;border-radius:4px;padding:3px 10px;display:inline-block;margin-top:5px;}
.m-h{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 14px;display:flex;align-items:center;gap:10px;}
.m-h::after{content:'';flex:1;height:1px;background:var(--line);}

.pc-points{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
.pc-points li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-soft);line-height:1.65;}
.pc-points li::before{content:'';position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--chip,var(--accent));}

.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.stat{flex:1;min-width:120px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;}
.stat .n{font-family:var(--display);font-weight:700;font-size:26px;color:var(--accent-ink);line-height:1;letter-spacing:-.02em;}
.stat .t{font-size:11.5px;color:var(--ink-muted);margin-top:8px;line-height:1.4;}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px;}
.chip{font-family:var(--mono);font-size:11.5px;padding:6px 12px;border-radius:var(--r-pill);background:var(--cream);border:1px solid var(--line);color:var(--ink-soft);transition:background .2s,border-color .2s,color .2s;}
.chip:hover{background:transparent;border-color:var(--ink-soft);}

.plinks{display:flex;gap:10px;flex-wrap:wrap;}
.plink{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:10px 17px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink);transition:all .22s;
}
.plink:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);background:transparent;}
.plink svg{width:14px;height:14px;}
.plink.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.plink.primary:hover{background:var(--chip,var(--accent));border-color:var(--chip,var(--accent));color:#231400;}

/* ============================================================
   EXPERIENCE / EDUCATION TIMELINE
   ============================================================ */
.tline{position:relative;}
.titem{display:grid;grid-template-columns:210px 1fr;gap:36px;padding:30px 0;border-top:1px dashed var(--line);}
.titem:first-child{border-top:none;padding-top:0;}
.titem .left .org{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;}
.titem .left .when{font-family:var(--mono);font-size:11.5px;color:var(--ink-muted);margin-top:7px;}
.titem .left .place{font-size:12.5px;color:var(--ink-muted);margin-top:3px;}
.titem .left .tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent);color:#231400;font-weight:700;}
.titem .right .rrole{font-weight:600;font-size:15.5px;margin-bottom:13px;color:var(--ink);}
.titem .right .rrole .award{color:var(--accent-ink);}
.titem .right ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.titem .right ul li{position:relative;padding-left:18px;font-size:14px;color:var(--ink-soft);line-height:1.6;}
.titem .right ul li::before{content:'';position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:2px;background:var(--blue);}
.titem .right .chips{margin-bottom:0;}

/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.skbox{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;transition:border-color .3s,transform .3s,box-shadow .3s;}
.skbox:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));transform:translateY(-3px);box-shadow:var(--shadow-md);}
.skbox .sk-head{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.skbox .sk-head .ic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--accent);display:grid;place-items:center;color:#231400;flex-shrink:0;}
.skbox .sk-head .ic svg{width:17px;height:17px;}
.skbox .sk-head h4{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;}
.skbox .sk-head .sk-en{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-left:auto;}
.skbox .sklist{display:flex;flex-wrap:wrap;gap:7px;}
.skbox .chip{margin-bottom:0;background:var(--paper);}

/* ============================================================
   CONTACT — 보색 블루 패널
   ============================================================ */
.outro{padding:24px 30px;}   /* 다른 섹션과 동일한 좌우 여백 */
main > section.outro > .wrap{
  background:var(--blue);color:#f2f4ff;border:1px solid color-mix(in srgb,var(--blue) 70%,#000 12%);
  border-radius:var(--r-xl);overflow:hidden;position:relative;padding:0;
  box-shadow:0 20px 60px var(--blue-glow);
}
.contact{position:relative;z-index:2;padding:96px 58px 84px;}
.contact .clabel{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.contact .ckicker{margin-top:24px;font-family:var(--display);font-size:clamp(18px,2.4vw,26px);color:#fff;font-weight:600;letter-spacing:-.02em;text-align:center;}
/* 오리 이미지를 배경으로, 가운데에 이메일 주소 오버레이 */
.contact .email{
  position:relative;display:block;margin:22px auto 0;
  width:clamp(240px,34vw,340px);text-decoration:none;
  transition:transform .35s ease;
}
.contact .email:hover{transform:translateY(-4px);}
/* 오리 — 기본 → 호버 시 선글라스(active) 크로스페이드 */
.contact .email-duck{position:relative;display:block;width:100%;aspect-ratio:1/1;}
.contact .email-duck .duck-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .35s ease,transform .35s ease;
}
.contact .email-duck .duck-active{opacity:0;transform:scale(.96);}
.contact .email:hover .duck-default{opacity:0;}
.contact .email:hover .duck-active{opacity:1;transform:scale(1);}
/* 이메일 주소 — 오리 위 오버레이, 흰 글씨+그림자(박스 없음), 가운데서 1.5cm 아래 */
.contact .email-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + 1.5cm));z-index:2;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  font-size:clamp(24px,6vw,64px);color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  transition:color .3s;
}
.contact .email:hover .email-text{color:#ff5842;animation:emailtwinkle 1.4s ease-in-out infinite;}
@keyframes emailtwinkle{
  0%,100%{text-shadow:0 2px 10px rgba(0,0,0,.45),0 0 8px rgba(255,255,255,.4);}
  50%{text-shadow:0 2px 10px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.95),0 0 42px rgba(255,255,255,.65);}
}
@media (prefers-reduced-motion: reduce){.contact .email:hover .email-text{animation:none;}}
.contact .crule{margin-top:48px;height:1px;background:rgba(255,255,255,.22);}
.contact .cgrid{margin:36px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:680px;padding:0 28px;}
.contact .cgrid .col{display:flex;flex-direction:column;align-items:center;text-align:center;}
.contact .cgrid .col p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.78;margin-bottom:18px;}
.contact .cgrid .col p b{color:#fff;font-weight:700;}
.contact .cgrid .col .alink{margin-top:auto;}   /* 버튼을 하단에 맞춰 같은 선상에 */
.alink{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.03em;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  padding:9px 16px;border-radius:var(--r-pill);transition:all .25s;
}
.alink:hover{background:var(--accent);color:#231400;border-color:var(--accent);gap:12px;transform:translateY(-2px);}
.alink .arr{transition:transform .25s;}
.alink:hover .arr{transform:translateX(3px);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:24px 0 40px;position:relative;z-index:2;}   /* 다른 섹션과 동일한 상단 간격 */
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:42px 48px;box-shadow:var(--shadow-sm);}
.foot .fname{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);}
.foot .frole{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-top:6px;}
.foot .ftag{margin-top:14px;color:var(--ink-soft);font-size:13.5px;max-width:40ch;line-height:1.7;}
.foot-links{display:flex;flex-direction:column;gap:9px;}
.foot-links .h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:5px;}
.foot-links a{font-size:13.5px;color:var(--ink-soft);transition:color .2s;}
.foot-links a:hover{color:var(--accent-ink);}
.copy{margin-top:20px;padding:0 48px;font-family:var(--mono);font-size:11.5px;color:var(--blue);letter-spacing:.04em;text-align:center;}

/* ============================================================
   REVEAL / LOAD
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
.load{opacity:0;transform:translateY(16px);animation:load .8s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes load{to{opacity:1;transform:none;}}
body.modal-lock{overflow:hidden;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  .hero-meta{grid-template-columns:repeat(4,1fr);gap:10px;}
  .about-cols{grid-template-columns:1fr;gap:32px;}
  .about-side{transform:none;justify-content:flex-start;gap:24px;order:2;}
  /* 좁은 화면: 본문 → Currently·Focus → 생년/지역 순으로, 메타라인을 맨 아래로 */
  .about-body-col{display:contents;}
  .about-body{order:1;}
  .about-meta-line{order:3;margin-top:8px;padding-top:0;}
  .skills-grid{grid-template-columns:1fr;}
  .projects-layout{gap:20px;}   /* 항상 좌우 유지(버튼 | Team Project) */
  .projects{width:80px;}        /* 좁은 화면: 버튼 줄여 사인 공간 확보 */
  .projects-tagline{font-size:13px;margin-top:14px;}
  .titem{grid-template-columns:1fr;gap:14px;}
  .titem .left .tag{margin-top:8px;}
  main > section > .wrap{padding:48px 36px;}
}
@media(max-width:680px){
  .wrap{padding:0 16px;}
  nav{padding:8px 8px 8px 16px;}
  .nav-burger{display:flex;}
  .nav-links{
    flex-direction:column;gap:2px;margin:0;
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:8px;box-shadow:var(--shadow-md);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;
  }
  nav.menu-open .nav-links{opacity:1;visibility:visible;transform:none;}
  .nav-links a{padding:11px 14px;border-radius:var(--r-sm);}
  .nav-links a::after{display:none;}
  .nav-links a:hover,.nav-links a.active{background:var(--cream);}
  .hero{padding:104px 0 24px;}
  .hero-panel{padding:36px 26px 34px;}
  .hero-meta{grid-template-columns:1fr;}
  main > section{padding:14px 16px;}
  .outro{padding:14px 16px;}
  main > section > .wrap{padding:40px 24px;border-radius:var(--r-lg);}
  .m-facts{grid-template-columns:1fr;}
  .stat{min-width:calc(50% - 5px);}
  .modal-hd{padding:28px 24px 24px;}
  .modal-body{padding:28px 24px 32px;}
  .contact{padding:64px 26px 56px;}
  .contact .cgrid{grid-template-columns:1fr;gap:28px;}
  .foot{padding:32px 26px;}
  .copy{padding:0 26px;}
  .hero-sign{font-size:clamp(64px,22vw,150px);}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .hero-sign .ch{opacity:1;}
  .projects-sign .ch{opacity:1;}
  .projects-tagline{opacity:1;}
  .click-hint{opacity:.75;}
  .scroll-cue{opacity:.7;}
}