/* 화면 정보 밀도 향상: 루트 폰트 크기 축소 → 모든 rem 기반 크기가 비례 축소 */
    html { font-size: 12px; }

    /* 고정 px 글자도 글꼴 크기 설정에 따라 함께 커지도록 rem(12px 기준)으로 환산 */
    .text-\[8px\]  { font-size: 0.667rem !important; }
    .text-\[9px\]  { font-size: 0.75rem  !important; }
    .text-\[10px\] { font-size: 0.833rem !important; }
    .text-\[11px\] { font-size: 0.917rem !important; }

    /* 스마트폰 앱과 동일한 터치 및 드래그 방지 스타일 */
    body {
      background-color: #f3f4f6;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-x pan-y;
    }
    input, textarea {
      user-select: text;
      -webkit-user-select: text;
    }
    /* 인쇄 시 불필요한 요소 숨김 처리 */
    @media print {
      .print\:hidden { display: none !important; }
    }

    /* =========================================
       테마 시스템 (data-theme 속성으로 전환)
       기본(default) = 클린 비즈니스 (변경 없음)
       ========================================= */

    /* ---- 민트 프레시 (mint) ---- */
    body[data-theme="mint"] { background-color: #F0FDFA; }
    body[data-theme="mint"] .bg-blue-600 { background-color: #0D9488 !important; }
    body[data-theme="mint"] .bg-blue-700 { background-color: #0F766E !important; }
    body[data-theme="mint"] .bg-blue-500 { background-color: #14B8A6 !important; }
    body[data-theme="mint"] .bg-blue-100 { background-color: #CCFBF1 !important; }
    body[data-theme="mint"] .bg-blue-50  { background-color: #F0FDFA !important; }
    body[data-theme="mint"] .text-blue-700 { color: #0F766E !important; }
    body[data-theme="mint"] .text-blue-600 { color: #0D9488 !important; }
    body[data-theme="mint"] .text-blue-500 { color: #14B8A6 !important; }
    body[data-theme="mint"] .text-blue-400 { color: #2DD4BF !important; }
    body[data-theme="mint"] .text-blue-300 { color: #5EEAD4 !important; }
    body[data-theme="mint"] .text-blue-200 { color: #99F6E4 !important; }
    body[data-theme="mint"] .border-blue-600 { border-color: #0D9488 !important; }
    body[data-theme="mint"] .border-blue-400 { border-color: #2DD4BF !important; }
    body[data-theme="mint"] .border-blue-200 { border-color: #99F6E4 !important; }
    body[data-theme="mint"] .border-blue-100 { border-color: #CCFBF1 !important; }
    body[data-theme="mint"] .border-blue-50  { border-color: #F0FDFA !important; }
    body[data-theme="mint"] .ring-blue-50 { --tw-ring-color: #F0FDFA !important; }
    body[data-theme="mint"] .hover\:bg-blue-500:hover { background-color: #14B8A6 !important; }
    body[data-theme="mint"] .active\:bg-blue-50:active { background-color: #F0FDFA !important; }
    body[data-theme="mint"] .active\:bg-blue-100:active { background-color: #CCFBF1 !important; }
    body[data-theme="mint"] .active\:bg-blue-700:active { background-color: #0F766E !important; }
    body[data-theme="mint"] .focus\:border-blue-400:focus { border-color: #2DD4BF !important; }
    body[data-theme="mint"] .focus\:border-blue-500:focus { border-color: #14B8A6 !important; }

    /* ---- 미드나잇 네이비 (dark) ---- */
    /* 회색·의미색 계열은 아래 '디자인 토큰' 섹션에서 변수로 일괄 처리 */
    body[data-theme="dark"] .bg-blue-600 { background-color: #3B82F6 !important; }
    body[data-theme="dark"] .bg-blue-700 { background-color: #2563EB !important; }
    body[data-theme="dark"] .bg-blue-500 { background-color: #60A5FA !important; }
    body[data-theme="dark"] .bg-blue-100 { background-color: #1E3A8A !important; color: #DBEAFE; }
    body[data-theme="dark"] .bg-blue-50  { background-color: #1E293B !important; }
    body[data-theme="dark"] .text-blue-700 { color: #93C5FD !important; }
    body[data-theme="dark"] .text-blue-600 { color: #60A5FA !important; }
    body[data-theme="dark"] .text-blue-500 { color: #60A5FA !important; }
    body[data-theme="dark"] .text-blue-400 { color: #93C5FD !important; }
    body[data-theme="dark"] .text-blue-300 { color: #BFDBFE !important; }
    body[data-theme="dark"] .text-blue-200 { color: #DBEAFE !important; }
    body[data-theme="dark"] .border-blue-600 { border-color: #3B82F6 !important; }
    body[data-theme="dark"] .border-blue-400 { border-color: #60A5FA !important; }
    body[data-theme="dark"] .border-blue-200 { border-color: #1E3A8A !important; }
    body[data-theme="dark"] .border-blue-100 { border-color: #1E3A8A !important; }
    body[data-theme="dark"] .border-blue-50  { border-color: #1E293B !important; }
    body[data-theme="dark"] .ring-blue-50 { --tw-ring-color: #1E40AF !important; }

    /* ---- 웜 베이지 (wood) ---- */
    body[data-theme="wood"] { background-color: #FAF6F0; }
    body[data-theme="wood"] .bg-blue-600 { background-color: #B45309 !important; }
    body[data-theme="wood"] .bg-blue-700 { background-color: #92400E !important; }
    body[data-theme="wood"] .bg-blue-500 { background-color: #D97706 !important; }
    body[data-theme="wood"] .bg-blue-100 { background-color: #FEF3C7 !important; }
    body[data-theme="wood"] .bg-blue-50  { background-color: #FFFBEB !important; }
    body[data-theme="wood"] .text-blue-700 { color: #92400E !important; }
    body[data-theme="wood"] .text-blue-600 { color: #B45309 !important; }
    body[data-theme="wood"] .text-blue-500 { color: #D97706 !important; }
    body[data-theme="wood"] .text-blue-400 { color: #F59E0B !important; }
    body[data-theme="wood"] .text-blue-300 { color: #FBBF24 !important; }
    body[data-theme="wood"] .text-blue-200 { color: #FDE68A !important; }
    body[data-theme="wood"] .border-blue-600 { border-color: #B45309 !important; }
    body[data-theme="wood"] .border-blue-400 { border-color: #F59E0B !important; }
    body[data-theme="wood"] .border-blue-200 { border-color: #FDE68A !important; }
    body[data-theme="wood"] .border-blue-100 { border-color: #FEF3C7 !important; }
    body[data-theme="wood"] .border-blue-50  { border-color: #FFFBEB !important; }
    body[data-theme="wood"] .ring-blue-50 { --tw-ring-color: #FFFBEB !important; }
    body[data-theme="wood"] .hover\:bg-blue-500:hover { background-color: #D97706 !important; }
    body[data-theme="wood"] .active\:bg-blue-50:active { background-color: #FFFBEB !important; }
    body[data-theme="wood"] .active\:bg-blue-100:active { background-color: #FEF3C7 !important; }
    body[data-theme="wood"] .active\:bg-blue-700:active { background-color: #92400E !important; }
    body[data-theme="wood"] .focus\:border-blue-400:focus { border-color: #F59E0B !important; }
    body[data-theme="wood"] .focus\:border-blue-500:focus { border-color: #D97706 !important; }

    /* ---- 오션 (ocean) ---- */
    body[data-theme="ocean"] { background-color: #ECFEFF; }
    body[data-theme="ocean"] .bg-blue-600 { background-color: #0E7490 !important; }
    body[data-theme="ocean"] .bg-blue-700 { background-color: #155E75 !important; }
    body[data-theme="ocean"] .bg-blue-500 { background-color: #06B6D4 !important; }
    body[data-theme="ocean"] .bg-blue-100 { background-color: #CFFAFE !important; }
    body[data-theme="ocean"] .bg-blue-50  { background-color: #ECFEFF !important; }
    body[data-theme="ocean"] .text-blue-700 { color: #155E75 !important; }
    body[data-theme="ocean"] .text-blue-600 { color: #0E7490 !important; }
    body[data-theme="ocean"] .text-blue-500 { color: #06B6D4 !important; }
    body[data-theme="ocean"] .text-blue-400 { color: #22D3EE !important; }
    body[data-theme="ocean"] .text-blue-300 { color: #67E8F9 !important; }
    body[data-theme="ocean"] .text-blue-200 { color: #A5F3FC !important; }
    body[data-theme="ocean"] .border-blue-600 { border-color: #0E7490 !important; }
    body[data-theme="ocean"] .border-blue-400 { border-color: #22D3EE !important; }
    body[data-theme="ocean"] .border-blue-200 { border-color: #A5F3FC !important; }
    body[data-theme="ocean"] .border-blue-100 { border-color: #CFFAFE !important; }
    body[data-theme="ocean"] .border-blue-50  { border-color: #ECFEFF !important; }
    body[data-theme="ocean"] .ring-blue-50 { --tw-ring-color: #ECFEFF !important; }
    body[data-theme="ocean"] .hover\:bg-blue-500:hover { background-color: #06B6D4 !important; }
    body[data-theme="ocean"] .active\:bg-blue-50:active { background-color: #ECFEFF !important; }
    body[data-theme="ocean"] .active\:bg-blue-100:active { background-color: #CFFAFE !important; }
    body[data-theme="ocean"] .active\:bg-blue-700:active { background-color: #155E75 !important; }
    body[data-theme="ocean"] .focus\:border-blue-400:focus { border-color: #22D3EE !important; }
    body[data-theme="ocean"] .focus\:border-blue-500:focus { border-color: #06B6D4 !important; }

    /* ---- 퍼플 글로우 (purple) ---- */
    body[data-theme="purple"] { background-color: #FAF5FF; }
    body[data-theme="purple"] .bg-blue-600 { background-color: #7C3AED !important; }
    body[data-theme="purple"] .bg-blue-700 { background-color: #6D28D9 !important; }
    body[data-theme="purple"] .bg-blue-500 { background-color: #8B5CF6 !important; }
    body[data-theme="purple"] .bg-blue-100 { background-color: #EDE9FE !important; }
    body[data-theme="purple"] .bg-blue-50  { background-color: #FAF5FF !important; }
    body[data-theme="purple"] .text-blue-700 { color: #6D28D9 !important; }
    body[data-theme="purple"] .text-blue-600 { color: #7C3AED !important; }
    body[data-theme="purple"] .text-blue-500 { color: #8B5CF6 !important; }
    body[data-theme="purple"] .text-blue-400 { color: #A78BFA !important; }
    body[data-theme="purple"] .text-blue-300 { color: #C4B5FD !important; }
    body[data-theme="purple"] .text-blue-200 { color: #DDD6FE !important; }
    body[data-theme="purple"] .border-blue-600 { border-color: #7C3AED !important; }
    body[data-theme="purple"] .border-blue-400 { border-color: #A78BFA !important; }
    body[data-theme="purple"] .border-blue-200 { border-color: #DDD6FE !important; }
    body[data-theme="purple"] .border-blue-100 { border-color: #EDE9FE !important; }
    body[data-theme="purple"] .border-blue-50  { border-color: #FAF5FF !important; }
    body[data-theme="purple"] .ring-blue-50 { --tw-ring-color: #FAF5FF !important; }
    body[data-theme="purple"] .hover\:bg-blue-500:hover { background-color: #8B5CF6 !important; }
    body[data-theme="purple"] .active\:bg-blue-50:active { background-color: #FAF5FF !important; }
    body[data-theme="purple"] .active\:bg-blue-100:active { background-color: #EDE9FE !important; }
    body[data-theme="purple"] .active\:bg-blue-700:active { background-color: #6D28D9 !important; }
    body[data-theme="purple"] .focus\:border-blue-400:focus { border-color: #A78BFA !important; }
    body[data-theme="purple"] .focus\:border-blue-500:focus { border-color: #8B5CF6 !important; }

    /* =========================================
       디자인 토큰 (모든 하드코딩 색을 테마별 변수로 관리)
       중립(회색)·의미색(후원/입금/영수증/AI)까지 테마마다 톤을 맞춘다.
       의미는 유지하되(후원=초록 계열, 입금=적색 계열) 채도·명도를 테마에 조화시킨다.
       ========================================= */

    body {
      /* 핵심 */
      --theme-primary:#2563EB; --theme-soft:#DBEAFE;
      /* 표면 */
      --c-page:#F1F5F9; --c-surface:#FFFFFF;
      --c-surface-2:#F8FAFC; --c-surface-3:#F1F5F9; --c-surface-4:#E2E8F0;
      /* 글자 (진함 → 옅음) */
      --c-text-1:#1E293B; --c-text-2:#334155; --c-text-3:#475569;
      --c-text-4:#64748B; --c-text-5:#94A3B8; --c-text-6:#CBD5E1;
      /* 경계 */
      --c-line-1:#F1F5F9; --c-line-2:#E2E8F0; --c-line-3:#CBD5E1;
      /* 어두운 강조 바(총액/KPI) */
      --c-ink:#1E293B;
      /* 의미색: 긍정(후원·완료) */
      --c-pos-1:#065F46; --c-pos-2:#047857; --c-pos-3:#059669; --c-pos-4:#34D399;
      --c-pos-bg:#ECFDF5; --c-pos-bg-2:#D1FAE5; --c-pos-line:#A7F3D0; --c-pos-line-2:#6EE7B7;
      /* 의미색: 주의(입금 필요·삭제) */
      --c-neg-1:#9F1239; --c-neg-2:#E11D48; --c-neg-3:#F43F5E; --c-neg-bg:#FFF1F2;
      /* 의미색: 강조(선지급·영수증) */
      --c-warn-1:#92400E; --c-warn-2:#D97706; --c-warn-3:#F59E0B; --c-warn-4:#FBBF24;
      --c-warn-bg:#FFFBEB; --c-warn-bg-2:#FEF3C7; --c-warn-line:#FDE68A;
      /* AI */
      --c-ai-1:#5B21B6; --c-ai-2:#7C3AED; --c-ai-3:#8B5CF6; --c-ai-bg:#F5F3FF; --c-ai-line:#DDD6FE;
    }

    /* ---- 민트: 차분한 청록, 중립색도 살짝 초록빛 ---- */
    body[data-theme="mint"] {
      --theme-primary:#0D9488; --theme-soft:#CCFBF1;
      --c-page:#ECFDF7; --c-surface:#FFFFFF;
      --c-surface-2:#F3FBF8; --c-surface-3:#E6F5F0; --c-surface-4:#D3EDE5;
      --c-text-1:#12312B; --c-text-2:#1D453D; --c-text-3:#3A6259;
      --c-text-4:#5C8279; --c-text-5:#8AA9A1; --c-text-6:#BBD4CD;
      --c-line-1:#EAF6F2; --c-line-2:#D7EBE5; --c-line-3:#B7D8CF;
      --c-ink:#134E4A;
      --c-pos-1:#065F46; --c-pos-2:#047857; --c-pos-3:#059669; --c-pos-4:#34D399;
      --c-pos-bg:#E9FBF3; --c-pos-bg-2:#CDF3E4; --c-pos-line:#A3E7CF; --c-pos-line-2:#6DD9B7;
      --c-neg-1:#9F1239; --c-neg-2:#DB2777; --c-neg-3:#EC4899; --c-neg-bg:#FDF2F8;
      --c-warn-1:#92400E; --c-warn-2:#CA8A04; --c-warn-3:#EAB308; --c-warn-4:#FACC15;
      --c-warn-bg:#FEFCE8; --c-warn-bg-2:#FEF9C3; --c-warn-line:#FDE68A;
      --c-ai-1:#5B21B6; --c-ai-2:#7C3AED; --c-ai-3:#8B5CF6; --c-ai-bg:#F5F3FF; --c-ai-line:#DDD6FE;
    }

    /* ---- 딥 오션: 깊은 청록, 중립색은 서늘한 블루그레이 ---- */
    body[data-theme="ocean"] {
      --theme-primary:#0E7490; --theme-soft:#CFFAFE;
      --c-page:#E9F7FA; --c-surface:#FFFFFF;
      --c-surface-2:#F2FAFC; --c-surface-3:#E3F2F7; --c-surface-4:#CFE6EE;
      --c-text-1:#0C2F3A; --c-text-2:#15404E; --c-text-3:#2E5F70;
      --c-text-4:#547E8D; --c-text-5:#84A6B2; --c-text-6:#B8D2DB;
      --c-line-1:#EAF5F8; --c-line-2:#D5E9EF; --c-line-3:#B2D3DE;
      --c-ink:#0F3B4C;
      --c-pos-1:#065F46; --c-pos-2:#047857; --c-pos-3:#0D9488; --c-pos-4:#2DD4BF;
      --c-pos-bg:#E7FAF7; --c-pos-bg-2:#CBF3EC; --c-pos-line:#9FE7DC; --c-pos-line-2:#5FD6C6;
      --c-neg-1:#9F1239; --c-neg-2:#E11D48; --c-neg-3:#F43F5E; --c-neg-bg:#FFF1F3;
      --c-warn-1:#92400E; --c-warn-2:#D97706; --c-warn-3:#F59E0B; --c-warn-4:#FBBF24;
      --c-warn-bg:#FFFBEB; --c-warn-bg-2:#FEF3C7; --c-warn-line:#FDE68A;
      --c-ai-1:#5B21B6; --c-ai-2:#7C3AED; --c-ai-3:#8B5CF6; --c-ai-bg:#F5F3FF; --c-ai-line:#DDD6FE;
    }

    /* ---- 미드나잇: 어두운 표면, 의미색은 밝게 띄워 대비 확보 ---- */
    body[data-theme="dark"] {
      --theme-primary:#60A5FA; --theme-soft:#1E3A8A;
      --c-page:#0B1220; --c-surface:#161F32;
      --c-surface-2:#1C2739; --c-surface-3:#26334A; --c-surface-4:#33425C;
      --c-text-1:#F1F5F9; --c-text-2:#E2E8F0; --c-text-3:#CBD5E1;
      --c-text-4:#94A3B8; --c-text-5:#7C8CA5; --c-text-6:#5A6B85;
      --c-line-1:#26334A; --c-line-2:#2E3D57; --c-line-3:#3D4E6B;
      --c-ink:#0F172A;
      --c-pos-1:#6EE7B7; --c-pos-2:#34D399; --c-pos-3:#34D399; --c-pos-4:#6EE7B7;
      --c-pos-bg:#0E2A24; --c-pos-bg-2:#143B31; --c-pos-line:#1E5348; --c-pos-line-2:#2A6E5E;
      --c-neg-1:#FDA4AF; --c-neg-2:#FB7185; --c-neg-3:#FB7185; --c-neg-bg:#331520;
      --c-warn-1:#FCD34D; --c-warn-2:#FBBF24; --c-warn-3:#FBBF24; --c-warn-4:#FCD34D;
      --c-warn-bg:#2C2210; --c-warn-bg-2:#3B2F14; --c-warn-line:#4E3F1C;
      --c-ai-1:#C4B5FD; --c-ai-2:#A78BFA; --c-ai-3:#A78BFA; --c-ai-bg:#241D3D; --c-ai-line:#3A2F63;
    }

    /* ---- 웜 베이지: 따뜻한 브라운, 중립색도 따뜻하게 ---- */
    body[data-theme="wood"] {
      --theme-primary:#B45309; --theme-soft:#FEF3C7;
      --c-page:#F6EFE4; --c-surface:#FFFDFA;
      --c-surface-2:#FAF5EC; --c-surface-3:#F2E9DA; --c-surface-4:#E6D8C3;
      --c-text-1:#3A2A17; --c-text-2:#4E3921; --c-text-3:#6B5334;
      --c-text-4:#8B7350; --c-text-5:#AE9878; --c-text-6:#D5C4A8;
      --c-line-1:#F3EBDD; --c-line-2:#E7DAC5; --c-line-3:#D4C1A4;
      --c-ink:#4A2F13;
      --c-pos-1:#3F6212; --c-pos-2:#4D7C0F; --c-pos-3:#65A30D; --c-pos-4:#A3E635;
      --c-pos-bg:#F5FAE9; --c-pos-bg-2:#E7F5CC; --c-pos-line:#D2EBA6; --c-pos-line-2:#B7DE76;
      --c-neg-1:#9A3412; --c-neg-2:#C2410C; --c-neg-3:#EA580C; --c-neg-bg:#FEF3EC;
      --c-warn-1:#854D0E; --c-warn-2:#B45309; --c-warn-3:#D97706; --c-warn-4:#F59E0B;
      --c-warn-bg:#FEF8EA; --c-warn-bg-2:#FBEBC8; --c-warn-line:#F2D9A4;
      --c-ai-1:#6B21A8; --c-ai-2:#7E22CE; --c-ai-3:#9333EA; --c-ai-bg:#F8F2FD; --c-ai-line:#E3D3F5;
    }

    /* ---- 퍼플 글로우: 보랏빛 중립 + 핑크 포인트 ---- */
    body[data-theme="purple"] {
      --theme-primary:#7C3AED; --theme-soft:#EDE9FE;
      --c-page:#F3EEFC; --c-surface:#FFFFFF;
      --c-surface-2:#F9F6FE; --c-surface-3:#F0EAFB; --c-surface-4:#E1D6F5;
      --c-text-1:#241543; --c-text-2:#352159; --c-text-3:#4F3A76;
      --c-text-4:#6F5A96; --c-text-5:#9B88BB; --c-text-6:#C9BBE0;
      --c-line-1:#F2ECFB; --c-line-2:#E4DAF4; --c-line-3:#CDBCE8;
      --c-ink:#3B1D6E;
      --c-pos-1:#065F46; --c-pos-2:#047857; --c-pos-3:#059669; --c-pos-4:#34D399;
      --c-pos-bg:#ECFDF5; --c-pos-bg-2:#D1FAE5; --c-pos-line:#A7F3D0; --c-pos-line-2:#6EE7B7;
      --c-neg-1:#9D174D; --c-neg-2:#DB2777; --c-neg-3:#EC4899; --c-neg-bg:#FDF2F8;
      --c-warn-1:#92400E; --c-warn-2:#D97706; --c-warn-3:#F59E0B; --c-warn-4:#FBBF24;
      --c-warn-bg:#FFFBEB; --c-warn-bg-2:#FEF3C7; --c-warn-line:#FDE68A;
      --c-ai-1:#5B21B6; --c-ai-2:#7C3AED; --c-ai-3:#8B5CF6; --c-ai-bg:#F5F3FF; --c-ai-line:#DDD6FE;
    }

    /* =========================================
       토큰 → 유틸리티 클래스 매핑
       (JSX 안에 하드코딩된 회색·의미색 클래스가 테마를 따라가게 함)
       ========================================= */

    /* 페이지/카드 표면 */
    body { background-color: var(--c-page); color: var(--c-text-1); }
    .bg-white { background-color: var(--c-surface) !important; }
    .bg-gray-50, .bg-slate-50 { background-color: var(--c-surface-2) !important; }
    .bg-gray-100, .bg-slate-100 { background-color: var(--c-surface-3) !important; }
    .bg-gray-200 { background-color: var(--c-surface-4) !important; }
    .bg-gray-800, .bg-slate-800 { background-color: var(--c-ink) !important; }

    /* 글자 */
    .text-gray-800, .text-gray-900, .text-slate-800 { color: var(--c-text-1) !important; }
    .text-gray-700, .text-slate-700 { color: var(--c-text-2) !important; }
    .text-gray-600 { color: var(--c-text-3) !important; }
    .text-gray-500 { color: var(--c-text-4) !important; }
    .text-gray-400 { color: var(--c-text-5) !important; }
    .text-gray-300, .text-gray-200 { color: var(--c-text-6) !important; }

    /* 경계·구분선 */
    .border, .border-b, .border-t, .border-l, .border-r { border-color: var(--c-line-2); }
    .border-gray-100, .border-slate-100 { border-color: var(--c-line-1) !important; }
    .border-gray-200, .border-slate-200 { border-color: var(--c-line-2) !important; }
    .border-gray-300 { border-color: var(--c-line-3) !important; }
    .border-gray-800 { border-color: var(--c-ink) !important; }
    .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-line-2); }
    .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
    .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-line-1) !important; }

    /* 긍정(후원·완료) — green/emerald 계열 */
    .text-green-700, .text-emerald-700 { color: var(--c-pos-1) !important; }
    .text-green-600, .text-emerald-600 { color: var(--c-pos-2) !important; }
    .text-green-500, .text-emerald-500 { color: var(--c-pos-3) !important; }
    .text-green-400, .text-emerald-400 { color: var(--c-pos-4) !important; }
    .bg-green-50,  .bg-emerald-50  { background-color: var(--c-pos-bg) !important; }
    .bg-green-100, .bg-emerald-100 { background-color: var(--c-pos-bg-2) !important; }
    .bg-green-500, .bg-emerald-500 { background-color: var(--c-pos-3) !important; }
    .border-green-100, .border-emerald-100 { border-color: var(--c-pos-line) !important; }
    .border-green-200, .border-emerald-200 { border-color: var(--c-pos-line) !important; }
    .border-green-400, .border-emerald-400 { border-color: var(--c-pos-line-2) !important; }
    .bg-green-50\/50 { background-color: var(--c-pos-bg) !important; }

    /* 주의(입금 필요·삭제) — rose/red 계열 */
    .text-rose-600, .text-red-600 { color: var(--c-neg-1) !important; }
    .text-rose-500, .text-red-500 { color: var(--c-neg-2) !important; }
    .text-rose-400, .text-red-400 { color: var(--c-neg-3) !important; }
    .bg-rose-500, .bg-red-500 { background-color: var(--c-neg-2) !important; }
    .bg-rose-50, .bg-red-50 { background-color: var(--c-neg-bg) !important; }
    .border-rose-200, .border-red-200 { border-color: var(--c-neg-3) !important; }

    /* 강조(선지급·영수증) — amber/orange/yellow 계열 */
    .text-amber-700, .text-orange-700, .text-yellow-700 { color: var(--c-warn-1) !important; }
    .text-amber-600, .text-orange-600, .text-yellow-600 { color: var(--c-warn-2) !important; }
    .text-amber-500, .text-orange-500, .text-yellow-500 { color: var(--c-warn-3) !important; }
    .text-amber-400, .text-orange-400, .text-yellow-400 { color: var(--c-warn-4) !important; }
    .bg-amber-50, .bg-orange-50, .bg-yellow-50 { background-color: var(--c-warn-bg) !important; }
    .bg-amber-100, .bg-orange-100, .bg-yellow-100 { background-color: var(--c-warn-bg-2) !important; }
    .border-amber-100, .border-orange-100, .border-yellow-100 { border-color: var(--c-warn-line) !important; }
    .border-amber-200, .border-orange-200, .border-yellow-200 { border-color: var(--c-warn-line) !important; }
    .border-amber-300, .border-yellow-300 { border-color: var(--c-warn-3) !important; }

    /* AI(퍼플) */
    .text-purple-700, .text-violet-700 { color: var(--c-ai-1) !important; }
    .text-purple-600, .text-violet-600 { color: var(--c-ai-2) !important; }
    .text-purple-500, .text-violet-500 { color: var(--c-ai-3) !important; }
    .bg-purple-50, .bg-violet-50 { background-color: var(--c-ai-bg) !important; }
    .bg-purple-100, .bg-violet-100 { background-color: var(--c-ai-line) !important; }
    .border-purple-100, .border-violet-100 { border-color: var(--c-ai-line) !important; }

    /* 스크롤바: 콘텐츠(오른쪽 끝 토글 스위치 등) 위에 겹쳐 잘리지 않도록
       공간을 항상 확보(scrollbar-gutter)하고, 얇고 은은하게 표시 */
    .overflow-y-auto, .overflow-y-scroll { scrollbar-gutter: stable; }
    /* 안드로이드 WebView 등 '오버레이 스크롤바' 환경에서는 scrollbar-gutter 가
       공간을 만들지 못해 스크롤바가 카드 위에 겹친다 → 오른쪽 여백을 조금 더 준다 */
    .flex-1.overflow-y-auto { padding-right: calc(0.75rem + 7px); }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background-color: var(--c-line-3);
      border-radius: 999px;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--c-text-5); }
    /* Firefox */
    .overflow-y-auto, .overflow-y-scroll { scrollbar-width: thin; scrollbar-color: var(--c-line-3) transparent; }

    /* =========================================
       타이포그래피
       화면 곳곳에 text-[9px] 처럼 px 로 고정된 글자가 많아 '글꼴 크기' 설정을
       키워도 커지지 않았다 → 모두 rem 으로 환산해 설정을 따라가게 한다.
       (기준 글꼴 보통 = 16px)
       ========================================= */
    /* 지출 행의 날짜: 네이티브 달력 아이콘이 폭을 많이 차지해 날짜가 잘린다.
       아이콘을 숨겨도 입력칸을 누르면 달력은 그대로 열린다. */
    input[type="date"].date-compact::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
    }
    input[type="date"].date-compact { -webkit-appearance: none; appearance: none; }

    .text-\[8px\]  { font-size: 0.66rem !important; }
    .text-\[9px\]  { font-size: 0.73rem !important; }
    .text-\[10px\] { font-size: 0.80rem !important; }
    .text-\[11px\] { font-size: 0.88rem !important; }

    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -0.01em;          /* 한글 가독성 */
      text-rendering: optimizeLegibility;
    }
    /* 숫자는 자리수가 흔들리지 않게 고정폭으로 */
    .font-black, .font-bold { font-variant-numeric: tabular-nums; }
    /* 작은 라벨은 줄간격을 살짝 넉넉하게 */
    .text-\[9px\], .text-\[10px\], .text-\[11px\], .text-xs { line-height: 1.45; }

    /* 앱 높이: 모바일 브라우저 주소창이 보일 때 100vh 는 실제 화면보다 커서
       하단 탭바가 화면 밖으로 밀려 가려진다 → 실제 보이는 높이(dvh)를 쓴다 */
    html, body { height: 100%; overscroll-behavior: none; }
    .h-screen { height: 100vh; height: 100dvh; }

    /* 하단 탭바: 화면에 고정해 어떤 경우에도 사라지지 않게 한다.
       (주소창이 나타나거나, 안드로이드 시스템 내비게이션 바가 겹치거나,
        키보드가 올라와도 항상 보이도록) */
    .app-tabbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-width: 480px;      /* 앱 본체와 같은 폭으로 가운데 정렬 */
      margin: 0 auto;
      z-index: 40;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* 고정된 탭바에 마지막 내용이 가리지 않도록 스크롤 영역 아래 여백 확보 */
    .flex-1.overflow-y-auto { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

    /* 낙관(인장) — 하단 서명. 배경에 은은히 얹히도록 톤을 낮추고, 다크에선 살짝 밝게 */
    .seal-mark {
      object-fit: contain;
      opacity: .78;
      filter: saturate(.9);
      transition: opacity .2s ease;
    }
    body[data-theme="dark"] .seal-mark { opacity: .9; filter: saturate(1.05) brightness(1.1); }
    body[data-theme="wood"] .seal-mark { opacity: .85; }

    /* 고급스러운 입체감: 얕고 넓은 그림자 + 은은한 테두리 */
    .shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03) !important; }
    .shadow-md { box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.06) !important; }
    .shadow-2xl { box-shadow: 0 10px 40px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.10) !important; }
    body[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }
    body[data-theme="dark"] .shadow-md { box-shadow: 0 2px 6px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.30) !important; }
    body[data-theme="dark"] .shadow-2xl { box-shadow: 0 12px 44px rgba(0,0,0,.55) !important; }

    /* 모든 입력창: 포커스 시 테마색 테두리 + 은은한 링 (classic 포함) */
    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus {
      border-color: var(--theme-primary) !important;
      box-shadow: 0 0 0 2px var(--theme-soft) !important;
      outline: none !important;
    }
    /* 테마 지정 시(특히 다크)엔 우선순위를 높여 포커스 테마색이 확실히 적용되게 */
    body[data-theme] input:not([type="checkbox"]):not([type="radio"]):focus,
    body[data-theme] select:focus,
    body[data-theme] textarea:focus {
      border-color: var(--theme-primary) !important;
      box-shadow: 0 0 0 2px var(--theme-soft) !important;
      outline: none !important;
    }

    /* 입력창: 표면·글자색을 테마에 맞춤 */
    input:not([type="checkbox"]):not([type="radio"]),
    select, textarea {
      background-color: var(--c-surface);
      color: var(--c-text-1);
    }
    input::placeholder, textarea::placeholder { color: var(--c-text-5); }
    body[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
    body[data-theme="dark"] select,
    body[data-theme="dark"] textarea {
      background-color: var(--c-page) !important;
      color: var(--c-text-1) !important;
      border-color: var(--c-line-3) !important;
    }
    body[data-theme="dark"] select option { background-color: var(--c-surface); color: var(--c-text-1); }
    body[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }

    /* KPI 카드·총액 바(짙은 그라데이션)를 테마 톤으로 */
    .from-slate-900.via-slate-800.to-slate-700 {
      background-image: linear-gradient(to bottom right, var(--c-grad-1,#0F172A), var(--c-grad-2,#1E293B), var(--c-grad-3,#334155)) !important;
    }
    body                      { --c-grad-1:#0F172A; --c-grad-2:#1E293B; --c-grad-3:#334155; }
    body[data-theme="mint"]   { --c-grad-1:#0C3A34; --c-grad-2:#115E59; --c-grad-3:#0F766E; }
    body[data-theme="ocean"]  { --c-grad-1:#082F3F; --c-grad-2:#155E75; --c-grad-3:#0E7490; }
    body[data-theme="dark"]   { --c-grad-1:#0A1120; --c-grad-2:#162034; --c-grad-3:#243352; }
    body[data-theme="wood"]   { --c-grad-1:#3B2408; --c-grad-2:#6B3F10; --c-grad-3:#92400E; }
    body[data-theme="purple"] { --c-grad-1:#2A1259; --c-grad-2:#4C1D95; --c-grad-3:#6D28D9; }
  
/* Concept themes share semantic tokens, with different surfaces and typography. */
body[data-theme="finance"], body[data-theme="gathering"], body[data-theme="hanji"] {
  --accent:#2359d9; --accent-strong:#1946b0; --accent-light:#eaf0ff; --accent-line:#bacdf5;
  --theme-primary:var(--accent); --theme-soft:var(--accent-light);
  --c-page:#f4f7fc; --c-surface:#fff; --c-surface-2:#f8faff; --c-surface-3:#eef3fb;
  --c-line-1:#edf1f8; --c-line-2:#dae3f1; --c-line-3:#b9c9df;
  --c-text-1:#142747; --c-text-2:#263c5c; --c-text-3:#405775; --c-text-4:#586b85; --c-text-5:#6c7e96;
  --c-grad-1:#1842a0; --c-grad-2:#2359d9; --c-grad-3:#3671e9;
}
body[data-theme="gathering"] {
  --accent:#c44720; --accent-strong:#a63515; --accent-light:#fff0e3; --accent-line:#edb591;
  --c-page:#fff7ed; --c-surface:#fffcf7; --c-surface-2:#fff6ea; --c-surface-3:#f7eadb;
  --c-line-1:#f6ecdf; --c-line-2:#ebd7c1; --c-line-3:#cfb99d;
  --c-text-1:#203f30; --c-text-2:#31533e; --c-text-3:#4d624d; --c-text-4:#69725e; --c-text-5:#7c7866;
  --c-grad-1:#194b36; --c-grad-2:#286647; --c-grad-3:#387c56;
}
body[data-theme="hanji"] {
  --accent:#983d31; --accent-strong:#7a2e25; --accent-light:#f5e4d9; --accent-line:#cca28d;
  --c-page:#f5eddf; --c-surface:#faf4e9; --c-surface-2:#f5ecdc; --c-surface-3:#eee2cf;
  --c-line-1:#ede2d0; --c-line-2:#d9c8af; --c-line-3:#b8a48b;
  --c-text-1:#332b24; --c-text-2:#4d4035; --c-text-3:#675746; --c-text-4:#776651; --c-text-5:#87745e;
  --c-grad-1:#342c24; --c-grad-2:#4c3c2c; --c-grad-3:#70543a;
}
body:is([data-theme="finance"],[data-theme="gathering"],[data-theme="hanji"]) .bg-blue-600 {background-color:var(--accent)!important}
body:is([data-theme="finance"],[data-theme="gathering"],[data-theme="hanji"]) .bg-blue-700 {background-color:var(--accent-strong)!important}
body:is([data-theme="finance"],[data-theme="gathering"],[data-theme="hanji"]) :is(.bg-blue-50,.bg-blue-100) {background-color:var(--accent-light)!important}
body:is([data-theme="finance"],[data-theme="gathering"],[data-theme="hanji"]) :is(.text-blue-500,.text-blue-600,.text-blue-700) {color:var(--accent)!important}
body:is([data-theme="finance"],[data-theme="gathering"],[data-theme="hanji"]) :is(.text-blue-200,.text-blue-300) {color:#fff3df!important}
body:is([data-theme="finance"],[data-theme="gathering"],[data-theme="hanji"]) :is(.border-blue-100,.border-blue-200,.border-blue-300,.border-blue-400,.border-blue-600) {border-color:var(--accent-line)!important}
body[data-theme="finance"] .app-header {background:var(--c-surface)!important;color:var(--c-text-1);border-bottom:1px solid var(--c-line-2);padding-top:16px;padding-bottom:16px;box-shadow:none}
body[data-theme="finance"] .app-header .text-blue-200 {color:var(--c-text-4)!important}
body[data-theme="finance"] .app-header button {background:var(--accent-light)!important}
body[data-theme="gathering"] .app-header {background:#21563f!important;border-radius:0 0 28px 28px;padding:18px 16px}
body[data-theme="gathering"] .app-header button {background:#16412e!important;color:#fff!important}
body[data-theme="gathering"] .app-header .text-blue-200 {color:#fff3df!important}
body[data-theme="gathering"] :is(.rounded-xl,.rounded-2xl) {border-radius:22px}
body[data-theme="hanji"] .app-header {background:transparent!important;color:var(--c-text-1);box-shadow:none;border-bottom:1px solid var(--c-line-3);padding:18px 16px}
body[data-theme="hanji"] .app-header .text-blue-200 {color:var(--c-text-3)!important}
body[data-theme="hanji"] .app-header button {background:var(--accent-light)!important}
body[data-theme="hanji"] :is(h1,h2,h3,.theme-hero-title) {font-family:Georgia,"Batang","바탕",serif;letter-spacing:-.04em}
body[data-theme="hanji"] :is(.rounded-xl,.rounded-2xl) {border-radius:8px;box-shadow:none}
body[data-theme="hanji"] .app-shell {background-image:repeating-linear-gradient(24deg,transparent,transparent 5px,#79644604 6px)!important}
.theme-welcome {padding:18px;margin-bottom:16px;border:1px solid var(--c-line-2);border-radius:20px;background:var(--c-surface)}
.theme-welcome small {display:block;color:var(--c-text-4);font-size:12px;margin-bottom:8px}
.theme-welcome strong {font-size:22px;line-height:1.4;color:var(--c-text-1)}
.theme-welcome p {font-size:13px;margin-top:8px;color:var(--c-text-3)}
body[data-theme="gathering"] .theme-welcome {border-radius:26px;background:linear-gradient(120deg,#fff2dd,#fffaf3)}
body[data-theme="hanji"] .theme-welcome {background:transparent;border-width:0 0 1px;border-radius:0;padding:16px 4px}
.chat-settings {padding:16px;background:var(--c-surface);border:1px solid var(--c-line-2);border-radius:16px}
.chat-settings h3 {font-size:16px;font-weight:800;margin-bottom:12px}
.chat-settings select,.chat-settings button,.receipt-review input,.receipt-review select {min-height:44px;border-radius:10px;border:1px solid var(--c-line-3);padding:8px 10px;font-size:14px;max-width:100%}
.chat-settings select {width:100%;background:var(--c-surface);color:var(--c-text-1)}
.chat-settings button {margin-top:10px;margin-right:8px;font-weight:700;background:var(--accent-light,var(--c-surface-2))}
.chat-settings p {font-size:12px;line-height:1.65;margin-top:10px;color:var(--c-text-3)}
.receipt-review {max-height:88dvh;overflow:auto;padding:20px;width:min(100%,460px);background:var(--c-surface);border-radius:20px}
.receipt-review h2 {font-size:22px;font-weight:800;margin-bottom:12px}
.receipt-review img {max-height:180px;width:100%;object-fit:contain;border-radius:12px;background:var(--c-surface-2)}
.receipt-review fieldset {border:1px solid var(--c-line-2);border-radius:12px;padding:12px;margin:12px 0}
.receipt-review label {display:block;font-size:13px;margin-top:8px;font-weight:700}
.receipt-review :is(input,select) {display:block;width:100%;background:var(--c-surface);color:var(--c-text-1)}
.receipt-review button {min-height:44px;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:700;margin:4px}
.receipt-review .primary {background:var(--accent,#2563eb);color:white}
.receipt-warning {font-size:12px;color:var(--c-warn-1);line-height:1.6;margin:8px 0}

/* Real concept layouts. Every number and control is backed by live app state. */
body[data-theme="photo"] {
  --accent:#344a40; --accent-strong:#203329; --accent-light:#e8ede6; --accent-line:#bcc8b9;
  --theme-primary:var(--accent); --theme-soft:var(--accent-light);
  --c-page:#f5f3ee; --c-surface:#fffefa; --c-surface-2:#f0eee7; --c-surface-3:#e8e8df;
  --c-text-1:#26362e; --c-text-2:#35463c; --c-text-3:#566356; --c-text-4:#6b7566; --c-text-5:#7b8474;
  --c-line-1:#eeeae0; --c-line-2:#dadccd; --c-line-3:#bfc5b6;
  --c-grad-1:#243a31; --c-grad-2:#344a40; --c-grad-3:#516454;
}
body[data-theme="photo"] .bg-blue-600 {background:var(--accent)!important}
body[data-theme="photo"] :is(.text-blue-500,.text-blue-600,.text-blue-700) {color:var(--accent)!important}
body[data-theme="photo"] :is(.bg-blue-50,.bg-blue-100) {background:var(--accent-light)!important}
.concept-app {--home-bg:#fff;--design-ink:#11254b;--design-muted:#657080;background:var(--home-bg)!important;color:var(--design-ink);font-weight:500;isolation:isolate}
.concept-app button {cursor:pointer;touch-action:manipulation}
.concept-app button:disabled {opacity:.5;cursor:wait}
.concept-app :is(input,select,textarea) {min-width:0;max-width:100%}
.concept-app :is(button,label) {-webkit-tap-highlight-color:transparent}
.concept-app button:focus-visible,.design-upload-label:focus-within {outline:3px solid var(--accent);outline-offset:3px}
.concept-content {min-height:0;padding:0!important;padding-bottom:calc(5.1rem + env(safe-area-inset-bottom,0px))!important}
.concept-content > :is(.space-y-3,.space-y-2) {padding:0 1rem 1.2rem}
.design-header {display:flex;align-items:center;gap:.6rem;min-height:4.1rem;padding:.9rem 1.3rem .65rem;flex-shrink:0;background:var(--home-bg);z-index:30}
.design-brand {display:flex;align-items:center;gap:.55rem;white-space:nowrap;font-size:1.64rem;font-weight:900;letter-spacing:-.065em;line-height:1;background:none;border:0;color:var(--design-ink)}
.design-brand > i {font-size:1.55rem;color:#3463e2}
.design-brand em {font-style:normal}
.design-brand-note {font-size:.65rem;line-height:1.5;padding-left:.65rem;border-left:1px solid #d8c9ba;color:#65513e;letter-spacing:-.03em}
.design-header-actions {display:flex;gap:.5rem;margin-left:auto;align-items:center}
.design-header-actions button {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;min-width:2rem;min-height:2.7rem;color:var(--design-ink);background:none;border:0}
.design-header-actions i {font-size:1.3rem}
.design-header-actions span {font-size:.59rem}
.font-size-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}
.font-size-options button {min-width:0;padding:.65rem .15rem!important;min-height:3rem}
.font-size-options button p {font-size:.73rem;white-space:nowrap;letter-spacing:-.05em}
.font-size-options button small {display:block;font-size:.57rem;color:var(--c-text-4);margin-top:.3rem;white-space:nowrap;letter-spacing:-.03em}
.design-seal {font-family:Georgia,serif;display:inline-grid;place-items:center;font-size:1.15rem;color:#fff8ec;background:#983d31;border-radius:3px;width:1.3rem;height:1.45rem;font-weight:400;margin-left:.05rem}
.design-home {position:relative}
.design-greeting {min-height:6.1rem;padding:1rem 1.5rem 1.05rem;background:#fff url('../assets/ui/finance-coast.png') center bottom/cover no-repeat;position:relative}
.design-greeting > div {position:relative;z-index:1}
.design-greeting p {font-size:.84rem;line-height:1.5;color:#677181;margin-bottom:.35rem}
.design-greeting h2 {font-size:1.03rem;line-height:1.47;letter-spacing:-.05em;font-weight:750;color:#273246}
.design-group-banner {display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.5rem .8rem;position:relative}
.design-group-copy {min-width:0;position:relative;z-index:1;max-width:100%}
.design-group-title {display:flex;align-items:center;gap:.6rem;color:var(--design-ink);text-align:left;max-width:100%;background:none;border:0}
.design-group-title h2 {font-size:1.38rem;line-height:1.35;font-weight:850;letter-spacing:-.06em;overflow-wrap:anywhere}
.design-group-title > i {font-size:.9rem;color:var(--design-muted)}
.design-group-meta {display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;font-size:.8rem;color:var(--design-muted);margin-top:.32rem}
.design-group-meta i {margin-right:.2rem}
.design-info {white-space:nowrap;border:0;border-radius:2rem;background:#edf3ff;font-size:.69rem;font-weight:650;color:#223a60;padding:.55rem .8rem;margin-left:.5rem}
.design-home-body {padding:0 1.25rem 1rem}
.design-summary {position:relative;display:flex;flex-direction:column;gap:.6rem;border-radius:.95rem;padding:1rem 1.2rem;color:white;background:linear-gradient(120deg,#1748c6,#2864dc);overflow:hidden;margin:.2rem 0 .75rem;isolation:isolate}
.design-summary:after {content:'';position:absolute;inset:30% -10% -65% 0;border-radius:50%;background:#ffffff0b;transform:rotate(-18deg);z-index:-1}
.design-summary p {font-size:.78rem;font-weight:550;line-height:1.5}
.design-summary strong {display:block;font-size:1.86rem;line-height:1.25;font-weight:850;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.design-total,.design-average {position:relative;z-index:1}
.design-average {border-top:1px solid #ffffff4d;padding-top:.45rem;max-width:67%}
.design-average strong {font-size:1.4rem;margin-top:.08rem}
.design-receipt-art {position:absolute;right:1.25rem;top:1.15rem;font-size:3.65rem;transform:rotate(12deg);color:#eaf1ff;filter:drop-shadow(0 6px 10px #0f359825)}
.design-summary .design-summary-note {font-size:.65rem;line-height:1.5;position:relative;z-index:1;opacity:.92}
.design-people {display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .8rem;border:1px solid #dfe7f3;border-radius:.9rem;margin:.7rem 0}
.design-people > button {font-size:.77rem;font-weight:750;white-space:nowrap}
.design-people-strip {display:flex;align-items:center;gap:.5rem;min-width:0;overflow-x:auto;scrollbar-width:none}
.design-people-strip > button {flex-shrink:0;display:flex;align-items:center;flex-direction:column;gap:.3rem;font-size:.77rem;max-width:4rem;overflow:hidden}
.design-people-strip > button > span:not(.design-avatar) {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.design-avatar {display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;border-radius:50%;background:#e2edff;color:#244fca;font-size:1rem;font-weight:750;flex-shrink:0}
.design-more-people {color:var(--accent);font-weight:700;min-width:2rem}
.design-quick-actions {display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.85rem 0 1rem}
.design-quick-actions button {border:0;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem .5rem;border-radius:.95rem;background:#eaf2ff;color:#1744b8;min-height:3.5rem;text-align:left}
.design-quick-actions button.primary {background:linear-gradient(120deg,#1244db,#1f58eb);color:white}
.design-quick-actions i {font-size:1.5rem}
.design-quick-actions span {font-size:.85rem;line-height:1.35;font-weight:800;letter-spacing:-.05em}
.design-quick-actions small {display:block;font-weight:400;font-size:.59rem;margin-top:.2rem}
.design-section-heading {display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.65rem}
.design-section-heading h3 {font-size:1rem;line-height:1.5;letter-spacing:-.04em;font-weight:800;min-width:0}
.design-section-heading h3 > i {display:none}
.design-section-heading button {font-size:.7rem;color:var(--accent);white-space:nowrap}
.design-section-heading button i {font-size:.6rem;margin-left:.2rem}
.design-expense-rows {border:1px solid #dce4ef;border-radius:1rem;padding:0 .85rem;background:#ffffffa6}
.design-expense-row {width:100%;display:flex;align-items:center;gap:.65rem;padding:.8rem 0;border:0;border-bottom:1px solid var(--c-line-2);text-align:left}
.design-expense-row:last-child {border-bottom:0}
.design-expense-icon {display:inline-grid;place-items:center;width:2.3rem;height:2.4rem;border-radius:.6rem;background:#eaf1ff;color:#2359d9;font-size:1.1rem;flex-shrink:0}
.design-expense-copy {min-width:0;flex:1}
.design-expense-copy strong {display:block;font-size:.83rem;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.5}
.design-expense-copy small {display:block;font-size:.65rem;color:var(--design-muted);line-height:1.5;margin-top:.18rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.design-expense-row > b {font-size:.86rem;white-space:nowrap;letter-spacing:-.035em;font-weight:800}
.design-expense-row > i {font-size:.68rem;color:#7c8792}
.design-empty {padding:.9rem .3rem;font-size:.8rem;color:var(--design-muted);line-height:1.6;text-align:center}
.design-member-list {margin:1rem 0}
.design-member-row {display:flex;align-items:center;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--c-line-2)}
.design-member-row > div {flex:1;min-width:0}
.design-member-row strong {font-size:.93rem;overflow-wrap:anywhere}
.design-member-row small {display:block;font-size:.66rem;margin-top:.2rem;color:var(--design-muted);line-height:1.5}
.design-member-row > b {font-size:1rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.design-member-row .receiving {color:var(--accent)}
.design-receipt-button {display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;padding:1rem;border:0;background:var(--accent);color:white;border-radius:1.3rem;margin:1rem 0 .3rem;min-height:4rem}
.design-receipt-button > i {font-size:1.7rem}
.design-receipt-button > i:last-child {font-size:2rem;transform:rotate(12deg);opacity:.85}
.design-receipt-button span {font-size:1.18rem;font-weight:800;letter-spacing:-.035em;text-align:center;line-height:1.3}
.design-receipt-button small {display:block;font-size:.68rem;font-weight:400;margin-top:.35rem}
.design-share-button {display:flex;width:100%;align-items:center;justify-content:center;gap:.7rem;padding:.85rem 1rem;border:0;border-radius:.7rem;background:var(--accent);color:#fffaf0;font-size:1.1rem;font-weight:700;margin:1rem 0 .4rem;min-height:3.3rem;line-height:1.35}
.design-share-button i {font-size:1.35rem}
.design-share-hint {font-size:.7rem;text-align:center;line-height:1.6;color:var(--design-muted)}
.design-rounding {font-size:.7rem;color:var(--design-muted);line-height:1.6;margin:.8rem 0}
.design-footer-art {height:3.7rem;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;margin-top:-.5rem;pointer-events:none}
.has-custom-media {position:relative;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;isolation:isolate}
.has-custom-media:before {content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--home-bg) 0%,color-mix(in srgb,var(--home-bg) 85%,transparent) 35%,transparent 85%),linear-gradient(0deg,var(--home-bg),transparent 50%);z-index:0;pointer-events:none}
.design-footer-art.has-custom-media {height:5.5rem}
.design-footer-art.has-custom-media:before {background:linear-gradient(180deg,var(--home-bg),transparent 50%)}
.design-subpage-title {display:flex;align-items:center;gap:.9rem;padding:1rem 1.3rem 1.1rem}
.design-subpage-title button {min-width:2rem;min-height:2.5rem;font-size:1.1rem}
.design-subpage-title h2 {font-size:1.3rem;font-weight:800;letter-spacing:-.05em}
.design-result {padding:1rem 1.3rem}
.design-page-heading {margin:.1rem 0 1.1rem}
.design-page-heading p {font-size:.75rem;color:var(--design-muted);margin-bottom:.25rem}
.design-page-heading h2 {font-size:1.75rem;font-weight:850;letter-spacing:-.055em;line-height:1.4}
.design-page-heading > span {display:block;margin-top:.2rem;font-size:.85rem;color:var(--design-muted)}
.design-export-actions {display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.8rem}
.design-export-actions button {padding:.65rem .25rem;min-height:2.8rem;border:1px solid var(--c-line-2);background:var(--c-surface);border-radius:.6rem;font-size:.72rem}
.design-export-actions i {margin-right:.2rem}
.design-detail-options {margin:.3rem 1.3rem 1.2rem;padding:1rem;border:1px solid var(--c-line-2);border-radius:.8rem;font-size:.8rem}
.design-detail-options h3 {font-weight:700;margin-bottom:.6rem}
.design-detail-options label {display:block;margin:.6rem 0}
.design-detail-options input {margin-right:.5rem}
.design-detail-options button {display:block;padding:.65rem 0;color:var(--accent);font-weight:650}
.concept-app .app-tabbar {background:var(--home-bg)!important;min-height:4rem;border-top:1px solid var(--c-line-2);box-shadow:none;gap:.6rem;padding:0 .75rem env(safe-area-inset-bottom,0px)}
.concept-app .app-tabbar button {margin:.3rem 0;border:0!important;background:transparent;position:relative;font-size:.8rem!important;font-weight:650;padding:.4rem .2rem;gap:.35rem;min-height:3.2rem;color:var(--design-muted)}
.concept-app .app-tabbar button > i {font-size:1.3rem;line-height:1.25}
.concept-app .app-tabbar button[aria-current="page"] {color:var(--accent);background:var(--accent-light);border-radius:.85rem}
.design-media-settings {padding:1rem;background:var(--c-surface);border:1px solid var(--c-line-2);border-radius:1rem}
.design-media-settings h3 {font-size:1rem;font-weight:800}
.design-media-settings > p {font-size:.75rem;color:var(--c-text-3);line-height:1.6;margin:.5rem 0}
.design-media-slot {margin-top:1rem}
.design-media-slot h4 {font-size:.85rem;font-weight:700;margin-bottom:.5rem}
.design-media-slot h4 span {font-weight:400;font-size:.7rem;color:var(--c-text-4);margin-left:.3rem}
.design-media-preview {position:relative;height:5rem;border-radius:.6rem;overflow:hidden;background:var(--home-bg);border:1px solid var(--c-line-2)}
.design-media-preview img {width:100%;height:100%;object-fit:cover}
.design-media-preview:after {content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--home-bg),transparent 80%);pointer-events:none}
.design-media-preview > span {display:block;text-align:center;padding:1.4rem .5rem;font-size:.7rem}
.design-upload-label,.design-media-slot > button {display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .8rem;margin:.5rem .35rem 0 0;border:1px solid var(--c-line-3);border-radius:.5rem;font-size:.75rem;cursor:pointer}
.design-upload-label {background:var(--accent-light);color:var(--accent);position:relative}
.design-upload-label input {position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.design-media-slot > button:disabled {cursor:default;opacity:.4}
/* 2: warm illustrated group outing. */
body[data-theme="gathering"] .concept-app {--home-bg:#fcf5eb;--design-ink:#214735;--design-muted:#736c5e}
body[data-theme="gathering"] .design-brand {font-weight:950;color:#214735;letter-spacing:-.075em}
body[data-theme="gathering"] .design-brand em {color:#e6632c}
body[data-theme="gathering"] .design-group-banner {margin:.2rem .6rem 0;padding:1.1rem 1.1rem 1.45rem;min-height:8.2rem;border-radius:1.4rem;background:#fff0d9 url('../assets/ui/gathering-coast.png') center/cover no-repeat;align-items:flex-start}
body[data-theme="gathering"] .design-group-copy {max-width:74%}
body[data-theme="gathering"] .design-group-title {gap:.35rem}
body[data-theme="gathering"] .design-group-title > span {font-size:1.65rem;transform:rotate(-12deg)}
body[data-theme="gathering"] .design-group-title h2 {font-size:1.43rem}
body[data-theme="gathering"] .design-group-meta {font-size:.68rem;margin-top:.65rem;gap:.35rem}
body[data-theme="gathering"] .design-group-meta > :is(span,button) {background:#fffaf0de;border:1px solid #f1d9bb;border-radius:2rem;padding:.4rem .65rem;color:#655543}
body[data-theme="gathering"] .design-home-body {padding:0 .9rem .5rem}
body[data-theme="gathering"] .design-people {border:0;padding:0 .6rem;margin:-.8rem 0 .85rem;position:relative;z-index:1;justify-content:center}
body[data-theme="gathering"] .design-people-strip {gap:.6rem;justify-content:center;width:100%;padding:.1rem 0}
body[data-theme="gathering"] .design-people-strip > button {width:18%;max-width:4.5rem;flex-shrink:1;font-size:.83rem;font-weight:700}
body[data-theme="gathering"] .design-avatar.monogram {width:3.3rem;height:3.3rem;background:none;border:0;overflow:visible;filter:drop-shadow(0 2px 3px #5b42250b)}
body[data-theme="gathering"] .design-avatar.monogram text {font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif;letter-spacing:-.04em}
body[data-theme="gathering"] .design-summary {flex-direction:row;align-items:center;gap:1rem;background:linear-gradient(110deg,#2f694d,#21573c);border-radius:1.35rem;padding:1rem 1.1rem;margin:.5rem 0 .7rem}
body[data-theme="gathering"] .design-total,body[data-theme="gathering"] .design-average {flex:1;min-width:0}
body[data-theme="gathering"] .design-total p i {color:#ead496;margin-right:.3rem}
body[data-theme="gathering"] .design-summary p {font-size:.75rem}
body[data-theme="gathering"] .design-summary strong {font-size:1.58rem;white-space:nowrap;margin-top:.3rem}
body[data-theme="gathering"] .design-average {border-top:0;border-left:1px solid #ffffff40;padding:0 0 0 1rem;max-width:none}
body[data-theme="gathering"] .design-average strong {background:#fff4df;color:#d75824;border-radius:.7rem;padding:.15rem .5rem;text-align:center}
body[data-theme="gathering"] .design-summary-note {display:none}
.design-progress {display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.6rem .7rem;border-radius:2rem;background:#f1e7da;margin:.7rem 0 .9rem}
.design-progress button {display:flex;align-items:center;gap:.4rem;font-size:.75rem;white-space:nowrap;color:#746b60;font-weight:700}
.design-progress button b {display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#ded8cf;color:#8d8173}
.design-progress button:first-child b {background:#42745a;color:white}
.design-progress .current {color:#db602b}
.design-progress .current b {background:#ee7842;color:white}
.design-progress > span {height:1px;flex:1;background:#cbbdaa;max-width:2rem}
body[data-theme="gathering"] .design-expenses {background:#fffaf3;border:1px solid #f4e7d8;box-shadow:0 3px 8px #51341208;border-radius:1.2rem;padding:.8rem .85rem}
body[data-theme="gathering"] .design-section-heading {padding-bottom:.55rem;border-bottom:1px solid #e6dcd0;margin-bottom:0}
body[data-theme="gathering"] .design-section-heading h3 > i {display:inline;margin-right:.3rem}
body[data-theme="gathering"] .design-expense-rows {border:0;padding:0;background:none}
body[data-theme="gathering"] .design-expense-icon {background:#ffe5d3;color:#d56336}
body[data-theme="gathering"] .row-1 .design-expense-icon {background:#e8e9cf;color:#74804d}
body[data-theme="gathering"] .design-expense-row {padding:.65rem 0}
body[data-theme="gathering"] .design-receipt-button {background:linear-gradient(105deg,#ed8041,#e96730);border-radius:1.6rem;padding:.9rem .6rem;margin:.9rem 0 .2rem}
body[data-theme="gathering"] .design-footer-art {background-image:url('../assets/ui/gathering-train.png');height:3.6rem;background-size:100% auto;background-position:center 62%;margin-top:-.6rem}
/* 4: stationery, ruled rows and hanji. */
body[data-theme="hanji"] .concept-app {--home-bg:#f7efdf;--design-ink:#352a20;--design-muted:#806c56;background:#f7efdf url('../assets/ui/hanji-paper.png') center/100% 100% no-repeat!important}
body[data-theme="hanji"] .design-header {background:transparent;padding-top:1.1rem;padding-bottom:.7rem}
body[data-theme="hanji"] .design-brand {font-family:Georgia,'Batang','바탕',serif;font-size:1.8rem;font-weight:700}
body[data-theme="hanji"] .design-header-actions {gap:.3rem}
body[data-theme="hanji"] .design-hanji-caption {position:absolute;top:-1.6rem;font-size:.78rem;color:#806c56;white-space:nowrap}
body[data-theme="hanji"] .design-group-banner {padding:2.1rem 1.6rem 1.2rem;min-height:7.5rem;align-items:flex-end}
body[data-theme="hanji"] .design-group-copy {border-left:3px solid #a14332;padding-left:.85rem;max-width:90%}
body[data-theme="hanji"] .design-group-title h2 {font-family:Georgia,'Batang','바탕',serif;font-size:1.9rem;font-weight:800;line-height:1.25}
body[data-theme="hanji"] .design-group-meta {font-size:.94rem;color:#6e5d49;margin-top:.35rem}
body[data-theme="hanji"] .design-group-meta i {display:none}
body[data-theme="hanji"] .design-home-body {padding:0 1.65rem 1rem}
body[data-theme="hanji"] .design-summary {flex-direction:row;gap:.9rem;border-radius:0;border-top:1px solid #9e8c73;border-bottom:1px solid #9e8c73;background:none;color:#382e24;margin:.35rem 0 1.2rem;padding:1rem 0 1.1rem;overflow:visible}
body[data-theme="hanji"] .design-summary:after {display:none}
body[data-theme="hanji"] .design-total,body[data-theme="hanji"] .design-average {flex:1;min-width:0}
body[data-theme="hanji"] .design-summary p {font-family:Georgia,'Batang','바탕',serif;font-size:.79rem;font-weight:650;letter-spacing:.02em}
body[data-theme="hanji"] .design-summary strong {font-family:Georgia,'Batang','바탕',serif;font-size:1.72rem;font-weight:700;letter-spacing:-.045em;white-space:nowrap;line-height:1.3;margin-top:.3rem;position:relative}
body[data-theme="hanji"] .design-summary strong:after {content:'';display:block;height:3px;background:#bd6d4b28;transform:rotate(-1deg);border-radius:30%}
body[data-theme="hanji"] .design-average {border-left:1px solid #b7a68c;border-top:0;max-width:none;padding:0 0 0 .85rem;color:#983d31}
body[data-theme="hanji"] .design-average p {color:#6f5c46;font-size:.7rem;letter-spacing:0}
body[data-theme="hanji"] .design-summary-note {display:none}
body[data-theme="hanji"] .design-member-list {margin:0 0 1.35rem}
body[data-theme="hanji"] .design-section-heading h3 {border-left:3px solid #a14332;padding-left:.7rem;font-family:Georgia,'Batang','바탕',serif;font-size:1.05rem;font-weight:650}
body[data-theme="hanji"] .design-member-row {border-bottom:1px solid #b7a58c85;padding:.7rem .2rem;gap:.65rem}
body[data-theme="hanji"] .design-avatar {background:#e9d9c2;color:#574737;width:1.8rem;height:1.8rem;font-size:.8rem;font-weight:500}
body[data-theme="hanji"] .design-member-row strong,body[data-theme="hanji"] .design-member-row > b {font-family:Georgia,'Batang','바탕',serif;font-size:1.05rem;font-weight:500}
body[data-theme="hanji"] .design-receipt-button.hanji-receipt {background:none;color:#44372b;border-top:1px solid #c7b59b;border-bottom:1px solid #c7b59b;border-radius:0;justify-content:flex-start;padding:.75rem 0;margin:.8rem 0}
body[data-theme="hanji"] .hanji-receipt > i {color:#983d31;font-size:1.5rem;transform:none}
body[data-theme="hanji"] .hanji-receipt span {text-align:left;font-weight:500;font-family:Georgia,'Batang','바탕',serif;font-size:1.02rem}
body[data-theme="hanji"] .hanji-receipt small {font-family:system-ui,sans-serif;color:#8e7b60;font-size:.67rem}
body[data-theme="hanji"] .hanji-receipt > i:last-child {margin-left:auto;background:#ead8be;border-radius:50%;padding:.45rem}
body[data-theme="hanji"] .design-share-button {font-family:Georgia,'Batang','바탕',serif;border-radius:.65rem;background:#993d30;letter-spacing:.1em;font-weight:500;font-size:1.15rem}
body[data-theme="hanji"] .design-footer-art {height:3.6rem;background-image:url('../assets/ui/hanji-paper.png');background-size:100% auto;background-position:center bottom}
body[data-theme="hanji"] .app-tabbar {background:#f6eddddc!important;border-color:#ad9c84;backdrop-filter:blur(10px)}
body[data-theme="hanji"] .app-tabbar button[aria-current="page"] {background:none}
body[data-theme="hanji"] .app-tabbar button[aria-current="page"]:after {content:'';position:absolute;left:10%;right:10%;height:2px;border-radius:2px;background:#983d31;bottom:0}
/* Photography outing: large photo, editorial framing and muted forest tones. */
body[data-theme="photo"] .concept-app {--home-bg:#f6f4ef;--design-ink:#26362e;--design-muted:#6f776c}
body[data-theme="photo"] .design-brand {font-size:1.52rem;font-weight:750;letter-spacing:-.05em}
body[data-theme="photo"] .design-brand > i {color:#344a40}
body[data-theme="photo"] .design-group-banner {margin:.3rem .9rem .6rem;padding:1.2rem 1rem 1rem;min-height:10rem;align-items:flex-end;border-radius:.3rem;background:#e8e7df url('../assets/ui/photo-coast.png') center/cover no-repeat;box-shadow:0 3px 12px #2a3a3010;border:5px solid #fffdf8}
body[data-theme="photo"] .design-group-banner:before {content:'';position:absolute;inset:0;background:linear-gradient(0deg,#f7f3e8ed,transparent 95%)}
body[data-theme="photo"] .design-eyebrow {font-family:Georgia,serif;font-size:.62rem;letter-spacing:.12em;color:#344a40;margin-bottom:.4rem}
body[data-theme="photo"] .design-group-title h2 {font-size:1.6rem;line-height:1.25;font-weight:800}
body[data-theme="photo"] .design-group-meta {font-size:.72rem;color:#465848;margin-top:.6rem}
body[data-theme="photo"] .design-group-meta > span {padding-right:.5rem;border-right:1px solid #7c8d7260}
body[data-theme="photo"] .design-home-body {padding:0 1.2rem 1rem}
body[data-theme="photo"] .design-people {border:0;padding:.3rem 0;margin:.1rem 0 .7rem}
body[data-theme="photo"] .design-people-strip {width:100%;justify-content:space-between}
body[data-theme="photo"] .design-avatar {background:#e1e7dd;color:#344a40}
body[data-theme="photo"] .design-summary {background:#344a40;border-radius:.4rem;flex-direction:row;gap:1rem;padding:.9rem 1rem}
body[data-theme="photo"] .design-total,body[data-theme="photo"] .design-average {flex:1;min-width:0}
body[data-theme="photo"] .design-summary strong {font-family:Georgia,serif;font-size:1.52rem;white-space:nowrap;margin-top:.3rem;letter-spacing:-.04em}
body[data-theme="photo"] .design-summary p {font-size:.72rem;color:#e4e9de}
body[data-theme="photo"] .design-average {padding:0 0 0 1rem;border-left:1px solid #93a18c;border-top:0;max-width:none;color:#f2d0a0}
body[data-theme="photo"] .design-summary-note {display:none}
body[data-theme="photo"] .design-expenses {margin-top:1.1rem}
body[data-theme="photo"] .design-section-heading h3 {font-size:.95rem}
body[data-theme="photo"] .design-expense-rows {border-radius:.4rem;border-color:#d8d9cb;background:#fffdf8}
body[data-theme="photo"] .design-expense-icon {background:#e9eadf;color:#52674f;border-radius:.25rem}
body[data-theme="photo"] .design-receipt-button {background:#354c3f;border-radius:.4rem;padding:.8rem;min-height:3.7rem}
.design-share-link {display:block;width:100%;padding:.8rem;text-align:center;font-size:.8rem;font-weight:650;color:var(--accent)}
.design-share-link i {margin-left:.5rem}
@media(max-width:359px) {
  .design-header {padding-left:1rem;padding-right:1rem}.design-brand{font-size:1.45rem}.design-brand-note{display:none}
  .design-home-body{padding-left:1rem;padding-right:1rem}.design-summary strong{font-size:1.6rem}
  body[data-theme="gathering"] .design-summary strong,body[data-theme="hanji"] .design-summary strong{font-size:1.35rem}
  .design-expense-row{gap:.4rem}.design-expense-row>b{font-size:.75rem}.design-quick-actions small{font-size:.55rem}
}
@media(prefers-reduced-motion:reduce) {.concept-app *{scroll-behavior:auto!important;transition:none!important}}
body:is([data-font-size="large"],[data-font-size="xlarge"]):is([data-theme="gathering"],[data-theme="hanji"],[data-theme="photo"]) .design-summary {flex-direction:column;align-items:stretch;gap:.7rem}
body:is([data-font-size="large"],[data-font-size="xlarge"]):is([data-theme="gathering"],[data-theme="hanji"],[data-theme="photo"]) .design-average {border-left:0;border-top:1px solid #998b7655;padding:.65rem 0 0;max-width:none}
body:is([data-font-size="large"],[data-font-size="xlarge"]) .design-summary strong {white-space:normal;overflow-wrap:anywhere}
body:is([data-theme="gathering"],[data-theme="hanji"],[data-theme="photo"]) .design-summary {flex-wrap:wrap}
body:is([data-theme="gathering"],[data-theme="hanji"],[data-theme="photo"]) .design-summary .design-summary-note {display:block;width:100%;flex-shrink:0;font-size:.66rem}
@media(min-width:700px) {
  .app-shell.concept-app {max-width:1100px!important}
  .concept-app .app-tabbar {position:absolute;left:0;right:auto;top:0;bottom:0;width:5.5rem;max-width:5.5rem;margin:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.7rem;padding:5.2rem .5rem 1rem;border-top:0;border-right:1px solid var(--c-line-2);background:var(--home-bg)!important;z-index:40}
  .concept-app .app-tabbar:before {content:'N빵';position:absolute;top:1.5rem;left:0;right:0;text-align:center;font-size:1.15rem;font-weight:850;letter-spacing:-.06em;color:var(--accent)}
  .concept-app .app-tabbar button {flex:0 0 auto;margin:0;min-height:4.5rem;padding:.8rem .2rem;gap:.5rem;border-radius:.8rem;font-size:.75rem!important}
  .concept-app .app-tabbar button > i {font-size:1.4rem}
  body[data-theme="hanji"] .concept-app .app-tabbar button[aria-current="page"]:after {left:0;right:auto;top:20%;bottom:20%;width:3px;height:auto}
  .concept-app .design-header {margin-left:5.5rem;padding-left:1.5rem;padding-right:1.5rem}
  .concept-app .concept-content {margin-left:5.5rem;padding-bottom:1rem!important}
  .design-home {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:1.5rem;align-items:start;padding:1.2rem 1.5rem}
  .design-greeting {grid-column:1;grid-row:1;padding:2rem 1.2rem;min-height:13rem;border-radius:1.3rem;background-size:cover}
  .design-greeting h2 {font-size:1.32rem;line-height:1.6}
  .design-greeting p {font-size:.93rem}
  .design-home > .design-group-banner {grid-column:1;grid-row:2;padding:1.5rem .2rem}
  .design-home > .design-home-body {grid-column:2;grid-row:1 / span 3;padding:0}
  .design-home > .design-footer-art {grid-column:1;grid-row:3;width:100%;height:6rem;margin:0}
  body[data-theme="gathering"] .design-home > .design-group-banner,body[data-theme="photo"] .design-home > .design-group-banner {grid-row:1 / span 2;margin:0;min-height:20rem;padding:1.6rem;align-items:flex-start;background-position:70% center}
  body[data-theme="gathering"] .design-group-title h2 {font-size:1.8rem}
  body[data-theme="gathering"] .design-group-copy {max-width:95%}
  body[data-theme="gathering"] .design-home .design-people {margin:0 0 1rem}
  body[data-theme="gathering"] .design-home > .design-footer-art {height:7rem;background-size:cover}
  body[data-theme="hanji"] .design-home > .design-group-banner {grid-row:1;min-height:13rem;padding:2.5rem .6rem;background:transparent}
  body[data-theme="hanji"] .design-group-title h2 {font-size:2.5rem}
  body[data-theme="hanji"] .design-home > .design-footer-art {grid-row:2;height:12rem;background-size:100% auto}
  body[data-theme="photo"] .design-home > .design-group-banner {min-height:25rem;align-items:flex-end;background-position:70% center}
  .design-result {max-width:760px;margin:auto}
  .concept-content > :is(.space-y-3,.space-y-2),.design-subpage-title {max-width:820px;margin-left:auto;margin-right:auto}
  .design-detail-options {max-width:720px;margin-left:auto;margin-right:auto}
}
@media(max-width:699px) {
  .app-header .header-action-label {display:none}
  .app-header button:has(.header-action-label) {width:2.25rem;min-height:2.25rem;padding:.5rem;justify-content:center}
  .app-header button:has(.header-action-label) > i {font-size:1rem}
  .design-header-actions {gap:.25rem}
  .design-header-actions button {min-width:1.85rem}
  .design-header-actions i {font-size:1.2rem}
}
@media(min-width:700px) and (max-height:600px) {
  .concept-app .app-tabbar {padding-top:2.8rem;padding-bottom:.2rem;gap:.15rem}
  .concept-app .app-tabbar:before {top:.8rem;font-size:1rem}
  .concept-app .app-tabbar button {flex:1 1 0;min-height:0;max-height:3rem;padding:.25rem .1rem;gap:.1rem;font-size:.7rem!important}
  .concept-app .app-tabbar button > i {font-size:1.15rem}
}
@media(max-width:399px) {
  .concept-app .app-tabbar {gap:.1rem;padding-left:.3rem;padding-right:.3rem}
  .concept-app .app-tabbar button {font-size:.7rem!important;padding-left:0;padding-right:0;white-space:nowrap}
}
@media(max-width:699px),(pointer:coarse) {
  .design-header-actions button[aria-label="설정"] > span {display:none}
}