:root{color-scheme:dark;font-family:Inter,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;background:#0b111d;color:#ecf2f8;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 78% 0%,#112d3a 0%,transparent 29%),radial-gradient(circle at 8% 30%,#151e36 0%,transparent 37%),#0b111d;min-height:100vh}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid #7cead9;outline-offset:3px}
.site-shell{max-width:1440px;margin:auto;padding:0 clamp(20px,4vw,64px)}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #253043;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:#dce5ee;font-size:13px;font-weight:700;letter-spacing:.19em;white-space:nowrap}
.brand strong{color:#6fe6d3;font-weight:700}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #4c9f9a;border-radius:8px;color:#72ebd9;font-size:22px;line-height:1}
.topbar-note{color:#92a5b7;font-size:11px;letter-spacing:.19em;white-space:nowrap}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:clamp(28px,5vw,80px);align-items:end;padding:64px 0 58px}
.eyebrow,.section-kicker,.panel-kicker{margin:0;color:#74dfcd;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:8px;letter-spacing:.08em;font-size:13px}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ff0d2;box-shadow:0 0 0 4px #2f645f66}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(38px,5vw,74px);line-height:1.17;letter-spacing:-.045em;margin:17px 0 22px;font-weight:750}
h1 span{color:#79e4d3}
.hero-lead{max-width:610px;color:#a8b9c9;line-height:1.75;font-size:15px;margin:0}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.metric{min-height:132px;padding:19px 16px;background:#152230b8;border:1px solid #2a4050;border-radius:15px;display:flex;flex-direction:column;justify-content:space-between}
.metric-label,.metric-foot{color:#a2b5c4;font-size:12px}
.metric strong{font-size:clamp(25px,2.6vw,39px);letter-spacing:-.04em;white-space:nowrap;line-height:1}
.metric strong small{font-size:14px;color:#b9c8d6;font-weight:500;letter-spacing:0}
.metric:first-child strong{color:#86ebd7}
.upload-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px 28px;align-items:center;background:linear-gradient(115deg,#17363c,#132536 64%,#16243b);border:1px solid #47716f;border-radius:18px;padding:26px 30px;margin:0 0 52px;box-shadow:0 16px 48px #0002}
.upload-panel.drag-over{border-color:#7cead9;box-shadow:0 0 0 3px #7cead944}
.upload-copy h2{font-size:22px;letter-spacing:-.03em;margin:8px 0 8px}.upload-copy p:last-child{margin:0;color:#b1c6d0;font-size:13px;line-height:1.7;max-width:680px}.upload-copy strong{color:#e9faf5}
.upload-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.primary-button,.secondary-button{border-radius:10px;padding:13px 17px;font-size:13px;font-weight:750;white-space:nowrap}
.primary-button{background:#79e5d2;color:#102c34;border:1px solid #a3f3e4}.primary-button:hover{background:#a0f3e5}.primary-button span{margin-left:8px}
.secondary-button{background:#193a43;color:#b9e8e0;border:1px solid #4c7778}.secondary-button:hover{background:#23515b}
.upload-status{grid-column:1/-1;border-top:1px solid #48706b77;padding-top:13px;color:#a9c6c8;font-size:12px;line-height:1.6;min-height:33px}
.upload-status[data-kind="success"]{color:#87ead4}.upload-status[data-kind="error"]{color:#ffb5aa}.upload-status[data-kind="working"]{color:#d2e6ef}
.planner{padding:0 0 45px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}
.section-heading h2,.plan-bottom h2{font-size:24px;line-height:1.25;letter-spacing:-.03em;margin:8px 0 0}
.section-heading>p{font-size:13px;color:#92a7b8;margin:0 0 2px}
.pallet-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:14px}
.pallet-tab{background:#121d2c;border:1px solid #2b3d4c;border-radius:14px;color:#c9d5df;min-height:86px;padding:15px 17px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:background .15s,border-color .15s,transform .15s}
.pallet-tab:hover{background:#1a2b3a;transform:translateY(-2px)}
.pallet-tab[aria-selected="true"]{background:#183335;border-color:#65cdbd;box-shadow:inset 0 0 0 1px #65cdbd44}
.pallet-tab strong{display:block;color:#f4f9fb;font-size:20px;letter-spacing:-.02em}
.pallet-tab small{display:block;color:#9fb2c1;font-size:12px;margin-top:4px}
.pallet-tab .tab-height{color:#7ce6d4;font-size:13px;white-space:nowrap}
.planner-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.8fr);gap:14px;align-items:stretch}
.viewer-panel,.cargo-panel{background:#121e2d;border:1px solid #2a3b4d;border-radius:18px;min-width:0}
.viewer-panel{overflow:hidden}
.viewer-head,.cargo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 26px 13px}
.viewer-head h3,.cargo-head h3{font-size:20px;margin:6px 0 0;letter-spacing:-.02em}
.height-chip,.box-count{background:#1e3940;color:#83e8d8;border:1px solid #3c676d;border-radius:999px;padding:7px 12px;font-size:12px;white-space:nowrap}
.viewer-canvas{height:560px;position:relative;overflow:hidden;touch-action:none;background:radial-gradient(circle at 50% 65%,#1b3240 0%,#111f2e 51%,#0f1b29 100%)}
.viewer-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#48607418 1px,transparent 1px),linear-gradient(90deg,#48607418 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(to bottom,transparent 4%,#000 65%,transparent 100%)}
#packing-scene{display:block;width:100%;height:100%;position:relative;z-index:1;cursor:grab}
#packing-scene.dragging{cursor:grabbing}
.viewer-hint{position:absolute;right:18px;bottom:18px;background:#0c1926d9;border:1px solid #344b59;border-radius:8px;padding:7px 10px;color:#aabecb;font-size:11px;pointer-events:none;z-index:2}
.view-controls{display:grid;grid-template-columns:auto minmax(80px,1fr) auto minmax(80px,1fr) auto;gap:10px;align-items:center;padding:16px 24px;border-top:1px solid #2a3b4d}
.view-controls label{font-size:12px;color:#aabfcb;white-space:nowrap}
.view-controls output{color:#e9f6f3;margin-left:5px}
.view-controls input{width:100%;accent-color:#78e6d5}
.reset-button,.download-button{border:1px solid #3b5961;background:#1c3940;color:#a4f4e5;border-radius:9px;padding:9px 13px;white-space:nowrap;font-size:12px;font-weight:650}
.reset-button:hover,.download-button:hover{background:#265058}
.legend{display:flex;gap:11px 20px;flex-wrap:wrap;padding:2px 24px 20px;color:#9caebd;font-size:11px}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend-dot{width:9px;height:9px;border-radius:2px;display:inline-block;background:var(--dot)}
.oversized{--dot:#46cbbf}.panel-color{--dot:#6293ee}.slender{--dot:#b398f3}.cube{--dot:#e4aa69}.accessory{--dot:#99aab9}
.cargo-panel{display:flex;flex-direction:column}
.cargo-list{padding:0 14px 15px;display:flex;flex-direction:column;gap:7px;max-height:550px;overflow:auto;scrollbar-color:#3c5364 transparent}
.cargo-row{border:1px solid #2a3b4d;background:#172535;border-radius:11px;color:#dce7ef;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;min-height:60px;transition:background .15s,border-color .15s}
.cargo-row:hover{background:#203447}
.cargo-row[aria-pressed="true"]{border-color:#80e5d5;background:#1e3d43}
.cargo-id{display:flex;align-items:center;gap:10px;min-width:0}
.cargo-swatch{width:8px;height:29px;border-radius:4px;background:var(--swatch);flex:none}
.cargo-row strong{font-size:14px;min-width:37px}
.cargo-row small{color:#9fb3c3;font-size:11px;line-height:1.4}
.cargo-row .cargo-size{color:#c3d1dd;white-space:nowrap;font-size:11px;text-align:right}
.selection-detail{margin:auto 14px 14px;border-top:1px solid #334858;padding:17px 3px 2px;color:#9fb3c2;font-size:13px;line-height:1.6;min-height:96px}
.selection-detail strong{display:block;color:#f0faf8;font-size:17px;margin-bottom:5px}
.selection-detail dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0}
.selection-detail dt{color:#8aa6b5}.selection-detail dd{margin:0;color:#d7e5ed}
.scene-pallet-side{fill:#43515c;stroke:#758998;stroke-width:2}.scene-pallet-top{fill:#506270;stroke:#8aa2af;stroke-width:2}
.scene-pallet-line{stroke:#97afbb55;stroke-width:1.4;fill:none}
.scene-box{cursor:pointer;transition:opacity .13s}.scene-box path{stroke:#0b1b2a;stroke-width:2.8;stroke-linejoin:round}
.scene-box .face-x{fill:color-mix(in srgb,var(--box-color) 59%,#153040)}.scene-box .face-y{fill:color-mix(in srgb,var(--box-color) 74%,#173145)}.scene-box .face-top{fill:color-mix(in srgb,var(--box-color) 54%,#c5e8e8)}
.scene-box.selected path{stroke:#e9fff4;stroke-width:6}.scene-box.dim{opacity:.17}
.scene-box text{fill:#f9fffe;font-weight:750;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#16303e;stroke-width:4;stroke-linejoin:round;pointer-events:none}
.scene-axis-label{fill:#bdd0db;font-weight:650;text-anchor:middle}
.scene-limit{stroke:#81e0d080;stroke-width:2;stroke-dasharray:10 8;fill:none}
.plan-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:13px 0 56px}
.proof-block,.notes-block{border:1px solid #2a3b4d;background:#121e2d;border-radius:16px;padding:26px}
.plan-bottom h2{font-size:20px}.plan-bottom p:not(.section-kicker){color:#aabcc9;line-height:1.75;font-size:13px;margin:12px 0 0}
.download-button{margin-top:21px;padding:12px 15px;font-size:13px}.download-button span{margin-left:8px}
footer{color:#758b9e;font-size:11px;padding:20px 0 30px;border-top:1px solid #253043}
@media(max-width:1100px){.hero{grid-template-columns:1fr;gap:30px}.hero-metrics{max-width:740px}.planner-grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr)}.view-controls{grid-template-columns:auto 1fr auto 1fr}.reset-button{grid-column:1/-1;justify-self:end}}
@media(max-width:820px){.planner-grid{grid-template-columns:1fr}.cargo-list{max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.selection-detail{min-height:0}.viewer-canvas{height:500px}}
@media(max-width:620px){.site-shell{padding:0 16px}.topbar{height:64px}.brand{font-size:10px;letter-spacing:.12em}.topbar-note{display:none}.hero{padding:46px 0 42px}.hero-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.metric{min-height:105px;padding:12px 10px}.metric strong{font-size:23px}.metric strong small{font-size:11px}.metric-label,.metric-foot{font-size:10px}.upload-panel{grid-template-columns:1fr;padding:20px;margin-bottom:38px}.upload-actions{justify-content:flex-start}.upload-status{grid-column:1}.section-heading{display:block}.section-heading>p{margin-top:9px}.pallet-selector{grid-template-columns:repeat(2,1fr)}.pallet-tab{min-height:72px;padding:11px 12px}.pallet-tab strong{font-size:17px}.pallet-tab .tab-height{font-size:11px}.viewer-head,.cargo-head{padding:18px 16px 12px}.viewer-canvas{height:420px}.view-controls{padding:15px 16px;grid-template-columns:auto 1fr;gap:12px}.reset-button{grid-column:1/-1}.legend{padding:0 16px 16px}.cargo-list{grid-template-columns:1fr}.plan-bottom{grid-template-columns:1fr}.proof-block,.notes-block{padding:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.pallet-settings{padding:26px;margin:0 0 24px;border:1px solid #293447;border-radius:18px;background:#101a29}.pallet-settings h2{margin:6px 0 10px}.pallet-settings p{color:#aab7c9;font-size:14px}.settings-fields{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin:22px 0}.settings-fields label{display:grid;gap:8px;flex:1;min-width:140px;font-size:13px;color:#c7d2df}.settings-fields input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #3b4b63;border-radius:8px;background:#0b111d;color:#fff;font:inherit}.settings-fields input:focus{outline:2px solid #46cbbf;outline-offset:2px}