/* =====================================================================
   SEHEE JANG — Portfolio 2026 · 스타일 (v3: 원본 슬라이드 좌표 기반 비례 레이아웃)
   - 데스크톱(≥760px): 각 슬라이드를 '무대(stage)'로 보고 모든 위치·크기를 무대 폭 기준(cqw)으로 지정 → 어떤 폭에서도 원본 구도 유지
   - 모바일(<760px): 같은 요소·같은 관계를 위아래로 다시 구성
   - 색: 검정 #000 · 흰색 · 빨강 #EB0029 · 회색 #8F8F8F / 글꼴: Pretendard Variable, Cormorant(연도), Hurricane(손글씨)
   ===================================================================== */
@font-face { font-family: 'Sunydale'; src: url('../assets-1e2a5d36/fonts/sunydale-demo.otf') format('opentype'); font-weight: 400; font-display: swap; }
:root {
  --black: #000; --white: #fff; --red: #EB0029; --red2: #C92D33; --red3: #E83840;
  --panel-dark: #262626; /* About 왼쪽 패널 (원본은 #000, 사용자 요청으로 회색) */
  --grey: #8F8F8F; --grey-2: #b9b9b9; --grey-3: #555; --line: #e6e6e6; --panel: #ebebeb; --text: #151515;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  --script: 'Sunydale', 'Hurricane', 'Brush Script MT', cursive; --script-num: 'Hurricane', 'Brush Script MT', cursive;
  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --header-h: 68px; --container: 1240px; --stage-max: 1920px;
  --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* 상세 뷰가 열리면 목록(main)·머리글·바닥글은 숨김 — 상세가 페이지 본문이 됨 */
body.detail-shown #page { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { body.detail-open { overflow: hidden; } } /* 마우스 환경: 뒤 페이지 스크롤바가 상세 층 스크롤바와 겹쳐 보이지 않게 */
html { scrollbar-gutter: stable; } /* 스크롤바가 사라져도 폭이 안 흔들리게 */
/* 사진 크게 보기(dialog)가 열려 있는 동안: 페이지 스크롤 잠금, 배경은 검정, 뒤 내용은 숨김 */
html { transition: background-color .24s ease; } html.lb-open { background-color: #000; } /* 사진 크게 보기: 문서 배경(주소창 밑 영역까지)도 검정 층과 같은 시간에 걸쳐 바뀜 */
body.lb-shown #page, body.lb-shown #detail { visibility: hidden; } /* 검정 층이 완전히 덮인 뒤에만 */
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.container { width: min(var(--container), 100% - 56px); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--red); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.progress { position: fixed; left: 0; top: 0; z-index: 70; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- 헤더: 표지에서는 숨김 → 스크롤하면 내려옴. 배경에 따라 글자색 자동 반전 ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h); color: #fff; mix-blend-mode: difference; transform: translateY(-100%); transition: transform .55s var(--ease-out); }
.site-header.on { transform: none; }
/* 프로젝트 목록(흰 배경 + 사진 카드) 위에서는 반전 대신 흰 바탕의 단색 헤더 — 사진 위로 글자가 겹치며 색이 뒤집히지 않게 */
.site-header.solid { mix-blend-mode: normal; color: #000; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.site-header.solid.menu-open { mix-blend-mode: difference; color: #fff; background: transparent; border-color: transparent; }
.header-inner { width: min(var(--container), 100% - 56px); margin-inline: auto; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { font-weight: 800; letter-spacing: .12em; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.brand-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-nav { position: relative; display: flex; gap: 36px; padding-bottom: 4px; }
.site-nav a { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .72; transition: opacity .3s; padding: 6px 0; }
.site-nav a.is-active { opacity: 1; }
.nav-ink { position: absolute; bottom: 0; height: 1.5px; background: currentColor; width: 0; left: 0; transition: left .45s var(--ease-out), width .45s var(--ease-out), opacity .3s; opacity: 0; }
.nav-ink.on { opacity: 1; }
.header-mail { justify-self: end; display: inline-block; line-height: 1.2; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 8px 16px; transition: background .3s, color .3s; }
.header-mail { transition: background .25s, color .25s, border-color .25s; } /* 마우스가 머문 자리에 hover 가 켜질 때도 부드럽게 */
.nav-toggle { display: none; justify-self: end; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out); }
.nav-toggle.open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 55; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 16px) 32px 32px; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .35s; overflow-y: auto; }
.mobile-menu.open { opacity: 1; pointer-events: auto; touch-action: none; overscroll-behavior: contain; } /* 열린 동안 손가락 스크롤이 뒤 페이지로 가지 않게 (body 잠금 대신) */
.mobile-menu .mm-line { flex: 0 0 auto; width: 42px; height: 3px; background: var(--red); margin-bottom: 18px; }
.mobile-menu a, .mobile-menu button { flex: 0 0 auto; text-align: left; font-size: clamp(28px, 9vw, 40px); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; padding: 6px 0; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); line-height: 1.2; }
.mobile-menu.open a, .mobile-menu.open button { opacity: 1; transform: none; }
.mobile-menu.open :nth-child(3) { transition-delay: .06s; } .mobile-menu.open :nth-child(4) { transition-delay: .12s; } .mobile-menu.open :nth-child(5) { transition-delay: .18s; }
.mobile-menu .small { font-size: 14px; font-weight: 500; text-transform: none; color: #bbb; margin-top: 22px; letter-spacing: .02em; }
@media (max-height: 520px) { .mobile-menu { justify-content: flex-start; padding-top: calc(var(--header-h) + 4px); } .mobile-menu a, .mobile-menu button { font-size: 24px; padding: 3px 0; } .mobile-menu .mm-line { margin-bottom: 10px; } .mobile-menu .small { margin-top: 10px; } }

/* ---------- 공통: 슬라이드 무대 ---------- */
.slide { position: relative; overflow: hidden; }
.stage { position: relative; width: min(100%, var(--stage-max)); margin: 0 auto; container-type: inline-size; }
.script { font-family: var(--script); font-weight: 400; color: var(--red); line-height: 1; white-space: nowrap; }
.abs { position: absolute; margin: 0; line-height: 1; white-space: nowrap; }
.tick { position: absolute; left: 50%; width: max(1.5px, .14cqw); background: #A6A6A6; transform: translateX(-50%); }
.redline { position: absolute; left: 50%; width: max(3px, .43cqw); background: var(--red); transform: translateX(-50%); transform-origin: top; }

/* ---------- 표지 (세로 위치는 화면 높이 기준, 가로 크기는 무대 폭 기준) ---------- */
.cover { background: var(--black); color: #fff; }
.cover .stage { height: 100svh; min-height: 360px; }
.cover .tick-top { top: 0; height: 3.43%; }
.cover .tick-bot { top: 96.38%; height: 3.62%; }
:where(html.js) .cover .redline { top: 13.71%; height: 72.51%; transform: translateX(-50%) scaleY(0); transition: transform 1.4s var(--ease-out) .2s; }
.fonts-ready .cover .redline { transform: translateX(-50%) scaleY(1); }
.yr { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--serif); font-weight: 600; font-size: max(13px, 1.47cqw); letter-spacing: .042em; font-variant-numeric: lining-nums; line-height: 1; opacity: 0; transition: opacity 1s var(--ease-out) .9s; }
.fonts-ready .yr { opacity: 1; }
.cover .yr-top { top: 4.08%; }
.cover .yr-bot { top: 93.35%; }
.cover .title-group { position: absolute; left: 0; right: 0; top: 40.96%; }
.cover .name { margin: 0; text-align: center; font-size: 6.943cqw; font-weight: 900; line-height: 1; letter-spacing: 0; white-space: nowrap; }
:where(html.js) .cover .name .w { display: inline-block; clip-path: inset(-5% 0 110% 0); transform: translateY(.3em); transition: clip-path 1.1s var(--ease-out) .35s, transform 1.1s var(--ease-out) .35s; }
.cover .name .w:nth-child(2) { transition-delay: .48s; }
.fonts-ready .cover .name .w { clip-path: inset(-10% 0 -10% 0); transform: none; }
:where(html.js) .cover .script-portfolio { position: absolute; left: 51.36cqw; top: -4.96cqw; font-size: 7.05cqw; clip-path: inset(-80% 100% -70% 0); transition: clip-path 1.3s var(--ease-io) .85s; }
.fonts-ready .cover .script-portfolio { clip-path: inset(-80% -15% -70% 0); }
.cover .tagline { position: absolute; left: 51.79cqw; top: 10.96cqw; margin: 0; writing-mode: vertical-rl; font-size: max(11px, 1.043cqw); font-weight: 200; color: #ddd; letter-spacing: .03em; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity 1s var(--ease-out) 1.3s; }
.fonts-ready .cover .tagline { opacity: 1; }
.hero-cue { position: absolute; right: 2.6cqw; bottom: 4.5%; width: 34px; height: 54px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; display: flex; justify-content: center; padding-top: 10px; z-index: 2; }
.hero-cue span { width: 3px; height: 10px; border-radius: 3px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-height: 560px) and (min-width: 760px) { .cover .tagline { writing-mode: horizontal-tb; left: 0; right: 0; text-align: center; top: 8.2cqw; } }

/* ---------- 등장 효과 ---------- */
:where(html.js) .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.instant, .instant * { transition: none !important; animation: none !important; } /* 위로 스크롤하며 나타나거나 이미 지나간 요소: 연출 없이 즉시 (한 프레임만 붙었다 떨어짐) */
/* 큰 제목: 아래에서 마스크를 벗기며 올라옴 */
:where(html.js) .about-title.reveal, .work-title.reveal, .thanks-title.reveal { opacity: 1; transform: translateY(.3em); clip-path: inset(0 0 100% 0); transition: transform 1s var(--ease-out), clip-path 1s var(--ease-out); }
.about-title.reveal.in, .work-title.reveal.in, .thanks-title.reveal.in { transform: none; clip-path: inset(-10% 0 -10% 0); }
/* 손글씨: 왼쪽에서 오른쪽으로 써지듯 */
:where(html.js) .script.reveal { opacity: 1; transform: none; clip-path: inset(-80% 100% -70% 0); transition: clip-path 1.2s var(--ease-io) .3s; }
.script.reveal.in { clip-path: inset(-80% -15% -70% 0); }
/* 사진: 살짝 커지며 */
:where(html.js) .about .photo.reveal { transform: scale(.94); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out); }
.about .photo.reveal.in { transform: none; }
/* 이력 행 */
:where(html.js) .rb .row.reveal { transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rb .row.reveal.in { transform: none; }

/* ---------- About: 검정 패널(42.64%) + 흰 패널, 원본 좌표 그대로 ---------- */
.about { background: linear-gradient(90deg, var(--panel-dark) calc(50% - min(100%, var(--stage-max)) * .0736), #fff 0); color: var(--text); }
.about .stage { height: 56.25cqw; }
.about .panel { position: absolute; left: 0; top: 0; width: 42.64cqw; height: 100%; background: var(--panel-dark); color: #fff; overflow: hidden; }
.about .arcs { position: absolute; left: -23.98cqw; top: 8.46cqw; width: 67.78cqw; height: 68.82cqw; max-width: none; will-change: transform; opacity: .66; transform: translate3d(0, var(--py, 0px), 0) rotate(-185deg); }
.about .arcs-2 { left: -9.35cqw; top: 25.67cqw; width: 52.22cqw; height: 32.09cqw; opacity: .36; transform: translate3d(0, var(--py, 0px), 0); }
.about .edge { position: absolute; left: 42.64cqw; top: 0; width: 7.5cqw; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, .13), rgba(0, 0, 0, 0)); pointer-events: none; }
.about .about-title { position: absolute; left: 5cqw; top: 4.79cqw; margin: 0; font-size: 4.793cqw; font-weight: 900; line-height: 1; color: #fff; }
.about .script-me { position: absolute; left: 16.21cqw; top: 8.34cqw; font-size: 5cqw; color: var(--red2); }
.about .photo { position: absolute; left: 11.86cqw; top: 14cqw; width: 22.07cqw; height: 22.07cqw; border-radius: 50%; object-fit: cover; object-position: 50% 50%; }
.about .aname { position: absolute; left: 12.57cqw; top: 38.67cqw; margin: 0; font-size: 1.79cqw; font-weight: 600; letter-spacing: .05em; line-height: 1; color: #fff; white-space: nowrap; }
.about .contact { position: absolute; left: 12.57cqw; top: 42.27cqw; margin: 0; display: grid; grid-template-columns: 7.43cqw auto; row-gap: 0; }
.about .contact dt { font-size: max(11px, 1.107cqw); font-weight: 600; letter-spacing: -.0625em; line-height: 1; height: 1.93cqw; color: #fff; }
.about .contact dd { font-size: max(11px, 1.114cqw); font-weight: 600; line-height: 1; height: 1.93cqw; margin: 0; color: #DFDFDF; white-space: nowrap; }
.about .contact dd button, .about .contact dd a { color: inherit; font: inherit; line-height: inherit; transition: color .3s; }
.about .contact dd a { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.resume { position: absolute; inset: 0; left: 42.64cqw; }
.rb { position: absolute; }
.rb h3 { margin: 0; font-size: max(13px, 1.664cqw); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: #111; white-space: nowrap; }
.rb .row { position: absolute; left: 0; display: grid; align-items: start; }
.rb .row > span:first-child { font-size: max(12px, 1.25cqw); font-weight: 600; color: var(--red); line-height: 1; white-space: nowrap; }
.rb .row b { display: block; font-size: max(12px, 1.25cqw); font-weight: 600; color: #111; line-height: 1; white-space: nowrap; }
.rb .row .body > span { display: block; font-size: max(11px, 1.114cqw); font-weight: 400; color: var(--grey); line-height: 1; white-space: nowrap; }
.rb .row .body > span + span { margin-top: .456cqw; }
.rb .row b + span { margin-top: .625cqw; }
.rb .row > span:first-child { position: relative; }
.rb .row .now { position: absolute; left: -1.1cqw; top: .4cqw; width: .5cqw; height: .5cqw; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(235, 0, 41, .45); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(235, 0, 41, .45); } 100% { box-shadow: 0 0 0 .6cqw rgba(235, 0, 41, 0); } }
.rb-edu { left: 3.62cqw; top: 6.68cqw; }   /* 46.26 - 42.64 */
.rb-cert { left: 33.62cqw; top: 6.68cqw; } /* 76.26 - 42.64 */
.rb-work { left: 4.03cqw; top: 23.75cqw; } /* 46.67 - 42.64 */
.rb-edu .row { grid-template-columns: 5.59cqw auto; } .rb-edu .row > span:first-child { margin-left: .41cqw; }
.rb-cert .row { grid-template-columns: 5.81cqw auto; } .rb-cert .row > span:first-child { margin-left: .6cqw; }
.rb-edu .row:nth-of-type(1), .rb-cert .row:nth-of-type(1) { top: 3.565cqw; }
.rb-edu .row:nth-of-type(2), .rb-cert .row:nth-of-type(2) { top: 9.56cqw; }
.rb-work .row { grid-template-columns: 15.42cqw auto; } .rb-work .row > span:first-child { margin-left: .49cqw; }
.rb-work .row:nth-of-type(1) { top: 3.565cqw; } .rb-work .row:nth-of-type(2) { top: 8.69cqw; } .rb-work .row:nth-of-type(3) { top: 13.815cqw; } .rb-work .row:nth-of-type(4) { top: 18.94cqw; } .rb-work .row:nth-of-type(5) { top: 24.065cqw; }
:where(html.js) .divider-line { position: absolute; left: 4.5cqw; top: 21.36cqw; width: 49cqw; height: 1px; background: #D9D9D9; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .2s; }
.divider-line.in { transform: scaleX(1); }

/* ---------- Work Index ---------- */
.index { background: var(--black); color: #fff; }
.index .stage { height: 56.25cqw; }
.iarc { position: absolute; max-width: none; pointer-events: none; will-change: transform; opacity: .36; }
.iarc-1 { left: -2.19cqw; top: 2.72cqw; width: 102.5cqw; height: 56.67cqw; transform: translate3d(0, var(--py, 0px), 0); }
.iarc-2 { left: -1.24cqw; top: 1.26cqw; width: 102.5cqw; height: 56.67cqw; transform: translate3d(0, var(--py, 0px), 0) rotate(350.6deg); }
.iarc-3 { left: 52.5cqw; top: -3.13cqw; width: 60.41cqw; height: 26.85cqw; transform: translate3d(0, var(--py, 0px), 0) scaleY(-1); }
.index .work-title { position: absolute; left: 6.21cqw; top: 21.86cqw; margin: 0; font-size: 4.793cqw; font-weight: 900; line-height: 1; }
.index .script-index { position: absolute; left: 17cqw; top: 26.25cqw; font-size: 4.43cqw; color: var(--red2); }
.index .cols { position: absolute; inset: 0; }
.index .col { position: absolute; top: 21cqw; width: 13.57cqw; height: 14cqw; text-align: left; color: #fff; cursor: pointer; }
.index .col:nth-child(1) { left: 35.71cqw; } .index .col:nth-child(2) { left: 55cqw; } .index .col:nth-child(3) { left: 74.07cqw; }
.index .col .num { position: absolute; left: .14cqw; top: .16cqw; font-size: 2.6cqw; font-family: var(--script-num); color: var(--red2); line-height: 1; }
.index .col .bar { position: absolute; left: 0; top: 2.93cqw; width: 100%; height: max(2px, .14cqw); background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .25s; }
.index .col.in .bar { transform: scaleX(1); }
.index .col h3 { position: absolute; left: .1cqw; top: 4.1cqw; margin: 0; font-size: max(12px, 1.386cqw); font-weight: 600; line-height: 1.185; text-transform: uppercase; white-space: nowrap; transition: transform .5s var(--ease-out); }
.index .col .rule { position: absolute; left: 0; top: 9.21cqw; width: 100%; height: 1px; background: rgba(255, 255, 255, .5); }
.index .col .subt { position: absolute; left: .07cqw; top: 10.38cqw; margin: 0; font-size: max(10px, .836cqw); font-weight: 400; color: #BDBDBD; line-height: 1; white-space: nowrap; }
.index .col .cnt { position: absolute; left: .07cqw; top: 12.57cqw; margin: 0; font-size: max(10px, .8cqw); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); line-height: 1; white-space: nowrap; transition: transform .5s var(--ease-out), color .3s; }
:where(html.js) .index .col { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.index .col.in { opacity: 1; transform: none; }

/* ---------- Thank you ---------- */
.thanks { background: var(--black); color: #fff; }
.thanks .stage { height: 100svh; min-height: 360px; }
.thanks .redline { top: 0; height: 86.22%; transform: translateX(-50%) scaleY(0); transition: transform 1.6s var(--ease-out) .1s; }
.thanks.in .redline { transform: translateX(-50%) scaleY(1); }
.thanks .tick-bot { top: 96.38%; height: 3.62%; }
.thanks .title-group { position: absolute; left: 0; right: 0; top: 40.96%; }
.thanks .thanks-title { margin: 0; text-align: center; font-size: 6.943cqw; font-weight: 900; line-height: 1; white-space: nowrap; }
.thanks .script-fyt { position: absolute; left: 51.21cqw; top: -4.76cqw; font-size: 5.41cqw; color: var(--red3); }
.thanks .mail { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; font-size: max(12px, .971cqw); font-weight: 300; color: #CFCFCF; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; line-height: 1; white-space: nowrap; transition: color .3s; }
.thanks .mail-email { top: min(90.4%, calc(100% - 4.6em)); }
.thanks .mail-url { top: min(93.2%, calc(100% - 2.9em)); }

/* ---------- 복사 안내 ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 250; transform: translate(-50%, 16px); background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 12px 18px 12px 20px; display: flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 500; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); max-width: calc(100% - 32px); }
.toast[hidden] { display: flex; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-text b { font-weight: 700; }
.toast-text::before { content: '✓'; color: var(--red); font-weight: 800; margin-right: 8px; }
.toast.no-check .toast-text::before { content: none; }

/* ---------- 푸터 ---------- */
/* 푸터: 마지막 장의 중심축(빨간 선·눈금) 아래에 한 줄로 가운데 정렬, 구분선 없이 이어짐 */
.site-footer { background: var(--black); color: #6f6f6f; padding: 26px 0 34px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.footer-inner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 16px; text-align: center; }
.footer-sep { color: #3a3a3a; }
.footer-link { color: #bdbdbd; font-weight: 600; transition: color .3s; }

/* ---------- Projects ---------- */
.projects { padding: 0 0 130px; background: #fff; }
.filter-bar { position: sticky; top: var(--header-h); z-index: 40; background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.filters { position: relative; display: flex; gap: 4px; }
.filter { position: relative; padding: 10px 16px; font-size: 13.5px; font-weight: 600; color: #777; border-radius: 999px; transition: color .3s; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.filter.is-active { color: #fff; }
.filter .n { font-size: 11px; font-weight: 700; opacity: .7; }
.filter-ink { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #000; border-radius: 999px; z-index: -1; transition: left .5s var(--ease-out), width .5s var(--ease-out); }
.filter-count { font-size: 12.5px; color: var(--grey); white-space: nowrap; }
.filter-count b { color: #000; font-weight: 700; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grid-item { transform-origin: top left; }
.grid-item.is-hidden { display: none; }
.divider { grid-column: 1 / -1; background: var(--black); color: #fff; border-radius: 18px; padding: 38px 48px 34px 42px; display: flex; align-items: center; gap: 22px; position: relative; overflow: hidden; margin-top: 16px; }
.divider-no { font-family: var(--script-num); color: var(--red2); font-size: 44px; line-height: .8; margin-top: -26px; }
.divider-title { font-size: clamp(22px, 2.8vw, 38px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
:where(html.js) .divider-line-r { flex: 1; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .15s; min-width: 40px; }
.divider.in .divider-line-r { transform: scaleX(1); }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: opacity .8s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s; }
:where(html.js) .card { opacity: 0; transform: translateY(24px); }
.card.in { opacity: 1; transform: none; }
.card.in:focus-visible { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 0, 0, .13); border-color: #d9d9d9; }
.card-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card-cover.contain img { object-fit: contain; }
@media (hover: hover) {
  .card.in:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 0, 0, .13); border-color: #d9d9d9; }
  .card.in:hover .card-cover img { transform: scale(1.05); }
}
.card-body { padding: 22px 24px 6px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; flex: 1; align-content: start; }
.card-short { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.card-kicker { font-size: 14px; color: var(--grey-3); font-weight: 500; }
.card-meta { font-size: 12.5px; color: var(--grey); margin-top: 2px; }
.card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.card-stat { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.card-stat b { display: block; font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-stat b small { font-size: 10px; font-weight: 700; margin-left: 2px; }
.card-stat span { display: block; font-size: 10.5px; color: var(--grey); line-height: 1.3; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-block; border: 1px solid #ddd; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #444; line-height: 1.4; }
.card-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 20px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.card-foot .arr { transition: transform .5s var(--ease-out); }

/* ---------- 프로젝트 상세 ---------- */
.detail { position: fixed; inset: 0; z-index: 100; overflow: hidden; overscroll-behavior: contain; }
.detail-backdrop { position: absolute; inset: 0; background: #fff; opacity: 0; } /* 흰 층: 먼저 목록을 덮고, 내용은 그 뒤에 나타남(흰색을 거쳐 가는 전환) */
.fly { will-change: left, top, width, height; }
.detail[hidden] { display: none; }
.detail-panel { position: absolute; inset: 0; display: flex; flex-direction: column; outline: none; opacity: 0; }
.detail-top { flex: 0 0 auto; height: 60px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 0 22px 0 32px; border-bottom: 1px solid var(--line); background: #fff; }
.detail-cat, .detail-counter, .detail-nav-btn .lbl { will-change: opacity; }
.detail-cat { color: var(--red); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.detail-counter { font-size: 12px; color: var(--grey); letter-spacing: .1em; }
.detail-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background .25s, transform .4s var(--ease-out); }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; will-change: transform, opacity; } /* 항상 합성 레이어: 전환이 끝날 때 글자가 미세하게 다시 그려지지 않게 */
.detail-hero { height: min(46vh, 520px); overflow: hidden; background: #fff; position: relative; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero.contain img { object-fit: contain; }
.detail-body { width: min(var(--container), 100% - 56px); margin: 0 auto; padding: 44px 0 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.d-title { font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.d-meta { color: var(--grey); font-size: 14px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.d-meta span + span::before { content: '｜'; color: #ccc; margin-right: 10px; }
.d-spec { margin-top: 30px; display: grid; gap: 16px; }
.d-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.d-row dt { color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.d-row dd { font-size: 15px; line-height: 1.65; }
.d-row .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.d-did { display: grid; gap: 6px; }
.d-did li { position: relative; padding-left: 16px; }
.d-did li::before { content: ''; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.d-results { margin-top: 40px; background: var(--black); color: #fff; border-radius: 16px; padding: 36px 28px 28px; position: relative; }
.d-results-script { position: absolute; left: 22px; top: -26px; font-size: 32px; color: var(--red2); }
.d-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.r-val { font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.r-val small { font-size: .5em; font-weight: 700; margin-left: 4px; }
.r-bar { height: 2px; background: var(--red); margin: 12px 0 10px; width: 78%; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .3s; }
.d-results.counted .r-bar { transform: scaleX(1); }
.r-label { font-size: 12px; color: #cfcfcf; line-height: 1.45; }
.d-gallery { position: relative; background: var(--panel); border-radius: 16px; padding: 24px 22px 20px; min-width: 0; }
.d-gallery::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); border-radius: 16px 16px 0 0; }
.g-grid { display: grid; gap: 22px; }
.g-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-auto-rows: 4px; grid-auto-flow: row dense; gap: 0 16px; align-items: start; }
.g-cols .g-group { margin-bottom: 18px; }
.g-group { min-width: 0; }
.g-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; background: #fff; border-radius: 14px; padding: 6px 12px 6px 8px; font-size: 12.5px; font-weight: 600; color: #333; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); max-width: 100%; line-height: 1.35; }
.g-label .ic { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex: 0 0 auto; }
.g-label .ic[src*="/cafe."] { border-radius: 50%; } /* PPT 에서 원형으로 마스킹한 아이콘 */
.g-label .sub { color: var(--grey); font-weight: 500; }
.g-label .sub::before { content: '｜'; margin: 0 4px 0 0; color: #ccc; }
.g-stack { display: grid; gap: 10px; }
.g-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g-masonry { columns: 2; column-gap: 10px; }
.g-masonry .shot { break-inside: avoid; margin-bottom: 10px; }
.shot { position: relative; margin: 0; min-width: 0; }
.shot img { width: 100%; height: auto; border-radius: 6px; cursor: zoom-in; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); transition: transform .5s var(--ease-out), box-shadow .5s; }
.shot.tall img { max-height: 460px; object-fit: cover; object-position: top; }
.shot.tall::after { content: '⤢'; position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; display: grid; place-items: center; pointer-events: none; }
.shot.pair img { max-height: 460px; object-fit: cover; object-position: top; }
.g-phones { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.g-phones .shot.phone img { height: 320px; width: auto; box-shadow: none; background: transparent; }
.g-phones .shot.wide { flex: 1 1 220px; }
.g-notes { display: grid; gap: 10px; align-content: start; }
.g-note { background: #fff; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: #444; }
.g-note b { display: block; color: #000; font-size: 13.5px; }
.g-note b::before { content: '■'; color: var(--red); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.g-phone-notes { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.g-phone-notes .talls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.device { position: relative; width: 100%; align-self: start; line-height: 0; }
.device .frame { width: 100%; height: auto; position: relative; z-index: 1; pointer-events: none; }
.device .screen { position: absolute; z-index: 2; object-fit: cover; object-position: top; cursor: zoom-in; border-radius: 7% / 3.5%; }
.g-notes-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.g-devices { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 24px; padding: 10px 0; }
.g-devices .monitor { position: relative; width: min(480px, 100%); }
.g-devices .monitor { line-height: 0; }
.g-devices .monitor .frame { width: 100%; height: auto; position: relative; z-index: 1; pointer-events: none; }
.g-devices .monitor .screen { position: absolute; z-index: 2; object-fit: cover; cursor: zoom-in; }
.g-devices .phone { width: min(200px, 44%); }
.g-devices .phone img { cursor: zoom-in; }
.detail-nav { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); background: #fff; }
.detail-nav-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; max-width: 48%; transition: background .25s; }
.detail-nav-btn .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-nav-btn .arr { transition: transform .4s var(--ease-out); }
@media (hover: hover) {
  .detail-nav-btn:hover .arr { transform: translateX(-4px); }
  .detail-nav-btn.next:hover .arr { transform: translateX(4px); }
}

/* ---------- 이미지 크게 보기 ---------- */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; z-index: 200; outline: none; touch-action: manipulation; overflow: hidden; overscroll-behavior: contain; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; padding: 72px 80px; }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; } /* 검정은 dialog 자체가 칠함(페이드 대상) */
.lb-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; will-change: transform, opacity; }
.lb-figure img { max-width: calc(100vw - 160px); max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); width: auto; height: auto; object-fit: contain; border-radius: 6px; background: #fff; }
.lb-figure figcaption { color: #ddd; font-size: 13px; text-align: center; letter-spacing: .02em; }
.lb-btn { position: absolute; z-index: 2; touch-action: manipulation; color: #fff; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-size: 30px; line-height: 1; transition: background .2s; }
.lb-close { top: 18px; right: 18px; font-size: 32px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }


/* ---------- 화면 크기별 ---------- */
@media (max-width: 1100px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-body { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ----- 760~1099px: 검정 패널은 비례 유지, 오른쪽 이력은 흐름형 2열 ----- */
@media (min-width: 760px) and (max-width: 1099px) {
  .about .stage { height: auto; min-height: 56.25cqw; }
  .about .panel { --dy: max(0px, 66px - 4.79cqw); } /* 헤더 아래로 내리는 만큼 패널 전체를 같이 이동 → 구도 유지 */
  .about .about-title { top: calc(4.79cqw + var(--dy)); }
  .about .script-me { top: calc(8.34cqw + var(--dy)); }
  .about .photo { top: calc(14cqw + var(--dy)); }
  .about .aname { top: calc(38.67cqw + var(--dy)); }
  .about .contact { top: calc(42.27cqw + var(--dy)); }
  .resume { position: static; margin-left: 42.64cqw; padding: calc(var(--header-h) + 2.2cqw) 4.6cqw 5cqw 4.2cqw; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4cqw; align-content: start; }
  .rb { position: static; }
  .rb-work, .divider-line { grid-column: 1 / -1; }
  .rb h3 { margin-bottom: 1cqw; }
  .rb .rows { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.6cqw; row-gap: 2cqw; margin-top: 2cqw; align-items: start; }
  .rb .row { display: contents; } /* 모든 행이 같은 열 너비를 공유 */
  .rb .row > span:first-child { margin-left: 0; white-space: nowrap; position: static; }
  .rb .row b, .rb .row .body > span { white-space: normal; line-height: 1.3; }
  .rb-work .rows { column-gap: 2.4cqw; row-gap: 2.4cqw; margin-top: 2.4cqw; }
  .rb .row .now { position: static; display: inline-block; width: .7cqw; height: .7cqw; margin-right: .8cqw; vertical-align: .1em; }
  .divider-line { position: static; display: block; width: 100%; margin: 3cqw 0 1.4cqw; }
}
/* ----- 760px 미만: 위아래로 재구성 ----- */
@media (max-width: 759px) {
  .container, .header-inner { width: min(var(--container), 100% - 40px); }
  .header-inner { grid-template-columns: 1fr auto; }
  .site-nav, .header-mail { display: none; }
  .nav-toggle { display: flex; }
  /* 표지 */
  .cover .name { font-size: 19.5cqw; line-height: .92; white-space: normal; }
  .cover .name .w { display: block; }
  .cover .title-group { top: 34%; }
  .cover .script-portfolio { left: 54cqw; top: -6.2cqw; font-size: 8.8cqw; }
  .cover .tagline { position: static; writing-mode: horizontal-tb; text-align: center; margin-top: 5cqw; font-size: max(12px, 3.2cqw); letter-spacing: .1em; color: #a9a9a9; }
  .yr { font-size: max(13px, 4cqw); }
  .cover .redline { width: max(3px, .8cqw); }
  .hero-cue { right: 20px; bottom: 5%; width: 30px; height: 46px; }
  /* About */
  .about { background: #fff; }
  .about .stage { height: auto; }
  .about .arcs-2 { left: -20cqw; top: 70cqw; width: 125cqw; height: 77cqw; }
  .about .panel { position: relative; width: 100%; height: auto; padding: 14cqw 0 12cqw; }
  .about .arcs { left: -58cqw; top: 18cqw; width: 160cqw; height: 162cqw; }
  .about .edge { display: none; }
  .about .about-title { position: relative; left: 7cqw; top: 0; font-size: 16cqw; }
  .about .script-me { left: 43.5cqw; top: 25.7cqw; font-size: 16.7cqw; }
  .about .photo { position: relative; left: 20cqw; top: 0; margin-top: 15cqw; width: 60cqw; height: 60cqw; }
  .about .aname { position: relative; left: 8cqw; top: 0; margin-top: 8cqw; font-size: 6.2cqw; }
  .about .contact { position: relative; left: 8cqw; top: 0; margin-top: 4cqw; grid-template-columns: 24cqw auto; }
  .about .contact dt, .about .contact dd { font-size: max(12px, 3.6cqw); height: 6.6cqw; }
  .resume { position: static; padding: 12cqw 7cqw 14cqw; }
  .rb { position: static; margin-bottom: 9cqw; }
  .rb h3 { font-size: max(16px, 5.2cqw); margin-bottom: 4.5cqw; }
  .rb .row { position: static; margin-top: 3.6cqw; }
  .rb .row > span:first-child, .rb .row b { font-size: max(14px, 3.9cqw); white-space: normal; }
  .rb .row .body > span { font-size: max(12.5px, 3.4cqw); white-space: normal; line-height: 1.35; }
  .rb .row b + span { margin-top: 1.4cqw; } .rb .row .body > span + span { margin-top: .6cqw; }
  .rb-edu .row, .rb-cert .row { grid-template-columns: auto 1fr; column-gap: 3.4cqw; } .rb-edu .row > span:first-child, .rb-cert .row > span:first-child { margin-left: 0; }
  .rb-work .row { grid-template-columns: 1fr; row-gap: 1.4cqw; margin-top: 6.5cqw; } .rb-work .row > span:first-child { margin-left: 0; }
  .rb .row .now { position: static; display: inline-block; width: 2.2cqw; height: 2.2cqw; margin-right: 2.2cqw; vertical-align: .08em; }
  .rb:last-child { margin-bottom: 0; }
  .divider-line { position: static; display: block; width: 100%; margin: 2cqw 0 10cqw; }
  /* Work Index */
  .index .stage { height: auto; padding: 16cqw 7cqw 18cqw; }
  .iarc-1 { left: -10cqw; top: -4cqw; width: 150cqw; height: 83cqw; } .iarc-2 { left: -8cqw; top: -6cqw; width: 150cqw; height: 83cqw; } .iarc-3 { display: none; }
  .index .work-title { position: relative; left: 0; top: 0; font-size: 15cqw; }
  .index .script-index { left: 40.5cqw; top: 30.3cqw; font-size: 14.1cqw; }
  .index .cols { position: static; margin-top: 16cqw; display: grid; gap: 11cqw; }
  .index .col { position: relative; left: 0 !important; top: 0; width: 100%; height: auto; }
  .index .col .num { position: static; display: block; font-size: 7cqw; margin-bottom: 1.5cqw; }
  .index .col .bar { position: static; display: block; height: 3px; }
  .index .col h3 { position: static; margin-top: 4cqw; font-size: max(17px, 5.2cqw); line-height: 1.2; white-space: normal; }
  .index .col .rule { position: static; display: block; margin-top: 4cqw; }
  .index .col .subt { position: static; margin-top: 3.2cqw; font-size: max(12px, 3.4cqw); white-space: normal; }
  .index .col .cnt { position: static; display: inline-block; margin-top: 4.5cqw; font-size: max(11px, 3cqw); }
  /* Thank you */
  .thanks .title-group { top: 38%; }
  .thanks .thanks-title { font-size: 16.5cqw; }
  .thanks .script-fyt { left: 36cqw; top: -11.7cqw; font-size: 11cqw; }
  .thanks .redline { height: 76%; width: max(3px, .8cqw); }
  .thanks .mail { font-size: max(12px, 3.5cqw); }
  .thanks .mail-email { top: 84%; } .thanks .mail-url { top: 89%; }
  /* Projects (기존) */
  .divider { padding: 26px 22px 24px; gap: 14px; flex-wrap: wrap; border-radius: 14px; }
  .divider-no { font-size: 40px; margin-top: -22px; }
  .divider-title { font-size: 22px; white-space: normal; }
  .divider-line-r { flex-basis: 100%; order: 3; }
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 10px; margin-bottom: 24px; }
  .filters { overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { padding: 9px 13px; font-size: 13px; }
  .filter-count { text-align: right; }
  .card-short { font-size: 20px; }
  .card-stat b { font-size: 15px; }
  .detail-top { padding: 0 12px 0 20px; height: 56px; gap: 10px; }
  .detail-cat { font-size: 11px; letter-spacing: .08em; }
  .detail-hero { height: 38vh; }
  .detail-body { width: min(var(--container), 100% - 40px); padding: 26px 0 44px; }
  .d-row { grid-template-columns: 82px 1fr; gap: 10px; }
  .d-row dd { font-size: 14.5px; }
  .d-results { padding: 30px 18px 22px; }
  .d-results-grid { gap: 10px; }
  .r-val { font-size: 24px; }
  .r-label { font-size: 11px; }
  .d-gallery { padding: 18px 14px 14px; }
  .g-grid { gap: 18px; }
  .g-cols { grid-template-columns: 1fr; }
  .g-label .sub { display: block; width: 100%; }
  .g-label .sub::before { content: none; }
  .g-phones .shot.phone img { height: 250px; }
  .g-phone-notes { grid-template-columns: 1fr; }
  .g-phone-notes .device { width: 160px; }
  .g-devices .phone { width: 46%; }
  .detail-nav { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .detail-nav-btn { font-size: 12.5px; padding: 9px 10px; }
  .lightbox { padding: 76px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .lb-prev, .lb-next { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lb-figure img { max-width: calc(100vw - 32px); max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
  .toast { bottom: 18px; font-size: 12.5px; padding: 11px 14px 11px 16px; gap: 10px; }
  .site-footer { padding: 22px 0 30px; }
  .footer-copy + .footer-sep { display: none; }
  .footer-copy { width: 100%; }
}
@media (max-width: 759px) and (orientation: landscape) {
  .cover .name { font-size: 9cqw; line-height: 1; white-space: nowrap; }
  .cover .name .w { display: inline-block; }
  .cover .title-group { top: 40%; }
  .cover .script-portfolio { left: 53.2cqw; top: -5.7cqw; font-size: 8.2cqw; }
  .cover .tagline { margin-top: 2.4cqw; font-size: max(11px, 1.8cqw); letter-spacing: .06em; }
  .yr { font-size: max(12px, 2.4cqw); }
  .cover .redline, .thanks .redline { width: max(3px, .43cqw); }
  .thanks .title-group { top: 40%; }
  .thanks .thanks-title { font-size: 9cqw; }
  .thanks .script-fyt { left: 51.6cqw; top: -6.2cqw; font-size: 7cqw; }
  .thanks .mail { font-size: max(11px, 1.8cqw); }
  .thanks .mail-email { top: 82%; } .thanks .mail-url { top: 90%; }
  .thanks .redline { height: 76%; }
}
@media (min-width: 560px) and (max-width: 759px) {
  .resume { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6cqw; }
  .rb-work, .divider-line { grid-column: 1 / -1; }
  .about .photo { width: 46cqw; left: 27cqw; }
}
/* 인쇄·PDF 저장: 등장 애니메이션을 기다리지 않고 모든 내용이 바로 보이게 (전체 페이지 캡처 도구가 글자를 못 담는 문제 대비) */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .card, .index .col, .rb .row.reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cover .name .w, .cover .script-portfolio { clip-path: none !important; transform: none !important; }
  .cover .redline, .thanks .redline { transform: translateX(-50%) scaleX(1) !important; }
  .index .col .bar, .divider-line, .divider-line-r, .r-bar { transform: none !important; }
  .site-header { position: absolute; opacity: 1 !important; }
  .lightbox, .toast { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .card, .index .col, .rb .row.reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cover .name .w, .cover .script-portfolio { clip-path: none !important; transform: none !important; }
  .cover .redline, .thanks .redline, .index .col .bar, .divider-line, .divider-line-r, .r-bar { transform: translateX(-50%) scaleX(1) !important; }
  .index .col .bar, .divider-line, .divider-line-r, .r-bar { transform: none !important; }
  .yr, .cover .tagline { opacity: 1 !important; }
}

/* ---------- 마우스가 있는 환경에서만 hover 효과 (터치 기기는 탭한 뒤 hover 가 남아 툭 튀므로 제외) ---------- */
@media (hover: hover) {
  .site-header.solid .header-mail:hover { background: #000; color: #fff; }
  .header-mail:hover { background: #fff; color: #000; }
  .about .contact dd button:hover, .about .contact dd a:hover { color: #fff; }
  .index .col:hover .cnt { color: #fff; transform: translateX(6px); }
  .index .col:hover h3 { transform: translateX(3px); }
  .thanks .mail:hover { color: #fff; }
  .footer-link:hover { color: #fff; }
  .filter:hover { color: #000; }
  .card.in:hover .card-foot .arr { transform: translateX(6px); }
  .detail-close:hover { background: #f0f0f0; transform: rotate(90deg); }
  .shot img:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
  .detail-nav-btn:hover { background: #f2f2f2; }
  .lb-btn:hover { background: rgba(255, 255, 255, .22); }
  .site-nav a:hover { opacity: 1; }
}