/* smallwishai.com 소개 페이지. 앱(closet-app.css)과 같은 색·서체. 모바일 우선. */
:root { --ink:#141312; --ink-2:#232120; --paper:#f4f1eb; --sand:#e8e1d7; --line:#d6cfc4; --muted:#7a746b; --lime:#c9ff5d; --lime-dark:#7c9d3e; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; word-break:keep-all; overflow-wrap:break-word; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans KR",Manrope,-apple-system,sans-serif; }
a { color:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

/* 헤더 */
.topbar { position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--line); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:60px; }
.wordmark { display:inline-flex; align-items:center; gap:7px; font:800 .95rem/1 Manrope,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.wordmark i { width:6px; height:6px; background:var(--lime); border:1px solid var(--ink); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 18px; border:0; background:var(--ink); color:#fff; font:700 .88rem "Noto Sans KR",sans-serif; text-decoration:none; transition:background .15s,color .15s; }
.btn:hover { background:var(--lime); color:var(--ink); }
.btn.lime { background:var(--lime); color:var(--ink); }
.btn.lime:hover { background:#fff; }
.btn.sm { min-height:38px; padding:0 14px; font-size:.78rem; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover { background:var(--ink); color:#fff; }
.dark .btn.ghost { color:#fff; border-color:#fff; }
.dark .btn.ghost:hover { background:#fff; color:var(--ink); }

/* 히어로 */
.hero { padding:56px 0 40px; }
.hero h1 { margin:12px 0 0; font-size:clamp(2.3rem,7.5vw,4.6rem); line-height:1.08; letter-spacing:-.06em; font-weight:800; }
.hero h1 em { font-style:normal; color:var(--lime-dark); }
.hero p { max-width:520px; margin:18px 0 0; color:var(--muted); font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-actions .btn { flex:1 1 200px; }
.hero-note { margin:16px 0 0; color:var(--muted); font-size:.72rem; line-height:1.6; }

/* 오늘 카드 (앱과 동일한 모양의 예시) */
.demo { padding:8px 0 56px; }
.today-card { position:relative; padding:20px; background:var(--ink); color:#fff; }
.today-card .weather { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; font:500 .76rem "DM Mono",monospace; color:#d9d5cd; }
.today-card h2 { margin:14px 0 8px; font-size:1.35rem; line-height:1.3; letter-spacing:-.04em; }
.today-card .reason { margin:0; color:#b9b4ab; font-size:.82rem; line-height:1.7; }
.outfit { margin:18px 0 0; padding:0; list-style:none; border-top:1px solid #3a3735; }
.outfit li { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid #3a3735; }
.outfit .thumb { width:52px; height:52px; display:grid; place-items:center; background:var(--ink-2); color:var(--lime); font:500 .58rem "DM Mono",monospace; letter-spacing:.08em; overflow:hidden; }
.outfit .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.outfit strong { display:block; font-size:.92rem; letter-spacing:-.03em; }
.outfit small { color:#a9a49b; font-size:.72rem; }
.modes { display:flex; gap:6px; margin:18px 0 0; }
.modes span { flex:1; display:grid; place-items:center; min-height:40px; border:1px solid #4a4744; color:#d9d5cd; font:600 .78rem "Noto Sans KR",sans-serif; }
.modes span.on { background:#fff; border-color:#fff; color:var(--ink); }
.today-card .btn { width:100%; margin-top:14px; }
.demo-caption { margin:12px 0 0; color:var(--muted); font-size:.72rem; line-height:1.6; }

/* 섹션 공통 */
.section { padding:48px 0; border-top:1px solid var(--line); }
.section h2 { margin:0; font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.2; letter-spacing:-.05em; font-weight:800; }
.section > .wrap > p { max-width:560px; margin:14px 0 0; color:var(--muted); font-size:.92rem; line-height:1.75; }

/* 사진 */
.band { margin:0; }
.band img { width:100%; height:auto; display:block; }
.how-figure { margin:0 0 26px; }
.how-figure img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.how-body { min-width:0; }

/* 사용 흐름 */
.steps { margin:26px 0 0; padding:0; list-style:none; display:grid; gap:0; border-top:1px solid var(--ink); }
.steps li { padding:18px 0; border-bottom:1px solid var(--line); }
.steps strong { display:block; font-size:1.02rem; letter-spacing:-.04em; }
.steps p { margin:6px 0 0; color:var(--muted); font-size:.85rem; line-height:1.7; }

/* 가져오기 */
.dark { background:var(--ink); color:#fff; border-top:0; }
.dark h2 { color:#fff; }
.dark > .wrap > p { color:#b9b4ab; }
.dark .dark-note { margin-top:16px; color:#8f8a81; font-size:.82rem; }
.dark .dark-note strong { color:#fff; font-weight:600; }
.dark .btn.lime { margin-top:22px; }

/* 원칙 */
.principles { margin:26px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.principles li { padding:18px; background:#fff; border:1px solid var(--line); }
.principles strong { display:block; font-size:1rem; letter-spacing:-.04em; }
.principles p { margin:6px 0 0; color:var(--muted); font-size:.84rem; line-height:1.65; }

/* CTA · 푸터 */
.cta { padding:56px 0; text-align:center; border-top:1px solid var(--line); }
.cta h2 { margin:0 0 18px; font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:-.06em; }
.cta-note { margin:18px 0 0; color:var(--muted); font-size:.78rem; }
.footer { padding:30px 0 40px; border-top:1px solid var(--line); background:var(--sand); }
.footer .wrap { display:grid; gap:14px; }
.footer nav { display:flex; flex-wrap:wrap; gap:14px; }
.footer nav a { color:var(--ink); font-size:.76rem; text-decoration:none; }
.footer p { margin:0; color:var(--muted); font-size:.68rem; line-height:1.7; }
.footer .copy { font:400 .62rem "DM Mono",monospace; }

@media (min-width:760px) {
  .how-grid { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:48px; align-items:stretch; }
  .how-figure { position:relative; margin:0; min-height:360px; }
  .how-figure img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .how-grid .steps { grid-template-columns:1fr; gap:0; border-top:1px solid var(--ink); }
  .how-grid .steps li { border-top:0; border-bottom:1px solid var(--line); padding:16px 0; }
  .hero { padding:96px 0 56px; }
  .hero-actions .btn { flex:0 0 auto; min-width:220px; }
  .demo .today-card { max-width:520px; }
  .hero-demo { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
  .hero-demo .hero { padding:0; }
  .hero-demo .demo { padding:0; }
  .hero-demo-wrap { padding:96px 0 72px; }
  .steps { grid-template-columns:repeat(3,1fr); border-top:0; gap:20px; }
  .steps li { border-top:1px solid var(--ink); border-bottom:0; padding-top:14px; }
  .principles { grid-template-columns:repeat(2,1fr); }
  .section { padding:72px 0; }
}