:root{
  --bg:#efede7;
  --paper:#f7f5ef;
  --ink:#131313;
  --line:rgba(19,19,19,.18);
  --muted:#77736b;
  --accent:#e33d20;
  --panel:#ebe8e0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}

.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px;padding:0 28px;position:sticky;top:0;z-index:20;background:rgba(239,237,231,.92);backdrop-filter:blur(12px)}
.brand{font-weight:900;letter-spacing:-.06em;font-size:22px}
.topbar nav{display:flex;gap:28px;margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em}
.cart-pill{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:800;cursor:pointer}
.cart-pill span{display:inline-grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%;width:18px;height:18px;margin-left:6px}

.hero{padding:58px 28px 52px;display:grid;grid-template-columns:1.4fr .6fr;align-items:end;min-height:360px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.hero h1{font-size:clamp(64px,10vw,150px);line-height:.75;letter-spacing:-.085em;margin:25px 0 0;font-weight:900}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy{max-width:430px;margin:0 0 8px auto;font-size:13px;line-height:1.7;color:#4a4844}

/* Main editor: editing workspace + fixed order column */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 318px;align-items:start;border-bottom:1px solid var(--line)}
.viewport-shell{display:grid;grid-template-rows:auto 42px;min-width:0;background:#d8d5cd}
.viewport-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.status-dot{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:800;letter-spacing:.08em}
.status-dot i{width:7px;height:7px;background:#e6a21c;border-radius:50%}
.status-dot.ready i{background:#36a15b}
.status-dot.error i{background:#d34b3d}
.render-status{display:flex;align-items:center;gap:10px;min-width:0}
.performance-mode{padding:5px 7px;border:1px solid rgba(19,19,19,.18);border-radius:999px;background:rgba(255,255,255,.42);font-size:8px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.performance-mode[data-mode="high"]{color:#246743;border-color:rgba(36,103,67,.35);background:rgba(80,170,113,.1)}
.performance-mode[data-mode="balanced"]{color:#725814;border-color:rgba(114,88,20,.3);background:rgba(230,173,42,.1)}
.performance-mode[data-mode="low"]{color:#6b6255;background:rgba(107,98,85,.08)}
.toolbar-actions{display:flex;gap:6px}
.toolbar-actions button{font-size:9px;font-weight:800;border:1px solid #aaa59b;background:transparent;padding:7px 9px;cursor:pointer}

/* Desktop editor: exact 3D : 2D = 55 : 45, with ORDER outside on the right. */
.workspace-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-rows:1fr;min-width:0;height:clamp(640px,72vh,820px)}
.viewport{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,#efede8 0,#d5d2ca 52%,#c5c1b7 100%);border-right:1px solid var(--line)}
#threeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.model-loading-overlay{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:rgba(230,227,219,.82);backdrop-filter:blur(9px);transition:opacity .28s ease,visibility .28s ease;text-align:center;pointer-events:none}.model-loading-overlay.hidden{opacity:0;visibility:hidden}.model-loading-spinner{width:32px;height:32px;margin-bottom:16px;border:2px solid rgba(19,19,19,.16);border-top-color:var(--accent);border-radius:50%;animation:modelLoadingSpin .75s linear infinite}.model-loading-overlay strong{font-size:12px;letter-spacing:.08em}.model-loading-overlay span{margin-top:7px;font-size:9px;color:var(--muted)}.model-loading-track{width:min(220px,55%);height:2px;margin-top:16px;overflow:hidden;background:rgba(19,19,19,.13)}.model-loading-track i{display:block;width:0;height:100%;background:var(--accent);transition:width .18s ease}.model-loading-overlay.indeterminate .model-loading-track i{width:38%;animation:modelLoadingTrack 1.15s ease-in-out infinite}@keyframes modelLoadingSpin{to{transform:rotate(360deg)}}@keyframes modelLoadingTrack{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}
.viewport:after{content:"";position:absolute;left:0;right:0;bottom:11%;height:1px;background:rgba(0,0,0,.08);pointer-events:none}
.drop-overlay{position:absolute;inset:20px;border:1px dashed transparent;display:grid;place-items:center;pointer-events:none;transition:.2s;z-index:5}
.drop-overlay.show{background:rgba(238,236,230,.75);border-color:var(--accent);backdrop-filter:blur(3px)}
.drop-overlay div{display:none;font-size:13px;font-weight:900;letter-spacing:.12em}
.drop-overlay.show div{display:block}
.viewport-badge,.axis-help{position:absolute;z-index:4;font-size:8px;font-weight:800;letter-spacing:.1em;background:rgba(239,237,231,.82);padding:7px 9px;border:1px solid rgba(0,0,0,.12);pointer-events:none}
.viewport-badge{top:16px;left:16px}.axis-help{right:16px;bottom:16px}
.viewport-upload-btn{display:none}
.mobile-gesture-guide{display:none}

/* Large 2D editor block */
.uv-editor-block{display:grid;grid-template-rows:54px minmax(0,1fr);min-width:0;min-height:0;background:#d1cec6}
.uv-editor-heading{height:54px;padding:0 16px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#e7e4dc;border-bottom:1px solid var(--line)}
.uv-editor-heading>div{display:flex;align-items:center;gap:10px;min-width:0}
.uv-editor-heading>div>span{font-size:8px;color:var(--muted)}
.uv-editor-heading strong{display:block;font-size:11px;letter-spacing:.08em}
.uv-editor-heading small{display:block;margin-top:3px;font-size:8px;color:var(--muted)}
.uv-editor-tip{font-size:8px;color:var(--muted);white-space:nowrap}
.uv-heading-tools{display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto;min-width:auto!important}
.uv-cache-status{font-size:7px;font-weight:800;letter-spacing:.07em;color:var(--muted);white-space:nowrap;padding:5px 7px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.48)}
.uv-cache-status.ready{color:#2f7d4a;border-color:rgba(47,125,74,.28)}
.uv-zoom-controls{display:flex;align-items:center;gap:3px}
.uv-zoom-controls button{height:25px;min-width:25px;padding:0 7px;border:1px solid #aaa59b;background:rgba(247,245,239,.92);font-size:10px;font-weight:900;cursor:pointer}
.uv-zoom-controls button:hover{background:#fff;border-color:var(--ink)}
.uv-zoom-controls span{min-width:40px;text-align:center;font-size:8px;font-weight:800;color:var(--ink)}
.uv-zoom-controls .uv-fit-btn{font-size:7px;letter-spacing:.08em;min-width:34px}

.uv-scene{display:grid;grid-template-columns:minmax(0,1fr) 116px;position:relative;min-width:0;min-height:0;height:100%;overflow:hidden;background:#d1cec6}
.uv-canvas-pane{position:relative;min-width:0;min-height:0;overflow:hidden;background:#d1cec6}
#uvPreview{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default;background:#bdb9b0}

.uv-upload-btn{position:absolute;top:16px;right:16px;z-index:8;display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid rgba(19,19,19,.55);background:rgba(247,245,239,.94);backdrop-filter:blur(8px);font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer;user-select:none;box-shadow:0 6px 22px rgba(0,0,0,.08)}
.uv-upload-btn:hover,.uv-upload-btn.dragging{border-color:var(--accent);color:var(--accent);background:#fff}
.uv-upload-btn input{display:none}
.uv-upload-btn span{font-size:16px;line-height:1;font-weight:400}

/* Compact layer rail: deliberately narrow so artwork gets the space. */
.uv-layer-dock{position:relative;z-index:7;display:flex;flex-direction:column;min-width:0;padding:9px 6px 8px;background:rgba(247,245,239,.97);border-left:1px solid var(--line);overflow:hidden}
.uv-dock-header{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:1px 1px 7px;border-bottom:1px solid var(--line)}
.uv-dock-kicker{display:none}
.uv-dock-header h3{font-size:9px;letter-spacing:.08em;margin:0}
.text-btn{border:0;background:none;padding:2px;color:var(--muted);font-size:7px;font-weight:800;cursor:pointer}
.uv-dock-minihelp{font-size:5.5px;letter-spacing:.03em;color:var(--muted);padding:6px 1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layers-list{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0;padding-right:1px}
.empty-layer{font-size:8px;color:#969188;line-height:1.5;padding:10px 3px}
.layer-item{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"thumb info" "actions actions";gap:3px 5px;align-items:center;border:1px solid transparent;padding:4px;cursor:pointer;background:rgba(255,255,255,.45);min-height:46px}
.layer-item.active{border-color:var(--ink);background:#fff}
.layer-thumb{grid-area:thumb;width:24px;height:24px;object-fit:contain;background:repeating-conic-gradient(#e7e7e7 0 25%,#fff 0 50%) 50%/8px 8px}
.layer-info{grid-area:info;min-width:0}
.layer-info strong{display:block;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.layer-info small{display:block;margin-top:2px;font-size:6px;color:var(--muted);white-space:nowrap}
.layer-actions{grid-area:actions;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.layer-z-btn,.layer-delete{border:1px solid #c6c1b6;background:#fff;color:#666;width:100%;height:16px;padding:0;display:grid;place-items:center;font-size:7px;line-height:1;cursor:pointer}
.layer-delete{font-size:11px}
.layer-z-btn:disabled{opacity:.28;cursor:default}

.uv-canvas-pane.dragging:after{content:'DROP TO PLACE ARTWORK';position:absolute;inset:12px;z-index:7;display:grid;place-items:center;border:1px dashed var(--accent);background:rgba(239,237,231,.72);backdrop-filter:blur(3px);color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em;pointer-events:none}
.uv-statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;background:var(--panel);border-top:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:.04em}
.uv-statusbar output{white-space:nowrap;font-weight:800;color:var(--ink)}

/* Order only stays in the right column */
.control-panel{padding:22px;background:var(--paper)}
.right-panel{border-left:1px solid var(--line);max-height:calc(100vh - 70px);overflow:auto;position:sticky;top:70px;align-self:start}
.panel-heading{display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
.panel-heading span{font-size:9px;color:var(--muted)}
.panel-heading h2{margin:0;text-transform:uppercase;font-size:21px;letter-spacing:-.05em}
.order-section{padding:16px 0;border-bottom:1px solid var(--line)}
.order-section h3{font-size:9px;letter-spacing:.12em;margin:0 0 12px}
.select-wrap select{width:100%;border:1px solid #a8a39a;background:#eeece6;padding:10px;font-size:11px;outline:none}
.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{position:relative;width:28px;height:28px;border-radius:50%;background-color:var(--swatch);background-position:center;background-size:cover;border:2px solid var(--paper);outline:1px solid #aaa59b;cursor:pointer;overflow:hidden}.swatch.custom-fabric{border-color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}.swatch.active{outline:2px solid var(--ink);outline-offset:2px}.selected-color-name{display:block;margin-top:9px;font-size:8px;color:var(--muted);font-weight:800}
.order-section.split{display:grid;grid-template-columns:1fr 74px;gap:15px}
.size-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.size-grid button{border:1px solid #b6b0a6;background:transparent;padding:8px 0;font-size:9px;cursor:pointer}.size-grid button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.qty-control{display:flex;border:1px solid #b6b0a6;height:32px}.qty-control button{border:0;background:transparent;width:25px;cursor:pointer}.qty-control span{flex:1;display:grid;place-items:center;font-size:10px}
.price-block{margin-top:16px;padding:12px 0}.price-block>div{display:flex;justify-content:space-between;font-size:9px;margin:8px 0;color:#65615a}.price-block b{color:var(--ink)}.price-block .total{font-size:12px;padding-top:12px;border-top:1px solid var(--ink);margin-top:13px}.price-block .total b{font-size:18px}
.primary-btn{width:100%;border:0;background:var(--accent);color:#fff;padding:15px;font-size:10px;font-weight:900;letter-spacing:.1em;cursor:pointer}.primary-btn:hover{filter:brightness(.95)}
.order-note{font-size:8px;line-height:1.55;color:#89847b;margin:12px 2px}
.quote-item-rows{display:grid;gap:8px}.quote-item-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(64px,.75fr) 92px 30px;gap:5px;align-items:end;padding:9px;border:1px solid var(--line);background:rgba(255,255,255,.38)}.quote-item-row label{min-width:0;font-size:8px;font-weight:800;color:var(--muted)}.quote-item-row select{width:100%;height:34px;margin-top:5px;border:1px solid #aaa59b;background:#fff;padding:0 7px;font-size:9px}.quote-item-row .qty-control{margin-top:5px;background:#fff}.quote-item-remove{width:30px;height:34px;border:1px solid #bda9a4;background:#fff;color:#a63222;font-size:15px;cursor:pointer}.quote-item-remove:disabled{visibility:hidden}.add-quote-item{width:100%;min-height:36px;margin-top:8px;border:1px dashed #8f897f;background:transparent;font-size:9px;font-weight:900;cursor:pointer}.add-quote-item span{font-size:15px;margin-right:5px}.discount-guide{margin-top:9px;font-size:9px;line-height:1.55;color:var(--muted)}.discount-guide strong{color:var(--accent)}
.product-color-picker{margin:11px 0 13px}.product-color-picker>span{display:block;margin-bottom:8px;color:var(--muted);font-size:9px;font-weight:800}.product-color-labels{display:flex;flex-wrap:wrap;gap:7px}.product-color-label{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 6px;border:1px solid #c4beb4;border-radius:999px;background:#fff;color:#5f5a53;font-size:9px;font-weight:800;cursor:pointer}.product-color-label i{width:20px;height:20px;flex:0 0 auto;border:1px solid rgba(0,0,0,.2);border-radius:50%;background:var(--label-color)}.product-color-label.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}.product-color-label:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:420px){.quote-item-row{grid-template-columns:minmax(0,1fr) 72px}.quote-item-row label:first-child{grid-column:1/-1}.quote-item-row .quote-qty-field{grid-column:1}.quote-item-remove{grid-column:2;align-self:end;width:100%}}

.guide{padding:70px 28px 90px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px}.guide-grid article{background:var(--bg);padding:28px;min-height:210px}.guide-grid span{font-size:9px;color:var(--accent);font-weight:900}.guide-grid h3{font-size:30px;margin:35px 0 10px;letter-spacing:-.05em}.guide-grid p{font-size:11px;line-height:1.7;max-width:290px;color:var(--muted)}
footer{min-height:170px;background:#151515;color:#f2f0ea;padding:28px;display:flex;justify-content:space-between;align-items:flex-end}footer p{font-size:9px;color:#858585}

@media (max-width:1260px){
  .studio{grid-template-columns:minmax(0,1fr) 286px}
  .workspace-grid{grid-template-columns:minmax(0,11fr) minmax(0,9fr);height:clamp(620px,70vh,760px)}
  .uv-scene{grid-template-columns:minmax(0,1fr) 104px}
  .uv-editor-tip{display:none}
  .uv-cache-status{display:none}
  .layer-info strong{max-width:60px}
}
@media (max-width:980px){
  .studio{grid-template-columns:1fr}
  .right-panel{position:static;max-height:none;border-left:0;border-top:1px solid var(--line)}
  .workspace-grid{grid-template-columns:minmax(0,11fr) minmax(0,9fr);height:620px}
}
@media (max-width:760px){
  .topbar nav{display:none}
  .hero{grid-template-columns:1fr;gap:36px}.hero h1{font-size:72px}.hero-copy{margin:0}
  .workspace-grid{grid-template-columns:1fr;grid-template-rows:500px auto;height:auto}
  .viewport{min-height:500px;border-right:0;border-bottom:1px solid var(--line)}
  .uv-editor-block{
    grid-template-rows:auto auto;
    height:auto;
    min-height:0;
  }
  .uv-editor-heading{
    height:auto;
    min-height:58px;
    padding:8px 12px;
  }.uv-editor-tip{display:none}.uv-cache-status{display:none}.uv-zoom-controls span{min-width:34px}
  .uv-scene{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
    position:relative;
  }
  .uv-canvas-pane{height:78vw;min-height:420px;max-height:680px}
  .uv-layer-dock{border-left:0;border-top:1px solid var(--line);max-height:150px;padding:7px}
  .layers-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px}
  .uv-dock-minihelp{display:none}
  .uv-upload-btn{top:12px;right:12px}
  .axis-help{display:none}
  .uv-statusbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .guide-grid{grid-template-columns:1fr}.topbar{padding:0 16px}.hero,.guide{padding-left:16px;padding-right:16px}
}

/* Storefront + Korean commerce UI */
.topbar-actions{display:flex;align-items:center;gap:7px}.ghost-pill,.admin-link{height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:transparent;padding:0 12px;font-size:9px;font-weight:900;letter-spacing:.06em}.ghost-pill{cursor:pointer}.admin-link{background:var(--ink);color:#fff}.products-section{padding:68px 28px 78px;border-bottom:1px solid var(--line);background:#f2f0ea}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}.section-head h2{font-size:42px;letter-spacing:-.06em;margin:7px 0 0}.section-head>p{max-width:360px;font-size:10px;line-height:1.7;color:var(--muted);margin:0}.product-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.product-card{border:1px solid var(--line);background:#f8f6f1;transition:.18s}.product-card:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.06)}.product-card.selected{outline:2px solid var(--ink);outline-offset:-2px}.product-card.soldout{opacity:.62}.product-image-wrap{position:relative;aspect-ratio:4/4.65;background:#d9d5cc;overflow:hidden}.product-image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.product-image-placeholder{height:100%;display:grid;place-items:center;color:#999;font-size:9px}.soldout-badge{position:absolute;top:12px;right:12px;background:#151515;color:#fff;padding:7px 9px;font-size:8px;font-weight:900;letter-spacing:.1em}.product-card-body{padding:15px}.product-meta{display:flex;justify-content:space-between;gap:15px;align-items:center}.product-meta span{font-size:7px;letter-spacing:.1em;color:var(--muted)}.product-meta b{font-size:11px}.product-card h3{font-size:18px;letter-spacing:-.04em;margin:7px 0 12px}.product-sizes{display:flex;gap:4px;margin-bottom:14px}.product-sizes span{border:1px solid #c9c3b8;padding:4px 6px;font-size:7px}.product-card-body>button{width:100%;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:11px;font-size:8px;font-weight:900}.product-card-body>button:disabled{cursor:default;background:#aaa;border-color:#aaa}.gallery-empty{grid-column:1/-1;padding:50px;border:1px dashed #bbb5aa;text-align:center;color:var(--muted);font-size:10px}.selected-product-card{display:grid;grid-template-columns:70px 1fr;gap:11px;padding:0 0 16px;border-bottom:1px solid var(--line);align-items:center}.selected-product-thumb{width:70px;height:78px;background:#ddd8cf;overflow:hidden;display:grid;place-items:center}.selected-product-thumb img{width:100%;height:100%;object-fit:cover}.selected-product-thumb span{font-size:7px;color:#888}.selected-product-card small{display:block;font-size:7px;color:var(--muted);letter-spacing:.08em}.selected-product-card strong{display:block;font-size:11px;margin:5px 0}.selected-product-card span{display:block;font-size:8px;color:var(--muted)}.primary-btn:disabled{background:#aaa;cursor:not-allowed}.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.56);backdrop-filter:blur(5px)}.modal-card{position:relative;z-index:1;width:min(620px,100%);max-height:90vh;overflow:auto;background:#f7f5ef;border:1px solid #222;padding:26px;box-shadow:0 25px 80px rgba(0,0,0,.25)}.modal-card h2{font-size:30px;letter-spacing:-.05em;margin:8px 0 20px}.modal-close{position:absolute;right:14px;top:14px;border:0;background:none;font-size:26px;line-height:1}.purchase-summary{border:1px solid var(--line);padding:12px;margin-bottom:18px}.purchase-summary>div{display:flex;justify-content:space-between;gap:15px;padding:6px 0;font-size:9px}.purchase-summary .sum{border-top:1px solid var(--ink);margin-top:6px;padding-top:12px}.purchase-summary .sum b{font-size:15px}.purchase-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.purchase-form label{font-size:8px;font-weight:800}.purchase-form input,.purchase-form textarea{display:block;width:100%;margin-top:6px;border:1px solid #b5afa5;background:#fff;padding:11px;outline:none}.purchase-form textarea{resize:vertical}.purchase-form .full{grid-column:1/-1}.lookup-form{display:grid;grid-template-columns:1fr auto;gap:5px}.lookup-form input{border:1px solid #aaa49a;padding:12px;background:#fff}.lookup-form button{border:0;background:#151515;color:#fff;padding:0 18px;font-size:9px;font-weight:900}.lookup-result{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;font-size:9px}.lookup-order-head{display:flex;justify-content:space-between;align-items:center}.lookup-order-head b{font-size:13px}.lookup-order-head span{border:1px solid #aaa;padding:5px 7px}.lookup-result dl>div{display:grid;grid-template-columns:90px 1fr;padding:6px 0}.lookup-result dt{color:var(--muted)}.lookup-result dd{margin:0}.lookup-empty{padding:25px;text-align:center;color:var(--muted)}.success-toast{position:fixed;right:22px;bottom:22px;z-index:120;background:#151515;color:#fff;padding:15px 18px;min-width:320px;box-shadow:0 18px 50px rgba(0,0,0,.28)}.success-toast strong,.success-toast span{display:block;font-size:10px}.success-toast span{margin-top:7px;color:#bbb}.success-toast button{margin-top:12px;border:1px solid #777;background:transparent;color:#fff;padding:6px 9px;font-size:8px}.uv-upload-btn strong{font-size:8px}.toolbar-actions button{white-space:nowrap}
@media(max-width:980px){.product-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-actions .admin-link{display:none}}@media(max-width:760px){.product-gallery{grid-template-columns:1fr}.products-section{padding:48px 16px}.section-head{align-items:flex-start;flex-direction:column}.section-head h2{font-size:34px}.purchase-form{grid-template-columns:1fr}.purchase-form .full{grid-column:auto}.topbar-actions{margin-left:auto}.ghost-pill{padding:0 9px}.topbar .brand{margin-right:auto}}
.selected-product-copy{min-width:0}.selected-product-switch{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;gap:6px;align-items:center;margin:4px 0}.selected-product-switch strong{min-width:0;margin:0;text-align:center;overflow-wrap:anywhere}.selected-product-switch button{width:28px;height:28px;border:1px solid var(--line);background:transparent;font-size:20px;line-height:1;display:grid;place-items:center}.selected-product-switch button:hover:not(:disabled){background:var(--ink);color:var(--paper)}.selected-product-switch button:disabled{opacity:.25;cursor:default}@media(max-width:420px){.selected-product-card{grid-template-columns:58px minmax(0,1fr)}.selected-product-thumb{width:58px;height:68px}.selected-product-switch{grid-template-columns:26px minmax(0,1fr) 26px}.selected-product-switch button{width:26px;height:26px}}
.custom-topbar nav a.active{position:relative}.custom-topbar nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--accent)}
.order-panel-heading{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center}.order-panel-heading button{border:1px solid var(--ink);background:transparent;padding:7px 9px;font-size:7px;font-weight:900;cursor:pointer}.product-picker-card{width:min(920px,100%)}.product-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.product-picker-item{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);background:#fff;text-align:left;padding:0;cursor:pointer;overflow:hidden}.product-picker-item:hover{border-color:#151515;transform:translateY(-2px)}.product-picker-item.selected{outline:2px solid #151515;outline-offset:-2px}.product-picker-item:disabled{cursor:not-allowed;opacity:.48;transform:none}.product-picker-image{aspect-ratio:4/4.7;background:#ddd8cf;display:grid;place-items:center;overflow:hidden;position:relative}.product-picker-image img{width:100%;height:100%;object-fit:contain}.product-picker-image>span{font-size:8px;color:#888}.product-picker-image b{position:absolute;right:8px;top:8px;background:#151515;color:#fff;padding:5px 7px;font-size:7px}.product-picker-copy{padding:12px}.product-picker-copy small,.product-picker-copy strong,.product-picker-copy span{display:block}.product-picker-copy small{font-size:7px;color:var(--muted)}.product-picker-copy strong{font-size:13px;margin:5px 0}.product-picker-copy span{font-size:9px;font-weight:900}.product-picker-empty{grid-column:1/-1;padding:45px;text-align:center;color:var(--muted);font-size:10px}
@media(max-width:760px){.product-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.product-picker-grid{grid-template-columns:1fr}}
.studio-intro{min-height:190px;padding:42px 28px 34px;display:flex;align-items:end;justify-content:space-between;gap:40px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#f3f0e8,#e8e4da)}
.studio-intro h1{margin:7px 0 0;font-size:clamp(38px,5vw,72px);letter-spacing:-.065em;line-height:.95}.studio-intro>p{max-width:470px;margin:0;color:var(--muted);font-size:12px;line-height:1.8}
@media(max-width:760px){.studio-intro{align-items:flex-start;flex-direction:column;min-height:auto;padding:34px 16px}.custom-topbar nav{display:none}}

/* Compact studio intro: keep the editor above the fold on desktop. */
.studio-intro{min-height:108px;padding:16px 28px 14px;align-items:center;gap:28px}.studio-intro .eyebrow{margin:0}.studio-intro h1{margin:5px 0 0;font-size:clamp(30px,3.6vw,50px);line-height:.92}.studio-intro>p{max-width:420px;font-size:10px;line-height:1.55}
.workspace-grid{height:clamp(500px,calc(100vh - 250px),760px)}
@media(max-width:980px){.workspace-grid{height:clamp(500px,calc(100vh - 210px),620px)}}
@media(max-width:760px){.studio-intro{padding:16px;gap:8px}.studio-intro h1{font-size:32px}.studio-intro>p{font-size:9px;line-height:1.45}.workspace-grid{height:auto}}
.status-dot{flex:0 0 auto;width:9px;justify-content:center;gap:0}.status-dot i{width:8px;height:8px}.render-status{gap:8px}@media(max-width:420px){.viewport-toolbar{padding:0 10px}.toolbar-actions{gap:3px}.toolbar-actions button{padding:7px 6px;font-size:8px}.performance-mode{padding:5px 6px;font-size:7px}}

/* Readable Korean typography */
html,body,button,input,select,textarea{font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:auto}.performance-mode,.viewport-badge,.axis-help,.uv-editor-heading>div>span,.uv-editor-heading small,.uv-editor-tip,.uv-cache-status,.uv-zoom-controls span,.uv-zoom-controls .uv-fit-btn,.uv-dock-header h3,.text-btn,.uv-dock-minihelp,.empty-layer,.layer-info strong,.layer-info small,.layer-z-btn,.selected-color-name,.order-note,.product-meta span,.product-sizes span,.selected-product-thumb span,.selected-product-card small,.selected-product-card span,.purchase-form label,.product-picker-copy small,.product-picker-image b,.order-panel-heading button,.uv-upload-btn strong{font-size:10px}.status-dot,.toolbar-actions button,.uv-upload-btn,.uv-statusbar,.order-section h3,.size-grid button,.price-block>div,.product-card-body>button,.lookup-form button,.lookup-result,.success-toast button,.product-picker-copy span{font-size:11px}.uv-dock-minihelp,.layer-info small,.empty-layer,.order-note,.selected-product-card small,.selected-product-card span,.product-meta span{color:#625e57}.studio-intro>p,.guide-grid p,.section-head>p{color:#5f5b54}@media(max-width:420px){.toolbar-actions button,.performance-mode{font-size:10px}}

/* Fit the actual editor and WebGL viewport to the phone, not just the page shell. */
@media(max-width:760px){
  .studio,.viewport-shell,.workspace-grid,.viewport,.uv-editor-block,.right-panel{width:100%;max-width:100%;min-width:0}
  .studio,.viewport-shell,.workspace-grid{overflow-x:hidden}
  .viewport-shell{grid-template-rows:auto auto}
  .workspace-grid{grid-template-columns:minmax(0,100%);grid-template-rows:clamp(336px,105vw,500px) auto;height:auto}
  .viewport{width:100%;height:clamp(336px,105vw,500px);min-height:0}
  .uv-canvas-pane{height:clamp(300px,95vw,500px);min-height:0;max-height:500px}
  #threeCanvas{width:100%!important;max-width:100%;min-width:0}
  .toolbar-actions{min-width:0;width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .toolbar-actions button{width:100%;min-width:0;min-height:36px;padding:7px 3px;line-height:1.2;white-space:normal;word-break:keep-all}
  .mobile-gesture-guide{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 10px;border-bottom:1px solid var(--line);background:#e7e4dc;color:#625e57;font-size:9px;font-weight:800;letter-spacing:.01em}
  .gesture-item{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:nowrap}
  .gesture-divider{width:1px;height:20px;background:rgba(19,19,19,.18)}
  .gesture-fingers{display:flex;align-items:flex-start;gap:3px;height:18px}
  .gesture-fingers i{display:block;width:7px;height:15px;border-radius:7px;background:var(--ink);transform:translateY(3px)}
  .gesture-fingers i+i{transform:translateY(0)}
  .gesture-fingers.one i{transform:translateY(1px);box-shadow:0 3px 0 -1px rgba(19,19,19,.28)}
  .viewport-badge{display:none}
  .uv-editor-heading{height:auto;min-height:58px;flex-wrap:wrap;padding-block:8px}
  .uv-heading-tools{width:100%;max-width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:6px!important}
  .uv-zoom-controls{min-width:0}
  .uv-zoom-controls button{flex:0 0 auto}
  .viewport-upload-btn{position:absolute;top:14px;right:14px;z-index:9;display:flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid rgba(19,19,19,.5);background:rgba(247,245,239,.94);backdrop-filter:blur(8px);font-size:10px;font-weight:900;letter-spacing:.04em;box-shadow:0 6px 22px rgba(0,0,0,.08);cursor:pointer;user-select:none}
  .viewport-upload-btn span{font-size:16px;line-height:1;font-weight:400}
}
@media(max-width:380px){
  .uv-editor-heading>div:first-child small{display:none}
  .uv-zoom-controls span{display:none}
}
/* =========================================================
   2D / 3D DESIGN MODE
========================================================= */

.design-mode-bar {
  max-width: 1600px;
  margin: 28px auto 10px;
  padding: 0 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.design-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.design-mode-copy span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  opacity: .45;
}

.design-mode-copy strong {
  font-size: 15px;
  font-weight: 700;
}


.design-mode-toggle {
  display: flex;
  padding: 5px;
  gap: 4px;

  background: #ecebe7;
  border-radius: 18px;
}

.design-mode-toggle[hidden]{
  display:none !important;
}


.design-mode-btn {
  position: relative;

  min-width: 170px;
  min-height: 58px;

  padding: 9px 17px;

  border: 0;
  border-radius: 14px;

  background: transparent;
  color: #777;

  cursor: pointer;

  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 7px;
}


.design-mode-btn > span {
  font-size: 14px;
  font-weight: 800;
}


.design-mode-btn small {
  grid-column: 1 / -1;

  margin-top: 2px;

  font-size: 10px;
  opacity: .55;
}


.design-mode-btn b {
  padding: 3px 6px;

  border-radius: 20px;

  background: #ff4c2e;
  color: #fff;

  font-size: 8px;
  letter-spacing: .06em;
}


.design-mode-btn.active {
  background: #111;
  color: #fff;

  box-shadow:
    0 5px 18px rgba(0,0,0,.16);
}


/* 모드 화면 */

.design-workspace {
  display: none;
  min-width: 0;
}

.design-workspace.active {
  display: block;
}


/* =========================================================
   2D MOCKUP
========================================================= */

.design-2d-workspace {
  min-width: 0;

  background: #f5f4f0;

  border-radius: 22px;

  overflow: hidden;
}


.mockup-2d-header {
  height: 72px;

  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid rgba(0,0,0,.08);

  background: #fff;
}


.mockup-2d-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}


.mockup-2d-header > div:first-child > span {
  font-size: 11px;
  opacity: .4;
}


.mockup-2d-header strong,
.mockup-2d-header small {
  display: block;
}


.mockup-2d-header strong {
  font-size: 14px;
}


.mockup-2d-header small {
  margin-top: 3px;

  font-size: 10px;
  opacity: .55;
}


.mockup-side-buttons {
  display: flex;
  gap: 5px;
}


.mockup-side-buttons button {
  padding: 8px 13px;

  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;

  background: #fff;

  cursor: pointer;
}


.mockup-side-buttons button.active {
  background: #111;
  color: #fff;
}


/* 실제 2D 이미지 영역 */

.mockup-2d-stage {
  position: relative;

  width: 100%;
  height: min(72vh, 780px);
  min-height: 600px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      #f9f8f5,
      #e8e6e0
    );
  isolation: isolate;
}


.mockup-2d-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  display: block;
  object-fit: contain;
  object-position: center center;

  transform: none;

  user-select: none;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

.mockup-2d-tint {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  background:var(--mockup-color,#e8e7e2);
  -webkit-mask-image:var(--mockup-mask);
  mask-image:var(--mockup-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  pointer-events:none;
}


.mockup-2d-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  cursor: grab;
  z-index: 2;
}


.mockup-2d-canvas:active {
  cursor: grabbing;
}


/* 인쇄 가능 영역 가이드 */

.mockup-print-guide {
  position: absolute;
  z-index: 3;

  left: 50%;
  top: 45%;

  width: 27%;
  height: 38%;

  transform: translate(-50%, -50%);

  border: 1px dashed rgba(0,0,0,.22);

  pointer-events: none;
}


.mockup-print-guide span {
  position: absolute;

  left: 8px;
  top: 7px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;

  opacity: .35;
}


.mockup-upload-btn {
  position: absolute;
  z-index: 30;

  left: auto;
  right: 96px;
  top: 22px;
  bottom: auto;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 16px;

  border-radius: 30px;

  background: #111;
  color: white;

  cursor: pointer;

  box-shadow:
    0 8px 30px rgba(0,0,0,.2);
}


.mockup-2d-help {
  padding: 12px 20px;

  font-size: 10px;
  text-align: center;

  opacity: .5;
}


/* =========================================================
   모바일
========================================================= */

@media (max-width: 800px) {

  .design-mode-bar {
    padding: 0 14px;

    flex-direction: column;
    align-items: stretch;
  }


  .design-mode-toggle {
    width: 100%;
  }


  .design-mode-btn {
    flex: 1;
    min-width: 0;
  }


  .mockup-2d-stage {
    min-height: 500px;
    height: 65vh;
  }

}

/* 셀프 디자인 제목 + 2D/3D 토글 한 줄 배치 */
.studio-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.studio-title-row h1 {
  margin: 0;
}

.studio-title-row .design-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
}

.studio-title-row .design-mode-btn {
  width: auto;
  min-width: 58px;
  min-height: 32px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  white-space: nowrap;
}

.studio-title-row .design-mode-btn span {
  line-height: 1;
}

.studio-title-row .design-mode-btn b {
  font-size: 9px;
  line-height: 1;
}

/* 모바일에서는 제목이 너무 좁아질 경우만 다음 줄 */
@media (max-width: 640px) {
  .studio-title-row {
    gap: 10px;
    flex-wrap: wrap;
  }

  .studio-title-row .design-mode-btn {
    min-width: 52px;
    min-height: 30px;
    padding: 5px 10px;
  }
}

/* =========================================================
   2D MOCKUP LOADING
========================================================= */

.mockup-2d-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;

  background:
    rgba(248, 248, 248, 0.92);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  text-align: center;
}

.mockup-2d-loading-overlay[hidden] {
  display: none;
}

.mockup-2d-loading-overlay strong {
  font-size: 14px;
  font-weight: 700;
}

.mockup-2d-loading-overlay span {
  font-size: 12px;
  opacity: 0.55;
}

.mockup-2d-loading-spinner {
  width: 30px;
  height: 30px;

  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.75);

  border-radius: 50%;

  animation:
    mockup2dLoadingSpin 0.75s linear infinite;
}

@keyframes mockup2dLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   2D MOCKUP + LAYER DOCK
========================================================= */

/* 2D 레이어는 목업 크기를 줄이지 않는 플로팅 패널로 표시한다. */
.design-2d-workspace.active{
  position:relative;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:0;
}
.design-2d-workspace .mockup-2d-header,
.design-2d-workspace .mockup-2d-stage,
.design-2d-workspace .mockup-2d-help{grid-column:1}
.mockup-layer-dock{
  position:absolute;
  top:84px;
  right:12px;
  bottom:54px;
  z-index:32;
  width:min(380px,calc(100% - 24px));
  max-height:none;
  padding:14px;
  border:1px solid rgba(19,19,19,.16);
  border-radius:18px;
  background:rgba(249,248,244,.97);
  box-shadow:0 22px 65px rgba(0,0,0,.2);
  backdrop-filter:blur(16px);
  transform:translateX(calc(100% + 28px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .25s ease,opacity .2s ease,visibility .2s;
}
.mockup-layer-dock.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
.mockup-layer-toggle{
  position:absolute;right:16px;top:16px;z-index:30;
  width:64px;height:64px;border:0;border-radius:50%;
  display:grid;place-items:center;background:#171717;color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.22);cursor:pointer;
}
.mockup-layer-toggle>span{font-size:27px;line-height:1}
.mockup-layer-toggle>b{position:absolute;right:-2px;top:-2px;min-width:24px;height:24px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--accent);font-size:11px}
.mockup-tools-toggle{
  position:absolute;right:16px;top:92px;z-index:30;
  width:56px;height:56px;border:1px solid rgba(19,19,19,.18);border-radius:50%;
  display:grid;place-items:center;background:rgba(249,248,244,.96);color:#171717;
  box-shadow:0 10px 28px rgba(0,0,0,.16);font-size:23px;cursor:pointer;
}
.mockup-tools-toggle.active{background:#171717;color:#fff}
.mockup-tools-panel{
  position:absolute;right:16px;top:160px;z-index:33;width:300px;max-width:calc(100% - 32px);padding:14px;
  display:grid;gap:8px;border:1px solid rgba(19,19,19,.16);border-radius:16px;
  background:rgba(249,248,244,.98);box-shadow:0 20px 55px rgba(0,0,0,.2);backdrop-filter:blur(16px);
  transform:translateX(12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .2s ease,opacity .18s ease,visibility .18s;
}
.mockup-tools-panel.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
.mockup-tools-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.mockup-tools-head strong{font-size:14px}
.mockup-tools-head button{width:30px;height:30px;border:0;border-radius:50%;background:#e8e5de;font-size:20px;cursor:pointer}
.mockup-tools-panel>[data-layer-tool]{min-height:44px;padding:0 12px;display:flex;align-items:center;gap:10px;border:1px solid #d2cec5;border-radius:10px;background:#fff;font-size:12px;font-weight:800;cursor:pointer}
.mockup-tools-panel>[data-layer-tool]:hover{border-color:#171717}
.mockup-tools-panel>[data-layer-tool]:disabled{opacity:.45;cursor:wait}
.mockup-tools-panel>[data-layer-tool] span{width:22px;font-size:18px;text-align:center}
.mockup-tools-panel>small{font-size:9px;color:var(--muted);line-height:1.5}
.mockup-layer-backdrop{position:absolute;inset:0;z-index:31;border:0;background:rgba(19,19,19,.12);backdrop-filter:blur(1px)}
.mockup-layer-backdrop[hidden]{display:none}
.mockup-layer-close{width:36px;height:36px;border:0;border-radius:50%;background:#e8e5de;font-size:24px;line-height:1;cursor:pointer}
.mockup-layer-dock .uv-dock-header h3{font-size:16px}
.mockup-layer-dock .text-btn{font-size:11px;padding:8px}
.mockup-layer-dock .uv-dock-minihelp{font-size:10px;padding:10px 2px}
.mockup-layer-dock .layers-list{gap:8px}
.mockup-layer-dock .layer-item{grid-template-columns:46px minmax(0,1fr);gap:8px;padding:9px;min-height:76px}
.mockup-layer-dock .layer-thumb{width:46px;height:46px}
.mockup-layer-dock .layer-info strong{max-width:none;font-size:12px}
.mockup-layer-dock .layer-info small{font-size:10px}
.mockup-layer-dock .layer-info .layer-size{margin-top:6px;color:#171717;font-size:11px;font-weight:900;letter-spacing:.01em;white-space:normal}
.mockup-layer-dock .layer-info .layer-offsets{margin-top:3px;color:#6c675f;font-size:9px;font-weight:800;line-height:1.45;white-space:normal}
.mockup-layer-dock .layer-z-btn,.mockup-layer-dock .layer-delete{height:28px;font-size:11px}
.mockup-layer-dock .layer-delete{font-size:16px}

/* 주문 정보는 데스크톱에서 더 크고 선명한 오른쪽 열을 사용한다. */
.studio{grid-template-columns:minmax(0,1fr) 585px}
.right-panel{padding:34px}
.right-panel .panel-heading h2{font-size:28px}
.right-panel .panel-heading button{padding:11px 14px;font-size:11px}
.selected-product-card{grid-template-columns:138px minmax(0,1fr);gap:22px}
.selected-product-thumb{width:138px;height:159px}
.selected-product-card strong{font-size:20px}
.selected-product-card span,.selected-product-card small{font-size:13px;line-height:1.5}
.right-panel .order-section h3{font-size:14px}
.right-panel .quote-item-row label{font-size:11px}
.right-panel .quote-item-row select{height:44px;font-size:12px}
.right-panel .qty-control{height:44px}
.right-panel .qty-control span{font-size:13px}
.right-panel .add-quote-item{min-height:46px;font-size:12px}
.right-panel .discount-guide,.right-panel .price-block>div{font-size:12px}
.right-panel .price-block .total{font-size:15px}
.right-panel .price-block .total b{font-size:25px}
.right-panel .primary-btn{padding:19px;font-size:14px}
.right-panel .order-note{font-size:11px}

@media(max-width:980px){
  .studio{grid-template-columns:minmax(0,62fr) minmax(170px,38fr)}
  .right-panel{position:sticky;top:70px;max-height:calc(100vh - 70px);border-top:0;border-left:1px solid var(--line);padding:16px}
  .selected-product-card{grid-template-columns:1fr}
  .selected-product-thumb{width:100%;height:auto;aspect-ratio:4/3}
  .quote-item-row{grid-template-columns:1fr 30px}
  .quote-item-row label{grid-column:1/-1}
  .quote-item-row .quote-qty-field{grid-column:1}
  .quote-item-remove{grid-column:2;width:30px}
}

@media(max-width:760px){
  .studio{grid-template-columns:minmax(0,1fr);overflow:visible}
  .right-panel{position:static;top:auto;max-height:none;padding:18px;overflow:visible;border-left:0;border-top:1px solid var(--line)}
  .right-panel .panel-heading{grid-template-columns:1fr!important;gap:5px;margin-bottom:10px;padding-bottom:10px}
  .right-panel .panel-heading>span{display:none}
  .right-panel .panel-heading h2{font-size:16px}
  .selected-product-card{grid-template-columns:96px minmax(0,1fr);gap:12px;padding-bottom:14px}
  .selected-product-thumb{width:96px;height:110px;aspect-ratio:auto}
  .selected-product-switch{grid-template-columns:24px minmax(0,1fr) 24px}
  .selected-product-switch button{width:24px;height:24px}
  .selected-product-card strong{font-size:15px}
  .order-section{padding:10px 0}
  .quote-item-row{padding:6px}
  .mockup-2d-header{height:auto;min-height:64px;padding:8px;align-items:flex-start;gap:6px}
  .mockup-2d-header small{display:none}
  .mockup-side-buttons{flex-direction:column}
  .mockup-side-buttons button{padding:5px 8px;font-size:9px}
  .mockup-2d-stage{height:min(76vh,680px);min-height:500px}
  .mockup-upload-btn{left:auto;right:70px;top:14px;bottom:auto;padding:8px 10px;font-size:9px}
  .mockup-layer-toggle{right:8px;top:8px;width:54px;height:54px}
  .mockup-tools-toggle{right:8px;top:72px;width:50px;height:50px}
  .mockup-tools-panel{right:6px;top:130px;width:calc(100% - 12px);max-width:none;padding:10px}
  .mockup-layer-dock{top:74px;right:6px;bottom:42px;width:calc(100% - 12px);padding:10px;border-radius:14px}
}

/* 셀프디자인 하단 제작 가이드 */
.production-guide{padding:96px clamp(24px,5vw,76px) 112px;color:var(--ink);background:#f0eee8;border-top:1px solid var(--line)}
.production-guide-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,520px);align-items:end;gap:48px;max-width:1440px;margin:0 auto 34px}
.production-guide-kicker{display:block;margin-bottom:13px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.18em}
.production-guide-heading h2{margin:0;font-size:clamp(34px,4vw,62px);line-height:.98;letter-spacing:-.055em}
.production-guide-heading>p{margin:0;color:#666159;font-size:13px;line-height:1.8;word-break:keep-all}
.production-guide-notice{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:center;max-width:1440px;margin:0 auto 14px;padding:22px 26px;border:1px solid #d5d1c8;background:#faf9f6}
.production-guide-notice-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-family:Georgia,serif;font-size:23px;font-style:italic}
.production-guide-notice h3{margin:0 0 5px;font-size:14px}.production-guide-notice p{margin:0;color:#666159;font-size:11px;line-height:1.7;word-break:keep-all}
.production-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1440px;margin:0 auto}
.production-guide-card{display:grid;grid-template-columns:minmax(190px,42%) minmax(0,1fr);min-height:290px;overflow:hidden;border:1px solid #d5d1c8;background:#faf9f6}
.guide-visual{position:relative;min-height:290px;display:grid;place-items:center;overflow:hidden;border-right:1px solid #d5d1c8;background:#e8e5dd}
.guide-visual>span{position:absolute;left:14px;bottom:12px;padding:6px 8px;border-radius:999px;background:rgba(20,20,20,.84);color:#fff;font-size:8px;font-weight:900;letter-spacing:.06em}
.guide-visual-transparent{background-color:#eeece7;background-image:linear-gradient(45deg,#d9d6cf 25%,transparent 25%),linear-gradient(-45deg,#d9d6cf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d6cf 75%),linear-gradient(-45deg,transparent 75%,#d9d6cf 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}
.guide-artwork-symbol{position:relative;width:104px;height:104px;transform:rotate(-8deg)}
.guide-artwork-symbol i{position:absolute;left:50%;top:50%;width:42px;height:68px;border-radius:70% 30% 70% 30%;background:#e1292f;transform-origin:0 0}
.guide-artwork-symbol i:nth-child(1){transform:rotate(15deg) translate(-2px,-58px)}
.guide-artwork-symbol i:nth-child(2){transform:rotate(135deg) translate(-2px,-58px)}
.guide-artwork-symbol i:nth-child(3){transform:rotate(255deg) translate(-2px,-58px)}
.guide-artwork-symbol b{position:absolute;left:50%;top:50%;width:26px;height:26px;border:7px solid #1d1d1d;border-radius:50%;background:#f2c84b;transform:translate(-50%,-50%)}
.guide-filled-sheet{width:72%;aspect-ratio:1;display:grid;place-items:center;background:#bcc8c5;box-shadow:0 18px 42px rgba(31,39,38,.15)}
.guide-visual-line{align-content:center;gap:20px;padding:30px}.guide-visual-line>div{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;color:#716c64;font-size:9px;font-weight:800}.guide-visual-line i{display:block;background:#292929}.guide-visual-line>div:first-child i{height:1px;opacity:.35}.guide-visual-line>div:nth-child(2) i{height:7px}.guide-visual-line strong{font-family:Arial,sans-serif;font-size:62px;line-height:1;letter-spacing:-.08em}
.guide-visual-resolution{align-content:center;gap:22px}.guide-pixels{width:124px;height:124px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;transform:rotate(8deg)}.guide-pixels i{background:#1d1d1d}.guide-pixels i:nth-child(2),.guide-pixels i:nth-child(4),.guide-pixels i:nth-child(9){background:var(--accent)}
.production-guide-copy{align-self:center;padding:clamp(24px,3.2vw,48px)}.production-guide-copy>span{display:block;margin-bottom:28px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.12em}.production-guide-copy h3{margin:0 0 14px;font-size:clamp(20px,2vw,30px);line-height:1.12;letter-spacing:-.04em}.production-guide-copy p{margin:0;color:#666159;font-size:11px;line-height:1.8;word-break:keep-all}
.production-guide-checklist{max-width:1440px;margin:14px auto 0;padding:18px 22px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;border:1px solid #d5d1c8;background:#dedbd3;font-size:10px;font-weight:800}.production-guide-checklist strong{margin-right:auto;font-size:11px}.production-guide-checklist span::before{content:"✓";margin-right:7px;color:var(--accent);font-weight:950}
@media(max-width:1100px){.production-guide-card{grid-template-columns:1fr}.guide-visual{min-height:220px;border-right:0;border-bottom:1px solid #d5d1c8}}
@media(max-width:760px){.production-guide{padding:58px 16px 72px}.production-guide-heading{grid-template-columns:1fr;gap:18px;margin-bottom:24px}.production-guide-heading h2{font-size:38px}.production-guide-heading>p{font-size:11px}.production-guide-notice{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:17px 15px}.production-guide-notice-icon{width:38px;height:38px;font-size:19px}.production-guide-grid{grid-template-columns:1fr}.production-guide-card{min-height:0}.guide-visual{min-height:190px}.production-guide-copy{padding:26px 22px 30px}.production-guide-copy>span{margin-bottom:18px}.production-guide-copy h3{font-size:23px}.production-guide-checklist{align-items:flex-start;gap:10px 14px}.production-guide-checklist strong{width:100%;margin:0 0 2px}}