:root {

  color-scheme: light;

  --ink: #152033;

  --muted: #5d697a;

  --line: #d9e1ea;

  --panel: #ffffff;

  --bg: #f6f8fb;

  --accent: #136f63;

  --accent-2: #2457a6;

  --warn: #af5c00;

  --danger: #a83232;

  --soft: #eaf3f0;

}

* { box-sizing: border-box; }

body {

  margin: 0;

  font-family: "Inter", "Pretendard", "Segoe UI", system-ui, sans-serif;

  background: var(--bg);

  color: var(--ink);

  letter-spacing: 0;

}

.topbar {

  min-height: 320px;

  padding: 46px clamp(20px, 5vw, 72px);

  display: grid;

  grid-template-columns: minmax(0, 1fr) 280px;

  gap: 32px;

  align-items: end;

  background:

    linear-gradient(120deg, rgba(19,111,99,.92), rgba(36,87,166,.86)),

    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 90px),

    linear-gradient(180deg, #f9fbff, #e5edf7);

  color: #fff;

}

h1, h2, p { margin-top: 0; }

h1 { font-size: clamp(34px, 5vw, 60px); max-width: 980px; margin-bottom: 16px; line-height: 1.05; }

h2 { font-size: 24px; margin-bottom: 14px; }

.lede { max-width: 780px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.9); }

.eyebrow { font-size: 12px; font-weight: 800; color: var(--accent-2); text-transform: uppercase; margin-bottom: 8px; }

.topbar .eyebrow { color: rgba(255,255,255,.78); }

.guard-panel {

  background: rgba(255,255,255,.14);

  border: 1px solid rgba(255,255,255,.34);

  border-radius: 8px;

  padding: 18px;

  display: grid;

  gap: 10px;

  backdrop-filter: blur(4px);

}

.guard-panel span { font-size: 13px; color: rgba(255,255,255,.88); }

.layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; }

.side-nav {

  position: sticky;

  top: 0;

  min-height: 100vh;

  padding: 18px;

  display: grid;

  align-content: start;

  gap: 8px;

  background: #101927;

}

.side-nav a {

  color: #dbe6f5;

  text-decoration: none;

  padding: 10px 12px;

  border-radius: 6px;

  font-size: 14px;

}

.side-nav a:hover { background: rgba(255,255,255,.09); }

.content { padding: 24px clamp(16px, 4vw, 46px) 60px; display: grid; gap: 22px; }

.section {

  background: var(--panel);

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 24px;

  box-shadow: 0 10px 24px rgba(21,32,51,.05);

}

.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 26px; align-items: center; }

.flow-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }

.flow-strip span {

  min-height: 82px;

  padding: 14px 10px;

  border-radius: 8px;

  display: grid;

  place-items: center;

  text-align: center;

  background: var(--soft);

  color: #0f584f;

  font-weight: 800;

  font-size: 13px;

}

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(130px,1fr)); gap: 12px; }

.metric {

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 16px;

  background: #fbfcfe;

}

.metric strong { display:block; font-size: 28px; margin-bottom: 4px; }

.metric span { color: var(--muted); font-size: 13px; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }

.filters, .action-row { display: flex; gap: 8px; flex-wrap: wrap; }

button, select, input {

  min-height: 38px;

  border: 1px solid var(--line);

  border-radius: 6px;

  background: #fff;

  color: var(--ink);

  padding: 8px 12px;

  font: inherit;

}

button {

  background: var(--accent);

  border-color: var(--accent);

  color: #fff;

  font-weight: 800;

  cursor: pointer;

}

button:hover { filter: brightness(.95); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }

table { width: 100%; border-collapse: collapse; min-width: 1040px; }

th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }

th { background: #eef4f8; color: #23344f; position: sticky; top: 0; }

.badge { display:inline-flex; padding: 4px 8px; border-radius: 999px; background:#e8eef8; color:#244a88; font-weight: 800; font-size: 12px; }

.badge.warn { background:#fff3df; color: var(--warn); }

.badge.fail { background:#fdeaea; color: var(--danger); }

.two-col { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 24px; }

.log-box, .api-notes, .retry-queue, .excel-preview {

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 16px;

  background:#fbfcfe;

}

#actionLog { margin-top: 10px; display: grid; gap: 8px; max-height: 230px; overflow: auto; }

.log-item { padding: 10px; border-radius: 6px; background:#eef7f4; font-size: 13px; }

.work-list { display: grid; gap: 8px; padding-left: 22px; }

.claim-grid, .settings-grid, .download-grid, .scope-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.claim-card, .setting-card, .scope-grid article, .download-grid a {

  border: 1px solid var(--line);

  border-radius: 8px;

  padding: 14px;

  background:#fbfcfe;

  text-decoration: none;

  color: var(--ink);

}

.claim-card span, .setting-card span, .scope-grid span, .api-notes span { display:block; color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.45; }

.shipment-form { display:grid; gap: 10px; max-width: 460px; }

.shipment-form label { display:grid; gap: 6px; color: var(--muted); font-size: 13px; }

.mapping-board { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.mapping-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background:#fbfcfe; }

.mapping-card strong { display:block; margin-bottom: 8px; }

pre {

  white-space: pre-wrap;

  word-break: break-word;

  background: #111827;

  color: #d7ffe9;

  border-radius: 8px;

  padding: 16px;

  min-height: 260px;

  overflow: auto;

}

.download-grid a { font-weight: 800; color: var(--accent-2); }

@media (max-width: 1080px) {

  .topbar, .layout, .intro, .two-col { grid-template-columns: 1fr; }

  .side-nav { position: static; min-height: auto; grid-template-columns: repeat(3, minmax(0,1fr)); }

  .metric-grid, .claim-grid, .settings-grid, .scope-grid, .mapping-board { grid-template-columns: repeat(2, minmax(0,1fr)); }

}

@media (max-width: 700px) {

  .content { padding: 14px; }

  .section { padding: 18px; }

  .side-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .metric-grid, .claim-grid, .settings-grid, .scope-grid, .mapping-board, .flow-strip { grid-template-columns: 1fr; }

  .section-head { display:block; }

}