/* fitlog v6 (Claude Design 출시 전 검수): 사진이 주인공, 화면은 차분한 SNS. 기준 폭 375, 단위 px.
   - 사진은 자르지 않고 원래 비율. 모양이 정해진 칸(달력 칸 · 작은 썸네일 · 옷장 칸)만 자른다.
   - Playfair 이탤릭 600 은 로고 · 'What should I wear?' · 달력 달 이름에만. 숫자·날짜는 모두 Pretendard.
   - 글자 11 · 12 · 13 · 15 · 17 · 22, 굵기 400 · 500 · 600.
   - 모서리: 사진 0 / 칩 · 버튼 · 입력 · 카드 · 배지 · 이름표 4 / 시트 위 14 / 아바타 · 스위치 · 기록 버튼 · 라디오는 원.
   - 여백: 화면 좌우 16 · 화면 안 큰 묶음 사이 36 · 시트 안 묶음 사이 28 · 입력 칸 사이 20 · 칩·버튼 사이 6 · 사진 사이 2.
   - 색 동그라미는 8(글자 줄 안) · 16(칩·줄 안) · 28(고르는 견본 · 목록 맨 앞) 세 크기만. */
:root {
  --bg: #ffffff;
  --soft: #f4f5f7;     /* 옅은 면: 카드 · 칩 · 입력창 */
  --fill: #f4f5f7;     /* 채움: 회색 버튼 · 아바타 (디자인 틀의 옅은 바탕과 같은 색) */
  --line: #e2e5e9;     /* 구분선 */
  --line-2: #d2d6dc;   /* 진한 구분선 · 시트 손잡이 · 꺼진 스위치 */
  --off: #c4c8ce;      /* 누를 수 없는 것: 미래 날짜 · 0개가 되는 칩 · 막힌 날짜 · 꺼진 아이콘 (글자가 아니라 '꺼짐' 표시) */
  --text: #121417;     /* 글자 · 검정 버튼 · 고른 칩 */
  --text-2: #63676e;   /* 보조 글자 */
  --text-3: #8d929a;   /* placeholder · 화살표 · 꺼진 탭 (대비 3.2:1 이라 읽어야 하는 글자에는 쓰지 않는다) */
  --alert: #b4474f;    /* 경고 · 일요일 · 삭제 · 신고 */
  --scrim: rgba(18, 20, 23, .4);   /* 시트 뒤 가림막 */
  --label: rgba(18, 20, 23, .78);  /* 사진 위 이름표 · 태그 수 배지 */
  --bar: rgba(255, 255, 255, .96); /* 위·아래에 붙는 반투명 줄 */
  --r: 4px;
  --gutter: 16px;
  --font: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 탭바 83 = 위 12 + 버튼 44 + 아래(홈 인디케이터 자리) 27. 안전 영역이 더 크면 그만큼 */
  --tabbar-h: calc(56px + max(27px, var(--safe-b) - 7px));
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all; /* 한국어가 단어 중간에서 줄바꿈되지 않게 */
}
/* 누르는 동안은 흐리게만 */
button:active, .tabbar a:active, .card:active, .more-grid a:active, .pgrid a:active { opacity: .6; transition: opacity .1s; }
/* 손가락·마우스로 누른 뒤 남는 초점 테두리는 그리지 않는다 (홈 탭 옆 세로선으로 보였다). 키보드로 옮길 때만 보인다 */
:focus:not(:focus-visible) { outline: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* 앱처럼: 두 번 톡 눌러 확대하지 않게 (두 손가락 확대는 app.js 에서 막는다) */
html { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* 선 아이콘: 둥근 선 끝. on 이면 안을 채운다 (하트·북마크) */
.ico { flex: none; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ico.on { fill: currentColor; }

.app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) { .app { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); } }
/* 탭바가 있는 화면은 스크롤 끝 여백 = 탭바 + 32, 없는 화면은 안전 영역 + 16 */
#view { flex: 1; padding-bottom: calc(var(--tabbar-h) + 32px); }
body.hide-tabbar #view { padding-bottom: calc(var(--safe-b) + 16px); }

/* ---------- 하단 탭바: 아이콘 24 + 간격 4 + 이름 11. 버튼 영역은 위에서 12 띄우고 높이 44 ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 440px; height: var(--tabbar-h);
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 var(--line);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start;
  z-index: 20;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 44px; margin-top: 12px; color: var(--text-3); font-size: 11px; font-weight: 500; line-height: 1;
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.active { color: var(--text); font-weight: 600; }
.tabbar a.active svg { stroke-width: 2; }
/* 올리기: 지름 24 원 테두리 + '+' 12. 늘 검정, 이름 500 */
.tabbar a[data-tab="upload"] { color: var(--text); font-weight: 500; }
.shutter { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text); display: flex; align-items: center; justify-content: center; color: var(--text); }
.tabbar .shutter svg { width: 12px; height: 12px; stroke-width: 1.6; }
/* MY: 아바타 24. 지금 탭이면 고리 */
.tab-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; line-height: 1; }
.tabbar a.active .tab-avatar { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.8px var(--text); }
body.hide-tabbar .tabbar { display: none; }

/* ---------- 화면 맨 위 줄 48: ‹ + 제목 17/600 + 오른쪽 버튼 (오른쪽 아이콘 끝이 화면 끝에서 16) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bar);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex; align-items: center;
  height: 48px; padding: 0 8px 0 6px;
}
.topbar h1 { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar h1:first-child { padding-left: 10px; }
/* 입력 화면(코디 올리기): × · 가운데 제목 · 저장 */
.topbar.center { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; padding: 0 8px; }
.topbar.center h1 { text-align: center; padding: 0; }
.topbar.center .text-btn { justify-self: end; }
.topbar.center > :last-child { justify-self: end; }
.logo { font-family: var(--serif); font-style: italic; font-weight: 600; line-height: 1; }
.icon-btn {
  width: 40px; height: 44px; border: 0; background: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text);
}
.icon-btn:disabled { color: var(--off); cursor: default; }

/* ---------- 홈 머리: 로고 줄 56(로고 34 + 한 줄 15, 아래 맞춤, 아래 여백 6) + 탭 줄 44. 내리면 로고 줄이 접힌다 ---------- */
.home-head {
  position: sticky; top: 0; z-index: 10; padding: 0 var(--gutter);
  box-shadow: inset 0 -1px 0 var(--line);
  background: var(--bar);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .22s ease;
}
.home-head.folded { transform: translateY(-56px); }
.home-top { display: flex; align-items: flex-end; height: 56px; padding-bottom: 6px; }
.home-top .logo { font-size: 34px; letter-spacing: -.8px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.home-tagline { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 15px; line-height: 1; color: var(--text-2); }
.home-head .tabs { height: 44px; align-items: stretch; gap: 20px; }
.home-head .tab { font-size: 17px; }
.sort-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0; height: 36px;
  font-size: 13px; color: var(--text-2); white-space: nowrap;
}
/* 보기 전환: 격자 · 한 장 아이콘 22 두 개, 간격 2. 지금 보기는 검정, 다른 쪽은 흐리게 */
.view-toggle { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; }
.view-toggle button { display: flex; align-items: center; justify-content: center; width: 22px; height: 44px; border: 0; background: none; padding: 0; color: var(--off); }
.view-toggle button.on { color: var(--text); }
.home-head .view-toggle { align-self: center; }

/* 글자 탭: 켜짐 600 검정 + 밑줄 2, 꺼짐 500 연한 글자. 탭 줄 높이 44 */
.tabs { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0;
  font-size: 15px; font-weight: 500; line-height: 1; color: var(--text-3); white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s;
}
.tab.on { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--text); }

.section { padding: 0 var(--gutter); margin-top: 20px; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }

/* ---------- 칩: 높이 36(앱 전체 하나), 좌우 12. 꺼짐 옅은 면 13/400, 켬 검정 13/600 흰색.
   개수는 같은 칩 안에 400 연한 글자. 0개는 같은 옅은 면 + 흐린 글자, 누를 수 없음 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px;
  border: 0; border-radius: var(--r); background: var(--soft); padding: 0 12px;
  font-size: 13px; font-weight: 400; line-height: 1; color: var(--text); white-space: nowrap; cursor: pointer;
}
.chip.on { background: var(--text); color: #fff; font-weight: 600; }
.chip .ico { margin-right: -2px; color: var(--text-2); }
.chip .num { margin-left: 2px; font-weight: 400; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chip.on .num { color: rgba(255, 255, 255, .6); }
.chip.zero, .chip:disabled { background: var(--soft); box-shadow: none; color: var(--off); cursor: default; }
.chip.zero .num { color: var(--off); }

/* ---------- 버튼: 화면 안 36(13/600), 아래 고정 · 로그인 48(15/600). 검정은 화면에 하나, 나머지는 회색 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 18px; border: 0; border-radius: var(--r); background: var(--fill);
  font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--text);
}
.btn.primary { background: var(--text); color: #fff; }
.btn.block { width: 100%; }
.btn.sm, .btn.sub { height: 36px; padding: 0 14px; font-size: 13px; }
.btn.danger { color: var(--alert); }
.btn:disabled { opacity: .5; cursor: default; }
.btn i { font-size: 17px; }
.text-btn { border: 0; background: none; padding: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.text-btn.off { color: var(--text-3); }
.link { border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 입력창: 모두 채움 면, 높이 48, 좌우 14, 15/400, 테두리 없음. 입력 중에만 흰 바탕 + 1.5 검정 선 ---------- */
.input {
  height: 48px; width: 100%; border: 0; border-radius: var(--r); background: var(--soft);
  padding: 0 14px; outline: none; font-size: 15px; box-shadow: none;
}
.input::placeholder { color: var(--text-3); }
.input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--text); }
textarea.input { height: auto; min-height: 80px; padding: 13px 14px; resize: none; line-height: 1.45; }
select.input { padding: 0 10px; }
.err { color: var(--alert); font-size: 13px; margin: 0; }
.err:empty { display: none; }
.err.note { color: var(--text-2); line-height: 1.6; }
/* 분석 탭: 컬러 추천이 아직일 때 한 줄 */
.tips-wait { margin: 24px var(--gutter) 0; padding: 14px 16px; border-radius: var(--r); background: var(--soft); font-size: 13px; line-height: 1.6; color: var(--text-2); }
/* 인증 메일 다시 보내기 줄 (로그인 버튼 위) */
.resend-row { margin: -4px 0 12px; font-size: 13px; color: var(--text-2); }
.resend-row .find-link:disabled { color: var(--text-2); font-weight: 400; }

/* ---------- 아바타: 24 탭바 · 32 게시물 · 40 목록 · 80 프로필. 채움 면 + 이니셜 600 ---------- */
.avatar { flex: none; border-radius: 50%; background: var(--fill); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; line-height: 1; }

/* ---------- 둥근 스위치 44×26, 손잡이 22 흰색. 켬 검정, 끔 진한 구분선 ---------- */
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 44px; height: 26px; border-radius: 13px; background: var(--line-2);
  position: relative; cursor: pointer; transition: background .15s;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.switch:checked { background: var(--text); }
.switch:checked::after { transform: translateX(18px); }

/* ---------- AI 표시: 회색 별로 시작하는 세 모양만 (색·배경 상자·반짝이 없음) ---------- */
.ai-star { flex: none; display: block; fill: var(--text-3); }
/* 라벨 'AI 추천': 별 10 + 11/500, 간격 4 */
.ai-lab { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; line-height: 1; color: var(--text-2); }
/* 일하는 중: 별 12 + 13/400, 간격 6. 별만 깜빡인다 */
.ai-busy { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ai-busy .ai-star { animation: ai-pulse 1.2s ease-in-out infinite; }
.ai-busy.done .ai-star { animation: none; }
@keyframes ai-pulse { 50% { opacity: .3; } }
/* 한 줄 이유: 별 12(위 3) + 12/400/1.5, 간격 6. 설명하는 것 바로 아래 10 */
.ai-why { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.ai-why .ai-star { margin-top: 3px; }

/* ---------- 사진 격자 (홈·검색): 2열, 간격 2. 사진은 원래 비율 그대로 엇갈려 쌓는다 ---------- */
.feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-items: start; }
.feed-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card { position: relative; display: block; overflow: hidden; background: var(--fill); }
.card-body { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 6px; border-radius: var(--r); background: var(--label); color: #fff; font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.feed-info { padding: 0 var(--gutter); margin: 16px 0 12px; font-size: 13px; color: var(--text-2); }
.feed-info:empty { display: none; }
.feed-info.count { margin: 0; }
/* 검색 결과 맨 앞 줄 44: '코디 N개'(N 만 600 글자색) | 정렬 ⌄ · 보기 전환 */
.count-row { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.count-tools { display: flex; align-items: center; }
.result-count { font-size: 13px; color: var(--text-2); }
.result-count b { font-weight: 600; color: var(--text); }
/* 한 장씩 보기: 격자 대신 게시물 한 벌이 세로로 이어진다 */
.feed.big { display: block; }
/* 비슷한 코디: 딱 맞는 코디가 없으면 맨 위에 한 문장만, 있으면 그 뒤에 '비슷한 코디' 제목 */
.feed.parts { display: block; }
.feed-part { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-items: start; }
.near-note { margin: 0; padding: 16px 0 12px; font-size: 13px; color: var(--text-2); }
.near-title { margin: 0; padding: 36px var(--gutter) 12px; font-size: 17px; font-weight: 600; }

/* ---------- 검색 머리: 위에 고정. 검색창 44 + 칩 줄(위 10, 가로로 넘김) + (AI 이유 한 줄) ---------- */
.search-head {
  position: sticky; top: 0; z-index: 10; padding: calc(12px + env(safe-area-inset-top)) 0 0;
  box-shadow: inset 0 -1px 0 var(--line);
  background: var(--bar);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.search { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 var(--gutter); padding: 0 12px; border-radius: var(--r); background: var(--soft); }
.search:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--text); }
.search .s-ico { display: flex; color: var(--text-2); }
.search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font-size: 15px; padding: 0; }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { display: none; }
/* 입력 뒤 지우기: 18 원 */
.s-clear { flex: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 50%; padding: 0; background: var(--text-3); color: #fff; }
.s-clear[hidden] { display: none; }
.fbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--gutter) 12px; }
.fbar::-webkit-scrollbar { display: none; }
/* 필터 아이콘 칩 36×36. 고른 게 있으면 오른쪽 위 점 6 */
.fbtn { position: relative; flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r); background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--text); padding: 0; }
.fbtn.dot::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.search-why { margin: -2px var(--gutter) 12px; white-space: nowrap; }
/* 결과 없음: 걸린 조건 칩(× 로 하나씩 풀기, 풀면 나오는 수) + '조건 모두 풀기' */
.no-result { padding: 48px 8px 24px; }
.no-result h3 { margin: 0 0 6px; }
.relax { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 20px; }
.relax .chip { gap: 6px; }
.relax .chip .num { margin: 0; color: var(--text-2); }
/* 키·몸무게 범위: 선택칸 두 개 + 가운데 ~ */
.height-range { display: flex; align-items: center; gap: 8px; min-width: 0; }
.height-range select.input { flex: 1; }

/* ---------- 아래에서 올라오는 창: 위 모서리 4, 손잡이 36×4(위 8), 뒤 가림막 ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(18, 20, 23, 0); transition: background .25s; }
.sheet-back.show { background: var(--scrim); }
.sheet {
  position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); transition: transform .25s ease-out;
  width: 100%; max-width: 440px; max-height: 80vh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
  background: #fff; padding: 16px var(--gutter) calc(var(--safe-b) + 16px);
}
.sheet::before { content: ''; position: absolute; top: 8px; left: 50%; margin-left: -18px; width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); }
.sheet-back.show .sheet { transform: translate(-50%, 0); }
/* 머리 48 = 72 · 제목 17/600 가운데 · 72. × 는 24 (누르는 칸 44) */
.sh-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; height: 48px; flex: none; }
.sh-head strong { text-align: center; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-l { justify-self: start; display: flex; }
.sh-r { justify-self: end; display: flex; }
.sh-x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; padding: 0; color: var(--text); }
.sh-l .sh-x { margin-left: -10px; }
.sh-r .sh-x { margin-right: -10px; }
.sh-save { border: 0; background: none; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--text); }
.sh-text { border: 0; background: none; padding: 10px 0; font-size: 13px; font-weight: 400; color: var(--text-2); white-space: nowrap; }
/* 큰 창: 머리 · 스크롤되는 몸 · 아래 고정 버튼 (버튼 아래는 안전 영역 + 10) */
.sheet.tall { top: 56px; max-height: none; overflow: hidden; display: flex; flex-direction: column; padding: 16px 0 0; }
.sheet.tall.top100 { top: 100px; }
.sheet.tall > .sh-head { padding: 0 var(--gutter); }
.sh-body { min-height: 0; }
.sheet.tall > .sh-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) calc(var(--safe-b) + 24px); }
.sh-foot { flex: none; padding: 10px var(--gutter) calc(var(--safe-b) + 10px); background: #fff; box-shadow: inset 0 1px 0 var(--line); }
/* 내용이 짧은 큰 창은 내용 높이만큼만 */
.sheet.tall.single, .sheet.tall.tidy-sheet, .sheet.tall.closet-sheet:not(.top100) { top: auto; max-height: 85vh; }
.sheet-desc { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.sheet-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
/* ⋯ 메뉴 · 정렬: 목록 하나. 줄 52 + 아래 선, 고른 항목 600 + 오른쪽 체크. 메뉴는 맨 아래 '취소' 줄 */
.sheet-menu { display: flex; flex-direction: column; }
.menu-title { padding: 8px 0 4px; text-align: center; }
.action-group { display: flex; flex-direction: column; }
.action-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--line); font-size: 15px; color: var(--text); text-align: left; }
.action-group > :last-child, .action-group > :last-child .action-row { box-shadow: none; }
.action-row .chk { margin-left: auto; display: flex; color: var(--text); }
.action-row .chk.go { color: var(--text-3); }
.action-row.alert { color: var(--alert); }
.action-row.on { font-weight: 600; }
.action-row .sub { font-size: 12px; font-weight: 400; color: var(--text-2); }
.action-row.cancel { justify-content: center; margin-top: 8px; box-shadow: inset 0 1px 0 var(--line); color: var(--text-2); }
.is-confirm .action-row { justify-content: center; }
.is-confirm .action-row.alert { font-weight: 600; }
/* 가입 직후 한 번: 지난 코디 한꺼번에 올리기 제안 */
.welcome { text-align: center; padding-top: 8px; }
.welcome h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text); }
.welcome p { margin: 6px 0 24px; font-size: 13px; color: var(--text-2); }
.welcome .action-row.cancel { min-height: 44px; height: 44px; margin-top: 4px; font-size: 13px; color: var(--text-2); box-shadow: none; }
/* 정렬 창: 좋아요순 줄 바로 아래 기간 칩 */
.sort-like .action-row { box-shadow: none; }
.sort-period { padding: 0 0 16px; }

/* ---------- 필터 창: 위 56까지. 왼쪽 '초기화' · 가운데 제목 · 오른쪽 ×, 아래 고정 '코디 N개 보기' 48 ---------- */
.filter-sheet.single > .sh-body { padding-top: 8px; }
.fs-title { margin: 28px 0 12px; font-size: 15px; font-weight: 600; }
.sh-body > section:first-child .fs-title { margin-top: 8px; }
.fs-sub { padding: 20px 0 8px; font-size: 13px; font-weight: 600; }
.fs-sub span, .fs-lab span { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--text-2); }
.fs-link { display: block; margin-top: 16px; border: 0; background: none; padding: 0; font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.fs-hint { margin: 4px 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* 색: 6열, 원 28 + 이름 11(간격 6), 줄 간격 14. 고르면 바깥 고리, 0개는 흐리게 */
.color-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; padding-top: 4px; }
.color-dot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; }
.color-dot .sw { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; }
.color-dot .nm { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.color-dot.on .sw { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 2px #fff, 0 0 0 3.5px var(--text); }
.color-dot.on .nm { color: var(--text); font-weight: 600; }
.color-dot.zero { opacity: .35; cursor: default; }
.color-dot.all .sw { background: var(--soft); box-shadow: none; color: var(--text); }
/* 옷 수정 · 제품 태그 창의 색: 원 28 을 가로로 넘긴다 */
.color-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter); }
.color-row::-webkit-scrollbar { display: none; }
/* 종류: 분류 칩 한 줄(가로로 넘김) + 아래 8에 세부 칩 */
.kind-cats { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.kind-subs { margin-top: 8px; }
/* 자주 쓰는 색 편집 */
.my-colors { display: flex; flex-wrap: wrap; gap: 14px 16px; min-height: 58px; padding: 4px 0 8px; }
.my-colors .fs-hint { margin: 0; align-self: center; }
.color-dot.rm .x { position: absolute; top: -4px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.color-dot .ord { font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .6); }

/* ---------- 입력 창 공통 (옷 수정 · 제품 태그): 라벨 13/600 아래 8, 입력 칸 사이 20 ---------- */
.fs-lab { display: block; padding: 20px 0 8px; font-size: 13px; font-weight: 600; }
.tag-form .fs-lab:first-child { padding-top: 4px; }
.tag-form .err { margin-top: 8px; }
/* 종류 2단 목록: 왼쪽 104(옅은 면, 줄 48, 고른 분류는 흰 면 + 600), 오른쪽 줄 48(아래 선, 고른 것 600 + ✓) */
.kind-pick { display: grid; grid-template-columns: 104px minmax(0, 1fr); margin: 0 calc(-1 * var(--gutter)); box-shadow: inset 0 1px 0 var(--line); }
.kp-cats { display: flex; flex-direction: column; background: var(--soft); }
.kp-cat { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px; border: 0; background: none; font-size: 15px; color: var(--text-2); text-align: left; }
.kp-cat.on { background: #fff; color: var(--text); font-weight: 600; }
.kp-cat i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text); }
.kp-kinds { display: flex; flex-direction: column; padding: 0 var(--gutter); }
.kp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; border: 0; background: none; padding: 0;
  box-shadow: inset 0 -1px 0 var(--line); font-size: 15px; color: var(--text); text-align: left; }
.kp-row.on { font-weight: 600; }
/* 제품 태그 창: 종류 목록이 창 바닥까지 (스크롤은 창 하나만) */
.tag-sheet > .sh-body { padding-bottom: 0; }
.tag-sheet .tag-form { display: flex; flex-direction: column; min-height: 100%; }
.tag-sheet .kind-pick { flex: 1; }
.tag-sheet .kp-kinds { padding-bottom: calc(var(--safe-b) + 16px); }
.tag-del { flex: none; margin: 0 calc(-1 * var(--gutter)); padding: 16px var(--gutter) calc(var(--safe-b) + 16px); border: 0; background: #fff; box-shadow: inset 0 1px 0 var(--line);
  font-size: 13px; color: var(--alert); text-align: left; }
/* '내 옷장에서 고르기': 높이 44, 옷장 사진 24×32 + 이름 13, 간격 8. 고른 옷은 검정 테두리 */
.closet-picks { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
.closet-picks::-webkit-scrollbar { display: none; }
.closet-pick { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; max-width: 200px; padding: 0 12px 0 6px;
  border: 0; border-radius: var(--r); background: var(--soft); font-size: 13px; color: var(--text); }
.closet-pick > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closet-pick.on { box-shadow: inset 0 0 0 1.5px var(--text); font-weight: 600; }
.cp-none { display: flex; align-items: center; height: 44px; font-size: 12px; color: var(--text-2); }

/* ---------- 옷 사진 칸 (3:4, 이것만 자른다): 줄 48×64 · 태그 줄 36×48 · 옷장 112×150 · 조합 80×107 · 시트 머리 60×80.
   옷장 사진이 없는 옷은 옅은 칸 가운데 색 점 16 ---------- */
.cthumb { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background-color: var(--soft); background-repeat: no-repeat; }
.cthumb.icon { display: flex; align-items: center; justify-content: center; }
.cthumb.icon .sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.cthumb.row { flex: none; width: 48px; }
.cthumb.tag { flex: none; width: 36px; }
.cthumb.big { flex: none; width: 60px; }
.cthumb.pick { flex: none; width: 24px; }

/* ---------- 게시물 한 벌 (홈 한 장씩 · 코디 상세): 머리 56 → 사진 → 좋아요 줄 48 → 설명 15 → 해시태그 15/500 → 날짜 12 ---------- */
.post { padding-bottom: 28px; }
.post-head { display: flex; align-items: center; height: 56px; padding: 0 8px 0 var(--gutter); }
.post-head .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.post-head .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.post-head .txt b { font-size: 15px; font-weight: 600; }
.post-head .txt span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-head .txt em { font-style: normal; font-weight: 600; color: var(--text); }
/* 상세: 뒤로 가기 줄을 따로 두지 않고 작성자 줄에 합쳐 위에 붙인다 (스크롤해도 ‹ 와 ⋯ 가 보인다).
   게시물 틀을 풀어 두어(display: contents) 아래 '다른 날'까지 내려가도 붙어 있다 */
.post.is-detail { display: contents; }
.post.is-detail .post-head { position: sticky; top: 0; z-index: 10; padding-left: 6px; background: var(--bar);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.post-back.icon-btn { width: 36px; margin-right: 4px; }
.detail-photo { position: relative; overflow: hidden; background: var(--fill); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.detail-photo img { width: 100%; object-fit: cover; } /* 비율은 사진마다 인라인으로 (잘리지 않게) */
.detail-photo.has-tags { cursor: pointer; }
/* 좋아요 줄 48: 왼쪽 ♡ 26 + 수, 오른쪽 북마크 26 + 수. 숫자는 늘 아이콘 오른쪽 6, 15/600 */
.post-acts { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 10px; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; border: 0; background: none; padding: 0 6px; color: var(--text); font-size: 15px; font-weight: 600; }
.act-btn.pop .ico { animation: pop .12s ease-out; }
@keyframes pop { 50% { transform: scale(1.15); } }
.post-text { display: flex; flex-direction: column; padding: 0 var(--gutter); }
.post-note { margin: 0; font-size: 15px; line-height: 1.5; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0 8px; }
.post-note + .post-tags { margin-top: 4px; }
.tag { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text); cursor: pointer; }
.post-date { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 2px; align-self: flex-start; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.post-text > * + .post-date { margin-top: 8px; }
.folder-slot { display: contents; }
.folder-link { border: 0; background: none; padding: 0 0 0 3px; font: inherit; color: var(--text-2); }
.folder-link b { font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
/* 두 번 톡톡 = 좋아요. 가운데 흰 하트가 커졌다 사라진다 */
.heart-burst { position: absolute; left: 50%; top: 50%; z-index: 3; color: #fff; pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25)); animation: burst .8s ease-out forwards; }
@keyframes burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  30% { transform: translate(-50%, -50%) scale(.95); }
  45% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- 사진 위 이름표 (상세 · 올리기 공통 부품): 점 8 흰색 + 이름표(5/8, 12/600 흰색, 한 줄).
   자리는 layoutTags 가 정한다: 기본은 점 오른쪽 4, 넘치면 점 왼쪽, 가장자리에서 12 안쪽, 겹치면 아래로 ---------- */
.ptags { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
.detail-photo.show-tags .ptags { opacity: 1; }
.ptag { position: absolute; inset: 0; border: 0; padding: 0; background: none; pointer-events: none; }
.detail-photo.show-tags .ptag > *, .up-tags .ptag > * { pointer-events: auto; }
.pdot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(18, 20, 23, .25); transform: translate(-50%, -50%); }
.plab {
  position: absolute; display: block; padding: 5px 8px; border-radius: var(--r); background: var(--label);
  color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(-50%);
}
/* 이름표가 꺼졌을 때: 사진 왼쪽 아래 12, 높이 26 배지에 태그 아이콘 12 + 숫자 12/600 */
.tag-hint { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px;
  border-radius: var(--r); background: var(--label); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; transition: opacity .15s; }
.detail-photo.show-tags .tag-hint { opacity: 0; }

/* ---------- 코디 상세 아래: '내 옷으로 따라 입기' 카드 → 'OO님의 다른 날' (3열 3:4, 날짜는 사진 아래) ---------- */
.follow-card { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gutter)); margin: 28px var(--gutter) 0; padding: 14px 12px 14px 16px;
  border: 0; border-radius: var(--r); background: var(--soft); color: var(--text); text-align: left; }
.follow-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.follow-card .txt b { font-size: 15px; font-weight: 600; }
.follow-card .txt span { font-size: 12px; color: var(--text-2); }
.follow-card .go { display: flex; color: var(--text-3); }
.more-from { padding-top: 36px; }
.more-from .head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter) 12px; }
.more-from h2 { font-size: 17px; font-weight: 600; }
.more-from .all { border: 0; background: none; padding: 0; font-size: 13px; color: var(--text-2); }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.more-grid a { display: block; }
.more-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--fill); }
.more-grid span { display: block; padding: 6px 0 0 8px; font-size: 12px; color: var(--text-2); }

/* ---------- 사진이 있는 목록 줄 (따라 입기 창): 패딩 10/16, 아래 선. 내 옷 사진 48×64 · 이름 15/600 · 아래 3에 12 · 오른쪽 12 · › ---------- */
.follow-sheet .sh-body > .ai-why:first-child { margin: 0 0 6px; }
.follow-sheet .ai-busy { padding: 16px 0; }
.row-list { margin: 0 calc(-1 * var(--gutter)); }
.thumb-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px var(--gutter); border: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--line); color: var(--text); text-align: left; }
.thumb-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.thumb-row .txt b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-row .txt span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-row .meta { flex: none; font-size: 12px; color: var(--text-2); }
.thumb-row .go { flex: none; display: flex; color: var(--text-3); }
.thumb-row.none .txt b { font-weight: 400; color: var(--text-2); }
.follow-sheet .thumb-row .meta { font-size: 13px; }

/* ---------- 달력(나만 봄): 머리 60(October 34 + 연도 13 | ‹ › 24) → [기록][분석] 44 → 상황 칩 → 요일 11 → 7열 3:4.4 칸 ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 8px 0 var(--gutter); }
.cal-head h2 { display: flex; align-items: baseline; gap: 8px; font-weight: 400; line-height: 1; }
.cal-head .month { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 34px; letter-spacing: -.8px; }
.cal-head .year { font-size: 13px; color: var(--text-2); }
.cal-head .nav { display: flex; }
.cal-head .icon-btn { width: 36px; }
.cal-tabs { display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 -1px 0 var(--line); }
.cal-tabs .tab { height: 44px; }
.cal-chips { padding: 12px var(--gutter) 0; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 0 var(--gutter); }
.cal-week { padding-top: 16px; padding-bottom: 6px; }
.cal-week span { text-align: center; font-size: 11px; color: var(--text-2); }
.cal-week span:first-child { color: var(--alert); }
/* 기록한 날 = 그날 전신 사진(50% 40%) + 흰 날짜 11/600, 오늘 = 안쪽 1.5 테두리 + 가운데 +, 지난 빈 날 = 옅은 면, 미래 = 날짜만 흐리게 */
.cal-cell { position: relative; aspect-ratio: 3 / 4.4; background: none; overflow: hidden; border: 0; padding: 0; text-align: left; }
div.cal-cell { cursor: default; }
.cal-cell.has { background: var(--fill); }
.cal-cell.past { background: var(--soft); }
.cal-cell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cal-cell .d { position: absolute; top: 3px; left: 4px; font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--text-2); }
.cal-cell.future .d { color: var(--off); }
.cal-cell.has .d { font-weight: 600; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .7); }
.cal-cell.today::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px var(--text); pointer-events: none; }
.cal-cell.today .d { font-weight: 600; color: var(--text); }
.cal-cell.today.has .d { color: #fff; }
.cal-cell > .ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--text); }
.cal-cell.dim { opacity: .28; }
.cal-cell .multi { position: absolute; bottom: 3px; right: 3px; padding: 0 4px; border-radius: var(--r); background: var(--label); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; }
/* 달력 아래 12: '이번 달 19번 기록 · 3일 연속' 13 (숫자만 600 글자색), 왼쪽 정렬 */
.cal-sum { margin: 0; padding: 12px var(--gutter) 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cal-sum b { font-weight: 600; color: var(--text); }
/* 카드: '한 달 전 오늘'(기록 탭) · '오늘은 이 코디 어때요?'(분석 탭). 옅은 면, 사진 54×72, 15/600 + 12 두 줄 */
.pick, .memory { display: flex; align-items: center; gap: 12px; margin: 24px var(--gutter) 0; padding: 12px; border-radius: var(--r); background: var(--soft); color: var(--text); }
.pick { margin-top: 16px; }
.pick img, .memory img { flex: none; width: 54px; height: 72px; object-fit: cover; background: var(--fill); }
.pick > a { flex: none; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pick-title { font-size: 15px; font-weight: 600; }
.pick-text > span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.pick-text .items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-next { flex: none; display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--text-2); }
.memory .go { flex: none; display: flex; color: var(--text-3); }
.stat .v { font-size: 22px; font-weight: 600; line-height: 1; }
/* 분석 탭 묶음: 제목 17/600(위 36, 아래 12) + 설명 12 */
.sec-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.sec-head h2 { font-size: 17px; font-weight: 600; }
.sec-head span { font-size: 12px; color: var(--text-2); }
/* 나의 컬러: 막대 10(조각 간격 2, 조각마다 옅은 안쪽 선) + 범례 4칸 격자(점 8 + '그레이 19%' 12) */
.palette { padding: 36px var(--gutter) 0; }
.palette-bar { display: flex; gap: 2px; height: 10px; }
.palette-bar span { min-width: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.palette-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; padding-top: 12px; font-size: 12px; color: var(--text-2); }
.palette-legend span { display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.palette-legend i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
/* 새롭게 시도해 볼 컬러: 높이 40 옅은 면(모서리 4), 점 16 + 15/500 → 아래 이유 한 줄 */
.try-colors { padding: 36px var(--gutter) 0; }
.try-row { display: flex; flex-wrap: wrap; gap: 6px; }
.try-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r);
  background: var(--soft); font-size: 13px; font-weight: 500; color: var(--text); }
.try-chip .sw { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
/* 요즘 안 입은 컬러: 줄 64 (점 28 · 이름 15/600 + 대표 옷 12 · 오른쪽 '23일 전' 13/600 + '마지막' 11 · ›) */
.forgot { padding: 36px var(--gutter) 0; }
.forgot-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; border: 0; background: none; padding: 0;
  box-shadow: inset 0 -1px 0 var(--line); color: var(--text); text-align: left; }
.forgot-row .sw { flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.forgot-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.forgot-row .txt b { font-size: 15px; font-weight: 600; }
.forgot-row .txt span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forgot-row .when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1.2; }
.forgot-row .when b { font-size: 13px; font-weight: 600; }
.forgot-row .when span { font-size: 11px; color: var(--text-2); }
.forgot-row .go { flex: none; display: flex; color: var(--text-3); }

/* ---------- 옷 창들 ---------- */
/* 그 색 내 옷 창: 줄 64 (옷 사진 48×64 · 이름 15 · 12) */
.closet-list { margin-bottom: 8px; }
.closet-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--line); }
.closet-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.closet-row .txt b { font-size: 15px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closet-row .txt span { font-size: 12px; color: var(--text-2); }
/* 옷 하나 창: 옷 사진 60×80 · 이름 17/600 · 정보 12 · '수정' → 숫자 셋 → 조합 → 입은 날 → 아래 고정 버튼 */
.closet-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 0; }
.closet-head .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.closet-head .txt b { font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.closet-head .txt span { font-size: 12px; color: var(--text-2); }
.closet-head .btn.sm { flex: none; }
.closet-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding: 14px 0; border-radius: var(--r); background: var(--soft); }
.closet-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--text-2); }
.closet-stats b { font-size: 17px; font-weight: 600; color: var(--text); }
.closet-sub { margin: 28px 0 12px; font-size: 15px; font-weight: 600; }
.closet-sub span { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.closet-shots { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.closet-shots::-webkit-scrollbar { display: none; }
.closet-shots a { flex: none; width: 96px; }
.closet-shots img { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--fill); }
.closet-shots span { display: block; margin-top: 6px; font-size: 12px; color: var(--text-2); }
/* 이 옷이랑 뭐 입지?: 80×107 칸 간격 8, 이름 12 한 줄 → 아래 이유 한 줄 */
.combo { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.combo::-webkit-scrollbar { display: none; }
.combo-item { flex: none; width: 80px; border: 0; background: none; padding: 0; text-align: left; color: var(--text); }
.combo-item > span:last-child { display: block; margin-top: 6px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#combo-box > .ai-why:first-child, #combo-box > .ai-busy:first-child { margin-top: 0; }
#combo-box .ai-busy { margin-top: 10px; }
/* 옷 수정 창: 옷장 사진 고르기 — 입은 날 칸 44×59 → 원본 사진(폭 220) 위 네모 + 오른쪽 미리보기 */
.cover-dates { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; }
.cover-dates::-webkit-scrollbar { display: none; }
.cover-dates button { flex: none; width: 44px; border: 0; background: none; padding: 0; color: var(--text-2); }
.cover-dates img { display: block; width: 44px; height: 59px; object-fit: cover; background: var(--fill); }
.cover-dates button.on img { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--text); }
.cover-dates span { display: block; margin: 5px -6px 0; font-size: 11px; text-align: center; white-space: nowrap; }
.cover-dates button.on span { font-weight: 600; color: var(--text); }
.cover-edit { display: flex; align-items: flex-start; gap: 12px; }
.cover-photo { position: relative; flex: none; width: 220px; max-width: 62%; overflow: hidden; background: var(--fill); user-select: none; -webkit-user-select: none; }
.cover-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* 네모 밖은 어둡게, 네모는 안쪽 1.5 흰 선 + 네 귀퉁이 14px L자(3px 흰색). 귀퉁이를 끌면 크기 */
.cbox { position: absolute; box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 999px rgba(18, 20, 23, .5); cursor: move; touch-action: none; }
.cc { position: absolute; width: 28px; height: 28px; touch-action: none; }
.cc::before { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid #fff; }
.cc.tl { left: -8px; top: -8px; cursor: nwse-resize; }
.cc.tl::before { left: 6.5px; top: 6.5px; border-left-width: 3px; border-top-width: 3px; }
.cc.tr { right: -8px; top: -8px; cursor: nesw-resize; }
.cc.tr::before { right: 6.5px; top: 6.5px; border-right-width: 3px; border-top-width: 3px; }
.cc.bl { left: -8px; bottom: -8px; cursor: nesw-resize; }
.cc.bl::before { left: 6.5px; bottom: 6.5px; border-left-width: 3px; border-bottom-width: 3px; }
.cc.br { right: -8px; bottom: -8px; cursor: nwse-resize; }
.cc.br::before { right: 6.5px; bottom: 6.5px; border-right-width: 3px; border-bottom-width: 3px; }
.cover-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
/* '분류 · 색' 접힌 줄 52 (위아래 1px 선, 오른쪽 값 13 + ⌄) */
.more-toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 52px; margin-top: 20px; padding: 0; border: 0; background: none;
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); font-size: 15px; font-weight: 400; color: var(--text); text-align: left; }
.more-toggle span { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-toggle .ico { color: var(--text-3); }
/* 같은 옷 정리 창: 쌍마다 옷장 사진 2열(남길 쪽은 사진 위 검정 테두리) + 라디오 · 이름 · 입은 횟수, 아래 버튼 2열 40 */
.tidy-sheet .sh-body > .ai-why:first-child { margin: 0; }
.tidy-group { padding: 20px 0 24px; box-shadow: inset 0 -1px 0 var(--line); }
.tidy-group:last-child { box-shadow: none; }
.tidy-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
.tidy-item { display: flex; flex-direction: column; min-width: 0; border: 0; background: none; padding: 0; text-align: left; color: var(--text); }
.tidy-item.on .cthumb::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--text); }
.tidy-pick { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.radio { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tidy-item.on .radio { background: var(--text); box-shadow: none; }
.tidy-item.on .radio::after { content: ''; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.tidy-pick .txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.tidy-pick .txt b { font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tidy-item.on .tidy-pick .txt b { font-weight: 600; }
.tidy-pick .txt span { font-size: 12px; color: var(--text-2); }
.tidy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tidy-actions .btn { height: 36px; font-size: 13px; }
.tidy-pick .txt > span + span { margin-top: 2px; }

/* ---------- MY 내 옷장: 분류 칩 → (같은 옷 정리 알림 줄) → 분류 줄(제목 17/600 + 개수, 옷 112×150 가로로) ---------- */
.closet-cats { padding: 12px var(--gutter) 0; }
.tidy-alert { display: flex; align-items: center; gap: 6px; width: calc(100% - 2 * var(--gutter)); height: 44px; margin: 12px var(--gutter) 0; padding: 0 12px;
  border: 0; border-radius: var(--r); background: var(--soft); font-size: 13px; color: var(--text); text-align: left; }
.tidy-alert > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tidy-alert > span b { font-weight: 600; }
.tidy-alert .go { flex: none; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.closet-page { padding: 0 var(--gutter); }
.shelf-sec { margin-top: 28px; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.shelf-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.shelf-head h3 span { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.shelf-tools { display: flex; align-items: center; gap: 12px; }
.shelf-tools .sort-btn { margin: 0; padding: 0; }
.shelf-head .all { border: 0; background: none; padding: 0; font-size: 13px; color: var(--text-2); }
.shelf { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.shelf::-webkit-scrollbar { display: none; }
.ccard { flex: none; width: 112px; border: 0; background: none; padding: 0; text-align: left; color: var(--text); }
.ccard b { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard > span:last-child { font-size: 12px; color: var(--text-2); }
.closet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.closet-grid .ccard { width: auto; min-width: 0; }
/* 빈 옷장: 제목 15/600 · 설명 13 · 검정 버튼 */
.closet-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.closet-empty b { font-size: 15px; font-weight: 600; color: var(--text); }
.closet-empty .btn { margin-top: 10px; }

/* ---------- 프로필 한 벌 (MY · 다른 사람): 아바타 80 + 숫자 셋(17/600 + 12) → 메타 13 → 소개 15 · 해시태그 15/500 → 버튼 둘 36 ---------- */
.pf-top { display: flex; align-items: center; gap: 24px; padding: 8px var(--gutter) 0; }
/* 프로필 사진 (원 안을 꽉 채운다) · 프로필 수정의 사진 칸 */
.avatar, .tab-avatar { overflow: hidden; }
.avatar img, .tab-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pf-photo-btns { display: flex; gap: 8px; }
.pf-counts { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.pf-counts button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; color: var(--text); cursor: default; }
.pf-counts button[data-href], .pf-counts button[data-follow-list] { cursor: pointer; }
.pf-counts b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.pf-counts span { font-size: 12px; color: var(--text-2); }
.pf-counts b span { font-size: inherit; color: inherit; }
.pf-info { display: flex; flex-direction: column; gap: 6px; padding: 12px var(--gutter) 0; }
.pf-info .handle { font-size: 13px; color: var(--text-2); }
.pf-info .bio { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 15px; font-weight: 500; color: var(--text); }
.pf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px var(--gutter) 0; }
.pf-actions .btn { width: 100%; }
.pf-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; box-shadow: inset 0 -1px 0 var(--line); }
.pf-tabs .tab { height: 44px; }
.pf-empty { margin: 0; padding: 56px 32px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* 팔로워 · 팔로잉 목록 창 (길면 창 안에서 스크롤) */
.follow-list { max-height: 60vh; overflow-y: auto; }
/* 프로필 격자: 3열, 사진은 원래 비율 그대로 엇갈려 쌓는다. 나만 보기는 오른쪽 위 흰 자물쇠 */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 20px 0 0; align-items: start; overflow: hidden; }
.pf-tabs + .pgrid { margin-top: 0; }
.pgrid a { position: relative; display: block; background: var(--fill); }
.pgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgrid .lock { position: absolute; top: 7px; right: 7px; color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .4)); }
/* 저장한 코디: 2열 폴더(대표 사진 3:4 + 폴더명 13/600 + 개수 12) */
.folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; padding: 16px var(--gutter) 0; }
.folder-card { display: flex; flex-direction: column; gap: 8px; border: 0; background: none; padding: 0; text-align: left; color: var(--text); }
.folder-card .cover { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--fill); }
.folder-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.folder-card b { display: block; font-size: 13px; font-weight: 600; }
.folder-card span { font-size: 12px; color: var(--text-2); }

/* ---------- 설정: 그룹 라벨 · 줄 52 + 아래 선 · 맨 아래 버전 | 회원 탈퇴 ---------- */
.settings { padding: 8px var(--gutter) 0; }
.my-label { font-size: 12px; color: var(--text-2); padding: 24px 0 4px; }
.my-label:first-child { padding-top: 8px; }
.menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--line);
  font: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer;
}
.menu-row span:first-of-type { flex: 1; }
.menu-row small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
label.menu-row { padding: 14px 0; gap: 16px; }
.menu-row .go { display: flex; color: var(--text-3); }
.my-foot { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 32px; font-size: 12px; color: var(--text-2); }
.my-foot button { border: 0; background: none; padding: 6px 0; font: inherit; color: var(--text-2); }

/* ---------- 폼 (프로필 수정 · 시작 화면): 묶음 제목 17/600, 입력 라벨 13/600 아래 8, 입력 칸 사이 20 ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field > label, .field .lab { font-size: 13px; font-weight: 600; }
.field .lab { display: flex; align-items: center; gap: 4px; }
.field .lab span { font-weight: 400; color: var(--text-2); }
.ai-slot { margin-left: auto; }
.pf-section { display: flex; align-items: baseline; gap: 8px; margin: 36px 0 16px; font-size: 17px; font-weight: 600; }
.pf-section span { font-size: 12px; font-weight: 400; color: var(--text-2); }
.pf-form { margin-top: 4px; padding-bottom: 32px; }
.pf-form > .pf-section:first-child { margin-top: 8px; }
.bio-box { position: relative; }
.bio-box .input { padding-bottom: 26px; }
.bio-count { position: absolute; right: 14px; bottom: 8px; font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* 가입 직후: 체형을 묻는 이유 (옅은 면 카드) */
.pf-why { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 20px; padding: 14px; border-radius: var(--r); background: var(--soft); text-align: left; }
.pf-why b { font-size: 15px; font-weight: 600; }
.pf-why span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
/* 지역 · 허리: '이름 … 값 ›' 한 줄 52 (누르면 목록 창). 값을 안 골랐으면 흐리게 */
.pf-pick { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; margin-bottom: 8px; padding: 0; border: 0; background: none;
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); font-size: 13px; font-weight: 600; color: var(--text); text-align: left; }
.pf-pick span { flex: 1; }
.pf-pick b { font-size: 15px; font-weight: 400; }
.pf-pick b.none { color: var(--text-2); }
.pf-pick .ico { color: var(--text-3); }
.pf-pick-list { max-height: 60vh; overflow-y: auto; }
/* 키 · 몸무게를 한 줄에, 그 아래 몸무게 공개 스위치 */
.pf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-show-weight { margin: 0 0 20px; }

/* ---------- 코디 올리기(탭바 없음): 머리 48(× · 코디 올리기 · 저장) → 사진 칸 → 안내 12 → 목록 줄 ---------- */
.up { padding: 0 var(--gutter); }
.photo-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 252px; max-width: 100%; aspect-ratio: 3 / 5; margin: 8px auto 0; background: var(--fill); color: var(--text); cursor: pointer; overflow: hidden;
  text-align: center;
}
.shutter.big { width: 52px; height: 52px; }
.photo-pick > b { margin-top: 12px; font-size: 15px; font-weight: 600; }
.photo-pick > span:not(.shutter) { padding: 0 16px; font-size: 13px; color: var(--text-2); }
.photo-pick > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-pick.has-photo { cursor: crosshair; }
/* 사진 아래 안내 자리: 평소엔 안내 12 + '사진 바꾸기' 13/500 밑줄, AI 가 일하는 동안은 '일하는 중' */
.up-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; text-align: center; }
.up-hint > p { margin: 0; font-size: 12px; color: var(--text-2); }
.up-hint > .ai-busy { justify-content: center; font-size: 13px; }
.photo-change { font-size: 13px; font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.up-rows { padding-top: 20px; }
.up-rows > * { box-shadow: inset 0 -1px 0 var(--line); }
.note-line { display: flex; align-items: center; gap: 10px; height: 52px; }
.note-line input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0; font-size: 15px; color: var(--text); }
.note-line input::placeholder { color: var(--text-3); }
.note-line span { flex: none; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.date-row { display: flex; align-items: center; gap: 8px; height: 52px; font-size: 15px; }
.date-row > span { flex: 1; }
.date-change { border: 0; background: none; padding: 0; height: 36px; font-size: 13px; color: var(--text-2); }
.up-rows > #date:not([hidden]) { margin: 8px 0; }
/* 사진 찍은 날 안내: 날짜 줄 바로 아래 작은 글씨 (+ '그날로 바꾸기') */
.up-rows > .date-note { margin: 0; padding: 0 0 12px 26px; font-size: 13px; color: var(--text-2); }
.up-rows > .date-note .date-change { margin-left: 6px; padding: 0; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.up-rows > .date-row:has(+ #date[hidden] + .date-note:not([hidden])) { box-shadow: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; }
.switch-row[hidden] { display: none; }
.switch-row .desc { margin-top: 3px; font-size: 13px; color: var(--text-2); }
.ai-note { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.more summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 52px; font-size: 15px; cursor: pointer; }
.more summary::-webkit-details-marker { display: none; }
.more summary .desc { flex: 1; font-size: 13px; color: var(--text-2); }
.more summary .ico { color: var(--text-3); transition: transform .15s; }
.more[open] summary .ico { transform: rotate(90deg); }
.more-body { padding: 16px 0 8px; }
/* 제품 태그 줄 64: 옷 부분 사진 36×48 · 이름 15/600 · 'AI 추천 · 상의 · 니트' 12 · › 16 · × 20. 카드 없이 아래 선 */
#items { display: flex; flex-direction: column; }
#items:empty { display: none; }
.item-row { display: flex; align-items: center; min-height: 64px; box-shadow: inset 0 -1px 0 var(--line); }
.item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; color: var(--text); text-align: left; }
.item-main .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.item-main .txt b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-main .txt span { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.item-main .go { flex: none; display: flex; color: var(--text-3); }
.item-x { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; margin-right: -10px; border: 0; background: none; padding: 0; color: var(--text-3); }
.btn.add-item { width: 100%; height: 36px; margin-top: 12px; font-size: 13px; }
.tag-empty { margin: 0; padding: 14px 12px; border-radius: var(--r); background: var(--soft); font-size: 13px; color: var(--text-2); text-align: center; }
/* 사진 위 태그 (올리기): 옷을 톡 → 그 자리에 점 + 이름표. 끌어서 옮긴다 */
.up-tags { position: absolute; inset: 0; pointer-events: none; }
.up-tags .ptag > * { touch-action: none; cursor: grab; }
.up-tags .up-tag:active { opacity: 1; }
/* 사진 위치 맞추기: 3:4 틀(좌우 20). 틀 밖은 흐리게, 끄는 동안 3분할 안내선 */
.crop { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; align-items: center; }
.crop .topbar { width: 100%; max-width: 440px; padding-right: 10px; }
.crop-stage { position: relative; width: 100%; max-width: 440px; margin-top: 16px; overflow: hidden; touch-action: none; cursor: grab; }
.crop-stage.dragging { cursor: grabbing; }
.crop-stage img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.crop-frame { position: absolute; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 9999px rgba(255, 255, 255, .78); }
.crop-frame i { position: absolute; background: rgba(255, 255, 255, .5); opacity: 0; transition: opacity .15s; }
.crop-stage.dragging .crop-frame i { opacity: 1; }
.crop-frame i:nth-child(1) { top: 0; bottom: 0; left: 33.33%; width: 1px; }
.crop-frame i:nth-child(2) { top: 0; bottom: 0; left: 66.66%; width: 1px; }
.crop-frame i:nth-child(3) { left: 0; right: 0; top: 33.33%; height: 1px; }
.crop-frame i:nth-child(4) { left: 0; right: 0; top: 66.66%; height: 1px; }
.crop-hint { margin: 16px 0 0; padding: 0 var(--gutter); font-size: 13px; color: var(--text-2); text-align: center; }
.crop-arrows { margin-top: 12px; color: var(--text-3); }
.crop-arrows.v { transform: rotate(90deg); }
body.cropping { overflow: hidden; }

/* ---------- 지난 코디 올리기 (탭바 없음): 요약 줄 44 → 묶음(고를 날 → 올릴 코디 격자 → 날짜 모르는 사진 → 건너뛰는 날) → 옵션 → 아래 고정 검정 48 ---------- */
.imp { padding: 0 var(--gutter) calc(var(--safe-b) + 96px); }
/* 사진 고르기 전: 제목 · 설명은 머리(48)와 아래 버튼(48 + 16 + 안전 영역 + 16) 사이 가운데 */
.imp.empty { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - 48px); padding-bottom: calc(var(--safe-b) + 80px); }
.imp-intro { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.imp-intro b { font-size: 17px; font-weight: 600; }
.imp-intro p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.imp-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; font-size: 13px; color: var(--text-2); }
.imp-sum b { font-weight: 600; color: var(--text); }
.imp-more { flex: none; font-size: 13px; font-weight: 500; cursor: pointer; }
.imp-day { padding: 20px 0; box-shadow: inset 0 -1px 0 var(--line); }
.imp-head { display: flex; flex-direction: column; gap: 2px; }
.imp-head b { font-size: 15px; font-weight: 600; }
.imp-head span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.imp-head + * { margin-top: 12px; }
.imp-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); }
.imp-row::-webkit-scrollbar { display: none; }
.imp-shot { flex: none; display: block; width: 80px; border: 0; background: var(--fill); padding: 0; }
.imp-shot img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* 흐림은 '같은 날 안 고른 사진'에만 */
.imp-shot.off { opacity: .4; }
/* 사진 칸 + 오른쪽 위 × (이 사진 빼기) · '못 올림' 표시 */
.imp-cell { position: relative; flex: none; display: block; }
.imp-grid .imp-cell { width: 100%; }
.imp-rm { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; border-radius: 50%; padding: 0; background: var(--label); color: #fff; }
.imp-rm::before { content: ''; position: absolute; inset: -6px; } /* 누르는 칸 36 */
.imp-fail { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: var(--r); background: var(--alert); color: #fff; font-size: 11px; font-weight: 600; }
.imp-note { margin: 4px 0 8px; font-size: 13px; color: var(--alert); }
.imp-shot.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--text); }
/* 올릴 코디(한 장뿐인 날): 4열 격자, 칸 아래 6에 날짜 */
.imp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.imp-grid figure { margin: 0; min-width: 0; }
.imp-grid .imp-shot { width: 100%; }
.imp-grid figcaption { margin-top: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 날짜 모르는 사진: 사진 80×107 + 오른쪽 12에 날짜 줄 48 */
.imp-undated { display: flex; align-items: center; gap: 12px; }
.imp-undated + .imp-undated { margin-top: 12px; }
.imp-date { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0; border: 0; background: none;
  box-shadow: inset 0 -1px 0 var(--line); font-size: 15px; color: var(--text-2); text-align: left; }
.imp-date span { flex: 1; }
.imp-date .ico:last-child { color: var(--text-3); }
.imp-date.on { color: var(--text); }
.imp-opts { padding-top: 8px; }
.imp-opts > :last-child { box-shadow: none; }
.imp-busy { margin: 4px 0 8px; font-size: 13px; color: var(--text-2); }
.imp-intro .imp-busy { margin: 8px 0 0; }
.imp-foot { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px; z-index: 15;
  padding: 10px var(--gutter) calc(var(--safe-b) + 16px); background: #fff; box-shadow: inset 0 1px 0 var(--line); }
.imp.empty + .imp-foot { box-shadow: none; }
/* 날짜 고르기 창: 달 이동 줄 + 7칸 달력. 오늘 뒤 · 고를 수 없는 날은 흐리게 */
.dp-head { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.dp-head b { font-size: 15px; font-weight: 600; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-week { padding: 8px 0 4px; }
.dp-week span { text-align: center; font-size: 11px; color: var(--text-2); }
.dp-grid button { height: 40px; border: 0; border-radius: var(--r); background: none; padding: 0; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.dp-grid button.today { font-weight: 600; }
.dp-grid button.on { background: var(--text); color: #fff; font-weight: 600; }
.dp-grid button:disabled { color: var(--off); cursor: default; }
/* 이미 기록한 날: 숫자 아래 작은 점 */
.dp-grid button.mark { position: relative; }
.dp-grid button.mark::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .5; }
.dp-note { margin: 12px 0 0; font-size: 12px; color: var(--text-2); }
/* 달력 기록 탭 맨 아래 · 빈 달력의 들어가는 길 */
.import-link { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 2 * var(--gutter)); height: 52px; margin: 12px var(--gutter) 0;
  padding: 0; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--line); font-size: 15px; color: var(--text); text-align: left; }
.import-link .ico { color: var(--text-3); }
.empty-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.up-hint > button.photo-change { border: 0; background: none; padding: 0; }

/* ---------- 빈 화면, 시작 화면, 토스트 ---------- */
.empty { text-align: center; padding: 40px 24px; color: var(--text-2); }
.empty > i { font-size: 32px; color: var(--text-3); }
.empty h3 { color: var(--text); font-size: 15px; font-weight: 600; margin: 10px 0 4px; }
.empty p { margin: 0; }
.onboard { padding: 52px var(--gutter) 32px; }
.onboard .logo { font-size: 44px; letter-spacing: -1.1px; }
.onboard .tag { color: var(--text-2); margin: 10px 0 32px; font-size: 15px; font-weight: 400; cursor: default; }
/* 토스트: 높이 40, 모서리 4, 검정 면 + 흰 13 */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); transform: translate(-50%, 16px);
  display: flex; align-items: center; min-height: 40px;
  background: var(--text); color: #fff; padding: 9px 16px; border-radius: var(--r);
  font-size: 13px; line-height: 1.4; opacity: 0; pointer-events: none; transition: .25s; z-index: 70;
  max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 저장 폴더 */
.folder-list { display: flex; flex-direction: column; gap: 2px; }
.folder-row {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: var(--r);
  background: var(--soft); color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.folder-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-row i { font-size: 18px; color: var(--text-2); }
.folder-row .check { color: var(--text-3); }
.folder-row.on { box-shadow: inset 0 0 0 1.5px var(--text); background: #fff; }
.folder-row.on .check { color: var(--text); }
.folder-new { display: flex; gap: 8px; margin-top: 12px; }
.folder-new .input { flex: 1; }
.folder-new .btn { height: 48px; flex: none; }
.folder-tools { display: flex; gap: 6px; margin-top: 10px; }
.chip.outline { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

.check-row a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.notice { margin: 4px var(--gutter) 8px; padding: 10px 12px; border-radius: var(--r); background: var(--soft); color: var(--text-2); font-size: 13px; }
.section.notice { margin: 4px var(--gutter) 0; }
/* 추천 사용자 · 팔로워 목록 · 차단 목록: 줄 64 (아바타 40 · 이름 15/600 + 12 · 버튼) */
.suggest { margin: 0 var(--gutter); }
.suggest-row { display: flex; align-items: center; gap: 12px; min-height: 64px; cursor: pointer; }
.suggest-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.suggest-row .info b { font-size: 15px; font-weight: 600; }
.suggest-row .info span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 로그인 (탭바 없음): × 줄 48 → 남은 공간 가운데 로고 76 + 한 줄 → 소셜 버튼 48(간격 8) → 이메일 줄 → 약관 11 ---------- */
.auth-wrap { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--safe-b) + 16px); }
.auth-top { display: flex; align-items: center; height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 6px; }
.auth-brand { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter) 24px calc(var(--gutter) + 6px); }
.auth-logo { font-size: 76px; line-height: .9; letter-spacing: -2.2px; margin-left: -3px; }
.auth-brand .tag { margin: 16px 0 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-2); cursor: default; }
.auth-main { padding: 0 var(--gutter); }
.social-list { display: flex; flex-direction: column; gap: 8px; }
.social-btn {
  position: relative; display: flex; align-items: center; justify-content: center; height: 48px; border: 0; border-radius: var(--r);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.social-btn > svg { position: absolute; left: 17px; }
.social-btn.kakao { background: #fee500; color: rgba(0, 0, 0, .85); }
.social-btn.naver { background: #03c75a; color: #fff; }
.social-btn.google { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.social-btn.apple { background: #000; color: #fff; }
/* 이메일 줄: 가운데 '이메일로 로그인 | 이메일로 회원가입' 13 (사이 세로선 1×12), 누르는 칸 높이 44 */
/* 이메일 로그인 · 가입: 간편 로그인 아래 회색 버튼 두 개 (지금 바로 쓸 수 있는 길이라 잘 보이게) */
.auth-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.auth-links .btn.sub { height: 48px; font-size: 15px; font-weight: 500; }
.auth-legal { margin: 20px 0 0; font-size: 11px; line-height: 1.6; color: var(--text-2); }
.auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.find-link { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--text); }
.auth-title { font-size: 22px; font-weight: 600; margin-bottom: 24px; }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--text); flex: none; }
/* 가입 화면: 동의 줄과 가입하기 버튼 사이 (오류 줄이 비어 있어 숨겨질 때도 붙지 않게) */
.onboard .check-row { margin-bottom: 20px; }

/* 탈퇴, 약관 */
.leave-list { margin: 0 0 18px; padding-left: 18px; color: var(--text-2); font-size: 15px; line-height: 1.8; }
.doc h2 { font-size: 15px; font-weight: 600; margin: 32px 0 8px; }
.doc p, .doc ul { margin: 0; color: var(--text); font-size: 14px; line-height: 1.75; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 10px; }
.doc ul { list-style: none; padding: 0 0 0 12px; }
.doc li { position: relative; }
.doc li::before { content: '·'; position: absolute; left: -12px; }
.doc .notice { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.7; }

/* ---------- 확인 창: 다른 창 위에서 물을 때 가운데에 뜨는 작은 창 (제목 · 버튼 가운데) ---------- */
.confirm-back { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 0 24px;
  background: rgba(18, 20, 23, 0); transition: background .2s; }
.confirm-back.show { background: var(--scrim); }
.confirm { width: 100%; max-width: 320px; border-radius: var(--r); background: #fff; padding: 24px 16px 16px; text-align: center;
  transform: scale(.96); opacity: 0; transition: transform .2s, opacity .2s; }
.confirm-back.show .confirm { transform: none; opacity: 1; }
.confirm-title { margin: 0 0 20px; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--text); }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirm-btns .btn { height: 48px; font-size: 15px; }
.confirm-btns .btn.danger { background: var(--alert); color: #fff; }

/* ---------- 달력: 같은 날 코디가 여럿일 때 고르는 창 ---------- */
.day-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.day-pick a { min-width: 0; color: var(--text); text-decoration: none; }
.day-pick img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--fill); }
.day-pick span { display: block; margin-top: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }