/* SOUND FRAME — shared design system (tokens, header, footer, local nav, round controls, modal shell)
   Neutral-first. Signal Blue is a UX colour only: active / focus / selected / index / CTA / rule / progress — never a large fill.
   Rhythm: Hero(high) → Work stage(high) → Interlude(very low) → Artwork(high) → Proof(medium) → Studio(medium, ivory) → Digital stage(high) → Footer(low) */
:root {
  --ink: #080808; --charcoal: #151515; --graphite: #262626;
  --ivory: #F4EFE7; --muted: #B1ACA4; --ivory-soft: #A9A398; --text-primary-white: #FAFAFA; --muted-dark: #5b554c;
  /* Signal Blue — single source. signal = rules / progress / icons (non-text); soft = text on dark (6.5:1 on ink); ink = text on ivory (5.5:1) */
  --sf-signal: #3F63FF; --sf-signal-soft: #6E8BFF; --sf-signal-ink: #2E4FE0;
  --blue-soft: var(--sf-signal-soft);
  --line: rgba(244, 239, 231, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --gutter: clamp(18px, 4vw, 64px);
  --sec: clamp(96px, 12vw, 192px);
  --sec-v: clamp(80px, 9.6vw, 164px);
  /* one spacing scale for WORK / GUIDE / CONTACT: grows smoothly with width, never collapses on large screens */
  --section-space-sm: clamp(56px, 5vw, 104px); --section-space-md: clamp(80px, 7.2vw, 144px); --section-space-lg: clamp(104px, 10vw, 200px);
  --hdr: 76px; --lnav: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
body { margin: 0; background: var(--ink); color: var(--ivory); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--sf-signal-soft); outline-offset: 3px; }
/* mouse / touch: no residual focus ring on controls (keyboard users keep :focus-visible). html.is-mouse is toggled in base.js */
html.is-mouse :focus-visible, :focus:not(:focus-visible) { outline: none; }
dialog.ov:focus, dialog.ov:focus-visible { outline: none; }
.ov__bar button, .ov__bar button:focus { box-shadow: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ivory); color: var(--ink); padding: 10px 14px; font-size: 13px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.meta { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cta-line { display: inline-flex; align-items: center; gap: 18px; padding: 20px 4px; border-block: 1px solid var(--ivory); font-size: 13px; letter-spacing: .24em; min-height: 44px; transition: gap .4s var(--ease), color .25s, border-color .25s; }
.cta-line i { font-style: normal; font-size: 18px; letter-spacing: 0; }
.cta-line i { display: inline-block; transition: transform .2s var(--ease), color .2s; }
.cta-line:hover, .cta-line:focus-visible { color: var(--ivory); border-color: var(--muted); }
.cta-line:hover i, .cta-line:focus-visible i { color: var(--sf-signal-soft); transform: translateX(3px); }
.lnk { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; position: relative; padding: 6px 0; display: inline-block; }
.lnk::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: currentColor; transition: right .3s var(--ease); }
.lnk:hover::after, .lnk:focus-visible::after { right: 0; }
/* ---------------- wordmark: approved transparent WebP (tight ink box) sized by width (--wm-w) ---------------- */
.wm { --wm-w: 148px; display: block; width: var(--wm-w); aspect-ratio: 1111 / 98; }
.wm img { display: block; width: 100%; height: auto; }
/* ---------------- header: one rule for all four pages ---------------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--gutter); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
html:not(.js) .hdr, .hdr.is-solid { background: rgba(8, 8, 8, .94); border-bottom-color: rgba(244, 239, 231, .08); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html:not(.js) .hdr, .hdr.is-solid { background: rgba(8, 8, 8, .88); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
}
.hdr__brand { display: block; flex: none; padding: 14px 0; }
.hdr__brand, .ftr__brand { transition: opacity .2s var(--ease); }
.hdr__brand:hover, .hdr__brand:focus-visible, .ftr__brand:hover, .ftr__brand:focus-visible { opacity: .72; }
.hdr__nav { display: flex; gap: clamp(20px, 3vw, 44px); }
.hdr__nav a { font-size: 11.5px; letter-spacing: .18em; padding: 12px 0; position: relative; transition: color .25s; }
.hdr__nav a { color: var(--muted); }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 1px; background: var(--ivory); transition: right .3s var(--ease); }
.hdr__nav a[aria-current="page"]::after { height: 2px; background: var(--sf-signal); }
.hdr__nav a:hover, .hdr__nav a:focus-visible, .hdr__nav a[aria-current="page"] { color: var(--text-primary-white); }
.hdr__nav a:hover::after, .hdr__nav a:focus-visible::after, .hdr__nav a[aria-current="page"]::after { right: 0; }
/* ---------------- local navigation (WORK + GUIDE share it) ---------------- */
.lnav { position: sticky; top: var(--hdr); z-index: 20; height: var(--lnav); background: rgba(8, 8, 8, .9); border-block: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) {
.lnav { background: rgba(8, 8, 8, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.lnav__in { height: 100%; display: flex; gap: clamp(20px, 3vw, 44px); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.lnav__in::-webkit-scrollbar { display: none; }
.lnav a { flex: none; display: flex; align-items: center; position: relative; font-size: 11px; letter-spacing: .18em; color: var(--muted); transition: color .25s; }
.lnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ivory); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.lnav a:hover, .lnav a:focus-visible { color: var(--ivory); }
.lnav a:hover::after, .lnav a:focus-visible::after { transform: scaleX(.5); }
.lnav a[aria-current="true"] { color: var(--text-primary-white); }   /* active: White text … */
.lnav a[aria-current="true"]::after { transform: scaleX(1); height: 2px; background: var(--sf-signal); }   /* … only the line is Signal Blue (inside the bar: it was clipped by .lnav__in overflow at bottom:-1px) */
.anchor { scroll-margin-top: calc(var(--hdr) + var(--lnav) + 20px); }
/* ---------------- round controls (prev / next): icon-only, 44px target ---------------- */
.ctl { display: flex; align-items: center; gap: 12px; }
.ctl button, .ao__ctl button:not(.vw__txt), .vw__ctl button:not(.vw__txt) { position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; font-size: 0; line-height: 0; display: grid; place-items: center; transition: border-color .25s, color .25s, opacity .25s; }
.ctl button::before, .ao__ctl button:not(.vw__txt)::before, .vw__ctl button:not(.vw__txt)::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--arr) center / contain no-repeat; mask: var(--arr) center / contain no-repeat; }
:root { --arr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h16M13.5 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ctl button[aria-label*="이전"]::before, .ao__ctl button:not(.vw__txt)[aria-label*="이전"]::before, .vw__ctl button[aria-label*="이전"]::before { transform: scaleX(-1); }
.ctl button:hover:not(:disabled), .ctl button:focus-visible, .ao__ctl button:not(.vw__txt):hover, .ao__ctl button:not(.vw__txt):focus-visible, .vw__ctl button:not(.vw__txt):hover, .vw__ctl button:not(.vw__txt):focus-visible { border-color: var(--ivory); color: var(--ivory); }
.ctl button:disabled { opacity: .28; cursor: default; }
/* ---------------- footer ---------------- */
.ftr { padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); display: grid; gap: 28px; }
.ftr__id { display: grid; gap: clamp(6px, .7vw, 9px); justify-items: start; }
.ftr__brand { display: block; }
.ftr__d { margin: 0; display: flex; justify-content: space-between; width: var(--ftr-w); font-size: 9.5px; font-weight: 300; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.ftr__d .sp { flex: 0 0 .9em; }
.ftr__id { --ftr-w: 152px; position: relative; }
.wm--ftr { --wm-w: var(--ftr-w); }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 10px; }
/* small square outline icon control (footer + CONTACT): 1px line, 44px target, subtle Signal Blue on hover/focus */
.ico { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(244, 239, 231, .3); color: rgba(244, 239, 231, .78); transition: border-color .25s, color .25s, background .25s; }
.ico::after { content: ""; position: absolute; inset: -4px; }   /* 44px touch target */
.ico svg { width: 17px; height: 17px; }
.ico:hover, .ico:focus-visible { border-color: var(--ivory); color: var(--ivory); background: rgba(244, 239, 231, .05); }
@media (min-width: 760px) {
.ftr { grid-template-columns: 1fr auto; align-items: end; }
}
/* inner pages: content starts below the fixed header */
body.inner main { padding-top: var(--hdr); }
/* generic reveal (single-use scenes only) */
html.js [data-fade] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js [data-fade].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html.js [data-fade] { opacity: 1; transform: none; }
}
/* modal base (native <dialog>) */
dialog.ov { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--ivory); overflow: auto; overscroll-behavior: contain; }
dialog.ov::backdrop { background: var(--ink); }
dialog.ov[open] { animation: ov-in .32s var(--ease); }
@keyframes ov-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.is-locked { overflow: hidden; }
.ov__bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); background: rgba(8, 8, 8, .94); }
.ov__bar button { font-size: 12px; letter-spacing: .2em; padding: 12px 0; transition: color .25s; }
.ov__bar button:hover, .ov__bar button:focus-visible { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}
/* ---------------- responsive: header must never collide (320 → 1920) ---------------- */
@media (max-width: 1279px) { .hdr .wm { --wm-w: 140px; } }
@media (max-width: 899px) { .hdr .wm { --wm-w: 136px; } }
@media (max-width: 599px) { .hdr .wm { --wm-w: 128px; } }
@media (max-width: 480px) {
:root { --hdr: 62px; --lnav: 46px; }
.hdr { gap: 10px; }
.hdr .wm { --wm-w: 118px; }
.hdr__nav { gap: 14px; }
.hdr__nav a { font-size: 11px; letter-spacing: .12em; }
.hdr__nav a::after { bottom: 10px; }
}
@media (max-width: 359px) {
.hdr .wm { --wm-w: 100px; }
.hdr__nav { gap: 10px; }
.hdr__nav a { font-size: 10px; letter-spacing: .08em; }
}

/* hero image shade (WORK / GUIDE / CONTACT image slots): restrained, CSS only - the source image is never edited */
.hero-shade { position: relative; margin: 0; }
.hero-shade::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 8, 8, .46) 0, rgba(8, 8, 8, .2) 48%, rgba(8, 8, 8, .3) 100%); }
@media (prefers-reduced-motion: reduce) { .cta-line i { transform: none !important; } }

/* ---------------- Patch 05: logo hover — a faint brightness change only (footer weaker than header) ---------------- */
.hdr__brand, .ftr__brand { transition: opacity .18s var(--ease); }
.hdr__brand:hover, .hdr__brand:focus-visible { opacity: .82; }
.ftr__brand:hover, .ftr__brand:focus-visible { opacity: .9; }

/* ---------------- Patch 09: footer wordmark = header wordmark width on every viewport ≤759px; the descriptor spans exactly that width (same flex rule as desktop) ---------------- */
@media (max-width: 759px) { .ftr__id { --ftr-w: 136px; } }
@media (max-width: 599px) { .ftr__id { --ftr-w: 128px; } }
@media (max-width: 480px) { .ftr__id { --ftr-w: 118px; } }
@media (max-width: 359px) { .ftr__id { --ftr-w: 100px; } }
@media (max-width: 759px) { .ftr__d { font-size: calc(var(--ftr-w) * 9.5 / 152); } }   /* the 22 letters keep the desktop proportion, so they fit the narrower wordmark width exactly */

/* ---------------- shared typography reveal (moved from home.css; used on every page) ---------------- */
html.js [data-reveal] span { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js [data-reveal].is-in span { opacity: 1; transform: none; }
html.js [data-reveal].is-in span:nth-child(2) { transition-delay: .14s; }
html.js [data-reveal].is-in span:nth-child(3) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal] span { opacity: 1; transform: none; } }

/* ---------------- Patch 12: Concept Project label / disclosure (information, not a badge) ---------------- */
.cpl { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 400; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: var(--muted); }
.cpl[hidden] { display: none; }
.wk-sec--ivory .cpl { color: var(--muted-dark); }
.cpd { margin: 10px 0 0; max-width: none; font-size: 12.5px; line-height: 1.65; color: var(--ivory-soft); word-break: keep-all; text-wrap: pretty; }

/* wordmark hover / focus: FRAME crossfades to Signal Blue #3F63FF (identical-canvas overlay; SOUND stays White; no movement, no glow) */
.wm { position: relative; }
.wm .wm__f { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); }
a:focus-visible .wm .wm__f { opacity: 1; }
@media (hover: hover) and (pointer: fine) { a:hover > .wm .wm__f { opacity: 1; } }
.hdr__brand:hover, .hdr__brand:focus-visible, .ftr__brand:hover, .ftr__brand:focus-visible { opacity: 1; }   /* the colour change replaces the old dim-on-hover */
@media (prefers-reduced-motion: reduce) { .wm .wm__f { transition: none; } }