/* =========================================================
   dk-brand — styles.css
   기준: 11_스타일가이드.md (CI CONCEPT 01 "Clarity Connects Value")
   여기 없는 값은 임의로 만들지 말 것.
   ========================================================= */

/* ---------- 1. 토큰 ---------- */
:root {
  /* 브랜드 5색 */
  --navy:   #0F1B2D;
  --cobalt: #1E4ED8;
  --slate:  #64748B;   /* 아이콘·장식 전용. 텍스트 사용 금지 */
  --gray:   #E7E8EA;   /* 작은 요소 전용. 넓은 면 금지 */
  --sand:   #F3EFE7;   /* 기본 배경 — 페이지 전체 단일 바탕 */

  /* 파생 UI 토큰 */
  --slate-text: #475569;
  --line:       #DCD6CA;
  --surface:    #FCFAF6;

  /* 서체 */
  --font-serif: "Noto Serif KR", serif;
  --font-sans:  "Pretendard", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-en:    "Manrope", var(--font-sans);

  /* 간격 — 8px 배수 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s12: 96px;

  --wrap-text: 720px;
  --wrap-wide: 1080px;
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 3. 타이포 ---------- */
h1, h2 { font-family: var(--font-serif); font-weight: 600; }
h1 { font-size: 32px; line-height: 1.32; letter-spacing: -0.02em; }
h2 { font-size: 24px; line-height: 1.40; letter-spacing: -0.02em; }
h3 { font-family: var(--font-sans); font-weight: 600;
     font-size: 19px; line-height: 1.50; letter-spacing: -0.01em; }

.lead { font-size: 17px; }
.small { font-size: 14px; line-height: 1.6; letter-spacing: 0; color: var(--slate-text); }

/* 영문 라벨 (섹션 eyebrow) */
.eyebrow {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-text);
  margin-bottom: var(--s2);
}

@media (min-width: 768px) {
  body { font-size: 17px; }
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
  .eyebrow { font-size: 13px; }
}

/* ---------- 4. 코너 브래킷 (Frame 모티프) ----------
   CI를 CI답게 만드는 반복 장치. 한 화면 최대 2개.        */
.dk-mark {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  padding-right: .34em;
  text-decoration: none;
}
.dk-mark::after {
  content: "";
  position: absolute;
  top: -.06em;
  right: 0;
  width: .40em;
  height: .40em;
  border-top: 2px solid var(--cobalt);
  border-right: 2px solid var(--cobalt);
}

/* 섹션 제목 옆 작은 마커 */
.bracket-marker::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--s1);
  border-top: 2px solid var(--cobalt);
  border-right: 2px solid var(--cobalt);
  vertical-align: 2px;
}

/* 배경색에 의존하지 않는 4면 프레임 */
.dk-frame {
  --f: 12px;
  --t: 2px;
  background:
    linear-gradient(var(--cobalt) 0 0) left  top    / var(--f) var(--t) no-repeat,
    linear-gradient(var(--cobalt) 0 0) left  top    / var(--t) var(--f) no-repeat,
    linear-gradient(var(--cobalt) 0 0) right top    / var(--f) var(--t) no-repeat,
    linear-gradient(var(--cobalt) 0 0) right top    / var(--t) var(--f) no-repeat,
    linear-gradient(var(--cobalt) 0 0) left  bottom / var(--f) var(--t) no-repeat,
    linear-gradient(var(--cobalt) 0 0) left  bottom / var(--t) var(--f) no-repeat,
    linear-gradient(var(--cobalt) 0 0) right bottom / var(--f) var(--t) no-repeat,
    linear-gradient(var(--cobalt) 0 0) right bottom / var(--t) var(--f) no-repeat;
}

/* ---------- 5. 레이아웃 ---------- */
.wrap { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 20px; }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin: 0 auto; padding: 0 20px; }

section { padding: var(--s8) 0; }
@media (min-width: 768px) { section { padding: var(--s12) 0; } }

.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- 5-1. 섹션 배경 리듬 ----------
   크림(sand) ↔ 웜화이트(surface) 미세 교차 + 네이비 반전 1회.
   전부 스타일가이드 5색 안. 색 대비가 아주 얕아 시선을 뺏지 않으면서
   섹션 경계만 인지되게 한다. */
.sec-sand    { background: var(--sand); }
.sec-gray    { background: var(--gray); }
.sec-surface { background: var(--surface); }

/* 섹션 톤이 바뀌면 그 안의 카드·구분선도 따라간다 */
.sec-gray .case-card,
.sec-gray .column-card,
.sec-gray .card         { background: var(--sand); }
.sec-gray .rule-mark::after { background: var(--gray); }
.sec-gray .case-thumb   { background: var(--surface); }

.sec-invert  { background: var(--navy); color: var(--sand); }
.sec-invert h2,
.sec-invert h3,
.sec-invert strong { color: var(--sand); }
.sec-invert p      { color: var(--gray); }   /* 네이비 위 14.6:1 */
.sec-invert .eyebrow { color: var(--gray); opacity: .8; }
/* 네이비 위에서는 코발트가 2.7:1로 묻힌다 → 브래킷을 sand로 반전 */
.sec-invert .bracket-marker::before,
.sec-invert .pullquote::before {
  border-color: var(--sand);
}
/* 네이비 섹션 안의 카드·버튼·구분선도 함께 반전 */
.sec-invert .column-card {
  background: transparent;
  border-color: rgba(243, 239, 231, .28);
}
.sec-invert .column-card:hover { border-color: var(--sand); }
.sec-invert .column-card::after { border-color: var(--sand); }
.sec-invert .column-card h3 { color: var(--sand); }
.sec-invert .column-card p,
.sec-invert .column-card .meta { color: var(--gray); }
.sec-invert .subscribe { border-top-color: rgba(243, 239, 231, .28); }
.sec-invert .btn-secondary { border-color: var(--sand); color: var(--sand); }
.sec-invert .btn-secondary:hover { background: rgba(243, 239, 231, .12); color: var(--sand); }
/* 네이비 위에서는 코발트 버튼이 2.67:1로 묻힌다 → sand 반전 (15.6:1) */
.sec-invert .btn-primary { background: var(--sand); color: var(--navy); }
.sec-invert .btn-primary:hover { background: var(--gray); color: var(--navy); }
.sec-invert :focus-visible { outline-color: var(--sand); }

/* ---------- 5-2. 브래킷 장식 (CI 프레임 모티프 재사용) ---------- */

/* (a) 브래킷 구분선 — 헤어라인 위에 꺾쇠 하나 */
.rule-mark {
  position: relative;
  height: 1px;
  background: var(--line);
  margin: var(--s6) 0;
}
.rule-mark::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--cobalt);
  border-right: 2px solid var(--cobalt);
  background: inherit;
}
.sec-sand .rule-mark::after    { background: var(--sand); }
.sec-surface .rule-mark::after { background: var(--surface); }

/* (b) 인용 블록 — 좌상단 브래킷 */
.pullquote {
  position: relative;
  margin: var(--s6) 0;
  padding: var(--s3) 0 var(--s3) var(--s4);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}
.pullquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--cobalt);
  border-left: 2px solid var(--cobalt);
}
@media (min-width: 768px) {
  .pullquote { font-size: 26px; padding-left: var(--s6); }
  .pullquote::before { width: 22px; height: 22px; }
}

/* ---------- 6. 헤더 ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
/* 로고 락업 — 보드 원본 구조를 따름:
   [DK 모노그램 + 코발트 브래킷] + [DK BRAND / 태그라인 세로 쌓기]
   브래킷은 모노그램에만 붙는다. 워드마크에는 붙이지 않는다. */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand .monogram {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.brand .lockup { display: flex; flex-direction: column; gap: 4px; }
.brand .wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--navy);
}
.brand .tagline {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--slate-text);
}
@media (min-width: 768px) {
  .brand .monogram { font-size: 32px; }
  .brand .wordmark { font-size: 18px; }
  .brand .tagline  { font-size: 11px; }
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s3); }
.site-nav a {
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover { border-bottom-color: var(--cobalt); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--cobalt); }

/* 메뉴 5개 — 좁은 화면에서는 헤더를 세로로 쌓고 간격을 줄인다 */
@media (max-width: 639px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 13px; }
}

/* 좁은 화면에서는 태그라인만 숨겨 헤더 밀도를 관리 */
@media (max-width: 479px) { .brand .tagline { display: none; } }

/* ---------- 7. Hero 슬라이더 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--s8);
  background: var(--sand);
  transition: background-color .6s ease, color .6s ease;
}
.hero .wrap-text { position: relative; z-index: 1; }

.hero .kicker {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-text);
  margin-bottom: var(--s3);
  max-width: 40em;
  transition: color .6s ease;
}

/* 슬라이드 — grid 겹침으로 높이를 가장 긴 슬라이드에 맞춘다.
   높이가 고정되므로 아래 CTA·닷이 전환 중에 흔들리지 않는다. */
.hero-slides { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;            /* 접근성 트리·탭 순서에서도 제외 */
  transition: opacity .5s ease, visibility .5s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide h1 { margin: 0; transition: color .6s ease; }
.hero-slide .hero-sub {
  margin-top: var(--s2);
  font-size: 17px;
  color: var(--slate-text);
  transition: color .6s ease;
}

/* CTA — 슬라이드 바깥에 고정. 전환과 무관하게 항상 같은 자리, 항상 클릭 가능 */
.hero-actions { margin-top: var(--s6); }

/* 닷 네비게이션 — 시각 크기 10px, 실제 터치 타깃 44px */
.hero-dots { display: flex; margin-top: var(--s2); margin-left: -12px; }
.dot {
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none;
  cursor: pointer; position: relative;
}
.dot::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--slate);
  transition: background-color .2s ease, border-color .2s ease;
}
.dot[aria-current="true"]::before { background: var(--cobalt); border-color: var(--cobalt); }
.dot:hover::before { border-color: var(--cobalt); }

/* 배경 장식 — CI 프레임 심볼 확대·연하게.
   슬라이드마다 위치·크기가 미세하게 움직여 전환에 리듬을 준다. */
.hero-deco {
  position: absolute;
  pointer-events: none;
  border-top: 3px solid var(--cobalt);
  border-right: 3px solid var(--cobalt);
  opacity: .10;
  width: 260px; height: 260px;
  top: -40px; right: -70px;
  transition: top .8s ease, right .8s ease, transform .8s ease,
              opacity .6s ease, border-color .6s ease;
}
@media (min-width: 768px) {
  .hero-deco { width: 420px; height: 420px; top: -60px; right: -90px; }
}
.hero[data-slide="2"] .hero-deco { top: 10px;  right: -110px; transform: scale(1.12); }
.hero[data-slide="3"] .hero-deco { top: -80px; right: -40px;  transform: scale(1.28); }

/* 3번 슬라이드 — 네이비 반전. 히어로 전체가 함께 뒤집힌다. */
.hero[data-slide="3"] { background: var(--navy); color: var(--sand); }
.hero[data-slide="3"] h1 { color: var(--sand); }
.hero[data-slide="3"] .kicker,
.hero[data-slide="3"] .hero-sub { color: var(--gray); }
/* 네이비 위 코발트는 2.67:1로 묻힘 → CTA·닷·장식을 sand 로 반전 */
.hero[data-slide="3"] .btn-primary { background: var(--sand); color: var(--navy); }
.hero[data-slide="3"] .btn-primary:hover { background: var(--gray); color: var(--navy); }
.hero[data-slide="3"] .hero-deco { border-color: var(--sand); opacity: .14; }
.hero[data-slide="3"] .dot::before { border-color: var(--gray); }
.hero[data-slide="3"] .dot[aria-current="true"]::before {
  background: var(--sand); border-color: var(--sand);
}
.hero[data-slide="3"] :focus-visible { outline-color: var(--sand); }

/* 모바일에서는 자연스럽게 흐르도록 강제 줄바꿈 해제 */
.br-desktop { display: none; }
@media (min-width: 768px) { .br-desktop { display: inline; } }

/* 자동전환을 끈 사용자는 전환 애니메이션도 즉시 처리 */
@media (prefers-reduced-motion: reduce) {
  .hero, .hero-slide, .hero-deco { transition: none; }
}

/* ---------- 8. 본문 블록 ---------- */
.prose > * + * { margin-top: var(--s3); }
.prose strong { font-weight: 600; }

.stack > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s6); }

/* 실적 리스트 */
.proof-list li {
  padding-left: var(--s3);
  position: relative;
  margin-top: var(--s2);
}
.proof-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 8px; height: 1px;
  background: var(--slate);
}

/* 카드 */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s3);
}
@media (min-width: 768px) { .card { padding: var(--s4); } }

.card-grid {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}

/* ---------- 8-1. 대표 사례 카드 ----------
   사진 없이도 구조가 서게 설계. 이미지 확보 시 .case-thumb 안의
   플레이스홀더만 <img>로 교체하면 되고 레이아웃은 그대로 유지된다. */
.case-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.sec-surface .case-card { background: var(--sand); }

/* 이미지 자리 — 16:10 비율 고정. 사진이 들어와도 높이가 안 흔들린다. */
.case-thumb {
  aspect-ratio: 16 / 10;
  background: var(--gray);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* 원본이 모바일 세로 스크린샷이라 상단(각 사이트의 히어로) 기준으로 맞춘다 */
.case-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-thumb .ph {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-text);
}
/* 플레이스홀더 상태 표시용 점선 프레임 */
.case-thumb.is-empty::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--line);
  border-radius: 2px;
}

.case-body {
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.case-kind {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-text);
}

/* 상태 배지 — 썸네일 좌상단 오버레이.
   운영 중 = 실선·진한 색 / 컨셉 시안 = 점선·옅은 색 */
.badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 9px;
  border-radius: 3px;
}
.badge-live {
  background: var(--navy);
  color: var(--sand);
  border: 1px solid var(--navy);
}
.badge-concept {
  background: rgba(252, 250, 246, .92);
  color: var(--slate-text);
  border: 1px dashed var(--slate);
}
/* 사례 설명 — 링크 없는 텍스트 카드용. 실선 외곽선만 (채움 없음) */
.badge-case {
  background: transparent;
  color: var(--slate-text);
  border: 1px solid var(--slate-text);
}
/* 본문 안에 들어가는 배지 — 이미지 위에 얹지 않는다.
   원본 화면 텍스트와 겹쳐 지저분해지는 것을 막기 위한 기본형. */
.badge-inline { position: static; }
.badge-inline.badge-concept { background: transparent; }

/* 제목 줄 — 제목과 배지를 나란히. 좁으면 배지가 다음 줄로 내려간다. */
.case-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--s2);
}
.case-title h3 { margin: 0; }

/* 동의 대기 안내 — 해당 카드에만 */
.case-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate-text);
  padding: 6px 8px;
  border-left: 2px solid var(--line);
}
.case-body h3 { font-size: 18px; }
.case-desc { font-size: 15px; color: var(--slate-text); line-height: 1.6; }

.case-foot {
  margin-top: auto;
  padding-top: var(--s2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  border-top: 1px solid var(--line);
}
.case-status { font-size: 13px; color: var(--slate-text); }
.case-arrow {
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1;
  color: var(--slate);
}
/* 링크가 생기면 .case-card 를 <a> 로 바꾸고 이 상태가 살아난다 */
a.case-card { text-decoration: none; color: inherit; transition: border-color .15s ease; }
a.case-card:hover { border-color: var(--cobalt); }
a.case-card:hover .case-arrow { color: var(--cobalt); }

/* 텍스트 전용 카드 — 클릭 가능한 포트폴리오 카드와 시각적으로 구분.
   썸네일·화살표가 없고, 왼쪽 세로선으로 "설명"임을 표시한다. */
.case-card.is-text {
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
}
.sec-gray .case-card.is-text,
.sec-sand .case-card.is-text { background: transparent; }
.case-card.is-text .case-body { padding-top: var(--s3); }
.case-card.is-text .case-foot { border-top-style: dashed; }
.case-card.is-text .case-status { font-style: italic; }

/* 카테고리 설명 */
.cat-desc { color: var(--slate-text); margin-top: var(--s1); }

/* ---------- 8-2. 상세형 카드 (layout: feature) ---------- */
.case-card.is-feature {
  grid-column: 1 / -1;                 /* 그리드 전체 폭 사용 */
  background: transparent;
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
}
.feature-inner { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .feature-inner { grid-template-columns: 1fr auto; align-items: start; }
}

/* 문제 / 해결 / 기술 */
.spec-row { display: flex; gap: var(--s2); margin-top: var(--s2); }
.spec-k {
  flex: none; width: 42px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  color: var(--navy); padding-top: 2px;
}
.spec-v { font-size: 15px; line-height: 1.7; color: var(--slate-text); }

/* ---------- 8-3. 폰 화면 슬라이드쇼 ---------- */
.shots {
  position: relative;
  width: 200px;
  aspect-ratio: 540 / 1080;            /* 스크린샷 원본 비율 */
  margin: var(--s3) auto var(--s3);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
@media (min-width: 768px) {
  .shots { width: 220px; margin: var(--s3); }
}
.shots img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0;
  transition: opacity .45s ease;       /* 크로스페이드 */
}
.shots img.is-active { opacity: 1; }

.shots-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 5px;
  z-index: 2; pointer-events: none;
}
.shots-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(15, 27, 45, .25);
  transition: background-color .2s ease;
}
.shots-dots span.is-active { background: var(--cobalt); }

/* 화면 전체를 덮는 투명 버튼 — 클릭 시 라이트박스 */
.shots-open {
  position: absolute; inset: 0;
  z-index: 3;
  border: 0; padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.shots-open:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .shots img { transition: none; }
}

/* ---------- 8-4. 라이트박스 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 27, 45, .92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6) var(--s3);
}
.lightbox img {
  max-width: min(92vw, 420px);
  max-height: 84vh;
  border-radius: 8px;
  background: var(--surface);
}
.lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  border: 1px solid rgba(243, 239, 231, .4);
  border-radius: 4px;
  background: transparent; color: var(--sand);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(243, 239, 231, .12); }
.lightbox-nav {
  width: 44px; height: 44px; flex: none;
  border: 0; background: transparent;
  color: var(--sand); font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox-nav:hover { color: #FFFFFF; }
.lightbox-count {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-family: var(--font-en); font-size: 13px; letter-spacing: .06em;
  color: var(--gray);
}
.lightbox :focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* ---------- 9. 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--s3);
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
@media (min-width: 768px) { .btn { height: 48px; } }

/* Primary — 채워진 코발트. 한 화면에 1개만. */
.btn-primary { background: var(--cobalt); color: #FFFFFF; }
.btn-primary:hover { background: var(--navy); color: #FFFFFF; }
.btn-primary:active { background: var(--navy); transform: translateY(1px); }
.btn-primary[disabled] {
  background: var(--gray); color: var(--slate-text);
  cursor: not-allowed; transform: none;
}

/* Secondary — 외곽선 */
.btn-secondary {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-secondary:hover { background: var(--surface); }

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* ---------- 10. 링크 ---------- */
.prose a, .link {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover, .link:hover { color: var(--navy); }

/* ---------- 11. 칼럼 섹션 ---------- */
.column-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s3);
  text-decoration: none;
  display: block;
  transition: border-color .15s ease;
}
.column-card:hover { border-color: var(--cobalt); }
/* 우상단 브래킷 */
.column-card::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--cobalt);
  border-right: 2px solid var(--cobalt);
}
.column-card .meta {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate-text);
  margin-bottom: var(--s1);
}
.column-card h3 { margin-bottom: var(--s1); padding-right: var(--s3); }
.column-card p { color: var(--slate-text); font-size: 15px; line-height: 1.7; }

/* 칼럼 목록 페이지 — 카드 세로 나열 */
.column-list { display: grid; gap: var(--s2); }
@media (min-width: 768px) { .column-list { gap: var(--s3); } }

.subscribe {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.subscribe p { font-size: 15px; color: var(--slate-text); }

/* ---------- 12. 폼 ---------- */
.form { margin-top: var(--s4); }
.field + .field { margin-top: var(--s3); }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--s1);
}
.field input, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px var(--s2);
  font-family: var(--font-sans);
  font-size: 16px; /* iOS 자동 확대 방지 */
  color: var(--navy);
}
.field input:focus, .field textarea:focus {
  border-color: var(--cobalt);
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }

.form-status { margin-top: var(--s2); font-size: 15px; min-height: 1.6em; }
.form-status[data-state="ok"]   { color: var(--navy); }
.form-status[data-state="err"]  { color: #A3271F; }

/* 스팸 트랩 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 13. 푸터 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s6) 0;
  font-size: 14px;
  color: var(--slate-text);
}
.site-footer .rows { display: flex; flex-direction: column; gap: var(--s3); }
.site-footer .brand { pointer-events: none; }
.site-footer .brand .monogram { font-size: 22px; }
.site-footer .brand .wordmark { font-size: 13px; }
@media (min-width: 768px) {
  .site-footer .brand .monogram { font-size: 24px; }
  .site-footer .brand .wordmark { font-size: 14px; }
}
.site-footer a { color: var(--slate-text); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--navy); }

/* ---------- 14. 칼럼 본문 (article) ---------- */
.article-head { padding: var(--s8) 0 var(--s4); }
/* 톤 밴드가 이어질 때 도입부 아래 여백이 겹치지 않게 */
.article-head.sec-sand + .story-band.sec-sand { padding-top: 0; }
.sec-invert .back-link { color: var(--gray); }
.sec-invert .back-link:hover { color: var(--sand); }
.article-head .meta {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate-text);
  margin-bottom: var(--s2);
}
.article-head h1 { margin-bottom: var(--s2); }
.article-head .dek {
  font-size: 17px;
  color: var(--slate-text);
  line-height: 1.7;
  padding-left: var(--s2);
  border-left: 2px solid var(--cobalt);
}
.article-body { padding-bottom: var(--s8); }

/* 스토리 페이지 톤 밴드 — 배경이 바뀌는 구간마다 하나씩 */
.story-band { padding: var(--s8) 0; }
@media (min-width: 768px) { .story-band { padding: var(--s12) 0; } }
.story-band > .wrap-text > *:first-child { margin-top: 0; }
.story-band h2 { margin: 0 0 var(--s3); }
.story-band h2 + p { margin-top: 0; }
.story-band p + p { margin-top: var(--s3); }
.story-band p { line-height: 1.85; }
.story-band strong { font-weight: 600; }

.article-body h2 { margin: var(--s8) 0 var(--s3); }
.article-body p + p { margin-top: var(--s3); }
.article-body p { line-height: 1.85; }
.article-body strong { font-weight: 600; }
.article-body em { font-style: italic; color: var(--slate-text); }

.article-cta {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.back-link {
  display: inline-block;
  margin-top: var(--s6);
  font-size: 14px;
  color: var(--slate-text);
  text-decoration: none;
}
.back-link:hover { color: var(--navy); }

/* ---------- 15. 전자명함 (card.html) ---------- */
.card-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6) 20px;
}
.namecard {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--s6) var(--s4);
  text-align: center;
}
.namecard .wordmark-lg {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: 0.06em;
  display: inline-block;
  position: relative;
  padding-right: .34em;
}
.namecard .wordmark-lg::after {
  content: "";
  position: absolute;
  top: -.02em; right: 0;
  width: .36em; height: .36em;
  border-top: 2px solid var(--cobalt);
  border-right: 2px solid var(--cobalt);
}
.namecard .role { margin-top: var(--s2); font-size: 15px; color: var(--slate-text); }
.namecard .contact { margin-top: var(--s6); text-align: left; }
.namecard .contact li { display: flex; gap: var(--s2); padding: var(--s1) 0; font-size: 15px; }
.namecard .contact .k {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--slate-text);
  width: 24px;
  flex: none;
  padding-top: 3px;
}
.namecard .contact a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.namecard .contact a:hover { border-bottom-color: var(--cobalt); }
.namecard .actions { margin-top: var(--s6); display: grid; gap: var(--s2); }

/* QR 블록 — 흰 타일 위에 네이비 QR (대비 17.9:1) */
.qr-block {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.qr-label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-text);
  margin-bottom: var(--s2);
}
.qr-tile {
  display: inline-block;
  background: #FFFFFF;          /* 콰이엇 존은 반드시 순백 — 스캔 안정성 */
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  line-height: 0;
}
.qr-tile img { width: 160px; height: 160px; }
.qr-caption { margin-top: var(--s2); font-size: 13px; color: var(--slate-text); }