/* ─── DESIGN TOKENS ───────────────────────────────── */
:root {
  --bg:     #f8f8f6;
  --bg2:    #ffffff;
  --s1:     #ffffff;
  --s2:     #f3f3f1;
  --s3:     #ebebea;
  --b1:     #e6e6e4;
  --b2:     #cfcfcd;
  --b3:     #b0b0ae;
  --t1:     #0e0e0d;
  --t2:     #3c3c3a;
  --t3:     #7a7a78;
  --t4:     #b0b0ae;
  --accent: #0e0e0d;
  --red:    #c93535;
  --green:  #2a7a50;
  --r:      10px;
  --r2:     6px;
  --r3:     4px;
  --sh:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh2:    0 4px 14px rgba(0,0,0,.09);
  --sh3:    0 12px 36px rgba(0,0,0,.13);
}
[data-theme="dark"] {
  --bg:     #0d0d0c;
  --bg2:    #161615;
  --s1:     #1c1c1b;
  --s2:     #232322;
  --s3:     #2b2b2a;
  --b1:     #2e2e2d;
  --b2:     #3d3d3c;
  --b3:     #565655;
  --t1:     #f0f0ee;
  --t2:     #c0c0be;
  --t3:     #888886;
  --t4:     #565655;
  --accent: #f0f0ee;
  --red:    #f05050;
  --green:  #4db87a;
  --sh:     0 1px 3px rgba(0,0,0,.28);
  --sh2:    0 4px 14px rgba(0,0,0,.42);
  --sh3:    0 12px 36px rgba(0,0,0,.58);
}

/* ─── RESET ───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; }
body {
  background:var(--bg); color:var(--t1);
  font-family:'Inter','Noto Sans KR',sans-serif;
  font-weight:400; min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .22s, color .22s;
  touch-action:pan-y;
  overflow-x:hidden;
}
button { cursor:pointer; font-family:inherit; touch-action:manipulation; }
input, select, textarea { font-family:inherit; font-size:.88rem; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:2px; }

/* ─── TYPOGRAPHY HELPERS ─────────────────────────── */
.label {
  font-size:.62rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3);
}
.caption { font-size:.72rem; color:var(--t3); }

/* ─── HEADER ─────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:200;
  height:52px;
  background:rgba(248,248,246,.88);
  backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--b1);
  display:flex; align-items:center; padding:0 24px; gap:10px;
}
[data-theme="dark"] .header {
  background:rgba(13,13,12,.88);
}
.logo {
  font-size:.7rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--t1);
}
.header-gap { flex:1; }
.hdr-btn {
  height:30px; padding:0 11px;
  border-radius:var(--r2);
  border:1px solid var(--b1);
  background:transparent;
  color:var(--t2); font-size:.7rem; font-weight:500;
  display:inline-flex; align-items:center; gap:5px;
  transition:all .15s; letter-spacing:.02em;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.hdr-btn:hover { border-color:var(--b2); color:var(--t1); background:var(--s2); }
.hdr-btn.on { background:var(--t1); color:var(--bg2); border-color:var(--t1); }
.hdr-btn.on:hover { opacity:.82; }
.hdr-btn.icon-only { width:30px; padding:0; justify-content:center; font-size:.8rem; }

/* ─── VIEWS ──────────────────────────────────────── */
.view { display:none; }
.view.active { display:block; animation:fadeUp .22s ease; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.page { max-width:1200px; margin:0 auto; padding:28px 24px; }
.page.narrow { max-width:520px; }
.page.wide { max-width:1440px; overflow-x:hidden; }

/* ─── HOME ───────────────────────────────────────── */
.home-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.user-list { display:flex; flex-direction:column; gap:7px; }
.user-card {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .12s;
  box-shadow:var(--sh);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.user-card:hover {
  border-color:var(--b2); box-shadow:var(--sh2);
  transform:translateY(-1px);
}
.user-card.selected { border-color:var(--t1); }
.ua {
  width:36px; height:36px; border-radius:50%;
  background:var(--s2); border:1px solid var(--b1);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:var(--t2);
  letter-spacing:.03em; flex-shrink:0;
}
.u-info { flex:1; min-width:0; }
.u-name { font-size:.88rem; font-weight:500; margin-bottom:1px; }
.u-meta { font-size:.7rem; color:var(--t3); }
.u-arr { font-size:.75rem; color:var(--t4); }

/* ─── CONTEXT BAR ────────────────────────────────── */
.ctx-bar {
  background:var(--bg2); border-bottom:1px solid var(--b1);
  padding:10px 24px;
  display:flex; align-items:center; gap:10px;
}
.ctx-av {
  width:28px; height:28px; border-radius:50%;
  background:var(--s2); border:1px solid var(--b1);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; color:var(--t2); flex-shrink:0;
}
.ctx-name { font-size:.82rem; font-weight:500; }
.ctx-back {
  margin-left:auto;
  background:none; border:none; color:var(--t3);
  font-size:.72rem; display:flex; align-items:center; gap:3px;
  transition:color .12s;
}
.ctx-back:hover { color:var(--t1); }

/* ─── TABS ───────────────────────────────────────── */
.tabs {
  background:var(--bg2); border-bottom:1px solid var(--b1);
  padding:0 24px; display:flex; gap:0;
  position:sticky; top:52px; z-index:100;
}
.tab {
  height:40px; padding:0 14px;
  background:none; border:none;
  border-bottom:2px solid transparent;
  color:var(--t3); font-size:.78rem; font-weight:500;
  transition:color .15s, border-color .15s;
  white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.tab:hover { color:var(--t2); }
.tab.on { color:var(--t1); border-bottom-color:var(--t1); }

/* ─── FILTER ROW ─────────────────────────────────── */
.filter-row {
  display:flex; gap:5px; flex-wrap:wrap; margin-bottom:18px;
  align-items:center;
}
.chip {
  height:28px; padding:0 11px;
  border:1px solid var(--b1); background:var(--s1);
  color:var(--t2); border-radius:30px;
  font-size:.72rem; font-weight:500;
  transition:all .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.chip:hover { border-color:var(--b2); color:var(--t1); }
.chip.on { background:var(--t1); color:var(--bg2); border-color:var(--t1); }

/* sort */
.sort-wrap { position:relative; flex-shrink:0; }
.sort-btn {
  height:36px; padding:0 12px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); color:var(--t2);
  font-size:.75rem; font-weight:500; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.sort-btn:hover { border-color:var(--b2); color:var(--t1); }
.sort-btn.on { border-color:var(--t1); color:var(--t1); background:var(--s2); }
.sort-drop {
  position:absolute; top:calc(100% + 4px); right:0;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); box-shadow:var(--sh3);
  z-index:300; min-width:210px; overflow:hidden;
  display:none;
}
.sort-drop.open { display:block; }
.sort-section-label {
  font-size:.56rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t4);
  padding:8px 12px 4px;
}
.sort-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; font-size:.78rem; color:var(--t2);
  cursor:pointer; transition:background .1s; gap:8px;
}
.sort-item:hover { background:var(--s2); color:var(--t1); }
.sort-item.on { color:var(--t1); font-weight:500; }
.sort-item .sort-check { font-size:.65rem; color:var(--t1); opacity:0; flex-shrink:0; }
.sort-item.on .sort-check { opacity:1; }
.sort-divider { height:1px; background:var(--b1); margin:3px 0; }
.group-header {
  grid-column:1/-1; padding:10px 2px 4px;
  font-size:.62rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3);
  border-bottom:1px solid var(--b1); margin-bottom:2px;
}

/* search */
.search-row { position:relative; margin-bottom:18px; }
.search-row input {
  width:100%; height:36px;
  padding:0 12px 0 34px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); color:var(--t1); outline:none;
  font-size:.82rem; transition:border-color .15s;
}
.search-row input:focus { border-color:var(--b2); }
.search-row input::placeholder { color:var(--t4); }
.search-ico {
  position:absolute; left:11px; top:50%;
  transform:translateY(-50%); color:var(--t4);
  font-size:.75rem; pointer-events:none;
  font-style:normal;
}

/* ─── CLOTH GRID ─────────────────────────────────── */
.cloth-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(176px,1fr));
  gap:12px;
}
.cloth-card {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .12s;
  box-shadow:var(--sh);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.cloth-card:hover {
  border-color:var(--b2); box-shadow:var(--sh2);
  transform:translateY(-2px);
}
.cloth-img {
  aspect-ratio:3/4; background:var(--s2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.cloth-img img { width:100%; height:100%; object-fit:cover; }
.cloth-img-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--t4);
}
.cloth-img-placeholder .pi-cat {
  font-size:.6rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase;
}
.cloth-img-placeholder .pi-line {
  width:28px; height:1px; background:var(--b2);
}
.wear-pill {
  position:absolute; bottom:7px; right:7px;
  background:rgba(0,0,0,.48); color:#fff;
  font-size:.6rem; font-weight:500; letter-spacing:.05em;
  padding:2px 7px; border-radius:20px;
  backdrop-filter:blur(4px);
}
[data-theme="dark"] .wear-pill { background:rgba(255,255,255,.16); }
.card-brand-logo {
  position:absolute; top:6px; left:6px;
  display:flex; flex-direction:column; gap:3px;
  align-items:flex-start; pointer-events:none;
}
/* 로고 1개 */
.card-brand-logo img {
  width:26px; height:26px;
  object-fit:contain; border-radius:4px;
  background:rgba(255,255,255,0);
  /*box-shadow:0 1px 4px rgba(0,0,0,.12);*/
  display:block;
}
[data-theme="dark"] .card-brand-logo img {
  background:rgba(30,30,28,.72);
}
/* 로고 2개: 두 번째 로고를 살짝 겹쳐서 스택처럼 */
/*.card-brand-logo.dual img:first-child { z-index:2; position:relative; }
.card-brand-logo.dual img:last-child  { width:22px; height:22px; margin-top:-4px; margin-left:4px; opacity:.9; }
*/
.card-fav {
  position:absolute; top:6px; right:6px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.card-wish {
  position:absolute; bottom:7px; left:7px;
  background:rgba(135,195,240,.85);
  color:#fff;
  font-size:.52rem; font-weight:700; letter-spacing:.07em;
  padding:2px 6px; border-radius:20px;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
[data-theme="dark"] .card-wish { background:rgba(80,150,210,.75); }
.btn-icon-toggle {
  width:30px; height:30px; border-radius:var(--r2);
  background:none; border:1px solid var(--b1);
  color:var(--t3); font-size:.9rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn-icon-toggle:hover { border-color:var(--b2); background:var(--s2); }
.btn-icon-toggle.fav-on { border-color:rgba(210,50,50,.4); color:#e03030; background:rgba(210,50,50,.06); }
.btn-icon-toggle.wish-on { border-color:rgba(80,150,210,.5); color:#3a8fd4; background:rgba(80,150,210,.08); }
.cloth-body { padding:11px 12px 12px; display:flex; flex-direction:column; flex:1; }
.cloth-name {
  font-size:.82rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:6px;
}
.cloth-brand { font-size:.68rem; color:var(--t3); margin-bottom:3px; }
.brand-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:6px; }
.brand-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:20px;
  background:var(--s2); border:1px solid var(--b1);
  font-size:.72rem; font-weight:500; color:var(--t1);
}
.brand-tag-x {
  background:none; border:none; color:var(--t4);
  font-size:.65rem; cursor:pointer; padding:0; line-height:1;
  display:flex; align-items:center;
}
.brand-tag-x:hover { color:var(--red); }
.cloth-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:auto; }
.tag {
  font-size:.6rem; font-weight:500; letter-spacing:.03em;
  padding:2px 6px; border-radius:20px;
  background:var(--s2); color:var(--t2); border:1px solid var(--b1);
  display:inline-flex; align-items:center; line-height:1.4;
}
.tag.main { background:var(--s3); color:var(--t1); border-color:var(--b2); }

/* ─── FAB ─────────────────────────────────────────── */
.fab {
  position:fixed; bottom:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:var(--t1); color:var(--bg2);
  border:none; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:transform .12s, box-shadow .12s, opacity .15s;
  z-index:50;
}
.fab:hover { transform:scale(1.07); box-shadow:0 6px 22px rgba(0,0,0,.26); }
.fab.hidden { opacity:0; pointer-events:none; }

/* ─── TODAY / MANNEQUIN ───────────────────────────── */
.today-layout {
  display:flex; flex-direction:column; align-items:center;
  gap:0;
}
.mnq-slots-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:700px;
  width:100%;
  margin:16px auto 0;
  box-sizing:border-box;
}
.today-date-block { padding-top:4px; }
.mnq-3col {
  display:grid;
  grid-template-columns:180px 700px 180px;
  gap:0;
  align-items:start;
}
.mnq-side {
  display:flex; flex-direction:column; gap:6px;
  padding-top:8px;
}
.side-chip {
  display:flex; align-items:center; gap:6px;
  padding:6px 8px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); cursor:pointer;
  box-shadow:var(--sh);
  transition:border-color .12s;
  min-width:0;
}
.side-chip:hover { border-color:var(--b2); }
.side-chip.empty { border-style:dashed; opacity:.6; }
.side-chip.empty:hover { opacity:1; }
.side-chip-cat {
  font-size:.52rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--t3); flex-shrink:0;
}
.side-chip-name {
  font-size:.7rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.side-chip-x {
  width:14px; height:14px; flex-shrink:0;
  background:none; border:none; color:var(--t4);
  font-size:.55rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:color .1s, background .1s; padding:0; cursor:pointer;
}
.side-chip-x:hover { color:var(--red); background:rgba(201,53,53,.1); }
.today-dn {
  font-size:3rem; font-weight:300; line-height:1;
  letter-spacing:-.02em; color:var(--t1);
}
.today-dl {
  font-size:.65rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3);
  margin-top:5px;
}
.slot-group-label {
  font-size:.6rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t4);
  margin-bottom:8px;
}
.slot-stack { display:flex; flex-direction:column; gap:6px; }
.outfit-slot {
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; min-height:56px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); cursor:pointer;
  transition:border-color .15s, background .12s;
  position:relative;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.outfit-slot:hover { border-color:var(--b2); }
.outfit-slot.filled:hover { border-color:var(--t1); }
.slot-thumb {
  width:34px; height:44px; border-radius:var(--r3);
  background:var(--s2); border:1px solid var(--b1);
  flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.slot-thumb img { width:100%; height:100%; object-fit:cover; }
.slot-thumb-placeholder {
  font-size:.55rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t4);
  text-align:center; line-height:1.3;
}
.slot-info { flex:1; min-width:0; }
.slot-cat {
  font-size:.58rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--t3); margin-bottom:2px;
}
.slot-name { font-size:.78rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-empty { font-size:.75rem; color:var(--t4); }
.slot-arr { color:var(--t4); font-size:.72rem; flex-shrink:0; }
.slot-x {
  position:absolute; top:5px; right:5px;
  width:16px; height:16px; border-radius:50%;
  background:var(--s2); border:1px solid var(--b1);
  color:var(--t3); font-size:.55rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.outfit-slot:hover .slot-x { opacity:1; }
.slot-x:hover { background:var(--red); border-color:var(--red); color:#fff; }

/* mannequin scene */
.mannequin-scene {
  position:relative;
  width:100%;
  aspect-ratio:1100/680;
  max-height:680px;
}
#mnq-svg {
  position:absolute; inset:0;
  width:100%; height:100%; overflow:visible;
}
.hotspot {
  position:absolute; border-radius:50%;
  cursor:pointer; z-index:20;
  transition:background .12s, transform .1s;
}
.hotspot:hover { background:rgba(14,14,13,.05) !important; transform:scale(1.1); }
[data-theme="dark"] .hotspot:hover { background:rgba(240,240,238,.07) !important; }
.hotspot.empty::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px dashed var(--b2);
  animation:pring 2.5s ease-in-out infinite;
}
@keyframes pring { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.9;transform:scale(1.07)} }

/* label chips */
.lchip {
  position:absolute; z-index:30;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2);
  padding:4px 9px 4px 7px;
  display:flex; align-items:center; gap:5px;
  cursor:pointer; box-shadow:var(--sh);
  transition:border-color .12s, box-shadow .12s;
  max-width:176px;
}
.lchip:hover { border-color:var(--b2); box-shadow:var(--sh2); }
.lchip-cat {
  font-size:.52rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--t3); flex-shrink:0;
}
.lchip-name {
  font-size:.7rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.lchip-x {
  width:13px; height:13px; flex-shrink:0;
  background:none; border:none; color:var(--t4);
  font-size:.55rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:color .1s, background .1s; padding:0;
}
.lchip-x:hover { color:var(--red); background:rgba(201,53,53,.1); }
.lchip.empty {
  border-style:dashed; color:var(--t4); opacity:.65;
}
.lchip.empty:hover { opacity:1; border-color:var(--b2); }

/* 모바일 칩 리스트 */
.mobile-chip-row {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); cursor:pointer;
}
.mobile-chip-row.empty { border-style:dashed; opacity:.7; }
.mobile-chip-row .lchip-cat {
  font-size:.58rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--t3); flex-shrink:0; min-width:44px;
}
.mobile-chip-row .lchip-name {
  font-size:.78rem; font-weight:500; flex:1;
}
.mobile-chip-row .lchip-x {
  width:20px; height:20px; flex-shrink:0;
  background:none; border:none; color:var(--t4);
  font-size:.65rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.mobile-chip-row .lchip-x:hover { color:var(--red); background:rgba(201,53,53,.1); }

/* 크롭 자유모드 핸들 */
.crop-free-handle {
  position:absolute; width:12px; height:12px;
  background:#fff; border-radius:2px;
  border:1px solid rgba(0,0,0,.3);
  display:none;
}
.crop-free .crop-free-handle { display:block; }
#crop-box-move { display:none; }
.crop-free #crop-box-move { display:block; }
.conn { stroke:var(--b2); stroke-width:1; fill:none; opacity:.45; }

/* ─── CALENDAR ────────────────────────────────────── */
.cal-nav {
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.cal-nav-btn {
  width:30px; height:30px; border-radius:var(--r2);
  background:var(--s1); border:1px solid var(--b1);
  color:var(--t2); display:flex; align-items:center; justify-content:center;
  font-size:.82rem; transition:all .12s;
}
.cal-nav-btn:hover { background:var(--s2); }
.cal-month { font-size:.95rem; font-weight:500; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow {
  text-align:center; padding:5px 0 10px;
  font-size:.58rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--t4);
}
.cal-day {
  aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  border-radius:var(--r2); cursor:pointer;
  border:1px solid transparent; padding:1px;
  transition:all .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.cal-day:hover { background:var(--s2); }
.cal-day.today { background:var(--t1); }
.cal-day.today .cal-day-n { color:var(--bg2); }
.cal-day.has { background:var(--s1); border-color:var(--b1); }
.cal-day.has .cal-dots { display:flex; }
.cal-day-n { font-size:.72rem; line-height:1; margin-bottom:2px; font-weight:400; }
.cal-day.other .cal-day-n { color:var(--t4); opacity:.35; }
.cal-dots {
  display:none; gap:2px; flex-wrap:wrap; justify-content:center;
}
.cal-dot {
  width:3px; height:3px; border-radius:50%;
  background:var(--t2); opacity:.45;
}

/* ─── STATS ───────────────────────────────────────── */
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px; margin-bottom:28px;
}
.stat-card {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); padding:18px 16px; box-shadow:var(--sh);
}
.stat-n { font-size:2rem; font-weight:300; line-height:1; margin-bottom:3px; }
.stat-l {
  font-size:.6rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--t3);
}
.wear-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 13px; margin-bottom:7px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); box-shadow:var(--sh);
}
.wear-thumb {
  width:40px; height:52px; border-radius:var(--r3);
  background:var(--s2); flex-shrink:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.wear-thumb img { width:100%; height:100%; object-fit:cover; }
.wear-thumb-lbl {
  font-size:.55rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t4); text-align:center;
}
.wear-info { flex:1; min-width:0; }
.wear-name { font-size:.82rem; font-weight:500; margin-bottom:1px; }
.wear-meta { font-size:.68rem; color:var(--t3); margin-bottom:5px; }
.wear-bar { height:2px; background:var(--b1); border-radius:1px; overflow:hidden; }
.wear-fill { height:100%; background:var(--t1); border-radius:1px; transition:width .5s ease; }
.wear-cnt { font-size:1.2rem; font-weight:300; min-width:32px; text-align:right; }

/* ─── MODALS ──────────────────────────────────────── */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(5px);
  z-index:500;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .2s;
  overflow:hidden;
}
[data-theme="dark"] .overlay { background:rgba(0,0,0,.6); }
.overlay.open { opacity:1; visibility:visible; }
.modal {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r);
  width:560px; max-width:calc(100vw - 24px); max-height:90vh;
  overflow:hidden; display:flex; flex-direction:column;
  overflow-x:hidden;
  transform:translateY(10px); transition:transform .2s;
  box-shadow:var(--sh3);
}
.overlay.open .modal { transform:translateY(0); }
.modal.sm { width:380px; }
.modal.md { width:480px; }
.mhdr {
  padding:18px 22px 14px;
  border-bottom:1px solid var(--b1);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--s1); z-index:1;
  flex-shrink:0;
}
.mtitle { font-size:.92rem; font-weight:600; }
.mhdr-actions { display:flex; align-items:center; gap:7px; }
.mbody { padding:18px 22px; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; }
.mfooter {
  padding:11px 22px 18px;
  border-top:1px solid var(--b1);
  display:flex; gap:7px; align-items:center;
  flex-shrink:0;
}
.ml { margin-left:auto; }

/* buttons */
.btn {
  height:34px; padding:0 15px;
  border-radius:var(--r2); font-size:.75rem; font-weight:500;
  display:inline-flex; align-items:center; gap:5px;
  transition:all .15s; letter-spacing:.02em;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn-solid {
  background:var(--t1); color:var(--bg2); border:1px solid var(--t1);
}
.btn-solid:hover { opacity:.82; }
.btn-outline {
  background:transparent; color:var(--t2); border:1px solid var(--b1);
}
.btn-outline:hover { border-color:var(--b2); color:var(--t1); background:var(--s2); }
.btn-ghost {
  background:none; color:var(--t3); border:none; padding:0 8px;
}
.btn-ghost:hover { color:var(--t1); }
.btn-danger {
  background:none; color:var(--red); border:1px solid var(--red);
}
.btn-danger:hover { background:rgba(201,53,53,.07); }
.btn-draft {
  height:34px; padding:0 12px;
  border-radius:var(--r2); font-size:.72rem; font-weight:500;
  background:none; color:var(--t3); border:1px solid var(--b1);
  display:inline-flex; align-items:center; gap:5px;
  transition:all .15s;
}
.btn-draft:hover { border-color:var(--b2); color:var(--t1); }
.btn-draft.on {
  background:var(--s2); border-color:var(--t1); color:var(--t1);
}
.btn-draft.on::before {
  content:''; width:5px; height:5px;
  background:var(--t1); border-radius:50%;
}
.close-btn {
  width:30px; height:30px; border-radius:var(--r2);
  background:none; border:none; color:var(--t3);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; transition:all .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.close-btn:hover { background:var(--s2); color:var(--t1); }

/* form */
.field { margin-bottom:13px; }
.field:last-child { margin-bottom:0; }
.field > label {
  display:block; font-size:.6rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--t3); margin-bottom:5px;
}
.field input, .field select, .field textarea {
  width:100%; background:var(--bg);
  border:1px solid var(--b1); color:var(--t1);
  padding:0 11px; height:37px; border-radius:var(--r2);
  outline:none; transition:border-color .15s; font-size:.85rem;
  box-sizing:border-box;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--b2);
}
.field input::placeholder, .field textarea::placeholder { color:var(--t4); }
.field textarea { height:auto; padding:8px 11px; min-height:72px; resize:vertical; }
.row2 { display:flex; gap:10px; min-width:0; }
.row2 .field { flex:1; min-width:0; }
.price-date-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.price-date-row .price-cols { display:flex; gap:10px; flex:1; min-width:180px; }
.price-cols > div { flex:1; min-width:0; }
.date-field { flex:0 0 130px; min-width:120px; }

/* price wrap */
.field-label {
  display:block; font-size:.62rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--t3); margin-bottom:5px;
}
.price-row { display:flex; gap:4px; }
.price-row > input {
  flex:1; min-width:0;
  background:var(--bg); border:1px solid var(--b1); color:var(--t1);
  padding:0 11px; height:37px; border-radius:var(--r2);
  outline:none; font-size:.85rem; font-family:inherit;
  transition:border-color .15s; box-sizing:border-box;
}
.price-row > input:focus { border-color:var(--b2); }
.price-row > input::placeholder { color:var(--t4); }
.price-row > select {
  width:40px !important; flex-shrink:0; height:37px;
  background:var(--s2) !important; border:1px solid var(--b1); color:var(--t2);
  padding:0 2px !important; border-radius:var(--r2);
  outline:none; font-size:.72rem; font-family:inherit;
  cursor:pointer; text-align:center; box-sizing:border-box;
}

/* img upload */
.img-upload {
  border:2px dashed var(--b1); border-radius:var(--r);
  min-height:170px; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .15s, background .12s;
  position:relative; overflow:hidden; background:var(--bg);
}
.img-upload:hover { border-color:var(--b2); background:var(--s2); }
.img-upload.has { border-style:solid; }
.img-upload .hint {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--t4); pointer-events:none;
}
.img-upload .hint-icon {
  width:32px; height:32px; border-radius:50%;
  background:var(--s2); border:1px solid var(--b1);
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:.65rem; font-weight:600;
  letter-spacing:.04em; color:var(--t3); text-transform:uppercase;
}
.img-upload .hint-txt {
  font-size:.7rem; font-weight:500; letter-spacing:.04em;
}
.img-upload input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.img-upload.has input[type=file] { pointer-events:none; }
.img-upload img.preview {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px;
}
.img-edit-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:rgba(0,0,0,.38); opacity:0;
  transition:opacity .15s; pointer-events:none;
}
.img-upload.has:hover .img-edit-overlay,
.img-upload.has.touch-show .img-edit-overlay { opacity:1; pointer-events:all; }
.img-edit-btn {
  height:28px; padding:0 12px; border-radius:var(--r2);
  background:rgba(255,255,255,.92); color:#111;
  border:none; font-size:.7rem; font-weight:600;
  cursor:pointer; transition:background .1s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.img-edit-btn:hover { background:#fff; }
.img-edit-btn.danger { background:rgba(201,53,53,.85); color:#fff; }
.img-edit-btn.danger:hover { background:var(--red); }

/* ─── IMAGE EDITOR ───────────────────────────────── */
.img-editor-wrap {
  position:relative; overflow:hidden;
  background:#f0f0f0; border-radius:var(--r2);
  user-select:none; touch-action:none;
}
.img-editor-wrap img {
  position:absolute; transform-origin:0 0;
  pointer-events:all; max-width:none;
  cursor:grab;
}
.crop-box {
  position:absolute; border:2px solid #fff;
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  box-sizing:border-box; pointer-events:none;
}
.crop-box.crop-mode { pointer-events:all; cursor:move; }
.crop-handle {
  position:absolute; width:14px; height:14px;
  background:#fff; border-radius:3px;
  pointer-events:all; border:1px solid rgba(0,0,0,.2);
}
@media(hover:none){
  .img-upload.has .img-edit-overlay { opacity:1; pointer-events:all; }
  .img-edit-btn { height:44px; padding:0 20px; font-size:.82rem; min-width:60px; }
}
.bg-swatches { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.bg-swatch {
  width:22px; height:22px; border-radius:4px;
  cursor:pointer; border:2px solid transparent;
  transition:transform .1s;
}
.bg-swatch:hover { transform:scale(1.2); }
.bg-swatch.on { border-color:var(--t1); }
.palette-wrap { margin-bottom:13px; }
.palette-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; background:var(--bg); border:1px solid var(--b1);
  border-radius:var(--r2); cursor:pointer; user-select:none;
  transition:border-color .15s;
}
.palette-toggle:hover { border-color:var(--b2); }
.palette-chevron { font-size:.52rem; color:var(--t4); }
.swatches { display:none; flex-wrap:wrap; gap:6px; padding:9px 1px 3px; }
.swatches.open { display:flex; }
.swatch {
  width:20px; height:20px; border-radius:50%;
  cursor:pointer; border:2px solid transparent;
  flex-shrink:0; transition:transform .12s, border-color .1s;
  position:relative;
}
.swatch:hover { transform:scale(1.22); }
.swatch.selected {
  border-color:var(--t1);
  box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--t1);
}
.swatch.light { border-color:var(--b1); }
.swatch.light.selected { border-color:var(--t1); }
.swatch::after {
  content:attr(data-l); position:absolute;
  bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--s1); border:1px solid var(--b1);
  color:var(--t1); font-size:.58rem; padding:2px 7px; border-radius:3px;
  white-space:nowrap; pointer-events:none; opacity:0;
  transition:opacity .12s; z-index:400; box-shadow:var(--sh);
}
.swatch:hover::after { opacity:1; }

/* autocomplete */
.ac-wrap { position:relative; }
.ac-drop {
  position:absolute; top:calc(100% + 2px); left:0; right:0;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); z-index:600;
  max-height:190px; overflow-y:auto; display:none;
  box-shadow:var(--sh3);
}
.ac-drop.open { display:block; }
.ac-item {
  padding:8px 12px; font-size:.82rem; cursor:pointer;
  display:flex; align-items:center; gap:9px;
  transition:background .1s; border-bottom:1px solid var(--b1);
}
.ac-item:last-child { border-bottom:none; }
.ac-item:hover { background:var(--s2); }
.ac-brand { flex:1; font-weight:500; }
.ac-alias { font-size:.65rem; color:var(--t3); }
.ac-cnt { font-size:.62rem; color:var(--t4); }

/* picker grid */
.picker-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:7px; max-height:360px; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.pick-item {
  cursor:pointer; border:2px solid transparent;
  border-radius:var(--r2); overflow:hidden;
  background:var(--s2); transition:border-color .1s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.pick-item:hover { border-color:var(--b2); }
.pick-item.on { border-color:var(--t1); }
.pick-item:active { opacity:.82; transition:opacity .05s; }
.pick-img {
  aspect-ratio:3/4; background:var(--s2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  pointer-events:none;
}
.pick-img img { width:100%; height:100%; object-fit:contain; padding:4px; pointer-events:none; }
.pick-img-ph {
  font-size:.55rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t4); text-align:center;
  padding:4px; pointer-events:none;
}
.pick-name {
  font-size:.62rem; padding:5px 7px;
  background:var(--s1); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:var(--t2);
  pointer-events:none;
}

/* brand manager */
.brand-add-row {
  display:flex; gap:8px; align-items:flex-end;
  padding:12px; background:var(--s2);
  border-radius:var(--r2); border:1px solid var(--b1); margin-bottom:14px;
  flex-wrap:wrap;
}
.brand-add-row .field { margin:0; flex:1; min-width:100px; }
.brand-add-row .field > label { font-size:.58rem; }
.brand-add-row .field input {
  width:100%; background:var(--bg); border:1px solid var(--b1);
  color:var(--t1); padding:7px 10px; font-size:.82rem;
  border-radius:var(--r2); outline:none;
}
.brand-add-row .field input:focus { border-color:var(--b2); }
#btn-brand-add {
  height:33px; padding:0 13px;
  background:var(--t1); color:var(--bg2);
  border:none; border-radius:var(--r2);
  font-size:.72rem; font-weight:500; white-space:nowrap;
  flex-shrink:0; transition:opacity .15s;
}
#btn-brand-add:hover { opacity:.82; }
.brand-list { max-height:360px; overflow-y:auto; }
.sec-hdr2 {
  font-size:.58rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t4);
  margin-bottom:7px; display:flex; align-items:center; gap:7px;
}
.sec-hdr2 span { color:var(--t3); }
.brand-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r2); margin-bottom:5px; transition:border-color .12s;
}
.brand-row:hover { border-color:var(--b2); }
.brand-row.blt { opacity:.55; }
.brand-row-info { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.brand-nm { font-size:.82rem; font-weight:500; }
.brand-al {
  font-size:.65rem; color:var(--t2);
  background:var(--s2); border:1px solid var(--b1);
  padding:1px 6px; border-radius:20px;
}
.brand-none { font-size:.62rem; color:var(--t4); }
.brand-blt-tag {
  font-size:.55rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t4);
  background:var(--s2); border:1px solid var(--b1);
  padding:1px 5px; border-radius:20px;
}
.brand-logo-thumb {
  width:32px; height:32px; border-radius:var(--r3);
  background:var(--s2); border:1px solid var(--b1);
  flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.brand-logo-thumb img { width:100%; height:100%; object-fit:contain; padding:2px; }
.brand-logo-thumb-ph {
  font-size:.42rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--t4); text-align:center;
  line-height:1.2; padding:2px;
}
.brand-logo-upload {
  width:64px; height:64px; border-radius:var(--r2);
  background:var(--s2); border:1.5px dashed var(--b2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; overflow:hidden;
  position:relative; transition:border-color .15s;
}
.brand-logo-upload:hover { border-color:var(--b3); }
.brand-logo-upload.has { border-style:solid; border-color:var(--b1); }
.brand-logo-upload img { width:100%; height:100%; object-fit:contain; padding:4px; }
.brand-logo-upload input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.brand-logo-upload .brand-logo-ph { font-size:.52rem; color:var(--t4); font-weight:600; letter-spacing:.04em; }
.micro-btn {
  height:24px; padding:0 8px;
  background:none; border:1px solid var(--b1);
  color:var(--t3); border-radius:var(--r3);
  font-size:.6rem; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase; transition:all .1s;
}
.micro-btn:hover { border-color:var(--b2); color:var(--t1); }
.micro-btn.del:hover { border-color:var(--red); color:var(--red); }

/* settings */
.settings-section {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); padding:18px; margin-bottom:12px;
  box-shadow:var(--sh);
}
.settings-title {
  font-size:.6rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3); margin-bottom:14px;
}

/* user manager */
.emoji-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.em-opt {
  width:34px; height:34px; border-radius:50%;
  background:var(--s2); border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; transition:all .1s;
}
.em-opt:hover { background:var(--s3); }
.em-opt.on { border-color:var(--t1); background:var(--s3); }
.uav {
  width:36px; height:36px; border-radius:50%;
  background:var(--s2); border:1px solid var(--b1);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; color:var(--t2);
  letter-spacing:.03em; flex-shrink:0;
  text-transform:uppercase;
}

/* detail */
.detail-img-wrap {
  width:100%; margin-bottom:14px;
  background:var(--s2); border-radius:var(--r);
  overflow:hidden; position:relative;
  cursor:zoom-in; touch-action:none;
  height:280px;
}
.detail-img-wrap.zoomed { cursor:grab; }
.detail-img-wrap.zoomed.dragging { cursor:grabbing; }
.detail-img-wrap img {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  height:100%; width:auto;
  max-width:none;
  display:block;
  will-change:transform;
  pointer-events:none;
  user-select:none; -webkit-user-drag:none;
  transition:transform .2s ease;
}
.detail-img-wrap.zoomed img { transition:none; }
.img-viewer {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s;
  touch-action:none;
}
.img-viewer.open { opacity:1; visibility:visible; }
.img-viewer-inner {
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.img-viewer-img {
  position:absolute;
  transform-origin:0 0;
  will-change:transform;
  max-width:none; max-height:none;
  user-select:none; -webkit-user-drag:none;
}
.img-viewer-close {
  position:absolute; top:16px; right:16px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; color:#fff;
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.img-viewer-close:hover { background:rgba(255,255,255,.25); }
.detail-ph {
  width:100%; height:160px; background:var(--s2);
  border-radius:var(--r); margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
}
.detail-ph-inner {
  font-size:.65rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t4);
}
.drow {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--b1); font-size:.82rem;
}
.drow:last-child { border-bottom:none; }
.dk2 { color:var(--t3); font-size:.7rem; }
.dv2 { font-weight:500; }
.subcat-pill {
  display:inline-block; font-size:.58rem; font-weight:500;
  letter-spacing:.04em; padding:1px 5px; border-radius:20px;
  background:var(--s2); color:var(--t2); border:1px solid var(--b1);
  margin-left:3px; vertical-align:middle;
}
.size-detail-btn {
  height:26px; padding:0 8px;
  background:none; border:1px solid var(--b1);
  border-radius:var(--r3); color:var(--t3);
  font-size:.62rem; font-weight:500; cursor:pointer;
  white-space:nowrap; flex-shrink:0; transition:all .12s;
}
.size-detail-btn:hover { border-color:var(--b2); color:var(--t1); }
.size-detail-btn.on { background:var(--t1); color:var(--bg2); border-color:var(--t1); }
.size-unit-btn {
  height:24px; padding:0 7px;
  background:var(--s2); border:1px solid var(--b1);
  border-radius:var(--r3); color:var(--t3);
  font-size:.62rem; font-weight:600; cursor:pointer; transition:all .1s;
}
.size-unit-btn.on { background:var(--t1); color:var(--bg2); border-color:var(--t1); }
.size-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sd-field > label {
  display:block; font-size:.58rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:4px;
}
.sd-field .sd-row { display:flex; align-items:center; gap:5px; }
.sd-field input {
  flex:1; background:var(--bg); border:1px solid var(--b1); color:var(--t1);
  padding:7px 9px; border-radius:var(--r2); outline:none;
  font-size:.82rem; min-width:0; transition:border-color .15s;
}
.sd-field input:focus { border-color:var(--b2); }
.sd-unit { font-size:.68rem; color:var(--t3); flex-shrink:0; min-width:18px; }
.fit-row { display:flex; gap:5px; flex-wrap:wrap; }
.fit-chip {
  height:26px; padding:0 10px; border:1px solid var(--b1);
  background:var(--s1); color:var(--t2); border-radius:20px;
  font-size:.7rem; font-weight:500; cursor:pointer; transition:all .12s;
}
.fit-chip.on { background:var(--t1); color:var(--bg2); border-color:var(--t1); }
.drow-split {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--b1);
}
.drow-split .ds {
  padding:8px 10px 8px 0;
  display:flex; align-items:baseline;
  justify-content:space-between; gap:6px;
}
.drow-split .ds-right {
  padding-left:14px; padding-right:0;
  border-left:1px solid var(--b1);
}
.ds .dk2 { font-size:.68rem; color:var(--t3); white-space:nowrap; }
.ds .dv2 { font-size:.82rem; font-weight:500; margin-right:4px; }
.sd-inline-btn {
  font-size:.65rem; color:var(--t3); cursor:pointer;
  white-space:nowrap; transition:color .12px; user-select:none;
  display:inline-flex; align-items:center; gap:2px;
}
.sd-inline-btn:hover .sd-detail-tag { background:var(--t1); color:var(--bg2); border-color:var(--t1); }
.sd-inline-btn:hover { color:var(--t1); }
.sd-inline-btn.open .sd-detail-tag { background:var(--t1); color:var(--bg2); border-color:var(--t1); }
.sd-inline-btn.open { color:var(--t1); }
.sd-detail-tag {
  font-size:.5rem; font-weight:600; letter-spacing:.04em;
  padding:0px 4px; border-radius:20px;
  background:var(--s2); border:1px solid var(--b1);
  color:var(--t3); transition:all .12s;
  display:inline-flex; align-items:center;
  vertical-align:middle; line-height:1.6;
}
.drow:hover .sd-detail-tag,
.sd-detail-tag.open {
  background:var(--s3); color:var(--t2); border-color:var(--b2);
}
.sd-arr { display:inline-block; transition:transform .15s; font-size:.62rem; }
.sd-detail-body { display:none; }
.sd-detail-body.open { display:block; border-bottom:1px solid var(--b1); }
.sd-drow {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:4px 0 4px 16px;
  border-bottom:1px solid var(--b1);
  border-left:1px solid var(--b1);
  margin-left:8px;
}
.sd-drow:last-child { border-bottom:none; }
.sd-drow .dk2 { font-size:.68rem; color:var(--t3); }
.sd-drow .dv2 { font-size:.75rem; font-weight:500; text-align:right; display:flex; align-items:baseline; gap:3px; }
.sd-inch { color:var(--t4); font-size:.68rem; font-weight:400; }
.sd-fit-tag {
  display:inline-block; font-size:.65rem; font-weight:500;
  padding:1px 7px; border-radius:20px;
  background:var(--s2); border:1px solid var(--b1);
  color:var(--t2); margin-right:8px; vertical-align:middle;
}
.sd-hint { font-size:.62rem; color:var(--t4); margin-top:2px; min-height:14px; }
.pw-err { color:var(--red); font-size:.72rem; min-height:16px; margin-top:6px; }

/* toast */
.toast {
  position:fixed; bottom:70px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--t1); color:var(--bg2);
  padding:9px 18px; border-radius:30px;
  font-size:.75rem; font-weight:500; z-index:900;
  opacity:0; transition:all .22s; white-space:nowrap;
  box-shadow:var(--sh2);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* empty */
.empty-block {
  text-align:center; padding:52px 20px; color:var(--t4);
}
.empty-label {
  font-size:.6rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px;
}
.empty-sub { font-size:.78rem; }

/* admin add user button */
.btn-add-user {
  height:30px; padding:0 12px;
  background:var(--t1); color:var(--bg2);
  border:none; border-radius:var(--r2);
  font-size:.68rem; font-weight:500; letter-spacing:.03em;
  transition:opacity .15s;
}
.btn-add-user:hover { opacity:.82; }

/* ─── WARDROBE STICKY TOOLBAR ──────────────────────── */
.wardrobe-toolbar {
  position:sticky; top:92px; z-index:90;
  background:var(--bg);
  padding:0 0 10px;
  margin-bottom:4px;
}

/* ─── STATS CHARTS ─────────────────────────────────── */
.stats-charts-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; margin-bottom:20px;
}
.chart-card {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:var(--r); padding:16px; box-shadow:var(--sh);
}
.chart-title {
  font-size:.6rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--t3); margin-bottom:14px;
}
.pie-wrap { display:flex; align-items:center; gap:16px; }
.pie-svg { flex-shrink:0; }
.pie-legend { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.pie-legend-item {
  display:flex; align-items:center; gap:6px;
  font-size:.68rem; color:var(--t2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pie-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.heatmap-grid { display:flex; flex-direction:column; gap:3px; }
.heatmap-row { display:flex; gap:3px; align-items:center; }
.heatmap-label { font-size:.55rem; color:var(--t4); width:18px; text-align:right; flex-shrink:0; }
.heatmap-cell { width:11px; height:11px; border-radius:2px; background:var(--s3); flex-shrink:0; }
.heatmap-months { display:flex; gap:3px; margin-left:22px; margin-bottom:2px; }
.heatmap-month-lbl { font-size:.52rem; color:var(--t4); min-width:11px; text-align:center; }

/* ─── KEYBOARD FOCUS ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--t1);
  outline-offset: 2px;
  border-radius: var(--r3);
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media(max-width:900px){
  .today-layout{align-items:stretch;}
  .mannequin-scene{height:520px;}
}
@media(max-width:500px){
  .mannequin-scene{
    aspect-ratio:unset;
    height:calc(100vw * 1.1);
    max-height:none;
  }
  .mnq-slots-row{
    grid-template-columns:1fr;
    width:100%; gap:0;
    margin-top:24px;
  }
  .slot-group-label { margin-top:8px; }
  #label-chips { display:none !important; }
  #svg-lines { display:none !important; }
}
@media(max-width:640px){
  .page{padding:20px 16px;}
  .header{padding:0 16px;}
  .tabs{padding:0 16px;}
  .ctx-bar{padding:8px 16px;}
  .cloth-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px;}
  .today-dn{font-size:2.4rem;}
  .overlay{align-items:flex-end;}
  .modal{
    max-width:100vw !important;
    width:100vw !important;
    border-radius:var(--r) var(--r) 0 0;
    position:relative;
    overflow-x:hidden;
  }
  .modal .mbody{padding:14px 14px;}
  .modal .mhdr{padding:14px 14px 10px;}
  .modal .mfooter{padding:8px 14px 28px;}
  #modal-brush{align-items:stretch;}
  #modal-brush .modal{
    border-radius:0 !important;
    height:100dvh !important;
    max-height:100dvh !important;
  }
  #modal-brush .modal .mbody{padding:6px 12px 4px;}
  #modal-brush .modal .mfooter{padding:8px 12px 16px;}
  #modal-cloth .mbody > div:first-child{flex-direction:column;}
  #modal-cloth .mbody > div:first-child > div:first-child{flex:0 0 auto;width:100%;}
  #modal-cloth .mbody > div:first-child .img-upload{min-height:160px;aspect-ratio:unset;}
  .row2{flex-direction:column;gap:8px;}
  .row3{gap:6px;flex-wrap:wrap;}
  .row3 .field{min-width:calc(50% - 5px);}
  input, select, textarea { font-size:max(16px, 1em) !important; }
  .price-date-row { flex-direction:column; gap:8px; }
  .price-date-row .price-cols { flex:unset; width:100%; min-width:0; }
  .date-field { flex:0 0 auto; width:100%; min-width:0; }
  .size-detail-grid { grid-template-columns:1fr; gap:8px; }
  #modal-size-detail .modal { width:100vw !important; border-radius:var(--r) var(--r) 0 0; }
  #modal-size-detail .mbody { padding:14px 14px; }
  #modal-size-detail .sd-field input { height:44px; font-size:1rem !important; }
  .stats-charts-row { grid-template-columns:1fr; }
}
@media(max-width:360px){
  .size-detail-grid { grid-template-columns:1fr; }
}
@media (hover: none) {
  .hdr-btn:hover { border-color:var(--b1); color:var(--t2); background:transparent; }
  .hdr-btn.on:hover { opacity:1; }
  .tab:hover { color:var(--t3); }
  .chip:hover { border-color:var(--b1); color:var(--t2); }
  .sort-btn:hover { border-color:var(--b1); color:var(--t2); }
  .sort-item:hover { background:transparent; color:var(--t2); }
  .user-card:hover { transform:none; box-shadow:var(--sh); border-color:var(--b1); }
  .cloth-card:hover { transform:none; box-shadow:var(--sh); border-color:var(--b1); }
  .brand-tag-x:hover { color:var(--t3); }
  .brand-row:hover { border-color:var(--b1); }
  .outfit-slot:hover { border-color:var(--b1); }
  .outfit-slot.filled:hover { border-color:var(--b1); }
  .outfit-slot:hover .slot-x { opacity:0; }
  .outfit-slot .slot-x { opacity:1; width:26px; height:26px; font-size:.7rem; }
  .slot-x:hover { background:var(--s2); border-color:var(--b1); color:var(--t3); }
  .side-chip:hover { border-color:var(--b1); }
  .side-chip.empty:hover { opacity:.6; }
  .side-chip-x:hover { color:var(--t4); background:none; }
  .lchip:hover { border-color:var(--b1); box-shadow:var(--sh); }
  .lchip-x:hover { color:var(--t4); background:none; }
  .lchip.empty:hover { opacity:.65; border-color:var(--b1); }
  .mobile-chip-row .lchip-x:hover { color:var(--t4); background:none; }
  .pick-item:hover { border-color:transparent; }
  .pick-item:active { opacity:.75; }
  .pick-item.on { border-color:var(--t1); }
  .ac-item:hover { background:transparent; }
  .btn-solid:hover { opacity:1; }
  .btn-outline:hover { border-color:var(--b1); color:var(--t2); background:transparent; }
  .btn-ghost:hover { color:var(--t3); }
  .btn-danger:hover { background:none; }
  .btn-draft:hover { border-color:var(--b1); color:var(--t3); }
  .close-btn:hover { background:none; color:var(--t3); }
  .micro-btn:hover { border-color:var(--b1); color:var(--t3); }
  .micro-btn.del:hover { border-color:var(--b1); color:var(--t3); }
  .btn-add-user:hover { opacity:1; }
  #btn-brand-add:hover { opacity:1; }
  .em-opt:hover { background:var(--s2); }
  .ctx-back:hover { color:var(--t3); }
  .cal-nav-btn:hover { background:var(--s1); }
  .cal-day:hover { background:transparent; }
  .fab:hover { transform:none; box-shadow:0 4px 16px rgba(0,0,0,.2); }
  .hotspot:hover { background:none !important; transform:none; }
  .img-upload:hover { border-color:var(--b1); background:var(--bg); }
  .bg-swatch:hover { transform:none; }
  .swatch:hover { transform:none; }
  .swatch:hover::after { opacity:0; }
  .palette-toggle:hover { border-color:var(--b1); }
  .size-detail-btn:hover { border-color:var(--b1); color:var(--t3); }
  .sd-inline-btn:hover .sd-detail-tag { background:var(--s2); color:var(--t3); border-color:var(--b1); }
  .sd-inline-btn:hover { color:var(--t2); }
  .fit-chip:hover { background:var(--s1); color:var(--t2); border-color:var(--b1); }
  .img-viewer-close:hover { background:rgba(255,255,255,.15); }
  .img-edit-btn:hover { background:rgba(255,255,255,.85); }
  .img-edit-btn.danger:hover { background:rgba(201,53,53,.85); }
}

/* ─── VIRTUAL KEYBOARD ────────────────────────────── */
@media(max-width:640px){
  .modal { max-height: calc(100dvh - var(--kb-height, 0px)) !important; transition: max-height .2s ease; }
}
/* ═══════════════════════════════════════════════════════
   모바일 가상키보드 & UX 최적화 패치
   ═══════════════════════════════════════════════════════ */

/* ── 키보드 높이 변수 기본값 ─────────────────────────── */
:root {
  --kb-height: 0px;
  --vvp-height: 100dvh;
  --touch-min: 44px; /* 최소 터치 타겟 */
}

/* ── 키보드 열렸을 때 모달 위치 조정 ─────────────────── */
body.kb-open .overlay.open .modal {
  /* 모달을 키보드 위로 밀어올림 */
  max-height: calc(var(--vvp-height) - 16px);
  transition: max-height 0.22s ease;
}

/* ── 모달 내부 스크롤 보장 ───────────────────────────── */
.modal {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* iOS safe area — 키보드 열릴 때 kb-open 규칙이 override */
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

/* 키보드 열렸을 때:
   safe area는 키보드가 이미 흡수하므로 kb-height만 패딩으로 확보 */
body.kb-open .modal {
  padding-bottom: max(calc(var(--kb-height) - env(safe-area-inset-bottom, 0px) + 8px), 8px);
}

/* ── 오버레이 자체도 키보드 인식 ────────────────────── */
.overlay {
  /* dvh 사용으로 iOS 주소창 포함 실제 뷰포트 대응 */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 100%;
}

/* ── 터치 타겟 최소 크기 보장 ───────────────────────── */
.tab, .chip, .micro-btn, .sort-item {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip {
  min-height: 36px; /* chip은 조금 작아도 OK */
  padding: 6px 14px;
}

/* ── 탭 버튼 터치 타겟 ──────────────────────────────── */
.tab {
  padding: 10px 14px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

/* ── 카드 터치 피드백 ───────────────────────────────── */
.cloth-card {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cloth-card:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* 사용자 드래그 선택 방지 (카드, 버튼 등) */
.cloth-card, .user-card, .pick-item, .tab, .chip {
  -webkit-user-select: none;
  user-select: none;
}

/* ── 유저 카드 터치 피드백 ──────────────────────────── */
.user-card {
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s ease;
}
.user-card:active {
  background: var(--s2);
}

/* ── 피커 아이템 터치 피드백 ────────────────────────── */
.pick-item {
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.1s ease, transform 0.1s ease;
  cursor: pointer;
}
.pick-item:active {
  opacity: 0.75;
  transform: scale(0.96);
}

/* ── 색상 스와치 모바일 최소 크기 ───────────────────── */
@media (max-width: 480px) {
  .swatch {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
  }
  .palette-swatches.open {
    gap: 6px !important;
  }
}

/* ── 소트 드롭다운 모바일 전체너비 ─────────────────── */
@media (max-width: 480px) {
  .sort-drop {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
}

/* ── 검색 인풋 포커스 시 확대 방지 (iOS 16 미만 대응) ─ */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
  font-size: max(16px, 1em); /* iOS auto-zoom 방지 */
  -webkit-text-size-adjust: 100%;
}

/* ── 로그인 모달: 키보드 대응 ─────────────────────── */
#modal-login .modal {
  position: relative;
}

body.kb-open #modal-login .modal {
  margin-bottom: calc(var(--kb-height) + 8px);
}

/* ── 옷 추가 모달: 하단 액션 버튼 키보드 위로 고정 ─── */
#modal-cloth .modal-footer,
#modal-cloth .cloth-form-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg2);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--b1);
  z-index: 10;
  transition: transform 0.2s ease;
}

/* ── FAB 버튼: safe area 대응 + 키보드 transition ───── */
#fab {
  bottom: calc(80px + env(safe-area-inset-bottom));
  transition: bottom 0.22s ease, opacity 0.2s ease;
}
body.kb-open #fab {
  /* 키보드 열리면 워드로브 검색 중이므로 FAB 숨김 */
  opacity: 0;
  pointer-events: none;
}

/* ── 하단 탭바: safe area 대응 ──────────────────────── */
.tab-bar, .tabs {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── 헤더: safe area 대응 ───────────────────────────── */
.app-header, header {
  padding-top: env(safe-area-inset-top);
}

/* ── 피커 모달 스크롤 ────────────────────────────────  */
#modal-picker .modal {
  display: flex;
  flex-direction: column;
}
#picker-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 브랜드 리스트 모달 스크롤 ──────────────────────── */
#brand-manager-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: 60vh;
}

/* ── 토스트: 키보드 위로 올리기 (부드럽게) ──────────── */
#toast {
  bottom: calc(24px + env(safe-area-inset-bottom));
  transition: bottom 0.22s ease, opacity 0.3s ease, transform 0.3s ease;
}
body.kb-open #toast {
  bottom: calc(12px + var(--kb-height));
}

/* ── 캘린더 날짜 터치 타겟 ──────────────────────────── */
.cal-day {
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cal-day:active {
  background: var(--s2);
}

/* ── 마네킹 핫스팟 터치 타겟 ────────────────────────── */
.hotspot {
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* ── 스크롤 가능 영역 모멘텀 스크롤 ─────────────────── */
.modal-body, .modal-scroll,
#wardrobe-grid, #wear-list,
#picker-grid, #brand-manager-list {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── 입력 폼 간격 개선 (모바일) ─────────────────────── */
@media (max-width: 480px) {
  .form-row, .cloth-form-row {
    margin-bottom: 14px;
  }
  .form-row label, .cloth-form-row label {
    font-size: 0.72rem;
    margin-bottom: 4px;
    display: block;
  }
  .form-row input, .form-row select, .form-row textarea,
  .cloth-form-row input, .cloth-form-row select, .cloth-form-row textarea {
    height: 44px;
    border-radius: 8px;
    padding: 0 12px;
  }
  textarea.form-control {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
  }
}

/* ── 버튼 active 상태 일반화 ────────────────────────── */
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* 더블탭 줌 방지 */
}
button:active:not(:disabled) {
  opacity: 0.72;
  transform: scale(0.97);
  transition: opacity 0.08s, transform 0.08s;
}

/* ── overscroll bounce 방지 (전체 앱) ───────────────── */
html, body {
  overscroll-behavior: none;
}

/* ── 이미지 드래그 방지 ─────────────────────────────── */
img {
  -webkit-user-drag: none;
  pointer-events: none;
}
.cloth-card img, .pick-img img, .user-card img {
  pointer-events: none;
}

/* ── 빠른 탭 반응 (300ms 딜레이 제거) ───────────────── */
* {
  touch-action: manipulation;
}
/* 스크롤 가능한 요소는 pan 허용 */
.modal, .modal-body, #wardrobe-grid, #picker-grid, #wear-list {
  touch-action: pan-y;
}
/* ─── 낮/밤 착장 테마 ────────────────────────────────── */

/* 낮 테마: 따뜻하고 밝은 느낌 (다크 모드여도 적용) */
.today-daytime {
  position: relative;
}
.today-daytime::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(160deg,
    rgba(255, 246, 220, 0.28) 0%,
    rgba(255, 230, 160, 0.13) 50%,
    rgba(255, 248, 230, 0.10) 100%
  );
  transition: opacity .4s;
}
[data-theme="dark"] .today-daytime::before {
  background: linear-gradient(160deg,
    rgba(255, 220, 100, 0.14) 0%,
    rgba(255, 200, 80,  0.08) 50%,
    rgba(255, 240, 180, 0.05) 100%
  );
}

/* 밤 테마: 차분하고 살짝 어두운 느낌 (라이트 모드여도 적용) */
.today-nighttime {
  position: relative;
}
.today-nighttime::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(160deg,
    rgba(30, 30, 80,  0.10) 0%,
    rgba(15, 15, 50,  0.14) 50%,
    rgba(40, 20, 80,  0.08) 100%
  );
  transition: opacity .4s;
}
[data-theme="dark"] .today-nighttime::before {
  background: linear-gradient(160deg,
    rgba(10, 10, 40,  0.30) 0%,
    rgba(5,  5,  30,  0.22) 50%,
    rgba(20, 10, 50,  0.18) 100%
  );
}

/* 낮/밤 토글 버튼 */
.daynite-btn {
  width: 30px; height: 30px;
  border-radius: var(--r2);
  border: 1px solid var(--b1);
  background: var(--s1);
  color: var(--t3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.daynite-btn:hover { border-color: var(--b2); color: var(--t2); }
.daynite-btn.on {
  background: var(--t1);
  color: var(--bg2);
  border-color: var(--t1);
}

/* 낮/밤 토글 래퍼 — 날짜 오른편 (레거시, 미사용) */
.daynite-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* 낮/밤 토글 — 마네킹 씬 바로 위 중앙 */
.daynite-above-mnq {
  justify-content: center;
  margin-bottom: 10px;
}

/* today 헤더: 날짜만 (낮밤 버튼은 마네킹 위로 이동) */
.today-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
.today-date-col {
  min-width: 0;
}

/* 캘린더 낮/밤 아이콘 */
.cal-dn-icons {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  min-height: 10px;
  flex-wrap: nowrap;
}
.cal-dn-dot {
  font-size: .55rem;
  line-height: 1;
  display: inline-block;
}
.cal-sun-dot  { color: #c9820a; }
.cal-moon-dot { color: #6060b0; font-size: .48rem; }

[data-theme="dark"] .cal-sun-dot  { color: #e8b040; }
[data-theme="dark"] .cal-moon-dot { color: #9090d0; }

/* 캘린더 날짜에 아이콘이 있을 때 레이아웃 조정 */
.cal-day { min-height: 44px; }

/* 낮/밤 모달 탭 active 상태 */
.day-detail-tab { transition: color .15s, border-color .15s; font-weight: 500; }
.day-detail-tab:hover { color: var(--t1) !important; }

@media(hover:none){
  .daynite-btn:hover { border-color:var(--b1); color:var(--t3); background:var(--s1); }
  .daynite-btn.on:hover { background:var(--t1); color:var(--bg2); }
  .day-detail-tab:hover { color: inherit !important; }
}