: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; }
.journey-card-compact { align-items: center; min-height: 0; padding: .95rem 1.1rem; }
.journey-card-compact h2 { margin: 0 0 .25rem; }
.journey-card-compact strong { font-size: .8rem; }
.compact-context { padding: .75rem; }
.architecture-strip:has(.dds-product-nav) { background: transparent; border: 0; display: block; margin: 0 0 1.25rem; padding: 0; }
.dds-product-nav { background: #fff; border: 1px solid var(--dds-line); border-radius: 10px; display: flex; gap: .25rem; overflow-x: auto; padding: .3rem; }
.dds-product-nav a { border-radius: 7px; color: var(--dds-muted); font-size: .86rem; font-weight: 700; padding: .5rem .75rem; text-decoration: none; white-space: nowrap; }
.dds-product-nav a:hover { background: #f1f4fb; color: var(--dds-ink); }
.dds-product-nav a.active { background: #e8edff; color: var(--dds-accent-dark); }
.page-title .context-summary { font-size: .95rem; max-width: 700px; }
.explanation-details > summary { color: #43516a; font-size: .86rem; }
.explanation-details > summary::marker { color: var(--dds-accent); }
.registration-advanced-options { background: #f8faff; border: 1px solid var(--dds-line); border-radius: 8px; padding: .85rem 1rem; }
.registration-advanced-options > summary { color: #43516a; cursor: pointer; font-size: .875rem; font-weight: 700; }
.registration-advanced-options > p { color: var(--dds-muted); font-size: .82rem; margin: .7rem 0; }
.registration-advanced-grid { align-items: end; }
.registration-checkbox { align-items: center; color: var(--dds-ink) !important; display: flex; gap: .5rem; }
.registration-checkbox input { height: 1rem; width: 1rem; }
.registration-actions { border-top: 1px solid var(--dds-line); padding-top: 1rem; }
.registration-actions .btn { min-width: 7rem; }
.registration-result { align-items: flex-start; background: #f3fbf7; border: 1px solid #bfe0cf; border-radius: 9px; display: flex; gap: 1.5rem; justify-content: space-between; padding: 1rem; }
.registration-result strong, .registration-result span { display: block; }
.registration-result span { color: var(--dds-muted); font-size: .86rem; margin-top: .25rem; }
.registration-result dl { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; }
.registration-result dl div { min-width: 7rem; }
.registration-result dt { color: var(--dds-muted); font-size: .72rem; font-weight: 700; }
.registration-result dd { font-size: .9rem; font-weight: 700; margin: .2rem 0 0; }
.advanced-workflow > details > summary { color: var(--dds-ink); cursor: pointer; font-size: 1rem; font-weight: 700; }
.advanced-workflow .section-subtitle { margin: .4rem 0 0; }
.protection-summary { border-top: 3px solid #3157d5; }
.protection-status-card { background: #fbfcff; border: 1px solid #dbe3f4; border-radius: 14px; margin-top: 1rem; padding: 1.25rem; }
.protection-status-card.status-danger { background: #fffafa; border-color: #f2c8c8; }
.protection-status-card.status-warning { background: #fffdf8; border-color: #ead9ad; }
.protection-status-topline { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.protection-path-label { color: var(--dds-accent); display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.protection-status-topline h3 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; margin: .35rem 0; overflow-wrap: anywhere; }
.protection-status-topline p, .protection-primary-description { color: var(--dds-muted); margin: 0; }
.protection-primary-description { line-height: 1.55; margin-top: .8rem; }
.protection-primary-badge, .protection-table-badge { border-radius: 999px; display: inline-block; font-size: .8rem; font-weight: 800; padding: .35rem .65rem; white-space: nowrap; }
.tone-danger { background: #fbe8e8; color: #9e3030; }
.tone-warning { background: #fff1cf; color: #8a5d12; }
.tone-success { background: #e3f6ed; color: #11765a; }
.tone-neutral { background: #edf1f7; color: #43516a; }
.protection-evidence-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.2rem 0; }
.protection-evidence-grid > div { background: #fff; border: 1px solid var(--dds-line); border-radius: 10px; min-width: 0; padding: .85rem; }
.protection-evidence-grid dt { color: var(--dds-muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.protection-evidence-grid dd { margin: .35rem 0 0; }
.protection-evidence-grid dd strong, .protection-evidence-grid dd span { display: block; }
.protection-evidence-grid dd span { color: var(--dds-muted); font-size: .82rem; line-height: 1.45; margin-top: .35rem; }
.protection-status-footer { align-items: center; border-top: 1px solid var(--dds-line); color: var(--dds-muted); display: flex; font-size: .82rem; gap: 1rem; justify-content: space-between; padding-top: .9rem; }
.protection-path-comparison { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .8rem; }
.protection-path-comparison > div { background: #f7f9fc; border: 1px solid var(--dds-line); border-radius: 10px; padding: .9rem; }
.protection-path-comparison strong, .protection-path-comparison span { display: block; }
.protection-path-comparison span { color: var(--dds-muted); font-size: .86rem; line-height: 1.5; margin-top: .35rem; }
.advanced-protection > summary { cursor: pointer; font-weight: 800; }
.protection-direct-table small { color: var(--dds-muted); display: block; font-size: .78rem; line-height: 1.4; margin-top: .3rem; max-width: 20rem; }
.protection-direct-table td { vertical-align: top; }
@media (max-width: 800px) {
  .flow-grid, .matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .query-grid, .context-grid, .protection-evidence-grid, .protection-path-comparison { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .flow-grid, .matrix-grid { grid-template-columns: 1fr; }
  .panel { padding: 19px; }
  .hero { padding-top: 30px; }
  .protection-status-topline, .protection-status-footer { align-items: flex-start; flex-direction: column; }
  .registration-result { flex-direction: column; }
  .dds-product-nav { border-radius: 8px; }
}