/* hyunmin.me v3 — "검증 대장" · 토큰은 DESIGN.md가 유일한 출처 */
:root {
  --bg: #F2EEE7;
  --ink: #303030;
  --muted: #6B665E;
  --line: #DCD5C9;
  --blue: #3BA6F1;                  /* 단일 블루 — 밝은 배경: 스트로크·그래픽만(2.3:1) / 어두운 배경: 텍스트 허용(6.4:1) */
  --bg-0: #F6F3ED;
  --bg-1: #F2EEE7;
  --bg-2: #EFEAE1;
  --bg-3: #EBE5DA;
  --line-dark: rgba(242, 238, 231, 0.22);

  --font: 'Wanted Sans', system-ui, sans-serif;
  --font-point: 'Instrument Serif', serif;

  --sp1: 28px;
  --sp2: 64px;
  --sp3: 136px;
  --sp4: 232px;

  --radius: 2px;
  --padx: clamp(20px, 4.5vw, 56px);
  --maxw: 1280px;
  --measure: 640px;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 800ms;
  --dur-bg: 700ms;

  --d1: clamp(3.5rem, 11vw, 9.5rem);
  --d2: clamp(2.375rem, 1.4rem + 4.4vw, 5.25rem);
  --d3: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
  --t3: 1.1875rem;
  --t4: 1.0625rem;
  --t5: 0.84375rem;
  --t6: 0.875rem;
  --tnum: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
@media (max-width: 768px) {
  :root { --sp1: 20px; --sp2: 44px; --sp3: 88px; --sp4: 128px; }
}

/* 폰트 — 자체 호스팅 서브셋, CDN 0 */
@font-face { font-family: 'Wanted Sans'; src: url('../fonts/WantedSans-Regular.subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Wanted Sans'; src: url('../fonts/WantedSans-Medium.subset.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Wanted Sans'; src: url('../fonts/WantedSans-SemiBold.subset.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-Regular.subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-Italic.subset.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* 베이스 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t4);
  line-height: 1.85;
  color: var(--ink);
  background-color: var(--bg-0);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
  transition: background-color var(--dur-bg) var(--ease-expo);
}
body[data-bg="0"] { background-color: var(--bg-0); }
body[data-bg="1"] { background-color: var(--bg-1); }
body[data-bg="2"] { background-color: var(--bg-2); }
body[data-bg="3"] { background-color: var(--bg-3); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--bg-0); }
.dark ::selection { background: var(--bg); color: var(--ink); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness var(--dur-1) ease, color var(--dur-1) ease; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--radius); }
.dark :focus-visible, .lab-page :focus-visible { outline-color: var(--bg); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg-0); padding: 10px 16px; z-index: 99; text-decoration: none; }
.skip:focus { left: var(--padx); top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--padx); }
section { scroll-margin-top: 84px; }

/* 타이포 유틸 */
.eyebrow { font-family: var(--font-point); font-style: italic; font-weight: 400; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.01em; color: var(--muted); }
.dark .eyebrow { color: var(--blue); }
.d2 { font-size: var(--d2); font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; }
.serif-i { font-family: var(--font-point); font-style: italic; font-weight: 400; letter-spacing: 0; }
.t5 { font-size: var(--t5); line-height: 1.6; color: var(--muted); }

/* 리빌 — 제목: 라인 마스크 / 본문: 라이즈 페이드 (1회) */
.rv .l { display: block; overflow: hidden; }
.rv .l > span { display: block; transform: translateY(115%); transition: transform var(--dur-2) var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.in .l > span { transform: translateY(0); }
.fade { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-expo), transform 600ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.fade.in { opacity: 1; transform: none; }

/* 헤더 */
.site-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  max-width: var(--maxw); margin-inline: auto; padding: 18px var(--padx);
  color: var(--ink);
  transition: color 300ms ease, background-color var(--dur-bg) var(--ease-expo);
}
/* 스크롤 시 현재 배경 명도와 동일한 불투명 배경 — 본문 글자 겹침 방지 */
body[data-bg="0"] .site-head.scrolled { background-color: var(--bg-0); }
body[data-bg="1"] .site-head.scrolled { background-color: var(--bg-1); }
body[data-bg="2"] .site-head.scrolled { background-color: var(--bg-2); }
body[data-bg="3"] .site-head.scrolled { background-color: var(--bg-3); }
body .site-head.on-dark.scrolled { background-color: var(--ink); }
.site-head::after {
  content: ""; position: absolute; left: var(--padx); right: var(--padx); bottom: 0;
  height: 1px; background: var(--line); opacity: 0; transition: opacity 300ms ease;
}
.site-head.scrolled::after { opacity: 1; }
.site-head.on-dark { color: var(--bg); }
.site-head.on-dark::after { background: var(--line-dark); }
.site-head .brand { font-size: var(--t6); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; display: inline-block; transition: color var(--dur-1) ease; }
.site-head .brand:hover, .site-head .brand.scrambling { color: var(--blue); }
.site-head nav { display: flex; gap: 22px; }
.site-head nav a { font-size: var(--t6); font-weight: 500; text-decoration: none; position: relative; padding: 4px 0; }
.site-head nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-expo); }
.site-head nav a:hover::after, .site-head nav a:focus-visible::after, .site-head nav a.active::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 768px) {
  .site-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 8px;
    padding-bottom: 0;
  }
  .site-head .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    width: max-content;
  }
  .site-head nav {
    display: flex;
    gap: 4px;
    margin-inline: calc(0px - var(--padx));
    padding: 0 var(--padx) 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-head nav::-webkit-scrollbar { display: none; }
  .site-head nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
    white-space: nowrap;
  }
  .site-head nav a:first-child { margin-left: -10px; }
  .site-head::after { left: var(--padx); right: var(--padx); }
  section { scroll-margin-top: 112px; }
}

/* ── 1. Hero ── */
.hero { position: relative; min-height: calc(100svh - 64px); display: grid; align-content: center; padding-block: var(--sp2) var(--sp3); }
.hero .ghost {
  position: absolute; right: calc(-0.5 * var(--padx)); bottom: 4%;
  font-family: var(--font-point); font-style: italic; font-weight: 400;
  font-size: var(--d1); line-height: 0.95; color: var(--line);
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; will-change: transform;
}
.hero .hero-in { position: relative; z-index: 1; }
.hero h1 { font-size: var(--d2); font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; margin-top: 18px; }
.hero .lead { margin-top: var(--sp1); font-size: var(--t3); font-weight: 400; line-height: 1.75; max-width: var(--measure); }
.hero .subline { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--t6); font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }
.hero .subline span { white-space: nowrap; }
.hero .subline span:not(:last-child)::after { content: " |"; }
.hero .avail { margin-top: 14px; font-size: var(--t6); font-weight: 500; color: var(--ink); letter-spacing: 0.01em; }
.hero .meta { margin-top: 6px; font-size: var(--t6); color: var(--muted); }
.quicklinks { margin-top: var(--sp2); border-top: 1px solid var(--line); padding-top: var(--sp1); display: flex; flex-wrap: wrap; gap: 14px 36px; }
.quicklinks a { display: inline-flex; align-items: center; min-height: 44px; }
.quicklinks .primary { font-size: var(--t3); font-weight: 500; color: var(--ink); text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.quicklinks .primary:hover { text-decoration-thickness: 3px; }
.quicklinks a:not(.primary) { font-size: var(--t6); font-weight: 500; }
.filemeta { margin-left: 8px; font-size: var(--t5); font-weight: 400; color: var(--muted); }
.cue { position: absolute; left: 2px; bottom: 24px; width: 1px; height: 64px; background: var(--line); overflow: hidden; }
.cue::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ink); transform: translateY(-100%); animation: cue 2.2s var(--ease-expo) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(102%); } }

/* ── 2. 자기소개서 (다크 챕터) ── */
.cover { background: var(--ink); color: var(--bg); padding-block: var(--sp4); margin-top: var(--sp4); }
.cover .intro-p { margin-top: var(--sp2); font-size: var(--t3); font-weight: 400; line-height: 1.85; max-width: var(--measure); }
.creed { margin-top: var(--sp3); display: grid; gap: var(--sp2); }
.creed .row { display: grid; grid-template-columns: clamp(48px, 6vw, 88px) 1fr; gap: 16px var(--sp1); border-top: 1px solid var(--line-dark); padding-top: var(--sp1); }
.creed .idx { font-family: var(--font-point); font-style: italic; font-size: var(--d3); line-height: 1.2; color: var(--blue); }
.creed .txt { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; }
.creed .p { margin-top: 14px; font-size: var(--t4); font-weight: 400; line-height: 1.85; max-width: 720px; }
.cover-close { margin-top: var(--sp3); max-width: 820px; }
.cover-close p { font-size: var(--d3); font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; }
.cover-close p + p { margin-top: var(--sp1); }
.hl { opacity: 0.55; transition: opacity 220ms linear; } /* dim 상태도 AA 유지 (≈5.3:1) */
.hl.lit { opacity: 1; }

/* ── 공통 섹션 머리 ── */
.sec { padding-top: var(--sp4); }
.sec.tight { padding-top: var(--sp3); }
.sec .eyebrow { margin-bottom: 14px; }
.sec .sec-title { max-width: 16em; }

/* ── 3. Capabilities ── */
.caps { margin-top: var(--sp2); border-bottom: 1px solid var(--line); }
details.acc { border-top: 1px solid var(--line); }
details.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 72px 1fr auto; align-items: baseline; gap: 20px; padding-block: 26px; transition: padding-left 300ms var(--ease-expo); }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary:hover, details.acc summary:focus-visible { padding-left: 10px; }
details.acc .idx { font-family: var(--font-point); font-style: italic; font-size: 1.25rem; color: var(--muted); transition: color var(--dur-1) ease; }
details.acc summary:hover .idx, details.acc[open] .idx { color: var(--ink); }
details.acc .name { font-size: var(--d3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
details.acc .mark { font-size: 1.375rem; font-weight: 400; color: var(--muted); transition: transform 300ms var(--ease-expo); transform-origin: center; line-height: 1; }
details.acc[open] .mark { transform: rotate(45deg); }
details.acc .body { overflow: hidden; }
details.acc .body-in { padding: 0 0 28px 92px; max-width: 720px; }
@media (max-width: 768px) {
  details.acc summary { grid-template-columns: 44px 1fr auto; }
  details.acc .body-in { padding-left: 0; }
}
.cap-desc { font-size: var(--t4); line-height: 1.8; }
.cap-sub { margin-top: 14px; font-size: var(--t5); color: var(--muted); }
.skills-extra { margin-top: var(--sp2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp1) var(--sp2); max-width: 900px; }
.skills-extra h3 { font-size: var(--t6); font-weight: 500; color: var(--muted); }
.skills-extra ul { margin-top: 10px; }
.skills-extra li { font-size: 0.9375rem; line-height: 1.8; }
.skills-note { margin-top: var(--sp1); max-width: var(--measure); }
.skills-note p + p { margin-top: 8px; }
@media (max-width: 640px) { .skills-extra { grid-template-columns: 1fr; } }

/* ── 4. Work ── */
.work-list { margin-top: var(--sp2); border-bottom: 1px solid var(--line); }
.work-list details.acc summary { grid-template-columns: 1fr auto; grid-template-areas: "eyebrow mark" "claim mark"; row-gap: 8px; }
.work-list .w-eyebrow { grid-area: eyebrow; font-family: var(--font-point); font-style: italic; font-size: 1.0625rem; color: var(--muted); transition: color var(--dur-1) ease; }
.work-list summary:hover .w-eyebrow, .work-list details[open] .w-eyebrow { color: var(--ink); }
.work-list .claim { grid-area: claim; font-size: var(--d3); font-weight: 600; line-height: 1.32; letter-spacing: -0.01em; max-width: 20em; }
.work-list .mark { grid-area: mark; align-self: center; }
.work-list details.acc .body-in { padding: 4px 0 34px 0; max-width: 760px; } /* Capabilities 들여쓰기(92px) 상속 차단 — 본문 좌측정렬 */
.work-desc { font-size: var(--t4); line-height: 1.85; max-width: var(--measure); }
.chips { margin-top: var(--sp1); display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.chip { position: relative; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 4px; }
.chip::before { content: ""; width: 6px; height: 6px; background: var(--blue); margin-bottom: 8px; }
.chip .v { font-size: clamp(1.875rem, 1.4rem + 1.7vw, 2.625rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chip.key { border-color: var(--blue); border-width: 2px; padding: 19px 19px 15px; }
.chip .k { margin-top: 2px; font-size: 0.875rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.chip .b { font-size: 0.75rem; line-height: 1.5; color: var(--muted); max-width: 21em; }
@media (max-width: 640px) { .chips { grid-template-columns: 1fr 1fr; } .chip .v { font-size: 1.625rem; } }
@media (max-width: 420px) { .chips { grid-template-columns: 1fr; } }
.work-link { margin-top: var(--sp1); font-size: var(--t6); font-weight: 500; }
.work-link a { color: var(--ink); text-decoration-color: var(--blue); text-decoration-thickness: 2px; }

/* ↗ 화살표 링크 — 호버 시 우상단 이동 모션 */
.quicklinks a span[aria-hidden="true"], .work-link a span[aria-hidden="true"], .contact-list .out {
  display: inline-block; transition: transform 300ms var(--ease-expo), color var(--dur-1) ease;
}
.quicklinks a:hover span[aria-hidden="true"], .quicklinks a:focus-visible span[aria-hidden="true"],
.work-link a:hover span[aria-hidden="true"], .work-link a:focus-visible span[aria-hidden="true"] { transform: translate(3px, -3px); }
.contact-list a:hover .out, .contact-list a:focus-visible .out { transform: translate(4px, -4px); color: var(--ink); }

/* ── 5. Career ── */
.career-list { margin-top: var(--sp2); border-bottom: 1px solid var(--line); }
.career-row { display: grid; grid-template-columns: clamp(150px, 20vw, 300px) 1fr; column-gap: var(--sp1); border-top: 1px solid var(--line); padding-block: var(--sp1); transition: background-color 250ms ease; }
.career-row:hover { background-color: var(--bg-0); }
.career-row .period { font-size: var(--t3); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.career-row h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.career-row .role { margin-top: 4px; font-size: var(--t6); font-weight: 500; color: var(--muted); }
.career-row ul { margin-top: 14px; max-width: var(--measure); }
.career-row li { font-size: 0.9375rem; line-height: 1.75; position: relative; padding-left: 18px; }
.career-row li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 5px; height: 5px; background: var(--blue); } /* 네모 도트 */
.career-row li + li { margin-top: 6px; }
.career-row li.sum { padding-left: 0; font-weight: 500; }
.career-row li.sum::before { display: none; }
@media (max-width: 640px) { .career-row { grid-template-columns: 1fr; row-gap: 8px; } }

/* ── 6. Education · Awards ── */
.edu-list { margin-top: var(--sp2); border-bottom: 1px solid var(--line); max-width: 900px; }
.edu-row { display: grid; grid-template-columns: clamp(110px, 14vw, 190px) 1fr; column-gap: var(--sp1); border-top: 1px solid var(--line); padding-block: 20px; }
.edu-row .y { font-size: var(--t6); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .edu-row { grid-template-columns: 1fr; row-gap: 6px; } }
.edu-row .what { font-size: var(--t3); font-weight: 500; line-height: 1.55; }
.edu-row .sub { margin-top: 2px; font-size: var(--t5); color: var(--muted); }

/* ── 7. Contact ── */
.contact { padding-block: var(--sp4) 0; }
.contact .sec-title { max-width: 26em; font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem); line-height: 1.34; }
.big-mail { margin-top: var(--sp2); }
.big-mail a { display: inline-block; font-size: clamp(1.75rem, 1rem + 3.6vw, 4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; text-decoration: none; position: relative; }
.big-mail a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform 450ms var(--ease-expo); }
.big-mail a:hover::after, .big-mail a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.contact-list { margin-top: var(--sp2); max-width: 820px; border-bottom: 1px solid var(--line); }
.contact-list li { border-top: 1px solid var(--line); }
.contact-list a { display: flex; align-items: baseline; gap: 12px; padding-block: 18px; font-size: var(--t3); font-weight: 500; text-decoration: none; transition: padding-left 300ms var(--ease-expo); }
.contact-list a:hover, .contact-list a:focus-visible { padding-left: 10px; }
.contact-list a:hover .label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-list .filemeta { margin-left: 0; }
.contact-list .out { margin-left: auto; color: var(--muted); font-weight: 400; }
.contact-list .share-btn {
  width: 100%; display: flex; align-items: baseline; gap: 12px; padding-block: 18px;
  font: inherit; font-size: var(--t3); font-weight: 500; color: var(--ink); text-align: left;
  background: none; border: 0; cursor: pointer; transition: padding-left 300ms var(--ease-expo);
}
.contact-list .share-btn:hover, .contact-list .share-btn:focus-visible { padding-left: 10px; }
.contact-list .share-btn:hover .label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-list .share-btn:hover .out, .contact-list .share-btn:focus-visible .out { transform: translate(4px, -4px); color: var(--ink); }
.contact-meta { margin-top: var(--sp1); }
.site-foot { margin-top: var(--sp3); padding-block: var(--sp1) 44px; border-top: 1px solid var(--line); }
.site-foot .row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline; }
.site-foot p + p { margin-top: 4px; }

/* ── 탱탱볼 (Lab 진입 · --blue 그래픽) ── */
.lab-ball {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blue);
  display: block; text-decoration: none;
  will-change: transform;
  touch-action: manipulation;
}
.lab-ball .tip {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%) translateY(4px);
  font-family: var(--font-point); font-style: italic; font-size: 1rem;
  color: var(--ink); background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 3px 10px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--ease-expo);
}
.lab-ball:hover .tip, .lab-ball:focus-visible .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.lab-ball:focus-visible { outline-offset: 5px; border-radius: 50%; }
/* 메인의 탱탱볼: 링크 코어 + 호버 팝(Lab 라벨 + 작은 닫기) */
.lab-ball .core { position: absolute; inset: 0; border-radius: 50%; }
.lab-ball .core:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 50%; }
.lab-ball .pop {
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%) translateY(4px);
  display: flex; gap: 6px; align-items: center; padding-bottom: 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--ease-expo);
}
.lab-ball .pop .tip { position: static; transform: none; opacity: 1; transition: none; pointer-events: auto; }
.lab-ball:hover .pop, .lab-ball:focus-within .pop { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tip-x {
  font-family: var(--font); font-size: 0.8125rem; font-weight: 500; line-height: 1.4;
  color: var(--muted); background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2px 7px; cursor: pointer;
}
.tip-x:hover { color: var(--ink); border-color: var(--ink); }
@media (hover: none) { .lab-ball .pop { display: none; } }
.lab-ball.docked { left: auto; top: auto; right: 20px; bottom: 20px; }
@media (hover: none) {
  .lab-ball.docked {
    position: absolute;
    left: auto;
    top: calc(100svh - 68px);
    right: 20px;
    bottom: auto;
  }
}
@media (hover: none) { .lab-ball .tip { display: none; } }

/* ── Lab 페이지 ── */
.lab-page { background: var(--ink); color: var(--bg); min-height: 100svh; }
.lab-page .site-head { color: var(--bg); }
.lab-page .site-head::after { background: var(--line-dark); }
.lab-hero { padding-block: var(--sp3) var(--sp2); }
.lab-hero .title { font-family: var(--font-point); font-style: italic; font-weight: 400; font-size: var(--d1); line-height: 1; color: var(--blue); }
.lab-hero .sub { margin-top: var(--sp1); font-size: var(--t3); line-height: 1.75; max-width: var(--measure); }
.lab-hero .note { margin-top: 12px; font-size: var(--t5); color: var(--line); }
.lab-list { padding-bottom: var(--sp4); }
.lab-item { display: grid; grid-template-columns: clamp(90px, 10vw, 140px) 1fr auto; gap: 8px var(--sp1); align-items: baseline; border-top: 1px solid var(--line-dark); padding-block: 22px; text-decoration: none; transition: padding-left 300ms var(--ease-expo); }
.lab-item:hover, .lab-item:focus-visible { padding-left: 10px; }
.lab-item:hover .t, .lab-item:focus-visible .t { color: var(--blue); }
.lab-item .d { font-size: var(--t6); color: var(--line); font-variant-numeric: tabular-nums; }
.lab-item .t { font-size: var(--d3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.lab-item .n { grid-column: 2; font-size: var(--t5); color: var(--line); }
.lab-item .tags { font-family: var(--font-point); font-style: italic; font-size: 1rem; color: var(--line); }
@media (max-width: 640px) {
  .lab-item { grid-template-columns: 1fr; gap: 4px; padding-block: 26px; }
  .lab-item .d { margin-bottom: 4px; }
  .lab-item .t { max-width: 100%; }
  .lab-item .tags { margin-top: 6px; }
  .lab-item .n { grid-column: 1; margin-top: 8px; }
}
.lab-empty { border-top: 1px solid var(--line-dark); padding-block: var(--sp2); }
.lab-empty .big { font-size: var(--d3); font-weight: 600; line-height: 1.4; max-width: 20em; }
.lab-empty .t5 { color: var(--line); margin-top: 14px; }
.lab-back { padding-bottom: var(--sp3); }
.lab-back a { font-size: var(--t6); font-weight: 500; }

/* 모션 축소 — 정보 손실 0 */
@media (prefers-reduced-motion: reduce) {
  body, a, .fade, .rv .l > span, details.acc summary, .contact-list a, .lab-item, .big-mail a::after, .site-head nav a::after,
  .quicklinks a span[aria-hidden="true"], .work-link a span[aria-hidden="true"], .contact-list .out, .site-head .brand { transition: none !important; }
  .cue::after { animation: none; transform: translateY(0); }
  .fade { opacity: 1; transform: none; }
  .rv .l > span { transform: none; }
}