/* Hallmark · bespoke: "다섯 개의 신호" v2 (관제실 + 증거) · genre: atmospheric-editorial
 * v2: 앱 색인이 도시에(dossier)로 확장 — 실제 홈페이지 스크린샷이 기울어진 브라우저 프레임으로
 * 각 행에 앉고, 호버 시 똑바로 서며 행 전체가 신호색으로 범람한다. 라이브 티커가 실데이터를 말한다.
 * 대비: 범람 호버는 행별 --flood-ink(밝은 신호색=잉크, 어두운 신호색=종이)로 4.5:1 확보
 */
/* ── 다섯 개의 신호 — 토큰 ── */
:root {
  --ink: #0A0C10;
  --panel: #0E1117;
  --paper: #E9E7E0;
  --dim: #8B8F98;
  --hair: rgba(233, 231, 224, 0.13);
  --run: #3D6BFF; --yeon: #E06A76; --bla: #5FC492; --lin: #A47CFF; --jja: #FFA04D;
  --sans: "IBM Plex Sans KR", Pretendard, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --gutter: clamp(20px, 6vw, 84px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* 그레인 — 평평한 화면에 재질을 입힌다 */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* iOS Safari: fixed + mix-blend-mode 조합이 화면 전체를 검게 칠하는 합성 버그가 있다 — iOS에선 끈다 */
@supports (-webkit-touch-callout: none) {
  body::after { content: none; }
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }

/* 램프 */
.lamp {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sig, var(--bla));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--sig, var(--bla)) 65%, transparent);
  animation: lamp 2.6s ease-in-out infinite;
}
.lamp-g { --sig: var(--bla); width: 7px; height: 7px; margin-right: 9px; vertical-align: 1px; }
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── 내비 ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: baseline; gap: 24px;
  padding: 18px var(--gutter);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.nav-logo { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.nav-clock { font-size: 11.5px; color: var(--dim); letter-spacing: 0.04em; }
.nav-links { margin-left: auto; display: flex; gap: 22px; font-size: 12px; letter-spacing: 0.06em; }
.nav-links a { color: var(--dim); padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s; }
.nav-links a:hover { color: var(--paper); border-color: var(--paper); }

/* ── 히어로 ── */
.hero { position: relative; padding: clamp(64px, 12vh, 140px) var(--gutter) clamp(48px, 8vh, 84px); }
.hero-wave { position: absolute; left: 0; bottom: -8px; width: 100%; height: 180px; pointer-events: none; }
.hero-notes {
  position: absolute; right: var(--gutter); top: clamp(64px, 12vh, 140px);
  display: flex; flex-direction: column; gap: 7px; text-align: right;
  font-size: 10.5px; color: var(--dim); letter-spacing: 0.08em; opacity: 0.85;
}
.hero-notes span::after { content: ""; display: inline-block; width: 5px; height: 1px;
  background: var(--hair); margin-left: 8px; vertical-align: middle; }
.eyebrow { font-size: 12px; color: var(--dim); letter-spacing: 0.14em; margin-bottom: 26px; }
.hero-title {
  position: relative; z-index: 1;
  font-size: clamp(44px, 8.6vw, 104px);
  font-weight: 700; letter-spacing: -0.045em; line-height: 1.06;
  margin-bottom: 34px;
}
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.mask-in { display: block; transform: translateY(110%);
  animation: rise 1.1s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { transform: translateY(0); } }
.lede { position: relative; z-index: 1; font-size: clamp(14.5px, 1.7vw, 17px); color: var(--dim); line-height: 1.85; }

.reveal-load { opacity: 0; transform: translateY(14px);
  animation: fadeUp .9s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ── 라이브 티커 ── */
.ticker {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--panel); overflow: hidden; padding: 13px 0;
}
.tick-track { display: flex; width: max-content; animation: tick 30s linear infinite; }
.ticker:hover .tick-track { animation-play-state: paused; }
.tick-set { display: flex; gap: 56px; padding-right: 56px; }
.tick-set span {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--dim);
}
.tick-set em { font-style: normal; color: var(--paper); }
.tick-set .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 섹션 머리 ── */
.sec-head {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 12px; font-weight: 500; color: var(--dim); letter-spacing: 0.2em;
  padding: 0 var(--gutter); margin-bottom: 10px;
}
.sec-head span { color: var(--paper); }
.sec-head::after { content: ""; flex: 1; height: 1px; background: var(--hair); align-self: center; }

/* ── 도시에: 앱 색인 + 실제 화면 ── */
.apps { padding-top: clamp(56px, 9vh, 84px); }
.dossiers { list-style: none; }
.dossier {
  border-bottom: 1px solid var(--hair);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: center;
  padding: clamp(40px, 6vh, 72px) var(--gutter);
  transition: background .4s var(--ease);
}
/* 짝수 행은 스크린샷이 왼쪽 */
.dossier:nth-child(even) .d-rowlink { order: 2; }
.dossier:nth-child(even) .d-shot,
.dossier:nth-child(even) .d-bar-wrap { order: 1; }

.d-rowlink { display: block; min-width: 0; }
.d-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.d-no { font-size: 12px; color: var(--dim); letter-spacing: 0.1em; }
.d-name { display: flex; align-items: center; gap: 12px;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.d-desc { font-size: 15px; color: var(--dim); line-height: 1.75; }
.d-plat { font-size: 11px; color: var(--dim); letter-spacing: 0.08em; }
.d-link { font-size: 13px; color: var(--sig); letter-spacing: 0.04em; transition: transform .35s var(--ease); }

/* 스크린샷 브라우저 프레임 — 기본은 살짝 기울고, 호버에 똑바로 선다 */
.d-shot {
  position: relative; min-width: 0;
  border: 1px solid rgba(233, 231, 224, 0.16); background: var(--panel);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.d-chrome {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid var(--hair);
}
.d-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #2A2E36; }
.d-chrome b { flex: 1; text-align: center; font-weight: 400; font-size: 10.5px; color: var(--dim); }
.d-shot img { display: block; width: 100%; height: auto; }
.d-shot iframe { display: none; width: 100%; height: 480px; border: 0; background: #fff; }

/* 직접 써보기 — 스크린샷 위 버튼. JS 가 없으면 그냥 새 탭 링크로 동작한다 */
.d-try {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 8px 16px; font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--sig); background: rgba(10, 12, 16, 0.82);
  border: 1px solid var(--sig); backdrop-filter: blur(6px);
  transition: background .25s, color .25s;
}
.d-try:hover { background: var(--sig); color: var(--flood-ink, var(--ink)); }
/* 크롬바 컨트롤 — 라이브일 때만 */
.d-newtab, .d-close {
  display: none; padding: 0 6px; font: inherit; font-size: 12px; line-height: 1;
  color: var(--dim); background: none; border: none; cursor: pointer;
}
.d-newtab:hover, .d-close:hover { color: var(--paper); }

/* 라이브 모드 — 스크린샷 대신 실제 사이트 */
.d-shot.live { transform: none; }
.d-shot.live img, .d-shot.live .d-try { display: none; }
.d-shot.live iframe { display: block; }
.d-shot.live .d-newtab, .d-shot.live .d-close { display: inline-block; }

.d-missing { display: none; }
/* img/linkclip.jpg 가 없으면 자리 표시로 전환 — 파일만 추가하면 자동 복구 */
.d-shot.missing { border-style: dashed; border-color: rgba(233, 231, 224, 0.3); box-shadow: none; }
.d-shot.missing img { display: none; }
.d-shot.missing .d-missing {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; font-size: 12px; color: var(--dim); letter-spacing: 0.1em;
}

/* 블랭키 — 홈페이지 대신 메뉴바 */
.d-bar-wrap { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.d-bar {
  display: flex; align-items: center; gap: 14px; padding: 8px 16px;
  background: #1B1E24; border: 1px solid rgba(233, 231, 224, 0.16); border-radius: 9px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  transition: transform .5s var(--ease);
}
.pet { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
.pet img { position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  image-rendering: pixelated; opacity: 0; animation: pf 0.96s steps(1, end) infinite; }
/* .pet img 축약형보다 우선순위가 높아야 delay 가 살아남는다 */
.pet img.pf0 { animation-delay: -0.96s; } .pet img.pf1 { animation-delay: -0.72s; }
.pet img.pf2 { animation-delay: -0.48s; } .pet img.pf3 { animation-delay: -0.24s; }
@keyframes pf { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
.d-bar-cpu, .d-bar-ico { font-size: 11.5px; color: var(--dim); }
.d-bar-sp { flex: 1; }
.d-bar-clk { font-size: 11.5px; color: var(--paper); }
.d-bar-cap { font-size: 11.5px; color: var(--dim); letter-spacing: 0.05em; text-align: center; }

/* 범람 — 이 페이지의 기억점. 전경은 행별 --flood-ink 로 대비 확보.
   라이브(iframe) 중에는 사이트를 조용히 쓰도록 범람을 끈다 */
.dossier:not(.live):hover { background: var(--sig); }
.dossier:not(.live):hover .d-name, .dossier:not(.live):hover .d-no,
.dossier:not(.live):hover .d-desc, .dossier:not(.live):hover .d-plat,
.dossier:not(.live):hover .d-link, .dossier:not(.live):hover .d-bar-cap {
  color: var(--flood-ink, var(--ink));
}
.dossier:not(.live):hover .lamp {
  background: var(--flood-ink, var(--ink)); box-shadow: none; animation: none;
}
.dossier:not(.live):hover .d-link { transform: translateX(6px); }
.dossier:not(.live):hover .d-shot {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 44px 90px rgba(0, 0, 0, 0.55);
}
.dossier:not(.live):hover .d-bar { transform: translateY(-3px); }
/* 라이브 중에도 정보 칸에 손을 올리면 범람은 살아 있다 — 사이트 조작(iframe 위)에선 조용히 */
.dossier.live:has(> .d-rowlink:hover) { background: var(--sig); }
.dossier.live:has(> .d-rowlink:hover) .d-name, .dossier.live:has(> .d-rowlink:hover) .d-no,
.dossier.live:has(> .d-rowlink:hover) .d-desc, .dossier.live:has(> .d-rowlink:hover) .d-plat,
.dossier.live:has(> .d-rowlink:hover) .d-link {
  color: var(--flood-ink, var(--ink));
}
.dossier.live:has(> .d-rowlink:hover) .lamp {
  background: var(--flood-ink, var(--ink)); box-shadow: none; animation: none;
}
.dossier.live:has(> .d-rowlink:hover) .d-link { transform: translateX(6px); }
/* 키보드 포커스에도 같은 범람 (:has 미지원 브라우저는 기본 아웃라인만) */
.dossier:not(.live):has(.d-rowlink:focus-visible) { background: var(--sig); }
.dossier:not(.live):has(.d-rowlink:focus-visible) .d-info { color: var(--flood-ink, var(--ink)); }
.dossier:not(.live):has(.d-rowlink:focus-visible) .d-info > * { color: inherit; }

/* ── 공정 ── */
.process { padding-top: clamp(56px, 9vh, 84px); }
.process .line { margin: 20px var(--gutter) 0; }
.line {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.line li {
  padding: 26px 18px 30px;
  border-left: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 8px;
}
.line li:first-child { border-left: none; }
.node { font-size: 11px; color: var(--dim); letter-spacing: 0.1em; }
.line strong { font-size: 17px; font-weight: 700; }
.line em { font-style: normal; font-size: 12.5px; color: var(--dim); line-height: 1.6; }

/* ── 연락 ── */
.contact { padding-top: clamp(56px, 9vh, 84px); padding-bottom: clamp(56px, 9vh, 96px); }
.contact-lede { font-size: 14.5px; color: var(--dim); margin: 16px var(--gutter) 22px; }
.mail {
  display: inline-block; margin: 0 var(--gutter);
  font-size: clamp(20px, 3.8vw, 40px); font-weight: 500; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 8px;
  transition: border-color .3s, color .3s;
}
.mail:hover { border-color: var(--paper); }

.foot {
  padding: 22px var(--gutter) 30px;
  border-top: 1px solid var(--hair);
  font-size: 11px; color: var(--dim); letter-spacing: 0.1em;
}

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.d-rowlink:focus-visible { outline-offset: -2px; }

/* ── 드래프팅 눈금자 (데스크탑만) ── */
.ruler {
  position: fixed; left: 26px; top: 0; bottom: 0; width: 9px; z-index: 40;
  background:
    repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px 60px);
  background-size: 5px 100%, 9px 100%;
  background-repeat: repeat-y;
  opacity: 0.8; pointer-events: none;
}
.ruler-read {
  position: fixed; left: 18px; bottom: 16px; z-index: 41;
  font-size: 9.5px; color: var(--dim); letter-spacing: 0.12em;
  writing-mode: vertical-rl; pointer-events: none;
}
@media (max-width: 1100px) { .ruler, .ruler-read { display: none; } }

/* ── 스크롤 리빌 — JS 가 있을 때만 숨긴다(스크립트가 죽어도 내용은 보이게) ── */
html.js .reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.in { opacity: 1; transform: translateY(0); }

/* 실패 안전장치 — 로드 애니메이션이 돌지 않아도 히어로·티커는 시간이 지나면 보이게
   (정상 동작 시엔 fill-mode 종료값과 같아 아무 변화가 없다) */
html.settled .reveal-load, html.settled .mask-in {
  opacity: 1; transform: none;
}

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .hero-notes { display: none; }
}
@media (max-width: 860px) {
  .nav-clock { display: none; }
  .hero-wave { height: 120px; }
  .dossier { grid-template-columns: 1fr; gap: 22px; }
  .dossier:nth-child(even) .d-rowlink { order: 1; }
  .dossier:nth-child(even) .d-shot,
  .dossier:nth-child(even) .d-bar-wrap { order: 2; }
  .d-shot { transform: none; }
  .tick-set { gap: 32px; padding-right: 32px; }
  .tick-set span { font-size: 11px; }
  .line { grid-template-columns: 1fr; }
  .line li { border-left: none; border-top: 1px solid var(--hair); }
  .line li:first-child { border-top: none; }
}

/* ── 모션 최소화 ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mask-in, .reveal-load { animation: none; transform: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lamp { animation: none; }
  .tick-track { animation: none; }
  .pet img { animation: none; }
  .pet .pf0 { opacity: 1; }
  .d-shot, .d-bar, .d-link { transition: none; }
}