/* 차서랍(CarDrawer) page styles — loaded from inside <main> (build.py replaces <head>).
   Builds on /assets/site.css tokens. Brand: drawer green #0E6A4C, tab amber #F2B01E (fills only), amber text #8A5A00. */

/* sub-pages (pricing, pilot, terms, delete, subprocessors) get no app accent from build.py; set it here */
body:has(.cd) {
  --accent: #0E6A4C;
  --accent-soft: color-mix(in oklab, #0E6A4C 10%, var(--surface));
  --accent-text: #0E6A4C;
  --cd-amber: #F2B01E; --cd-amber-soft: #FFF1CC; --cd-amber-text: #8A5A00; --cd-on-amber: #1F1600;
  --cd-paper: #F6F5F1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:has(.cd) {
    --accent-soft: color-mix(in oklab, #0E6A4C 22%, var(--surface));
    --accent-text: #5ED6A8;
    --cd-amber-soft: #4A3500; --cd-amber-text: #F5C451;
  }
}
:root[data-theme="dark"] body:has(.cd) {
  --accent-soft: color-mix(in oklab, #0E6A4C 22%, var(--surface));
  --accent-text: #5ED6A8;
  --cd-amber-soft: #4A3500; --cd-amber-text: #F5C451;
}

/* build.py gives hand pages body.page-read (720px measure). Product pages use the full width; legal pages a wider measure for tables. */
.page-read main.container > .cd { max-width: none; }
.page-read main.container > .cd-legal { max-width: 900px; }
.cd-legal > section > p, .cd-legal > section > ul, .cd-legal > section > ol, .cd-legal > header > p { max-width: var(--read); }
.cd .cd-section > p, .cd .cd-section > ol, .cd .cd-section > ul:not(.cd-pillars):not(.cd-not):not(.cd-states):not(.shots), .cd .faq, .cd > .hero > p, .cd > p, .cd > ul:not(.cd-plans), .cd > ol { max-width: 46rem; }

.cd .tnum, .cd td.num, .cd .price { font-variant-numeric: tabular-nums; }
.cd section { scroll-margin-top: 80px; }
.cd h2 { margin-top: 0; }
.cd-section { padding: 56px 0 8px; }
.cd-section > .cd-kicker, .cd-kicker { display: block; font-size: .9rem; font-weight: 800; color: var(--accent-text); letter-spacing: .02em; margin-bottom: 6px; }
.cd-section > p.cd-intro { color: var(--ink-2); max-width: 40em; font-size: 1.06rem; }

/* ---------- hero ---------- */
.cd-hero { display: grid; gap: 28px; align-items: center; padding: 28px 0 8px; }
.cd-appline { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cd-appline .app-icon { width: 64px; height: 64px; }
.cd-appline p { margin: 0; line-height: 1.35; }
.cd-appname { font-weight: 800; font-size: 1.15rem; }
.cd-appname span { color: var(--ink-2); font-weight: 700; margin-left: 4px; }
.cd-hero h1 { font-size: clamp(2.3rem, 6.4vw, 3.9rem); line-height: 1.12; margin: 0 0 .3em; }
.cd-hero h1 em { font-style: normal; color: var(--accent-text); }
.cd-hero .lead { font-size: clamp(1.15rem, 2.3vw, 1.42rem); font-weight: 700; margin: 0 0 .6em; }
.cd-hero .cd-body { color: var(--ink-2); max-width: 34em; }
.cd-status { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cd-pill { display: inline-block; font-size: .82rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.cd-pill--amber { background: var(--cd-amber); color: var(--cd-on-amber); }
.cd-promises { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 6px; font-size: .96rem; }
.cd-promises li { margin: 0; padding-left: 26px; position: relative; }
.cd-promises li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 13px; height: 8px; border-left: 2.5px solid var(--accent-text); border-bottom: 2.5px solid var(--accent-text); transform: rotate(-45deg); }
.cd-hero-shot { margin: 0; justify-self: center; position: relative; }
.cd-phone { width: min(330px, 80vw); border-radius: 40px; background: #15201B; padding: 11px; box-shadow: 0 30px 60px -24px rgba(21,32,27,.5); }
.cd-phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.cd-hero-shot figcaption { text-align: center; font-size: .84rem; color: var(--ink-2); margin-top: 12px; }
.cd-tab { position: absolute; top: -16px; right: 46px; width: 64px; height: 30px; border-radius: 9px 9px 0 0; background: var(--cd-amber); z-index: -1; }
@media (min-width: 900px) {
  .cd-hero { grid-template-columns: 1.15fr .85fr; padding: 52px 0 12px; gap: 48px; }
}

/* ---------- problem ---------- */
.cd-problem { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 760px) { .cd-problem { grid-template-columns: repeat(3, 1fr); } }
.cd-problem > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px 20px; }
.cd-problem h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cd-problem p { margin: 0; color: var(--ink-2); }
.cd-case { margin-top: 18px; border-left: 6px solid var(--cd-amber); background: var(--surface); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 16px 20px; }
.cd-case p { margin: 0 0 .4em; }
.cd-case .cd-case-num { font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 800; }
.cd-case .cd-case-num .loss { color: #B42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cd-case .cd-case-num .loss { color: #FF8A7A; } }
:root[data-theme="dark"] .cd-case .cd-case-num .loss { color: #FF8A7A; }
.cd-case small { display: block; color: var(--ink-2); }

/* ---------- pillars ---------- */
.cd-pillars { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: p; }
@media (min-width: 700px) { .cd-pillars { grid-template-columns: 1fr 1fr; } }
.cd-pillars li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px 18px; position: relative; overflow: hidden; }
.cd-pillars li::before { counter-increment: p; content: counter(p); position: absolute; top: 0; right: 20px; width: 30px; height: 38px; border-radius: 0 0 6px 6px; background: var(--cd-amber); color: var(--cd-on-amber); font-weight: 800; display: grid; place-items: end center; padding-bottom: 5px; font-size: .95rem; }
.cd-pillars h3 { margin: 0 0 4px; font-size: 1.12rem; padding-right: 40px; }
.cd-pillars .quote { font-weight: 700; color: var(--accent-text); margin: 0 0 6px; }
.cd-pillars p { margin: 0; color: var(--ink-2); }

/* ---------- screenshots ---------- */
.cd .shots img { height: clamp(380px, 60vw, 520px); }
.cd-shot-note { font-size: .88rem; color: var(--ink-2); }

/* ---------- field states ---------- */
.cd-states { list-style: none; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.cd-states li { margin: 0; }
.cd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 800; border: 1.5px solid; border-radius: 999px; padding: 3px 12px; }
.cd-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cd-chip.empty { background: #EFEEE8; color: #4E5A54; border-color: #C9C8C0; }
.cd-chip.not_checked { background: #FFFFFF; color: #4E5A54; border-color: #7D8882; }
.cd-chip.unreadable { background: #F3E9E3; color: #6B3F2A; border-color: #D9C3B6; }
.cd-chip.suggested { background: #ECE9FA; color: #4B3BA8; border-color: #C9C1F0; }
.cd-chip.needs_review { background: #FFF1CC; color: #6E4A00; border-color: #F2B01E; }
.cd-chip.conflict { background: #FDE3DF; color: #9A1C12; border-color: #F2A497; }
.cd-chip.confirmed { background: #D5EEE3; color: #0B5A40; border-color: #8CCBB0; }
.cd-chip.absent_confirmed { background: #E6EEEA; color: #3C5A4C; border-color: #B5C9BF; }
.cd-chip.not_checked::before { background: transparent; border: 1.5px solid currentColor; }

/* ---------- formula / deadlines ---------- */
.cd-split { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 860px) { .cd-split { grid-template-columns: 1fr 1fr; } }
.cd-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px; min-width: 0; }
.cd-panel h3 { margin-top: 0; }
.cd-formula { font-weight: 800; font-size: 1.08rem; background: var(--accent-soft); border-radius: var(--radius-s); padding: 12px 14px; margin: 0 0 12px; }
.cd-panel table { font-size: .93rem; }
.cd-panel td.num { text-align: right; white-space: nowrap; }
.cd-panel tr.total td { font-weight: 800; border-top: 2px solid var(--line-strong); }

/* ---------- not-do list ---------- */
.cd-not { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cd-not { grid-template-columns: 1fr 1fr; } }
.cd-not li { margin: 0; padding: 10px 0 10px 30px; border-top: 1px solid var(--line); position: relative; }
.cd-not li::before, .cd-not li::after { content: ""; position: absolute; left: 4px; top: 21px; width: 14px; height: 2.5px; background: var(--ink-2); transform: rotate(45deg); }
.cd-not li::after { transform: rotate(-45deg); }

/* ---------- CTA ---------- */
.cd-cta { margin: 56px 0 0; background: #0E6A4C; color: #fff; border-radius: 22px; padding: 30px 26px; display: grid; gap: 18px; position: relative; overflow: hidden; }
.cd-cta::after { content: ""; position: absolute; top: 0; right: 36px; width: 42px; height: 58px; border-radius: 0 0 8px 8px; background: #F2B01E; }
.cd-cta h2 { color: #fff; margin: 0; padding-right: 60px; }
.cd-cta p { margin: 0; color: #E3F2EB; }
.cd-cta ul { margin: 0; color: #E3F2EB; }
.cd-cta a:not(.button) { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
.cd-cta .button { background: #F2B01E; border-color: #F2B01E; color: #1F1600; }
.cd-cta .button--outline { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
@media (min-width: 860px) { .cd-cta { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 38px 40px; } }

/* ---------- pricing ---------- */
.cd-plans { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cd-plans { grid-template-columns: repeat(3, 1fr); } }
.cd-plans > li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.cd-plans > li.featured { border: 2px solid var(--accent-text); position: relative; }
.cd-plans .tag { position: absolute; top: -13px; left: 20px; }
.cd-plans h2 { font-size: 1.25rem; margin: 0; }
.cd-plans .who { color: var(--ink-2); font-size: .94rem; margin: 2px 0 12px; }
.cd-plans .price { white-space: nowrap; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.cd-plans .price small { font-size: .95rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.cd-plans .vat { color: var(--ink-2); font-size: .88rem; margin: 2px 0 12px; }
.cd-plans ul { padding-left: 1.1em; margin: 0; }
.cd-plans ul li { margin: .2em 0; }

/* ---------- pilot form ---------- */
.cd-form-slot { background: var(--surface); border: 2px dashed var(--line-strong); border-radius: var(--radius-m); padding: 26px 22px; margin: 16px 0; }
.cd-form-slot h3 { margin-top: 0; }
.cd-form-slot iframe { display: block; width: 100%; min-height: 1400px; border: 0; background: var(--surface); }
.cd-form-slot.is-live { border-style: solid; padding: 0; overflow: hidden; }
.cd-consent { font-size: .93rem; }

/* ---------- legal ---------- */
.cd-draft { background: var(--cd-amber-soft); border-left: 5px solid var(--cd-amber); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 12px 16px; font-size: .96rem; }
.cd-legal .placeholder { font-style: normal; background: var(--cd-amber-soft); color: var(--cd-amber-text); padding: 0 .3em; border-radius: 4px; font-weight: 700; }
.cd-legal h3 { font-size: 1.04rem; }
.cd-toc { font-size: .95rem; columns: 2; column-gap: 28px; padding-left: 0; list-style: none; }
@media (max-width: 560px) { .cd-toc { columns: 1; } }
.cd-toc li { break-inside: avoid; margin: .15em 0; }

.cd .eyebrow a { color: inherit; text-decoration: none; }
.cd .eyebrow a:hover { text-decoration: underline; }