/* 제품 상세 페이지 v2 — v2/tools/build-pages.py 가 v2/mockups/base.css + product.css 에서 생성. 직접 편집하지 말 것. */
/* 공통 베이스: 폰트·리셋·토큰. 목업별 룩은 각 파일 안에서 정의 */
@font-face { font-family: 'Sui Generis'; src: url('/fonts/sui_generis/Sui Generis Rg.otf') format('opentype'); font-weight: 400; font-display: swap; }
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --accent: #00d4aa;
  --accent-rgb: 0, 212, 170;
  --bg: #050c0a;
  --bg-2: #0a1612;
  --bg-3: #102018;
  --bg-4: #172a24;
  --text: #eef2f0;
  --text-2: #b6c1bc;
  --text-3: #7d8a84;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Sui Generis', 'Pretendard Variable', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 제품 상세 페이지 공통 스타일 (v2). 제품별 액센트는 body[data-product]로 스코프. */

body[data-product="senvas"]  { --accent: #00d4aa; --accent-rgb: 0, 212, 170;  --on-accent: #04120e; }
body[data-product="senbrix"] { --accent: #ff19d2; --accent-rgb: 255, 25, 210; --on-accent: #1a0314; }
body[data-product="senbrino"]{ --accent: #fb923c; --accent-rgb: 251, 146, 60; --on-accent: #1c0c02; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }

/* header */
.hd { position: sticky; top: 0; z-index: 10; background: rgba(5,12,10,0.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.hd .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.hd img { height: 26px; width: auto; }
.hd nav { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--text-2); }
.hd nav a:hover { color: var(--text); }
.hd .cta { padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13.5px; }
@media (max-width: 720px) { .hd nav a:not(.cta) { display: none; } }

/* hero */
.hero { padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 88px); }
.hero .grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
@media (max-width: 860px) { .hero .grid { grid-template-columns: 1fr; } }
.name { font-family: var(--display); font-size: 16px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; }
h1 { margin-top: 18px; font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.lead { margin-top: 18px; font-size: 17px; color: var(--text-2); max-width: 40ch; }
.cta-row { margin-top: 32px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.link { font-size: 15px; color: var(--text-2); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.link:hover { color: var(--text); border-color: var(--text); }
.hero img { border-radius: 12px; }
.hero img.shot { border: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }

/* generated hero art — 가장자리를 페이지 배경으로 녹임 */
.hero { overflow: hidden; }
.hero .grid:has(img.gen) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.hero .grid > * { min-width: 0; }
.hero img.gen { border-radius: 0; width: 100%; transform: scale(1.5) translateX(8%); transform-origin: 50% 50%; }
@media (max-width: 860px) {
  .hero { padding-top: clamp(40px, 8vw, 64px); }
  .hero .grid, .hero .grid:has(img.gen) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero img.gen { transform: scale(1.12); transform-origin: 50% 0; margin: 16px 0 -6%; }
  .hero .lead { max-width: none; }
}

/* ladder art (inline SVG) */
.hero .art { border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.hero .art svg { display: block; width: 100%; height: auto; }
.ld-rail { stroke: rgba(255,255,255,0.35); stroke-width: 3; stroke-linecap: round; }
.ld-off { stroke: rgba(255,255,255,0.22); fill: none; stroke-width: 2; stroke-linecap: round; }
.ld-on { stroke: var(--accent); fill: none; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.7)); }
.ld-flow { stroke-dasharray: 5 11; stroke-width: 3; opacity: 0.9; animation: ldflow 1.4s linear infinite; }
@keyframes ldflow { to { stroke-dashoffset: -32; } }
.ld-label { font-family: var(--mono); font-size: 10.5px; fill: rgba(255,255,255,0.4); }
.ld-label.on { fill: rgba(255,255,255,0.85); }
.ld-block { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.22); stroke-width: 1.5; }
.ld-block.on { fill: rgba(var(--accent-rgb), 0.1); stroke: var(--accent); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.5)); }
@media (prefers-reduced-motion: reduce) { .ld-flow { animation: none; } }

/* facts strip */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip .wrap { display: flex; flex-wrap: wrap; }
.strip .wrap > div { flex: 1 1 200px; padding: 18px 24px 18px 0; }
.strip small { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--text-3); }
.strip b { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }

/* blog preview sections */
.sec { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0; }
.sec:first-of-type { border-top: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.sec-head h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.01em; }
.sec-head .idx { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-right: 14px; letter-spacing: 0.1em; }
.sec-head .more { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.sec-head .more:hover { color: var(--accent); }

.row { display: grid; grid-template-columns: 168px 1fr auto; gap: 24px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.rows > .row:last-child { border-bottom: 1px solid var(--line); }
.row .th { aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--bg-3); }
.row .th img { width: 100%; height: 100%; object-fit: cover; }
.row h3 { font-size: 17px; font-weight: 600; line-height: 1.4; }
.row:hover h3 { color: var(--accent); }
.row p { margin-top: 6px; font-size: 14px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.row .meta { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .row { grid-template-columns: 112px 1fr; } .row .meta { display: none; } .row p { -webkit-line-clamp: 2; font-size: 13px; } }
.empty { border: 1px dashed var(--line-2); border-radius: 12px; padding: 32px; text-align: center; color: var(--text-3); font-size: 14.5px; }
.empty b { display: block; color: var(--text-2); font-weight: 600; margin-bottom: 6px; }

/* contact + footer */
.ask { border-top: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0; text-align: center; }
.ask h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; }
.ask p { color: var(--text-2); margin-top: 12px; }
.ask .cta-row { justify-content: center; }
.ft { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--text-3); font-size: 12.5px; line-height: 1.8; }
.ft b { color: var(--text-2); font-weight: 600; }

/* mobile: 사양 띠 2열 (기본 규칙보다 뒤에 와야 이김) */
@media (max-width: 640px) {
  .strip .wrap > div { flex: 1 1 40%; padding: 14px 12px 14px 0; }
  .strip b { font-size: 14px; }
}

/* header lang toggle */
.hd nav a.lang { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; }
@media (max-width: 720px) { .hd nav a.lang { display: inline-block; } }