/* =========================================================================
   detail.css — 프로젝트 상세 페이지 공통 스타일
   index.html 과 동일한 디자인 토큰을 공유한다.
   ========================================================================= */

:root {
  --main: #0969da;
  --main-strong: #0860c4;
  --sub: #0e7490;
  --bg: #fbfbfd;
  --text: #0d1117;
  --divider: #e6e8eb;
  --surface: #ffffff;
  --muted: #57606a;
  --muted-soft: #8b949e;
  --tint: #f0f6ff;
  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1040px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 24px 60px -28px rgba(15, 23, 42, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== DARK THEME ===== */
:root[data-theme="dark"] {
  --main: #4c9dff; --main-strong: #388bfd; --sub: #39c5cf;
  --bg: #0b0e14; --text: #e6edf3; --divider: #232a33; --surface: #141a22;
  --muted: #9aa4af; --muted-soft: #6e7681; --tint: #12233a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --main: #4c9dff; --main-strong: #388bfd; --sub: #39c5cf;
    --bg: #0b0e14; --text: #e6edf3; --divider: #232a33; --surface: #141a22;
    --muted: #9aa4af; --muted-soft: #6e7681; --tint: #12233a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  }
}
body { transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }

/* Cross-page view transitions (smooth navigation where supported) */
@view-transition { navigation: auto; }

/* Theme toggle (fixed) */
.theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--divider); background: var(--surface); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.3s var(--ease);
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--main); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "IBM Plex Sans KR", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 한글은 기본 규칙(break-word)으로 두면 단어 중간에서 잘려, 화면 폭이 바뀔 때마다
   줄바꿈 위치가 제멋대로 달라진다. 어절 단위로만 끊어 데스크톱·모바일의
   텍스트 레이아웃을 같은 모양으로 유지한다. */
h1, h2, h3, p, span, a, li, td, th, .detail-title, .detail-tagline {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;   /* 마지막 줄에 한 단어만 남는 것(고아 줄)을 브라우저가 알아서 막는다 */
}
/* 제목처럼 짧은 덩어리는 balance — 여러 줄이 될 때 줄 길이를 스스로 고르게 나눈다.
   폭이 바뀌어도 매번 알아서 다시 계산하므로 기기별로 손볼 일이 없다. */
.detail-title, .detail-tagline, .feature-title, .fi-card-title, .comments h2, .fi-head h2 {
  text-wrap: balance;
}

a { color: inherit; }

/* ===== TOP BAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  /* 편집 모드에서는 서식 툴바·자간 스테퍼·미리보기 버튼까지 붙어서 한 줄에 안 들어간다.
     항상 접히게 두어야 데스크톱에서도 넘쳐 잘리지 않는다. */
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 10px;
  padding: 10px clamp(16px, 5vw, 40px);
  background: var(--surface);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider);
}
.topbar .home {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.topbar .home:hover { color: var(--main); }
.topbar .crumb {
  font-size: 13px;
  color: var(--muted-soft);
  font-family: "IBM Plex Mono", monospace;
}
.topbar .spacer { flex: 1; }

/* Admin controls (mirror index.html behavior) */
.admin-area { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.user-email {
  font-size: 12px;
  color: var(--muted-soft);
  /* 계정 주소가 길어도 상단바를 밀어내지 않게 */
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-btn, .save-btn {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
/* 관리자 전용 — 평소엔 묻어 있다가 가져다 대면 드러난다 (메인의 admin-btn 과 같은 규칙) */
.admin-btn {
  background: transparent;
  border-color: transparent;
  color: var(--muted-soft);
  opacity: 0.45;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), background 0.2s var(--ease);
}
.admin-btn:hover,
.admin-btn:focus-visible {
  opacity: 1;
  border-color: var(--divider);
  color: var(--main);
  background: var(--tint);
}
.save-btn {
  border-color: var(--main);
  color: #fff;
  background: var(--main);
  display: none;
}
.save-btn:hover { background: var(--main-strong); }
body.edit-mode .save-btn { display: inline-block; }

/* 편집 모드 토글. 관리자로 로그인했을 때만 보이며(detail.js 가 hidden 을 벗긴다),
   꺼도 배지는 남아 있어야 다시 켤 수 있다. */
.edit-badge {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--main);
  background: var(--tint);
  border: 1px solid var(--main);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.edit-badge[hidden] { display: none; }
.edit-badge:hover { background: var(--main); color: #fff; }
/* 편집을 끈 상태 = 방문자에게 보이는 화면. 배지도 조용하게. */
.edit-badge.is-off {
  background: transparent;
  color: var(--muted-soft);
  border-color: var(--divider);
  font-weight: 400;
}
.edit-badge.is-off:hover { color: var(--main); border-color: var(--main); background: var(--tint); }

/* ===== 편집 도구 (편집 모드 전용) =====
   detail.js 가 상단바의 '편집 모드' 배지 왼쪽에 끼워넣는다.
   글자를 드래그해 선택한 뒤 밑줄/색을 적용한다. */
.edit-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
}
.edit-toolbar .et-btn {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.edit-toolbar .et-btn:hover:not(:disabled) { border-color: var(--main); color: var(--main); background: var(--tint); }
.edit-toolbar .et-btn:disabled,
.edit-toolbar .et-swatch:disabled { opacity: 0.35; cursor: default; }
.edit-toolbar .et-sep { width: 1px; height: 16px; background: var(--divider); }
/* 자간 묶음 — 라벨 + 단계 버튼 */
.edit-toolbar .et-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-soft);
  white-space: nowrap;
}
/* −/+ 스테퍼 (한글의 자간 조절과 같은 조작) */
.edit-toolbar .et-ls {
  font-size: 13px;
  line-height: 1;
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 현재 자간·크기 값 — 누르면 기본값으로 되돌린다 */
.edit-toolbar .et-ls-val,
.edit-toolbar .et-fs-val {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  min-width: 38px;
  text-align: center;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-soft);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.edit-toolbar .et-ls-val.is-set,
.edit-toolbar .et-fs-val.is-set { color: var(--main); background: var(--tint); border-color: var(--main); }
.edit-toolbar .et-ls-val:hover:not(:disabled),
.edit-toolbar .et-fs-val:hover:not(:disabled) { border-color: var(--main); color: var(--main); }
.edit-toolbar .et-ls-val:disabled,
.edit-toolbar .et-fs-val:disabled { opacity: 0.35; cursor: default; }
.edit-toolbar .et-swatch {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.edit-toolbar .et-swatch:hover:not(:disabled) { transform: scale(1.18); }
/* 서식 툴바는 늘 아랫줄로 내려 한 줄을 통째로 쓴다 — 버튼이 많아 가로로 끼면 다 깨진다 */
.edit-toolbar { order: 10; flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 760px) {
  .topbar .crumb { display: none; } /* 좁은 화면에서는 경로 표시를 접는다 */
  /* 편집 모드에서는 툴바까지 붙어 상단바가 두세 줄이 된다. 좁은 화면에서 그걸 계속
     붙박아두면 화면의 1/4 을 잡아먹으므로, 이때만 고정을 푼다(스크롤하면 올라간다). */
  body.edit-mode .topbar { position: static; }
}

/* 아이콘 크기 조절 — 편집 모드에서 헤드라인 바로 아래에 붙는다 */
.icon-size-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted-soft);
}
.icon-size-ctl input[type="range"] { width: 140px; }
.icon-size-ctl .icon-size-val {
  font-family: "IBM Plex Mono", monospace;
  min-width: 42px;
}

/* 포인트 색(라벨·번호) — 아이콘 크기 조절 바로 아래 같은 톤으로 붙는다 */
.accent-ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--muted-soft);
}
.accent-ctl label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.accent-ctl input[type="color"] {
  width: 30px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 5px;
  background: none;
  cursor: pointer;
}
.accent-ctl .accent-reset {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 1px solid var(--divider);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
}
.accent-ctl .accent-reset:hover { color: var(--text); border-color: var(--muted-soft); }

/* ===== DEVICE PREVIEW (편집 모드 전용) =====
   같은 페이지를 지정한 폭의 iframe 으로 띄운다. 폭만 CSS 로 좁히면 미디어 쿼리는
   여전히 데스크톱 폭을 보기 때문에 모바일 레이아웃이 나오지 않는다. iframe 은
   자기 폭이 곧 뷰포트라 미디어 쿼리가 실제로 모바일로 걸린다. */
.dp-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--main);
  background: var(--tint);
  color: var(--main);
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.dp-btn:hover { background: var(--main); color: #fff; }
body:not(.edit-mode) .dp-btn { display: none; }

.dp-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 24px;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.dp-overlay[hidden] { display: none; }
.dp-overlay.open { opacity: 1; pointer-events: auto; }

.dp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 10px 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--divider);
  flex: none;
}
.dp-label { font-size: 13px; font-weight: 600; }
.dp-note {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--muted-soft);
  white-space: nowrap;
}
.dp-size {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dp-size:hover { border-color: var(--main); color: var(--main); }
.dp-size.active { background: var(--main); border-color: var(--main); color: #fff; }
.dp-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.dp-close:hover { color: var(--main); border-color: var(--main); }

/* 기기 폭이 화면보다 크면 JS 가 transform: scale 로 줄인다 (레이아웃은 그대로) */
.dp-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.dp-frame {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7);
  transform-origin: center center;
  flex: none;
}
.dp-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ===== LAYOUT ===== */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
}

/* ===== HERO ===== */
.detail-hero {
  padding: clamp(32px, 4vw, 52px) 0 clamp(22px, 3vw, 32px);
}
.detail-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  /* 포인트 색은 편집 모드에서 바꿀 수 있다 (detail.js applyAccents).
     지정하지 않으면 테마 색을 그대로 따른다. */
  color: var(--eyebrow-color, var(--sub));
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.detail-hero .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eyebrow-color, var(--sub));
}
/* 앱 아이콘 + 제목을 한 줄로. 아이콘 없는 프로젝트는 이 블록을 빼면 그만이다. */
.detail-headline {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: 14px;
}
.detail-icon {
  flex: 0 0 auto;
  /* 편집모드에서 슬라이더로 --icon-scale 을 바꾼다(저장값). 기본 1 = 원래 크기.
     clamp 를 그대로 곱하므로 화면 크기에 따른 반응형은 유지된다. */
  width: calc(clamp(76px, 8.5vw, 116px) * var(--icon-scale, 1));
  height: auto;
  /* SVG 자체가 rx=20/96 으로 둥글다. 여기서 또 깎으면 미세하게 어긋난
     이중 모서리가 생겨 자리마다 아이콘 모양이 달라 보인다. */
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}
.detail-headline .detail-title { margin: 0; }
@media (max-width: 560px) {
  .detail-headline { gap: 12px; }
}

.detail-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 100%;
}
.detail-tagline {
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--muted);
  max-width: 620px;
  margin: 0 0 26px;
  line-height: 1.5;
}
/* 스택·상태와 라이브·GitHub 버튼을 한 줄에 둔다.
   버튼을 따로 아래 줄에 두면 오른쪽이 통째로 비어 히어로가 헐거워진다.
   좁아지면 버튼 묶음이 아랫줄로 접힌다. */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-bottom: 28px;
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.detail-meta .stack {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted-soft);
}
.detail-meta .status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  color: var(--muted);
}
/* 상태값은 전부 영문 소문자로 통일한다: planned → in progress → beta → live */
.detail-meta .status[data-status="live"]        { color: var(--sub);  border-color: var(--sub);  background: rgba(14, 116, 144, 0.06); }
.detail-meta .status[data-status="beta"]        { color: #d29922; border-color: #d29922; background: rgba(210, 153, 34, 0.08); }
.detail-meta .status[data-status="in progress"] { color: var(--main); border-color: var(--main); background: var(--tint); }
.detail-meta .status[data-status="planned"]     { color: var(--muted); }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* 링크가 비어 있으면 방문자에게는 버튼 자체를 숨긴다 (편집 모드에서는 보인다) */
body:not(.edit-mode) .cta[data-link-empty] { display: none; }
/* 버튼이 하나도 없으면 줄 자체를 없앤다 — 안 그러면 빈 flex 항목이 gap 만큼 자리를 먹는다 */
.cta-row[hidden] { display: none; }

/* CTA 링크 입력 (편집 모드 전용) — detail.js 가 .cta-row 아래에 붙인다 */
/* URL 입력칸은 .detail-actions 의 flex 항목이 되므로 한 줄을 통째로 차지하게 한다 */
.cta-link-edit { display: none; gap: 8px; flex-basis: 100%; flex-direction: column; max-width: 520px; }
body.edit-mode .cta-link-edit { display: flex; }
.cta-link-edit label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted-soft);
}
.cta-link-edit label > span { flex: 0 0 66px; }
.cta-link-edit input {
  flex: 1;
  min-width: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  padding: 7px 11px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.cta-link-edit input:focus { outline: none; border-color: var(--main); }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 옆에 놓인 스택·상태 글자(12px)와 균형이 맞도록 살짝 줄였다 */
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cta.primary { background: var(--main); color: #fff; }
.cta.primary:hover { background: var(--main-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cta.ghost { border: 1px solid var(--divider); color: var(--muted); }
.cta.ghost:hover { border-color: var(--main); color: var(--main); transform: translateY(-2px); }

/* ===== 히어로 키네틱 타이포 (오버레이) =====
   옆에 나란히 두면 제목을 가리므로, 아예 히어로 전체를 덮게 한다.
   한 번 재생되고 끝나면 사라지면서 본래 히어로에 자리를 넘긴다.
   애니메이션의 마지막 그림은 hero-5e.js 가 실제 로고·제목 위치에 맞춰 놓는다. */
/* 무대 높이(약 720px)에 맞춰 히어로가 커지므로, 내용을 세로 가운데에 둔다.
   위쪽에 붙여두면 애니메이션 마지막 그림도 따라 올라가 위로 치우쳐 보인다. */
.detail-hero.has-hero-media {
  position: relative;
  display: flex;
  align-items: center;
  /* 재생이 끝나면 JS 가 min-height 를 놓아준다. 그때 툭 줄지 않게 부드럽게. */
  transition: min-height 0.6s var(--ease);
  /* 재생이 끝난 뒤 CTA 줄과 기능 섹션 사이가 84px 이나 떠서 허전했다.
     히어로 아래 패딩을 줄여 42px 로 (절반) 맞춘다. */
  padding-bottom: 8px;
}
.detail-hero.has-hero-media + .features { padding-top: 10px; }
.detail-hero.has-hero-media > .wrap { width: 100%; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  transition: opacity 0.7s var(--ease);
}
/* 무대를 오버레이 한가운데에 둔다. 좌표계를 660×372 로 못 박아야
   내부 위치 계산(px 고정)이 어긋나지 않는다.
   무대는 비율(660:372)을 지키므로 창 비율에 따라 좌우나 위아래에 띠가 생긴다.
   가로를 꽉 채우려면 세로를 잘라야 하는데 그러면 캡션·진행바가 날아간다.
   그래서 자르지 않고, 오버레이 배경을 무대와 같은 톤으로 깔아 띠를 안 보이게 한다. */
.hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06070a;
}
.hero-media .k5 {
  width: 660px;
  height: 372px;
  aspect-ratio: auto;
  flex: none;
  transform-origin: center center;
}
/* 재생이 끝나면 오버레이는 사라지고 본래 히어로가 드러난다 */
.detail-hero.k5-done .hero-media { opacity: 0; pointer-events: none; }
/* 재생 중에는 본래 히어로 내용을 감춰 겹쳐 보이지 않게 */
.detail-hero.has-hero-media .hero-left { opacity: 0; transition: opacity 0.7s var(--ease); }
.detail-hero.k5-done .hero-left { opacity: 1; }

/* 다시 보기 — 오른쪽 가운데 */
.k5-replay {
  /* 화면 기준 고정. 히어로 기준으로 두면 무대가 레터박스될 때
     버튼이 좌우 빈 띠 안으로 들어가 보이지 않는다. */
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(8px);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  animation: k5ReplayIn 0.5s var(--ease) 0.35s forwards;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.k5-replay[hidden] { display: none; }
.k5-replay:hover { color: var(--main); border-color: var(--main); }
.k5-replay-ico { font-size: 15px; line-height: 1; }
@keyframes k5ReplayIn { to { opacity: 1; } }

/* 건너뛰기 — 재생 중에만. 페이지를 붙잡아 두므로 빠져나갈 길을 항상 열어둔다 */
.k5-skip {
  /* 화면 기준 고정 (재생 중에는 스크롤이 잠겨 있어 안전하다) */
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 13, 20, 0.55);
  backdrop-filter: blur(8px);
  color: #cfd8e6;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.k5-skip[hidden] { display: none; }

/* 소리 켜기 — 건너뛰기 왼쪽. 기본은 음소거다. */
.k5-sound {
  position: fixed;
  right: 132px;
  bottom: 28px;
  z-index: 60;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 13, 20, 0.55);
  backdrop-filter: blur(8px);
  color: #cfd8e6;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.k5-sound[hidden] { display: none; }
.k5-sound:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.k5-sound[aria-pressed="true"] { color: #fff; border-color: var(--main); }
.k5-skip:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }

/* 좁은 화면에서는 오버레이를 쓰지 않는다 — 축소되면 글자가 안 읽히고 영상도 무겁다 */
/* 예전에는 900px 이하에서 통째로 숨겼다. 무대가 660×372 고정 좌표계라
   폰에서 통째로 축소되면 캡션이 7px 까지 줄어 못 읽었기 때문이다.
   지금은 hero-5e.js 가 760px 미만에서 세로형(390×660) 좌표계로 바꿔
   영상을 위, 글자를 아래로 배치하므로 폰에서도 읽힌다. */
@media (max-width: 460px) {
  .k5-skip, .k5-replay { right: 14px; font-size: 12px; }
  .k5-skip { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media { display: none; }
  .detail-hero.has-hero-media .hero-left { opacity: 1; }
}

/* ===== FEATURE SECTIONS ===== */
.features { padding: clamp(12px, 2vw, 24px) 0 clamp(32px, 5vw, 56px); }
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(24px, 4vw, 40px) 0;
  border-top: 1px solid var(--divider);
}
.feature:first-child { border-top: 0; }
/* Alternate sides */
.feature:nth-child(even) .feature-media { order: 2; }
.feature:nth-child(even) .feature-text  { order: 1; }

.feature-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--num-color, var(--main));
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.feature-num::after {
  content: " / 시연";
  color: var(--muted-soft);
}
/* 제목과 슬로건이 붙어 보이던 문제 — 크기·굵기·간격 세 축을 함께 벌린다.
   한 축만 건드리면(예: 간격만) 여전히 같은 덩어리로 읽힌다. */
.feature-title {
  /* 좁은 화면에서 clamp 하한까지 내려가면 슬로건(16.5px)과 다시 붙어 보인다.
     하한을 22px 로 잡아 어느 폭에서든 1.33배 이상 차이를 유지한다. */
  font-size: clamp(22px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  flex: 1;
}

/* 제목 줄 — 제목과 펼침 버튼이 한 줄에 마주 본다.
   줄 전체가 클릭 영역이라 동그라미 하나만 겨냥할 필요가 없다. */
.feature-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}
body:not(.edit-mode) .feature-head:not(.no-toggle) { cursor: pointer; }
/* 줄 어디에 손을 얹어도 버튼이 반응해서, 여기가 눌리는 곳임을 알린다 */
body:not(.edit-mode) .feature-head:not(.no-toggle):hover .feature-more {
  border-color: var(--main);
  background: var(--tint);
}
body:not(.edit-mode) .feature-head:not(.no-toggle):hover .feature-more::before,
body:not(.edit-mode) .feature-head:not(.no-toggle):hover .feature-more::after {
  background: var(--main);
}
/* 슬로건 — 접혀 있을 때 보이는 한 줄. 본문보다 굵고 크고 밝게 해서
   먼저 눈에 들어오게 한다. 본문과 역할이 다르니 생김새도 달라야 한다. */
.feature-lead {
  font-size: 16.5px;
  font-weight: 500;   /* 700 인 제목과 붙어 보이지 않게. 본문(400)보다는 여전히 굵다 */
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 본문 — 눌러야 펼쳐진다 */
.feature-desc {
  display: block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), margin 0.4s var(--ease);
}
.feature.desc-open .feature-desc {
  max-height: 44em;
  opacity: 1;
  margin-top: 12px;
}
/* 편집 모드에서는 항상 펼쳐 둔다 — 안 보이면 고칠 수가 없다 */
body.edit-mode .feature-desc {
  max-height: none;
  opacity: 1;
  margin-top: 12px;
}

/* 펼침 버튼 — 글자 없이 동그란 화살표 하나.
   기능 목록 카드(.fi-card-toggle)와 같은 어법을 쓴다. */
.feature-more {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;   /* 제목이 길어져도 찌그러지지 않는다 */
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.25s var(--ease);
}
.feature-more[hidden] { display: none; }
/* 편집 중에는 본문이 늘 펼쳐져 있다 — 아무 일도 안 하는 버튼은 치운다 */
body.edit-mode .feature-more { display: none; }
/* 아래를 향한 갈매기표 */
.feature-more::before,
.feature-more::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--muted);
  transition: background 0.2s var(--ease);
}
.feature-more::before { left: 8px;  transform: translateY(-50%) rotate(45deg); }
.feature-more::after  { right: 8px; transform: translateY(-50%) rotate(-45deg); }
/* 방향(⌄/⌃)이 상태를 말하므로 hover 로 위치까지 흔들지 않는다 — 색만 바뀐다 */
.feature-more:hover {
  border-color: var(--main);
  background: var(--tint);
}
.feature-more:hover::before,
.feature-more:hover::after { background: var(--main); }
.feature-more:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
/* 펼치면 화살표가 위를 향한다 */
.feature.desc-open .feature-more { transform: rotate(180deg); }

/* Media (video facade OR image) */
.feature-media { min-width: 0; }
.media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--tint), var(--surface));
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.media img.thumb,
.media img.media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media img.media-img { cursor: default; }
.media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.media .playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(13, 17, 23, 0.68);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
  pointer-events: none;
}
.media:hover .playbtn { transform: translate(-50%, -50%) scale(1.08); background: var(--main); }
.media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--muted-soft);
  cursor: default;
  text-align: center;
  padding: 0 12px;
}

/* Media controls (edit mode only): 영상/사진 토글 + URL 입력 */
.media-controls { display: none; margin-top: 10px; }
body.edit-mode .media-controls { display: block; }
.media-type { display: flex; gap: 6px; margin-bottom: 8px; }
.type-btn {
  font: inherit;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.type-btn.active { color: #fff; background: var(--main); border-color: var(--main); }
.media-url {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.media-url:focus { outline: none; border-color: var(--main); }

/* Feature remove + add (edit mode only) */
.feature-remove {
  display: none;
  margin-top: 16px;
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #e5484d;
  background: var(--surface);
  color: #e5484d;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.feature-remove:hover { background: #e5484d; color: #fff; }
body.edit-mode .feature-remove { display: inline-block; }

#addFeatureBtn {
  display: none;
  margin: 8px auto 0;
  font: inherit;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px dashed var(--main);
  background: var(--tint);
  color: var(--main);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
#addFeatureBtn:hover { background: #e4efff; }
body.edit-mode #addFeatureBtn { display: block; }

/* ===== FEATURE INDEX (검색형 기능 목록) ===== */
.feature-index { padding: 0 0 clamp(32px, 5vw, 56px); }
.fi-head { margin-bottom: 16px; }
.fi-head h2 {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 5px;
}
.fi-head .sub { font-size: 13px; color: var(--muted-soft); margin: 0; }

.fi-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fi-search { position: relative; flex: 1; min-width: 220px; }
.fi-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-soft);
  pointer-events: none;
  transition: color 0.2s var(--ease);
}
.fi-search:focus-within .fi-search-icon { color: var(--main); }
#fiSearch {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#fiSearch:focus { outline: none; border-color: var(--main); box-shadow: 0 0 0 3px var(--tint); }
#fiSearch::placeholder { color: var(--muted-soft); }
.fi-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted-soft);
  white-space: nowrap;
}

.fi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}
.fi-chip:hover { border-color: var(--main); color: var(--main); transform: translateY(-1px); }
.fi-chip.active { color: #fff; background: var(--main); border-color: var(--main); }

.fi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  perspective: 900px;
}
.fi-card {
  position: relative;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--divider) 55%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: default;
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), grid-column 0.2s var(--ease);
  animation: fiIn 0.35s var(--ease) both;
}
.fi-card.has-detail { cursor: pointer; padding-right: 40px; }
.fi-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--main) 30%, var(--divider)); }
.fi-card:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.fi-card.expanded {
  grid-column: 1 / -1;
  border-color: var(--main);
  box-shadow: var(--shadow-md);
}

/* 펼침 토글 — classiq FAQ 스타일 원형 +/× 버튼 (닫힘=회색+, 열림=틸×) */
.fi-card-toggle {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--surface);
  pointer-events: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.25s var(--ease);
}
.fi-card-toggle::before,
.fi-card-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--muted-soft);
  transform: translate(-50%, -50%);
  transition: background 0.2s var(--ease);
}
.fi-card-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.fi-card.has-detail:hover .fi-card-toggle { border-color: var(--main); }
.fi-card.expanded .fi-card-toggle {
  background: var(--main);
  border-color: var(--main);
  transform: rotate(45deg);
}
.fi-card.expanded .fi-card-toggle::before,
.fi-card.expanded .fi-card-toggle::after { background: #fff; }

.fi-card-cat {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--sub);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.fi-card-titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 5px;
}
.fi-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.fi-card-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
.fi-card-key {
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--divider);
  color: var(--muted-soft);
  background: var(--bg);
  line-height: 1.5;
}
.fi-card mark { background: var(--tint); color: var(--main); font-weight: 700; border-radius: 3px; padding: 0 1px; }

/* 클릭 시 펼쳐지는 상세 설명 */
.fi-card-detail-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.fi-card.expanded .fi-card-detail-wrap { max-height: 300px; }
.fi-card-detail {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--divider);
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}

.fi-empty { text-align: center; padding: 32px 12px; font-size: 14px; color: var(--muted-soft); }

@keyframes fiIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .fi-grid { grid-template-columns: 1fr; }
  .fi-search-row { flex-direction: column; align-items: stretch; }
  .fi-count { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-card { animation: none; }
  .fi-card-detail-wrap { transition: none; }
}

/* ===== COMMENTS / 후기 ===== */
.comments {
  border-top: 1px solid var(--divider);
  padding: clamp(32px, 5vw, 52px) 0 clamp(28px, 4vw, 40px);
}
.comments h2 {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 5px;
}
.comments .sub {
  font-size: 13px;
  color: var(--muted-soft);
  margin: 0 0 20px;
}
.comment-form {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--divider) 55%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.comment-form input,
.comment-form textarea {
  font: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--main); background: var(--surface); }
.comment-form .name-row { display: flex; gap: 10px; align-items: center; }
.comment-form .name-row input { max-width: 220px; }
.comment-form textarea { min-height: 84px; }
.comment-form .submit-row { display: flex; justify-content: flex-end; }
.comment-submit {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
  border: 0;
  background: var(--main);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.comment-submit:hover { background: var(--main-strong); }
.comment-submit:disabled { opacity: 0.6; cursor: default; }

.comment-list { display: grid; gap: 14px; }
.comment-empty { color: var(--muted-soft); font-size: 14px; }
.comment {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--divider) 55%, transparent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.comment-name { font-weight: 600; font-size: 14px; }
.comment-time { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted-soft); }
.comment-del {
  margin-left: auto;
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #e5484d;
  background: transparent;
  color: #e5484d;
  cursor: pointer;
}
.comment-del:hover { background: #e5484d; color: #fff; }
.comment-text { margin: 0; font-size: 14px; color: var(--text); line-height: 1.6; word-break: break-word; }

/* Admin reply */
.comment-reply {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 2px solid var(--main);
  background: var(--tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.reply-label { font-size: 12px; font-weight: 600; color: var(--main); }
.reply-text { margin: 4px 0 0; font-size: 14px; color: var(--text); line-height: 1.6; word-break: break-word; }
.reply-edit { display: none; margin-top: 12px; flex-direction: column; gap: 8px; }
body.edit-mode .reply-edit { display: flex; }
.reply-input {
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 52px;
}
.reply-input:focus { outline: none; border-color: var(--main); }
.reply-btn {
  align-self: flex-start;
  font: inherit;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--main);
  background: var(--surface);
  color: var(--main);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.reply-btn:hover { background: var(--main); color: #fff; }

/* ===== EDITABLE FIELDS ===== */
body.edit-mode [data-editable] {
  outline: 1px dashed var(--divider);
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-color 0.2s var(--ease);
}
body.edit-mode [data-editable]:hover { outline-color: var(--main); }
body.edit-mode [data-editable]:focus { outline: 2px solid var(--main); background: var(--tint); }

/* ===== FOOTER ===== */
.detail-foot {
  border-top: 1px solid var(--divider);
  padding: 24px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.detail-foot a { font-size: 14px; color: var(--muted); text-decoration: none; }
.detail-foot a:hover { color: var(--main); }
.detail-foot .mono { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted-soft); }

/* ===== TRY IT (앱 임베드 체험) =====
   브라우저 창을 하나 얹어 놓은 모양. 크롬 바는 "이건 원래 따로 도는 앱이고,
   지금은 잠깐 빌려 온 것"이라는 신호다 — 그래서 주소와 새 창 버튼을 늘 보여준다. */
.tryit { padding: 0 0 clamp(32px, 5vw, 56px); }
/* 편집기는 폭이 곧 쓸모다. 본문 폭(1040)보다 조금 더 내준다.
   --tryit-w / --tryit-h 로 덮어쓸 수 있다 — tryit.html 의 크기 실험이 이걸 쓴다. */
.tryit .wrap { max-width: var(--tryit-w, min(1240px, calc(100vw - 48px))); }

.tryit-head { margin-bottom: 16px; }
.tryit-head h2 {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 5px;
}
.tryit-head .sub { font-size: 13px; color: var(--muted-soft); margin: 0; }
.tryit-head .sub strong { color: var(--main); font-weight: 600; }

.tryit-frame {
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* 크롬 바 */
.tryit-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--divider);
  background: var(--bg);
}
.tc-dots { display: flex; gap: 6px; flex: none; }
.tc-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--divider);
}
.tc-url {
  flex: 1;
  min-width: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--muted-soft);
  padding: 3px 10px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.tc-btn {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.tc-btn:hover { color: var(--main); border-color: var(--main); }
.tc-btn.primary { color: #fff; background: var(--main); border-color: var(--main); }
.tc-btn.primary:hover { background: var(--main-strong); border-color: var(--main-strong); }

/* 무대 */
.tryit-stage {
  position: relative;
  height: var(--tryit-h, clamp(560px, 68vh, 780px));
  background: var(--bg);
}
.tryit-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.tryit[data-state="live"] .tryit-iframe { opacity: 1; }

/* 앱이 뜨기 전까지 자리를 지키는 화면. 앱이 뜨면 조용히 사라진다 —
   버튼이 아니라 표시등이다. 누를 것이 없다. */
.tryit-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--text);
  background: var(--bg);
  transition: opacity 0.4s var(--ease);
}
.tryit[data-state="live"] .tryit-placeholder { opacity: 0; pointer-events: none; }
.ts-logo {
  width: 46px; height: 46px;
  opacity: 0.9;
  animation: tryit-breathe 2.4s var(--ease) infinite;
}
.ts-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ts-sub { font-size: 12.5px; color: var(--muted-soft); max-width: 34ch; line-height: 1.55; }
@keyframes tryit-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
/* 끝내 못 띄운 경우 — 숨쉬기를 멈추고 새 창으로 안내한다 */
.tryit[data-state="failed"] .ts-logo { animation: none; opacity: 0.4; }
.tryit[data-state="failed"] .ts-sub a { color: var(--main); text-decoration: underline; text-underline-offset: 3px; }

/* 로딩 — 크롬 바 아래에 가는 진행선 하나. 스피너는 쓰지 않는다 */
.tryit-frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--main);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.tryit { position: relative; }
.tryit[data-state="loading"] .tryit-frame::after {
  opacity: 1;
  animation: tryit-bar 1.6s var(--ease) infinite;
}
@keyframes tryit-bar {
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  100% { transform: scaleX(0);   transform-origin: right; }
}
.tryit-frame { position: relative; }

/* 전체화면일 때는 무대가 화면을 다 쓴다 */
.tryit.is-full .tryit-frame { border-radius: 0; border: 0; height: 100%; display: flex; flex-direction: column; }
.tryit.is-full .tryit-stage { height: auto; flex: 1; }

.tryit-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted-soft);
  line-height: 1.6;
}
.tryit-note strong { color: var(--muted); font-weight: 600; }

/* ===== SCROLL REVEAL / ACTIVE MOTION ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 기능 카드 등장 모션 — "양쪽에서 미끄러져 들어오며 초점이 잡힌다"
   · 미디어: 반대편에서 밀려오며 살짝 확대 + blur 해제 (사진에 초점이 맞는 느낌)
   · 텍스트: 번호 → 제목 → 설명 순으로 0.08s 씩 늦게 올라온다 (stagger)
   과하지 않게 한 번만 재생되고(IntersectionObserver 가 unobserve), 이후엔 정지 상태다. */
.feature .feature-media {
  opacity: 0;
  transform: translateX(44px) scale(0.94);
  filter: blur(8px);
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease), filter 0.75s var(--ease);
  will-change: opacity, transform, filter;
}
.feature:nth-child(even) .feature-media { transform: translateX(-44px) scale(0.94); }
.feature.is-visible .feature-media { opacity: 1; transform: none; filter: none; }

.feature .feature-text > * {
  opacity: 0;
  transform: translate3d(-26px, 14px, 0);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.feature:nth-child(even) .feature-text > * { transform: translate3d(26px, 14px, 0); }
.feature.is-visible .feature-text > * { opacity: 1; transform: none; }
.feature.is-visible .feature-text > *:nth-child(1) { transition-delay: 0.06s; }
.feature.is-visible .feature-text > *:nth-child(2) { transition-delay: 0.14s; }
.feature.is-visible .feature-text > *:nth-child(3) { transition-delay: 0.22s; }
.feature.is-visible .feature-text > *:nth-child(4) { transition-delay: 0.30s; }

/* 번호 앞의 짧은 선이 좌에서 우로 그어진다 — 카드가 "열리는" 신호 */
.feature-num { position: relative; }
.feature-num::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--num-color, var(--main));
  border-radius: 2px;
  transition: width 0.6s var(--ease) 0.3s;
}
.feature.is-visible .feature-num::before { width: 34px; }

/* ===== RESPONSIVE ===== */
/* 좁은 화면에서만 나오는 한 줄. 막지는 않되 말은 해 둔다.
   기본값을 미디어쿼리보다 먼저 둔다 — 뒤에 두면 같은 특정도라 덮어써버린다. */
.tryit-narrow-hint { display: none; margin-top: 6px; color: var(--muted); }

/* 좁은 화면에서도 띄운다. 다만 세로를 조금 더 내준다 —
   폭이 모자란 만큼 캔버스가 위아래로라도 숨을 쉬어야 한다. */
@media (max-width: 900px) {
  .tryit .wrap { max-width: none; }
  .tryit-stage { height: var(--tryit-h, clamp(480px, 70vh, 640px)); }
  .tc-url { display: none; }
  .tryit-narrow-hint { display: block; }
}

@media (max-width: 720px) {
  .feature { grid-template-columns: 1fr; gap: 22px; }
  .feature:nth-child(even) .feature-media { order: 0; }
  .feature:nth-child(even) .feature-text  { order: 0; }
  /* 좁은 화면에서는 좌우 슬라이드 대신 위로만 올라오게 (가로 스크롤 방지) */
  .feature .feature-media,
  .feature:nth-child(even) .feature-media { transform: translateY(26px) scale(0.96); }
  .feature .feature-text > *,
  .feature:nth-child(even) .feature-text > * { transform: translate3d(0, 16px, 0); }
  .feature.is-visible .feature-media,
  .feature.is-visible .feature-text > * { transform: none; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .feature .feature-text > *, .feature .feature-media {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .feature-num::before { width: 34px !important; }
}