:root { --navy:#173b63; --blue:#2b6cb0; --teal:#087f79; --ink:#19324a; --muted:#63788c; --line:#d8e3ec; --soft:#f5f8fb; --danger:#b42318; --danger-soft:#fff0ee; --good:#067647; --good-soft:#ecfdf3; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:#eef3f7; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif; }
.site-header { background:linear-gradient(125deg,#102f50,#1f5683); color:white; padding:32px max(5vw,32px); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.eyebrow { margin:0 0 7px; font-size:11px; font-weight:800; letter-spacing:.22em; color:#8fd8d2; }
h1 { margin:0; font-size:30px; letter-spacing:.03em; }
.subtitle { margin:8px 0 0; color:#dceafa; }
.local-badge { border:1px solid #7eb8d8; border-radius:999px; padding:10px 16px; font-size:13px; white-space:nowrap; background:#ffffff10; }
.local-badge span { display:inline-block; width:8px; height:8px; border-radius:50%; background:#54d2a0; margin-right:8px; box-shadow:0 0 0 4px #54d2a025; }
main { width:min(1060px,calc(100% - 40px)); margin:28px auto 80px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0 0 22px; padding:0; background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.steps li { position:relative; display:flex; align-items:center; gap:10px; padding:17px 20px; color:#8292a2; font-size:13px; font-weight:700; }
.steps li:not(:last-child)::after { content:""; position:absolute; right:-7px; width:14px; height:14px; border-top:1px solid var(--line); border-right:1px solid var(--line); background:white; transform:rotate(45deg); z-index:1; }
.steps b { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#e8eef4; }
.steps li.active { color:var(--navy); background:#edf6ff; }
.steps li.active b { background:var(--blue); color:white; }
.privacy-card { display:flex; align-items:center; gap:14px; margin-bottom:22px; padding:15px 18px; border:1px solid #aadfd1; border-radius:12px; background:#effbf7; }
.privacy-card .shield { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--teal); color:white; font-weight:900; }
.privacy-card p { display:inline; margin-left:8px; font-size:13px; color:#486f69; }
.panel { background:white; border:1px solid var(--line); border-radius:16px; margin:0 0 22px; padding:25px; box-shadow:0 8px 28px #173b6310; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; border-bottom:1px solid #e7edf2; padding-bottom:17px; margin-bottom:20px; }
.panel-heading > div { display:flex; align-items:center; gap:11px; }
.panel-heading h2 { font-size:19px; margin:0; }
.panel-heading p { margin:0; color:var(--muted); font-size:12px; }
.number { color:#8ba0b3; font:800 12px/1 monospace; }
.dropzone { display:flex; min-height:210px; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #9eb7cb; border-radius:13px; background:var(--soft); cursor:pointer; transition:.18s; }
.dropzone:hover,.dropzone.dragging { border-color:var(--blue); background:#edf6ff; transform:translateY(-1px); }
.dropzone input { position:absolute; opacity:0; pointer-events:none; }
.dropzone > span:last-child { color:var(--muted); font-size:13px; }
.file-icon { display:grid; place-items:center; width:55px; height:45px; border-radius:7px; background:#dce9f5; color:var(--navy); font-size:11px; font-weight:900; }
.sample-start { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px; border:1px solid #b8d5e8; border-radius:14px; background:linear-gradient(135deg,#f4f9fd,#eef8f6); }
.sample-start > div { display:grid; grid-template-columns:auto 1fr; gap:5px 15px; align-items:center; }
.sample-start .file-icon { grid-row:1/3; width:62px; height:56px; background:#dcebf8; }
.sample-start strong { font-size:17px; }
.sample-start p { grid-column:2; margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.sample-primary { min-width:230px; }
.local-upload { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.local-upload > p { margin:0 0 13px; color:var(--muted); font-size:13px; line-height:1.7; }
.local-upload > p strong { display:block; color:var(--ink); }
.local-upload .dropzone { min-height:150px; }
.secondary-demo { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:15px; color:var(--muted); font-size:12px; }
.sample-actions { margin-top:15px; text-align:center; color:var(--muted); font-size:13px; }
button { font:inherit; }
.link-button { border:0; background:none; color:var(--blue); padding:5px 8px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.danger-link { color:var(--danger); }
.hidden { display:none; }
.file-summary { display:flex; gap:28px; padding:13px 16px; background:#f2f7fb; border-radius:10px; margin-bottom:18px; font-size:13px; }
.file-summary strong { color:var(--navy); }
.mapping-guide { margin:-4px 0 18px; padding:14px 16px; border-left:4px solid var(--blue); background:#f2f7fb; color:#45627c; font-size:13px; line-height:1.75; }
.mapping-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.mapping-item { display:grid; grid-template-columns:1fr 1.35fr; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; }
.mapping-label { font-weight:700; font-size:13px; }
.required { display:inline-block; margin-left:5px; padding:2px 5px; border-radius:4px; background:#ffe8e5; color:var(--danger); font-size:9px; }
select { width:100%; min-width:0; border:1px solid #b9c9d7; border-radius:7px; background:white; padding:9px; color:var(--ink); }
.button-row { display:flex; justify-content:flex-end; margin-top:20px; }
.primary { border:0; border-radius:9px; background:var(--blue); color:white; padding:12px 22px; font-weight:800; cursor:pointer; box-shadow:0 5px 12px #2b6cb035; }
.primary:disabled { background:#9aacba; cursor:not-allowed; box-shadow:none; }
.generation-box { margin-top:18px; padding:17px; border:1px solid #a7e8c4; border-radius:11px; background:var(--good-soft); color:var(--good); }
.generation-box strong { display:block; margin-bottom:10px; }
.download-list { display:flex; flex-wrap:wrap; gap:10px; }
.download-link { display:inline-flex; align-items:center; gap:7px; border:1px solid #8acbac; border-radius:8px; background:white; color:var(--good); padding:10px 13px; font-size:13px; font-weight:800; text-decoration:none; }
.download-link:hover { background:#f6fffa; }
.generation-error { margin-top:18px; padding:15px; border:1px solid #f3b2ac; border-radius:10px; background:var(--danger-soft); color:var(--danger); font-weight:700; }
.public-note { margin-top:18px; padding:15px 17px; border:1px solid #b8cfe2; border-radius:10px; background:#f1f7fc; color:#365a78; line-height:1.65; }
.public-note strong { display:block; color:var(--navy); }
.result-banner { padding:17px 18px; border-radius:11px; margin-bottom:16px; }
.result-banner.good { color:var(--good); background:var(--good-soft); border:1px solid #a7e8c4; }
.result-banner.bad { color:var(--danger); background:var(--danger-soft); border:1px solid #f3b2ac; }
.result-banner strong { display:block; margin-bottom:5px; font-size:17px; }
.result-table { width:100%; border-collapse:collapse; font-size:13px; }
.result-table th,.result-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.result-table th { background:#f4f7fa; color:#4d6479; }
.tag-error { color:var(--danger); font-weight:800; }
.tag-warning { color:#a15c00; font-weight:800; }
.muted { background:#fbfcfd; }
.output-cards { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.output-cards article { border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:10px; padding:17px; background:white; }
.output-cards article:last-child { border-left-color:var(--teal); }
.output-cards span { color:var(--muted); font-size:11px; font-weight:800; }
.output-cards h3 { margin:6px 0; font-size:16px; }
.output-cards p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
@media (max-width:760px) { .site-header,.panel-heading,.sample-start { align-items:flex-start; flex-direction:column; } .sample-primary { width:100%; min-width:0; } .secondary-demo { align-items:flex-start; flex-direction:column; } .steps span { display:none; } .mapping-grid,.output-cards { grid-template-columns:1fr; } .privacy-card p { display:block; margin:4px 0 0; } }