/* Dino Studio 홈페이지 공통 — 색 · 글꼴 · 머리 줄 · 바닥 줄 · 단추 · 폼.
 * 어두운 네이비 한 가지 모습으로 정한 사이트 (PTERA 앱의 chrome 색과 같은 계열). 페이지마다 이 파일을 먼저 읽고, 페이지 고유 스타일은 각 페이지에. */
:root {
  color-scheme: dark;
  --bg: #0b1016; --bg2: #121a22; --bg3: #18222b; --ink: #ffffff; --body: #cfd8df; --muted: #8c9aa5; --line: #27323b;
  --signal: #f2c14e; --mint: #4fd1b3; --warn: #d2483a;
  --ui: "Lato", "Noto Sans KR", system-ui, sans-serif; --ko: "Noto Sans KR", "Lato", system-ui, sans-serif; --mono: "Source Code Pro", ui-monospace, monospace;
  --navH: 64px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; word-break: keep-all; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.eyebrow { font: 700 12px/1 var(--mono); letter-spacing: .3em; color: var(--signal); text-transform: uppercase; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--signal); color: #0f1418; padding: 8px 12px; border-radius: 6px; font: 700 14px/1 var(--ui); }
.skip:focus { left: 8px; }

/* 머리 줄 */
.nav { position: sticky; top: 0; z-index: 40; height: var(--navH); background: rgba(11,16,22,.82); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(39,50,59,.7); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 36px; width: auto; }
.brand.big img { height: 56px; }
.foot .made { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.foot .made img { border-radius: 3px; }
.nav ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { display: inline-flex; align-items: center; gap: 7px; height: 32px; text-decoration: none; font: 600 14px/1 var(--ui); color: var(--body); border-bottom: 2px solid transparent; }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }
.nav .btn { height: 38px; padding: 0 16px; font-size: 14px; }
@media (max-width: 640px) { .nav .wrap { gap: 14px; } .nav ul { gap: 14px; } .nav ul a { font-size: 13px; } .nav .btn { display: none; } .brand img { height: 32px; } }

/* 단추 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 23px; font: 700 15px/1 var(--ui); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; }
.btn.p { background: var(--signal); color: #0f1418; }
.btn.g { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn:focus-visible, .nav a:focus-visible, .brand:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* 바닥 줄 */
.foot { border-top: 1px solid var(--line); padding-block: 40px 56px; margin-top: 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; justify-content: space-between; }
.foot p { margin: 14px 0 0; font: 400 13px/1.6 var(--ui); color: var(--muted); max-width: 40ch; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.foot ul a { font: 600 13px/1 var(--ui); color: var(--body); text-decoration: none; }
.foot ul a:hover { color: var(--ink); }
.foot small { display: block; width: 100%; font: 400 12px/1 var(--mono); color: var(--muted); }

/* 시연 요청 폼 (Contact 페이지 · Product 페이지의 창이 같은 모양) */
.dmf h2 { font: 900 clamp(24px, 3vw, 34px)/1.15 var(--ui); letter-spacing: -.02em; margin-top: 12px; }
.dmf > p { font: 400 15px/1.55 var(--ui); color: var(--body); margin: 12px 0 0; max-width: 56ch; }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.dm-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dm-grid label.wide { grid-column: 1 / -1; }
.dm-grid span { font: 700 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.dmf input, .dmf select, .dmf textarea { width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 400 15px/1.3 var(--ui); }
.dmf textarea { height: auto; padding: 10px 12px; resize: vertical; }
.dmf input::placeholder, .dmf textarea::placeholder { color: var(--muted); }
.dmf input:focus-visible, .dmf select:focus-visible, .dmf textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.dmf input[aria-invalid="true"] { border-color: var(--warn); }
.dm-err { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(210,72,58,.14); border: 1px solid rgba(210,72,58,.5); color: #f3b0a8; font: 500 13.5px/1.4 var(--ui); }
.dm-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.dm-foot span { font: 400 12.5px/1.5 var(--ui); color: var(--muted); max-width: 40ch; }
.dm-done p { font: 400 15px/1.55 var(--ui); color: var(--body); margin: 12px 0 0; }
.dm-done h2 { font: 900 clamp(24px, 3vw, 34px)/1.15 var(--ui); margin-top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .dm-grid { grid-template-columns: 1fr; } }