/* 영문 글꼴: Source Code Pro (Adobe 공식 WOFF2 + TTF 대체, SIL OFL 1.1, assets/fonts/SourceCodePro-Adobe-LICENSE.md·SourceCodePro-OFL.txt). 한글은 글자 단위로 맑은 고딕으로 대체 */
@font-face { font-family:"Source Code Pro"; src:url("assets/fonts/SourceCodeVF-Upright.ttf.woff2") format("woff2"), url("assets/fonts/SourceCodePro-Variable.ttf") format("truetype"); font-weight:200 900; font-style:normal; font-display:swap; }
body, body *:not(canvas) { font-family:"Source Code Pro","Malgun Gothic","Apple SD Gothic Neo",sans-serif !important; }
/* 공통 헤더: 로고 확대, 메뉴 간격, 현재 페이지 유리 질감 둥근 바 */
.site-header .brand, header .logo { width:140px !important; height:104px !important; top:2px !important; }
.site-header .main-nav, header .main-nav { top:118px !important; gap:6px !important; padding:4px; }
.site-header .main-nav a, header .main-nav a { position:relative; z-index:1; padding:9px 20px; border-radius:999px; color:#55575c; font-size:14px; letter-spacing:.03em; text-decoration:none !important; transition:color .3s ease; }
.site-header .main-nav a[aria-current="page"], .site-header .main-nav a:hover { color:#1a1a1a; }
.site-header .main-nav a:focus-visible { outline:1px solid #111; outline-offset:2px; }
.site-header, header.site-header { height:190px !important; }
/* 하위 페이지 헤더 그라데이션을 더 아래까지 (메인 제외) */
:root { --hb:236,236,236; --paper:#ececec; }
.site-header:not(.home-header):not(.detail-header) { height:230px !important;
  background:linear-gradient(180deg,rgba(128,128,128,.14),rgba(128,128,128,.04) 60%,rgba(128,128,128,0)),
             linear-gradient(180deg,rgba(var(--hb),1) 0%,rgba(var(--hb),1) 66%,rgba(var(--hb),.75) 80%,rgba(var(--hb),0) 100%) !important; }
.nav-pill { position:absolute; z-index:0; top:0; left:0; height:0; width:0; border-radius:999px; pointer-events:none; opacity:0;
  /* 글래스모피즘: 젖빛 반투명 + 강한 흐림 + 부드러운 빛 테두리, 진한 외곽선 없음 */
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.5) 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.95), inset 0 -2px 6px rgba(160,165,180,.18), 0 6px 18px rgba(90,95,110,.13), 0 0 10px rgba(255,255,255,.55);
  will-change:transform;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), width .3s cubic-bezier(.2,.9,.3,1), opacity .2s ease; }
.nav-pill.ready { opacity:1; }
/* 스크립트가 없을 때도 현재 페이지는 둥근 테두리로 표시 */
.main-nav:not(.has-pill) a[aria-current="page"] { box-shadow:inset 0 0 0 1px rgba(0,0,0,.55); }
@media (max-width:650px) {
  .site-header .brand, header .logo { width:116px !important; height:86px !important; top:0 !important; }
  .site-header .main-nav, header .main-nav { top:96px !important; gap:2px !important; }
  .site-header .main-nav a, header .main-nav a { padding:9px 12px; font-size:13px; }
  .site-header, header.site-header { height:160px !important; }
  .site-header:not(.home-header):not(.detail-header) { height:190px !important; }
}
@media (prefers-reduced-motion:reduce) { .nav-pill, .main-nav a { transition:none !important; } }
/* 커진 헤더에 맞춘 본문 시작 위치 */
.project-page, .contact-page { padding-top:clamp(210px,15vw,240px) !important; }
@media (max-width:650px) { .project-page, .contact-page { padding-top:180px !important; } }
.about-page { padding-top:215px !important; }
@media (max-width:650px) { .about-page { padding-top:180px !important; } }
/* 하단 법인 표기: 모든 페이지 공통 흐르는 띠 (nav.js) */
.site-legal.legal-marquee { contain:layout paint; position:fixed; z-index:4; bottom:0; left:0; right:0; display:block !important; margin:0 !important; overflow:hidden; padding:10px 0; pointer-events:none; color:#3a3a3a; font-size:12px !important; line-height:1; white-space:nowrap; background:linear-gradient(0deg,rgba(var(--hb),.95) 40%,rgba(var(--hb),0)); }
.legal-marquee .lm-track { display:flex; width:max-content; animation:lm-move 40s linear infinite; will-change:transform; }
.legal-marquee .lm-copy { display:flex; align-items:center; gap:40px; flex:none; padding:0 60px; }
@keyframes lm-move { to { transform:translateX(-50%); } }
/* INFO: 메뉴와 같은 유리 둥근 버튼 */
.legal-marquee .lm-info { pointer-events:auto; display:inline-block; margin-left:6px; padding:6px 15px; border-radius:999px; color:#2a2a2a; text-decoration:none !important; font-size:11px; letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.5)); border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.95), inset 0 -2px 5px rgba(160,165,180,.18), 0 4px 10px rgba(90,95,110,.12);
  transition:background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.legal-marquee .lm-info:hover, .legal-marquee .lm-info:focus-visible { background:rgba(255,255,255,.9); }
.legal-marquee .lm-info:active { transform:translateY(1px); }
.legal-marquee:hover .lm-track { animation-play-state:paused; }
body.has-legal-marquee { padding-bottom:48px; }
/* 메인: 띠 위로 버튼·안내 올림 */
body.home-marquee { padding-bottom:0; }
body.home-marquee footer:not(.site-legal) { bottom:52px !important; justify-content:flex-end !important; }
body.home-marquee #hint { bottom:60px !important; }
@media (max-width:650px) { .site-legal.legal-marquee { font-size:11px !important; } .legal-marquee .lm-copy { gap:28px; padding:0 40px; } }
@media (prefers-reduced-motion:reduce) { .legal-marquee .lm-track { animation:none; } }
/* 전체 배경: 메인(HOME) 실제 화면색과 같은 회색 #ececec */
html, body { background:#ececec !important; }
.detail-header { background:rgba(236,236,236,.97) !important; }
/* 프로젝트 페이지: 고정된 크기 조절 바까지 헤더 배경이 덮도록 더 길게 */
.site-header.header-tall:not(.home-header):not(.detail-header) { height:270px !important;
  background:linear-gradient(180deg,rgba(128,128,128,.14),rgba(128,128,128,.04) 60%,rgba(128,128,128,0)),
             linear-gradient(180deg,rgba(var(--hb),1) 0%,rgba(var(--hb),1) 76%,rgba(var(--hb),.7) 86%,rgba(var(--hb),0) 100%) !important; }
@media (max-width:650px) { .site-header.header-tall:not(.home-header):not(.detail-header) { height:262px !important; } }
/* 메인(홈)도 다른 페이지처럼 맨 위 그라데이션 유지 (흐림 효과 없이, 아래로 갈수록 투명해져 은하가 보임) */
header.site-header.home-header { height:210px !important;
  background:linear-gradient(180deg,rgba(128,128,128,.08),rgba(128,128,128,0) 60%),
             linear-gradient(180deg,rgba(var(--hb),.82) 0%,rgba(var(--hb),.7) 50%,rgba(var(--hb),.35) 75%,rgba(var(--hb),0) 100%) !important; }
@media (max-width:650px) { header.site-header.home-header { height:190px !important; } }

/* ===== 블랙 버전 (data-theme="black") ===== */
html { transition:background-color .4s ease; }
html[data-theme="black"] { --hb:27,27,30; --paper:#1b1b1e; color-scheme:dark; }
html[data-theme="black"], html[data-theme="black"] body { background:#1b1b1e !important; color:#e4e4e6; }
html[data-theme="black"] .brand img, html[data-theme="black"] header .logo { filter:invert(1); }
html[data-theme="black"] .site-header .main-nav a { color:#a9a9ad; }
html[data-theme="black"] .site-header .main-nav a[aria-current="page"], html[data-theme="black"] .site-header .main-nav a:hover { color:#f2f2f2; }
html[data-theme="black"] .site-header:not(.home-header):not(.detail-header) {
  background:linear-gradient(180deg,rgba(var(--hb),1) 0%,rgba(var(--hb),1) 66%,rgba(var(--hb),.75) 80%,rgba(var(--hb),0) 100%) !important; }
html[data-theme="black"] .site-header.header-tall:not(.home-header):not(.detail-header) {
  background:linear-gradient(180deg,rgba(var(--hb),1) 0%,rgba(var(--hb),1) 76%,rgba(var(--hb),.7) 86%,rgba(var(--hb),0) 100%) !important; }
html[data-theme="black"] header.site-header.home-header {
  background:linear-gradient(180deg,rgba(var(--hb),.82) 0%,rgba(var(--hb),.7) 50%,rgba(var(--hb),.35) 75%,rgba(var(--hb),0) 100%) !important; }
html[data-theme="black"] .detail-header { background:rgba(27,27,30,.97) !important; border-bottom-color:rgba(255,255,255,.08) !important; }
/* 유리 버튼(메뉴 표시·INFO·크기 조절 바)을 어두운 유리로 */
html[data-theme="black"] .nav-pill, html[data-theme="black"] .legal-marquee .lm-info, html[data-theme="black"] .size-track, html[data-theme="black"] .guest-form {
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)) !important; border-color:rgba(255,255,255,.22) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.45) !important; }
html[data-theme="black"] .legal-marquee .lm-info { color:#e4e4e6; }
html[data-theme="black"] .site-legal.legal-marquee { color:#a9a9ad; }
html[data-theme="black"] .size-control button::before { background:#77777c; }
html[data-theme="black"] .size-control button[aria-checked="true"]::before { background:#f2f2f2; }
/* 프로젝트 목록·상세 */
html[data-theme="black"] .project-date, html[data-theme="black"] .project-unavailable { color:#8e8e93; }
html[data-theme="black"] .project-image { border-color:rgba(255,255,255,.18); background:#232327; }
html[data-theme="black"] { --ink:#e4e4e6; --line:#e4e4e6; --mute:#9a9aa0; }
html[data-theme="black"] .title-bar a:hover, html[data-theme="black"] .title-bar a:focus-visible { background:#e4e4e6; color:#1b1b1e; }
html[data-theme="black"] .detail-modal__panel { background:rgba(35,35,39,.97); border-color:rgba(255,255,255,.14); }
html[data-theme="black"] .detail-modal__bar { background:linear-gradient(180deg,rgba(40,40,44,.97),rgba(28,28,31,.97)); border-bottom-color:rgba(255,255,255,.1); }
html[data-theme="black"] .detail-modal__title, html[data-theme="black"] .side { color:#d0d0d4; }
html[data-theme="black"] .traffic button { background:#232327; color:#e4e4e6; border-color:#e4e4e6; }
html[data-theme="black"] .traffic button:hover { background:#e4e4e6; color:#1b1b1e; }
html[data-theme="black"] .more-hint { background:linear-gradient(180deg,rgba(35,35,39,0),rgba(35,35,39,.92) 70%); }
html[data-theme="black"] .more-hint span { color:#e4e4e6; }
html[data-theme="black"] .detail-modal__frame { background:transparent; }
/* About·Contact */
html[data-theme="black"] .member, html[data-theme="black"] .members h2, html[data-theme="black"] .intro, html[data-theme="black"] .missions { border-color:#55555a !important; }
html[data-theme="black"] .email-fx.is-on, html[data-theme="black"] .email-fx.is-done { color:#fff; }
html[data-theme="black"] .mission-image { filter:invert(1); mix-blend-mode:screen !important; }
html[data-theme="black"] .contact-box { border-color:#e4e4e6 !important; }
/* 은하(메인·comms)는 캔버스를 반전: 흰 배경·검은 별 → 검은 배경·흰 별 */
html[data-theme="black"] #universe, html[data-theme="black"] #comms-universe, html[data-theme="black"] .shape-pad { filter:invert(1); }
html[data-theme="black"] .guest-form input { color:#f2f2f2; }
html[data-theme="black"] .guest-form button { background:#f2f2f2; color:#1b1b1e; }

/* 테마 전환: 유리 트랙 안 AUTO · ○ · ● 세 칸, 고른 칸으로 표시가 미끄러짐 (오른쪽 위 고정) */
.theme-toggle { position:fixed; z-index:40; top:22px; right:22px; display:flex; align-items:center; padding:3px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.3)); border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9), inset 0 -2px 6px rgba(160,165,180,.16), 0 6px 16px rgba(90,95,110,.1); }
.theme-toggle .tt-ind { position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.8)); box-shadow:inset 0 1px 1px #fff, 0 2px 8px rgba(60,65,80,.18);
  transition:transform .3s cubic-bezier(.2,.9,.3,1), width .3s cubic-bezier(.2,.9,.3,1); }
.theme-toggle button { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:26px; min-width:30px; padding:0 9px; border:0; background:none; cursor:pointer;
  color:#7a7a80; font:500 10px/1 "Source Code Pro",monospace; letter-spacing:.1em; transition:color .2s ease; }
.theme-toggle button[aria-pressed="true"] { color:#1c1c1c; }
.theme-toggle button:focus-visible { outline:1px solid #111; outline-offset:-3px; border-radius:999px; }
.theme-toggle .sw { width:11px; height:11px; border-radius:50%; border:1px solid currentColor; }
.theme-toggle .sw.b { background:currentColor; }
html[data-theme="black"] .theme-toggle { background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 1px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.45); }
html[data-theme="black"] .theme-toggle .tt-ind { background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.14)); box-shadow:inset 0 1px 1px rgba(255,255,255,.25); }
html[data-theme="black"] .theme-toggle button { color:#8a8a90; }
html[data-theme="black"] .theme-toggle button[aria-pressed="true"] { color:#f2f2f2; }
html.embed .theme-toggle { display:none; }
@media (max-width:650px) { .theme-toggle { top:12px; right:8px; padding:2px; } .theme-toggle .tt-ind { top:2px; bottom:2px; } .theme-toggle button { min-width:22px; height:22px; padding:0 5px; font-size:8px; letter-spacing:.06em; } .theme-toggle .sw { width:9px; height:9px; } }
@media (prefers-reduced-motion:reduce) { .theme-toggle .tt-ind { transition:none; } }
/* 블랙 버전: 배경은 단색 (헤더 그림자층 없음) */
html[data-theme="black"] .site-legal.legal-marquee { background:rgba(27,27,30,.92) !important; }

/* ===== 글 단 정리 (전체) =====
   한국어는 단어 중간에서 끊지 않고, 문단은 줄 길이를 고르게. 긴 주소·영단어는 넘치지 않게 */
body { word-break:keep-all; overflow-wrap:break-word; }
p, h1, h2, h3, li, figcaption, label { text-wrap:pretty; }
.desc p, .c-about p, .intro-copy p, .contact-box p, .field, .sub { text-wrap:balance; }
.desc .ln { display:block; text-wrap:balance; }
.desc .ln + .ln { margin-top:.35em; }
.desc p { max-width:64ch; margin-left:auto; margin-right:auto; }
.desc .en { max-width:78ch; }
@media (max-width:700px) {
  .desc { padding-left:18px !important; padding-right:18px !important; }
  .desc p, .desc .ln { text-align:left; text-wrap:pretty; }
  .desc .sep { text-align:center; }
}
/* 블랙 버전 팝업은 불투명 (뒤 목록 비침 방지) */
html[data-theme="black"] .detail-modal__panel { background:#232327 !important; }
html[data-theme="black"] .site-header.detail-header { background:#1b1b1e !important; }
html:not([data-theme="black"]) .site-header.detail-header { background:#ececec !important; }


/* 하단 표기: 멈춘 채 가운데 한 줄 */
.legal-static .lm-track { animation:none !important; width:100%; justify-content:center; }
.legal-static .lm-copy { padding:0; }

/* 하단 표기: 배경 띠 없이 글자만 */
.site-legal.legal-marquee, html[data-theme="black"] .site-legal.legal-marquee { background:none !important; }
.site-legal.legal-marquee { bottom:22px !important; }
@media (max-width:650px) { .site-legal.legal-marquee { bottom:16px !important; } }

/* 화이트 가독성 (2026-11-05 사용자 요청): 본문 글씨 약간 굵게(500), 보조 글은 #444 전후. 원래 굵은 제목(600+)은 그대로. 블랙은 변경 없음 */
html:not([data-theme="black"]) body { font-weight:500; }
html:not([data-theme="black"]) .site-header .main-nav a { color:#3a3a3e; font-weight:500; }
html:not([data-theme="black"]) .site-header .main-nav a[aria-current="page"], html:not([data-theme="black"]) .site-header .main-nav a:hover { color:#111; }
html:not([data-theme="black"]) .project-meta, html:not([data-theme="black"]) .title-bar h1, html:not([data-theme="black"]) .media .sub { font-weight:500; }
html:not([data-theme="black"]) .project-date, html:not([data-theme="black"]) .project-unavailable { color:#444; }
html:not([data-theme="black"]) .detail-modal__panel { background:#f3f3f5; }
html:not([data-theme="black"]) .detail-modal__title { color:#333; font-weight:500; }
html:not([data-theme="black"]) .desc .en { color:#444; }
html:not([data-theme="black"]) .intro-copy p[lang="en"], html:not([data-theme="black"]) .mission p[lang="en"] { color:#444; }
html:not([data-theme="black"]) .c-about .en, html:not([data-theme="black"]) .c-label, html:not([data-theme="black"]) .c-hint, html:not([data-theme="black"]) .c-form label span, html:not([data-theme="black"]) .c-form-note:not(.bad) { color:#444; }
html:not([data-theme="black"]) .guest-status { color:#444; }
html:not([data-theme="black"]) .guest-form input::placeholder { color:#6a6a70; }
html:not([data-theme="black"]) .site-legal { color:#333; }
html:not([data-theme="black"]) .theme-toggle button { color:#55555b; }