@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Jua&display=swap');

:root { --ink:#4d4653; --muted:#817987; --sage:#58a997; --light:#fff7f2; --cream:#fffdfb; --line:#eee5ef; --rose:#ed8f9f; --lavender:#a99ad8; }
body { background:linear-gradient(145deg,#fffdfb,#fff8f4 46%,#f7fbff); font-family:'Gowun Dodum','Noto Sans KR',sans-serif; min-height:100vh; }
button,input,select { font-family:inherit; }
.hero { min-height:270px; padding:24px max(5vw,28px) 38px; background:linear-gradient(120deg,#fff0eb,#fff9dd 55%,#e9f8f4); border-radius:0 0 42px 42px; }
.hero nav { max-width:1120px; margin:auto; }
.brand,.hero h1,.section-heading h2,.closet-card h3,.modal-card h2,.donation-box h3,.recommend-grid h3 { font-family:'Jua','Gowun Dodum',sans-serif; font-weight:400; }
.brand { font-size:25px; color:#62536a; }
.brand::before { content:'✿'; display:inline-grid; place-items:center; width:36px; height:36px; margin-right:9px; border-radius:13px; background:#fff; color:var(--rose); box-shadow:0 6px 18px #d99aab30; }
.ghost { border:0; background:#ffffffcc; border-radius:14px; padding:10px 16px; color:var(--muted); box-shadow:0 5px 18px #7e6d7f15; }
.hero-copy { margin:38px auto 0; max-width:1120px; }
.hero h1 { font-size:clamp(32px,4vw,50px); line-height:1.2; margin:10px 0; }
.hero h1 br { display:none; }
.hero h1 em { color:#d87386; margin-left:10px; }
.hero-copy p { margin:8px 0; line-height:1.7; }
.hero-copy .primary { display:none; }
.wardrobe-art { width:250px; height:220px; right:8%; opacity:.3; border-radius:120px 120px 35px 35px; background:#bce6d9; }
.wardrobe-art .plant { font-size:55px; }
.summary { max-width:1120px; margin:-23px auto 22px; padding:17px 24px; gap:12px; border:1px solid #fff; border-radius:24px; background:#ffffffdf; backdrop-filter:blur(14px); box-shadow:0 14px 40px #846d8220; }
.summary div { border:0; border-radius:16px; padding:7px 12px; background:#fff8f6; }
.summary div:nth-child(2) { background:#effaf4; }.summary div:nth-child(3) { background:#f5f1ff; }.summary div:nth-child(4) { background:#fff6df; }.summary div:nth-child(5) { background:#eef7ff; }
.summary strong { font-family:'Jua'; font-weight:400; color:#705e75; font-size:25px; }
.summary p { text-align:right; padding-right:8px; }
.summary-link { cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; outline:none; }.summary-link:hover,.summary-link:focus-visible { transform:translateY(-2px); box-shadow:0 7px 18px #ba8d7528; }.summary-link:focus-visible { box-shadow:0 0 0 3px #ed8f9f55,0 7px 18px #ba8d7528; }
.view-toggle { position:sticky; top:12px; z-index:8; display:grid; grid-template-columns:repeat(3,1fr); max-width:570px; margin:0 auto 22px; padding:6px; border-radius:22px; background:#fff; box-shadow:0 10px 35px #72607320; border:1px solid #f4edf3; }
.view-toggle button { display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:17px; background:transparent; color:var(--muted); padding:10px 16px; cursor:pointer; }
.view-toggle button span { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#f6f1f5; font-size:18px; }
.view-toggle button b { font-weight:400; }.view-toggle button.active { background:#fff1ec; color:#765464; }.view-toggle button.active span { background:linear-gradient(135deg,#ffb39f,#ed8fa9); color:#fff; box-shadow:0 5px 12px #ed8fa955; }
.workspace { max-width:1120px; margin:auto; min-height:570px; }.app-view[hidden] { display:none!important; }.app-view { animation:view-in .25s ease; }
.section-heading { margin:0 0 18px; align-items:center; }.section-heading>span { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:#f0ebff; color:var(--lavender); letter-spacing:0; }.section-heading p { color:var(--rose); }.section-heading h2 { font-size:27px; margin:3px 0; color:#584e5e; }
.process,.recommendation,.results { margin-bottom:55px; }.item-card { border-radius:25px; padding:22px; gap:28px; border:1px solid #f5edf2; box-shadow:0 12px 40px #7b687710; }.photo-box { border-radius:20px; background:linear-gradient(135deg,#fff2e8,#f2ecff); border:2px dashed #e3cfdc; }
.details input,.details select,.recommend-controls select,.recommend-controls input { border:1px solid #eadfe8; border-radius:13px; background:#fffdfd; outline:none; }.details input:focus,.details select:focus,.recommend-controls select:focus,.recommend-controls input:focus { border-color:#d6a2b5; box-shadow:0 0 0 4px #f7e8ed; }
.quick-field { margin:16px 0; }.quick-label { display:block; margin-bottom:9px; color:#514a57; font-size:13px; font-weight:700; }.quick-options { display:grid; gap:8px; }.category-options { grid-template-columns:repeat(3,1fr); }.season-options { grid-template-columns:repeat(3,1fr); }.condition-options { grid-template-columns:repeat(3,1fr); }.quick-options button { position:relative; min-height:68px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid #eadfe8; border-radius:15px; background:#fff; color:#5d5662; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease; }.quick-options button:hover { transform:translateY(-1px); border-color:#d8bac8; }.quick-options button.active { border-color:#dd8298; background:linear-gradient(145deg,#fff3f0,#fff8de); color:#493943; box-shadow:0 6px 16px #cf80952b; }.quick-options button.active::after { content:'✓'; position:absolute; top:5px; right:7px; color:#c95570; font-size:11px; font-weight:700; }.quick-options i { font-style:normal; font-size:22px; line-height:1; }.quick-options b { font-size:12px; font-weight:700; }
.question { border:0; border-radius:16px; margin:8px 0; box-shadow:0 5px 18px #846d8210; }.question .num { color:var(--rose); }.choices label { border-radius:12px; }.choices input:checked+label { background:linear-gradient(135deg,#63bea9,#7bafa7); border-color:transparent; }
.primary { border-radius:14px; background:linear-gradient(135deg,#66566f,#8d6f8c); box-shadow:0 8px 20px #725b7430; }
.weather-panel { border-radius:25px; background:linear-gradient(135deg,#effbf6,#fff6ed); border:1px solid #e7f0e9; box-shadow:0 12px 40px #6b877718; }.recommend-controls { grid-template-columns:1fr 1fr 1.25fr auto; }.weather-choice>span { display:block; margin-bottom:8px; font-size:13px; }
.icon-toggle { height:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:5px; border-radius:14px; background:#fff; border:1px solid #e4e9e5; }.icon-toggle button { border:0; border-radius:9px; background:transparent; color:#9a909e; font-size:19px; cursor:pointer; }.icon-toggle button.active { background:#fff1c9; color:#d08743; box-shadow:0 3px 10px #d0a66825; }
.weather-button { border:0; border-radius:14px; background:#fff; color:#5d8d82; box-shadow:0 5px 16px #719c8d20; }.recommend-summary { border-radius:20px 20px 0 0; background:linear-gradient(120deg,#786681,#a47f9a); }.recommend-grid { border-radius:0 0 20px 20px; overflow:hidden; background:#f0e8ef; }
.filter-row { background:#fff; padding:7px; border-radius:18px; box-shadow:0 7px 24px #806d7e12; }.filter-row button { display:flex; align-items:center; gap:6px; border:0; border-radius:12px; }.filter-row button span { font-size:16px; }.filter-row button.active { background:#f4e9f2; color:#75566c; }
.empty { border-radius:22px; background:linear-gradient(135deg,#fff7e9,#f5efff); }.closet-card { border-radius:21px; padding:13px; box-shadow:0 8px 25px #7b687713; border:1px solid #f5edf2; }.closet-card img,.image-placeholder { border-radius:15px; }.badge { background:#eff8f4; color:#4e9586; }.donation-box { border-radius:22px; background:linear-gradient(135deg,#eef9f4,#fff6ec); border:0; }.modal-card { border-radius:28px; box-shadow:0 25px 70px #3d303d40; }.modal { backdrop-filter:blur(6px); }footer { padding:22px; background:#62556a; color:#f6eefa; }.donation-contact,.donation-complete { border-radius:13px; }
.donation-types { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0 18px; }.donation-types strong { margin-right:4px; font-size:13px; }.donation-types span { padding:6px 11px; border-radius:20px; background:#fff; color:#4d6f67; font-size:12px; font-weight:700; box-shadow:0 3px 10px #6f8f8415; }
@keyframes view-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(max-width:900px) { .wardrobe-art { display:none; }.recommend-controls { grid-template-columns:1fr 1fr; }.workspace { min-height:auto; }.summary p { text-align:left; }.hero-copy { margin-top:32px; } }
@media(max-width:600px) { main { padding:0 14px; }.hero { min-height:250px; padding:20px 20px 34px; }.hero h1 { font-size:31px; }.hero h1 em { display:block; margin-left:0; }.hero-copy p br { display:none; }.summary { grid-template-columns:repeat(2,1fr)!important; border-radius:18px; }.summary p { text-align:left; }.view-toggle { top:7px; }.view-toggle button { padding:7px 4px; flex-direction:column; gap:2px; font-size:11px; }.view-toggle button span { width:31px; height:31px; }.item-card { padding:15px; }.recommend-controls { grid-template-columns:1fr; }.weather-button { width:100%; }.section-heading h2 { font-size:23px; }.filter-row { display:grid; grid-template-columns:1fr 1fr; }.filter-row button:first-child { grid-column:1/-1; justify-content:center; } }
@media(max-width:600px) { .category-options,.season-options { grid-template-columns:repeat(3,1fr); }.condition-options { grid-template-columns:repeat(2,1fr); }.condition-options button:first-child { grid-column:1/-1; }.quick-options button { min-height:64px; } }

/* Clearer typography and stronger contrast */
:root { --ink:#302b35; --muted:#5f5964; --sage:#347e70; --rose:#c95970; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body { color:var(--ink); font-family:'Noto Sans KR','Gowun Dodum',sans-serif; font-weight:500; letter-spacing:-.012em; }
p,li,label,button,input,select,a,small,span { text-shadow:0 0 .01px currentColor; }
.brand,.hero h1,.section-heading h2,.closet-card h3,.modal-card h2,.donation-box h3,.recommend-grid h3 { color:#39303f; letter-spacing:0; }
.hero-copy p,.summary span,.summary p,.weather-status,.closet-card p,.recommend-grid p,.recommend-empty,.donation-box p,.modal-card>p { color:#5f5964; font-weight:500; }
.eyebrow,.section-heading p,.details label,.recommend-controls label,.weather-choice>span,legend { color:#514a57; font-weight:700; }
.details input,.details select,.recommend-controls input,.recommend-controls select { color:#302b35; font-weight:500; }
input::placeholder { color:#817982; opacity:1; }
.view-toggle button,.filter-row button,.weather-button,.donation-contact,.donation-complete { font-weight:700; color:#514a57; }
.view-toggle button.active,.filter-row button.active { color:#513445; }
.question { color:#37313b; font-weight:500; }.question .num { font-weight:700; }.choices label { color:#4d4652; font-weight:700; }
.badge,.result-tag { font-weight:700; }.primary { font-weight:700; color:#fff; }

/* Keep registration controls visible in the first viewport */
@media(min-width:901px) {
  .hero { min-height:145px; padding-top:18px; padding-bottom:24px; border-radius:0 0 30px 30px; }
  .hero-copy { margin-top:14px; }.hero .eyebrow { display:none; }.hero h1 { margin:4px 0 0; font-size:35px; }.wardrobe-art { display:none; }
  .summary { margin-top:-15px; margin-bottom:14px; padding:10px 18px; }.summary div { padding:4px 10px; }.summary strong { font-size:22px; }.summary p { margin:0; }
  .section-heading { margin-bottom:10px; }.section-heading>span { width:32px; height:32px; }.section-heading h2 { font-size:23px; margin:1px 0; }
  .item-card { padding:15px 18px; grid-template-columns:230px 1fr; gap:22px; }.photo-box { height:205px; }
  .quick-field { margin:8px 0; }.quick-label { margin-bottom:5px; }.quick-options { gap:6px; }.quick-options button { min-height:55px; }.quick-options i { font-size:19px; }
}