/* =========================================================
   박성연 포트폴리오 — 픽셀 테마 (밝은 배경)
   · 배경 점무늬는 저해상도 캔버스 한 장 (script.js)
   · 섹션은 전부 페이지 스크롤로만 흐른다. 내부 스크롤 없음.
   ========================================================= */

:root{
  /* ── 어두운 화면 (기본) ── */
  --bg:#141936;          /* 바탕 */
  --panel:#1f2550;       /* 카드 면 */
  --sunk:#171c3e;        /* 눌린 면 */
  --ink:#eef1ff;         /* 본문 글자 */
  --text-2:#c3c9ee;      /* 설명 글자 */
  --dim:#9aa2d4;         /* 흐린 글자 */
  --edge:#6874b9;        /* 테두리 */
  --edge-soft:#38406f;   /* 약한 구분선 */
  --shadow:#080b1c;      /* 단색 그림자 */
  --track:#0d1128;       /* 게이지 바닥 */
  --grid:#ffffff0d;      /* 배경 격자 */
  --backdrop:#0a0d1ce0;
  --on-accent:#10142c;   /* 강조 블록 위 글자 */

  --c-blue:#5ad1ff;
  --c-green:#68e06a;
  --c-amber:#ffb23f;
  --c-violet:#c07bff;
  --c-gold:#ffe05a;
  --c-pink:#ff6a97;

  --accent:var(--c-blue);

  /* 강조 규격 — 이 두 값만 쓴다 */
  --b:3px;               /* 모든 테두리 */
  --dot:10px;            /* 모든 표시등(작은 네모) */
  --sh:6px;              /* 모든 단색 그림자 · 들뜸/눌림은 ±3px */

  --pad:clamp(18px,5vw,72px);
  --max:1180px;
}

:root[data-theme="light"]{
  /* ── 밝은 화면 ── */
  --bg:#c6d0e8;
  --panel:#ffffff;
  --sunk:#e9edf8;
  --ink:#171c38;
  --text-2:var(--text-2);
  --dim:#4b537d;
  --edge:#171c38;
  --edge-soft:#c3cbe6;
  --shadow:#171c38;
  --track:var(--track);
  --grid:var(--grid);
  --backdrop:var(--backdrop);
  --on-accent:#ffffff;

  --c-blue:#1160a8;
  --c-green:#157a38;
  --c-amber:#9c5a00;
  --c-violet:#5f32c0;
  --c-gold:#84640a;
  --c-pink:#b32458;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;
  background-color:var(--bg);
  /* 테두리와 같은 3px 굵기의 격자 — 일정해서 눈에 걸리지 않는다 */

  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif;
  font-size:16px;
  line-height:1.8;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400}
img{image-rendering:pixelated}
::selection{background:var(--accent);color:var(--on-accent)}

/* 픽셀 폰트는 제목·라벨·버튼에만 */
.wordmark,nav,.tag,.chip,.btn,.badge,.card-go,.card-kind,.stage-head h2,.hero h1,
.ending h2,.win-bar,.player-head strong,.player dt,.tags li,.scroll-cue,footer,
.close,.project-link,.modal-meta dt,.contact-links a{font-family:Galmuri11,monospace}

/* 성단 — 두 테마 모두. 팔레트만 뒤집힌다 (script.js) */
.galaxy{position:fixed;inset:0;z-index:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;display:block}

main,footer{position:relative;z-index:1}

/* ---------- 접근성 ---------- */
.skip-link{position:fixed;z-index:200;left:14px;top:-72px;padding:10px 14px;border:var(--b) solid var(--edge);background:var(--panel);color:var(--ink);font-size:12px;transition:top .15s steps(3)}
.skip-link:focus{top:12px}
:where(a,button,.card,.row):focus-visible{outline:var(--b) solid var(--c-pink);outline-offset:3px}

/* ---------- 상단 진행 게이지 ---------- */
.progress-bar{position:fixed;z-index:120;inset:0 0 auto;height:8px;background:var(--track);border-bottom:var(--b) solid var(--edge);pointer-events:none}
.progress-bar i{
  display:block;height:100%;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:repeating-linear-gradient(90deg,var(--c-blue) 0 8px,var(--track) 8px 11px);
}

/* ---------- 헤더 ---------- */
header{
  position:fixed;z-index:110;inset:8px 0 auto;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  background:transparent;
  border-bottom:var(--b) solid transparent;
  transition:background .2s steps(2),border-color .2s steps(2);
}
body.scrolled header{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--edge)}
.wordmark{font-size:14px;letter-spacing:.06em;color:var(--ink)}
.wordmark span{color:var(--c-blue);animation:blink 1.1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
nav{display:flex;gap:10px;font-size:12px}
nav a{padding:6px 10px;border:var(--b) solid transparent;color:var(--dim);transition:color .15s steps(2),border-color .15s steps(2),background .15s steps(2)}
nav a:hover,nav a.current{color:var(--ink);border-color:var(--edge);background:var(--panel)}

/* 머리말 토글 두 개는 같은 규격 */
.theme-toggle,
.lang-toggle{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:6px;padding:6px 11px;
  border:var(--b) solid var(--edge);background:var(--panel);
  color:var(--ink);font-family:Galmuri11,monospace;font-size:12px;
  cursor:pointer;
  transition:background .15s steps(2),color .15s steps(2);
}
.theme-toggle span,
.lang-toggle span{display:block;width:var(--dot);height:var(--dot)}
.theme-toggle span{background:var(--c-gold)}
.lang-toggle span{background:var(--c-green)}
.theme-toggle:hover,
.lang-toggle:hover{background:var(--accent);color:var(--on-accent)}
:root[data-theme="light"] .theme-toggle span{background:var(--c-violet)}
html[lang="en"] .lang-toggle span{background:var(--c-blue)}

/* =========================================================
   공용 — 픽셀 창
   ========================================================= */
.win-bar{
  display:flex;align-items:center;gap:6px;
  padding:7px 10px;
  background:var(--accent);color:var(--on-accent);
  border-bottom:var(--b) solid var(--edge);
  font-size:11px;letter-spacing:.08em;
}
.win-bar span{flex:1;font-family:GalmuriMono11,monospace}
.win-bar i{width:var(--dot);height:var(--dot);background:#ffffff40;box-shadow:inset 0 0 0 2px currentColor}
.win-body{padding:clamp(16px,2vw,24px)}

.chip{
  display:inline-block;margin:0;padding:8px 14px;
  border:var(--b) solid var(--edge);background:var(--accent);
  color:var(--on-accent);font-family:GalmuriMono11,monospace;font-size:11px;letter-spacing:.12em;
}

.btn{
  display:inline-block;margin-top:30px;padding:14px 24px;
  border:var(--b) solid var(--edge);background:var(--c-green);color:var(--on-accent);
  font-size:14px;letter-spacing:.06em;
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  transition:transform .1s steps(2),box-shadow .1s steps(2),background .15s steps(2);
}
.btn:hover{background:var(--edge);color:var(--bg);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow)}

/* =========================================================
   첫 화면
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  align-items:center;gap:clamp(30px,5vw,64px);
  padding:126px var(--pad) 104px;
}
.hero-inner{min-width:0}
.tag{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  padding:7px 13px;border:var(--b) solid var(--edge);background:var(--panel);
  color:var(--ink);font-size:11px;letter-spacing:.1em;
}
.tag i{width:var(--dot);height:var(--dot);background:var(--c-green);animation:blink 1.4s steps(2,end) infinite}
.hero h1{
  margin:26px 0 0;
  font-family:Galmuri14,monospace;
  font-size:28px;            /* 픽셀 폰트는 설계 배수에서만 또렷하다 */
  line-height:1.6;
  color:var(--ink);
}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l b{display:block;font-weight:400;transform:translateY(105%);transition:transform .5s steps(6)}
body.ready .hero h1 .l:nth-child(1) b{transform:none}
body.ready .hero h1 .l:nth-child(2) b{transform:none;transition-delay:.12s}
body.ready .hero h1 .l:nth-child(3) b{transform:none;transition-delay:.24s}
.hero h1 .accent b{color:var(--c-pink)}
.lead{max-width:600px;margin:28px 0 0;color:var(--text-2);font-size:16px;line-height:1.95}

/* 프로필 카드 */
.player{border:var(--b) solid var(--edge);background:var(--panel);box-shadow:var(--sh) var(--sh) 0 var(--shadow)}
.player-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:var(--b) solid var(--edge)}
.player-head strong{display:block;font-size:22px;font-weight:400}
.player-head small{color:var(--dim);font-size:13px}
.avatar{flex:none;width:32px;height:32px;position:relative}
/* 8×8 인베이더 스프라이트 (4px 단위) */
.avatar:before{content:"";position:absolute;left:0;top:0;width:4px;height:4px;background:transparent;box-shadow:8px 0px 0 var(--c-green),20px 0px 0 var(--c-green),12px 4px 0 var(--c-green),16px 4px 0 var(--c-green),8px 8px 0 var(--c-green),12px 8px 0 var(--c-green),16px 8px 0 var(--c-green),20px 8px 0 var(--c-green),4px 12px 0 var(--c-green),8px 12px 0 var(--c-green),20px 12px 0 var(--c-green),24px 12px 0 var(--c-green),0px 16px 0 var(--c-green),4px 16px 0 var(--c-green),8px 16px 0 var(--c-green),12px 16px 0 var(--c-green),16px 16px 0 var(--c-green),20px 16px 0 var(--c-green),24px 16px 0 var(--c-green),28px 16px 0 var(--c-green),0px 20px 0 var(--c-green),8px 20px 0 var(--c-green),12px 20px 0 var(--c-green),16px 20px 0 var(--c-green),20px 20px 0 var(--c-green),28px 20px 0 var(--c-green),0px 24px 0 var(--c-green),8px 24px 0 var(--c-green),20px 24px 0 var(--c-green),28px 24px 0 var(--c-green),12px 28px 0 var(--c-green),16px 28px 0 var(--c-green)}
.player-focus{margin:18px 0;color:var(--text-2);font-size:14px;line-height:1.8}
.player dl{margin:0;border-top:var(--b) solid var(--edge)}
.player dl div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:var(--b) solid var(--edge-soft)}
.player dl div:last-child{border-bottom:0;padding-bottom:0}
.player dt{color:var(--c-blue);font-size:12px;font-weight:700;font-family:Galmuri11,monospace}
.player dd{margin:0;font-size:13px}

.scroll-cue{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;
  color:var(--dim);font-size:11px;letter-spacing:.2em;
  animation:bob 1.6s steps(3,end) infinite alternate;
}
@keyframes bob{to{transform:translateY(8px)}}

/* =========================================================
   섹션 — 전부 페이지 스크롤로만 흐른다
   ========================================================= */
.stage{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(54px,6.6vw,96px) var(--pad)}
.stage[data-color="amber"]{--accent:var(--c-amber)}
.stage[data-color="violet"]{--accent:var(--c-violet)}
.stage[data-color="green"]{--accent:var(--c-green)}
.stage[data-color="cyan"]{--accent:var(--c-blue)}
.stage[data-color="gold"]{--accent:var(--c-gold)}
.stage-head{margin-bottom:clamp(22px,2.9vw,36px)}
.stage-head h2{
  display:block;
  margin:16px 0 8px;
  font-family:Galmuri14,monospace;
  font-size:28px;
  line-height:1.4;
  color:var(--ink);
}
.stage-sub{color:var(--dim);font-size:13px}

/* 프로젝트 카드 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:17px}
.card{
  border:var(--b) solid var(--edge);background:var(--panel);
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);cursor:pointer;
  transition:transform .1s steps(2),box-shadow .1s steps(2);
}
.card:hover,.card:focus-visible{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--accent)}
.card-kind{margin:0;color:var(--accent);font-size:11px;letter-spacing:.06em}
.card h3{margin:12px 0 10px;font-family:Galmuri11,monospace;font-size:22px;line-height:1.5}
.card-desc{margin:0;color:var(--text-2);font-size:13px;line-height:1.8}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.tags li{padding:4px 9px;border:var(--b) solid var(--edge-soft);color:var(--dim);font-size:11px}
.card-go{display:block;margin-top:18px;color:var(--accent);font-size:12px;letter-spacing:.08em}

/* 기록 행 */
.rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.row{
  position:relative;
  display:grid;grid-template-columns:186px minmax(0,1fr) auto;align-items:center;gap:22px;
  padding:20px 22px;
  border:var(--b) solid var(--edge);background:var(--panel);
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  transition:transform .1s steps(2),box-shadow .1s steps(2);
}
.row[data-detail]{cursor:pointer}
.row[data-detail]:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--accent)}
.row[data-detail]:after{content:"▶";position:absolute;right:10px;bottom:6px;color:var(--accent);font-size:10px}
.row-date{
  align-self:start;
  color:var(--accent);
  font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:0;line-height:1.6;
}
.row h3{font-family:Galmuri11,monospace;font-size:22px;line-height:1.5}
.row p{margin:8px 0 0;color:var(--dim);font-size:13px;line-height:1.8}
.badge{
  padding:8px 14px;
  border:var(--b) solid var(--edge);
  background:var(--accent);color:var(--on-accent);
  font-family:GalmuriMono11,monospace;font-size:11px;letter-spacing:.06em;
  white-space:nowrap;
}

/* =========================================================
   연락처
   ========================================================= */
.ending{
  position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(68px,8.4vw,124px) var(--pad) clamp(60px,6.8vw,94px);
  text-align:center;
}
.ending .chip{--accent:var(--c-pink)}
.ending h2{
  margin:24px 0 40px;
  font-family:Galmuri14,monospace;
  font-size:28px;
  line-height:1.7;
}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.contact-links a{
  padding:14px 22px;border:var(--b) solid var(--edge);background:var(--panel);
  font-size:13px;overflow-wrap:anywhere;
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  transition:transform .1s steps(2),box-shadow .1s steps(2),background .15s steps(2),color .15s steps(2);
}
.contact-links a:hover{background:var(--edge);color:var(--bg);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow)}
footer{
  padding:22px var(--pad) 30px;border-top:var(--b) solid var(--edge);
  color:var(--dim);font-size:11px;text-align:center;letter-spacing:.1em;
}

/* =========================================================
   상세 창
   ========================================================= */
dialog{
  width:min(920px,calc(100% - 24px));max-height:88svh;
  padding:0;border:var(--b) solid var(--edge);
  background:var(--panel);color:var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  overflow:auto;
}
dialog::backdrop{background:var(--backdrop)}
dialog[open]{animation:pop .18s steps(3)}
@keyframes pop{from{transform:scale(.9)}}
dialog .win-bar{position:sticky;top:0;z-index:2;padding:9px 12px;font-size:12px;background:var(--edge);color:var(--bg)}
.close{
  width:26px;height:26px;padding:0;border:var(--b) solid currentColor;
  background:transparent;color:inherit;font-size:12px;line-height:1;cursor:pointer;
  transition:background .12s steps(2),color .12s steps(2);
}
.close:hover{background:var(--panel);color:var(--ink)}
dialog h2{font-family:Galmuri11,monospace;font-size:22px;line-height:1.6}
.modal-period{margin:12px 0 0;color:var(--c-blue);font-size:14px;font-weight:700}
.modal-body{margin-top:22px}
.body-block{margin-bottom:22px}
.body-block:last-child{margin-bottom:0}
.body-label{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 8px;
  font-family:Galmuri11,monospace;font-size:12px;letter-spacing:.06em;
  color:var(--accent);
}
.body-label:before{content:"";width:var(--dot);height:var(--dot);background:var(--accent)}
.body-block p{margin:0;color:var(--text-2);font-size:14px;line-height:1.95}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;margin:24px 0}
.project-gallery[hidden]{display:none}
.project-gallery figure{margin:0;border:var(--b) solid var(--edge);background:var(--sunk);overflow:hidden;line-height:0}
.project-gallery img{display:block;width:100%;height:auto}
.project-gallery figure.contain{display:grid;place-items:center;background:#0d1330}
.project-gallery figure.contain img{width:80%;height:80%;object-fit:contain}
.modal-deck{margin:26px 0 8px}
.modal-deck[hidden]{display:none}
.deck-label{
  margin:0 0 10px;color:var(--accent);
  font-family:Galmuri11,monospace;font-size:12px;letter-spacing:.08em;
}
.deck-frame{
  position:relative;aspect-ratio:16/9;
  border:var(--b) solid var(--edge);background:var(--sunk);
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
}
.deck-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.deck-link{
  display:inline-block;margin-top:calc(var(--sh) + 8px);padding:10px 16px;
  border:var(--b) solid var(--edge);background:var(--panel);
  font-family:Galmuri11,monospace;font-size:12px;
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);
  transition:transform .1s steps(2),box-shadow .1s steps(2),background .15s steps(2),color .15s steps(2);
}
.deck-link:hover{background:var(--edge);color:var(--bg);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow)}

.project-link{
  display:inline-block;margin:6px 0 8px;padding:12px 20px;
  border:var(--b) solid var(--edge);background:var(--c-green);color:var(--on-accent);font-size:13px;
  box-shadow:var(--sh) var(--sh) 0 var(--shadow);transition:transform .1s steps(2),box-shadow .1s steps(2),background .15s steps(2);
}
.project-link:hover{background:var(--edge);color:var(--bg);transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow)}
.project-link[hidden]{display:none}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0 0;padding-top:22px;border-top:var(--b) solid var(--edge)}
.modal-meta[hidden]{display:none}
.modal-meta dt{color:var(--c-blue);font-size:12px;font-weight:700;font-family:Galmuri11,monospace}
.modal-meta dd{margin:8px 0 0;font-size:13px;line-height:1.8}

/* =========================================================
   등장 — 뚝뚝 끊기는 픽셀 느낌
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .28s steps(4),transform .28s steps(4)}
[data-reveal].in{opacity:1;transform:none}

/* =========================================================
   반응형
   ========================================================= */
/* 픽셀 폰트는 14의 배수에서만 또렷하므로 단계로만 키운다 */
@media(min-width:760px){
  .hero h1{font-size:42px}
  .stage-head h2,.ending h2{font-size:42px}
}
@media(min-width:1120px){
  .hero h1{font-size:56px}
}

@media(max-width:940px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:120px;padding-bottom:96px;min-height:0}
  .player{max-width:420px}
  .row{grid-template-columns:160px minmax(0,1fr);gap:8px 18px}
  .badge{grid-column:2;justify-self:start;margin-top:10px}
}

@media(max-width:620px){
  header{height:50px;inset:6px 0 auto}
  nav{gap:4px;font-size:11px}
  nav a{padding:5px 7px}
  .hero{padding:104px 18px 80px}
  .hero h1{font-size:28px;line-height:1.6}
  .lead{font-size:14px;line-height:1.9}
  .btn{width:100%;text-align:center;margin-top:24px}
  .scroll-cue{display:none}
  .cards{grid-template-columns:1fr;gap:16px}
  .stage{padding:46px 18px}
  .row{grid-template-columns:1fr;gap:6px;padding:17px 18px}
  .row-date{font-size:13px}
  .row h3{font-size:16px}
  .badge{grid-column:1;justify-self:start;margin-top:10px}
  .contact-links{flex-direction:column}
  .contact-links a{width:100%;text-align:center}
  .modal-meta,.project-gallery{grid-template-columns:1fr}
}

/* 모션 최소화 */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .hero h1 .l b{transform:none}
  [data-reveal]{opacity:1;transform:none}
}