* { box-sizing:border-box; }
:root { color-scheme:light dark; font-family:system-ui,'Malgun Gothic',sans-serif; background:#f4f6f5; color:#182b32; --panel:#fff; --line:#b8d0ca; --tint:#e8f3ef; --ink:#182b32; --link:#087268; }
@media(prefers-color-scheme:dark) { :root { background:#101c22; color:#edf5f4; --panel:#172a30; --line:#537477; --tint:#223c42; --ink:#edf5f4; --link:#97e3d6; } }
body { margin:0; line-height:1.6; overflow-wrap:anywhere; word-break:keep-all; }
main { width:min(100% - 24px,840px); margin:1.5rem auto; }
section { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:clamp(.75rem,3vw,1.25rem); margin:1rem 0; }
a { color:var(--link); }
h1,h2 { line-height:1.25; }
button,input { font:inherit; }
button { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:7px; min-height:44px; padding:.35rem .65rem; cursor:pointer; }
button[aria-pressed="true"] { background:var(--tint); border:2px solid var(--link); }
button:disabled { opacity:.6; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--link); outline-offset:3px; }
input[type="file"], input[type="range"] { display:block; width:100%; max-width:100%; min-height:44px; }
input[type="color"] { min-width:48px; height:44px; }
label.check { display:flex; align-items:center; gap:.5rem; min-height:44px; }
[hidden] { display:none!important; }
.row { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin:.65rem 0; }
.note { border-inline-start:4px solid var(--link); background:var(--tint); padding:.65rem .8rem; }
.small { font-size:.88rem; }
.stage { display:grid; gap:.55rem; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:150px; margin:1rem 0; }
.stage:not([data-view="side"]) { grid-template-columns:1fr; }
.stage[data-view="a"] .frame:nth-child(2), .stage[data-view="b"] .frame:nth-child(1), .stage[data-view="slider"] .frame:nth-child(2) { display:none; }
.frame { display:grid; place-items:center; min-height:clamp(150px,36vw,350px); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--a); position:relative; isolation:isolate; }
.frame:nth-child(2) { background:var(--b); }
.stage[data-view="slider"] .frame { background:linear-gradient(90deg,var(--a) var(--split),var(--b) var(--split)); }
.frame img,.frame video { display:block; width:68%; max-height:clamp(118px,31vw,280px); object-fit:contain; z-index:1; }
.cloth { position:absolute; inset:auto 0 0; height:23%; opacity:.86; background:inherit; z-index:2; pointer-events:none; clip-path:polygon(0 0,50% 36%,100% 0,100% 100%,0 100%); }
#drape-preview-image { max-width:100%; height:auto; border:1px solid var(--line); }
summary { padding:.5rem 0; cursor:pointer; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }