/* Charlie — portfolio site
   화이트 단일 톤. 토큰은 더보기탭 디자인 시스템 문서(Component Library) 값을 따른다.
   굵기는 400·500·600·700만. 사각형에 라운드를 쓰지 않는다(점처럼 원이 의미인 요소만 예외).
   빨강은 장식에 쓰지 않는다. 하락·보류·위반처럼 결과를 알려야 하는 값에만 쓴다. */
:root {
  --bg:#FFFFFF; --alt:#F7F8F9; --line:#E1E1E1; --hair:#EFEFEF;
  --ink:#191919; --sub:#616161; --cap:#999999;
  --signal:#E5432B; --signal-text:#C13A18; --held-bg:#FDECEA;
  --font:'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --max:1200px; --gutter:40px;
  color-scheme:light;
}
* { box-sizing:border-box; margin:0; padding:0; }
*::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; font-weight:400; line-height:1.6; word-break:keep-all; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--max); margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px)); }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* header */
.site-header { position:sticky; top:0; z-index:10; height:64px; border-bottom:1px solid var(--hair); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.site-header .wrap { height:100%; display:flex; align-items:center; justify-content:space-between; }
.logo { font-weight:700; letter-spacing:-.02em; font-size:17px; }
.logo span { color:var(--cap); }
.nav { display:flex; gap:28px; font-size:14px; font-weight:600; color:var(--cap); }
.nav a:hover, .nav a[aria-current="page"] { color:var(--ink); }

/* hero — 라인 정육면체 */
.hero { position:relative; height:calc(100svh - 64px); min-height:560px; max-height:860px; overflow:hidden; border-bottom:1px solid var(--hair); }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.hero canvas.dragging { cursor:grabbing; }
.hero .wrap { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:40px; z-index:1; pointer-events:none; }
.hero .hint { align-self:flex-end; font-size:12px; font-weight:500; color:var(--cap); margin-bottom:20px; }
.hero .meta { border-top:1px solid var(--hair); padding-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; font-size:14px; font-weight:600; }
.hero .meta span { display:block; font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--cap); margin-bottom:6px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 디자인에 대한 생각 — 스크롤 고정 무대(300svh 동안 세 원칙이 차례로 켜진다) */
.thoughts { position:relative; height:300svh; border-bottom:1px solid var(--hair); }
.thoughts-stage { position:sticky; top:64px; height:calc(100svh - 64px); min-height:520px; display:flex; align-items:center; }
.thoughts-grid { width:100%; display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:center; }
.thoughts-label { font-size:13px; font-weight:600; color:var(--cap); }
.thought-count { margin-top:8px; font-size:13px; font-weight:500; color:var(--cap); font-variant-numeric:tabular-nums; }
.thought-count b { color:var(--ink); font-weight:600; }
.thought-list { list-style:none; margin-top:36px; display:grid; gap:28px; }
.thought { font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.02em; line-height:1.45; color:#D0D2D5; transition:color .5s ease; text-wrap:balance; }
.thought.on { color:var(--ink); }
#thoughts-canvas { width:100%; aspect-ratio:7/6; max-height:calc(100svh - 160px); }

/* 에세이 — 좁은 한 단, 글만 */
.essay { padding-top:128px; display:grid; grid-template-columns:5fr 7fr; gap:48px; }
.essay-label { font-size:13px; font-weight:600; color:var(--cap); position:sticky; top:96px; align-self:start; }
.essay-body { max-width:640px; }
.essay-body p { font-size:17px; line-height:1.95; color:var(--ink); }
.essay-body p + p { margin-top:1.6em; }

/* sections */
.section { padding-top:120px; }
.section-head { margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid var(--ink); display:grid; grid-template-columns:1fr 3fr; gap:48px; align-items:baseline; }
.section-head h2 { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.section-lead { font-size:16px; color:var(--sub); line-height:1.7; max-width:680px; }

/* Experiments — 7:5 목록 + 선 도식. 01→02→03만 세로선으로 잇는다 */
.exp { display:grid; grid-template-columns:7fr 5fr; gap:56px; align-items:start; }
.exp-group { font-size:13px; font-weight:600; color:var(--cap); margin:0 0 8px; }
.exp-group ~ .exp-group { margin-top:56px; }
.exp-chain, .exp-solo { list-style:none; }
.exp-chain { position:relative; }
/* 세로선: 01 번호 중심에서 03 번호 중심까지 */
.exp-chain::before { content:''; position:absolute; left:11px; top:var(--rail-top, 36px); height:var(--rail-h, 0); width:1px; background:var(--ink); }
.exp-row { display:grid; grid-template-columns:48px 1fr; gap:0 8px; padding:24px 0; border-top:1px solid var(--hair); position:relative; }
.exp-solo li:first-child .exp-row, .exp-chain li:first-child .exp-row { border-top:0; }
.exp-num { font-size:13px; font-weight:500; color:var(--cap); font-variant-numeric:tabular-nums; padding-top:4px; position:relative; z-index:1; }
.exp-chain .exp-num { width:23px; height:23px; display:grid; place-items:center; padding:0; margin-top:1px; background:var(--bg); border:1px solid var(--ink); border-radius:50%; font-size:11px; color:var(--ink); }
.exp-body { display:grid; gap:6px; }
.exp-title { font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.4; }
.exp-q { font-size:15px; color:var(--sub); line-height:1.7; }
.exp-meta { margin-top:4px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; }
.exp-verdict { font-weight:500; color:var(--ink); }
.exp-verdict.is-held { color:var(--signal-text); }
.exp-verdict.is-live::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ink); margin-right:6px; vertical-align:1px; }
.exp-fig { font-weight:600; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums; }
.exp-fig.is-neg { color:var(--signal-text); }
.exp-fig.is-quiet { font-weight:500; color:var(--cap); font-size:13px; }
.exp-link { margin:0 0 0 48px; padding:2px 0 2px 0; font-size:13px; font-weight:500; color:var(--cap); }
.exp-link::before { content:'↳ '; }
.exp-mini { display:none; }
.exp-row .exp-title { transition:color .2s; }
.exp-row:hover .exp-title, .exp-row.is-active .exp-title { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.exp-row:not(.is-active) .exp-q { transition:color .2s; }
.exp-figure { align-self:stretch; }
.exp-figure__sticky { position:sticky; top:112px; }
#exp-canvas { width:100%; height:300px; display:block; }
.exp-figure__cap { margin-top:12px; font-size:13px; font-weight:500; color:var(--cap); min-height:20px; }

/* Systems — 3열 텍스트 */
.sys { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.sys a { display:grid; gap:8px; padding-top:20px; border-top:1px solid var(--hair); }
.sys-name { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.sys-role { font-size:13px; font-weight:500; color:var(--cap); }
.sys-desc { margin-top:6px; font-size:14px; line-height:1.75; color:var(--sub); }
.sys-meta { margin-top:4px; font-size:13px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.sys a:hover .sys-name { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* Foundation — 연도 중심 2행 아카이브 */
.fnd { list-style:none; }
.fnd a { display:grid; grid-template-columns:1fr 3fr; gap:48px; padding:28px 0; border-top:1px solid var(--hair); }
.fnd li:first-child a { border-top:0; padding-top:4px; }
.fnd-year { font-size:13px; font-weight:500; color:var(--cap); font-variant-numeric:tabular-nums; padding-top:3px; }
.fnd-body { display:grid; gap:4px; max-width:680px; }
.fnd-title { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.fnd-sub { font-size:13px; font-weight:500; color:var(--cap); }
.fnd-desc { margin-top:8px; font-size:15px; line-height:1.75; color:var(--ink); }
.fnd-meta { margin-top:4px; font-size:13px; font-weight:500; color:var(--sub); }
.fnd a:hover .fnd-title { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* about page — 글이 주인공. 왼쪽 레이블 25% · 오른쪽 본문 75%, 본문 읽기 폭 680px */
.about-page { padding-top:96px; }
.about-intro, .about-section { display:grid; grid-template-columns:1fr 3fr; gap:48px; }
.about-label { font-size:13px; font-weight:600; color:var(--cap); letter-spacing:.02em; text-transform:uppercase; }
.about-intro__body { max-width:680px; }
.about-intro h1 { font-size:clamp(30px,3.4vw,40px); font-weight:700; letter-spacing:-.02em; line-height:1.3; text-wrap:balance; }
.about-intro__role { margin-top:8px; font-size:16px; font-weight:500; color:var(--sub); }
.about-intro__text { margin-top:40px; }
.about-intro__text p { font-size:18px; line-height:1.8; color:var(--ink); }
.about-intro__text p + p { margin-top:1.1em; }

.about-section { margin-top:112px; padding-top:28px; border-top:1px solid var(--hair); }
.about-section__heading { align-self:start; position:sticky; top:96px; }
.about-section__num { font-size:13px; font-weight:500; color:var(--cap); font-variant-numeric:tabular-nums; }
.about-section__heading h2 { margin-top:6px; font-size:20px; font-weight:700; letter-spacing:-.015em; }
.about-section__sub { margin-top:4px; font-size:14px; font-weight:500; color:var(--sub); }
.about-section__content { max-width:680px; display:grid; gap:64px; }
.about-essay__title { font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.45; text-wrap:balance; }
.about-essay p { margin-top:14px; font-size:16px; line-height:1.85; color:var(--ink); }
.about-essay p + p { margin-top:1em; }

.about-experience { list-style:none; }
.about-experience__item { display:grid; grid-template-columns:150px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--hair); }
.about-experience__item:first-child { border-top:0; padding-top:0; }
.about-experience__period { font-size:13px; font-weight:500; color:var(--cap); font-variant-numeric:tabular-nums; padding-top:3px; }
.about-experience__company { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.about-experience__role { margin-top:2px; font-size:14px; color:var(--sub); }
.about-experience__desc { margin-top:12px; font-size:15px; line-height:1.8; color:var(--ink); }

/* 홈 Story 끝 About 링크 */
.essay-more { margin-top:32px; font-size:15px; font-weight:600; }
.essay-more a { border-bottom:1px solid var(--ink); padding-bottom:2px; }
.essay-more a:hover { color:var(--sub); border-color:var(--sub); }

/* footer */
.site-footer { margin-top:112px; border-top:1px solid var(--hair); }
.site-footer .wrap { padding-top:28px; padding-bottom:56px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--cap); }
.site-footer a { color:var(--sub); } .site-footer a:hover { color:var(--ink); }
.site-footer .links { display:flex; gap:20px; }

/* project page */
.project { padding-top:72px; max-width:864px; }
.project .kicker { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--cap); font-weight:600; }
.project h1 { margin-top:14px; font-size:clamp(30px,3.6vw,40px); font-weight:700; letter-spacing:-.02em; line-height:1.3; text-wrap:balance; }
.project .lede { margin-top:20px; font-size:17px; line-height:1.8; color:var(--sub); }
.spec { margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:20px 0; font-size:14px; font-weight:600; }
.spec span { display:block; font-size:12px; font-weight:500; color:var(--cap); margin-bottom:6px; }
.block { margin-top:72px; }
.block .label { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--cap); font-weight:600; }
.block h2 { margin-top:10px; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.42; text-wrap:balance; }
.block p { margin-top:14px; color:var(--sub); line-height:1.85; }
.block .en { font-size:14px; color:var(--cap); line-height:1.75; }
.table-wrap { overflow-x:auto; margin-top:24px; }
.table { width:100%; min-width:520px; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.table th { text-align:left; font-size:12px; color:var(--cap); font-weight:500; padding:10px 12px 10px 0; border-bottom:1px solid var(--ink); }
.table td { padding:13px 12px 13px 0; border-bottom:1px solid var(--hair); }
.table td.neg, .table .neg { color:var(--signal-text); font-weight:600; }
.table td.pos { font-weight:600; }
.table tr.verdict td { font-weight:600; border-bottom:1px solid var(--ink); }
.points { margin-top:20px; display:grid; gap:14px; }
.points li { list-style:none; padding-left:16px; border-left:2px solid var(--ink); color:var(--sub); line-height:1.7; }
.points li b { display:block; color:var(--ink); font-size:16px; font-weight:600; margin-bottom:2px; }
.role { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:24px; font-size:14px; }
.role h3 { font-size:12px; font-weight:500; color:var(--cap); margin-bottom:10px; }
.role ul { list-style:none; display:grid; gap:8px; color:var(--sub); }
.role li::before { content:'—'; color:var(--cap); margin-right:8px; }
.pager { margin-top:96px; padding-top:24px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:16px; font-size:14px; font-weight:600; }
.pager a { color:var(--sub); } .pager a:hover { color:var(--ink); }
.pager small { display:block; font-size:12px; font-weight:500; color:var(--cap); }

@media (max-width:820px) {
  :root { --gutter:20px; }
  .nav { gap:16px; font-size:13px; } .nav a.hide-m { display:none; }
  .hero .meta { grid-template-columns:1fr 1fr; row-gap:16px; } .hero .hint { display:none; }
  .section { padding-top:64px; }
  .about-page { padding-top:56px; }
  .about-intro, .about-section { grid-template-columns:1fr; gap:20px; }
  .about-intro__text { margin-top:28px; } .about-intro__text p { font-size:17px; }
  .about-section { margin-top:72px; } .about-section__heading { position:static; } .about-section__content { gap:48px; }
  .about-essay__title { font-size:18px; }
  .about-experience__item { grid-template-columns:1fr; gap:4px; }
  .thoughts-grid { grid-template-columns:1fr; gap:16px; } .thought-list { margin-top:20px; gap:16px; } .thought { font-size:19px; }
  #thoughts-canvas { aspect-ratio:auto; height:38svh; }
  .essay { grid-template-columns:1fr; gap:16px; padding-top:80px; } .essay-label { position:static; } .essay-body p { font-size:16px; line-height:1.9; }
  .section-head { grid-template-columns:1fr; gap:8px; }
  .exp { grid-template-columns:1fr; } .exp-figure { display:none; }
  .exp-mini { display:block; grid-column:2; width:100%; max-width:320px; height:120px; margin-top:16px; }
  .exp-title { font-size:18px; }
  .sys { grid-template-columns:1fr; gap:0; } .sys li + li a { margin-top:24px; }
  .fnd a { grid-template-columns:1fr; gap:8px; }
  .spec { grid-template-columns:1fr 1fr; } .role { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }