/* Customer layout guide: 4px base, 8 / 12 / 16 / 24 / 32 / 48 rhythm. */
:root{--layout-width:800px;--gutter:32px;--section-gap:32px;--card-pad:24px;--control-height:56px;--radius-card:20px;--radius-control:14px}
body>header{max-width:var(--layout-width);height:88px;padding-inline:var(--gutter);gap:12px}
body>header .nav-back{flex:0 0 32px;width:32px}
body>header .nav-back:disabled{display:none}
body>header .brand-home{min-width:0}body>header b{gap:8px;white-space:nowrap;font-size:20px}body>header .brand-sub{margin-left:2px;font-size:12px}body>header .kakao{white-space:nowrap;padding:8px 12px;font-size:12px}
#app,#app.is-working{max-width:var(--layout-width);padding:24px var(--gutter) 48px;min-width:0}
#app .progress{margin:0 0 32px;gap:8px}#app .progress small{margin-top:8px}
#app .hero{padding:0;text-align:left}#app .hero .eyebrow{margin:0 0 12px;line-height:1.5}
#app .hero h1{font-size:36px;line-height:1.35;letter-spacing:-1.2px;margin:0 0 16px;text-wrap:balance}
#app .hero>#hero-description{margin:0;font-size:14px;line-height:1.8}
#app #stage{margin-top:var(--section-gap)}#app #stage>.card:first-child{margin-top:0}
#app .card{padding:var(--card-pad);border-radius:var(--radius-card);margin-top:24px;min-width:0}
#app .card>:first-child{margin-top:0}#app .card>:last-child{margin-bottom:0}
#app .card>p{margin:0 0 16px}#app .card>p:last-child{margin-bottom:0}
#app .card>label{margin:24px 0 0!important}#app .card>label:first-child{margin-top:0!important}
#app input[type=text],#app input[type=tel],#app input[type=url],#app textarea,#app select{border-radius:var(--radius-control);margin-top:8px;padding:14px 16px;font-size:16px;line-height:1.6;min-width:0}
#app input[type=text],#app input[type=tel],#app input[type=url],#app select{min-height:var(--control-height)}
#app textarea{resize:vertical}#app .primary{min-height:var(--control-height);border-radius:var(--radius-control);padding:14px 18px;font-size:15px;line-height:1.6;text-align:center}
#app .card>.primary{width:100%;margin-top:24px}#app #stage>#production-request{display:block;width:100%;margin-top:24px}
#app #stage>button:not(.primary){display:block;min-height:44px;margin-top:16px!important;padding:10px 16px;font-size:13px}
#app .library-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 16px}#app .library-tabs button{min-width:0;min-height:44px;padding:10px 4px;font-size:13px;white-space:nowrap;border-radius:12px}
#app .library-grid{gap:8px}#app .library-pagination{margin:16px 0 0;gap:12px}#app .library-pagination button{min-height:40px}
#app .library-swipe-hint{margin:12px 0 8px}#app #library-selection-count{margin:0 0 24px;font-size:12px}
#app .mant-dropzone{margin:24px 0 0}#app .mant-dropzone:first-child{margin-top:0}#app .dz-target{border-radius:16px;min-height:224px}#app .dz-files:empty{margin:0}
#app .position-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 24px}#app .position-picker legend{margin-bottom:12px}#app .position-picker button{min-height:44px;padding:10px 8px;line-height:1.6}
#app .product-grid{gap:12px;margin:0;scrollbar-gutter:stable;align-items:stretch}#app .product-option{min-width:0;padding:8px;border-radius:14px;text-align:left}#app .product-option img{display:block;border-radius:8px}#app .product-option span{min-height:40px;font-size:12px;line-height:1.65;margin:8px 2px 0;overflow-wrap:anywhere}
#app .garment-colors{padding:16px;margin:24px 0 0;border-radius:16px}#app .garment-colors select{margin-top:8px}
#app .customer-logos.per-image-placement{gap:12px;margin:24px 0}#app .ai-image-preview,#app .submitted-mockup-preview{margin:0 0 24px}
#app .utility{margin:32px 0 0;padding-top:20px;border-top:1px solid #ffffff10;gap:12px;align-items:center}#app .utility button{font-size:12px;color:#94a1b5}#app .utility button:not(:first-child){margin-left:auto;background:none;box-shadow:none;border:0;padding:8px 0}
#app .test-reset-footer{margin:24px 0 0;padding-top:24px}#app .test-reset-footer button{min-height:44px;max-width:100%;font-size:12px}
#app.is-start{padding-top:32px}#app.is-start .hero{text-align:center}#app.is-start .hero h1{font-size:40px}#app.is-start .hero-art.press-art.video-hero{width:260px;margin:16px auto 0}#app.is-start #stage{margin-top:24px}#app.is-start .revised-start{gap:12px;margin:0}#app.is-start .revised-start>button,#app.is-start .revised-start>a{min-height:56px;padding:16px 20px;border-radius:16px;font-size:14px;line-height:1.6}
@media(max-width:600px){:root{--gutter:20px;--section-gap:24px;--card-pad:20px;--radius-card:18px}body>header{height:72px;gap:8px}body>header b{font-size:18px}body>header .brand-sub{display:none}body>header .kakao{font-size:11px;padding:7px 10px}body>header .nav-back{flex-basis:24px;width:24px}#app,#app.is-working{padding-top:20px;padding-bottom:32px}#app .progress{margin-bottom:24px}#app .hero h1,#app.is-start .hero h1{font-size:30px;letter-spacing:-1px}#app .hero>#hero-description{font-size:13px}#app .library-tabs{gap:6px}#app .library-tabs button{font-size:11px}#app .product-grid{gap:8px}#app .product-option{padding:6px}#app .product-option span{font-size:11px;min-height:38px}#app .dz-target{min-height:208px;padding:24px 14px}#app .position-picker button{font-size:11px}#app.is-start{padding-top:24px}#app.is-start .hero-art.press-art.video-hero{width:220px;margin-top:12px}#app.is-start #stage{margin-top:20px}#app.is-start .revised-start{gap:10px}#app.is-start .revised-start>button{font-size:13px;padding:16px}#app .utility{flex-wrap:wrap}}

#app .request-crew-highlight{padding:20px;border:1px solid #4975b4;border-radius:16px;background:linear-gradient(140deg,#20334d,#1a2433);margin:0 0 24px;overflow-wrap:anywhere}#app .request-crew-label{display:block;font-size:11px;color:#99b6dd;letter-spacing:.03em;margin-bottom:8px}#app .request-crew-highlight strong{display:block;font-size:28px;font-weight:750;line-height:1.35;letter-spacing:-.7px;color:#fff}#app .request-crew-highlight b{display:block;font-size:18px;line-height:1.5;color:#d6e7ff}#app .request-crew-highlight strong+.request-crew-label{margin-top:20px}@media(max-width:600px){#app .request-crew-highlight{padding:18px}#app .request-crew-highlight strong{font-size:24px}#app .request-crew-highlight b{font-size:16px}}

/* Cover-flow style browsing. Geometry is independent of selected state. */
#app .library-grid.cover-flow{display:block;position:relative;height:270px;width:100%;overflow:hidden;perspective:900px;isolation:isolate;touch-action:pan-y;cursor:grab;border-radius:16px;background:radial-gradient(ellipse at 50% 65%,#31446022,transparent 65%)}
#app .cover-flow button[data-cover-index]{position:absolute;left:50%;top:48%;width:180px;height:180px;margin:0;padding:7px;border:1px solid #69768755;border-radius:17px;background:#20242b;transform:translate(-50%,-50%) translateX(var(--cover-x,0px)) translateZ(var(--cover-depth,0px)) rotateY(var(--cover-turn,0deg)) scale(var(--cover-scale,1));transition:transform 520ms cubic-bezier(.2,.8,.2,1),border-color 180ms,box-shadow 180ms;backface-visibility:hidden;box-shadow:0 18px 35px #0005;line-height:0}
#app .cover-flow button img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:11px;opacity:.75;transition:opacity 300ms;pointer-events:none}
#app .cover-flow .cover-current img{opacity:1}#app .cover-flow button.selected{border-color:#78afff;box-shadow:0 0 0 2px #438bf1,0 16px 36px #0a172b88}#app .cover-flow button.selected::after{content:'✓';position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#3186fa;color:#fff;font-size:14px;line-height:1;box-shadow:0 2px 8px #0005}
#app .cover-flow.is-dragging{cursor:grabbing}#app .cover-flow.is-dragging button{transition:transform 60ms linear}
#app .selected-style-shelf{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 360ms cubic-bezier(.22,1,.36,1),opacity 260ms,margin 360ms;margin:0}
#app .selected-style-shelf.has-picks{grid-template-rows:1fr;opacity:1;margin:24px 0 0}#app .selected-style-inner{min-height:0;overflow:hidden}#app .selected-style-inner>p{font-size:12px;color:#a4bad7;margin:0 0 12px}
#app .picked-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:3px}#app .picked-strip button{position:relative;min-width:0;padding:4px;border:1px solid #4c78b4;background:#24344b;border-radius:12px;line-height:0;aspect-ratio:1}#app .picked-strip img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;border-radius:8px}#app .picked-strip span{position:absolute;right:2px;top:2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;background:#172233e8;font-size:17px;line-height:1}
@media(max-width:600px){#app .library-grid.cover-flow{height:218px}#app .cover-flow button[data-cover-index]{width:148px;height:148px;padding:5px;border-radius:14px}#app .picked-strip{gap:7px}#app .picked-strip button{padding:3px;border-radius:10px}}
@media(prefers-reduced-motion:reduce){#app .cover-flow button,#app .cover-flow img,#app .selected-style-shelf{transition:none!important}}

/* Larger covers, locked vertical center, smooth horizontal settling. */
#app .library-grid.cover-flow{height:360px;perspective-origin:50% 50%;touch-action:pinch-zoom;overflow-anchor:none}
#app .cover-flow button[data-cover-index]{width:270px;height:270px;top:50%;transform-origin:50% 50%;transition:transform 720ms cubic-bezier(.16,1,.3,1),border-color 180ms,box-shadow 180ms;will-change:transform}
#app .cover-flow.is-dragging button{transition:transform 0ms,border-color 180ms,box-shadow 180ms}
@media(max-width:600px){#app .library-grid.cover-flow{height:300px}#app .cover-flow button[data-cover-index]{width:222px;height:222px}}
@media(prefers-reduced-motion:reduce){#app .cover-flow button[data-cover-index]{transition:none!important}}
#app .library-pagination button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

#app.is-start .revised-start>button{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 20px;text-align:left}#app .start-menu-icon{display:block;width:44px;height:44px;flex:0 0 44px;overflow:visible;filter:drop-shadow(0 3px 9px #6541c522)}#app .start-menu-label{display:block;min-width:0;line-height:1.5}#app.is-start .revised-start>button:hover .start-menu-icon{filter:drop-shadow(0 3px 10px #8862fc55)}@media(max-width:600px){#app.is-start .revised-start>button{gap:12px;padding:12px 16px;min-height:72px}#app .start-menu-icon{width:38px;height:38px;flex-basis:38px}}
#app .start-menu-icon{width:35.2px;height:35.2px;flex-basis:35.2px}@media(max-width:600px){#app .start-menu-icon{width:30.4px;height:30.4px;flex-basis:30.4px}}

#app .start-menu-icon{filter:none}#app.is-start .revised-start>button:hover .start-menu-icon{filter:drop-shadow(0 2px 6px #ffffff12)}
/* A flat horizontal strip controlled by the progress slider. */
#app .library-grid.cover-flow{perspective:none;cursor:default;touch-action:pan-y;isolation:isolate}
#app .cover-flow button[data-cover-index]{transform:translate(-50%,-50%) translateX(var(--cover-x,0px));transition:transform 240ms cubic-bezier(.22,1,.36,1),border-color 180ms,box-shadow 180ms;z-index:1!important}
#app .cover-flow button img{opacity:1}
#app .style-progress-control{margin:8px 0 0;padding:8px 0 0}#app .style-progress-labels,#app .style-progress-ends{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#aebcd0}#app .style-progress-ends{font-size:10px;color:#76849a}
#app #style-progress{display:block;width:100%;height:44px;min-height:44px;margin:4px 0;cursor:ew-resize;appearance:none;-webkit-appearance:none;background:transparent;touch-action:none;padding:0}
#app #style-progress::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,#579cff 0 var(--range-progress,0%),#353e4d var(--range-progress,0%) 100%)}#app #style-progress::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background:#dcecff;border:3px solid #4a93fa;border-radius:50%;box-shadow:0 2px 8px #0005}
#app #style-progress::-moz-range-track{height:6px;border-radius:6px;background:#353e4d}#app #style-progress::-moz-range-progress{height:6px;border-radius:6px;background:#579cff}#app #style-progress::-moz-range-thumb{width:16px;height:16px;border:3px solid #4a93fa;border-radius:50%;background:#dcecff}
#app #style-progress:focus-visible{outline:2px solid #80b6ff;outline-offset:3px;border-radius:8px}@media(prefers-reduced-motion:reduce){#app .cover-flow button[data-cover-index]{transition:none!important}}

/* Preserve the original layered cover-flow arrangement, controlled by the slider. */
#app .library-grid.cover-flow{perspective:900px;perspective-origin:50% 50%;overflow:hidden}
#app .cover-flow button[data-cover-index]{transform:translate(-50%,-50%) translateX(var(--cover-x,0px)) translateZ(var(--cover-depth,0px)) rotateY(var(--cover-turn,0deg)) scale(var(--cover-scale,1));z-index:auto!important;transition:transform 520ms cubic-bezier(.22,1,.36,1),border-color 180ms,box-shadow 180ms}
#app .cover-flow button[data-cover-index]{z-index:var(--cover-layer,1)!important}
#app .cover-flow button img{opacity:.8}#app .cover-flow .cover-current img{opacity:1}
@media(prefers-reduced-motion:reduce){#app .cover-flow button[data-cover-index]{transition:none!important}}

#app .style-progress-row{display:flex;align-items:center;gap:14px}#app .style-progress-row button{flex:0 0 auto;min-height:44px;padding:9px 13px;font-size:12px;border-radius:12px}#app .style-progress-row #style-progress{flex:1;min-width:0;width:auto}#app .style-progress-ends{padding-inline:66px}@media(max-width:600px){#app .style-progress-row{gap:10px}#app .style-progress-row button{padding:9px 11px}#app .style-progress-ends{padding-inline:58px}}
#app .library-view-switch{display:flex;justify-content:flex-end;gap:6px;margin:0 0 12px}#app .library-view-switch button{min-height:40px;padding:8px 12px;font-size:12px;border-radius:10px}
#app .library-grid.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;width:100%;aspect-ratio:1;height:auto;perspective:none;overflow:hidden;background:none;touch-action:pan-y}
#app .style-grid button[data-cover-index]{position:relative;inset:auto;margin:0;min-width:0;width:100%;height:100%;padding:6px;border-radius:14px;transform:none!important;visibility:visible;line-height:0;box-shadow:none;transition:border-color 180ms,background 180ms}
#app .style-grid button img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:9px;opacity:1}
#app .style-grid button.selected{border-color:#78afff;box-shadow:inset 0 0 0 1px #438bf1}#app .style-grid button.selected::after{content:'✓';position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#3186fa;color:#fff;font-size:13px;line-height:1}
@media(max-width:600px){#app .library-grid.style-grid{gap:8px}#app .style-grid button[data-cover-index]{padding:4px;border-radius:11px}#app .library-view-switch button{font-size:11px;padding:8px 10px}}

#app.phase-style #stage>.card{position:relative;overflow:hidden}#app .grid-slide-snapshot{contain:layout paint;user-select:none}
/* Three-row continuous column strip: advance one column, never replace nine tiles. */
#app .library-grid.style-grid{display:block;position:relative;height:auto;aspect-ratio:1;overflow:hidden;touch-action:pan-y}
#app .style-grid button[data-cover-index]{position:absolute;left:var(--grid-x);top:var(--grid-y);width:var(--grid-cell);height:var(--grid-cell);transform:none!important;transition:left 380ms cubic-bezier(.22,1,.36,1),border-color 180ms,background 180ms}
#app .library-view-switch{position:relative;display:flex;width:max-content;max-width:100%;justify-content:center;gap:2px;margin:0 auto 20px;padding:4px;background:#262626;border:1px solid #333;border-radius:12px;isolation:isolate}
#app .library-view-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border:1px solid transparent;background:transparent;color:#a4a4a4;border-radius:9px;padding:7px 14px;font-size:12px;box-shadow:none;transition:background 200ms,color 200ms,border-color 200ms,box-shadow 200ms}
#app .library-view-switch button[data-library-view=cover]::before{content:'▱';font-size:17px;line-height:1}#app .library-view-switch button[data-library-view=grid]::before{content:'▦';font-size:17px;line-height:1}
#app .library-view-switch button.selected{color:#fafafa;background:#414141;border-color:#909090;box-shadow:0 0 0 2px #ffffff18,inset 0 1px 0 #ffffff12}
@media(prefers-reduced-motion:reduce){#app .style-grid button[data-cover-index]{transition:none!important}}
#app .style-grid.grid-scrubbing button[data-cover-index]{transition:none!important}#app .style-grid{cursor:grab}#app .style-grid.grid-scrubbing{cursor:grabbing}
/* GPU-backed column movement; tiles stay mounted and visible to avoid edge popping. */
#app .library-grid.style-grid{cursor:default;touch-action:pan-y}
#app .style-grid button[data-cover-index]{left:0;top:var(--grid-y);transform:translate3d(var(--grid-x),0,0)!important;transition:transform 540ms cubic-bezier(.22,1,.36,1),border-color 180ms,background 180ms;will-change:transform;backface-visibility:hidden;cursor:pointer}
#app .style-grid button img{-webkit-user-drag:none;user-select:none}
@media(prefers-reduced-motion:reduce){#app .style-grid button[data-cover-index]{transition:none!important}}
/* Keep grid tiles sharp: no composited motion trail or trailing easing. */
#app .style-grid button[data-cover-index]{transform:translateX(var(--grid-x))!important;transition:transform 220ms ease-out,border-color 120ms,background 120ms;will-change:auto;backface-visibility:visible;filter:none;box-shadow:none!important}
#app .style-grid button img{transition:none!important;filter:none;opacity:1!important;backface-visibility:visible}
@media(prefers-reduced-motion:reduce){#app .style-grid button[data-cover-index]{transition:none!important}}
#app .vanish-shell{position:relative;display:block;min-width:0;width:100%;border-radius:var(--radius-control)}#app .vanish-shell>.vanish-field{display:block;width:100%;margin:0!important;position:relative;z-index:1;background:transparent;transition:border-color 200ms,box-shadow 200ms}#app .vanish-shell{background:#191b1f}#app .vanish-field::placeholder{color:transparent!important}#app .vanish-placeholder{position:absolute;display:block;z-index:2;color:#7d8692;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;transition:opacity 150ms}#app .vanish-shell.has-value .vanish-placeholder{opacity:0}#app .vanish-shell.field-focused{box-shadow:0 0 0 3px #3186fa0d}.vanish-particles{position:fixed;z-index:50;pointer-events:none;contain:strict}@media(prefers-reduced-motion:reduce){#app .vanish-placeholder,#app .vanish-field{transition:none!important}.vanish-particles{display:none!important}}
#app .vanish-field.vanish-pending{color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:transparent!important}
#app.phase-product #stage>.card{overflow:hidden}
#app .garment-browser button[data-cover-index]{overflow:hidden}
#app .garment-browser .garment-caption{position:absolute;left:5px;right:5px;bottom:5px;padding:8px 6px;background:#111e;color:#fff;font-size:11px;line-height:1.4;border-radius:0 0 9px 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
#app .garment-selected-name{font-size:13px;line-height:1.6;margin:14px 0 24px;color:#9ca5b4}#app .garment-selected-name strong{color:#e9edf4}
#app .style-progress-row #garment-progress{flex:1;min-width:0;width:auto;min-height:32px;padding:0;border:0;box-shadow:none;accent-color:#5798ff;cursor:pointer}
#app .library-view-switch button[data-garment-view=cover]::before{content:'▱';font-size:17px;line-height:1}#app .library-view-switch button[data-garment-view=grid]::before{content:'▦';font-size:17px;line-height:1}


#app #garment-progress{display:block;width:100%;height:44px;min-height:44px;margin:4px 0;cursor:ew-resize;appearance:none;-webkit-appearance:none;background:transparent;touch-action:none;padding:0}
#app #garment-progress::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,#579cff 0 var(--range-progress,0%),#353e4d var(--range-progress,0%) 100%)}#app #garment-progress::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background:#dcecff;border:3px solid #4a93fa;border-radius:50%;box-shadow:0 2px 8px #0005}
#app #garment-progress::-moz-range-track{height:6px;border-radius:6px;background:#353e4d}#app #garment-progress::-moz-range-progress{height:6px;border-radius:6px;background:#579cff}#app #garment-progress::-moz-range-thumb{width:16px;height:16px;border:3px solid #4a93fa;border-radius:50%;background:#dcecff}
#app #garment-progress:focus-visible{outline:2px solid #80b6ff;outline-offset:3px;border-radius:8px}#app .style-progress-row #garment-progress{flex:1;min-width:0;width:auto}
#app .garment-toolbar{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:20px 0}#app .garment-toolbar .library-view-switch{margin:0;flex-shrink:0}#app .garment-category-label{margin:0;min-width:0;max-width:250px;flex:1}#app .garment-category-label>span{display:block;font-size:11px;color:#9ca5b4;margin-bottom:6px}#app #garment-category{margin:0;font-size:12px;min-height:46px;height:46px;padding:10px;border-radius:12px}
#app .garment-browser.style-grid{aspect-ratio:auto;height:384px}#app .garment-browser.style-grid button[data-cover-index]{width:100%;height:120px;display:flex;align-items:center;gap:18px;padding:8px;text-align:left}#app .garment-browser.style-grid button img{width:104px;height:104px;flex:0 0 104px;object-fit:contain}#app .garment-browser.style-grid .garment-caption{position:static;background:none;color:#edf1f8;padding:0 14px 0 0;font-size:14px;line-height:1.6;text-align:left;border-radius:0;-webkit-line-clamp:3}
@media(max-width:600px){#app .garment-toolbar{gap:8px}#app .garment-toolbar .library-view-switch button{padding:7px 8px;font-size:11px}#app .garment-browser.style-grid{height:328px}#app .garment-browser.style-grid button[data-cover-index]{height:104px;gap:12px}#app .garment-browser.style-grid button img{width:88px;height:88px;flex-basis:88px}#app .garment-browser.style-grid .garment-caption{font-size:12px;padding-right:4px}}
#app.phase-product #stage>.placement-card{margin-bottom:20px}#app .placement-card .position-picker{margin:0}#app .garment-toolbar{margin-top:0}
#app .garment-browser .garment-caption{display:block;-webkit-line-clamp:unset}#app .garment-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#app .garment-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;justify-content:center}#app .garment-badge{display:inline-block;padding:3px 6px;border:1px solid #639cff55;border-radius:6px;background:#24436a;color:#c4dfff;font-size:10px;line-height:1.3;white-space:nowrap}#app .garment-browser.style-grid .garment-badges{justify-content:flex-start}#app .garment-browser.style-grid .garment-caption{flex:1;min-width:0}
@media(max-width:600px){#app .garment-badge{font-size:9px;padding:2px 4px}#app .garment-browser.style-grid .garment-name{-webkit-line-clamp:2}}
#app .garment-material{display:inline-block;vertical-align:middle;margin-right:6px;padding:2px 6px;border-radius:5px;border:1px solid #8ab9da66;background:#263f4b;color:#c6edff;font-size:10px;line-height:1.5;white-space:nowrap}
#app .garment-name-row{display:flex;align-items:center;gap:8px;text-align:left}#app .garment-materials{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:0 1 auto;max-width:45%}#app .garment-material{margin:0;vertical-align:initial}#app .garment-name{flex:1;min-width:0;font-size:16px;font-weight:700;line-height:1.5}#app .garment-browser.cover-flow .garment-name-row{gap:5px}#app .garment-browser.cover-flow .garment-name{font-size:14px}#app .garment-browser.cover-flow .garment-materials{max-width:42%}
@media(max-width:600px){#app .garment-name-row{gap:6px}#app .garment-name{font-size:14px}#app .garment-browser.cover-flow .garment-name{font-size:13px}#app .garment-materials{max-width:40%}}
/* Garment card guide: square image → separate information → navigation.
   Spacing uses 4/8/12/16/24px; names 16px/700, badges 10px/500. */
#app .garment-browser.cover-flow .garment-caption{display:none}
#app .garment-browser.cover-flow button.selected::after{display:none}
#app .garment-cover-detail{max-width:440px;min-height:92px;margin:0 auto 24px;padding:16px 20px;background:#191d23;border:1px solid #343c48;border-radius:14px;text-align:left}
#app .garment-cover-detail[hidden]{display:none}
#app .garment-cover-detail .garment-name-row{align-items:center;gap:8px}
#app .garment-cover-detail .garment-name{font-size:16px;line-height:1.5;font-weight:700;display:block;overflow:visible}
#app .garment-cover-detail .garment-materials{max-width:45%;gap:4px}
#app .garment-cover-detail .garment-badges{justify-content:flex-start;gap:6px;margin-top:12px}
#app .garment-detail-selected{display:block;color:#8dbbff;font-size:11px;line-height:1.5;margin-top:12px}
#app .garment-badge,#app .garment-material{font-weight:500;line-height:1.5}
@media(max-width:600px){#app .garment-cover-detail{padding:16px;margin-bottom:20px;min-height:88px}#app .garment-cover-detail .garment-name{font-size:15px}#app .garment-cover-detail .garment-badges{gap:4px;margin-top:10px}#app .garment-cover-detail .garment-badge,#app .garment-cover-detail .garment-material{font-size:10px}}
#app .picked-strip .picked-number{position:absolute;top:7px;left:7px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:7px;background:#3186fa;color:#fff;font-size:12px;font-weight:700;line-height:1;box-shadow:0 2px 6px #0003}
/* The list shares the large-view information layout, placed beside the image. */
#app .garment-browser.style-grid .garment-caption{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;min-width:0;padding:0 12px 0 0;text-align:left;line-height:1.5}
#app .garment-browser.style-grid .garment-name-row{display:flex;align-items:center;gap:8px;min-width:0}
#app .garment-browser.style-grid .garment-name{font-size:16px;font-weight:700;line-height:1.5}
#app .garment-browser.style-grid .garment-materials{display:flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:45%;flex:0 1 auto}
#app .garment-browser.style-grid .garment-badges{justify-content:flex-start;align-items:center;gap:6px;margin-top:12px}
#app .garment-browser.style-grid .garment-badge,#app .garment-browser.style-grid .garment-material{font-size:10px;font-weight:500;line-height:1.5}
@media(max-width:600px){#app .garment-browser.style-grid .garment-caption{padding-right:4px}#app .garment-browser.style-grid .garment-name-row{gap:6px}#app .garment-browser.style-grid .garment-name{font-size:15px}#app .garment-browser.style-grid .garment-badges{gap:4px;margin-top:10px}#app .garment-browser.style-grid .garment-materials{max-width:45%}}
/* Material tags run horizontally before the name, without a narrow stacked column. */
#app .garment-browser.style-grid .garment-name-row{display:block;line-height:1.7}
#app .garment-browser.style-grid .garment-materials{display:inline-flex;vertical-align:middle;flex-wrap:nowrap;max-width:none;gap:4px;margin:0 7px 0 0}
#app .garment-browser.style-grid .garment-name{display:inline;vertical-align:middle;overflow:visible;-webkit-line-clamp:unset;line-height:1.7}
#app .garment-selected-detail{max-width:none;margin:20px 0 24px;background:#191d23;border-color:#4b79b0}
#app .selected-garment-label{font-size:11px;line-height:1.5;color:#a9c9f5;margin:0 0 12px}
#app .garment-selected-detail>.muted{margin:0;font-size:13px}
@media(max-width:600px){#app .garment-browser.style-grid .garment-materials{gap:3px;margin-right:5px}#app .garment-selected-detail{margin:16px 0 20px}}
/* Large view: image, material tags, product name, recommendation line. */
#app .garment-browser.cover-flow{height:400px}
#app .garment-browser.cover-flow button[data-cover-index]{width:300px;height:300px}
#app .garment-cover-detail .garment-name-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#app .garment-cover-detail .garment-materials{max-width:100%;flex-wrap:wrap;gap:6px}
#app .garment-cover-detail .garment-name{width:100%;flex:auto;display:block;font-size:17px;line-height:1.5}
#app .garment-cover-detail .garment-badges{margin-top:12px;align-items:center;gap:6px}
#app .garment-cover-detail .garment-badges::before{content:'추천해요!';display:inline-block;flex-shrink:0;margin-right:3px;font-size:11px;font-weight:700;color:#a8c8fa;line-height:1.5}
#app .garment-selected-detail{margin-top:40px}
@media(max-width:600px){#app .garment-browser.cover-flow{height:330px}#app .garment-browser.cover-flow button[data-cover-index]{width:244px;height:244px}#app .garment-cover-detail .garment-name{font-size:16px}#app .garment-selected-detail{margin-top:32px}}
/* List view follows the same three-line information hierarchy as large view. */
#app .garment-browser.style-grid{height:504px}
#app .garment-browser.style-grid button[data-cover-index]{height:160px;padding:10px;gap:18px}
#app .garment-browser.style-grid button img{width:128px;height:128px;flex-basis:128px}
#app .garment-browser.style-grid .garment-name-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;line-height:1.5}
#app .garment-browser.style-grid .garment-materials{display:flex;flex-wrap:wrap;max-width:100%;margin:0;gap:4px}
#app .garment-browser.style-grid .garment-name{display:-webkit-box;width:100%;flex:auto;font-size:16px;font-weight:700;line-height:1.5;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#app .garment-browser.style-grid .garment-badges{margin-top:10px;gap:5px;align-items:center}
#app .garment-browser.style-grid .garment-badges::before{content:'추천해요!';flex-shrink:0;margin-right:3px;color:#a8c8fa;font-size:11px;font-weight:700;line-height:1.5}
@media(max-width:600px){#app .garment-browser.style-grid{height:460px}#app .garment-browser.style-grid button[data-cover-index]{height:148px;padding:8px;gap:12px}#app .garment-browser.style-grid button img{width:100px;height:100px;flex-basis:100px}#app .garment-browser.style-grid .garment-name-row{gap:6px}#app .garment-browser.style-grid .garment-name{font-size:15px}#app .garment-browser.style-grid .garment-badges{gap:4px;margin-top:8px}#app .garment-browser.style-grid .garment-badges::before{font-size:10px}}
#app .garment-selected-detail{position:relative;padding-right:58px}
#app .garment-clear-choice{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid #48576c;border-radius:10px;background:#252c37;color:#c8d6e9;font-size:24px;line-height:1}
#app .garment-clear-choice:hover{background:#334155;color:#fff;border-color:#81aff0}
#app .garment-clear-choice:focus-visible{outline:2px solid #81aff0;outline-offset:3px}
/* Compact list metadata forms one vertically centered information group. */
#app .garment-browser.style-grid button[data-cover-index]{align-items:center}
#app .garment-browser.style-grid .garment-caption{align-self:center;display:flex;flex-direction:column;justify-content:center;gap:0;padding-block:0;line-height:1.4}
#app .garment-browser.style-grid .garment-name-row{gap:5px;line-height:1.4}
#app .garment-browser.style-grid .garment-materials{gap:4px;line-height:1.3}
#app .garment-browser.style-grid .garment-name{line-height:1.4}
#app .garment-browser.style-grid .garment-badges{margin-top:6px;gap:4px;line-height:1.3}
#app .garment-browser.style-grid .garment-material,#app .garment-browser.style-grid .garment-badge{padding:2px 6px;line-height:1.3}
#app .garment-browser.style-grid .garment-badges::before{line-height:1.3;margin-right:2px}
@media(max-width:600px){#app .garment-browser.style-grid .garment-name-row{gap:4px}#app .garment-browser.style-grid .garment-badges{margin-top:5px;gap:4px}#app .garment-browser.style-grid .garment-material,#app .garment-browser.style-grid .garment-badge{padding:2px 4px}}
#app .garment-badges{align-items:center}
#app .garment-cover-detail .garment-badges::before,#app .garment-browser.style-grid .garment-badges::before{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:24px;padding:0;line-height:1;font-size:13px;font-weight:700;margin-right:4px}
#app .garment-cover-detail .garment-badge,#app .garment-browser.style-grid .garment-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:24px;padding:3px 6px;line-height:1.2;vertical-align:middle}
@media(max-width:600px){#app .garment-cover-detail .garment-badges::before,#app .garment-browser.style-grid .garment-badges::before{font-size:12px;height:23px}#app .garment-cover-detail .garment-badge,#app .garment-browser.style-grid .garment-badge{min-height:23px;padding:3px 5px}}
#app #stage .primary:disabled,#app #stage .primary.requirements-incomplete{background:#363b43!important;background-image:none!important;border-color:#444b55!important;color:#89919e!important;box-shadow:none!important;cursor:not-allowed;opacity:1;transform:none!important}
#app #stage .primary:not(:disabled){transition:background 180ms,color 180ms,border-color 180ms,box-shadow 180ms,transform 150ms}
#app .garment-selected-detail .selected-garment-label{font-size:17px;font-weight:700;line-height:1.5;margin-bottom:12px}
@media(max-width:600px){#app .garment-selected-detail .selected-garment-label{font-size:16px}}
/* Centered cover image and its metadata share one continuous card surface. */
#app .garment-browser.cover-flow{height:352px;overflow:visible;border-radius:16px 16px 0 0}
#app .garment-browser.cover-flow button[data-cover-index]{top:calc(50% + 26px);border-radius:16px 16px 0 0}
#app .garment-browser.cover-flow button.cover-current{background:#191d23;border-color:#343c48;border-bottom:0;box-shadow:none;padding:8px 8px 0}
#app .garment-browser.cover-flow button.cover-current img{border-radius:10px 10px 0 0;opacity:1}
#app .garment-cover-detail:not(.garment-selected-detail){position:relative;z-index:30;box-sizing:border-box;width:300px;max-width:100%;margin:0 auto 24px;padding:16px;border-top:0;border-radius:0 0 16px 16px;background:#191d23;box-shadow:0 16px 30px #0002}
#app .garment-cover-detail:not(.garment-selected-detail) .garment-name{font-size:16px}
#app .garment-browser.cover-flow button.selected.cover-current{border-color:#78afff;box-shadow:none}
@media(max-width:600px){#app .garment-browser.cover-flow{height:290px}#app .garment-browser.cover-flow button[data-cover-index]{top:calc(50% + 23px)}#app .garment-cover-detail:not(.garment-selected-detail){width:244px;padding:14px}#app .garment-cover-detail:not(.garment-selected-detail) .garment-name{font-size:15px}}
/* Every cover is a complete product card; image and metadata move as one. */
#app .garment-browser.cover-flow{height:520px;overflow:hidden;border-radius:16px}
#app .garment-browser.cover-flow button[data-cover-index]{top:50%;width:300px;height:470px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px;border:1px solid #343c48;border-radius:16px;background:#191d23;box-shadow:0 12px 28px #0003;line-height:1.5}
#app .garment-browser.cover-flow button[data-cover-index] img{display:block;width:282px;height:282px;aspect-ratio:1;flex:0 0 282px;object-fit:contain;border-radius:10px}
#app .garment-browser.cover-flow .garment-caption{position:static;display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;background:none;color:#edf1f8;margin:0;padding:12px 8px;text-align:left;border-radius:0;overflow:auto;line-height:1.5}
#app .garment-browser.cover-flow .garment-name-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#app .garment-browser.cover-flow .garment-materials{max-width:100%;flex-wrap:wrap;gap:4px}
#app .garment-browser.cover-flow .garment-name{display:block;flex:auto;width:100%;font-size:16px;line-height:1.5;font-weight:700;overflow:visible}
#app .garment-browser.cover-flow .garment-badges{justify-content:flex-start;align-items:center;gap:4px;margin-top:10px}
#app .garment-browser.cover-flow .garment-badges::before{content:'추천해요!';display:inline-flex;align-items:center;justify-content:center;align-self:center;height:24px;margin-right:4px;font-size:13px;font-weight:700;line-height:1;color:#a8c8fa}
#app .garment-browser.cover-flow .garment-badge{display:inline-flex;align-items:center;min-height:24px;padding:3px 6px;box-sizing:border-box;line-height:1.2}
#app .garment-browser.cover-flow+.garment-cover-detail:not(.garment-selected-detail){display:none!important}
#app .garment-browser.cover-flow button.selected.cover-current{border:1px solid #78afff;box-shadow:0 0 0 1px #438bf1}
@media(max-width:600px){#app .garment-browser.cover-flow{height:460px}#app .garment-browser.cover-flow button[data-cover-index]{width:244px;height:418px;padding:6px}#app .garment-browser.cover-flow button[data-cover-index] img{width:230px;height:230px;flex-basis:230px}#app .garment-browser.cover-flow .garment-caption{padding:12px 8px}#app .garment-browser.cover-flow .garment-name{font-size:15px}#app .garment-browser.cover-flow .garment-badges::before{font-size:12px;height:23px}#app .garment-browser.cover-flow .garment-badge{min-height:23px}}
#app .request-ai-summary{margin:0 0 24px;width:100%;position:relative}
#app .request-ai-summary>img{display:block;width:100%;height:auto;max-height:760px;object-fit:contain;background:#111;border-radius:12px}
#app .request-ai-summary figcaption{margin-top:10px;color:#9ba5b4;font-size:11px;line-height:1.5}
#app .step-navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;width:100%}
#app .step-navigation>button{margin:0!important;min-height:44px;padding:11px 20px;border-radius:12px}
#app .step-navigation .step-next{margin-left:auto!important;background:#3186fa;color:#fff;border-color:#3186fa}
#app .step-navigation .step-next:disabled{background:#363b43;color:#89919e;border-color:#444b55;box-shadow:none;cursor:not-allowed;opacity:1;transform:none}
#app .restart-from-beginning{display:block;width:100%;margin:24px 0 0;min-height:44px;background:transparent;color:#9faaba;border:1px solid #343d4a;border-radius:12px;font-size:12px}
#app .restart-from-beginning:hover{color:#e7edf6;border-color:#6c86a7;background:#202733}
body>header b img.brand-icon{object-fit:contain;overflow:visible;background:transparent;width:36px;height:36px;flex-basis:36px}
@media(max-width:600px){body>header .brand-sub{display:inline;font-size:11px;margin-left:0;letter-spacing:0}body>header b{gap:5px}body>header b img.brand-icon{width:32px;height:32px;flex-basis:32px}}
@media(max-width:360px){body>header{padding-inline:16px;gap:6px}body>header b{font-size:16px;gap:4px}body>header .brand-sub{font-size:10px}body>header .kakao{font-size:10px;padding:6px 8px}}
/* Header controls share one optical center line. */
body>header{align-items:center}
body>header .brand-home{display:flex;align-items:center;align-self:center;line-height:1;text-decoration:none}
body>header .brand-home>b{display:flex;align-items:center;line-height:1;margin:0;padding:0}
body>header .brand-sub{display:block;align-self:center;line-height:1;margin-top:0;margin-bottom:0}
body>header .nav-back{display:flex;align-items:center;justify-content:center;align-self:center;margin:0;padding:0 0 4px;line-height:1;height:40px;min-height:40px;flex-shrink:0;transform:none}
body>header .kakao{display:flex;align-items:center;justify-content:center;align-self:center;line-height:1.2;min-height:34px;margin-top:0;margin-bottom:0}
@media(max-width:600px){body>header .nav-back{height:36px;min-height:36px;font-size:32px;padding-bottom:4px}body>header .brand-sub{display:block;line-height:1}body>header .kakao{min-height:30px}}
body>header .brand-intern{display:inline-flex;align-items:center;justify-content:center;align-self:center;font-size:9px;font-weight:500;line-height:1;letter-spacing:0;color:#a8b9d0;background:#19212c;border:1px solid #344357;border-radius:4px;padding:3px 4px;margin-left:-3px;white-space:nowrap}
@media(max-width:600px){body>header .brand-intern{font-size:8px;padding:3px;margin-left:-2px}}
@media(max-width:360px){body>header .brand-intern{font-size:8px;padding:2px}}
#app .generation-allowance{display:grid;gap:6px;margin:20px 0 16px;padding:14px 16px;border:1px solid #34475e;border-radius:12px;background:#19222d}#app .generation-allowance strong{font-size:14px;color:#c1dbff}#app .generation-allowance small{font-size:11px;line-height:1.6;color:#a2b0c4}#app .generation-allowance button{width:max-content;max-width:100%;font-size:11px;min-height:32px;padding:5px 8px}
.generation-access-dialog{width:min(420px,calc(100% - 40px));padding:24px;border:1px solid #3b4a61;border-radius:20px;background:#1c222b;color:#f0f4fa;box-shadow:0 24px 80px #0008}.generation-access-dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.generation-access-dialog h2{font-size:21px;line-height:1.5;margin:0 0 12px}.generation-access-dialog p{font-size:14px;line-height:1.7;color:#aab7c9}.generation-access-dialog button,.generation-access-dialog a{display:block;text-align:center;width:100%;margin-top:12px;min-height:46px;border-radius:12px;padding:12px;text-decoration:none;font-size:14px}.customer-kakao-login{background:#fee500;color:#191919;font-weight:700}

#app .customer-footer-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:24px 0 0;padding-top:24px;border-top:1px solid #ffffff12}#app .customer-footer-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #333c49;border-radius:10px;background:transparent;color:#a6b2c4;font-size:13px;text-decoration:none;transition:color .18s,border-color .18s,background .18s}#app .customer-footer-links a:hover{color:#eef4ff;border-color:#60738f;background:#ffffff08}#app .customer-footer-links a:focus-visible{outline:2px solid #3186ff;outline-offset:3px}

#app .customer-footer-links button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #333c49;border-radius:10px;background:transparent;color:#a6b2c4;font-size:13px;cursor:pointer}#app .customer-footer-links button:hover{color:#eef4ff;border-color:#60738f;background:#ffffff08}#app .customer-footer-links button:disabled{opacity:.5;cursor:wait}#app .customer-footer-links button:focus-visible{outline:2px solid #3186ff;outline-offset:3px}#customer-auth-status{flex-basis:100%;font-size:12px;color:#a6b2c4;text-align:center;min-height:18px}

/* Built with Motion reference: staggered blurred letters and a moving colour dot. */
.home-rotating-title{display:block!important;min-height:2.5em;line-height:1.25!important}.home-motion-text{display:block;white-space:pre-line}.home-motion-letter{display:inline-block}.home-motion-dot{display:inline-block;width:.22em;height:.22em;margin-left:.12em;border-radius:999px;background:#3b82f6;vertical-align:.06em;animation:home-dot-motion 1.4s ease-in-out infinite;transition:background-color .3s ease}@keyframes home-dot-motion{0%,100%{transform:translate(0,0) scaleX(1)}35%{transform:translate(2px,-2px) scaleX(1.35)}70%{transform:translate(-1px,1px) scaleX(.9)}}@media(prefers-reduced-motion:reduce){.home-motion-dot{animation:none}.home-motion-letter{animation:none}}

.duplicate-request-chat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;margin-top:12px;border-radius:12px;background:#fee500;color:#191919!important;font-size:14px;font-weight:700;text-decoration:none;border:1px solid #fee500}.duplicate-request-chat:hover{background:#ffed45}.duplicate-request-chat:focus-visible{outline:3px solid #3186ff;outline-offset:3px}