/* ───────── 공개 홈페이지 — Astra 디자인 V2 (미래 중심, 2026-10-31) ─────────
   기준: Z:\ASTRA\TODAM_WEB\Astra\DESIGN_20261031_V2 + V1 의 색·글꼴·반응형·접근성 규칙
   글꼴은 Noto Sans KR 하나. 큰 제목 400~500, 버튼 600. 장식 글꼴 없음. */
:root {
  --font-site: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --hero-bg: #183f32;          /* 첫 화면·푸터 깊은 녹색 */
  --hero-ink: #f6f5ef;
  --hero-ink-2: #d7dfd6;
  --accent-text: #a65606;      /* 작은 주황 글자 — 종이색 위 대비 4.5:1 이상 */
  --accent-btn: #a65606;       /* 주황 버튼 배경 — 흰 글자 대비 5.3:1 */
  --accent-btn-hover: #8a4705;
  --band: #e4ebe3;             /* '지금, 만들어 가는 것들' 띠 */
  --step: #e7ebe2;
  --muted-site: #59675c;
  --line-site: #d4dad1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-bg: #10241d; --hero-ink: #f6f5ef; --hero-ink-2: #c9d5bc;
    --accent-text: #f0ab64; --accent-btn: #f0ab64; --accent-btn-hover: #f5c08a;
    --band: #1d2a23; --step: #22302a; --muted-site: #b3bcb2; --line-site: #354239;
  }
}
:root[data-theme="dark"] {
  --hero-bg: #10241d; --hero-ink: #f6f5ef; --hero-ink-2: #c9d5bc;
  --accent-text: #f0ab64; --accent-btn: #f0ab64; --accent-btn-hover: #f5c08a;
  --band: #1d2a23; --step: #22302a; --muted-site: #b3bcb2; --line-site: #354239;
}

body { font-family: var(--font-site); font-size: 17px; line-height: 1.68; }
@media (max-width: 767px) { body { font-size: 16px; line-height: 1.7; } }

.wrap { width: min(1312px, 100% - 128px); margin-inline: auto; }
@media (max-width: 1023px) { .wrap { width: calc(100% - 64px); } }
@media (max-width: 767px) { .wrap { width: calc(100% - 40px); } }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 글자 체계 */
.label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-text); }
.t-display { margin: 0; font-weight: 400; font-size: clamp(2.125rem, 1.25rem + 3.6vw, 3.75rem); line-height: 1.36; letter-spacing: -.02em; }
.t-h2 { margin: 0; font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem); line-height: 1.38; letter-spacing: -.015em; }
.t-h3 { margin: 0; font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.45; }
.lead { margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.75; color: var(--ink-2); max-width: 40ch; }
.muted { color: var(--muted-site); }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: 16px; color: var(--ink); transition: color .15s; }
.link span { transition: transform .18s; }
.link:hover { color: var(--accent-text); }
.link:hover span { transform: translateX(3px); }
.btn-accent {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  background: var(--accent-btn); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 2px;
  transition: background .15s;
}
.btn-accent:hover { background: var(--accent-btn-hover); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-accent { color: #1b1408; } }
:root[data-theme="dark"] .btn-accent { color: #1b1408; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.v-hero :focus-visible, .site-footer :focus-visible { outline-color: #f0ab64; }

/* 헤더 — 불투명 종이색, 얇은 하단선 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.site-header .bar { display: flex; align-items: center; gap: 24px; height: 88px; border-bottom: 1px solid var(--line-site); }
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand-logo { height: 44px; width: auto; }
.brand-logo.on-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo.on-light { display: none; } :root:not([data-theme="light"]) .brand-logo.on-dark { display: block; } }
:root[data-theme="dark"] .brand-logo.on-light { display: none; }
:root[data-theme="dark"] .brand-logo.on-dark { display: block; }
.nav { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); margin-left: auto; }
.nav a { position: relative; text-decoration: none; font-size: 16px; color: var(--ink-2); padding: 10px 0; transition: color .15s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .18s; }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on { color: var(--moss); font-weight: 500; }
.nav a.nav-staff { font-size: 13px; color: var(--muted-site); }
.nav a.nav-staff::after { display: none; }
.staff-link { display: none; text-decoration: none; font-size: 14px; color: var(--muted-site); margin-left: auto; padding: 10px 4px; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.menu-toggle span { display: block; flex: none; width: 22px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform .18s, opacity .18s; }
.site-header.open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.open .menu-toggle span:nth-child(2) { opacity: 0; }
.site-header.open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1023px) {
  .site-header .bar { height: 76px; gap: 8px; }
  .brand-logo { height: 40px; }
  .staff-link, .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; }
  .staff-link { flex-direction: row; align-items: center; gap: 4px; }
  .nav { display: none; }
  .site-header.open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 76px; left: 0; right: 0; background: var(--paper);
    padding: 4px 20px 20px; border-bottom: 1px solid var(--line-site); box-shadow: 0 18px 30px rgba(20, 30, 25, .08);
  }
  .site-header.open .nav a { padding: 16px 0; font-size: 18px; border-bottom: 1px solid var(--line-site); }
  .site-header.open .nav a::after { display: none; }
  .site-header.open .nav a.nav-staff { font-size: 16px; border-bottom: 0; }
}

/* 공통 구획 */
.section { padding: clamp(64px, 8vw, 120px) 0; }
.rule { border: 0; border-top: 1px solid var(--line-site); margin: 0; }
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .js .reveal:not(.in) { opacity: 1; transform: none; } .reveal { transition: none; } }

/* ── 설계의 미래 (홈) ── */
.v-hero { background: var(--hero-bg); color: var(--hero-ink); padding: clamp(40px, 5vw, 56px) 0 clamp(56px, 6vw, 80px); }
.v-hero .label { color: var(--hero-ink-2); font-weight: 400; font-size: 13px; }
.v-hero h1 { color: #fff; max-width: 18ch; }
.v-hero .sub { margin: clamp(18px, 2.4vw, 30px) 0 0; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); color: var(--hero-ink-2); max-width: 34ch; }
.v-hero .btn-accent { margin-top: clamp(28px, 3vw, 40px); }
.v-hero-media { margin: clamp(36px, 4vw, 48px) 0 0; }
.v-hero-media .frame { aspect-ratio: 16 / 9; background: #0d1d17; overflow: hidden; }
.v-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.v-hero-media figcaption { margin-top: 12px; font-size: 14px; color: var(--hero-ink-2); }
.v-statement { margin: clamp(40px, 5vw, 64px) 0 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.5; font-weight: 400; color: #fff; max-width: 24ch; }

.topic { padding: clamp(56px, 7vw, 96px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.topic + .topic { border-top: 1px solid var(--line-site); }
.topic .body p { margin: 0 0 8px; color: var(--ink-2); max-width: 36ch; }
.topic .body .link { margin-top: 14px; }
.topic.wide { grid-template-columns: 1fr; }
.topic.wide .body p { max-width: 52ch; }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.steps li { background: var(--step); padding: 22px 24px 26px; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); }
.steps li::before { counter-increment: step; content: "0" counter(step); display: block; font-size: 14px; color: var(--accent-text); margin-bottom: 6px; }
@media (max-width: 767px) {
  .topic { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .steps li { display: flex; gap: 22px; align-items: baseline; }
  .steps li::before { margin: 0; }
}

.v-now { background: var(--band); padding: clamp(56px, 7vw, 88px) 0; }
.v-now .wrap { display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; }
.v-now p { margin: 18px 0 0; color: var(--ink-2); max-width: 46ch; }

.v-foundation { padding: clamp(56px, 7vw, 96px) 0 0; }
.v-foundation .wrap, .v-cta .wrap { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; }
.v-foundation p { margin: 12px 0 0; color: var(--ink-2); }
.v-cta { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 112px); }

/* ── 페이지 머리 (기술과 실험 · 설계 아카이브 · 문의) ── */
.page-intro { padding: clamp(48px, 6vw, 64px) 0 clamp(36px, 4vw, 52px); }
.page-intro .lead { margin-top: clamp(20px, 2.6vw, 32px); }

/* ── 기술과 실험 ── */
.lab-feature { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(32px, 4vw, 60px); padding-bottom: clamp(56px, 7vw, 88px); align-items: start; }
.lab-feature .frame { aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.lab-feature .frame img { width: 100%; height: 100%; object-fit: cover; }
.lab-feature .body { padding-top: clamp(0px, 2vw, 28px); }
.lab-feature .body p { margin: 16px 0 0; color: var(--ink-2); }
.lab-feature .body .link { margin-top: 18px; }
.lab-topics { padding: clamp(48px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.lab-topics .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px clamp(24px, 3vw, 48px); margin-top: 28px; }
.lab-topics p { margin: 14px 0 0; color: var(--ink-2); }
@media (max-width: 1023px) { .lab-feature { grid-template-columns: 1fr; } .lab-topics .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .lab-topics .grid { grid-template-columns: 1fr; } }

/* ── 설계 아카이브 ── */
.tabs { display: flex; gap: 28px; margin-top: clamp(28px, 3vw, 40px); }
.tabs a { position: relative; text-decoration: none; color: var(--muted-site); padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--moss); }
.filter-bar { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--line-site); }
.filter-bar label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.filter-bar select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 30px 0 2px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2359675c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 6px center; font-size: 16px; color: var(--ink); cursor: pointer; }
.filter-bar .count { margin-left: auto; font-size: 14px; color: var(--muted-site); }
.filter-bar .reset { font-size: 14px; color: var(--ink-2); }
.arch-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 60px); padding: clamp(28px, 3vw, 40px) 0 clamp(56px, 6vw, 80px); }
.arch-card { grid-column: span 6; text-decoration: none; display: block; color: inherit; }
.arch-card.lead-card { grid-column: span 8; }
.arch-card.side-card { grid-column: span 4; }
.arch-card .frame { aspect-ratio: 16 / 10; background: var(--paper); overflow: hidden; }
.arch-card.lead-card .frame { aspect-ratio: 16 / 9; }
.arch-card .frame img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.arch-card:hover .frame img { transform: scale(1.02); }
.arch-card h3 { margin: 18px 0 6px; font-size: clamp(1.2rem, 1.05rem + .55vw, 1.6rem); font-weight: 400; line-height: 1.42; }
.arch-card .meta { font-size: 15px; color: var(--muted-site); }
.arch-card .ph, .lab-feature .ph { height: 100%; }
@media (max-width: 1023px) { .arch-card, .arch-card.lead-card, .arch-card.side-card { grid-column: span 6; } }
@media (max-width: 767px) {
  .arch-card, .arch-card.lead-card, .arch-card.side-card { grid-column: span 12; }
}
.empty { padding: 48px 0 80px; }
.empty p { margin: 0 0 10px; font-size: 1.15rem; }
.arch-foot { padding: 0 0 clamp(64px, 7vw, 96px); }

/* 연혁 */
.history { padding: clamp(28px, 3vw, 40px) 0 clamp(56px, 7vw, 96px); }
.tl-item { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 8px 40px; padding: 28px 0; border-top: 1px solid var(--line-site); }
.tl-item:last-child { border-bottom: 1px solid var(--line-site); }
.tl-year { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); color: var(--moss); font-weight: 400; }
.tl-body h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 500; }
.tl-body p { margin: 0; color: var(--ink-2); }
.tl-works { margin-top: 10px; font-size: 15px; color: var(--muted-site); }
@media (max-width: 767px) { .tl-item { grid-template-columns: 1fr; } }

/* 작품 상세 */
.crumb { display: inline-flex; gap: 6px; font-size: 14px; color: var(--muted-site); text-decoration: none; min-height: 44px; align-items: center; }
.crumb:hover { color: var(--ink); }
.work-head { padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3vw, 40px); }
.work-head h1 { margin-top: 6px; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); }
.work-head .meta { margin-top: 14px; color: var(--muted-site); }
.work-cover { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; cursor: zoom-in; border: 0; padding: 0; }
.work-cover img { width: 100%; height: 100%; object-fit: contain; }
.work-info { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px clamp(40px, 5vw, 80px); padding: clamp(40px, 5vw, 64px) 0; }
.work-info .desc { color: var(--ink-2); white-space: pre-line; max-width: 60ch; }
.work-info video { width: 100%; margin-top: 28px; background: #000; }
.facts { margin: 0; align-self: start; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 80px 1fr; padding: 13px 0; border-bottom: 1px solid var(--line-site); font-size: 15px; }
.facts dt { color: var(--muted-site); }
.facts dd { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: clamp(48px, 6vw, 72px); }
.gallery a { display: block; background: var(--paper-2); aspect-ratio: 16 / 10; overflow: hidden; cursor: zoom-in; }
.gallery a:only-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.gallery img { width: 100%; height: 100%; object-fit: contain; }
.pager { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line-site); padding: 24px 0; }
.pager a { text-decoration: none; max-width: 45%; }
.pager small { display: block; color: var(--muted-site); font-size: 14px; }
.related { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.related .arch-grid { padding-top: 24px; }
@media (max-width: 1023px) { .work-info { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery a:only-child { grid-column: auto; }
  /* 휴대폰: 틀 비율을 고정하지 않고 원본 비율 그대로 — 가로로 긴 조감도 위아래 빈칸을 없앤다 (아카이브·상세 규칙보다 뒤에 둔다) */
  .arch-card .frame, .arch-card.lead-card .frame, .work-cover, .gallery a, .gallery a:only-child { aspect-ratio: auto; }
  .arch-card .frame img, .work-cover img, .gallery img { height: auto; }
  .arch-card .frame .ph, .work-cover .ph { min-height: 200px; }
}

/* 이미지가 없을 때 — 가짜 이미지를 만들지 않고 제목만 */
.ph { width: 100%; display: grid; place-items: center; text-align: center; padding: 20px; background: var(--paper-2); color: var(--muted-site); font-size: 1rem; }
.ph small { display: block; font-size: 1.4rem; }

/* 문의 */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); padding: 0 0 clamp(64px, 8vw, 112px); align-items: start; }
.contact-tel { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 400; letter-spacing: -.01em; text-decoration: none; color: var(--ink); display: inline-block; }
.contact-tel:hover { color: var(--accent-text); }
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.contact-list { margin: 0; border-top: 1px solid var(--ink); }
.contact-list div { display: grid; grid-template-columns: 90px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line-site); font-size: 16px; }
.contact-list dt { color: var(--muted-site); }
.contact-list dd { margin: 0; }
.map { width: 100%; height: 420px; border: 0; margin-top: 40px; }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } }

/* 푸터 — 깊은 녹색 */
.site-footer { background: var(--hero-bg); color: var(--hero-ink-2); padding: 48px 0 40px; font-size: 14px; }
.site-footer .foot { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; }
.site-footer b { display: block; color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.foot-nav { display: flex; gap: 6px 22px; flex-wrap: wrap; align-content: start; justify-content: flex-end; }
.foot-nav a { min-height: 32px; display: inline-flex; align-items: center; }
.foot-copy { grid-column: 1 / -1; margin-top: 12px !important; font-size: 13px; opacity: .8; }
@media (max-width: 767px) { .site-footer .foot { grid-template-columns: 1fr; } .foot-nav { justify-content: flex-start; } }

/* 이미지 확대 */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(8, 12, 10, .94); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; cursor: default; }
.lb-close { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,.22); }

/* 직원 로그인 */
.login-page .site-header, .login-page .site-footer { display: none; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { position: relative; background: var(--hero-bg); overflow: hidden; }
.login-art img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.login-art .cap { position: absolute; left: 40px; bottom: 40px; color: #fff; font-size: 1.6rem; font-weight: 400; max-width: 18ch; line-height: 1.45; text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.login-panel { display: grid; place-items: center; padding: 40px 20px; }
.login-box { width: min(380px, 100%); }
.login-box h1 { font-size: 1.8rem; font-weight: 500; margin: 26px 0 6px; }
.field { display: grid; gap: 6px; margin-top: 18px; }
.field label { font-size: 14px; color: var(--ink-2); }
.field input { min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--card); }
.field input:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px var(--moss-soft); }
.btn-primary { margin-top: 24px; width: 100%; min-height: 48px; border: 0; border-radius: 4px; background: var(--moss); color: var(--paper); font-weight: 600; cursor: pointer; font-size: 15px; }
.btn-primary:hover { background: var(--moss-2); }
.form-error { color: var(--red); font-size: 14px; margin-top: 12px; min-height: 1.4em; }
@media (max-width: 860px) { .login-shell { grid-template-columns: 1fr; } .login-art { display: none; } }