:root {
  --dds-ink: #17213a;
  --dds-muted: #68738a;
  --dds-line: #dfe5ef;
  --dds-surface: #ffffff;
  --dds-bg: #f4f7fb;
  --dds-accent: #3157d5;
  --dds-accent-dark: #203a9d;
  --dds-success: #11765a;
  --dds-warning: #9a6512;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--dds-bg); color: var(--dds-ink); font-family: Inter, "Noto Sans KR", system-ui, -apple-system, sans-serif; }
.dds-nav { background: #101a36; color: #fff; padding: 15px 0; box-shadow: 0 2px 12px rgba(16, 26, 54, .18); }
.brand { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.track-badge { border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #dbe4ff; font-size: .78rem; padding: 4px 10px; }
.hero { padding: 48px 0 26px; max-width: 920px; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.05em; line-height: 1.15; margin: 10px 0 15px; }
.hero .lead { color: var(--dds-muted); font-size: 1.1rem; line-height: 1.75; max-width: 820px; }
.eyebrow { color: var(--dds-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dds-nav .track-badge, .dds-nav .eyebrow { color: #dbe4ff; }
.explanation { background: #edf2ff; border: 1px solid #d4defe; border-radius: 12px; color: #34466e; margin-top: 22px; padding: 14px 17px; }
.explanation summary { cursor: pointer; font-weight: 700; }
.explanation p { line-height: 1.65; margin: 12px 0 0; }
.flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 5px 0 28px; }
.flow-card { align-items: flex-start; background: var(--dds-surface); border: 1px solid var(--dds-line); border-radius: 14px; display: flex; gap: 14px; min-height: 142px; padding: 20px; }
.flow-number { align-items: center; background: #e8edff; border-radius: 50%; color: var(--dds-accent); display: inline-flex; flex: 0 0 32px; font-weight: 800; height: 32px; justify-content: center; }
.result-number { background: #e2f4ed; color: var(--dds-success); }
.flow-card h2 { font-size: 1rem; margin: 5px 0 7px; }
.flow-card p { color: var(--dds-muted); font-size: .9rem; line-height: 1.55; margin: 0; }
.panel { background: var(--dds-surface); border: 1px solid var(--dds-line); border-radius: 16px; margin: 18px 0; padding: 25px; box-shadow: 0 5px 18px rgba(31, 51, 93, .04); }
.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 16px; }
.panel-heading h2 { font-size: 1.35rem; letter-spacing: -.03em; margin: 6px 0 6px; }
.panel-heading p { color: var(--dds-muted); margin: 0; }
.query-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.query-grid label { color: #34415c; font-size: .9rem; font-weight: 700; }
.query-grid .form-control, .query-grid .form-select { margin-top: 7px; }
.field-help { color: var(--dds-muted); display: block; font-size: .78rem; font-weight: 400; margin-top: 6px; }
.query-submit { align-items: end; display: flex; }
.query-submit .btn { min-height: 45px; width: 100%; }
.matrix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.matrix-card { background: #f5f7ff; border: 1px solid #dce3ff; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 118px; padding: 16px; }
.matrix-card strong { color: var(--dds-accent-dark); }
.matrix-card span { font-size: .9rem; font-weight: 700; }
.matrix-card small { color: var(--dds-muted); line-height: 1.4; }
.matrix-card.muted { background: #f8f8f8; border-color: #e5e5e5; }
.matrix-card.muted strong { color: #5b6270; }
.result-heading { align-items: center; }
.result-heading p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.result-status { border-radius: 999px; color: var(--dds-warning); background: #fff4dc; font-size: .8rem; font-weight: 800; padding: 7px 12px; }
.result-status.success { color: var(--dds-success); background: #e3f6ed; }
.result-status.blocked { color: #a34242; background: #fde8e8; }
.technical-code { color: var(--dds-muted); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; margin-top: 5px; }
.context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.context-grid > div { background: #f7f9fc; border: 1px solid var(--dds-line); border-radius: 10px; padding: 12px 14px; }
.context-grid span { color: var(--dds-muted); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.context-grid strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 5px; }
.table { margin-top: 8px; }
.table thead th { color: var(--dds-muted); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.empty-result { background: #f7f9fc; border-radius: 10px; color: var(--dds-muted); padding: 18px; text-align: center; }
.login-page { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 22px; }
.login-card { background: #fff; border: 1px solid var(--dds-line); border-radius: 16px; box-shadow: 0 15px 45px rgba(31, 51, 93, .12); max-width: 420px; padding: 35px; width: 100%; }
.login-card h1 { font-size: 1.65rem; margin: 8px 0; }
.login-card p { color: var(--dds-muted); margin-bottom: 26px; }
@media (max-width: 800px) {
  .flow-grid, .matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .query-grid, .context-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .flow-grid, .matrix-grid { grid-template-columns: 1fr; }
  .panel { padding: 19px; }
  .hero { padding-top: 30px; }
}