@font-face{font-family:Pretendard;src:url('../assets/fonts/Pretendard-Regular-subset.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url('../assets/fonts/Pretendard-SemiBold-subset.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Pretendard;src:url('../assets/fonts/Pretendard-Bold-subset.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Pretendard;src:url('../assets/fonts/Pretendard-ExtraBold-subset.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--orange:#ff5a00;--ink:#20201f;--gray:#7d7d7d;--unit:calc(100vw / 1920)}
*{box-sizing:border-box}html,body{margin:0;background:#fff;color:var(--ink);font-family:Pretendard,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:#fff;border:1px solid #d5d5d5;transition:background .15s,transform .15s;white-space:nowrap}button:hover{background:#f5f5f5}button:active{transform:translateY(1px)}button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{cursor:default;opacity:.4}#app{position:relative;width:100%;height:100svh;min-height:calc(900 * var(--unit));overflow:hidden}.brand{position:absolute;left:5%;top:6.6667%;z-index:3}.brand{width:calc(71 * var(--unit));height:calc(52 * var(--unit));overflow:hidden}.brand img{display:block;position:absolute;width:calc(137.24 * var(--unit));height:calc(137.24 * var(--unit));left:calc(-32.84 * var(--unit));top:calc(-42.35 * var(--unit))}.intro{position:absolute;left:5%;top:16.2%;z-index:2;pointer-events:none}h1{font-size:calc(93 * var(--unit));line-height:1.12;letter-spacing:-.045em;margin:0;font-weight:800}.subtitle{font-size:calc(28 * var(--unit));color:var(--gray);margin:calc(10 * var(--unit)) 0 0;line-height:1.5;letter-spacing:-.03em}.cargo-controls{position:absolute;left:5.2%;top:33.33%;z-index:3}.chips{display:flex;gap:calc(9 * var(--unit))}.chips button{font-size:calc(20 * var(--unit));line-height:1;padding:calc(9 * var(--unit)) calc(12 * var(--unit));min-height:calc(38 * var(--unit));border-radius:calc(10 * var(--unit));font-weight:600}.chips button.accent{background:var(--orange);border-color:var(--orange);color:#fff}.chips button.accent:hover{background:#e95000}.initial-note{font-size:calc(18 * var(--unit));color:var(--gray);margin:calc(20 * var(--unit)) 0 0;line-height:1.4}#box-count{font-size:calc(16 * var(--unit));color:#929292;margin:calc(9 * var(--unit)) 0 0}.vehicle{position:absolute;left:73.96%;top:14%;width:18.75%;z-index:3}.vehicle-heading{margin:0 0 calc(12 * var(--unit));font-size:calc(20 * var(--unit));font-weight:600;color:var(--gray)}.vehicle-buttons{display:flex;gap:calc(9 * var(--unit));margin-bottom:calc(16 * var(--unit))}.vehicle-buttons button{font-size:calc(23 * var(--unit));font-weight:700;padding:calc(8 * var(--unit)) calc(19 * var(--unit));border-radius:999px;border-color:#c9c9c9;line-height:1.25}.vehicle-buttons .selected{background:var(--ink);color:white;border-color:var(--ink)}.recommend{font-size:calc(18 * var(--unit));color:var(--gray)}.recommend strong{font-size:calc(24 * var(--unit));color:var(--ink);margin-left:calc(19 * var(--unit))}#bed-size,#fill-text{font-size:calc(18 * var(--unit));color:var(--gray);margin:calc(10 * var(--unit)) 0}.gauge{height:calc(7 * var(--unit));background:#e6e6e6;border-radius:10px;position:relative;overflow:hidden;margin-top:calc(14 * var(--unit))}.gauge i{display:block;min-width:1px;height:100%;width:0;background:var(--orange);border-radius:10px;transition:width .35s}.gauge span{position:absolute;left:70%;top:0;height:100%;width:1px;background:#fff6}.gauge.upgrade{animation:pulse .3s 2}@keyframes pulse{50%{opacity:.3}}#stage{position:absolute;inset:0;z-index:1}canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}canvas.dragging{cursor:grabbing;touch-action:none}#labels{position:absolute;inset:0;pointer-events:none}.item-label{position:absolute;white-space:nowrap;transform:translate(-50%,-100%);font-size:calc(18 * var(--unit));font-weight:600;line-height:1.25;padding:calc(7 * var(--unit)) calc(12 * var(--unit));border:1px solid #d5d5d5;border-radius:calc(10 * var(--unit));background:#fffc;color:var(--ink)}.item-label:after{content:'';position:absolute;left:50%;top:100%;height:var(--leader,60px);width:1px;background:#a8a8a8;transform:rotate(5deg);transform-origin:top}.item-label:before{content:'';position:absolute;left:calc(50% - 4px);top:calc(100% + var(--leader,60px));width:8px;height:8px;background:var(--orange);border-radius:50%}.rotation-hint{position:absolute;right:10.1%;top:83.7%;margin:0;color:var(--gray);font-size:calc(22 * var(--unit));z-index:2;pointer-events:none}footer{position:absolute;bottom:7.2%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#969696;font-size:calc(22 * var(--unit));z-index:2;pointer-events:none}.steps{display:flex;align-items:center;gap:calc(27 * var(--unit))}.steps i{display:block;width:calc(8 * var(--unit));height:calc(8 * var(--unit));border-radius:20px;background:#c9c9c9}.steps .active{background:var(--orange);width:calc(28 * var(--unit))}#toast{position:absolute;right:3.5%;top:43.5%;max-width:90%;padding:20px 25px;border-radius:18px;background:var(--orange);color:#fff;font-size:22px;font-weight:700;z-index:7;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}#toast.show{opacity:1;transform:translateY(0)}#chak{position:absolute;font-size:22px;font-weight:800;color:var(--orange);opacity:0;pointer-events:none;transform:translate(-50%,-100%)}#chak.show{animation:chak .5s ease-out}@keyframes chak{10%,45%{opacity:1}100%{opacity:0;translate:0 -20px}}.accessibility{position:absolute;bottom:1.4%;left:5%;z-index:4;color:#777;font-size:12px}.accessibility summary{cursor:pointer}.accessibility:not([open]){opacity:0}.accessibility:focus-within,.accessibility:hover{opacity:1}.accessibility[open]{background:white;border:1px solid #ddd;padding:12px;border-radius:12px}.accessibility p{margin:8px 0}.accessibility button{padding:8px;border-radius:6px}
@media (orientation:landscape) and (max-width:1100px){.chips button{min-height:30px;padding:7px 8px;font-size:12px}.chips{gap:5px}.cargo-controls{top:33.5%}.initial-note{font-size:10px;margin-top:9px;max-width:440px}#box-count{font-size:10px;margin-top:5px}.vehicle{left:auto;right:5%;width:23%;top:13.7%}.vehicle-buttons{gap:5px}.vehicle-buttons button{font-size:13px;padding:6px 10px;min-height:32px}.vehicle-heading{font-size:12px}.recommend,#bed-size,#fill-text{font-size:11px}.recommend strong{font-size:14px}.item-label{font-size:10px;padding:4px 7px;border-radius:6px}.rotation-hint{font-size:12px;right:5%}#toast{font-size:15px;padding:14px 18px;top:45%}}
@media (orientation:portrait){:root{--unit:1px}#app{display:grid;grid-template-columns:1fr;grid-template-rows:58px 122px minmax(210px,1fr) auto auto 36px;min-height:605px;height:100svh;padding:0 24px;overflow:hidden}.brand,.intro,.cargo-controls,.vehicle,footer,.rotation-hint{position:relative;inset:auto}.brand{grid-row:1;align-self:center}.brand{height:33px;width:45px}.brand img{width:87.1px;height:87.1px;left:-20.84px;top:-26.88px}.intro{grid-row:2;padding-top:12px}h1{font-size:clamp(33px,6.1vw,44px);letter-spacing:-.05em;line-height:1.15}.subtitle{font-size:clamp(14px,2.6vw,18px);line-height:1.5;max-width:590px;margin-top:13px;letter-spacing:-.035em}#stage{position:relative;grid-row:3;margin:0 -24px;min-height:0}.cargo-controls{grid-row:4;min-width:0;padding-top:8px}.chips{overflow:auto;scrollbar-width:none;gap:7px;margin-right:-24px;padding-right:24px}.chips::-webkit-scrollbar{display:none}.chips button{font-size:15px;min-height:40px;padding:10px 13px;border-radius:9px;flex-shrink:0}.initial-note{display:none}#box-count{font-size:11px;margin:7px 0 4px;color:#888}.vehicle{grid-row:5;display:grid;grid-template-columns:1fr auto;gap:5px 14px;width:100%;padding-top:10px}.vehicle-heading{display:none}.vehicle-buttons{grid-column:1;grid-row:1;margin:0;gap:6px}.vehicle-buttons button{font-size:14px;min-height:36px;padding:6px 13px}.recommend{grid-column:2;grid-row:1;align-self:center;font-size:11px;white-space:nowrap}.recommend strong{font-size:15px;margin-left:7px}#bed-size{grid-row:2;grid-column:1;font-size:12px;margin:3px 0}.gauge{grid-row:3;grid-column:1/3;height:5px;margin-top:0}#fill-text{grid-row:2;grid-column:2;font-size:12px;text-align:right;margin:3px 0}.rotation-hint{position:absolute;top:auto;bottom:184px;left:0;right:0;text-align:center;font-size:12px}.rotation-hint span{display:none}footer{grid-row:6;align-self:center;font-size:12px}.steps{gap:13px}.steps i{width:5px;height:5px}.steps .active{width:20px}.item-label{font-size:11px;border-radius:7px;padding:5px 8px}.item-label:after,.item-label:before{display:none}#toast{position:fixed;top:80px;right:20px;left:20px;text-align:center;font-size:16px;padding:16px 18px}.accessibility{bottom:1px;left:24px;font-size:10px}
}
@media (orientation:portrait) and (max-width:520px){#app{padding:0 20px;grid-template-rows:54px 112px minmax(190px,1fr) auto auto 30px}.brand{height:30px;width:41px}.brand img{width:79.18px;height:79.18px;left:-18.94px;top:-24.44px}h1{font-size:33px}.subtitle{font-size:14px;max-width:410px;margin-top:10px}#stage{margin:0 -20px}.chips{margin-right:-20px;padding-right:20px}.chips button{font-size:14px;min-height:38px;padding:9px 11px}.vehicle{padding-top:5px}.vehicle-buttons button{font-size:13px;padding:5px 10px;min-height:34px}.recommend{font-size:10px}.recommend strong{font-size:13px}.rotation-hint{bottom:174px;font-size:11px}.item-label{font-size:9px;padding:4px 5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

.dimension-label{position:absolute;transform:translate(-50%,-50%);font-size:clamp(6px,.56vw,11px);line-height:1.2;color:#37332f;background:#ffffffe0;padding:2px 3px;border-radius:2px;white-space:nowrap;font-weight:600;pointer-events:none}
@media(orientation:portrait){.dimension-label{font-size:6px;padding:1px 2px}}

/* Round 2: low street camera, baked lens DOF, no full-scene white overlay. */
#app{isolation:isolate;background:#c3c4c7}
#stage{background-image:url('../assets/backgrounds/미니어처-거리-배경-01.webp');background-size:100% 100%;background-position:center;background-repeat:no-repeat}
:root{--gray:#565953}
#box-count,footer{color:#53574f}
/* This local surface extends from the heading through the cargo controls. */
.intro::before,.vehicle::before{content:'';position:absolute;z-index:-1;pointer-events:none;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #ffffff70;box-shadow:0 8px 36px #25302a0a;border-radius:calc(24 * var(--unit))}
.intro::before{inset:calc(-20 * var(--unit)) calc(-24 * var(--unit)) calc(-164 * var(--unit))}
.vehicle::before{inset:calc(-20 * var(--unit)) calc(-22 * var(--unit))}
.item-label{background:rgba(255,255,255,.96);border-color:#c7c7c1;box-shadow:0 2px 8px #57534a09}
.dimension-label{background:#fffffff2;color:#292721}
.rotation-hint{color:#41483f;background:#ffffffd9;backdrop-filter:blur(10px);border-radius:999px;padding:6px 12px;max-width:max-content}
footer>span,.steps{background:#ffffffd9;backdrop-filter:blur(10px);padding:7px 12px;border-radius:999px}
/* Keep every control reachable in the short landscape review sizes. */
@media(orientation:landscape) and (max-width:1100px){
 .intro,.cargo-controls{width:60%}
 .chips{overflow-x:auto;scrollbar-width:none}
 .chips::-webkit-scrollbar{display:none}
 .chips button{flex-shrink:0}
 .initial-note{display:none}
 .vehicle-buttons button{font-size:clamp(10px,1.4vw,13px);padding:6px 7px}
 .rotation-hint{top:auto;bottom:12%}
 footer{bottom:4%}
}
@media(orientation:portrait){
 #app{background:#fff}
 #stage{background-image:url('../assets/backgrounds/미니어처-거리-배경-02.webp')}
 .intro::before,.vehicle::before{content:none}
 .dimension-label{font-size:8px;padding:2px 3px}
 .rotation-hint{margin:0 auto;padding:4px 10px}
 footer>span,.steps{background:none;backdrop-filter:none;padding:0}
 #box-count{color:#64645f}
}