/* =========================================================
   소비의온도 — 공식 홈페이지 (탭 전환 / 멀티뷰)
   ① 일관성(단일 토큰 + 모든 탭 동일 형식 배경) ② 트렌디
   ③ 웃김 ④ 팩트만 · 라이트/다크 토글(페이지+폰목업 동시)
   ========================================================= */

/* ---- 트렌디 무료 디스플레이체: 지마켓 산스 ---- */
@font-face{font-family:'GmarketSans';font-weight:300;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansLight.woff2') format('woff2')}
@font-face{font-family:'GmarketSans';font-weight:500;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansMedium.woff2') format('woff2')}
@font-face{font-family:'GmarketSans';font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff2') format('woff2')}

/* =========================================================
   디자인 토큰
   ========================================================= */
:root{
  --ff-display:'GmarketSans','Pretendard',sans-serif;
  --ff-body:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --m-me:#E3A7B4; --m-2:#B1D2B4; --m-3:#E2CBA0; --m-4:#C29CCB; --m-sum:#5692C1;
  --pos:#3F9985; --neg:#D9778C; --on:#0F0F11;
  --t0:#B0D8E5; --t1:#A8E0CC; --t2:#C8DCAE; --t3:#F5DC8E;
  --t4:#E0B080; --t5:#C4856C; --t6:#CC8494; --t7:#FF8FAB;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:100px;

  --fs-display:clamp(29px,3.8vw,44px);
  --fs-h2:clamp(27px,3.4vw,40px);
  --fs-h3:18px;
  --fs-lead:clamp(16px,1.9vw,19px);
  --fs-body:16px; --fs-sm:14px; --fs-xs:13px;

  --nav-h:64px;
  --maxw:1140px;
}
:root,[data-theme="light"]{
  --bg:#FAFAFA;
  --surface:#fff; --surface-2:#F2F2F7;
  --text:#1A1A2E; --text-sub:#4A4A5A; --text-mute:#8A8A95;
  --line:#E8E8EE; --line-soft:#F0F0F4;
  --brand:#5FA8B5; --brand-deep:#3C7E8A; --brand-soft:#EAF4F6;
  --shadow:0 18px 48px -22px rgba(30,40,70,.28);
  --shadow-sm:0 8px 22px -12px rgba(30,40,70,.20);
  --shadow-lg:0 40px 90px -36px rgba(30,40,70,.42);
  --ph-bg:#FAFAFA; --ph-card:#fff; --ph-text:#1A1A2E;
  --ph-sub:#9096A4; --ph-line:#ECECEF; --ph-bar:#5FA8B5;
  --glow:15%;
  /* 섹션 포인트 잉크(글자용·읽기 가능한 톤) — 섹션당 1색 */
  --pt-teal:#2F7F8C; --pt-rose:#C75B7E; --pt-sage:#4E8C6A;
  --pt-blue:#3D6FA8; --pt-lilac:#8A5BA0;
}
[data-theme="dark"]{
  --bg:#0B0B0D;
  --surface:#17171B; --surface-2:#202024;
  --text:#ECECF0; --text-sub:#B6B6BE; --text-mute:#7A7A84;
  --line:#2A2A30; --line-soft:#202024;
  --brand:#8FCAD5; --brand-deep:#B0E0E8; --brand-soft:#14201F;
  --shadow:0 18px 48px -22px rgba(0,0,0,.6);
  --shadow-sm:0 8px 22px -12px rgba(0,0,0,.5);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.75);
  --ph-bg:#0F0F11; --ph-card:#1A1A1E; --ph-text:#ECECF0;
  --ph-sub:#6E6E78; --ph-line:#2C2C30; --ph-bar:#8FCAD5;
  --glow:12%;
  /* 다크용 포인트 잉크(밝게) */
  --pt-teal:#8FCAD5; --pt-rose:#F4A8C6; --pt-sage:#A6DABA;
  --pt-blue:#A8C8F0; --pt-lilac:#D6B8E8;
}

/* =========================================================
   리셋 / 베이스
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}
html{background:var(--bg);overscroll-behavior:none}
body{font-family:var(--ff-body);background:var(--bg);color:var(--text);line-height:1.62;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:background .4s ease,color .4s ease}
/* 테마 전환 시 전체를 같은 속도로 부드럽게 변경(요소별 트랜지션 시간차로 인한 순차 변경 방지). 토글 thumb 슬라이드는 자체 transition 유지 */
html.theme-switching *:not(.tt-thumb),html.theme-switching *:not(.tt-thumb)::before,html.theme-switching *:not(.tt-thumb)::after{transition:background-color .35s ease,background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,fill .35s ease,stroke .35s ease !important}
/* 모바일(≤600px)은 테마 전환을 시간차 없이 즉시(데스크탑만 부드러운 0.35s 전환 유지) */
@media(max-width:600px){html.theme-switching *:not(.tt-thumb),html.theme-switching *:not(.tt-thumb)::before,html.theme-switching *:not(.tt-thumb)::after{transition:none !important}}
/* 복사/선택 차단(메뉴·표·모든 텍스트 전수). 입력칸만 예외로 선택 허용 */
input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
::selection{background:color-mix(in srgb,var(--brand) 35%,transparent)}
/* 포커스: 마우스/탭 클릭 시 파란 기본 아웃라인 전역 제거, 키보드 탐색만 포인트색 */
:focus{outline:none}
:focus-visible{outline:2px solid color-mix(in srgb,var(--pt,var(--brand)) 70%,transparent);outline-offset:2px;border-radius:6px}
mark{background:color-mix(in srgb,var(--t3) 60%,transparent);color:inherit;border-radius:3px;padding:0 2px;font-weight:800}
[data-theme="dark"] mark{color:#fff}
.nb{white-space:nowrap}
#temp .block-lead{max-width:none}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:800;letter-spacing:-.01em;
  color:var(--pt,var(--text));background:color-mix(in srgb,var(--pt,var(--g1,var(--brand))) 13%,var(--surface));
  border:1px solid color-mix(in srgb,var(--pt,var(--g1,var(--brand))) 26%,transparent);padding:6px 15px;border-radius:var(--r-pill)}
.eyebrow i{font-style:normal;font-size:1.05em;line-height:1;display:inline-flex;align-items:center}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  font-size:var(--fs-sm);padding:12px 20px;border-radius:var(--r-pill);
  transition:transform .2s,box-shadow .2s,background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn-primary:hover{transform:translateY(-2px)}
[data-theme="dark"] .btn-primary{color:#0B0B0D}

/* =========================================================
   네비 + 탭바 (탭 전환)
   ========================================================= */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4);padding:0 var(--s6);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line-soft)}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:700;font-size:18px;letter-spacing:-.01em;cursor:default;flex:none}
.nav-brand img{width:32px;height:32px;border-radius:9px;box-shadow:var(--shadow-sm)}
.tabbar{position:relative;display:flex;gap:var(--s3);background:none;border:none;padding:0}
.tab{position:relative;z-index:1;font-size:var(--fs-body);font-weight:800;color:var(--text-sub);
  padding:11px 30px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface);
  transition:color .2s,background .25s,border-color .2s,transform .15s;white-space:nowrap}
@media(hover:hover){.tab:hover{border-color:var(--brand);color:var(--brand-deep);transform:translateY(-1px)}}
.tab.on{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));border-color:transparent}
[data-theme="dark"] .tab.on{color:#0B0B0D}
.tab-ink{display:none}
.tab:focus-visible{outline:none}
.nav-right{display:flex;align-items:center;gap:var(--s3);flex:none}

/* 테마 토글 */
.theme-toggle{padding:0}
.tt-track{display:flex;align-items:center;width:52px;height:28px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--brand) 20%,var(--surface-2));border:1px solid color-mix(in srgb,var(--brand) 34%,var(--line));padding:3px;transition:.3s}
.tt-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);display:flex;align-items:center;
  justify-content:center;font-size:12px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.4,1.4,.5,1)}
[data-theme="dark"] .tt-thumb{transform:translateX(24px)}
.nav-burger{display:none}

@media(max-width:920px){
  .nav{gap:var(--s3);padding:0 var(--s4)}
  .nav-brand span{display:none}
  .tabbar{justify-content:center;overflow-x:auto;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tab{padding:8px 12px}
}
@media(max-width:420px){.tab{padding:7px 9px;font-size:var(--fs-xs)}}
/* 폰: nav 2줄 — 윗줄 브랜드(아이콘+소비의온도)+토글, 아랫줄 탭 풀폭 */
@media(max-width:560px){
  .nav{height:auto;flex-wrap:wrap;row-gap:var(--s3);padding-top:var(--s3);padding-bottom:var(--s3)}
  .nav-brand span{display:inline}
  .nav-right{order:2}
  .tabbar{order:3;flex-basis:100%;width:100%;justify-content:space-between;overflow-x:visible;padding:0 26px 0 16px}
}

/* =========================================================
   뷰 전환 + 배경 (모든 탭 동일 형식, 색만 다름)
   ========================================================= */
.stage{position:relative}
.view{display:none;min-height:calc(100vh - var(--nav-h));padding:var(--s8) var(--s6) var(--s8);
  background:
    radial-gradient(58% 46% at 12% 0%,color-mix(in srgb,var(--g1) var(--glow),transparent),transparent 70%),
    radial-gradient(52% 44% at 92% 5%,color-mix(in srgb,var(--g2) var(--glow),transparent),transparent 72%),
    radial-gradient(54% 40% at 90% 100%,color-mix(in srgb,var(--g1) var(--glow),transparent),transparent 72%),
    radial-gradient(50% 38% at 8% 99%,color-mix(in srgb,var(--g2) var(--glow),transparent),transparent 72%),
    var(--bg)}
.view.on{display:block;animation:viewIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.view[data-view="home"]{--g1:var(--brand);--g2:var(--m-me);padding-bottom:0}
.view[data-view="ledger"]{--g1:var(--m-2);--g2:var(--brand)}
.view[data-view="stat"]{--g1:var(--m-4);--g2:var(--m-sum)}
.view[data-view="talk"]{--g1:var(--m-3);--g2:var(--t7)}
.view[data-view="inquiry"]{--g1:var(--brand);--g2:var(--m-4)}
.vwrap{max-width:var(--maxw);margin:0 auto;width:100%}

/* 홈 내부 블록 간격 */
.block{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
.block-head{margin-bottom:36px} /* 글자→그림(비주얼) 여백 36px 통일(대표님 2026-07-03) */
.block-head.center{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.block-head.center .block-lead{margin-left:auto;margin-right:auto}
.block-head .eyebrow{margin-bottom:var(--s4)}
.block-title{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-h2);line-height:1.25;
  letter-spacing:-.02em;color:var(--text)}
.block-lead{font-size:var(--fs-lead);color:var(--text-sub);margin-top:var(--s4);line-height:1.7;max-width:580px}
.block-lead b,.hero-lead b,.grid-sub b,.fun-sub b,.sms-in b{color:var(--text);font-weight:800;border-radius:5px;padding:1px 5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 강조 칩: 글자는 검은색, 배경만 색(옅게). 색은 app.js가 페이지 전체 순서대로 6색을 돌려 지정 → 섹션마다 같은 색 반복 방지 */
.block-lead b.cb1,.hero-lead b.cb1,.grid-sub b.cb1,.fun-sub b.cb1{background:color-mix(in srgb,#E3A7B4 32%,transparent)}
.block-lead b.cb2,.hero-lead b.cb2,.grid-sub b.cb2,.fun-sub b.cb2,.sms-in b.cb2{background:color-mix(in srgb,#B1D2B4 40%,transparent)}
.block-lead b.cb3,.hero-lead b.cb3,.grid-sub b.cb3,.fun-sub b.cb3,.sms-in b.cb3{background:color-mix(in srgb,#E2CBA0 42%,transparent)}
.block-lead b.cb4,.hero-lead b.cb4,.grid-sub b.cb4,.fun-sub b.cb4{background:color-mix(in srgb,#9CC4D8 36%,transparent)}
.block-lead b.cb5,.hero-lead b.cb5,.grid-sub b.cb5,.fun-sub b.cb5{background:color-mix(in srgb,#C29CCB 34%,transparent)}
.block-lead b.cb6,.hero-lead b.cb6,.grid-sub b.cb6,.fun-sub b.cb6{background:color-mix(in srgb,#86CFC2 38%,transparent)}
.check-list li b{color:var(--pt,var(--brand-deep))!important}

/* =========================================================
   HERO (홈 첫 블록)
   ========================================================= */
.hero{display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:start}
.hero-copy{min-width:0}
.hero-copy .eyebrow{margin-bottom:var(--s5)}
.hero-title{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-display);line-height:1.12;
  letter-spacing:-.035em;color:var(--text)}
.hero-title .muted{color:var(--text-mute);font-weight:500}
.hero-title .grad{background:linear-gradient(110deg,var(--brand),var(--m-4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:var(--fs-lead);color:var(--text-sub);margin-top:var(--s5);max-width:560px;line-height:1.7}
.hero-cta{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap}
.stores{display:flex;gap:var(--s3)}
.store-btn{display:inline-flex;align-items:center;gap:10px;width:172px;height:52px;padding:0 18px;
  background:#000;color:#fff;border-radius:13px;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-sm)}
.store-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.store-btn svg{width:23px;height:23px;fill:#fff;flex:none}
.store-btn span{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.store-btn small{font-size:9px;font-weight:600;opacity:.82;letter-spacing:.04em;text-transform:uppercase}
.store-btn b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.hero-trust{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap;max-width:356px;font-size:var(--fs-sm);color:var(--text-sub)}
.hero-trust b{color:var(--text);font-weight:800}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}
.hero-visual{position:relative;display:flex;justify-content:center}
.hero-float{position:absolute;z-index:5;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:var(--fs-xs);font-weight:800;
  color:var(--text);box-shadow:var(--shadow);white-space:nowrap}
.hero-float b{color:var(--brand-deep)}
.hero-float .ic,.mock-float .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:color-mix(in srgb,var(--brand) 20%,var(--surface))}
.hero-float.f1{top:62px;right:calc(100% - 48px);animation:bob 5s ease-in-out infinite}
.hero-float.f2{bottom:80px;left:calc(100% - 48px);animation:bob 5.6s ease-in-out infinite .6s}
@keyframes bob{50%{transform:translateY(-12px)}}
@media(max-width:1080px){.hero-float{display:none}}

/* =========================================================
   폰 목업 (라이트/다크 = 앱 테마 그대로)
   ========================================================= */
.phone{position:relative;width:288px;background:#0a0a0c;border-radius:42px;padding:11px;box-shadow:var(--shadow-lg);flex:none}
[data-theme="dark"] .phone{box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px #26262c}
.phone-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:104px;height:24px;background:#0a0a0c;border-radius:0 0 16px 16px;z-index:6}
.phone-screen{background:var(--ph-bg);border-radius:32px;overflow:hidden;aspect-ratio:9/19.3;display:flex;flex-direction:column;transition:background .4s ease}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:10px 18px 4px;font-size:11px;font-weight:800;color:var(--ph-text)}
.ph-status-r{letter-spacing:1px;word-spacing:3px;font-size:9px}
.ph-appbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 14px 10px;background:var(--ph-bg)}
.ph-title{grid-column:2;text-align:center;font-weight:800;font-size:15px;color:var(--ph-text)}
.ph-title.left{grid-column:1;text-align:left;justify-self:start}
.ph-act{grid-column:3;justify-self:end;font-size:14px}
.ph-seg2{grid-column:1;justify-self:start;display:inline-flex;background:var(--ph-card);border:1px solid var(--ph-line);border-radius:var(--r-pill);padding:2px;font-size:9px;font-weight:800}
.ph-seg2 i{padding:3px 8px;border-radius:var(--r-pill);color:var(--ph-sub);font-style:normal}
.ph-seg2 i.on{background:var(--ph-bar);color:#fff}
[data-theme="dark"] .ph-seg2 i.on{color:var(--on)}
.ph-body{flex:1;overflow:hidden;padding:4px 14px 8px;display:flex;flex-direction:column;gap:9px}
.ph-chips{display:flex;justify-content:space-between;gap:2px}
.ph-chips .ph-chip{padding:4px 8px}
.ph-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:var(--ph-text);background:var(--ph-card);border:1px solid var(--ph-line);border-radius:var(--r-pill);padding:4px 9px}
.ph-chip i{width:7px;height:7px;border-radius:50%}
.ph-chip.sum{background:var(--m-sum);color:#fff;border-color:transparent}
.ph-net{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:16px;padding:13px}
.ph-net-lab{font-size:11px;font-weight:600;color:var(--ph-sub)}
.ph-net-big{display:block;font-family:var(--ff-display);font-weight:700;font-size:23px;color:var(--ph-text);margin:2px 0 9px}
.ph-net-big em{font-size:14px;font-style:normal;margin-left:1px}
.ph-net-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ph-text);padding:3px 0}
.ph-net-row b{color:var(--ph-text);font-weight:700}
.ph-net-row span,.ph-asset-row span{font-weight:600}
.ph-net-row b.pos{color:var(--pos)}.ph-net-row b.neg{color:var(--neg)}
.ph-asset{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:16px;padding:11px 13px}
.ph-asset-h{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.ph-asset-h b{font-size:12px}.ph-asset-h b.pos{color:var(--pos)}.ph-asset-h b.dq{color:var(--neg)}
.ph-asset-h small{font-size:9px;color:var(--ph-sub)}
.ph-asset-row{display:flex;justify-content:space-between;font-size:11px;color:var(--ph-text);padding:3px 0}
.ph-asset-row b{font-weight:700}
.ph-asset-row b.pos{color:var(--pos)}.ph-asset-row b.neg{color:var(--neg)}
.ph-month{text-align:center;font-size:12px;color:var(--ph-text);font-weight:600}
.ph-month b{font-weight:800}
.ph-io{display:flex;gap:6px}
.ph-io span{flex:1;text-align:center;font-size:10px;font-weight:800;padding:6px;border-radius:10px;background:var(--ph-card);border:1px solid var(--ph-line)}
.ph-io .io-in{color:var(--pos)}.ph-io .io-ex{color:var(--neg)}
.ph-tempbar{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:12px;background:color-mix(in srgb,var(--t4) 16%,var(--ph-card))}
.ph-tempbar .tb-emoji{font-size:13px}
.ph-tempbar .tb-deg{font-size:12px;font-weight:800;color:var(--ph-text)}
.ph-tempbar .tb-lv{font-size:10px;font-weight:800;color:var(--ph-sub)}
.ph-tempbar .tb-track{flex:1;height:5px;border-radius:5px;background:color-mix(in srgb,var(--t4) 30%,transparent);overflow:hidden}
.ph-tempbar .tb-track i{display:block;height:100%;background:var(--t4);border-radius:5px}
.ph-seg{display:flex;gap:3px;background:var(--ph-card);border:1px solid var(--ph-line);border-radius:11px;padding:3px}
.ph-seg.sm{width:120px;align-self:center}
.ph-seg i{flex:1;text-align:center;font-size:10px;font-weight:800;color:var(--ph-sub);padding:5px;border-radius:8px;font-style:normal}
.ph-seg i.on{background:var(--ph-bar);color:#fff}
[data-theme="dark"] .ph-seg i.on{color:var(--on)}
.ph-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0;text-align:center}
.ph-cal b{font-size:8px;color:var(--ph-sub);font-weight:800;padding-bottom:2px}
.ph-cal span{position:relative;font-size:10px;color:var(--ph-text);padding:5px 0;font-weight:600}
.ph-cal .sun{color:#E0738C}.ph-cal .sat{color:#6AA0D6}
.ph-cal .today{background:var(--ph-bar);color:#fff;border-radius:8px}
[data-theme="dark"] .ph-cal .today{color:var(--on)}
.ph-cal .star::before{content:"★";position:absolute;top:-1px;right:6px;font-size:7px;color:var(--m-3)}
.ph-cal .dots u{position:absolute;top:0;width:5px;height:5px;border-radius:50%}
.ph-cal .dots u:nth-of-type(1){left:calc(50% - 7px)}
.ph-cal .dots u:nth-of-type(2){left:calc(50% - 2px)}
.ph-cal .dots u:nth-of-type(3){left:calc(50% + 3px)}
.ph-evt{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;color:var(--ph-text);background:var(--ph-card);border:1px solid var(--ph-line);border-radius:9px;padding:7px 9px}
.ph-evt i{width:3px;height:13px;border-radius:2px;flex:none}
.ph-evt em{margin-left:auto;font-style:normal;color:var(--ph-sub);font-weight:800}
.ph-evt em.pos{color:var(--pos)}.ph-evt em.neg{color:var(--neg)}
.ph-donut{position:relative;display:flex;justify-content:center;padding:4px 0}
.donut{width:104px;height:104px;border-radius:50%;
  background:conic-gradient(#E3A7B4 0 40%,#C29CCB 40% 70%,#8FCAD5 70% 90%,#B1D2B4 90% 100%)}
.donut::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:var(--ph-bg)}
.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1}
.donut-center small{display:block;font-size:8px;color:var(--ph-sub);font-weight:800}
.donut-center b{font-size:12px;color:var(--ph-text);font-weight:800}
.ph-catlist{display:flex;flex-direction:column;gap:5px}
.ph-cat{display:grid;grid-template-columns:auto auto 1fr auto 12px 18px;align-items:center;gap:6px;font-size:9.5px;color:var(--ph-text)}
.ph-cat i{width:8px;height:8px;border-radius:50%}
.ph-cat span{font-weight:700;min-width:26px}
.ph-cat .bar{height:5px;border-radius:5px;background:var(--ph-line);overflow:hidden}
.ph-cat .bar u{display:block;height:100%;border-radius:5px}
.ph-cat b{font-weight:700;color:var(--ph-text);text-align:right}
.ph-cat .dot{font-weight:700;color:var(--ph-text);text-align:center}
.ph-cat .pct{font-weight:700;color:var(--ph-text);text-align:left;white-space:nowrap}
.ph-cat .dot,.ph-cat .pct,.ph-day .dot,.ph-day .pct{min-width:0}
.ph-cat.open{background:color-mix(in srgb,var(--oc) 12%,transparent);border-radius:6px;padding:2px 5px;margin:0 -5px}
.ph-days{display:flex;flex-direction:column;gap:3px;margin:1px 0 1px 18px}
.ph-day{display:grid;grid-template-columns:auto 1fr auto 12px 18px;align-items:center;gap:6px;font-size:8.5px;color:var(--ph-sub)}
.ph-day span{font-weight:700;color:var(--ph-sub);white-space:nowrap;min-width:40px}
.ph-day em{font-weight:700;font-style:normal;color:var(--ph-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-day b{font-weight:700;color:var(--ph-sub);font-size:8.5px;text-align:right;white-space:nowrap}
.ph-commtabs{display:flex;gap:2px;padding:0 14px 6px}
.ph-commtabs i{flex:1;text-align:center;font-size:9px;font-weight:800;color:var(--ph-sub);padding-bottom:6px;border-bottom:2px solid transparent;font-style:normal}
.ph-commtabs i.on{color:var(--ph-bar);border-color:var(--ph-bar)}
.ph-hot{background:color-mix(in srgb,var(--t7) 14%,var(--ph-card));border:1px solid var(--ph-line);border-radius:13px;padding:9px 11px}
.ph-hot>b{font-size:10px;color:var(--ph-text)}
.hot-row{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--ph-text);margin-top:5px;font-weight:600}
.hot-row em{margin-left:auto;font-style:normal;font-size:8.5px;color:var(--ph-sub);font-weight:800}
.medal{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;flex:none}
.medal.m1{background:#E6B422}.medal.m2{background:#A8AEB8}.medal.m3{background:#C98A5E}
.ph-catchips{display:flex;gap:4px;flex-wrap:wrap}
.ph-catchips i{font-size:9px;font-weight:800;color:var(--ph-sub);background:var(--ph-card);border:1px solid var(--ph-line);border-radius:var(--r-pill);padding:4px 9px;font-style:normal}
.ph-catchips i.on{background:var(--ph-bar);color:#fff;border-color:transparent}
[data-theme="dark"] .ph-catchips i.on{color:var(--on)}
.ph-post{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:12px;padding:9px 11px}
.ph-post .pc{display:inline-block;font-size:8px;font-weight:800;color:var(--brand-deep);background:var(--brand-soft);padding:2px 7px;border-radius:var(--r-pill);margin-bottom:5px}
.ph-post>b{display:block;font-size:11px;color:var(--ph-text);line-height:1.35}
.ph-post .pmeta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:9px;color:var(--ph-sub)}
.ph-post .pmeta em{font-style:normal;font-weight:800}
.ph-tabs{display:flex;background:var(--ph-card);border-top:1px solid var(--ph-line);padding:7px 4px 9px}
.ph-tabs span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:8.5px;font-weight:700;color:var(--ph-sub)}
.ph-tabs span i{font-size:15px;font-style:normal;line-height:1}
.ph-tabs[data-active="0"] span:nth-child(1),
.ph-tabs[data-active="1"] span:nth-child(2),
.ph-tabs[data-active="2"] span:nth-child(3),
.ph-tabs[data-active="3"] span:nth-child(4),
.ph-tabs[data-active="4"] span:nth-child(5){color:var(--ph-bar)}

/* =========================================================
   split (텍스트 + 폰)
   ========================================================= */
.split{display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:start}
.split-text,.split-visual{min-width:0}
.split-text .block-lead{max-width:680px}
.split-text .eyebrow{margin-bottom:var(--s4)}
.split-visual{display:flex;justify-content:center;position:relative}
.mock-float{position:absolute;z-index:6;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:var(--fs-xs);font-weight:800;color:var(--text);box-shadow:var(--shadow);white-space:nowrap}
.mock-float b{color:var(--brand-deep)}
.mock-float.mf1{top:62px;right:calc(100% - 48px);animation:bob 5s ease-in-out infinite}
.mock-float.mf2{bottom:80px;left:calc(100% - 48px);animation:bob 5.6s ease-in-out infinite .6s}
@media(max-width:1080px){.mock-float{display:none}}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:var(--s7)}
  .split-text{text-align:center}
  .split-text .block-lead{margin-left:auto;margin-right:auto}
  .split-text .comm-tabs{justify-content:center}
  .block-head{text-align:center}
  .block-head .block-lead{margin-left:auto;margin-right:auto}
  .nb{white-space:normal}
}

.check-list{list-style:none;margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.check-list li{position:relative;padding-left:28px;font-size:var(--fs-sm);color:var(--text-sub)}
.check-list li b{color:var(--text);font-weight:800}
.check-list li::before{content:"✓";position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--pt,var(--brand)) 16%,var(--surface));color:var(--pt,var(--brand-deep));font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
@media(max-width:880px){.check-list{display:inline-flex;text-align:left}}

/* SMS 데모 */
.sms-demo{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);max-width:680px}
.sms-col{display:flex;flex-direction:column;min-width:0}
@media(max-width:880px){.sms-demo{margin-left:auto;margin-right:auto}}
@media(max-width:1080px){.sms-demo{grid-template-columns:1fr;max-width:360px}}
.sms-in{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 15px;font-size:var(--fs-sm);font-weight:600;color:var(--text);box-shadow:var(--shadow-sm);line-height:1.5;text-align:center}
.sms-arrow{text-align:center;font-size:var(--fs-xs);font-weight:800;color:var(--brand-deep);padding:8px 0}
.sms-out{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 18px;box-shadow:var(--shadow-sm)}
.sms-ic{width:36px;height:36px;border-radius:11px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.sms-txt{flex:1}.sms-txt b{display:block;font-size:var(--fs-sm);font-weight:800}
.sms-txt small{font-size:var(--fs-xs);color:var(--text-mute)}
.sms-out+.sms-out{margin-top:var(--s3)}
.sms-amt{font-weight:800;font-size:15px;flex:none;white-space:nowrap;min-width:84px;text-align:right}.sms-amt.neg{color:var(--neg)}.sms-amt.pos{color:var(--pos)}
.sms-txt small{white-space:nowrap}

/* =========================================================
   소비온도 체험
   ========================================================= */
.temp-play{max-width:760px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6) var(--s7);box-shadow:var(--shadow)}
.temp-readout{display:flex;align-items:baseline;justify-content:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
.temp-emoji{font-size:18px;line-height:1}
.temp-deg{font-family:var(--ff-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--temp-c,var(--t4));transition:color .2s}
.temp-lv{font-size:var(--fs-body);font-weight:800;color:var(--temp-c,var(--t4));transition:color .2s}
.temp-slider{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:var(--r-pill);outline:none;
  background:linear-gradient(90deg,var(--t0),var(--t1),var(--t2),var(--t3),var(--t4),var(--t5),var(--t6),var(--t7))}
.temp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--temp-c,var(--t4));box-shadow:var(--shadow);cursor:pointer;transition:border-color .2s}
.temp-slider::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--temp-c,var(--t4));box-shadow:var(--shadow);cursor:pointer}
.temp-scale{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:var(--s5)}
.temp-scale .ts{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--text-mute);opacity:.5;transition:opacity .2s,transform .2s}
.temp-scale .ts.on{opacity:1;transform:translateY(-2px);color:var(--text)}
.temp-scale .ts u{width:100%;height:6px;border-radius:6px;background:var(--c)}
.temp-note{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--text-sub)}
.temp-note b{color:var(--text);font-weight:800}
@media(max-width:560px){.temp-scale .ts{font-size:9px}.temp-scale .ts span{display:none}}

/* 가족 칩 */
.family-chips{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:var(--s3)}
@media(max-width:880px){.family-chips{justify-content:center}}
/* .brk = 모바일(≤600px)에서만 full-width 스페이서로 3+2 강제 줄바꿈. 데스크탑은 display:none → 영향 없음. row-gap:0+스페이서 높이로 줄간격 1칸 유지 */
.family-chips .brk{display:none}
@media(max-width:600px){.family-chips{row-gap:0}.family-chips .brk{display:block;flex-basis:100%;height:var(--s3)}}
.fc{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:800;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;box-shadow:var(--shadow-sm)}
.fc i{width:11px;height:11px;border-radius:50%}
.fc.sum{background:var(--m-sum);color:#fff;border-color:transparent}

/* 일정 공유 리스트 (가계부) */
.sched-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);margin-top:var(--s2);align-items:stretch}
@media(max-width:760px){.sched-wrap{grid-template-columns:1fr}}
.sched-cal-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
.sched-cal-h{text-align:center;font-size:var(--fs-sm);font-weight:800;color:var(--text);margin-bottom:var(--s4)}
.sched-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.sched-cal b{font-size:var(--fs-xs);color:var(--text-mute);font-weight:800;padding-bottom:6px}
.sched-cal span{position:relative;font-size:var(--fs-sm);color:var(--text-sub);font-weight:600;padding:8px 0 13px;border-radius:9px}
.sched-cal .sun{color:#E0738C}.sched-cal .sat{color:#6AA0D6}
.sched-cal .off{opacity:.32}
.sched-cal .dots{font-weight:800;color:var(--text);background:var(--surface-2)}
.sched-cal .dots u{position:absolute;left:50%;transform:translateX(-50%);bottom:5px;width:6px;height:6px;border-radius:50%}
.sched-cal .star::after{content:"★";position:absolute;top:2px;right:7px;font-size:8px;color:var(--m-3)}
.sched-list{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3)}
.sched-item{display:flex;align-items:center;gap:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);box-shadow:var(--shadow-sm)}
.sched-item i{width:4px;height:22px;border-radius:3px;flex:none}
.sched-item b{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.sched-item em{margin-left:auto;font-style:normal;font-size:var(--fs-sm);font-weight:800;color:var(--pt,var(--brand-deep))}

/* =========================================================
   카드 그리드 (포맷 통일)
   ========================================================= */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8)}
@media(max-width:880px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.feat-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:var(--s4)}
.feat-card h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.01em;line-height:1.35;color:var(--text)}
.feat-card p{font-size:var(--fs-sm);color:var(--text-sub);margin-top:var(--s3);line-height:1.65;flex:1}
.feat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s4)}
.feat-tags span{font-size:var(--fs-xs);font-weight:800;color:var(--text);padding:5px 11px;border-radius:var(--r-pill)}
.feat-tags span:nth-child(3n+1){background:color-mix(in srgb,var(--brand) 26%,var(--surface))}
.feat-tags span:nth-child(3n+2){background:color-mix(in srgb,var(--m-me) 30%,var(--surface))}
.feat-tags span:nth-child(3n){background:color-mix(in srgb,var(--m-4) 30%,var(--surface))}

.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:880px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.more-grid{grid-template-columns:1fr}}
.more-card{display:flex;align-items:center;gap:var(--s3);min-height:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);transition:transform .25s,box-shadow .25s}
.more-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.more-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.more-card b{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.more-card small{display:block;font-size:var(--fs-xs);color:var(--text-mute);margin-top:2px;line-height:1.5}

.voice-grid{display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-auto-columns:min(340px,82vw);
  gap:var(--s4);overflow-x:auto;scrollbar-width:none;cursor:grab;padding:0 2px var(--s4);touch-action:pan-y}
.voice-grid::-webkit-scrollbar{display:none}
.voice-grid.dragging{cursor:grabbing;scroll-behavior:auto}
.voice-grid.dragging .voice-card{pointer-events:none}
.voice-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);user-select:none}
.voice-q{font-size:var(--fs-body);color:var(--text);line-height:1.6;font-weight:600;flex:1}
.voice-q::before{content:"“";font-family:var(--ff-display);font-size:30px;color:var(--pt,var(--brand));line-height:0;vertical-align:-12px;margin-right:2px}
.voice-q::after{content:"”";font-family:var(--ff-display);font-size:30px;color:var(--pt,var(--brand));line-height:0;vertical-align:-12px;margin-left:1px}
.voice-who{display:flex;align-items:center;gap:8px;margin-top:var(--s4);font-size:var(--fs-xs);font-weight:800;color:var(--text-mute)}
.voice-who i{font-size:16px}

/* =========================================================
   문의
   ========================================================= */
.inq-switch{display:flex;gap:var(--s2);max-width:420px;margin:0 auto var(--s6);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px}
.inq-switch button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:800;color:var(--text-sub);transition:background .25s,color .25s,transform .15s}
.inq-switch button i{font-style:normal}
.inq-switch button.on{background:var(--pt,var(--brand));color:#fff}
[data-theme="dark"] .inq-switch button.on{color:#0B0B0D}
.inq{max-width:960px;margin:0 auto}
.inq section[data-panel]{display:none}
.inq section[data-panel].on{display:flex}
.inq-find,.inq-ask{flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.inq-find-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap;scroll-margin-top:88px}
.inq-find-head .inq-h{margin-bottom:0}
.inq-search{display:flex;align-items:center;gap:7px;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:4px 16px;min-width:200px;transition:border-color .2s}
.inq-search:focus-within{border-color:var(--brand)}
.inq-search span{font-size:14px;opacity:.7;line-height:1}
.inq-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:var(--fs-sm);color:var(--text);font-family:inherit}
.inq-search input::placeholder{color:var(--text-mute)}
.inq-find,.inq-ask{background:color-mix(in srgb,var(--pt,var(--brand)) 8%,var(--surface))}
.inq-h{display:flex;align-items:center;gap:9px;font-size:var(--fs-h3);font-weight:800;color:var(--text);margin-bottom:var(--s5)}
.inq-h span{font-size:18px}
.inq-form{display:flex;flex-direction:column;gap:var(--s3)}
.if-row{display:flex;gap:var(--s3)}
.if-row input,.if-row select{flex:1;min-width:0}
.inq-form input,.inq-form select,.inq-form textarea{width:100%;border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-sm);padding:12px 14px;font-size:var(--fs-sm);color:var(--text);font-family:inherit;outline:none;transition:border-color .2s}
.inq-form input:focus,.inq-form select:focus,.inq-form textarea:focus{border-color:var(--brand)}
.inq-form textarea{min-height:96px;resize:vertical;line-height:1.6}
.inq-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:38px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
/* 카테고리 커스텀 드롭다운(항상 아래로 열림) */
.cat-sel{position:relative;flex:1;min-width:0}
.cat-sel-btn{width:100%;text-align:left;border:1.5px solid var(--line);background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;border-radius:var(--r-sm);padding:12px 38px 12px 14px;font-size:var(--fs-sm);color:var(--text);font-family:inherit;cursor:pointer;transition:border-color .2s}
.cat-sel-btn[aria-expanded="true"]{border-color:var(--brand)}
.cat-sel-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;margin:0;list-style:none;max-height:260px;overflow:auto}
.cat-sel-list li{padding:11px 12px;border-radius:8px;font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.cat-sel-list li.on{background:color-mix(in srgb,var(--brand) 14%,transparent);font-weight:700;color:var(--brand-deep)}
.if-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-left:14px}
.if-count{font-size:var(--fs-xs);color:var(--text-mute);font-weight:700}
.if-count.bad{color:var(--neg)}.if-count.ok{color:var(--pos)}
.inq-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:680px){.inq-list{grid-template-columns:1fr}}
.inq-item{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);transition:border-color .2s,box-shadow .2s}
.inq-item .iq-t,.inq-item .ib,.inq-item .ir{overflow-wrap:anywhere;word-break:break-word}
.inq-item:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));box-shadow:var(--shadow-sm)}
.inq-item .ih{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.inq-item .ih .cat{font-size:var(--fs-xs);font-weight:800;color:var(--pt,var(--brand-deep));background:color-mix(in srgb,var(--pt,var(--brand)) 14%,var(--surface));padding:3px 10px;border-radius:var(--r-pill)}
.inq-item .ih .nm{font-size:var(--fs-xs);font-weight:800;color:var(--text)}
.inq-item .ih .tm{font-size:var(--fs-xs);color:var(--text-mute);margin-left:auto}
.inq-item .iq{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--fs-body);font-weight:800;color:var(--text);line-height:1.45}
.inq-item .iq .iq-t{flex:1;min-width:0}
.inq-item .st{flex:none;margin-top:2px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
.inq-item .st.wait{color:#C98A1E;background:color-mix(in srgb,#F5DC8E 30%,transparent)}
.inq-item .st.done{color:var(--pos);background:color-mix(in srgb,#A8E0CC 35%,transparent)}
.inq-item .ib{font-size:var(--fs-sm);color:var(--text-sub);margin-top:5px;line-height:1.6}
.inq-item .ib.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.inq-item .ib-more{display:block;width:fit-content;margin:13px 0 15px auto;font-size:var(--fs-xs);font-weight:800;color:var(--text-mute);background:none;border:0;padding:0;line-height:1;cursor:pointer}
.inq-item .ib-more[hidden]{display:none}
.inq-item .ib-more:focus,.inq-item .ib-more:focus-visible{outline:none}
.inq-item .ir{margin-top:var(--s3);padding:var(--s3) var(--s4);background:color-mix(in srgb,var(--pt,var(--brand)) 9%,var(--surface));border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text);line-height:1.6}
.inq-item .ir b{color:var(--pt,var(--brand-deep))}
.inq-item .ir.pending{background:var(--surface-2)}
.inq-item .ir.pending b{color:color-mix(in srgb,var(--pt-lilac) 48%,var(--text-sub))}
.inq-empty{grid-column:1/-1;text-align:center;padding:var(--s8) 0;color:var(--text-mute);font-size:var(--fs-sm);font-weight:700}
.inq-pages{display:flex;justify-content:center;gap:6px;margin-top:var(--s5)}
.inq-pages button{min-width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);font-weight:800;color:var(--text-sub);transition:.2s}
.inq-pages button.on{background:var(--pt,var(--brand));color:#fff;border-color:transparent}
[data-theme="dark"] .inq-pages button.on{color:var(--on)}
.inq-pages button:disabled{opacity:.35;cursor:default}
.inq-pages .ip-gap{display:inline-flex;align-items:flex-end;padding:0 2px;color:var(--text-mute);font-weight:800}

/* =========================================================
   푸터 (홈 탭에만)
   ========================================================= */
.foot{margin-top:var(--s8);border-top:1px solid var(--line);padding:var(--s7) var(--s5) var(--s7)}
/* 컨테이너 폭(--maxw)을 가득 채워 넓게 배치 → 브랜드는 좌측, 약관은 우측 끝 */
.foot-wrap{width:100%;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--s5)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4) var(--s6)}
.foot-brand{display:inline-flex;align-items:center;gap:var(--s3);cursor:pointer}
.foot-brand img{width:42px;height:42px;border-radius:12px;box-shadow:var(--shadow-sm)}
.foot-brand b{display:block;font-family:var(--ff-display);font-weight:700;font-size:16px;color:var(--text);letter-spacing:-.01em}
.foot-brand small{display:block;font-size:var(--fs-xs);color:var(--text-mute);margin-top:1px;font-weight:600}
.foot-links{display:inline-flex;align-items:center;gap:var(--s4)}
.foot-links a{font-size:var(--fs-sm);font-weight:700;color:var(--text-sub);transition:color .2s}
.foot-links a:hover{color:var(--brand-deep)}
.foot-info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  font-size:var(--fs-xs);color:var(--text-mute)}
.foot-info-row{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:var(--s2) var(--s5)}
.foot-info span{display:inline-flex;align-items:center}
.foot-info i{color:var(--text-mute);font-style:normal;margin-right:6px;opacity:.8}
.foot-info b{color:var(--text-mute);font-weight:700}
.foot-info a{color:var(--text-mute);font-weight:700}
.foot-info a:hover{color:var(--brand-deep)}
/* 실제 터치 기기(폰/태블릿)만 푸터 중앙정렬 + 순서 재배치. 마우스=데스크톱은 원래 배치 유지.
   순서: 브랜드 → 상호/대표/이메일 → 이용약관/개인정보(맨 아래).
   foot-top을 display:contents로 풀어 브랜드·링크·정보를 foot-wrap 직속 flex 항목으로 만든 뒤 order로 재배치 */
@media(pointer:coarse){
  .foot-wrap{align-items:center}
  .foot-top{display:contents}
  .foot-brand{order:1;text-align:left}
  .foot-info{order:2;align-items:center}
  .foot-links{order:3}
  .foot-info-row{gap:var(--s2) var(--s4);justify-content:center}
  .foot-info-row>span:nth-child(3){flex-basis:100%;justify-content:center}}

/* =========================================================
   토스트 / 등장
   ========================================================= */
.particles{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.pcl{position:absolute;top:-40px;opacity:.5;animation-name:pfall;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
[data-theme="dark"] .pcl{opacity:.2}
@keyframes pfall{0%{transform:translateY(-40px) translateX(0) rotate(0)}50%{transform:translateY(50vh) translateX(34px) rotate(180deg)}100%{transform:translateY(106vh) translateX(0) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.particles{display:none}}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:200;background:var(--text);color:var(--bg);font-size:var(--fs-sm);font-weight:700;padding:13px 22px;border-radius:var(--r-pill);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.35s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-float{animation:none}}

/* =========================================================
   카드 묶음 소제목 / 커서 코인
   ========================================================= */
.grid-head{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
@media(max-width:880px){.grid-head{align-items:center;text-align:center}}
.grid-head .eyebrow{margin-bottom:var(--s4)}
.grid-title{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-h2);letter-spacing:-.02em;color:var(--text);line-height:1.25}
.grid-sub{font-size:var(--fs-lead);color:var(--text-sub);line-height:1.7;margin-top:var(--s4);max-width:580px}
/* 글머리(grid-sub)→카드 간격 = 글자→그림 36px 통일 */
.grid-head+.feat-grid{margin-top:36px}
.coin{position:fixed;z-index:300;font-size:16px;pointer-events:none;animation:coinFade .9s ease forwards}
@keyframes coinFade{0%{opacity:.85;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-26px) scale(.5)}}

/* 제목 포인트 강조색 — 전 섹션 동일 그라데이션(히어로 '어디에'와 통일) */
.ac{background:linear-gradient(110deg,var(--brand),var(--m-4));-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* 줄바꿈 정리 — 제목은 균형(balance), 본문은 마지막 줄 외톨이 방지(pretty) */
.hero-title,.block-title,.grid-title,.fun-card h3,.feat-card h3{text-wrap:balance}
.hero-lead,.block-lead,.grid-sub,.fun-sub,.voice-q,.feat-card p,.more-card small,.check-list li,.temp-note,.inq-h{text-wrap:pretty}
/* 본문 리드의 데스크탑용 줄바꿈(.dbr)은 모바일에서 무시 → 자연 흐름 + keep-all + pretty로 외톨이 단어 방지(제목 <br>은 유지) */
@media(max-width:600px){.dbr{display:none}}
/* .mbr = 모바일에서만 줄바꿈(데스크탑에선 숨김). 데스크탑 레이아웃은 그대로 두고 폰만 줄바꿈 */
@media(min-width:601px){.mbr{display:none}}
/* .dbr880/.mbr880 = split-text 가운데정렬 전환점(880px)에 맞춘 줄바꿈. >880(좌측정렬)=dbr880만, ≤880(가운데정렬)=mbr880만 */
@media(max-width:880px){.dbr880{display:none}}
@media(min-width:881px){.mbr880{display:none}}

/* 멤버칩 합산 점 */
.ph-chip.sum i{background:#fff}
.fc.sum i{background:#fff}

/* 사주·미니게임 체험 (새 디자인) */
.fun-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
@media(max-width:780px){.fun-grid{grid-template-columns:1fr}}
.fun-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);transition:transform .25s,box-shadow .25s}
.fun-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.fun-tag{align-self:flex-start;font-size:var(--fs-xs);font-weight:800;color:var(--brand-deep);background:var(--brand-soft);padding:6px 13px;border-radius:var(--r-pill);margin-bottom:var(--s4)}
.fun-card h3{font-size:var(--fs-h3);font-weight:800;color:var(--text)}
.fun-sub{font-size:var(--fs-sm);color:var(--text-sub);margin-top:var(--s2);line-height:1.6}
.fun-btn{margin-top:var(--s2);width:100%}
.saju-out{flex:1;margin:var(--s5) 0;background:var(--surface-2);border-radius:var(--r);padding:var(--s5);min-height:186px;display:flex;flex-direction:column;justify-content:center}
.saju-skel{opacity:.5}
.saju-skel .saju-score{color:var(--text-mute)}
.saju-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:var(--s5)}
.saju-menu span{font-size:11.5px;font-weight:800;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 5px;text-align:center;white-space:nowrap;transition:transform .15s,border-color .15s}
.saju-menu span:hover{transform:translateY(-2px);border-color:var(--brand)}
.saju-score{text-align:center;font-family:var(--ff-display);font-weight:700;font-size:24px;color:var(--brand-deep);margin-bottom:var(--s3)}
.saju-row{display:flex;gap:var(--s3);padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.saju-row:first-of-type{border-top:none}
.saju-row .k{flex:none;width:88px;font-weight:800;color:var(--text-sub)}
.saju-row .v{color:var(--text);line-height:1.5}
.roul-wrap{flex:1;display:flex;align-items:center;justify-content:center;margin:var(--s5) 0}
.roulette{position:relative;width:min(212px,100%);aspect-ratio:1;border-radius:50%;transition:transform 4s cubic-bezier(.17,.67,.2,1);box-shadow:var(--shadow)}
.roul-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:20px;z-index:2;box-shadow:var(--shadow-sm)}
.roul-label{position:absolute;top:50%;left:50%;font-size:13px;font-weight:800;color:#fff;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:font-size .2s}
.roul-label.win{font-size:17px;font-weight:900;text-shadow:0 0 9px rgba(255,255,255,.95),0 1px 3px rgba(0,0,0,.5)}
.roul-result{text-align:center;margin-bottom:var(--s4);font-size:var(--fs-sm);font-weight:700;color:var(--text);min-height:20px}
.roul-result b{color:var(--brand-deep)}
.game-tags{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:var(--s5)}
.game-tags span{font-size:11.5px;font-weight:800;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 5px;text-align:center;white-space:nowrap;transition:transform .15s,border-color .15s}
.game-tags span:hover{transform:translateY(-2px);border-color:var(--brand)}
/* 사주 메뉴·게임 태그 — 칸마다 다른 파스텔 */
.saju-menu span:nth-child(1),.game-tags span:nth-child(1){background:color-mix(in srgb,#5FA8B5 15%,var(--surface));border-color:color-mix(in srgb,#5FA8B5 38%,transparent)}
.saju-menu span:nth-child(2),.game-tags span:nth-child(2){background:color-mix(in srgb,#E3A7B4 15%,var(--surface));border-color:color-mix(in srgb,#E3A7B4 38%,transparent)}
.saju-menu span:nth-child(3),.game-tags span:nth-child(3){background:color-mix(in srgb,#B1D2B4 15%,var(--surface));border-color:color-mix(in srgb,#B1D2B4 38%,transparent)}
.saju-menu span:nth-child(4),.game-tags span:nth-child(4){background:color-mix(in srgb,#C29CCB 15%,var(--surface));border-color:color-mix(in srgb,#C29CCB 38%,transparent)}
.saju-menu span:nth-child(5),.game-tags span:nth-child(5){background:color-mix(in srgb,#9CC4D8 15%,var(--surface));border-color:color-mix(in srgb,#9CC4D8 38%,transparent)}
.saju-menu span:nth-child(6),.game-tags span:nth-child(6){background:color-mix(in srgb,#CC8494 15%,var(--surface));border-color:color-mix(in srgb,#CC8494 38%,transparent)}
.game-tags span:nth-child(7){background:color-mix(in srgb,#86CFC2 15%,var(--surface));border-color:color-mix(in srgb,#86CFC2 38%,transparent)}
.game-tags span:nth-child(8){background:color-mix(in srgb,#E2B6C9 15%,var(--surface));border-color:color-mix(in srgb,#E2B6C9 38%,transparent)}
.game-tags span:nth-child(9){background:color-mix(in srgb,#9FB8E0 15%,var(--surface));border-color:color-mix(in srgb,#9FB8E0 38%,transparent)}
.game-tags span:nth-child(10){background:color-mix(in srgb,#B7B0E0 15%,var(--surface));border-color:color-mix(in srgb,#B7B0E0 38%,transparent)}
@media(max-width:520px){.game-tags{grid-template-columns:repeat(3,1fr)}.saju-menu{grid-template-columns:repeat(2,1fr)}}

/* 소통 맛보기 칩 */
.comm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}
.comm-tabs span{font-size:var(--fs-sm);font-weight:800;color:var(--text);background:var(--surface-2);padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line)}
/* .brk = 모바일(≤600px)에서만 full-width 스페이서로 3+2 강제 줄바꿈. 데스크탑은 display:none → 영향 없음 */
.comm-tabs .brk{display:none}
@media(max-width:600px){.comm-tabs{row-gap:0}.comm-tabs .brk{display:block;flex-basis:100%;height:8px}}
.comm-tabs span:nth-of-type(1){background:color-mix(in srgb,#79A8D4 22%,var(--surface));border-color:color-mix(in srgb,#79A8D4 32%,transparent)}
.comm-tabs span:nth-of-type(2){background:color-mix(in srgb,#D892B4 22%,var(--surface));border-color:color-mix(in srgb,#D892B4 32%,transparent)}
.comm-tabs span:nth-of-type(3){background:color-mix(in srgb,#5FA8B5 22%,var(--surface));border-color:color-mix(in srgb,#5FA8B5 32%,transparent)}
.comm-tabs span:nth-of-type(4){background:color-mix(in srgb,#C29CCB 22%,var(--surface));border-color:color-mix(in srgb,#C29CCB 32%,transparent)}
.comm-tabs span:nth-of-type(5){background:color-mix(in srgb,#D7B881 22%,var(--surface));border-color:color-mix(in srgb,#D7B881 32%,transparent)}

/* 폰 헤더 좌측 placeholder (중앙정렬용) */
.ph-side{grid-column:1}

/* 통계 분석 도구 (연간·자산 시뮬레이션) */
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
@media(max-width:920px){.analysis-grid{grid-template-columns:1fr}}
.ana-card{display:flex;flex-direction:column;min-width:0;container-type:inline-size;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.ana-h b{font-size:var(--fs-body);font-weight:800;color:var(--text)}
.ana-h small{display:block;font-size:var(--fs-xs);color:var(--text-mute);margin-top:3px}
.ana-bars{display:flex;align-items:flex-end;gap:7px;height:176px;margin-top:var(--s5)}
.ana-foot,.ana-vars{display:flex;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
/* 연 지출 등 박스: 글씨 중앙 정렬 + 월 저축 박스와 같은 높이(동일선상) */
.ana-foot span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;min-height:78px;background:var(--surface-2);border-radius:var(--r-sm);padding:11px}
.ana-foot i{font-style:normal;font-size:var(--fs-xs);color:var(--text-mute);font-weight:700}
.ana-foot b{font-size:var(--fs-sm);color:var(--brand-deep);font-weight:800}
/* 박스 배경 다양화(회색 단색 대신 칸마다 다른 파스텔) */
.ana-foot span:nth-child(1){background:color-mix(in srgb,#5FA8B5 16%,var(--surface))}
.ana-foot span:nth-child(2){background:color-mix(in srgb,#B1D2B4 20%,var(--surface))}
.ana-foot span:nth-child(3){background:color-mix(in srgb,#E2CBA0 22%,var(--surface))}
.ana-vars .sim-var:nth-child(1){background:color-mix(in srgb,#E3A7B4 18%,var(--surface))}
.ana-vars .sim-var:nth-child(2){background:color-mix(in srgb,#9CC4D8 20%,var(--surface))}
.ana-vars .sim-var:nth-child(3){background:color-mix(in srgb,#86CFC2 20%,var(--surface))}
.ana-sim{height:176px;display:flex;flex-direction:column;justify-content:flex-end;margin-top:var(--s5)}
.sim-svg{width:100%;height:150px;display:block}
.sim-svg polyline{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:all .3s ease}
.sim-fill{fill:color-mix(in srgb,var(--brand) 14%,transparent);stroke:none;transition:all .3s ease}
.sim-foot{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-mute);font-weight:700;margin-top:8px}
.sim-foot b{color:var(--brand-deep)}
/* 시뮬 변수 스테퍼: −(왼쪽) 값(중앙) +(오른쪽) 가로 배치 */
.ana-vars .sim-var{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5em;min-height:78px;background:var(--surface-2);border-radius:var(--r-sm);padding:0.8em 0.5em;font-size:clamp(8px,3.2cqi,14px)}
.ana-vars .sim-var>i{font-style:normal;font-size:var(--fs-xs);color:var(--text-mute);font-weight:700;text-align:center}
.ana-vars .sim-ctrl{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.5em;width:100%}
.ana-vars .sim-ctrl button{width:1.35em;height:1.35em;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:0.82em;font-weight:800;color:var(--brand-deep);display:flex;align-items:center;justify-content:center;line-height:1;flex:none;transition:background .15s,border-color .15s,transform .1s}
.ana-vars .sim-ctrl button:hover{background:var(--brand-soft);border-color:var(--brand)}
.ana-vars .sim-ctrl button:active{transform:scale(.86)}
.ana-vars .sim-ctrl button:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 60%,transparent);outline-offset:2px}
[data-theme="dark"] .ana-vars .sim-ctrl button:hover{background:color-mix(in srgb,var(--brand) 22%,var(--surface))}
.ana-vars .sim-ctrl b{min-width:0;text-align:center;font-size:1em;font-weight:800;color:var(--brand-deep);white-space:nowrap}
/* 연간 통계 막대(정적, 최다 10월 강조) */
.ana-bars .yb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;background:none;padding:0}
.ana-bars .yb::before{content:"";width:100%;height:var(--h);background:linear-gradient(180deg,var(--t1),var(--brand));border-radius:6px 6px 0 0;min-height:6px}
.ana-bars .yb.on::before{background:linear-gradient(180deg,var(--brand),var(--brand-deep))}
.ana-bars .yb i{font-size:9px;color:var(--text-mute);font-style:normal}
.ana-bars .yb.on i{color:var(--brand-deep);font-weight:800}

/* =========================================================
   모바일 보강
   ========================================================= */
@media(max-width:880px){
  .view{padding:var(--s7) var(--s5) var(--s8)}
  .hero{grid-template-columns:1fr;gap:var(--s7);text-align:center;justify-items:center;min-height:0;margin-bottom:var(--s4)}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero-lead{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-trust{justify-content:center}
  .hero-title{font-size:clamp(33px,8.6vw,52px)}
  .block{margin-top:var(--s8)}
}
@media(max-width:560px){
  .view{padding:var(--s6) var(--s4) var(--s7)}
  .block{margin-top:var(--s7)}
}

/* =========================================================
   섹션 3종 — 최대 4인 공유(홈) / 카드 합산(가계부) / 살까말까(소통)
   ========================================================= */
/* 긴 리드 문장은 한 줄 유지(기본 580px → 760px) */
.block-lead.wide{max-width:760px}
/* 위(예시) → 아래(결과) 연결 화살표 */
.flow-arrow{max-width:760px;text-align:center;font-size:var(--fs-sm);font-weight:800;color:var(--brand-deep);padding:var(--s4) 0}

/* ---- 홈: 최대 4인 공유 ---- */
.share4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);max-width:760px}
.share4-card{display:flex;flex-direction:column;align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-sm)}
.s4-ava{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:color-mix(in srgb,var(--mc) 18%,var(--surface));margin-bottom:2px}
.share4-card b{font-size:var(--fs-body);font-weight:800;color:var(--text)}
.share4-card small{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--text-sub)}
.share4-card small i{width:8px;height:8px;border-radius:50%;flex:none}
.share-ledger{display:flex;flex-direction:column;gap:10px;max-width:760px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
.sl-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:2px}
.sl-head b{font-size:var(--fs-h3);font-weight:800;color:var(--text)}
.sl-sync{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:800;color:var(--pos);background:color-mix(in srgb,var(--m-2) 26%,var(--surface));border-radius:var(--r-pill);padding:6px 13px;white-space:nowrap}
.sl-sync i{width:7px;height:7px;border-radius:50%;background:var(--pos)}
.sl-temp{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--r);background:color-mix(in srgb,var(--t4) 16%,var(--surface))}
.sl-temp .tb-emoji{font-size:17px;line-height:1}
.sl-temp .tb-deg{font-size:var(--fs-body);font-weight:800;color:var(--text)}
.sl-temp .tb-lv{font-size:var(--fs-sm);font-weight:800;color:var(--text-sub)}
.sl-temp .tb-track{flex:1;height:7px;border-radius:7px;background:color-mix(in srgb,var(--t4) 30%,transparent);overflow:hidden}
.sl-temp .tb-track i{display:block;height:100%;background:var(--t4);border-radius:7px}
.sl-row{display:flex;align-items:center;gap:var(--s3);background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 16px}
.sl-row i{width:4px;height:20px;border-radius:3px;flex:none}
.sl-row b{font-size:var(--fs-sm);font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-row small{font-size:var(--fs-xs);color:var(--text-mute);font-weight:700;flex:none}
.sl-row em{margin-left:auto;font-style:normal;font-size:var(--fs-body);font-weight:800;color:var(--neg);white-space:nowrap}
@media(max-width:680px){
  .share4-grid{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .share4-card{padding:var(--s4) var(--s3)}
  .share-ledger{padding:var(--s5) var(--s4)}
  .sl-row{padding:10px 12px}
  .sl-row em{font-size:var(--fs-sm)}
}

/* ---- 가계부: 카드별 지출 합산 ---- */
.lcards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);max-width:912px}
.lcards~.flow-arrow{max-width:912px}
.lcard{display:flex;flex-direction:column;min-width:0;border-radius:20px;padding:18px 20px;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 88%,#fff),color-mix(in srgb,var(--cc) 72%,#1A1A2E));box-shadow:var(--shadow-sm)}
/* 다크모드: 카드·비중 막대·범례 점 전부 딥톤(라이트 그대로면 너무 밝음 — 대표님 2026-07-03) */
[data-theme="dark"] .lcard{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 52%,#14141A),color-mix(in srgb,var(--cc) 36%,#0B0B0D))}
[data-theme="dark"] .lt-bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 52%,#14141A),color-mix(in srgb,var(--cc) 36%,#0B0B0D))}
[data-theme="dark"] .lt-legend i{background:color-mix(in srgb,var(--cc) 48%,#111116)}
.lc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.lc-top .chip{width:30px;height:22px;border-radius:6px;background:linear-gradient(135deg,#F5DC8E,#E2CBA0);font-style:normal}
.lc-top .wave{font-style:normal;font-weight:800;letter-spacing:2px;opacity:.7;font-size:13px}
.lcard small{font-size:var(--fs-xs);font-weight:700;letter-spacing:3px;opacity:.85}
.lcard b{font-size:var(--fs-sm);font-weight:800;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard em{font-style:normal;font-size:17px;font-weight:800;margin-top:10px;white-space:nowrap}
.lcards-total{display:flex;flex-direction:column;gap:var(--s5);max-width:912px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s6);box-shadow:var(--shadow-sm)}
.lt-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3) var(--s4);flex-wrap:wrap}
.lt-bar{display:flex;gap:4px;height:16px;border-radius:var(--r-pill);overflow:hidden}
.lt-bar i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 88%,#fff),color-mix(in srgb,var(--cc) 72%,#1A1A2E))}
.lt-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.lt-legend span{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:800;color:var(--text);white-space:nowrap}
.lt-legend i{width:10px;height:10px;border-radius:4px;background:color-mix(in srgb,var(--cc) 80%,#1A1A2E);flex:none}
.lt-left small{display:block;font-size:var(--fs-sm);color:var(--text-sub);font-weight:700}
.lt-left b{display:block;font-family:var(--ff-display);font-weight:700;font-size:clamp(24px,3vw,32px);color:var(--text);margin-top:6px;letter-spacing:-.01em}
.lt-left b em{font-style:normal;font-size:.62em;margin-left:1px}
.lt-temp{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:800;color:var(--text-sub);background:color-mix(in srgb,var(--t4) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--t4) 32%,transparent);border-radius:var(--r-pill);padding:12px 18px}
.lt-temp b{color:var(--text)}
@media(max-width:880px){.lcards{grid-template-columns:repeat(2,1fr);gap:var(--s3)}}
@media(max-width:560px){.lcards-total{padding:var(--s5) var(--s5)}}

/* ---- 소통: 살까 말까 커뮤니티 (폭 912px = 다른 섹션 760px의 1.2배, 대표님 지시) ---- */
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);max-width:912px}
.buy-grid~.flow-arrow,.buy-grid+.flow-arrow{max-width:912px}
@media(max-width:780px){.buy-grid{grid-template-columns:1fr}}
.buy-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow-sm)}
.bc-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.bc-ava{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:color-mix(in srgb,var(--mc) 20%,var(--surface));flex:none}
.bc-ava-img{width:40px;height:40px;border-radius:12px;flex:none;box-shadow:var(--shadow-sm)}
.bc-head b{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.bc-badge{font-size:11px;font-weight:800;color:var(--pos);background:color-mix(in srgb,var(--m-2) 30%,var(--surface));padding:3px 9px;border-radius:var(--r-pill)}
.bc-head small{margin-left:auto;font-size:var(--fs-xs);color:var(--text-mute);font-weight:700;white-space:nowrap}
.buy-card h3{font-size:var(--fs-h3);font-weight:800;color:var(--text);line-height:1.4}
.buy-card p{font-size:var(--fs-sm);color:var(--text-sub);line-height:1.65;margin-top:var(--s2);flex:1;word-break:keep-all}
.bc-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.bc-pills span{font-size:var(--fs-xs);font-weight:800;color:var(--text);background:color-mix(in srgb,var(--pc) 30%,var(--surface));border-radius:var(--r-pill);padding:7px 14px}
.bc-foot{margin-top:var(--s4);font-size:var(--fs-xs);font-weight:700;color:var(--text-mute)}
.buy-formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s3) var(--s4);max-width:912px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s5) var(--s6);box-shadow:var(--shadow-sm)}
.buy-formula span{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:800;color:var(--text);background:color-mix(in srgb,var(--pc) 26%,var(--surface));border-radius:var(--r-sm);padding:10px 16px;white-space:nowrap}
.buy-formula span i{font-style:normal;line-height:1}
.buy-formula em{font-style:normal;font-weight:800;color:var(--text-mute);font-size:var(--fs-body)}
/* .brk = 모바일에서만 '=' 앞 강제 줄바꿈(2줄째 = '잘 샀다'는 확신 고정 — 대표님 확정). 데스크탑은 한 줄 유지 */
.buy-formula .brk{display:none}
@media(max-width:600px){.buy-formula .brk{display:block;flex-basis:100%;height:0}}
@media(max-width:600px){.buy-formula{border-radius:var(--r-lg);padding:var(--s4) var(--s4)}}