@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css";:root{--text:#6b7280;--text-h:#1f2937;--bg:#fff;--page-bg:#f9fafb;--border:#f3f4f6;--code-bg:#f5f3ff;--accent:#8b5cf6;--accent-bg:#f5f3ff;--accent-border:#ede9fe;--shadow:#0000001a 0 10px 25px -5px, #0000001a 0 8px 10px -6px;--surface-translucent:#ffffffeb;--success-bg:#ecfdf5;--success-border:#d1fae5;--success-text:#065f46;--success-icon:#10b981;--info-bg:#eff6ff;--info-border:#dbeafe;--info-text:#1e3a8a;--info-icon:#3b82f6;--danger-bg:#fef2f2;--danger-border:#fecaca;--danger-text:#991b1b;--danger-icon:#ef4444;--sans:"Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif;--heading:"Pretendard", "Inter", ui-sans-serif, system-ui, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--page-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#1c1b23;--page-bg:#121218;--border:#2e2c38;--code-bg:#241f38;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc59;--shadow:#0006 0 10px 25px -5px, #0000004d 0 8px 10px -6px;--surface-translucent:#1c1b23d9;--success-bg:#10b9811f;--success-border:#10b9814d;--success-text:#6ee7b7;--success-icon:#34d399;--info-bg:#3b82f61f;--info-border:#3b82f64d;--info-text:#93c5fd;--info-icon:#60a5fa;--danger-bg:#ef44441f;--danger-border:#ef44444d;--danger-text:#fca5a5;--danger-icon:#f87171}}#root{text-align:center;box-sizing:border-box;background:var(--page-bg);flex-direction:column;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.app-container{box-sizing:border-box;min-height:100vh;font-family:var(--sans);color:var(--text);background-color:var(--page-bg);flex-direction:column;padding:2rem 1.5rem;display:flex}.app-header{text-align:center;margin-bottom:2.5rem}.logo-container{color:var(--text-h);align-items:center;gap:.65rem;display:inline-flex}.logo-icon-box{background:var(--accent);color:#fff;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;display:flex}.logo-svg{width:1.15rem;height:1.15rem}.logo-text{font-family:var(--heading);letter-spacing:-.01em;color:var(--text-h);font-size:1.5rem;font-weight:700;line-height:1.2}.logo-text-accent{color:var(--accent)}.subtitle{color:var(--text);opacity:.85;margin-top:.6rem;font-size:.85rem}.app-main{flex:1;width:100%;max-width:900px;margin:0 auto}.form-card,.analyzing-card,.result-card{background:var(--bg);box-shadow:var(--shadow);box-sizing:border-box;text-align:left;border-radius:2rem;padding:2.5rem}.intro-text{border-bottom:1px solid var(--border);margin-bottom:2rem;padding-bottom:1.5rem}.intro-text h2{color:var(--text-h);margin:0 0 .5rem;font-size:1.6rem;font-weight:700}.intro-text p{color:var(--text);font-size:.95rem;line-height:1.5}.form-grid{grid-template-columns:1.2fr 1fr;gap:2.5rem;display:grid}@media (width<=768px){.form-grid{grid-template-columns:1fr;gap:2rem}}.input-label{color:var(--text-h);margin-bottom:.6rem;font-size:.9rem;font-weight:600;display:block}.required{color:var(--accent);margin-left:.15rem}.upload-section{flex-direction:column;display:flex}.dropzone-container{border:2px dashed var(--border);background:var(--code-bg);cursor:pointer;border-radius:1.25rem;flex:1;justify-content:center;align-items:center;min-height:250px;transition:all .25s;display:flex;position:relative;overflow:hidden}.dropzone-container:hover{border-color:var(--accent);background:var(--accent-bg)}.dropzone-container.has-image{border-style:solid;border-color:var(--accent-border);background:var(--bg)}.dropzone-container.has-error{background-color:#ef444408;border-color:#ef4444}.hidden-file-input{display:none}.dropzone-placeholder{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex}.upload-icon-circle{background:var(--bg);width:3.5rem;height:3.5rem;color:var(--text);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1rem;transition:transform .2s;display:flex;box-shadow:0 4px 6px -1px #0000000d}.dropzone-container:hover .upload-icon-circle{color:var(--accent);transform:translateY(-4px)}.upload-icon{width:1.6rem;height:1.6rem}.upload-main-text{color:var(--text-h);margin:0 0 .4rem;font-size:.95rem;font-weight:600}.upload-sub-text{color:var(--text);opacity:.75;margin:0;font-size:.8rem;line-height:1.4}.preview-wrapper{justify-content:center;align-items:center;width:100%;height:100%;min-height:250px;display:flex;position:relative}.image-preview{object-fit:contain;border-radius:.75rem;max-width:100%;max-height:320px}.preview-overlay{opacity:0;background:#00000073;justify-content:center;align-items:center;gap:.75rem;transition:opacity .2s;display:flex;position:absolute;inset:0}.preview-wrapper:hover .preview-overlay{opacity:1}.action-btn{cursor:pointer;border:none;border-radius:.6rem;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:background-color .2s;display:inline-flex}.remove-btn{color:#fff;background:#ef4444}.remove-btn:hover{background:#dc2626}.change-btn{color:#1f2937;background:#fff}.change-btn:hover{background:#f3f4f6}.btn-icon{width:.95rem;height:.95rem}.specs-section{flex-direction:column;gap:1.5rem;display:flex}.gender-toggle-group{gap:.75rem;display:flex}.gender-toggle-btn{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:.75rem;flex:1;padding:.85rem 1rem;font-size:.95rem;font-weight:600;transition:all .2s}.gender-toggle-btn:hover{border-color:var(--accent);color:var(--text-h)}.gender-toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.input-group{flex-direction:column;display:flex}.input-wrapper{align-items:center;display:flex;position:relative}.input-wrapper input{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text-h);border-radius:.75rem;outline:none;padding:.85rem 3rem .85rem 1rem;font-size:1rem;transition:all .2s}.input-wrapper input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.input-wrapper input.input-error{border-color:#ef4444}.input-wrapper input.input-error:focus{box-shadow:0 0 0 3px #ef444426}.unit-label{color:var(--text);opacity:.8;pointer-events:none;font-size:.95rem;font-weight:600;position:absolute;right:1.25rem}.error-message{color:#ef4444;margin:.4rem 0 0;font-size:.8rem;font-weight:500}.tip-box{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:1rem;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.tip-icon{width:1.25rem;height:1.25rem;color:var(--accent);flex-shrink:0;margin-top:.1rem}.tip-content h4{color:var(--text-h);margin:0 0 .25rem;font-size:.85rem;font-weight:600}.tip-content p{color:var(--text);margin:0;font-size:.78rem;line-height:1.45}.action-bar{border-top:1px solid var(--border);justify-content:flex-end;margin-top:2.5rem;padding-top:1.75rem;display:flex}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 10px 25px -8px var(--accent);border:none;border-radius:1rem;align-items:center;gap:.6rem;padding:.9rem 2rem;font-size:1.05rem;font-weight:700;transition:all .25s;display:inline-flex}.btn-primary:hover{opacity:.95;box-shadow:0 12px 28px -8px var(--accent);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-arrow{width:1.1rem;height:1.1rem;transition:transform .2s}.btn-primary:hover .btn-arrow{transform:translate(4px)}.analyzing-card{text-align:center;padding:4rem 2rem}.spinner-wrapper{width:4.5rem;height:4.5rem;margin:0 auto 2rem;position:relative}.main-spinner{border:4px solid var(--accent-bg);border-top-color:var(--accent);border-radius:50%;width:100%;height:100%;animation:1s linear infinite spin}.pulse-circle{background:var(--accent);opacity:.3;border-radius:50%;width:2rem;height:2rem;animation:1.5s ease-in-out infinite pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.3;transform:translate(-50%,-50%)scale(.8)}50%{opacity:0;transform:translate(-50%,-50%)scale(1.6)}}.analyzing-card h3{color:var(--text-h);margin:0 0 .5rem;font-size:1.5rem;font-weight:700}.analyzing-sub{color:var(--text);opacity:.85;margin:0 0 2.5rem;font-size:.9rem}.progress-steps-container{text-align:left;flex-direction:column;gap:1.1rem;max-width:450px;margin:0 auto;display:flex}.step-row{border-radius:.75rem;align-items:center;gap:1rem;padding:.75rem 1rem;transition:all .3s;display:flex}.step-bullet{border-radius:50%;justify-content:center;align-items:center;width:1.6rem;height:1.6rem;font-size:.75rem;font-weight:700;transition:all .3s;display:flex}.step-text{font-size:.9rem;font-weight:500;transition:all .3s}.step-row.pending{opacity:.4}.step-row.pending .step-bullet{background:var(--border);color:var(--text)}.step-row.pending .step-text{color:var(--text)}.step-row.active{opacity:1;background:var(--accent-bg);box-shadow:0 2px 8px #00000005}.step-row.active .step-bullet{background:var(--accent);color:#fff;animation:.6s infinite alternate bounce}.step-row.active .step-text{color:var(--text-h);font-weight:600}.step-row.completed{opacity:.8}.step-row.completed .step-bullet{background:var(--success-icon);color:#fff}.step-row.completed .step-bullet svg{width:.9rem;height:.9rem}.step-row.completed .step-text{color:var(--text);text-decoration:line-through}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-3px)}}.result-card{padding:2.5rem}.result-header{border-bottom:1px solid var(--border);text-align:center;margin-bottom:2.5rem;padding-bottom:1.75rem}.success-badge{background:var(--success-bg);color:var(--success-text);border-radius:5rem;margin-bottom:.9rem;padding:.35rem 1rem;font-size:.75rem;font-weight:700;display:inline-block}.result-header h2{color:var(--text-h);margin:0 0 .5rem;font-size:1.9rem;font-weight:800}.result-intro{color:var(--text);margin:0;font-size:.95rem}.result-grid{grid-template-columns:280px 1fr;gap:2.5rem;display:grid}@media (width<=768px){.result-grid{grid-template-columns:1fr;gap:2rem}}.result-sidebar{flex-direction:column;gap:1rem;display:flex}.sidebar-image-card{box-shadow:var(--shadow);border-radius:1.5rem;overflow:hidden}.sidebar-image{object-fit:cover;object-position:top;width:100%;height:320px;display:block}.sidebar-stats-card{background:var(--accent-bg);border-radius:1.25rem;padding:1rem}.sidebar-stats-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.85rem;display:grid}.stat-item{text-align:center}.stat-lbl{color:var(--accent);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.25rem;font-size:.62rem;font-weight:700;display:block}.stat-val{color:var(--text-h);font-size:.85rem;font-weight:700}.bmi-badge-box{text-align:center;border-top:1px solid var(--accent-border);padding-top:.85rem}.bmi-lbl{color:var(--accent);margin-bottom:.25rem;font-size:.72rem;font-weight:600}.bmi-num{color:var(--accent);font-size:1.35rem;font-weight:800}.bmi-cat{font-size:.85rem;font-weight:600}.result-details{flex-direction:column;gap:2.5rem;display:flex}.body-type-row{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.body-type-name{color:var(--text-h);margin:0;font-size:1.5rem;font-weight:800}.mood-badge{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:5rem;flex-shrink:0;padding:.3rem .75rem;font-size:.7rem;font-weight:700}.rec-desc{color:var(--text);margin:0;font-size:.9rem;line-height:1.6}.bullet-dot{border-radius:50%;flex-shrink:0;width:.4rem;height:.4rem;display:inline-block}.item-text{line-height:1.4}.report-section-header{align-items:center;gap:.6rem;margin-bottom:1rem;display:flex}.report-step-badge{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.78rem;font-weight:700;display:flex}.report-section-header .section-label{color:var(--text-h);font-size:.9rem;font-weight:700}.keyword-chips{flex-wrap:wrap;gap:.6rem;display:flex}.keyword-chip{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:.6rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600}.color-palette-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (width>=640px){.color-palette-grid{grid-template-columns:repeat(4,1fr)}}.color-swatch-card{border:1px solid var(--border);background:var(--bg);border-radius:1rem;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 1px 3px #0000000a}.color-swatch-box{border-bottom:1px solid var(--border);width:100%;height:6.25rem}.color-swatch-info{padding:.85rem 1rem}.color-name-row{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem;display:flex}.color-name{color:var(--text-h);font-size:.85rem;font-weight:700}.color-hex{font-family:var(--mono);color:var(--text);opacity:.7;text-transform:uppercase;font-size:.68rem}.color-reason{color:var(--text);margin:0;font-size:.78rem;line-height:1.45}.looks-showcase{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;display:grid}@media (width<=576px){.looks-showcase{grid-template-columns:1fr}}.look-hero{aspect-ratio:16/9;background:var(--code-bg);box-shadow:var(--shadow);border-radius:1.75rem;grid-column:1/-1;position:relative;overflow:hidden}.look-hero-media{width:100%;height:100%;position:relative}.look-hero-image{object-fit:cover;width:100%;height:100%;display:block}.look-hero-overlay{color:#fff;background:linear-gradient(#0000,#00000026 35%,#000000d9);flex-direction:column;justify-content:flex-end;padding:1.75rem;display:flex;position:absolute;inset:0}.look-hero-badge{background:var(--accent);color:#fff;border-radius:5rem;align-self:flex-start;margin-bottom:.75rem;padding:.35rem .9rem;font-size:.68rem;font-weight:800}.look-hero-title{margin:0 0 .85rem;font-size:1.6rem;font-style:italic;font-weight:800}.look-hero-content{flex-direction:column;gap:.85rem;display:flex}@media (width>=700px){.look-hero-content{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:1.5rem}}.look-hero-desc{color:#ffffffd9;max-width:32rem;margin:0;font-size:.85rem;line-height:1.6}.look-hero-items{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff24;border:1px solid #fff3;border-radius:1rem;flex-direction:column;flex-shrink:0;gap:.4rem;margin:0;padding:.9rem 1.1rem;list-style:none;display:flex}.look-hero-items li{color:#fff;align-items:center;gap:.5rem;font-size:.75rem;display:flex}.look-hero-check{flex-shrink:0;width:.65rem;height:.65rem}.look-card{background:var(--bg);box-shadow:var(--shadow);border-radius:1.5rem;flex-direction:column;display:flex;overflow:hidden}.look-image-wrapper{aspect-ratio:3/4;background:var(--code-bg);position:relative;overflow:hidden}.look-image{object-fit:cover;width:100%;height:100%;display:block}.look-card-badge{background:var(--surface-translucent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text-h);border-radius:.5rem;padding:.35rem .75rem;font-size:.65rem;font-weight:800;position:absolute;top:1rem;left:1rem}.look-image-placeholder{width:100%;height:100%;color:var(--text);opacity:.5;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex}.look-image-placeholder svg{width:2rem;height:2rem}.look-image-placeholder span{font-size:.78rem;font-weight:600}.look-card-body{flex-direction:column;flex:1;gap:.5rem;padding:1.25rem;display:flex}.look-title{color:var(--text-h);margin:0;font-size:1.05rem;font-weight:700}.look-desc{color:var(--text);margin:0;font-size:.85rem;line-height:1.55}.look-tag-chips{flex-wrap:wrap;gap:.5rem;margin-top:.25rem;display:flex}.look-tag-chip{background:var(--code-bg);color:var(--text);border-radius:.5rem;padding:.35rem .75rem;font-size:.7rem;font-weight:600}.styling-tips-list{flex-direction:column;gap:.7rem;margin:0;padding:0;list-style:none;display:flex}.styling-tip-row{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success-text);border-radius:1rem;align-items:center;gap:.75rem;padding:1rem 1.1rem;font-size:.88rem;font-weight:600;line-height:1.45;display:flex}.tip-check-icon{width:1rem;height:1rem;color:var(--success-icon);flex-shrink:0}.items-grid{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}@media (width<=576px){.items-grid{grid-template-columns:1fr}}.item-list-box{border:1px solid var(--border);border-radius:2rem;padding:1.5rem}.item-list-box h6{align-items:center;gap:.5rem;margin:0 0 1rem;font-size:.9rem;font-weight:700;display:flex}.best-items{background:var(--info-bg);border-color:var(--info-border)}.best-items h6{color:var(--info-text)}.avoid-items{background:var(--danger-bg);border-color:var(--danger-border)}.avoid-items h6{color:var(--danger-text)}.list-title-icon{width:1.05rem;height:1.05rem}.item-list-box ul{flex-direction:column;gap:.7rem;margin:0;padding:0;list-style:none;display:flex}.item-list-box li{align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;display:flex}.best-items li{color:var(--info-text)}.avoid-items li{color:var(--danger-text)}.bullet-dot.good{background:var(--info-icon)}.bullet-dot.bad{background:var(--danger-icon)}.result-action-bar{margin-top:2.5rem}.restart-btn{justify-content:center;width:100%}.app-footer{text-align:center;border-top:1px solid var(--border);margin-top:3.5rem;padding-top:1.5rem}.app-footer p{color:var(--text);opacity:.65;margin:0 0 .35rem;font-size:.8rem}.footer-disclaimer{font-style:italic;font-size:.75rem!important}.animate-fade-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.error-alert-box{background-color:var(--danger-bg);border:1px solid var(--danger-border);border-radius:1rem;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:1rem 1.25rem;animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn;display:flex}.error-alert-box p{color:var(--danger-text);margin:0;font-size:.9rem;font-weight:500;line-height:1.4}.error-alert-box .alert-icon{width:1.25rem;height:1.25rem;color:var(--danger-icon);flex-shrink:0}