/* G2B 투찰 도우미 — Apple-style design tokens.
 *
 * Faithful to docs/design/apple-style.md. Font strategy honors WP-8's
 * no-CDN rule: the -apple-system stack resolves to real SF Pro (Latin) +
 * Apple SD Gothic Neo (Korean) on the operator's Apple devices; self-hosted
 * Pretendard Variable (fonts.css) is the non-Apple fallback. No web-font CDN.
 *
 * The "product" here is the recommendation itself, so the single Apple
 * product-shadow is reserved for the hero recommendation card — never cards,
 * buttons, or text. Elevation elsewhere comes from surface-color change only.
 */

:root {
  /* Surface */
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --tile-dark: #272729;
  --tile-dark-2: #2a2a2c;
  --black: #000000;
  /* Ink */
  --ink: #1d1d1f;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --on-dark: #ffffff;
  --on-dark-muted: #cccccc;
  /* Accent — the single interactive color */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;
  /* Hairlines */
  --hairline: #e0e0e0;
  /* Semantic-only feedback color (form/login errors) — not a second
   * interactive/brand accent; never used for links, CTAs, or focus. */
  --danger: #d70015;
  /* The one shadow in the whole system */
  --product-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  --font-display: -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Pretendard Variable", sans-serif;

  --section: 80px;
  --maxw: 980px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ---- Global nav: thin, black, pinned ---- */
.global-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--black); color: var(--on-dark);
  height: 44px; display: flex; align-items: center;
}
.global-nav .wrap {
  max-width: 1440px; margin: 0 auto; width: 100%;
  padding: 0 22px; display: flex; align-items: center; gap: 20px;
}
.global-nav .brand {
  font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--on-dark); text-decoration: none;
}
.global-nav .links { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.global-nav .links a {
  font-size: 12px; font-weight: 400; letter-spacing: -0.12px;
  color: rgba(255,255,255,0.82); text-decoration: none;
}
.global-nav .links a:hover { color: #fff; }
/* 로그아웃 is a POST form styled to read as one of the quiet nav links. */
.global-nav .links form.logout-form { display: inline; margin: 0; }
.global-nav .links button.linklike {
  background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  font-size: 12px; font-weight: 400; letter-spacing: -0.12px;
  color: rgba(255,255,255,0.82);
}
.global-nav .links button.linklike:hover { color: #fff; }

/* ---- Buttons ---- */
/* Base reset applies even where a template uses e.g. class="btn-primary" alone
   (no companion .btn) — app screens (login/index/admin) do exactly that. */
.btn, .btn-primary, .btn-ghost, .btn-nav {
  font: inherit; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; border: none; transition: transform .1s ease;
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-nav:active { transform: scale(0.96); }
.btn-primary {
  background: var(--primary); color: #fff;
  border-radius: 9999px; padding: 11px 22px;
  font-size: 17px; font-weight: 400; letter-spacing: -0.2px;
}
.btn-ghost {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary); border-radius: 9999px;
  padding: 10px 21px; font-size: 17px; font-weight: 400; letter-spacing: -0.2px;
}
.btn-nav {
  background: var(--primary); color: #fff; border-radius: 9999px;
  padding: 5px 15px; font-size: 12px; font-weight: 400;
}
.btn-sm { padding: 6px 14px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 3px; border-radius: 4px; }

/* ---- Tiles: full-bleed, alternating; color change is the divider ---- */
.tile { padding: var(--section) 22px; }
.tile .inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.tile-light { background: var(--canvas); color: var(--ink); }
.tile-parchment { background: var(--parchment); color: var(--ink); }
.tile-dark { background: var(--tile-dark); color: var(--on-dark); }
.tile-dark-2 { background: var(--tile-dark-2); color: var(--on-dark); }

.eyebrow {
  font-size: 21px; font-weight: 600; letter-spacing: 0.231px;
  color: var(--primary); margin: 0 0 14px;
}
.tile-dark .eyebrow, .tile-dark-2 .eyebrow { color: var(--primary-on-dark); }

.tile h1 {
  font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.9px;
  margin: 0 0 18px;
}
.tile h2 {
  font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.4px;
  margin: 0 0 16px;
}
.tile .lead {
  font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: 0;
  color: var(--ink-muted-80); margin: 0 auto 32px; max-width: 640px;
}
.tile-dark .lead, .tile-dark-2 .lead { color: var(--on-dark-muted); }
.cta-row { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---- Hero recommendation card = the signature product render ---- */
.hero { padding-bottom: 40px; }
.reco-render {
  background: var(--canvas); border-radius: 22px;
  box-shadow: var(--product-shadow);
  max-width: 460px; margin: 56px auto 0; padding: 40px 40px 32px;
  text-align: center;
  animation: settle .5s cubic-bezier(.22,.61,.36,1) both;
}
.reco-render .rr-label {
  font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--ink-muted-48); text-transform: none; margin: 0 0 10px;
}
.reco-render .rr-figure {
  font-size: 48px; font-weight: 600; line-height: 1.05; letter-spacing: -1px;
  color: var(--ink); margin: 0;
}
.reco-render .rr-figure small { font-size: 24px; font-weight: 600; margin-left: 4px; }
.reco-render .rr-sub {
  font-size: 17px; font-weight: 400; color: var(--ink-muted-80);
  margin: 12px 0 20px;
}
/* Calc-basis line (app reco page only — the landing preview hero has no
 * third line): the predicted-price quantile the recommended bid is derived
 * from, quieter than rr-sub since it's supporting detail, not the headline. */
.reco-render .rr-basis {
  font-size: 13px; font-weight: 400; color: var(--ink-muted-48);
  line-height: 1.5; margin: 0 0 20px;
}
.reco-render .rr-badge {
  display: inline-block; background: var(--parchment);
  border-radius: 9999px; padding: 8px 16px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink);
}
.reco-render .rr-badge b { color: var(--primary); }
@keyframes settle { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reco-render { animation: none; } }

/* ---- A big honest stat (calibration tile) ---- */
.stat-figure {
  font-size: 88px; font-weight: 600; line-height: 1; letter-spacing: -2px;
  color: var(--on-dark); margin: 8px 0 0;
}
.stat-figure .unit { font-size: 44px; font-weight: 600; }
.stat-caption { font-size: 17px; color: var(--on-dark-muted); margin-top: 18px; }

/* ---- Reason cards (근거 4항목) ---- */
.reason-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 760px; margin: 40px auto 0; text-align: left;
}
.reason-card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 24px;
}
.tile-parchment .reason-card { background: var(--canvas); }
.reason-card h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.374px; margin: 0 0 6px;
}
.reason-card p { font-size: 15px; color: var(--ink-muted-80); margin: 0; line-height: 1.45; }
/* Reco-page reason cards (Task 3) can stack more than one paragraph in a
 * single card (e.g. ①'s base summary plus its optional 꼬리 보정 / 예가범위
 * sub-notes) — restore breathing room between them. Inert on the landing's
 * reason cards: their two <p>s (.n and body) are separated by an <h3>, so
 * the adjacent-sibling selector never matches there. */
.reason-card p + p { margin-top: 12px; }
.reason-card .n {
  font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: 0.02em;
}

/* ---- Footer ---- */
.site-footer { background: var(--parchment); color: var(--ink-muted-80); padding: 48px 22px; }
.site-footer .inner { max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.site-footer .legal { font-size: 12px; color: var(--ink-muted-48); line-height: 1.6; max-width: 520px; }
.site-footer a { color: var(--primary); text-decoration: none; }

/* ---- App shell: non-landing screens (login, app home, reco, stats, admin) ----
 * These pages extend base.html and land inside <main class="app-main">. The
 * classes below are the app-screen component vocabulary the templates already
 * use (form.sheet, table, .notice, .empty, .error, .basis, .eyebrow,
 * .reason-card) — restyled onto Apple tokens (ink/hairline/primary), not the
 * old base.html ledger palette (deep-navy/inju) it replaces. The reco page's
 * hero (Task 3) reuses the landing's .reco-render product-shadow card
 * directly rather than a separate app-only component. */
.app-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 22px 96px;
}
.app-main .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-muted-48); margin: 0 0 6px;
}
.app-main h2 {
  font-size: 26px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink);
  margin: 40px 0 16px;
}
.app-main h2:first-child { margin-top: 0; }
.app-main h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink);
  margin: 32px 0 12px;
}
.app-main a { color: var(--primary); text-decoration: none; }
.app-main a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-main .basis { color: var(--ink-muted-80); font-size: 14px; line-height: 1.6; }
.app-main .num, .app-main .mono { font-variant-numeric: tabular-nums; }

/* Tables (최근 추천, 통계, 관리자 사용자 목록 등) — hairline rows, no grid lines. */
.app-main table { border-collapse: collapse; margin-top: 12px; width: 100%; font-size: 14px; }
.app-main td, .app-main th {
  border-bottom: 1px solid var(--hairline); padding: 10px 14px; text-align: right;
}
.app-main th { color: var(--ink-muted-48); font-size: 12px; font-weight: 600; }
.app-main td:first-child, .app-main th:first-child { text-align: left; }
.app-main tr:hover td { background: var(--parchment); }
/* A form embedded in a table cell (관리자 사용자 목록의 토글 버튼) should read
   as part of the row, not push block-level margin around it. */
.app-main form.inline { display: inline; margin: 0; }

/* Forms (공고 입력, 로그인, 관리자 계정/업로드) — hairline grid, ink labels. */
.app-main form.sheet {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  background: var(--canvas);
}
.app-main form.sheet label {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border-bottom: 1px solid var(--hairline);
  font-size: 13px; font-weight: 600; color: var(--ink-muted-48); margin: 0;
}
/* No column divider between the two label cells in a row: with .wide rows
   interleaved (공고번호/기초금액/basis notice), there is no nth-child parity
   that reliably lands on "left column" — a naive nth-child(odd) rule
   mis-stripes most two-up rows. Each field's own hairline input box is
   separation enough; row rhythm comes from label:border-bottom. */
.app-main form.sheet .wide { grid-column: 1 / -1; }
.app-main form.sheet input, .app-main form.sheet select {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--canvas);
}
.app-main form.sheet input:focus, .app-main form.sheet select:focus {
  border-color: var(--primary-focus);
}
/* Caption + hint grouped above the field, so a <small> hint doesn't get its
   own flex row inside the (flex-column) label. */
.app-main form.sheet label .cap { display: block; }
/* Checkbox row (관리자 계정 생성의 "관리자" 토글) — the label reads to the
   right of the checkbox instead of stacking a caption above an input. */
.app-main form.sheet label.check-row {
  flex-direction: row; align-items: center; gap: 8px;
}
/* Inline affordance row inside a field (공고번호 + "API로 채우기" autofill). */
.app-main form.sheet .field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-main form.sheet .field-row input { flex: 1; min-width: 120px; }
.app-main form.sheet .field-msg { font-size: 13px; color: var(--ink-muted-48); }
/* A full-span helper paragraph (예가범위 자동 추정 안내) reads as one more
   quiet sheet row, not a boxed callout. */
.app-main form.sheet p.basis { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
/* Submit sits in its own full-span row so the pill isn't squeezed into a
   label cell. */
.app-main form.sheet .sheet-actions { padding: 18px; }

/* 로그인 — one calm centered card on parchment. The parchment canvas is
   swapped in by :has() below, scoped so every other app screen stays on the
   default white canvas (design doc: "로그인: parchment 캔버스 ... / 앱 홈:
   하얀 캔버스"). No shadow — a hairline border is the only elevation cue. */
body:has(.auth-card) { background: var(--parchment); }
.app-main .auth-card {
  max-width: 400px; margin: 64px auto 0; background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: 18px; padding: 40px 36px;
}
.app-main .auth-card h2 { margin: 0 0 24px; text-align: center; }
.app-main .auth-card .error { text-align: center; margin: 0 0 20px; }
.app-main .auth-form { display: flex; flex-direction: column; gap: 18px; }
.app-main .auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-muted-48);
}
.app-main .auth-form input {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 11px 14px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--canvas);
}
.app-main .auth-form input:focus { border-color: var(--primary-focus); }
.app-main .auth-form .btn-primary { justify-content: center; margin-top: 4px; }

/* 추천 결과 히어로 (Task 3) — the reco page's recommended-bid card reuses
 * .reco-render verbatim (the ONE product-shadow in the system, otherwise
 * reserved for the landing preview). This override only trims its top
 * margin: the landing hero follows a spacious CTA row, this one follows a
 * compact basis line, so the same 56px gap would read as too much air. */
.app-main .reco-render { margin-top: 32px; }

.app-main .notice {
  color: var(--ink-muted-48); border-top: 1px solid var(--hairline);
  padding-top: 16px; margin-top: 32px; font-size: 13px; line-height: 1.6;
}
.app-main .error { color: var(--danger); font-weight: 600; font-size: 14px; }
.app-main .empty {
  color: var(--ink-muted-48); border: 1px dashed var(--hairline); border-radius: 12px;
  padding: 20px 22px; margin-top: 12px; background: var(--parchment);
}

@media (max-width: 640px) {
  .app-main form.sheet { grid-template-columns: 1fr; }
  .app-main table { display: block; overflow-x: auto; }
  .app-main .auth-card { margin-top: 32px; padding: 32px 24px; }
}

/* ---- Responsive ---- */
@media (max-width: 1068px) { .tile h1 { font-size: 48px; } }
@media (max-width: 734px) {
  .tile { padding: 56px 20px; }
  .tile h1 { font-size: 34px; letter-spacing: -0.5px; }
  .tile h2 { font-size: 30px; }
  .tile .lead { font-size: 19px; }
  .stat-figure { font-size: 60px; }
  .reason-grid { grid-template-columns: 1fr; }
  .reco-render { padding: 32px 24px 28px; margin-top: 40px; }
  .reco-render .rr-figure { font-size: 38px; }
  .global-nav .links a { font-size: 12px; }
}
@media (max-width: 419px) { .tile h1 { font-size: 28px; } }