:root { color-scheme: light; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#1f2937; background:#f8fafb; letter-spacing:0; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; }
a { color:#155e75; }
button,input,summary { font:inherit; }
button { min-height:44px; border:1px solid #cbd5d9; background:white; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 12px; font-size:14px; color:inherit; }
button:hover { background:#edf4f5; }
button:disabled { opacity:.45; cursor:not-allowed; }
button img { width:18px; height:18px; }
input:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #38b2ac; outline-offset:3px; }
.tool-header { padding:12px 0; border-bottom:1px solid #dae2e6; background:white; }
.tool-header a { text-decoration:none; color:#1f2937; }
.tool-header nav { display:flex; gap:20px; flex-wrap:wrap; }
.tool-header nav a { font-size:14px; font-weight:500; padding:10px 0; }
.tool-header nav a[aria-current] { color:#087f72; box-shadow:inset 0 -2px #087f72; }
.local-badge { font-size:12px; padding:5px 8px; background:#fff3d4; color:#785b14; border-radius:4px; }
.dieline-workspace { display:grid; grid-template-columns:310px minmax(0,1fr); min-height:calc(100dvh - 68px); }
.dieline-settings { padding:28px 24px 28px 0; border-right:1px solid #dae2e6; background:white; }
h1 { font-size:24px; margin:0 0 6px; }
h2 { font-size:14px; font-weight:600; margin:24px 0 12px; }
.type-label { font-size:13px; color:#647078; margin:0 0 24px; }
.type-options { padding:0; border:0; margin:0; display:flex; gap:0; }
.type-options legend { font-size:13px; margin-bottom:8px; }
.type-options label { flex:1; display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #cbd5d9; font-size:14px; gap:5px; cursor:pointer; }
.type-options label+label { border-left:0; }
.type-options label:has(:checked) { background:#e8f5f2; color:#086459; font-weight:700; }
.type-options input { accent-color:#087f72; }
.mm-input { position:relative; display:block; min-width:0; }
.mm-input input { padding-right:32px; }
.mm-input>span { position:absolute; right:10px; top:14px; font-size:12px; color:#687a80; pointer-events:none; }
.dimension-inputs,.option-inputs { display:grid; gap:12px; }
.dimension-inputs label,.option-inputs label { display:grid; grid-template-columns:1fr 116px; gap:12px; align-items:center; font-size:14px; }
input[type=number] { width:100%; min-width:0; height:44px; border:1px solid #bbc9ce; border-radius:5px; padding:9px 10px; font-size:16px; background:white; color:#1f2937; }
.dieline-options { margin:24px 0 18px; border-top:1px solid #e2e8eb; padding-top:16px; }
.dieline-options summary { font-size:14px; min-height:36px; cursor:pointer; }
.check-option { display:flex; gap:8px; align-items:center; min-height:44px; font-size:14px; }
.check-option input { width:18px; height:18px; accent-color:#087f72; }
.generate-button { width:100%; margin-top:12px; background:#087f72; color:white; border-color:#087f72; font-weight:600; }
.generate-button:hover { background:#056b60; }
.generate-button img { filter:brightness(0) invert(1); }
.form-error { font-size:13px; line-height:1.6; color:#b42318; }
.design-notice { font-size:12px; line-height:1.7; color:#65717b; border-top:1px solid #e2e8eb; padding-top:18px; margin-top:24px; }
.return-link { font-size:13px; }
.dieline-output { min-width:0; padding:24px 0 24px 24px; display:flex; flex-direction:column; }
.drawing-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.drawing-legend { display:flex; gap:16px; font-size:12px; white-space:nowrap; }
.drawing-legend span { display:flex; align-items:center; gap:6px; }
.drawing-legend span:before { content:""; width:20px; border-top:2px solid #d63939; }
.drawing-legend .fold-key:before { border-top:2px dashed #087f8c; }
.drawing-actions { display:flex; gap:8px; }
.download-button { color:#076558; font-weight:600; }
.download-wrap { position:relative; }
.download-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:5; width:220px; border:1px solid #bbc9ce; border-radius:6px; background:#fff; padding:4px; box-shadow:0 6px 18px #1f29371f; }
.download-menu button { width:100%; border:0; display:flex; justify-content:space-between; font-weight:600; }
.download-menu button span { font-size:12px; font-weight:400; color:#536570; }
#dieline-viewport { background:white; border:1px solid #d6e0e3; overflow:auto; min-height:350px; height:min(64dvh,700px); display:flex; align-items:flex-start; }
#dieline-canvas { flex:none; margin:auto; padding:0; }
#dieline-canvas svg { width:100%; height:100%; display:block; }
.drawing-status { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:#536570; padding:18px 0 8px; }
.drawing-status label { display:flex; gap:8px; align-items:center; }
.drawing-status input { width:110px; accent-color:#087f72; }
.generation-status { font-size:12px; color:#647078; min-height:24px; }
@media(max-width:850px) { .dieline-workspace { grid-template-columns:260px minmax(0,1fr); } .dieline-settings { padding:24px 16px 24px 0; } .dieline-output { padding:20px 0 20px 16px; } .drawing-toolbar { gap:12px; } }
@media(max-width:620px) { .dieline-workspace { display:block; } .dieline-settings { padding-inline:0; border-right:0; border-bottom:1px solid #dae2e6; } .dieline-output { padding-inline:0; } .dimension-inputs { grid-template-columns:repeat(3,minmax(0,1fr)); } .dimension-inputs label { display:flex; flex-direction:column; align-items:stretch; gap:6px; font-size:13px; } .dieline-options { margin:18px 0 10px; } .design-notice { margin:16px 0 10px; padding-top:12px; } #dieline-viewport { height:300px; min-height:240px; } .drawing-actions { gap:5px; } .drawing-actions button { padding:9px; } .drawing-toolbar { align-items:flex-start; } h1 { font-size:22px; } }
@media(max-width:1023px) { .tool-header nav { order:3; width:100%; gap:16px; } .tool-header nav a { font-size:13px; } }