/* Sovasta Compass — compass.sovetrust.com (43번째)
 *
 * 밝은 테마. 색은 분위기에 맞춰 다시 잡았다.
 *
 * 왜 파랑인가: 이 솔루션이 하는 일은 **방향을 잃지 않게 하는 것**이다. 나침반과
 * 신뢰의 색을 쓴다. 다만 Sovasta 의 민트(#2ECC9A)를 그대로 쓰지 않는다 — 그 색은
 * 흰 배경 위 작은 글자에서 4.5:1 을 넘지 못해 13개 사이트가 F-platform-007 로
 * 떨어졌다. 여기서는 **처음부터** 글자로 쓸 색과 배경으로 쓸 색을 나눠 둔다.
 *
 *   --ink-*    글자용. 흰 배경에서 4.5:1 을 넘는 것만.
 *   --fill-*   배경·테두리용. 밝아도 된다.
 *
 * 상태 세 가지(정렬됨·살짝 벗어남·되돌림)는 색만으로 구분하지 않는다. 색각
 * 이상인 사람에게 초록/노랑/빨강은 같은 회색이다. 글자와 아이콘을 함께 쓴다.
 */

:root {
  --bg: #f6f9fc;
  --surface: #ffffff;
  --border: #dbe4ee;
  --border-strong: #b9c7d6;

  /* 글자용 — 전부 흰 배경에서 4.5:1 이상 */
  --ink: #0f1b2a;
  --ink-dim: #4a5a6e;
  --ink-brand: #0f4c81;
  --ink-link: #1d4ed8;
  --ink-ok: #046c4e;
  --ink-warn: #92500e;
  --ink-bad: #a81f1f;

  /* 배경·테두리용 — 밝아도 된다 */
  --fill-brand: #0f4c81;
  --fill-brand-soft: #eaf2fa;
  --fill-ok-soft: #e7f6ef;
  --fill-warn-soft: #fdf3e3;
  --fill-bad-soft: #fdecec;
  --fill-sky: #38bdf8;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(15, 76, 129, .08);
  --shadow-lift: 0 10px 32px rgba(15, 76, 129, .14);
  --maxw: 1180px;
  --topbar-h: 62px;
}

* { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--topbar-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--ink-link); }

/* 키보드만 쓰는 사람에게 지금 어디인지 보여야 한다. */
:focus-visible { outline: 3px solid var(--ink-link); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ───────────────────────────── 상단 고정 메뉴 */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; }
.brand small { display: block; font-weight: 500; font-size: .7rem; color: var(--ink-dim); letter-spacing: 0; }
.brand .mark { width: 32px; height: 32px; border-radius: 50%; }

.topnav { display: flex; gap: 2px; margin-left: auto; }
.topnav a {
  padding: 8px 13px; border-radius: 999px; text-decoration: none;
  color: var(--ink-dim); font-size: .92rem; font-weight: 600;
}
.topnav a:hover { background: var(--fill-brand-soft); color: var(--ink-brand); }
.topnav a[aria-current="true"] { background: var(--fill-brand); color: #fff; }

.topbar-right { display: flex; align-items: center; gap: 8px; }

.lang-select {
  font: inherit; font-size: .86rem; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink);
}

/* <a> 에도 .btn 을 쓴다. 링크 기본 밑줄과 색을 끄지 않으면 버튼에 밑줄이 그어진다. */
.btn {
  text-decoration: none;
  font: inherit; font-size: .92rem; font-weight: 700; line-height: 1;
  padding: 10px 17px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: var(--fill-brand); color: #fff;
}
.btn:hover { background: #0c3d68; }
.btn.ghost { background: var(--surface); color: var(--ink-brand); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--fill-brand-soft); }
.btn.sm { padding: 7px 13px; font-size: .84rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--fill-brand-soft); color: var(--ink-brand);
  font-size: .78rem; font-weight: 700;
  border: 1px solid var(--border);
}

/* ───────────────────────────── 레이아웃 */
main { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(14px, 3vw, 28px); }
section.band { padding: clamp(34px, 6vw, 68px) 0; }
section.band + section.band { border-top: 1px solid var(--border); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}

/* ───────────────────────────── 히어로 */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; }
.hero .lead { font-size: 1.08rem; color: var(--ink-dim); max-width: 62ch; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* 마스코트 자리. 사장님이 주실 파일로 교체한다 (public/sovi.svg 또는 .png).
   그 전까지는 글자 없는 장식이므로 alt="" 로 두어 스크린리더가 읽지 않게 한다. */
.mascot-card { text-align: center; }
.mascot-card img { width: min(210px, 60vw); height: auto; }
.mascot-say {
  display: inline-block; margin-top: 12px; padding: 9px 15px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow); font-size: .88rem; color: var(--ink-dim);
}

/* ───────────────────────────── 네 층 */
.layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.layer-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--fill-brand); color: #fff; font-weight: 800; font-size: .86rem; margin-bottom: 10px;
}
.layer h3 { margin-bottom: 6px; }
.layer p { color: var(--ink-dim); font-size: .93rem; margin: 0; }

/* ───────────────────────────── 데모 */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.field textarea {
  width: 100%; font: inherit; font-size: .93rem; padding: 11px 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); resize: vertical; min-height: 92px;
}
.readout { display: grid; gap: 12px; }

/* 벗어난 정도. 색만으로 말하지 않는다 — 숫자와 글자를 함께 둔다. */
.gauge { height: 10px; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.gauge > i { display: block; height: 100%; width: 0; background: var(--fill-brand); transition: width .35s ease; }
.verdict { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.verdict .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.v-ok   .dot { background: var(--ink-ok); }   .v-ok   { color: var(--ink-ok); }
.v-warn .dot { background: var(--ink-warn); } .v-warn { color: var(--ink-warn); }
.v-bad  .dot { background: var(--ink-bad); }  .v-bad  { color: var(--ink-bad); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.checklist li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; }
.checklist .tick { font-weight: 800; flex: none; }

.injected {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--fill-warn-soft); border: 1px solid #f0d9ae;
  font-size: .88rem; color: var(--ink-warn);
}
.injected code { background: #fff; padding: 1px 5px; border-radius: 4px; color: var(--ink); }

/* ───────────────────────────── 감사 기록 */
.trail { display: grid; gap: 10px; }
.trail-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; align-items: start; }
.trail-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.trail-body { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; background: var(--surface); }
.trail-body code { font-size: .78rem; color: var(--ink-dim); word-break: break-all; }
.trail-when { font-size: .76rem; color: var(--ink-dim); }

/* ───────────────────────────── 요금제 */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan .price { font-size: 2rem; font-weight: 800; color: var(--ink-brand); margin: 6px 0 2px; }
.plan .per { font-size: .84rem; color: var(--ink-dim); }
.plan ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 7px; font-size: .92rem; }
.plan li::before { content: "·"; color: var(--ink-brand); font-weight: 800; margin-right: 7px; }
.plan.featured { border-color: var(--fill-brand); box-shadow: var(--shadow-lift); }

/* ───────────────────────────── 하단 고정 메뉴 */
.footer { border-top: 1px solid var(--border); background: var(--surface); padding: 26px 0 34px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.footer a { color: var(--ink-dim); text-decoration: none; font-size: .9rem; }
.footer a:hover { color: var(--ink-brand); text-decoration: underline; }
.footer .sep { color: var(--border-strong); }
.footer .who { margin-left: auto; font-size: .84rem; color: var(--ink-dim); }

/* ───────────────────────────── 좁은 화면
   가로 스크롤이 생기면 오른쪽 글자가 잘린다 (F-platform-003). */
@media (max-width: 900px) {
  .hero, .demo { grid-template-columns: 1fr; }
  .topnav { display: none; }
  .footer .who { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 번역이 아직 없는 언어를 골랐을 때의 안내 띠.
 *
 * 왜 필요한가: 틀 파일은 값이 영어다. 띠가 없으면 사용자는 "이 언어는 번역이
 * 있는데 왜 영어가 나오지" 하고 기다리거나, 번역이 끝난 줄 안다. 둘 다 거짓이다.
 * 조용히 영어를 내보내는 것이 가장 나쁘다. */
.i18n-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px clamp(14px, 3vw, 28px);
  background: var(--fill-warm, #fdf8ee);
  border-bottom: 1px solid var(--border);
  font-size: .85rem; color: var(--ink-dim);
}
.i18n-note b { color: var(--ink); }