:root{--bg: #f5f4f2;--card-bg: #ffffff;--text: #1a1a1a;--text-muted: #8a8a8a;--border: #e5e3df;--accent: #1a1a1a;--accent-text: #ffffff;--radius: 16px;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px}.app__hint{color:var(--text-muted);font-size:14px;text-align:center}.card{width:100%;max-width:420px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;box-shadow:0 12px 40px #0000000a}.card__header{text-align:center;margin-bottom:28px}.card__header h1{font-size:24px;font-weight:700;margin:0 0 8px;letter-spacing:-.02em}.card__header p{margin:0;font-size:14px;color:var(--text-muted)}.form{display:flex;flex-direction:column;gap:22px}.field{display:flex;flex-direction:column;gap:8px;flex:1}.field-row{display:flex;gap:14px}.field__label{font-size:13px;font-weight:600;color:var(--text)}.photo-upload{width:100%;aspect-ratio:4 / 5;max-height:300px;border:1.5px dashed var(--border);border-radius:12px;background:#fafafa;cursor:pointer;overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,background .15s ease}.photo-upload:hover{border-color:var(--accent);background:#f5f5f5}.photo-upload--filled{border-style:solid}.photo-upload--dragging{border-color:var(--accent);background:#eef0ff;border-style:solid}.photo-upload__hint{font-size:12px;color:var(--text-muted);opacity:.8}.photo-upload__preview{width:100%;height:100%;object-fit:cover}.photo-upload__placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:14px}.photo-upload__icon{font-size:28px;line-height:1;color:var(--text-muted)}.link-button{align-self:flex-start;background:none;border:none;padding:0;color:var(--text-muted);font-size:13px;cursor:pointer;text-decoration:underline}.input-wrap{position:relative;display:flex;align-items:center}.input-wrap input{width:100%;padding:13px 44px 13px 14px;font-size:16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);outline:none;transition:border-color .15s ease}.input-wrap input:focus{border-color:var(--accent)}.input-wrap input::-webkit-outer-spin-button,.input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrap input[type=number]{-moz-appearance:textfield}.input-wrap__unit{position:absolute;right:14px;font-size:14px;color:var(--text-muted);pointer-events:none}.submit-button{margin-top:6px;padding:15px;font-size:15px;font-weight:600;color:var(--accent-text);background:var(--accent);border:none;border-radius:12px;cursor:pointer;transition:opacity .15s ease,transform .05s ease}.submit-button:hover:not(:disabled){opacity:.88}.submit-button:active:not(:disabled){transform:scale(.99)}.submit-button:disabled{opacity:.4;cursor:not-allowed}.submit-button--ghost{background:#fff;color:var(--accent);border:1px solid var(--border)}.field__hint{font-weight:400;color:var(--text-muted);font-size:12px}.segmented{display:flex;gap:6px;background:#f2f1ee;padding:4px;border-radius:12px}.segmented__option{flex:1;padding:10px;border:none;background:transparent;border-radius:9px;font-size:14px;color:var(--text-muted);cursor:pointer;transition:background .15s ease,color .15s ease}.segmented__option--active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px #00000014}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:9px 14px;border:1px solid var(--border);background:#fff;border-radius:999px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.chip--active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.chip--static{cursor:default;background:#f5f4f2}.card--result{max-width:460px}.result{display:flex;flex-direction:column;gap:26px}.result__top{display:flex;gap:16px;align-items:center}.result__photo{width:96px;height:120px;object-fit:cover;border-radius:12px;flex-shrink:0}.result__metrics{display:flex;flex-direction:column;gap:12px}.metric{display:flex;flex-direction:column;gap:2px}.metric__value{font-size:32px;font-weight:700;line-height:1}.metric__label{font-size:13px;color:var(--text-muted)}.metric--low .metric__value{color:#2f80ed}.metric--normal .metric__value{color:#2e9e6b}.metric--high .metric__value{color:#d9803a}.result__facts{list-style:none;margin:0;padding:0;display:flex;gap:12px;font-size:13px;color:var(--text-muted)}.result__section{display:flex;flex-direction:column;gap:12px}.result__heading{font-size:15px;font-weight:700;margin:0}.reco-list{display:flex;flex-direction:column;gap:12px}.reco{background:#faf9f7;border:1px solid var(--border);border-radius:12px;padding:14px 16px}.reco__title{font-size:14px;font-weight:600;margin:0 0 4px}.reco__desc{font-size:13px;line-height:1.55;color:var(--text-muted);margin:0}.palette{display:flex;flex-wrap:wrap;gap:14px}.swatch{display:flex;flex-direction:column;align-items:center;gap:6px}.swatch__chip{width:52px;height:52px;border-radius:12px;border:1px solid rgba(0,0,0,.06)}.swatch__name{font-size:12px;color:var(--text-muted)}.result__divider{height:1px;background:var(--border);margin:4px 0}.ai-report{display:flex;flex-direction:column;gap:26px}.ai-summary{font-size:14px;line-height:1.6;margin:0;font-weight:500}.reco__cat{display:inline-block;font-size:11px;font-weight:600;color:var(--accent-text);background:var(--accent);border-radius:6px;padding:2px 7px;margin-right:6px;vertical-align:middle}.tip-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}.tip-list li{font-size:13px;line-height:1.55;color:var(--text)}.tip-list--avoid li{color:#b54a3a}.ai-status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-muted);background:#faf9f7;border:1px solid var(--border);border-radius:12px;padding:16px}.ai-status--error{flex-direction:column;align-items:flex-start;color:#b54a3a}.ai-status--error p{margin:0}.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.hair-result{display:flex;flex-direction:column;gap:10px}.hair-result__img{width:100%;border-radius:12px;border:1px solid var(--border);display:block}.env-badge{position:fixed;top:12px;right:12px;z-index:50;padding:5px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:#d9803a;border-radius:999px;box-shadow:0 2px 8px #00000026}