:root{--paper:#fcfbf9;--ink:#1f2020;--muted:#77736f;--line:#e9e5e0;--accent:#df554f;--accent-dark:#c8433e;--soft:#f2efeb;--radius:22px;--shadow:0 18px 50px rgba(42,35,30,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ece9e5;color:var(--ink);font-family:"Noto Sans KR",sans-serif}.app-shell{width:min(100%,520px);min-height:100vh;margin:auto;background:var(--paper);padding:0 22px 122px;overflow:hidden;box-shadow:0 0 60px rgba(39,33,29,.08)}button{font:inherit;color:inherit}.topbar{height:80px;padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between}.brand{font-family:Georgia,serif;font-size:29px;letter-spacing:-1.5px;color:var(--ink);text-decoration:none}.text-button{border:0;background:none;font-size:14px;color:#5f5b57;padding:10px 0;cursor:pointer}.intro{padding:22px 0 24px}.intro h1{font-family:"Gowun Batang",serif;font-size:clamp(34px,9vw,47px);line-height:1.24;letter-spacing:-2.3px;margin:0}.intro h1 em{font-style:normal;color:var(--accent)}.intro p{font-size:14px;line-height:1.65;color:var(--muted);margin:14px 0 0}.preview{position:relative;aspect-ratio:4/5;border-radius:var(--radius);background:#d8d3cd;overflow:hidden}.preview video,.preview>img#uploadedPhoto{width:100%;height:100%;object-fit:cover;display:none}.preview video.mirrored{transform:scaleX(-1)}.preview.active video,.preview.active>img#uploadedPhoto{display:block}.empty-state{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px;background:linear-gradient(145deg,#dcd7d0,#bbb4ac);color:#fff}.empty-state svg{width:48px;fill:none;stroke:currentColor;stroke-width:1.5;margin-bottom:18px}.empty-state strong{font-size:16px}.empty-state span{font-size:12px;opacity:.78;line-height:1.5;margin-top:7px}.preview.active .empty-state{display:none}.hair-overlay{position:absolute;z-index:3;left:0;top:0;width:0;height:0;object-fit:contain;pointer-events:none;display:none;opacity:0;transform-origin:50% 45%;filter:drop-shadow(0 5px 6px rgba(30,20,15,.14));transition:opacity .18s;will-change:transform}.preview.active.applied.tracked .hair-overlay{display:block;opacity:1}.face-guide{position:absolute;z-index:4;inset:24% 25% 25%;opacity:.85;pointer-events:none}.face-guide i{position:absolute;width:34px;height:34px;border-color:#fff}.face-guide i:nth-child(1){left:0;top:0;border-left:2px solid;border-top:2px solid;border-radius:14px 0 0}.face-guide i:nth-child(2){right:0;top:0;border-right:2px solid;border-top:2px solid;border-radius:0 14px 0 0}.face-guide i:nth-child(3){left:0;bottom:0;border-left:2px solid;border-bottom:2px solid;border-radius:0 0 0 14px}.face-guide i:nth-child(4){right:0;bottom:0;border-right:2px solid;border-bottom:2px solid;border-radius:0 0 14px}.flip-camera{position:absolute;z-index:5;right:16px;top:16px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(30,30,30,.56);color:white;display:grid;place-items:center;cursor:pointer}.flip-camera[hidden]{display:none}.flip-camera svg,.capture-actions svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.7}.privacy{position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:90%;padding:8px 12px;border-radius:20px;background:rgba(32,31,30,.55);backdrop-filter:blur(8px);color:white;font-size:10px}.processing{position:absolute;z-index:7;inset:0;background:rgba(27,25,23,.65);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:14px}.processing.show{display:flex}.processing span{width:35px;height:35px;border:3px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;margin-bottom:14px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.capture-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin:12px 0 34px}.capture-actions button{min-height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border:1px solid transparent;cursor:pointer}.primary{background:var(--accent);color:white}.secondary{background:var(--soft);border-color:var(--line)!important}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.section-heading span{font-size:11px;color:var(--accent);letter-spacing:.08em}.section-heading h2{font-family:"Gowun Batang",serif;font-size:25px;margin:3px 0 0}.section-heading output{font-size:11px;color:var(--muted);text-transform:uppercase}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px;gap:28px}.tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:10px 1px 11px;font-size:13px;color:var(--muted);cursor:pointer}.tabs button.active{color:var(--accent);font-weight:700;border-color:var(--accent)}.style-rail{display:grid;grid-auto-flow:column;grid-auto-columns:31%;gap:11px;overflow-x:auto;padding:0 1px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}.style-rail::-webkit-scrollbar{display:none}.style-option{scroll-snap-align:start;text-align:left;padding:0;border:0;background:transparent;cursor:pointer;transition:opacity .2s}.style-option[hidden]{display:none}.thumb{display:block;position:relative;aspect-ratio:1/1.16;border-radius:17px;background:#e5e0da;border:2px solid transparent;overflow:hidden}.thumb img{width:115%;height:115%;object-fit:contain;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%)}.style-option.selected .thumb{border-color:var(--accent)}.style-option.selected .thumb:after{content:"✓";position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px}.style-option strong{font-size:12px;display:block;margin-top:9px;white-space:nowrap}.style-option small{font-size:9px;color:#9b958f;letter-spacing:.08em}.sticky-action{position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);padding:13px 22px calc(13px + env(safe-area-inset-bottom));background:rgba(252,251,249,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line);display:flex;gap:14px;align-items:center}.sticky-action>div{display:none}.sticky-action button{height:58px;flex:1;border:0;border-radius:16px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}.sticky-action button span{float:right;font-size:20px;margin-right:5px}dialog{width:min(calc(100% - 44px),430px);border:0;border-radius:24px;padding:32px;background:var(--paper);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(20,18,17,.48);backdrop-filter:blur(3px)}dialog h2{font-family:"Gowun Batang",serif;margin:0 0 20px;font-size:24px}dialog ol{padding-left:20px;color:#56514d;line-height:2;font-size:14px}dialog p{font-size:12px;color:var(--muted);margin:20px 0 0}.dialog-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:26px;cursor:pointer}.toast{position:fixed;z-index:30;left:50%;bottom:100px;transform:translate(-50%,20px);padding:12px 18px;background:#272522;color:#fff;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.app-shell{width:min(100%,1000px);padding:0 52px 120px}.topbar{height:92px}.intro{padding:38px 0 34px}.intro h1 br{display:none}.studio{display:grid;grid-template-columns:minmax(360px,1.12fr) minmax(300px,.88fr);grid-template-rows:auto 1fr;gap:0 42px}.preview{grid-row:1/3;aspect-ratio:4/5}.capture-actions{align-content:end;margin:0 0 12px;grid-template-columns:1fr}.styles{grid-column:2;margin-top:20px}.style-rail{grid-auto-columns:43%}.sticky-action{width:min(100%,1000px);padding-left:52px;padding-right:52px}.sticky-action>div{display:block;min-width:150px}.sticky-action>div span{display:block;font-size:10px;color:var(--muted)}.sticky-action>div strong{font-size:13px}.sticky-action button{max-width:360px;margin-left:auto}}
@media(max-width:370px){.app-shell{padding-left:16px;padding-right:16px}.capture-actions{grid-template-columns:1fr}.intro h1{font-size:32px}.style-rail{grid-auto-columns:38%}.sticky-action{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Face-tracked AR overlay: position, size and angle are set by app.js. */
.tracking-status{position:absolute;z-index:6;left:14px;top:14px;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:20px;background:rgba(30,29,28,.55);color:#fff;backdrop-filter:blur(7px);font-size:10px}
.tracking-status[hidden]{display:none}
.tracking-status span{width:7px;height:7px;border-radius:50%;background:#65d78a;box-shadow:0 0 0 3px rgba(101,215,138,.2)}
.tracking-status.lost span{background:#f3b55e;box-shadow:0 0 0 3px rgba(243,181,94,.2)}
.tracking-status b{font-weight:500}

/* v1.0.2: underlay restored image only when ready; original video/photo remain fallback. */
.clean-hair-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:none;pointer-events:none;object-fit:cover}
.preview.active.applied.tracked .clean-hair-canvas.ready{display:block}
.hair-adjust-panel{margin:-20px 0 25px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#faf8f5;font-size:12px}
.hair-erase-choice{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600}
.hair-erase-choice input{accent-color:var(--accent);width:16px;height:16px}
.hair-erase-choice small{display:inline;color:var(--muted);font-size:10px;font-weight:400;margin-left:4px}
.hair-adjust-panel details{margin-top:10px}
.hair-adjust-panel summary{cursor:pointer;color:#665b55;user-select:none}
.hair-controls{display:grid;gap:7px;padding-top:12px}
.hair-controls label{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center}
.hair-controls input{width:100%;accent-color:var(--accent)}
.hair-controls button{border:1px solid var(--line);border-radius:9px;padding:7px;background:#fff;justify-self:end;cursor:pointer}
@media(min-width:760px){.hair-adjust-panel{grid-column:1;grid-row:3;margin:4px 0 20px}}

/* v1.1.0: full Three.js canvas, never overlay the old flat PNG or inpainting canvas */
.hair-overlay,.clean-hair-canvas{display:none!important}
.hair3d-layer{position:absolute;inset:0;z-index:3;touch-action:pan-y;pointer-events:none}
.preview.viewer-mode .hair3d-layer{touch-action:none;pointer-events:auto}
.hair3d-layer canvas{display:block;width:100%;height:100%}
.preview.viewer-mode{background:radial-gradient(circle at 44% 30%,#fbf7f3 0,#eee7e0 55%,#d4cbc3 100%)}
.preview.viewer-mode video,.preview.viewer-mode #uploadedPhoto,.preview.viewer-mode .empty-state{display:none!important}
.preview.viewer-mode .privacy{display:none}
.preview.viewer-mode .face-guide{display:none}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}
.mode-switch button{padding:12px 6px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:12px;font-weight:700;cursor:pointer}
.mode-switch button.active{background:#312924;color:white;border-color:#312924}
.orbit-panel{padding:14px 14px 12px;background:#f6f2ed;border-radius:14px;margin-bottom:12px}
.orbit-panel[hidden]{display:none}
.orbit-panel p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 12px}
.orbit-panel label{display:grid;grid-template-columns:95px minmax(0,1fr);gap:8px;align-items:center;margin:7px 0;font-size:11px}
.orbit-panel input{width:100%;accent-color:var(--accent)}
.orbit-panel button{border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:white;font-size:11px;cursor:pointer}
.fit-notice{margin:9px 0 0;font-size:10px;color:var(--muted);line-height:1.6}
.hair-adjust-panel{margin:0 0 24px}
@media(min-width:760px){.studio{grid-template-rows:auto auto auto 1fr}.preview{grid-row:1/5}.capture-actions{grid-column:2;grid-row:1;margin:0 0 13px}.mode-switch{grid-column:2;grid-row:2;margin:0 0 12px}.orbit-panel{grid-column:2;grid-row:3}.hair-adjust-panel{grid-column:2;grid-row:4;margin:0 0 20px}}