/* KunStudio personalcolor — MVP styles (2026-08-22). Mobile-first, no external fonts. */
:root{
  --bg:#fbf7f4; --ink:#241f29; --muted:#6b6070; --line:#ece3e8;
  --card:#ffffff; --accent:#b5527a; --accent2:#e79bb6; --gold:#c98a2e;
  --shadow:0 8px 30px rgba(80,40,70,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:720px;margin:0 auto;padding:20px 18px 60px}
header.hero{text-align:center;padding:34px 0 8px}
.brand{font-weight:800;letter-spacing:.3px;color:var(--accent);font-size:14px;text-transform:uppercase}
h1{font-size:27px;line-height:1.25;font-weight:800;margin:10px 0 8px}
h1 .grad{background:linear-gradient(90deg,#b5527a,#e79bb6,#c98a2e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(--muted);font-size:15px;max-width:540px;margin:0 auto}
.trust{margin:14px auto 0;font-size:12.5px;color:var(--muted);display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.trust span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px}

.drop{margin:22px 0 8px;background:var(--card);border:2px dashed var(--accent2);border-radius:16px;
  padding:34px 18px;text-align:center;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.drop:hover,.drop.pc-drag{border-color:var(--accent);background:#fff}
.drop .big{font-size:16px;font-weight:700}
.drop .small{color:var(--muted);font-size:13px;margin-top:6px}
.drop .btn{display:inline-block;margin-top:14px;background:linear-gradient(135deg,#b5527a,#e79bb6);color:#fff;
  font-weight:700;padding:12px 26px;border-radius:999px;border:none;font-size:15px}
.privacy{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}
#preview{max-height:220px;margin:14px auto 0;border-radius:12px;border:1px solid var(--line)}
.errbox{margin:14px 0;background:#fff3f3;border:1px solid #f3c2c2;color:#a12a2a;border-radius:10px;padding:12px 14px;font-size:14px}

#resultArea{margin-top:26px}
.teaser{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);text-align:center}
.pc-season-chip{display:inline-block;font-weight:800;font-size:20px;color:#fff;padding:10px 22px;border-radius:999px;margin-bottom:10px}
.pc-spring{background:linear-gradient(135deg,#ff9e6d,#f7c948)}
.pc-summer{background:linear-gradient(135deg,#e8a7c6,#a7c7e7)}
.pc-autumn{background:linear-gradient(135deg,#b5651d,#808000)}
.pc-winter{background:linear-gradient(135deg,#c2185b,#1f3a93)}
.pc-conf{font-size:13px;color:var(--muted)}
.pc-tagline{font-size:15px;margin:8px 0}
.pc-skin{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--muted);margin-top:6px}
.pc-skin-swatch{width:20px;height:20px;border-radius:50%}
.pc-warn{font-size:12.5px;color:var(--gold);margin-top:8px}

.paid-shell{position:relative;margin-top:16px}
.pc-locked{filter:blur(7px);pointer-events:none;user-select:none;max-height:420px;overflow:hidden}
.pc-block{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.pc-block h3{font-size:15px;margin-bottom:10px;color:var(--accent)}
.pc-swatches{display:flex;flex-wrap:wrap;gap:8px}
.pc-swatch{width:38px;height:38px;border-radius:9px;border:1px solid rgba(0,0,0,.08);display:inline-block}
.pc-mini{font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.pc-list{list-style:none}
.pc-list li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.pc-list li:last-child{border-bottom:none}
.pc-shop{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:560px){.pc-shop{grid-template-columns:repeat(3,1fr)}}
.pc-shop-card{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff}
.pc-shop-swatch{width:100%;height:44px;border-radius:7px}
.pc-shop-name{font-size:11.5px;font-weight:700;line-height:1.2}
.pc-shop-note{font-size:11px;color:var(--muted)}

.paywall{margin-top:16px;background:linear-gradient(135deg,#fff,#fdeef4);border:1px solid var(--accent2);
  border-radius:16px;padding:22px;text-align:center;box-shadow:var(--shadow)}
.paywall h2{font-size:19px;margin-bottom:6px}
.paywall p{color:var(--muted);font-size:14px;max-width:460px;margin:0 auto 14px}
.pc-plans{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pc-plan{flex:1;min-width:210px;max-width:280px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left}
.pc-plan .price{font-size:24px;font-weight:800}
.pc-plan .price small{font-size:13px;color:var(--muted);font-weight:600}
.pc-plan ul{list-style:none;margin:10px 0;font-size:13px;color:var(--ink)}
.pc-plan ul li{padding:3px 0}
.pc-plan ul li::before{content:'✓ ';color:var(--accent);font-weight:800}
.pc-plan button,.pc-plan .pc-buy{display:block;width:100%;box-sizing:border-box;border:none;border-radius:999px;padding:12px;font-weight:800;font-size:15px;cursor:pointer;text-align:center;text-decoration:none}
.pc-plan.primary button,.pc-plan.primary .pc-buy{background:linear-gradient(135deg,#b5527a,#e79bb6);color:#fff}
.pc-plan.secondary button{background:#241f29;color:#fff}
.pc-guarantee{font-size:12px;color:var(--muted);margin-top:12px}
.pc-provisional{font-size:11.5px;color:var(--gold);margin-top:6px}

section.info{margin-top:34px}
section.info h2{font-size:18px;color:var(--accent);margin-bottom:10px}
section.info p{font-size:14.5px;margin-bottom:10px;color:#3a333f}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--accent)}
details.faq[open] summary{margin-bottom:8px}
footer{margin-top:40px;text-align:center;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);padding-top:18px}
footer a{color:var(--muted)}
.disclaimer{font-style:italic;margin-top:8px;font-size:11.5px}
