/* ══════════════════════════════════════════════════════════════════
   대문.css — crowny.org 대문 공용 클래스 (접두 dm-)
   정본: /Users/ef/.claude/design-port/crowny-home/원본/ (텔 아트보드 12장 + tele-tokens.css)
   인벤토리: /Users/ef/.claude/design-port/crowny-home/토큰정본.psv
   규칙: 신규 색·신규 radius·신규 shadow 0건. 모든 리터럴은 위 인벤토리에 존재하는 값만.
        클래스는 var()만 소비한다(hex 리터럴은 :root 토큰 선언부에만).
        중앙 크라우니디자인.css(--crowny-*)와 이름 충돌 없음(접두 dm-).
   3상태: ① :root(라이트 기본) ② @media dark + :not([data-theme="light"]) ③ [data-theme="dark"]
   ══════════════════════════════════════════════════════════════════ */

/* ── ① 라이트 기본 ─────────────────────────────────────────────── */
:root{
  /* 색 — 원본 hex 그대로 (출처: Main/ButlerHome/Login/Wallet.dc.html) */
  --dm-bg:#F7F1E4;              /* 페이지 배경 — Main.dc.html:15 */
  --dm-surface:#FFFFFF;         /* 카드 표면 — Main.dc.html:16 */
  --dm-soft:#EFE7D6;            /* 연한 채움(아바타/아이콘 원) — Main.dc.html:19 */
  --dm-ink:#3A2A1C;             /* 본문 잉크 — Main.dc.html:11 */
  --dm-ink-strong:#4A2C1A;      /* 제목·강조 잉크 / 주버튼 배경 — Main.dc.html:12 */
  --dm-muted:#9A8B78;           /* 보조 텍스트 — Main.dc.html:16 */
  --dm-line:#E7DCC7;            /* 테두리·구분선 — Main.dc.html:16 */
  --dm-accent:#C9A227;          /* 골드 액센트 — Main.dc.html:12 */
  --dm-accent-tint:#F4E3B2;     /* 골드 연한 배경 — Appearance.dc.html:20 */
  --dm-on-accent:#FFFFFF;       /* 어두운/골드 위 잉크 — Main.dc.html:16 */
  --dm-on-dark-sub:rgba(255,255,255,0.7);  /* 어두운 카드 위 보조 — ButlerHome.dc.html */

  /* 그림자 — 원본 그대로 (토큰정본.psv shadow 6종 중) */
  --dm-shadow-hair:0 1px 0 rgba(74,44,26,0.06);   /* Appearance.dc.html:20 */
  --dm-shadow-lift:0 10px 24px rgba(74,44,26,0.22); /* Login.dc.html:30 — 주버튼 */
  --dm-shadow-up:0 -8px 24px rgba(74,44,26,0.08);   /* ChatRoom.dc.html:23 — 하단바 */
  --dm-ring-accent:0 0 0 2px #FFFFFF,0 0 0 4px #C9A227; /* Appearance.dc.html:23 — 아바타 링 */

  /* 둥글기 — 원본 radius 인벤토리 값만 */
  --dm-r-pill:999px;   /* Main.dc.html:16 — 칩·아바타·주버튼 */
  --dm-r-hero:22px;    /* ButlerHome.dc.html — 히어로 카드 / Login 로고 */
  --dm-r-xl:20px;      /* Appearance.dc.html:17 */
  --dm-r-lg:18px;      /* Main.dc.html — 리스트 카드 */
  --dm-r-md:16px;      /* Login.dc.html — 스탯 카드·입력창 */
  --dm-r-sm:12px;
  --dm-r-xs:10px;
  --dm-r-chk:6px;      /* Login.dc.html — 체크박스 */

  /* 폰트 — 원본 스택 그대로 (Main.dc.html:11) */
  --dm-font:'크라우니고딕',Pretendard,'Apple SD Gothic Neo',system-ui,sans-serif;

  /* 여백 리듬 — 원본 dim 값만 (4/6/8/10/12/14/16/18/22/28) */
  --dm-sp-1:4px;  --dm-sp-2:6px;  --dm-sp-3:8px;  --dm-sp-4:10px;
  --dm-sp-5:12px; --dm-sp-6:14px; --dm-sp-7:16px; --dm-sp-8:18px;
  --dm-sp-9:22px; --dm-sp-10:28px;

  /* 최대폭 — 정본 태블릿 가로 1194px (Appearance.dc.html 태블릿 아트보드) */
  --dm-max:1194px;
}

/* ── ② 다크 (시스템 설정, 명시 라이트가 아닐 때) ────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --dm-bg:#1C1610;
    --dm-surface:#261F17;
    --dm-soft:#2C241B;
    --dm-ink:#F0E9DC;
    --dm-ink-strong:#F4E3B2;
    --dm-muted:#A08F7A;
    --dm-line:#3A3126;
    --dm-accent:#D9B23A;
    --dm-accent-tint:#4A3B18;
    --dm-on-accent:#2B2018;
    --dm-shadow-hair:0 1px 0 rgba(74,44,26,0.06);
    --dm-shadow-lift:0 10px 24px rgba(74,44,26,0.22);   /* 다크도 정본 psv 등재값 유지 */
    --dm-shadow-up:0 -8px 24px rgba(74,44,26,0.08);
    --dm-ring-accent:0 0 0 2px #261F17,0 0 0 4px #D9B23A;
  }
}

/* ── ③ 명시 다크 (토글 우선) ───────────────────────────────────── */
:root[data-theme="dark"]{
  --dm-bg:#1C1610;
  --dm-surface:#261F17;
  --dm-soft:#2C241B;
  --dm-ink:#F0E9DC;
  --dm-ink-strong:#F4E3B2;
  --dm-muted:#A08F7A;
  --dm-line:#3A3126;
  --dm-accent:#D9B23A;
  --dm-accent-tint:#4A3B18;
  --dm-on-accent:#2B2018;
  --dm-shadow-hair:0 1px 0 rgba(74,44,26,0.06);
  --dm-shadow-lift:0 10px 24px rgba(74,44,26,0.22);   /* 다크도 정본 psv 등재값 유지 */
  --dm-shadow-up:0 -8px 24px rgba(74,44,26,0.08);
  --dm-ring-accent:0 0 0 2px #261F17,0 0 0 4px #D9B23A;
}

/* ══════════════════════════════════════════════════════════════════
   공용 클래스 — 이하 색·radius·shadow 리터럴 0건, var()만
   ══════════════════════════════════════════════════════════════════ */

/* 페이지 바탕 */
.dm-page{
  background:var(--dm-bg); color:var(--dm-ink);
  font-family:var(--dm-font); -webkit-font-smoothing:antialiased;
  margin:0;
}
.dm-page a{ color:var(--dm-accent); text-decoration:none; }
.dm-page a:hover{ color:var(--dm-ink-strong); }

/* 카드 — 텔 리스트행(Main.dc.html) / 스탯카드(ButlerHome.dc.html) */
.dm-card{
  background:var(--dm-surface);
  border:1px solid var(--dm-line);
  border-radius:var(--dm-r-lg);
  padding:var(--dm-sp-5) var(--dm-sp-7);
  display:flex; flex-direction:column; gap:var(--dm-sp-2);
}
.dm-card-flat{ border:0; box-shadow:var(--dm-shadow-hair); }
.dm-card-stat{ border-radius:var(--dm-r-md); padding:var(--dm-sp-5); gap:var(--dm-sp-2); }
/* 히어로 카드 — ButlerHome.dc.html 초콜릿 카드 */
.dm-card-hero{
  background:var(--dm-ink-strong); color:var(--dm-on-accent);
  border:0; border-radius:var(--dm-r-hero);
  padding:var(--dm-sp-8);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--dm-sp-5);
}
.dm-card-hero .dm-sub{ color:var(--dm-on-dark-sub); }
/* 히어로 장식원 — Login.dc.html / ButlerHome.dc.html 배경 원 */
.dm-blob{
  position:absolute; border-radius:var(--dm-r-pill);
  background:var(--dm-accent); opacity:.2; pointer-events:none;
}
.dm-blob-tint{ background:var(--dm-accent-tint); opacity:.55; }
.dm-card-link{ cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.dm-card-link:hover{ box-shadow:var(--dm-shadow-up); border-color:var(--dm-accent); }

/* 주 버튼 — Login.dc.html "집사 깨우기" */
.dm-btn{
  height:54px; padding:0 var(--dm-sp-9);
  border:0; border-radius:var(--dm-r-pill);
  background:var(--dm-ink-strong); color:var(--dm-on-accent);
  font-family:var(--dm-font); font-weight:800; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--dm-sp-3);
  box-shadow:var(--dm-shadow-lift); cursor:pointer;
}
.dm-btn .dm-ico{ color:var(--dm-accent); }
/* 보조 버튼 — Login.dc.html "기기 인증" */
.dm-btn-ghost{
  height:50px; padding:0 var(--dm-sp-8);
  border:1px solid var(--dm-line); border-radius:var(--dm-r-pill);
  background:var(--dm-surface); color:var(--dm-ink-strong);
  font-family:var(--dm-font); font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--dm-sp-3);
  box-shadow:none; cursor:pointer;
}
.dm-btn-gold{ background:var(--dm-accent); color:var(--dm-on-accent); }
.dm-btn-gold .dm-ico{ color:var(--dm-on-accent); }

/* 칩 — Main.dc.html 필터칩 (전체/안읽음/협업/집사) */
.dm-chip{
  padding:7px var(--dm-sp-6);
  border:1px solid var(--dm-line); border-radius:var(--dm-r-pill);
  background:var(--dm-surface); color:var(--dm-ink-strong);
  font-size:12.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:var(--dm-sp-2);
  white-space:nowrap; cursor:pointer;
}
.dm-chip[aria-selected="true"], .dm-chip.on{
  background:var(--dm-ink-strong); color:var(--dm-on-accent);
  border-color:var(--dm-ink-strong); font-weight:700;
}
/* 배지 — Main.dc.html 안읽음 카운트 / "집사"·"협업" 라벨 */
.dm-badge{
  min-width:20px; height:20px; padding:0 var(--dm-sp-2);
  border-radius:var(--dm-r-pill);
  background:var(--dm-accent); color:var(--dm-on-accent);
  font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.dm-badge-outline{
  background:transparent; color:var(--dm-accent);
  border:1px solid var(--dm-accent);
  height:auto; min-width:0; padding:1px 7px;
  font-size:10px; font-weight:700;
}

/* 아이콘 원 / 아바타 — Main.dc.html 50px, ButlerHome.dc.html 48px·40px */
.dm-icon{
  width:48px; height:48px; flex:none;
  border-radius:var(--dm-r-pill);
  background:var(--dm-soft); color:var(--dm-ink-strong);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:19px;
}
.dm-icon-dark{ background:var(--dm-ink-strong); color:var(--dm-accent); }
.dm-icon-outline{ background:var(--dm-surface); border:1px solid var(--dm-line); color:var(--dm-ink-strong); width:40px; height:40px; }
.dm-icon-ring{ box-shadow:var(--dm-ring-accent); }
.dm-icon-sq{ border-radius:var(--dm-r-hero); width:64px; height:64px; }   /* Login 로고 */
.dm-ico{ width:24px; height:24px; display:block; }
.dm-ico-sm{ width:18px; height:18px; }
.dm-ico-xs{ width:14px; height:14px; }

/* 텍스트 위계 — 원본 font-size/weight/letter-spacing 그대로 */
.dm-display{ font-size:34px; font-weight:800; color:var(--dm-ink-strong); letter-spacing:-1px; line-height:1.1; margin:0; }
.dm-title{ font-size:18px; font-weight:800; color:var(--dm-ink-strong); letter-spacing:-0.3px; margin:0; }
.dm-title-sm{ font-size:13px; font-weight:800; color:var(--dm-ink-strong); margin:0; }
.dm-label{ font-size:12px; font-weight:700; color:var(--dm-accent); letter-spacing:0.5px; }
.dm-sub{ font-size:11.5px; color:var(--dm-muted); margin:0; }
.dm-body{ font-size:14px; color:var(--dm-ink); line-height:1.65; margin:0; }
.dm-body-sm{ font-size:13px; color:var(--dm-muted); margin:0; }
.dm-meta{ font-size:11px; color:var(--dm-muted); }
.dm-num{ font-size:18px; font-weight:800; color:var(--dm-ink-strong); }
.dm-num-lg{ font-size:34px; font-weight:800; letter-spacing:-1px; }
.dm-ellipsis{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 구분선 — Main.dc.html 탭바 border-top */
.dm-hr{ height:1px; border:0; margin:0; background:var(--dm-line); }

/* 입력창 — Main.dc.html 검색 pill / Login.dc.html 필드 */
.dm-input{
  height:44px; padding:0 var(--dm-sp-7);
  border:1px solid var(--dm-line); border-radius:var(--dm-r-pill);
  background:var(--dm-surface); color:var(--dm-ink);
  font-family:var(--dm-font); font-size:14px;
  display:flex; align-items:center; gap:var(--dm-sp-3);
  width:100%; box-sizing:border-box;
}
.dm-input-field{ height:52px; border-radius:var(--dm-r-md); font-size:14.5px; }
.dm-input input, .dm-input-field input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--dm-ink); font-family:var(--dm-font); font-size:inherit;
}
.dm-input input::placeholder{ color:var(--dm-muted); }
.dm-input:focus-within{ border-color:var(--dm-accent); }

/* 타일 / 탭바 — Main.dc.html 하단 탭바 */
.dm-tilebar{
  background:var(--dm-surface); border-top:1px solid var(--dm-line);
  display:flex; align-items:flex-start; padding:var(--dm-sp-3) var(--dm-sp-3) 0;
  box-shadow:var(--dm-shadow-up);
}
.dm-tile{
  flex:1; min-height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--dm-sp-1);
  color:var(--dm-muted); font-size:11px; font-weight:500; letter-spacing:-0.1px;
  border:0; background:transparent; font-family:var(--dm-font); cursor:pointer;
}
.dm-tile[aria-current="page"], .dm-tile.on{ color:var(--dm-ink-strong); font-weight:700; }
/* 타일 그리드 — 7영역 카드 배치용 */
.dm-grid{ display:grid; gap:var(--dm-sp-5); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.dm-row{ display:flex; align-items:center; gap:var(--dm-sp-5); }
.dm-col{ display:flex; flex-direction:column; gap:var(--dm-sp-5); }
.dm-stack{ display:flex; flex-direction:column; gap:var(--dm-sp-1); }
.dm-spread{ display:flex; align-items:center; justify-content:space-between; gap:var(--dm-sp-4); }
.dm-scroller{ display:flex; gap:var(--dm-sp-3); overflow-x:auto; }
.dm-wrap{ max-width:var(--dm-max); margin:0 auto; padding:var(--dm-sp-7); }

/* 상태 점 — ButlerHome.dc.html 7px 골드 점 */
.dm-dot{ width:7px; height:7px; flex:none; border-radius:var(--dm-r-pill); background:var(--dm-accent); }
.dm-dot-sm{ width:6px; height:6px; }