/* Small Wish 앱 화면. 모바일 우선, 검정 + 라임. */
:root { --ink:#141312; --ink-2:#232120; --paper:#f4f1eb; --sand:#e8e1d7; --line:#d6cfc4; --muted:#7a746b; --lime:#c9ff5d; --lime-dark:#7c9d3e; --red:#c85a3f; --safe-top:env(safe-area-inset-top, 0px); --safe-bottom:env(safe-area-inset-bottom, 0px); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; word-break:keep-all; overflow-wrap:break-word; }
body { margin:0; min-height:100dvh; background:var(--paper); color:var(--ink); font-family:"Noto Sans KR",Manrope,-apple-system,sans-serif; }
button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.app { max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:calc(12px + var(--safe-top)) 18px 12px; background:var(--paper); border-bottom:1px solid var(--line); }
.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); }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.wordmark-row { display:inline-flex; align-items:baseline; gap:8px; }
.build { color:var(--muted); font:500 .6rem "DM Mono",monospace; letter-spacing:.04em; }
.textbtn { border:0; background:transparent; padding:6px 0; font:600 .78rem "Noto Sans KR",sans-serif; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.textbtn:hover { color:var(--ink); }

.screen { flex:1; padding:18px 18px calc(84px + var(--safe-bottom)); }
.today-date { font:500 .72rem "Noto Sans KR",sans-serif; color:var(--muted); }
h1 { margin:8px 0 0; font-size:1.7rem; line-height:1.2; letter-spacing:-.05em; font-weight:800; }
h2 { margin:0; font-size:1.15rem; letter-spacing:-.04em; font-weight:800; }
.sub { margin:10px 0 0; color:var(--muted); font-size:.86rem; line-height:1.7; }

/* 버튼 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 18px; border:0; background:var(--ink); color:#fff; font:700 .9rem "Noto Sans KR",sans-serif; transition:background .15s,color .15s; }
.btn:hover:not(:disabled) { background:var(--lime); color:var(--ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.lime { background:var(--lime); color:var(--ink); }
.btn.lime:hover:not(:disabled) { background:#fff; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover:not(:disabled) { background:var(--ink); color:#fff; }
.btn.wide { width:100%; }
.btn.sm { min-height:38px; padding:0 12px; font-size:.78rem; }

/* 폼 */
.field { display:grid; gap:6px; margin:0 0 14px; font-size:.74rem; color:var(--muted); }
.field input, .field select, .field textarea { width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:16px; outline:none; border-radius:0; -webkit-appearance:none; appearance:none; }
.field select { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141312' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right:36px; }
.field textarea { min-height:160px; resize:vertical; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--ink); }
.error { min-height:20px; margin:4px 0 8px; color:var(--red); font-size:.78rem; line-height:1.5; }
.status { min-height:20px; margin:8px 0 0; color:var(--lime-dark); font-size:.78rem; }

/* 로그인 */
.auth { padding-top:48px; }
.auth h1 { font-size:2rem; }
.auth form { margin-top:32px; }
.auth .switch { margin:18px 0 0; text-align:center; }
.auth .login-google { margin-top:32px; }
.auth .or-email { margin:26px 0 0; text-align:center; color:var(--muted); font-size:.74rem; }
.auth #auth-form { margin-top:12px; }
.hint.center { text-align:center; margin-top:12px; }
#shot-form { margin-top:16px; }
.fallback .field { margin-top:12px; }

/* 오늘 카드 */
.today-card { margin-top:18px; padding:20px; background:var(--ink); color:#fff; }
.today-card .today-date { color:#a9a49b; }
.today-card .weather { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; font:500 .78rem "DM Mono",monospace; color:#d9d5cd; }
.today-card h2 { margin:14px 0 8px; color:#fff; font-size:1.35rem; line-height:1.3; }
.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) auto; 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; }
.outfit strong { display:block; font-size:.92rem; letter-spacing:-.03em; }
.outfit small { color:#a9a49b; font-size:.72rem; }
.outfit .missing { padding:12px 0; color:var(--lime); font-size:.8rem; line-height:1.6; }
.modes { display:flex; gap:6px; margin:18px 0 0; }
.modes button { flex:1; min-height:40px; border:1px solid #4a4744; background:transparent; color:#d9d5cd; font:600 .78rem "Noto Sans KR",sans-serif; }
.modes button[aria-pressed="true"] { background:#fff; border-color:#fff; color:var(--ink); }
.today-card .btn { margin-top:14px; }
.empty { margin:16px 0 0; padding:18px; background:var(--sand); color:var(--muted); font-size:.84rem; line-height:1.7; }
.empty strong { color:var(--ink); }

/* 옷장 */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:26px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--ink); }
.section-head span { color:var(--muted); font:500 .7rem "DM Mono",monospace; }
.closet { margin:0; padding:0; list-style:none; }
.closet li { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.closet .thumb { width:48px; height:48px; display:grid; place-items:center; background:var(--sand); color:var(--muted); font-size:.62rem; overflow:hidden; }
.closet .thumb img { width:100%; height:100%; object-fit:cover; }
.closet strong { display:block; font-size:.9rem; letter-spacing:-.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.closet small { color:var(--muted); font-size:.72rem; }
.closet .del { border:0; background:transparent; color:var(--muted); font-size:.74rem; text-decoration:underline; text-underline-offset:3px; padding:8px 0 8px 8px; }
.closet .del:hover { color:var(--red); }
.closet .row-actions { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
/* ‘이거 넣어서’ 고정 버튼. 오늘 카드(어두운 배경)와 옷장 목록(밝은 배경) 양쪽에 놓인다. */
.pin { min-height:30px; padding:0 10px; border:1px solid #4a4744; background:transparent; color:#d9d5cd; font:600 .7rem "Noto Sans KR",sans-serif; white-space:nowrap; }
.pin[aria-pressed="true"] { background:var(--lime); border-color:var(--lime); color:var(--ink); }
.closet .pin { border-color:var(--line); color:var(--ink); }
.add-row { display:grid; grid-template-columns:1fr; gap:8px; margin:14px 0 0; }
.add-row .two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.add-row input, .add-row select { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); background:#fff; font-size:16px; outline:none; border-radius:0; -webkit-appearance:none; appearance:none; }
.add-row select { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141312' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right:32px; }
.add-row input:focus, .add-row select:focus { border-color:var(--ink); }
.hint { margin:10px 0 0; color:var(--muted); font-size:.72rem; line-height:1.7; }
.import-cta { display:grid; gap:8px; margin:18px 0 0; padding:16px; border:1px solid var(--ink); background:#fff; }
.import-cta p { margin:0; font-size:.82rem; line-height:1.6; }
.import-cta p strong { display:block; margin-bottom:2px; }

/* 가져오기 */
.steps { margin:14px 0 0; padding:0; list-style:none; counter-reset:s; }
.steps li { position:relative; padding:10px 0 10px 34px; border-bottom:1px solid var(--line); font-size:.86rem; line-height:1.6; counter-increment:s; }
.steps li::before { content:counter(s, decimal-leading-zero); position:absolute; left:0; top:12px; font:500 .68rem "DM Mono",monospace; color:var(--lime-dark); }
.steps a { color:var(--ink); font-weight:700; }
.candidates { margin:16px 0 0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.candidates li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.candidates input { width:22px; height:22px; margin:0; accent-color:var(--ink); }
.candidates strong { display:block; font-size:.9rem; letter-spacing:-.03em; }
.candidates small { color:var(--muted); font-size:.72rem; }
.candidates li.off { opacity:.45; }
.sticky-actions { position:sticky; bottom:calc(64px + var(--safe-bottom)); display:grid; gap:8px; padding:12px 0; background:linear-gradient(transparent, var(--paper) 30%); }

/* 하단 탭 */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:5; display:grid; grid-template-columns:1fr 1fr 1fr; max-width:520px; margin:0 auto; padding-bottom:var(--safe-bottom); background:var(--ink); }
.tabs button { min-height:60px; border:0; background:transparent; color:#8f8a81; font:700 .8rem "Noto Sans KR",sans-serif; display:grid; place-items:center; }
.tabs button[aria-current="page"] { color:#fff; }
.toast { position:fixed; left:50%; bottom:calc(76px + var(--safe-bottom)); transform:translateX(-50%); max-width:calc(100% - 36px); padding:11px 16px; background:var(--ink); color:#fff; font-size:.82rem; border-left:4px solid var(--lime); z-index:10; }

/* 무드 · 태그 · 사진 */
.moods { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; }
.moods button { min-height:34px; padding:0 12px; border:1px solid #4a4744; background:transparent; color:#d9d5cd; font:600 .74rem "Noto Sans KR",sans-serif; }
.moods button[aria-pressed="true"] { background:#fff; border-color:#fff; color:var(--ink); }
.moods .label { align-self:center; margin-right:4px; color:#a9a49b; font:500 .62rem "DM Mono",monospace; letter-spacing:.1em; }
.tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.tags span { padding:2px 6px; background:var(--sand); color:var(--muted); font:600 .6rem "Noto Sans KR",sans-serif; }
.tags span.style { background:var(--ink); color:#e8e1d7; }
.closet li.tagging .thumb::after { content:"읽는 중"; position:absolute; inset:auto 0 0 0; background:rgba(20,19,18,.75); color:var(--lime); font:500 .5rem "DM Mono",monospace; text-align:center; padding:2px 0; }
.closet .thumb { position:relative; }
.photo-add { margin:12px 0 0; }
.photo-add label.btn { cursor:pointer; }
.fallback { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
.fallback summary { cursor:pointer; color:var(--muted); font-size:.8rem; }

/* 착용 피드백 */
.feedback { display:flex; gap:6px; margin:18px 0 0; }
.feedback button { flex:1; min-height:44px; border:1px solid #4a4744; background:transparent; color:#d9d5cd; font:700 .8rem "Noto Sans KR",sans-serif; }
.feedback button[aria-pressed="true"] { background:#fff; border-color:#fff; color:var(--ink); }
.feedback button:disabled { opacity:.45; }


/* 2026-09-06 AI 냄새 걷어내기 (design.md §4.1): 검정 카드·라임 남용·모노 라벨 제거, 옷 사진 크게. 뒤에 두어 위 규칙을 덮는다. */
.wordmark { letter-spacing:-.01em; text-transform:none; font-size:1rem; }
.wordmark i { display:none; }
.today-card { background:#fff; color:var(--ink); border:1px solid var(--line); padding:18px; }
.today-card .today-date, .today-card .weather { color:var(--muted); font:500 .78rem "Noto Sans KR",sans-serif; letter-spacing:0; }
.today-card h2 { color:var(--ink); font-size:1.25rem; margin:10px 0 6px; }
.today-card .reason { color:var(--muted); }
.outfit { display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; border-top:0; margin-top:14px; }
.outfit li { display:block; padding:0; border:0; }
.outfit .thumb { width:100%; height:auto; aspect-ratio:1; background:var(--sand); color:var(--muted); font:700 .7rem "Noto Sans KR",sans-serif; letter-spacing:0; margin-bottom:6px; }
.outfit strong { color:var(--ink); font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.outfit small { color:var(--muted); display:block; }
.outfit .missing { grid-column:1 / -1; color:var(--ink); padding:6px 0; }
.outfit .pin { margin-top:6px; }
.moods button, .modes button, .feedback button, .pin { border-color:var(--line); color:var(--ink); background:#fff; }
.moods button[aria-pressed="true"], .modes button[aria-pressed="true"], .pin[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.moods .label { color:var(--muted); font:600 .74rem "Noto Sans KR",sans-serif; letter-spacing:0; text-transform:none; }
.feedback button[aria-pressed="true"] { background:var(--sand); border-color:var(--sand); color:var(--ink); }
.feedback button[data-fb="worn"][aria-pressed="true"] { background:var(--lime); border-color:var(--lime); }
/* 라임은 세 곳: 다음 행동(주 버튼), '입을게요' 완료, 체크. */
.btn.lime { background:var(--lime); color:var(--ink); }
.btn.lime:hover:not(:disabled) { background:#fff; color:var(--ink); }
.status { color:var(--muted); }
.tabs { background:#fff; border-top:1px solid var(--line); }
.tabs button { color:var(--muted); }
.tabs button[aria-current="page"] { color:var(--ink); }
.closet li.tagging .thumb::after { color:#fff; }
.cond-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.cond-row .textbtn { color:var(--ink); }