/* ═══════════════════════════════
   TOKENS — 인바디 스타일
   흰 배경 · 네이비 포인트 · 의료 신뢰감
═══════════════════════════════ */
:root{
  /* --bg / --white / --surface는 셋 다 #FFFFFF로 따로 적혀 있었다. 값이 같아
     지금은 아무거나 써도 똑같이 보이지만, 나중에 배경만 크림색으로 바꾸는 순간
     어디가 "페이지 배경"이고 어디가 "카드 표면"이었는지 구분할 방법이 없다.
     역할 이름은 남기되 한 곳에서 파생시켜 둔다. */
  --white:#FFFFFF;          /* 말 그대로 흰색 — 색 위에 얹는 글자 등 */
  --bg:var(--white);        /* 페이지 배경 */
  --surface:var(--white);   /* 카드·시트 표면 */
  --ink:#2A2118;
  --ink2:#7A6E60;
  --ink3:#B0A090;
  --line:#E8E0D8;

  --primary:#26315A;        /* 네이비. 예전 갈색 팔레트 시절 주석이 남아 있었다 */
  --primary-pale:#E9EBF6;
  --primary-mid:#5B6E9C;

  --warn-tx:#8A4820;  --warn-bg:#F5EAE0;
  --ok-tx:#3A5A28;    --ok-bg:#E0EAD4;
  --bdr-tx:#5A6A28;   --bdr-bg:#EAEDD4;
  --danger-tx:#B91C1C; --danger-bg:#FEF2F2;

  /* 지표별 색은 app-core.js의 metrics[]가 들고 있다 — 여기 두면 두 곳이 어긋난다 */

  --up:#B03030;

  --r-btn:10px;
  --nav-h:66px;
  --shadow:0 1px 3px rgba(42,33,24,.06),0 4px 12px rgba(42,33,24,.06);
  /* ── 쌓임 순서 ──
     예전엔 18개 값이 파일 곳곳에 숫자로 박혀 있어서 새 레이어를 넣을 때마다
     주변을 뒤져야 했다. 값은 그대로 두고 이름만 붙였다 — 새 레이어가 필요하면
     이 표에 먼저 자리를 잡고 쓸 것. 인라인 style에 숫자를 새로 박지 말 것. */
  --z-base:1;
  --z-raise:2;
  --z-sticky:5;
  --z-tabs:11;
  --z-header:12;
  --z-nav:20;
  --z-screen:30;
  --z-screen-top:32;
  --z-modal:45;
  --z-modal-top:50;
  --z-toast-inline:60;   /* 커뮤니티 시트 안 토스트 */
  --z-drawer-dim:80;
  --z-drawer:81;
  --z-toast:100;         /* 전역 토스트 — 모달 위에도 보여야 한다 */
  --z-coach:200;
  --z-onboard:210;
  --z-onboard-alt:212;
  --z-onboard-done:220;

}

/* ═══ 리프레시 테마(토스 문법) — ?theme=refresh 로만 켜짐. 기본 모습은 1픽셀도 불변 ═══
   쿨그레이 캔버스 + 무테두리 순백 카드(명도차로 띄움) + 잉크 단일 포인트 + 상태색은 글자에만.
   글라스는 하단 탭바·바텀시트 2곳만 */
html[data-theme=refresh]{
  background:#F2F4F6; /* 모바일 주소창 예약 띠(문서 캔버스)도 회색 캔버스와 한 덩어리로 */
  --bg:#F2F4F6;
  --ink:#191F28; --ink2:#6B7684; --ink3:#8B95A1;
  --line:#EAEDF0;
  /* 포인트는 선명한 블루 — 회색 캔버스에선 채도 눌린 색보다 쨍한 색이 깔끔하게 읽힌다.
     글자·제목은 --ink(잉크)가 담당, 이 색은 버튼·선택 표시·링크 자리에만 */
  --primary:#3A6EA5; --primary-pale:#EAF1F8; --primary-mid:#7A9CC4;
  --warn-tx:#C77E1E; --warn-bg:#FBF3E4;
  --ok-tx:#1D8A4E;   --ok-bg:#E8F3EC;
  --danger-tx:#D22F2F; --danger-bg:#FDECEC;
}
/* ═══ 카드 껍데기 하나 ═══
   예전엔 r12 테두리 카드(대시)와 r16 갈색 그림자 카드(케어)가 섞여 있었다. 카드는 이 클래스 하나만 쓴다.
   기본 테마에선 테두리, 리프레시에선 무테두리+옅은 그림자 — 명도차로 띄우는 테마 문법을 그대로 따른다 */
.pb-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px}
html[data-theme=refresh] .pb-card{border:none;box-shadow:0 1px 2px rgba(0,0,0,.045)}
/* 카드 헤더 문법: [라인 아이콘] 제목 … [보조/액션] — 크기·색·간격을 여기서만 정한다 */
.pb-card-h{display:flex;align-items:center;gap:7px;font-size:calc(15px*var(--fs,1));font-weight:600;color:var(--ink);min-width:0}
.pb-card-h svg{flex-shrink:0;width:17px;height:17px;stroke:var(--ink3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pb-card-sub{font-size:calc(12px*var(--fs,1));color:var(--ink2);line-height:1.5}
.pb-card-act{border:none;background:none;padding:0;font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--primary);cursor:pointer;font-family:inherit;flex-shrink:0}

html[data-theme=refresh] .tabs{background:var(--bg)}
html[data-theme=refresh] .tabs-track{background:#E8EBEE}
html[data-theme=refresh] .pet-chip{background:#fff}
/* 하단바·알림 종은 리프레시에서도 기존 UI 그대로(2026-08-07 결정) — 라인 SVG 아이콘에
   기본 테마의 웜 팔레트를 고정한다. 리프레시 토큰(쿨그레이·블루)을 따라가면 그림과 어긋난다 */
html[data-theme=refresh] .nav{border-top-color:#E8E0D8}
html[data-theme=refresh] .nav button{color:#B0A090}
html[data-theme=refresh] .nav button.on{color:#26315A}
html[data-theme=refresh] .nav .soon-tag{background:#5B6E9C}
html[data-theme=refresh] .icon-btn{color:#7A6E60}
html[data-theme=refresh] .mvp-sheet{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* CTA 위계: 주 행동(검사지 등록)=잉크 필 하나, 보조(AI 경험담)=흰 카드 — 색 두 개짜리 CTA 정리.
   dashActions 띠가 캔버스(회색)에 녹으면서 보조 버튼도 회색 면 대신 카드 문법(순백+옅은 그림자)을 따른다 */
html[data-theme=refresh] #dashBtnLab{background:#3A6EA5!important;border-color:#3A6EA5!important;color:#fff!important}
html[data-theme=refresh] #dashBtnLab svg{stroke:#fff!important}
html[data-theme=refresh] #dashBtnStory{background:#fff!important;border-color:transparent!important;color:#333D4B!important;box-shadow:0 1px 2px rgba(0,0,0,.045)}
html[data-theme=refresh] #dashBtnStory svg{stroke:#333D4B!important}
/* 프로필 영역을 회색 캔버스 위 순백 카드로 — 칩 대신 텍스트 메타는 renderGlobalHeader가 분기.
   좌우 여백 16px: 탭·CTA·콘텐츠와 같은 정렬선(12px만 혼자 튀어나와 보이던 것 정리) */
html[data-theme=refresh] #globalProfileHeader{background:#fff!important;margin:6px 16px 0;border-radius:14px;padding:9px 12px!important}
html[data-theme=refresh] #globalIrisBadge{background:#FDF0EC!important}
/* 케어 카테고리 아이콘 타일 확대 — 색이 아이콘 타일 안에만 사는 토스 행 문법 */
html[data-theme=refresh] .care-cat-ic{width:32px!important;height:32px!important;border-radius:11px!important}
html[data-theme=refresh] .care-cat-ic svg{width:17px!important;height:17px!important}

*{margin:0;padding:0;box-sizing:border-box;
  /* 아이폰=SF Pro+Apple SD 고딕(레퍼런스와 동일), 그 외=같은 계열인 Pretendard.
     tabular-nums: 숫자를 고정폭으로 — 수치 표·타일에서 자로 잰 정렬의 핵심 */
  font-family:-apple-system,BlinkMacSystemFont,'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent}
b,strong{font-weight:600} /* 굵기 위계(700/600/500/400)에 맞춤 — 기본 bold(700)는 제목 전용 무게라 본문 강조는 600 */
html,body{height:100%;overflow:hidden}
/* iOS 사파리가 가로 회전·휴리스틱으로 글자만 임의 확대(text inflation)하면 nowrap 행이 그리드를 뚫는다 — 원천 차단 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 한국어 줄바꿈은 단어 단위로 — 글자 크기 '크게'에서 마지막 한 글자만 다음 줄로 꺾이는 것("관리예\n요") 방지.
   공백 없는 초장문·URL은 overflow-wrap이 안전망으로 끊는다 */
/* text-wrap:pretty — 마지막 줄에 한 단어만 덩그러니 남는 것(고아 줄)을 브라우저가 알아서 막는다.
   '…여기에 / 떠요.' 같은 어색한 꺾임 방지. 미지원 브라우저는 무시(기존 동작 유지) */
body{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
/* 2~3줄짜리 짧은 안내문은 줄 길이를 균등하게 나눠 준다 — '긴 줄 + 한 단어' 대신 반반 */
.mvp-empty,.care-empty,.comm-empty,.live-empty,.preview .ptx,.mvp-review-sub,
.coming-soon-sub,.mvp-rec-hd{text-wrap:balance}
/* 짧은 대화 말풍선은 balance가 확실히 낫다(3줄+마지막 11% → 2줄+91%로 정리됨).
   긴 본문(글 상세)은 balance가 적용 한계(6줄)를 넘으므로 pretty로 고아 줄만 막는다 */
.live-msg-bubble,.comm-row-title,.comm-detail-title{text-wrap:balance}
.comm-detail-body,.comm-cmt-body{text-wrap:pretty}
body{background:#C4B8AE;display:flex;justify-content:center;align-items:center;
     height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;padding:20px}

/* ═══════════════════════════
   PHONE SHELL
═══════════════════════════ */
.phone{width:390px;height:min(780px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);background:var(--bg);border-radius:36px;
  overflow:hidden;position:relative;display:flex;flex-direction:column;isolation:isolate;
  box-shadow:0 24px 56px rgba(42,33,24,.28),0 0 0 1px rgba(255,255,255,.2)}
@media(max-width:430px){
  /* 하단 주소창 예약 공간(레이아웃 뷰포트 밖)은 문서 캔버스 색으로 칠해진다 —
     흰 탭바와 한 덩어리로 이어져 보이게 흰색 고정. 띠 자체는 브라우저 몫이라 없앨 수 없음 */
  html{background:#fff}
  body{padding:0;background:var(--bg)}
  /* iOS는 페이지가 스크롤되지 않으면 svh/dvh를 툴바 확장 기준 값에 고정해 하단이 빈다.
     app-shell.js가 '실제로 보이는 높이'(visualViewport)를 --appvh로 계속 갱신 — CSS 단위는 폴백 */
  .phone{width:100%;height:100vh;height:100dvh;height:var(--appvh,100dvh);max-height:none;border-radius:0;box-shadow:none}
  /* body도 같은 높이로 묶는다. body가 더 크면 align-items:center 때문에 .phone이 세로 가운데로
     내려가 위아래에 회색 띠가 생긴다 — 키보드가 열려 --appvh가 줄었을 때 실제로 그랬다.
     위로 붙여두면 남는 공간이 생겨도 화면이 통째로 밀리지는 않는다 */
  body{align-items:flex-start;height:var(--appvh,100dvh);min-height:0}
}

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
.hdr{display:flex;align-items:center;justify-content:space-between;
     padding:18px 20px 12px;background:var(--white);flex-shrink:0;
     position:relative;z-index:var(--z-header)} /* 실선 제거 — 간격(14px 리듬)으로만 구분 */
.logo{font-size:calc(22.1px*var(--fs,1));font-weight:700;color:var(--ink);letter-spacing:-.5px}
.logo span{color:var(--primary)}
.brand-home{display:flex;align-items:center;gap:6px;border:none;background:none;color:inherit;cursor:pointer}
.brand-home:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px}
/* 라이브 전용 워드마크 — head 인라인 스크립트가 petbody.net에서 html[data-brand="net"]을
   찍으면 PetBody 대신 www.petbody.net을 보여준다(dev는 로고 옆 지표와 겹쳐 유지).
   .brand-sub(www.·.net)는 11px로 물러나고 본체 petbody만 20px로 선다. 워드마크 h1은
   테마별로 그라디언트+background-clip:text라 자식은 색을 직접 줘야 한다(아래 테마 블록). */
.brand-net{display:none}
.brand-net .brand-sub{font-size:calc(11px*var(--fs,1));letter-spacing:0;color:var(--ink2)}
html[data-brand="net"] .brand-app{display:none}
html[data-brand="net"] .brand-net{display:inline}
.hdr-r{display:flex;align-items:center;gap:8px}
/* 좌우 여백은 대칭 — 예전엔 앞의 .dot 자리를 감안해 왼쪽 8/오른쪽 10이었는데,
   dot이 display:none이 된 뒤로는 글자가 왼쪽으로 쏠려 보인다 */
.pet-chip{display:flex;align-items:center;gap:4px;background:var(--primary-pale);
          border-radius:20px;padding:5px 10px;font-size:calc(14.9px*var(--fs,1));
          font-weight:500;color:var(--primary);cursor:pointer;line-height:1.25}
.pet-chip-cv{width:11px;height:11px;flex-shrink:0;margin-right:-1px}
.pet-chip .dot{display:none}
/* 펫 없는 상태의 '반려동물+' 칩 — 헤더가 좁아 라벨을 작게 */
.pet-chip-add{font-size:calc(12.3px*var(--fs,1));padding:4px 9px}

/* ── 인증 확인 중(data-auth="pending") ──
   /api/auth/me 왕복이 끝나기 전에는 로그인 여부에 따라 달라지는 자리를 회색
   막대로 대신 채운다. 예전에는 로그아웃 화면을 먼저 그린 뒤 응답이 오면 다시
   그려서, 로그인한 사용자도 새로고침마다 "반려동물 없음"이 한 번 스쳤다.
   막대 크기는 실제 콘텐츠와 같게 잡아 레이아웃이 튀지 않게 한다. */
[data-auth="pending"] .auth-skeleton{
  border-radius:6px;
  background:linear-gradient(90deg,#EFEBE6 25%,#E4DFD8 37%,#EFEBE6 63%);
  background-size:400% 100%;
  animation:authShimmer 1.2s ease-in-out infinite;
  color:transparent!important;
}
[data-auth="pending"] #globalProfileNameRow.auth-skeleton{width:52%;height:20px}
[data-auth="pending"] #globalProfileMeta.auth-skeleton{width:78%;height:15px}
/* 로그인 칩은 응답 후에 만들어져서 헤더가 밀린다 — 자리만 미리 잡아둔다. */
[data-auth="pending"] .hdr-r::before{
  content:"";width:64px;height:28px;border-radius:20px;
  background:linear-gradient(90deg,#EFEBE6 25%,#E4DFD8 37%,#EFEBE6 63%);
  background-size:400% 100%;
  animation:authShimmer 1.2s ease-in-out infinite;
}
@keyframes authShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
  [data-auth="pending"] .auth-skeleton,
  [data-auth="pending"] .hdr-r::before{animation:none}
}
.icon-btn{width:32px;height:32px;border-radius:50%;background:var(--bg);
          display:flex;align-items:center;justify-content:center;cursor:pointer;
          color:var(--ink2);border:none;padding:0;font:inherit}
.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.icon-btn svg{width:17px;height:17px}

/* ═══════════════════════════
   TOP TABS
═══════════════════════════ */
/* 상단 탭: 알약 세그먼트 — 회색 트랙 안에서 흰 알약이 선택 탭으로 미끄러짐 */
.tabs{background:var(--white);padding:7px 16px 7px;
      flex:0 0 auto;position:relative;z-index:var(--z-tabs)} /* 실선 없음 · 좌우 16px = 대시보드 공통 거터, 위아래 간격 18px 리듬 */
.tabs-track{position:relative;display:flex;background:#F0F1F4;border-radius:13px;padding:3px} /* 밝은 회색 톤 — 앱 유틸 팔레트(#ECECEF 계열) */
.tabs-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);
           background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(42,33,24,.16);
           transition:transform .25s ease,opacity .2s}
.tabs button{flex:1;position:relative;z-index:var(--z-base);font-size:calc(14.8px*var(--fs,1));font-weight:600;
             padding:9px 0;border:none;background:none;cursor:pointer;
             transition:color .15s;letter-spacing:-.1px;color:var(--ink2)}
.tabs button.on{color:var(--primary);font-weight:600}
/* 오늘 남은 케어 개수 — 다른 탭에 있어도 '아직 할 게 있다'가 보이게. 0이면 hidden으로 사라진다 */
.tab-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;vertical-align:1px;
           min-width:calc(15px*var(--fs,1));height:calc(15px*var(--fs,1));padding:0 4px;border-radius:999px;
           background:var(--danger-tx);color:#fff;font-size:calc(10px*var(--fs,1));font-weight:600;line-height:1}
.tab-badge[hidden]{display:none}

/* ═══════════════════════════
   SCROLL
═══════════════════════════ */
.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
.scroll::-webkit-scrollbar{width:0}
.screen{display:none}
.screen.on{display:block;animation:fadeUp .18s ease}
.screen.swipe-in{animation:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 대시보드 '다음 투약' 카테고리 아이콘 — careCatMeta의 라인 아이콘을 12px로 (이모지 대체) */
.dash-care-ic{display:inline-flex;vertical-align:-2px;color:var(--ink2)}
.dash-care-ic svg{width:13px;height:13px}
/* 케어 카테고리 컬러 칩(30px) 안의 라인 아이콘 — 날짜별 케어 시트 등 */
.pb-chip-ic svg{width:16px;height:16px}

/* ═══════════════════════════
   DIVIDER
═══════════════════════════ */
.divider{height:8px;background:var(--bg)}.iris-box .lbl{font-size:calc(9.8px*var(--fs,1));font-weight:500;color:rgba(255,255,255,.7);letter-spacing:.5px}
.iris-box .num{font-size:calc(29.6px*var(--fs,1));font-weight:700;color:#fff;line-height:1;letter-spacing:-1px}
.iris-box .sub{font-size:calc(9.8px*var(--fs,1));color:rgba(255,255,255,.6)}.m-name{display:flex;align-items:center;gap:6px}
.m-name b{font-size:calc(14.9px*var(--fs,1));font-weight:600;color:var(--ink);letter-spacing:.2px}.m-badge{font-size:calc(11.1px*var(--fs,1));font-weight:600;padding:2px 7px;border-radius:5px}
.m-badge.ok{background:var(--ok-bg);color:var(--ok-tx)}
.m-badge.warn{background:var(--warn-bg);color:var(--warn-tx)}
.m-badge.bdr{background:var(--bdr-bg);color:var(--bdr-tx)}
.m-badge.danger{background:var(--danger-bg);color:var(--danger-tx)}/* 정상범위 레이블 */.m-gauge-labels .range{color:var(--ok-tx);font-weight:500}.m-trend .delta{font-size:calc(11.8px*var(--fs,1));font-weight:500;color:var(--ink3);margin-left:2px}
/* ═══════════════════════════
   커뮤니티 배너
═══════════════════════════ */
.comm-row{display:flex;align-items:center;gap:12px;background:var(--white);
          padding:14px 20px;cursor:pointer}.seg{height:100%;display:flex;align-items:center;justify-content:center;
     font-size:calc(9.8px*var(--fs,1));font-weight:600;white-space:nowrap}.acc-stat.warn{background:var(--warn-bg);color:var(--warn-tx)}
.acc-stat.ok{background:var(--ok-bg);color:var(--ok-tx)}
.chev{color:var(--ink3);transition:.2s;display:flex}
.chev svg{width:14px;height:14px}
.acc-grp.open .chev{transform:rotate(180deg)}
.acc-grp.open .acc-nm{color:var(--primary)}.acc-grp.open .acc-body{display:block}.trail .col{flex:1;text-align:center;font-size:calc(13.5px*var(--fs,1));color:var(--ink2);font-weight:600}
.trail .col.cur{font-size:calc(16px*var(--fs,1));font-weight:700;color:var(--ink)}
.sub-head .trail .col{font-size:calc(11.8px*var(--fs,1));color:var(--ink3);font-weight:500}
.sub-head .trail .col.cur{color:var(--primary);font-size:calc(11.8px*var(--fs,1))}.vtag.warn{background:var(--warn-bg);color:var(--warn-tx)}
.vtag.ok{background:var(--ok-bg);color:var(--ok-tx)}
.vtag.neu{background:var(--bg);color:var(--ink3)}.todo{display:flex;align-items:center;gap:12px;padding:12px 20px;
      border-bottom:1px solid var(--line);cursor:pointer}
.todo:last-child{border:none}
.ck{width:22px;height:22px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:.15s}
.ck.done{background:var(--primary);color:#fff}
.ck.done svg{width:12px;height:12px}
.ck.todo2{border:2px solid var(--line)}
.todo .tt b{font-size:calc(15.4px*var(--fs,1));font-weight:500;color:var(--ink)}
.todo .tt .s{font-size:calc(12.9px*var(--fs,1));color:var(--ink2);margin-top:1px}
.done-tx{color:var(--ink3)!important;text-decoration:line-through}.reg-txt .s{font-size:calc(12.9px*var(--fs,1));color:var(--ink2);margin-top:2px}.care-empty{padding:18px 16px;text-align:center;color:var(--ink2);font-size:calc(13px*var(--fs,1));line-height:1.5}
.care-card{position:relative;overflow:hidden;border-radius:12px;background:#fff;border:1px solid #ECECEF}
.care-card-inner{display:flex;align-items:center;gap:12px;padding:13px 14px;background:#fff;transform:translateX(0);transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
.care-card .delete-action{position:absolute;right:0;top:0;bottom:0;width:80px;background:#FF3B30;display:flex;align-items:center;justify-content:center;font-size:calc(16px*var(--fs,1));font-weight:500;color:#fff;cursor:pointer;transform:translateX(80px);transition:transform .25s}
.care-kebab{border:none;background:transparent;color:#B0A898;font-size:calc(20.9px*var(--fs,1));font-weight:600;padding:2px 8px;align-self:flex-start;cursor:pointer;font-family:inherit;letter-spacing:1.5px;flex-shrink:0}
.care-menu-row{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;padding:13px 6px;font-size:calc(16px*var(--fs,1));font-weight:500;color:var(--ink);border-bottom:1px solid #F0F1F4;font-family:inherit;text-align:left;cursor:pointer}
.care-menu-row:last-child{border-bottom:none}
.care-menu-row.del{color:#B83A2A}
.tc-custom{display:flex;align-items:center;gap:4px;padding:5px 8px}
/* 92px 고정은 한국어 '오전 12:00' + iOS 네이티브 시계 아이콘을 못 담아 '오전 12:'로 잘렸다.
   글자 크기 설정에 따라 같이 늘어나야 하므로 --fs를 태운다 */
.tc-custom input[type=time]{border:none;background:transparent;font-family:inherit;font-size:calc(16px*var(--fs,1));font-weight:500;color:var(--primary);outline:none;width:calc(124px*var(--fs,1));max-width:100%}
.tc-x{color:var(--ink3);font-weight:600;cursor:pointer;padding:0 3px;font-size:calc(15.4px*var(--fs,1))}
.freq-extra{display:none;gap:6px;flex-wrap:wrap;margin-top:8px}
.wd,.wn{padding:7px 11px;border-radius:9px;background:var(--white);border:1.5px solid var(--line);font-size:calc(13.8px*var(--fs,1));font-weight:500;color:var(--ink2);cursor:pointer;user-select:none}
.wd.on,.wn.on{background:var(--primary-pale);border-color:var(--primary);color:var(--primary)}
.care-start,.care-amount{width:100%;box-sizing:border-box;min-width:0;-webkit-appearance:none;appearance:none;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:calc(15.4px*var(--fs,1));font-family:inherit;color:var(--ink);background:var(--white);outline:none}.care-cat-ic svg{width:15px;height:15px}
.care-tab-btn{flex-shrink:0;border:1.5px solid var(--line);border-radius:20px;padding:6px 14px;font-size:calc(14.9px*var(--fs,1));font-weight:500;background:#fff;color:var(--ink2);cursor:pointer}
.care-tab-btn.on{background:var(--primary);color:#fff;border:1.5px solid var(--primary)}
#careTabBar::-webkit-scrollbar{display:none}
.today-care-item:last-child{border-bottom:none!important}.ti-dot.f{background:#D8E8D8;color:#3A6830}
.ti-dot.d{background:#F5EAE0;color:#8A4820}
.ti-dot.m{background:#EDE4F6;color:#7B5EA7}.ti-body .s{font-size:calc(12.9px*var(--fs,1));color:var(--ink2);margin-top:1px}
.ti-body .dt{font-size:calc(11.8px*var(--fs,1));color:var(--ink3);margin-top:2px}
/* ═══════════════════════════
   BOTTOM NAV
═══════════════════════════ */
.nav{position:absolute;bottom:0;left:0;right:0;background:#fff;
     border-top:1px solid var(--line);
     display:flex;min-height:var(--nav-h);padding:8px 0 calc(10px + env(safe-area-inset-bottom));z-index:var(--z-nav)}
.nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;
            align-items:center;justify-content:center;gap:3px;font-size:calc(11.8px*var(--fs,1));font-weight:500;
            color:var(--ink3);cursor:pointer;transition:.15s}
.nav button svg{width:calc(20.24px*var(--fs,1));height:calc(20.24px*var(--fs,1))}/* 보통=20.24px, 글자 크기 설정(--fs)에 글자와 같이 스케일 */
.nav button.on{color:var(--primary)}
/* 추후 오픈 예정 탭 배지 (커뮤니티·채팅) — 잠금 해제 시 index.html의 .soon-tag와 함께 제거 */
.nav .soon-tag{font-size:calc(8.5px*var(--fs,1));font-weight:700;color:#fff;background:var(--primary-mid);border-radius:999px;padding:1px 5px;line-height:1.3;margin-top:-1px}

/* ═══════════════════════════
   케어 등록
═══════════════════════════ */
.reg-screen{display:none;position:absolute;inset:0;background:var(--bg);
            z-index:var(--z-screen);flex-direction:column;overflow:hidden}
.reg-screen.on{display:flex}
.reg-hdr{display:flex;align-items:center;justify-content:space-between;
         padding:16px 20px 12px;background:var(--white);
         border-bottom:1px solid var(--line);flex-shrink:0}
.reg-hdr .back{display:flex;align-items:center;gap:2px;font-size:calc(16px*var(--fs,1));
               color:var(--ink2);font-weight:500;cursor:pointer;background:none;border:none}
.reg-hdr .back svg{width:16px;height:16px}
.reg-hdr h2{font-size:calc(18.5px*var(--fs,1));font-weight:700;color:var(--ink)}
.reg-hdr .save{font-size:calc(16px*var(--fs,1));color:var(--primary);font-weight:600;
               background:none;border:none;cursor:pointer}
.reg-body{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:20px}
.reg-body::-webkit-scrollbar{width:0}

.cat{display:flex;gap:7px;padding:16px 20px 0}
.cat button{flex:1;background:var(--white);border:1.5px solid var(--line);
            border-radius:var(--r-btn);padding:9px 4px;font-size:calc(14.2px*var(--fs,1));font-weight:500;
            color:var(--ink2);display:flex;align-items:center;justify-content:center;
            gap:4px;cursor:pointer;transition:.15s}
.cat button svg{width:13px;height:13px}
.cat button.on{background:var(--primary);border-color:transparent;color:#fff}

.form{padding:14px 20px 0}
.field{margin-bottom:16px}
.field label{display:block;font-size:calc(14.2px*var(--fs,1));font-weight:600;color:var(--ink);margin-bottom:6px}
.field label .req{color:var(--primary)}
.select-box{width:100%;background:var(--white);border:1.5px solid var(--line);
            border-radius:var(--r-btn);padding:12px 14px;font-size:calc(16px*var(--fs,1));font-weight:500;
            color:var(--ink);display:flex;align-items:center;
            justify-content:space-between;cursor:pointer}
.select-box svg{width:14px;height:14px;color:var(--ink2)}
.select-box.open{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,79,186,.1)}
.dd{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-btn);
    margin-top:5px;max-height:230px;overflow:hidden;box-shadow:var(--shadow)}
.dd-search{padding:9px 13px;border-bottom:1px solid var(--line);
           display:flex;align-items:center;gap:7px}
.dd-search svg{width:14px;height:14px;color:var(--ink3)}
.dd-search input{flex:1;border:none;outline:none;font-size:calc(16px*var(--fs,1));
                 color:var(--ink);background:transparent;font-family:inherit}
.dd-list{max-height:185px;overflow-y:auto}
/* 검색창이 있는 드롭다운(투약·사료)은 목록을 낮게 — 검색창+목록+'기타' 행 합이 .dd max-height(230px)를 넘어 기타 행이 잘리던 문제 */
.dd-search+.dd-list{max-height:140px}
/* 사료·약 선택은 예외 — 목록이 140px면 서너 줄뿐이라 '찾기 어렵다' 그대로. 캡 해제하고 시원하게 */
#feedDD,#medDD{max-height:none}
#feedDD .dd-search+.dd-list,#medDD .dd-search+.dd-list{max-height:300px}
.brand-h{font-size:calc(12.3px*var(--fs,1));font-weight:600;color:var(--primary);
         padding:8px 13px 3px;background:var(--bg);letter-spacing:.2px}
.opt{padding:9px 13px;display:flex;align-items:center;gap:9px;
     border-bottom:1px solid var(--line);cursor:pointer}
.opt:last-child{border:none}
.opt .nm{font-size:calc(15.4px*var(--fs,1));font-weight:500;color:var(--ink);flex:1}
.opt .nm small{display:block;font-size:calc(11.8px*var(--fs,1));color:var(--ink3);font-weight:500;margin-top:1px}
.opt.sel{background:var(--primary-pale)}
.opt.sel .nm{color:var(--primary)}
.opt .ck-r{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);
           flex-shrink:0;display:flex;align-items:center;justify-content:center}
.opt.sel .ck-r{background:var(--primary);border-color:var(--primary);color:#fff}
.opt.sel .ck-r svg{width:10px;height:10px}
.form-tag{display:inline-flex;align-items:center;justify-content:center;
          font-size:calc(11.1px*var(--fs,1));font-weight:600;padding:2px 0;border-radius:4px;width:30px;flex-shrink:0}
.tag-dry{background:#F4EFE4;color:#8B6A38}
.tag-wet{background:#E0EDF5;color:#2B7FBF}
.opt-other{padding:10px 13px;font-size:calc(14.2px*var(--fs,1));font-weight:500;color:var(--primary);
           display:flex;align-items:center;gap:5px;background:var(--bg);
           border-top:1px solid var(--line);cursor:pointer}
.opt-other svg{width:13px;height:13px}

.freq-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.freq-btn{background:var(--white);border:1.5px solid var(--line);border-radius:10px;
          padding:10px;font-size:calc(14.9px*var(--fs,1));font-weight:500;color:var(--ink2);cursor:pointer;transition:.15s}
.freq-btn.on{border-color:var(--primary);background:var(--primary-pale);color:var(--primary)}
/* 사료 역할 칩 — freq-btn과 같은 룩이지만 별도 클래스 (submitCare가 .freq-btn.on을 주기로 읽으므로 분리 필수) */
.role-btn{background:var(--white);border:1.5px solid var(--line);border-radius:10px;
  padding:10px 0;font-size:calc(14.9px*var(--fs,1));font-weight:500;color:var(--ink2);cursor:pointer;font-family:inherit}
.role-btn.on{border-color:var(--primary);background:var(--primary-pale);color:var(--primary)}

.time-chips{display:flex;gap:7px;flex-wrap:wrap}
.tc{padding:7px 11px;border-radius:9px;background:var(--white);border:1.5px solid var(--line);
    font-size:calc(14.9px*var(--fs,1));font-weight:500;color:var(--ink2);display:flex;
    align-items:center;gap:5px;cursor:pointer;transition:.15s}
.tc.on{background:var(--primary-pale);border-color:var(--primary);color:var(--primary)}
.tc svg{width:12px;height:12px}

.preview{background:var(--primary-pale);border-radius:8px;padding:11px 13px;
         margin:10px 20px 0;display:flex;gap:8px;align-items:flex-start}
.preview svg{width:14px;height:14px;color:var(--primary);flex-shrink:0;margin-top:1px}
.preview .ptx{font-size:calc(14.2px*var(--fs,1));color:var(--ink2);line-height:1.55}
.preview .ptx b{font-weight:600;color:var(--primary)}

.subform{display:none}
.subform.on{display:block;animation:fadeUp .2s ease}

/* ═══════════════════════════
   INFO MODAL
═══════════════════════════ */
.modal-bg{display:none;position:absolute;inset:0;background:rgba(0,0,0,.4);
          z-index:var(--z-modal-top);align-items:flex-end}
.modal-bg.on{display:flex}
.modal{background:var(--white);border-radius:20px 20px 0 0;width:100%;
       max-height:76%;overflow-y:auto;padding:8px 20px 24px;
       animation:slideup .25s ease;position:relative}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.modal-grab{width:36px;height:4px;background:var(--line);border-radius:2px;margin:6px auto 12px}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;
             cursor:pointer;color:var(--ink2)}
.modal-close svg{width:20px;height:20px}
.modal h3{font-size:calc(21px*var(--fs,1));font-weight:700;color:var(--ink);letter-spacing:-.3px;margin-bottom:2px}
.modal .subt{font-size:calc(14.2px*var(--fs,1));color:var(--ink2);margin-bottom:14px}
.modal-sec{margin-bottom:13px}
.modal-sec b{display:block;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--primary);
             margin-bottom:5px;letter-spacing:.2px}
.modal-sec p{font-size:calc(15.4px*var(--fs,1));line-height:1.65;color:var(--ink)}
.range-tbl{display:grid;grid-template-columns:1fr auto;gap:5px 14px;
           font-size:calc(14.9px*var(--fs,1));background:var(--bg);border-radius:10px;padding:10px 13px}
.range-tbl .lab{font-weight:500}
.range-tbl .val{font-weight:600;text-align:right}
.range-tbl .ok{color:var(--ok-tx)}.range-tbl .warn{color:var(--warn-tx)}.range-tbl .bad{color:var(--up)}
.vet-box{background:var(--primary-pale);border-radius:8px;padding:10px 12px;
         display:flex;gap:8px;align-items:flex-start;font-size:calc(14.2px*var(--fs,1));
         color:var(--ink2);line-height:1.5}
.vet-box svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;color:var(--primary)}
.vet-box b{font-weight:600;color:var(--ink)}

/* ═══════════════════════════
   TOAST
═══════════════════════════ */
.toast{position:absolute;top:76px;left:50%;
       transform:translateX(-50%) translateY(-12px);
       background:rgba(13,27,42,.9);color:#fff;padding:9px 18px;
       border-radius:24px;font-size:calc(15.4px*var(--fs,1));font-weight:500;z-index:var(--z-toast);
       opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ RAG 채팅 (이식) — 갈색 톤 ═══ */
/* AI 채팅일 때는 scroll 컨테이너를 flex 박스로 (스크롤은 채팅 내부 feed가 담당) */
/* 하단 여백 = 내비 실측 높이 + (안전영역 또는 키보드 높이 중 큰 값).
   --nav-h는 최소값이라 '예정' 배지·글자 크게에서 내비가 더 커지면 입력창이 그만큼 가려진다
   → app-shell.js가 실측해 넣는 --nav-real-h를 쓰고, 없으면 상수로 폴백.
   폰 폭에서는 .phone 자체가 --appvh로 줄어 --kb가 0이고, 프레임 고정인 넓은 화면에서만 --kb가 붙는다 */
.scroll.rag-mode{ padding-bottom:calc(var(--nav-real-h, var(--nav-h)) + max(env(safe-area-inset-bottom,0px), var(--kb,0px))); overflow:hidden; display:flex; }
#screen-ai{ padding:0 !important; }
#screen-ai.on{ display:flex; flex-direction:column; flex:1; min-height:0; }
.ragchat{ display:flex; flex-direction:column; flex:1; min-height:0; width:100%; }
/* 타이틀바는 숨김 — 종 선택/서버상태 요소는 JS(currentSpecies 등)가 참조하므로 DOM에는 남긴다 */
.rag-titlebar{ display:none; }
/* AI 전체화면 타이틀: "경험담 찾기" + 히스토리 토글 (뒤로가기·종선택·상태배지 없음 — 홈 복귀는 로고 탭) */
body.ai-fullscreen .rag-titlebar{ display:flex; align-items:center; gap:0; padding:8px 16px 6px; background:var(--white); flex-shrink:0; }
/* 대화 히스토리 드로어 (GPT식 좌측 사이드바) — localStorage MVP.
   토글 버튼: 터치 영역 34px, 아이콘 23px — 버튼 내부 여백(5.5px)이 제목과의 시각 간격 역할 */
.rag-hist-btn{ width:34px; height:34px; border-radius:8px; border:none; background:transparent; color:var(--ink); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0; }
.rag-hist-btn:active{ background:#F5F2EE; }
.rag-hist-btn svg{ width:23px; height:23px; display:block; }
.rag-drawer-dim{ position:fixed; inset:0; background:rgba(42,33,24,.38); z-index:var(--z-drawer-dim); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.rag-drawer{ position:fixed; top:0; left:0; bottom:0; width:min(80vw,300px); background:var(--white); z-index:var(--z-drawer); transform:translateX(-102%); transition:transform .22s ease; display:flex; flex-direction:column; border-radius:0 22px 22px 0; overflow:hidden; }
body.rag-drawer-open .rag-drawer-dim{ opacity:1; visibility:visible; }
body.rag-drawer-open .rag-drawer{ transform:none; }
.rag-drawer-head{ padding:12px 12px 8px; flex-shrink:0; }
.rag-newchat{ display:flex; align-items:center; gap:8px; width:100%; border:1px solid var(--line); border-radius:14px; background:var(--primary-pale); color:var(--primary); font-size:calc(15.5px*var(--fs,1)); font-weight:600; padding:12px 14px; cursor:pointer; font-family:inherit; }
.rag-threads{ flex:1; overflow-y:auto; padding:4px 0 8px; min-height:0; }
/* 심플 리스트(제목만) + 스와이프 삭제: 행을 왼쪽으로 밀면 뒤의 휴지통 사각형이 드러난다 */
.rag-thread-wrap{ position:relative; overflow:hidden; }
.rag-thread-del{ position:absolute; top:0; right:0; bottom:0; width:64px; border:none; background:var(--danger-bg); color:var(--danger-tx); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.rag-thread-del svg{ width:19px; height:19px; }
.rag-thread{ position:relative; background:var(--white); padding:13px 16px; cursor:pointer; transition:transform .18s ease; }
.rag-thread-wrap.open .rag-thread{ transform:translateX(-64px); }
@media (hover:hover){ .rag-thread-wrap:hover .rag-thread{ transform:translateX(-64px); } }
.rag-thread-title{ font-size:calc(15.5px*var(--fs,1)); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rag-thread.cur .rag-thread-title{ font-weight:600; }
.rag-threads-empty{ padding:26px 16px; font-size:calc(14.3px*var(--fs,1)); color:var(--ink3); text-align:center; }
.rag-drawer-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); font-size:calc(13px*var(--fs,1)); color:var(--ink2); flex-shrink:0; }
.rag-title{ font-size:calc(18.2px*var(--fs,1)); font-weight:600; color:var(--ink); }
.rag-species{ border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); font-size:calc(13.5px*var(--fs,1)); font-weight:600; padding:4px 8px; outline:none; }
.rag-status{ font-size:calc(12.3px*var(--fs,1)); padding:3px 8px; border-radius:999px; font-weight:500; }
.rag-status.on{ background:var(--ok-bg); color:var(--ok-tx); }
.rag-status.off{ background:var(--danger-bg); color:var(--danger-tx); }
.rag-feed{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--bg); min-height:0; }
.rag-row{ display:flex; }
/* 질문이 한 턴의 시작 — 위쪽에 여백을 줘서 구분선 없이도 답변과 답변 사이가 나뉜다 */
.rag-row.me{ justify-content:flex-end; margin-top:10px; }
.rag-row.me:first-child{ margin-top:0; }
.rag-bubble{ max-width:88%; border-radius:16px; padding:11px 14px; font-size:calc(16px*var(--fs,1)); line-height:1.6; }
/* 답변은 말풍선이 아니다 — 대화 한 마디가 아니라 '읽는 글'이라 폭이 넓을수록 낫다.
   390px 폰에서 말풍선(88% + 좌우 패딩 14)이 쓸 수 있는 343px 중 272px만 써서 21%를 버렸다.
   질문 말풍선만 남겨도 누가 말했는지는 충분히 구분된다 */
.rag-bubble.ai{ background:none; border:none; color:var(--ink); max-width:100%; width:100%; padding:0; border-radius:0; }
/* 표는 회색 캔버스에 그냥 올리면 줄 구분선이 묻힌다 — 표만 흰 배경으로 감싼다.
   collapse면 radius가 안 먹어서 separate + border-spacing:0 */
.rag-bubble.ai table{ background:var(--white); border:1px solid var(--line); border-radius:10px;
                      border-collapse:separate; border-spacing:0; overflow:hidden; }
.rag-bubble.ai tr:last-child td{ border-bottom:none; }
/* 오류·한도 안내 같은 짧은 시스템 메시지는 읽는 글이 아니라 한 마디 — 말풍선을 유지한다 */
.rag-bubble.ai.sys{ background:var(--white); border:1px solid var(--line); max-width:88%; width:auto;
                    padding:11px 14px; border-radius:16px; }
.rag-bubble.me{ background:var(--primary); color:#fff; white-space:pre-wrap; }
.rag-bubble p{ margin:6px 0; } .rag-bubble p:first-child{ margin-top:0; } .rag-bubble p:last-child{ margin-bottom:0; }
.rag-bubble ul{ margin:6px 0; padding-left:18px; } .rag-bubble li{ margin-bottom:4px; }
.rag-bubble table{ width:100%; border-collapse:collapse; font-size:calc(17.1px*var(--fs,1)); margin:8px 0; }
.rag-bubble th{ background:var(--primary-pale); color:var(--primary); font-weight:500; text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.rag-bubble td{ padding:6px 8px; border-bottom:1px solid var(--line); }
.rag-lead{ font-weight:500; color:var(--primary); }
.rag-disc{ font-size:calc(13.5px*var(--fs,1)); color:var(--ink3); margin-top:8px; }
.rag-cursor{ display:inline-block; width:7px; height:14px; margin-left:2px; background:var(--primary); border-radius:1px; vertical-align:text-bottom; animation:ragblink 1s step-start infinite; }
@keyframes ragblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.rag-typing{ font-size:calc(16px*var(--fs,1)); color:var(--ink2); }
.rag-case-chip{ display:inline-block; background:var(--primary-pale); color:var(--primary); font-size:calc(12.6px*var(--fs,1)); font-weight:500; border-radius:10px; padding:0 8px; margin-right:4px; white-space:nowrap; vertical-align:1px; }
/* 유사사례 인용 카드(merge3 이식): 회색 헤더(누끼 로고+라벨) + 흰 본문. 회색 톤은 앱 공용(#F4F5F7/#ECECEF) */
.rag-case-card{ background:var(--white); border:1px solid #ECECEF; border-radius:14px; margin:10px 0; overflow:hidden; box-shadow:0 2px 8px rgba(42,33,24,.06); }
.rag-case-card-head{ display:flex; align-items:center; gap:6px; padding:8px 12px; background:#F4F5F7; border-bottom:1px solid #ECECEF; }
.rag-case-card-logo{ width:34px; height:34px; flex-shrink:0; display:block; margin:-4px 0; }
.rag-case-card-t{ font-size:calc(12.8px*var(--fs,1)); font-weight:600; color:var(--primary); letter-spacing:-.2px; }
.rag-case-card-body{ padding:10px 12px; font-size:calc(15.2px*var(--fs,1)); color:#4A4036; }
.rag-case-card-body p{ margin:0; }
.rag-case-card-body p+p{ margin-top:5px; }
.rag-debug{ align-self:stretch; font-size:calc(12.9px*var(--fs,1)); color:var(--ink3); background:var(--white); border:1px dashed var(--line); border-radius:10px; padding:8px 10px; }
.rag-debug b{ color:var(--ink2); }
.rag-debug details{ margin-top:6px; border-top:1px dashed var(--line); padding-top:6px; }
.rag-debug summary{ cursor:pointer; font-weight:500; color:var(--ink2); user-select:none; }
.rag-dbg-head{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.rag-dbg-muted{ color:var(--ink3); opacity:.85; }
.rag-dbg-kv{ display:flex; gap:6px; margin-top:3px; }
.rag-dbg-k{ flex-shrink:0; min-width:86px; font-weight:600; color:var(--ink2); }
.rag-dbg-v{ word-break:break-all; white-space:pre-wrap; }
.rag-dbg-item{ margin-top:6px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg,#fafafa); }
.rag-dbg-item.kept{ border-left:3px solid var(--primary); }
.rag-dbg-item.dropped{ border-left:3px solid #c96a6a; opacity:.8; }
.rag-dbg-item-top{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
.rag-dbg-rank{ font-weight:500; color:var(--ink2); }
.rag-dbg-score{ font-family:ui-monospace,Consolas,monospace; font-size:calc(12.1px*var(--fs,1)); color:var(--ink3); }
.rag-dbg-title{ font-weight:600; color:var(--primary); text-decoration:none; word-break:break-all; }
a.rag-dbg-title:hover{ text-decoration:underline; }
.rag-dbg-snippet{ margin-top:3px; color:var(--ink3); word-break:break-all; }
.rag-dbg-role{ margin-top:8px; font-weight:500; color:var(--ink2); font-family:ui-monospace,Consolas,monospace; }
.rag-dbg-pre{ margin:3px 0 0; padding:8px; max-height:280px; overflow:auto; white-space:pre-wrap; word-break:break-all; background:#f4f5f7; border:1px solid var(--line); border-radius:8px; font-family:ui-monospace,Consolas,monospace; font-size:calc(12.3px*var(--fs,1)); line-height:1.5; }
.rag-dbg-copy{ margin-top:6px; padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink2); font-size:calc(12.9px*var(--fs,1)); cursor:pointer; }
.rag-dbg-copy:hover{ background:#f4f5f7; }
.rag-input{ display:flex; align-items:flex-end; gap:8px; padding:12px; background:var(--white); flex-shrink:0; }
.rag-input textarea{ flex:1 1 0; min-width:0; width:0; border:1px solid var(--line); border-radius:20px; padding:11px 16px; font-size:calc(16px*var(--fs,1)); outline:none; color:var(--ink); background:var(--white); resize:none; max-height:120px; overflow-y:auto; line-height:1.5; font-family:inherit; }
.rag-input button{ width:44px; height:44px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:calc(22.1px*var(--fs,1)); cursor:pointer; flex-shrink:0; }
.rag-input button:disabled{ background:var(--ink3); cursor:default; }
/* 진료 리포트 인쇄(= iOS에선 'PDF로 저장') — 앱 크롬은 다 숨기고 리포트 카드만 한 장으로.
   .phone의 고정 높이·overflow를 풀지 않으면 카드가 잘려 인쇄된다 */
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  .phone{height:auto!important;max-height:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
  .hdr,.nav,#globalProfileHeader,#toptabs,#compactBar,.screen,#toast,.mvp-sheet-hd,
  .mvp-modal-bg:not(#mvpVetReport){display:none!important}
  #mvpVetReport{position:static!important;display:block!important;background:none!important;inset:auto!important}
  #mvpVetReport .mvp-sheet{max-height:none!important;overflow:visible!important;box-shadow:none!important;border-radius:0!important;padding:0!important;background:#fff!important}
  #mvpVetReport button{display:none!important}
  #vetReportSheet{border:none!important;padding:0!important}
}
/* 커뮤니티·채팅: 프로필 카드(96px)+상단탭(55px)을 한 줄 요약바(34px)로 대체 —
   상단탭은 홈 전용 메뉴라 이 화면에선 쓸모가 없고, 고정영역이 40%나 차지했다 */
body.chrome-compact #globalProfileHeader,
body.chrome-compact #toptabs{ display:none !important; }
body.chrome-compact #compactBar{ display:flex !important; }
/* AI 상담: 프로필 카드·상단탭만 숨겨 대화 공간을 넓힌다. 하단 내비는 항상 남긴다 —
   숨겼더니 이 화면을 빠져나갈 길이 로고뿐이라 갇힌 느낌이었다.
   입력창을 누를 때 내비를 잠시 내리던 규칙(rag-composing)은 제거(2026-08-07):
   폰에서는 .phone 높이가 --appvh라 키보드가 열리면 프레임째 줄고 내비가 키보드 바로 위로
   따라 올라온다. 즉 내비가 입력창을 가릴 일이 없는데도 탭할 때마다 사라져 화면이 덜컹였다. */
body.ai-fullscreen #globalProfileHeader,
body.ai-fullscreen #toptabs{ display:none !important; }

/* ══ 설정 ══ */
.set-wrap{padding:14px 14px 8px}
.set-title{font-size:calc(19.3px*var(--fs,1));font-weight:600;color:var(--ink);margin:2px 4px 10px}
/* 가로 스크롤 컨테이너(타임라인 차트·신장수치 표·지표 타일) — OS 기본 스크롤바 대신 앱 톤의 얇은 바 */
.hscroll{scrollbar-width:thin;scrollbar-color:#E8E2DA transparent}
.hscroll::-webkit-scrollbar{height:4px;width:4px}
.hscroll::-webkit-scrollbar-thumb{background:#E8E2DA;border-radius:2px}
.hscroll::-webkit-scrollbar-thumb:hover{background:#D8CFC2}
.hscroll::-webkit-scrollbar-track{background:transparent}
.hscroll::-webkit-scrollbar-button{display:none;width:0;height:0}
.set-label{font-size:calc(13.2px*var(--fs,1));font-weight:600;color:#8A8078;margin:0 6px 6px}
.set-card{background:var(--white);border:1px solid #ECECEF;border-radius:14px;margin-bottom:12px;overflow:hidden}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border:none;border-bottom:1px solid #F0F1F4;background:transparent;width:100%;text-align:left;cursor:pointer;font-family:inherit}
/* 왼쪽 텍스트 칸은 줄어들 수 있어야 한다 — 설명이 한 줄 고정(nowrap)이라 min-width가 풀려 있지
   않으면 그 문장 길이만큼 칸이 버텨서 오른쪽 컨트롤(작게/보통/크게)이 밖으로 밀려난다 */
.set-row>:first-child{min-width:0;flex:1}
.set-row>:last-child{flex-shrink:0}
.set-row:last-child{border-bottom:none}
.set-row-t{font-size:calc(15.4px*var(--fs,1));font-weight:500;color:var(--ink)}
.set-chev{color:var(--ink3);font-size:calc(16.5px*var(--fs,1));flex-shrink:0}
.set-val{font-size:calc(13.8px*var(--fs,1));color:var(--ink2)}.set-toggle{width:44px;height:26px;border-radius:999px;background:#D6D9E0;position:relative;flex-shrink:0;border:none;cursor:pointer;transition:background .18s;padding:0}
.set-toggle.on{background:var(--primary)}
.set-toggle::after{content:'';width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:left .18s}
.set-toggle.on::after{left:21px}

/* ══ 커뮤니티 ══ */
.comm-head{position:sticky;top:0;z-index:var(--z-sticky);background:var(--white);border-bottom:1px solid var(--line)}
.comm-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.comm-topbar h2{font-size:calc(18.5px*var(--fs,1));font-weight:600;color:var(--ink);letter-spacing:-.3px;margin:0}
.comm-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 16px 12px}
.comm-cats::-webkit-scrollbar{display:none}
.comm-cats button{flex-shrink:0;border:1px solid var(--line);background:var(--white);color:var(--ink2);font-size:calc(14.2px*var(--fs,1));font-weight:500;padding:7px 12px;border-radius:999px;cursor:pointer;transition:.15s}
.comm-cats button.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.comm-write{flex-shrink:0;display:flex;align-items:center;gap:5px;border:none;background:var(--primary-pale);color:var(--primary);font-size:calc(14.2px*var(--fs,1));font-weight:600;padding:8px 13px;border-radius:999px;cursor:pointer}
.comm-write svg{width:13px;height:13px}
.comm-feed{background:var(--white);margin:0 0 16px;border-top:1px solid #F0F1F4;overflow:hidden;display:flex;flex-direction:column}
.comm-row{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid #F0F1F4;cursor:pointer}
.comm-row:last-child{border-bottom:none}
.comm-row.comm-new-hl{animation:commPulse 1.4s ease 2}
@keyframes commPulse{0%,100%{background:var(--white)}50%{background:var(--primary-pale)}}
.comm-row-main{flex:1;min-width:0}
.comm-row-title{font-size:calc(14px*var(--fs,1));font-weight:500;color:var(--ink);line-height:1.35;letter-spacing:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;text-wrap:nowrap}
.comm-newdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#E24B4B;vertical-align:middle;margin:-2px 5px 0 0}
.comm-tag{font-weight:600;margin-right:4px}
.comm-tag.question{color:var(--primary-mid)}
.comm-tag.experience{color:var(--ok-tx)}
.comm-tag.daily{color:var(--warn-tx)}
.comm-tag.general{color:var(--ink3)}
.comm-tag.notice{color:var(--primary)}
/* 운영자 배지 — 작성자 이름 옆. 이름이 길어도 줄어들지 않게 flex-shrink:0 */
.comm-admin{font-size:calc(10.5px*var(--fs,1));font-weight:700;color:#fff;background:var(--primary);border-radius:999px;padding:1px 6px;margin-left:5px;line-height:1.5;flex-shrink:0;white-space:nowrap}
.comm-name .comm-admin{vertical-align:1px}
.comm-row-meta{margin-top:5px;font-size:calc(11.8px*var(--fs,1));color:var(--ink3);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.comm-row-meta b{color:var(--ink2);font-weight:500}
/* 좁을 때 조회·공감 숫자가 오른쪽 끝에서 뭉텅 잘리는 대신 작성자 이름이 말줄임되게 —
   숫자·날짜는 고정폭, 이름만 줄어든다 */
.comm-row-meta>*{flex-shrink:0}
.comm-row-meta b{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.comm-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bg)}
.comm-cmtbox{flex-shrink:0;min-width:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 4px}
.comm-cmtbox b{font-size:calc(16.6px*var(--fs,1));font-weight:600;color:var(--ink2)}
.comm-cmtbox span{font-size:calc(11.1px*var(--fs,1));color:var(--ink3);font-weight:500}
.comm-cmtbox.has{background:none}
.comm-cmtbox.has b{color:var(--primary)}
.comm-empty{text-align:center;color:var(--ink3);font-size:calc(14.9px*var(--fs,1));padding:44px 0 24px;line-height:1.8}
.comm-empty b{display:block;font-size:calc(16px*var(--fs,1));color:var(--ink2);margin-bottom:2px}
/* 상세 시트의 작성자 줄 */
.comm-card-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.comm-ava{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(14.9px*var(--fs,1));font-weight:600;color:#fff;flex-shrink:0}
.comm-who{flex:1;min-width:0}
.comm-name{font-size:calc(14.2px*var(--fs,1));font-weight:600;color:var(--ink)}
.comm-time{font-size:calc(12.3px*var(--fs,1));color:var(--ink3);margin-top:1px}
.comm-badge{font-size:calc(12.3px*var(--fs,1));font-weight:600;padding:3px 9px;border-radius:999px;flex-shrink:0}
.comm-badge.question{background:var(--primary-pale);color:var(--primary-mid)}
.comm-badge.experience{background:var(--ok-bg);color:var(--ok-tx)}
.comm-badge.daily{background:var(--warn-bg);color:var(--warn-tx)}
.comm-badge.general{background:var(--bg);color:var(--ink2)}
.comm-badge.notice{background:var(--primary);color:#fff}
/* 사진 첨부 */
.comm-photo-row{display:flex;gap:8px;margin:2px 0 4px;flex-wrap:wrap}
.comm-photo-add{width:64px;height:64px;border-radius:12px;border:1.5px dashed var(--line);background:#fff;color:var(--ink3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:calc(11.9px*var(--fs,1));font-weight:500;cursor:pointer}
.comm-photo-add svg{width:17px;height:17px}
.comm-photo-item{position:relative;width:64px;height:64px}
.comm-photo-item img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.comm-photo-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:none;background:var(--ink);color:#fff;font-size:calc(14.2px*var(--fs,1));line-height:1;cursor:pointer;padding:0}
.comm-detail-imgs{display:flex;flex-direction:column;gap:8px;margin:12px 0 2px}
.comm-detail-imgs img{width:100%;border-radius:12px;display:block}
/* 게시글 공감(좋아요) 버튼 */
.comm-like-row{display:flex;justify-content:center;margin:14px 0 2px}
.comm-like{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--white);color:var(--ink2);border-radius:999px;padding:8px 16px;font-size:calc(13.5px*var(--fs,1));font-weight:500;font-family:inherit;cursor:pointer}
.comm-like b{font-weight:600;color:inherit}
.comm-like.on{border-color:var(--primary);color:var(--primary)}
.comm-like.on svg{fill:var(--primary);stroke:var(--primary)}

/* 게시글 상세 — 풀스크린 페이지 */
.comm-post-screen{position:absolute;inset:0;z-index:var(--z-screen-top);background:var(--bg);display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility .22s}
.comm-post-screen.on{transform:translateX(0);visibility:visible}
.comm-post-hdr{display:flex;align-items:center;gap:6px;padding:14px 16px;background:var(--white);border-bottom:1px solid var(--line);flex-shrink:0}
.comm-post-hdr .back{display:flex;align-items:center;background:none;border:none;color:var(--ink2);cursor:pointer;padding:0;margin-left:-4px}
.comm-post-hdr .back svg{width:22px;height:22px}
.comm-post-hdr h2{font-size:calc(18.5px*var(--fs,1));font-weight:600;color:var(--ink);margin:0}
.comm-post-scroll{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.comm-post-article{background:var(--white);padding:16px}
.comm-post-comments{background:var(--white);margin-top:8px;padding:8px 16px 16px}
.comm-post-cmtbar{display:flex;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line);flex-shrink:0}
.comm-post-cmtbar input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:11px 14px;font-size:calc(16px*var(--fs,1));outline:none;color:var(--ink)}
.comm-post-cmtbar button{width:44px;height:44px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:calc(22.1px*var(--fs,1));padding:0;cursor:pointer;flex-shrink:0}
.comm-post-cmtbar button:disabled{background:var(--ink3)}
.comm-detail-title{font-size:calc(18.9px*var(--fs,1));font-weight:600;color:var(--ink);line-height:1.45;letter-spacing:-.2px;margin:2px 0 10px}
.comm-detail-body{font-size:calc(16px*var(--fs,1));line-height:1.75;color:var(--ink);white-space:pre-wrap}
.comm-cmt-hd{font-size:calc(14.2px*var(--fs,1));font-weight:600;color:var(--ink2);margin:8px 0 4px}
.comm-cmt{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--bg)}
.comm-cmt:last-child{border-bottom:none}
.comm-cmt .comm-ava{width:26px;height:26px;font-size:calc(13px*var(--fs,1))}
.comm-cmt-main{flex:1;min-width:0}
.comm-cmt-top{display:flex;align-items:baseline;gap:6px}
.comm-cmt-top b{font-size:calc(13.6px*var(--fs,1));color:var(--ink)}
.comm-cmt-top span{font-size:calc(11.9px*var(--fs,1));color:var(--ink3)}
.comm-cmt-body{font-size:calc(15.2px*var(--fs,1));color:var(--ink);line-height:1.6;margin-top:2px;white-space:pre-wrap}
/* 글 관리(수정/삭제) — 작성자 본인·운영자에게만 렌더된다 */
.comm-kebab{border:none;background:transparent;color:#B0A898;font-size:calc(20px*var(--fs,1));font-weight:600;padding:2px 8px;cursor:pointer;font-family:inherit;letter-spacing:1.5px;flex-shrink:0;border-radius:8px}
.comm-kebab:active{background:var(--bg)}
.comm-cmt-del{margin-left:auto;border:none;background:transparent;color:var(--ink3);font-size:calc(11.9px*var(--fs,1));padding:2px 4px;cursor:pointer;font-family:inherit;flex-shrink:0}
.comm-confirm-tx{font-size:calc(15.2px*var(--fs,1));color:var(--ink2);line-height:1.65;margin:2px 2px 16px}
.comm-danger{background:#B83A2A}

/* 글쓰기 · AI 초안 시트 */
.comm-ai-note{display:flex;gap:8px;align-items:flex-start;background:var(--primary-pale);border-radius:10px;padding:10px 12px;font-size:calc(14px*var(--fs,1));color:var(--primary);line-height:1.55;font-weight:600;margin-bottom:12px}
.comm-cat-pick{display:flex;gap:6px;margin-bottom:12px}
.comm-cat-pick button{border:1px solid var(--line);background:#fff;color:#7A6E60;font-size:calc(14.2px*var(--fs,1));font-weight:500;padding:7px 12px;border-radius:999px;cursor:pointer}
.comm-cat-pick button.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.comm-compose textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:calc(16px*var(--fs,1));line-height:1.65;color:#2A2118;caret-color:#2A2118;min-height:190px;outline:none;resize:vertical;font-family:inherit;background:#fff}
.comm-draft-load{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 0 48px}
.comm-draft-load .paw{font-size:calc(42.7px*var(--fs,1));animation:pawBob 1.1s ease-in-out infinite}
@keyframes pawBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.comm-draft-load-tx{font-size:calc(15.4px*var(--fs,1));color:var(--ink2);font-weight:500;text-align:center;line-height:1.7}
.comm-actions{display:flex;gap:8px;margin-top:4px}
.comm-actions .mvp-save{flex:1;margin-top:0}
.comm-regen{border:1px solid var(--line);background:#fff;color:var(--primary);border-radius:10px;padding:11px 14px;font-size:calc(15.4px*var(--fs,1));font-weight:600;cursor:pointer;flex-shrink:0}
.comm-regen:disabled{opacity:.5}.rag-suggestions{align-self:flex-start;max-width:92%;display:flex;flex-wrap:wrap;gap:7px;margin:1px 0 4px}
.rag-suggestions button{border:1px solid var(--primary-mid);background:#fff;color:var(--primary);border-radius:999px;padding:8px 12px;font:inherit;font-size:calc(13.8px*var(--fs,1));font-weight:750;line-height:1.35;text-align:left;cursor:pointer}
.rag-suggestions button:hover{background:var(--primary-pale)}
.rag-suggestions button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* 토스트 */
.comm-toast{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);bottom:calc(var(--nav-h) + 20px);background:var(--ink);color:#fff;font-size:calc(14.9px*var(--fs,1));font-weight:500;padding:11px 18px;border-radius:999px;z-index:var(--z-toast-inline);opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;box-shadow:0 6px 18px rgba(42,33,24,.25)}
.comm-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* 실시간 보호자 채팅 */
.scroll.live-mode{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));overflow:hidden;display:flex}
#screen-live.on{display:flex;flex:1;min-height:0;animation:fadeUp .18s ease}
.live-chat{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;background:var(--bg)}
.live-head{background:var(--white);border-bottom:1px solid var(--line);padding:12px 14px 10px;flex-shrink:0}
.live-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.live-title{font-size:calc(18px*var(--fs,1));font-weight:700;color:var(--ink);letter-spacing:-.3px}
.live-status{display:flex;align-items:center;gap:5px;font-size:calc(12.4px*var(--fs,1));font-weight:500;color:var(--ink3)}
.live-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#B0A090}
.live-status.on{color:var(--ok-tx)}.live-status.on::before{background:#5A8C48}
.live-status.wait::before{background:#D69B36}
.live-rooms{display:flex;gap:6px}
.live-rooms button{flex:1;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;padding:7px 5px;font-size:calc(13.4px*var(--fs,1));font-weight:600;cursor:pointer}
.live-rooms button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.live-presence{background:#F7F5F2;border-bottom:1px solid var(--line);padding:7px 14px;font-size:calc(12.6px*var(--fs,1));color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.live-feed{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 16px;display:flex;flex-direction:column;gap:9px}
.live-empty{margin:auto;text-align:center;color:var(--ink3);font-size:calc(14px*var(--fs,1));line-height:1.7;padding:28px}
.live-msg{display:flex;flex-direction:column;align-self:flex-start;max-width:82%}
.live-msg.mine{align-self:flex-end;align-items:flex-end}
.live-msg-meta{display:flex;align-items:center;gap:6px;margin:0 3px 4px;font-size:calc(11.8px*var(--fs,1));color:var(--ink3)}
.live-msg-author{font-weight:600;color:var(--ink2)}
.live-msg-bubble{background:#fff;border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:9px 11px;color:var(--ink);font-size:calc(15px*var(--fs,1));line-height:1.55;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(42,33,24,.04)}
.live-msg.mine .live-msg-bubble{background:var(--primary);border-color:var(--primary);color:#fff;border-radius:14px 4px 14px 14px}
.live-msg.pending{opacity:.58}.live-msg.failed .live-msg-meta{color:var(--danger-tx)}
.live-login{display:none;flex:1;min-height:0;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;color:var(--ink2);line-height:1.7}
.live-login.on{display:flex}.live-login b{color:var(--ink);font-size:calc(17px*var(--fs,1));margin-bottom:5px}
.live-login button{margin-top:14px;border:none;border-radius:999px;background:var(--primary);color:#fff;padding:10px 19px;font-size:calc(14.8px*var(--fs,1));font-weight:600;cursor:pointer}
.live-compose{display:flex;align-items:flex-end;gap:8px;padding:9px 10px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);flex-shrink:0}
.live-compose textarea{flex:1;min-height:40px;max-height:96px;resize:none;border:1px solid var(--line);border-radius:18px;padding:9px 12px;font-size:calc(16px*var(--fs,1));line-height:1.45;color:var(--ink);outline:none;font-family:inherit}
.live-compose textarea:focus{border-color:var(--primary-mid);box-shadow:0 0 0 2px rgba(91,110,156,.1)}
.live-send{width:42px;height:42px;flex-shrink:0;border:none;border-radius:50%;background:var(--primary);color:#fff;font-size:calc(18px*var(--fs,1));font-weight:700;cursor:pointer}
.live-send:disabled{background:var(--ink3);cursor:default}

/* PetBody MVP: profile + lab image review */
.mvp-legacy-hide{display:none!important}.mvp-actions button,.mvp-save,.mvp-upload-btn{border:none;border-radius:10px;padding:11px 12px;font-size:calc(15.4px*var(--fs,1));font-weight:600;cursor:pointer}.mvp-metric{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;min-height:76px}.mvp-metric-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.mvp-metric-name{font-size:calc(13.5px*var(--fs,1));font-weight:700;color:var(--ink)}
.mvp-pill{font-size:calc(11.1px*var(--fs,1));font-weight:600;border-radius:999px;padding:2px 6px;background:var(--primary-pale);color:var(--ink2)}
.mvp-pill.warn{background:var(--warn-bg);color:var(--warn-tx)}
.mvp-pill.bad{background:var(--danger-bg);color:var(--danger-tx)}
.mvp-value{font-size:calc(27.2px*var(--fs,1));font-weight:700;color:var(--ink);line-height:1}
.mvp-unit{font-size:calc(12.3px*var(--fs,1));font-weight:600;color:var(--ink3);margin-left:3px}
.mvp-date{font-size:calc(12.3px*var(--fs,1));color:var(--ink3);margin-top:6px}.mvp-empty{font-size:calc(13.5px*var(--fs,1));color:var(--ink3);line-height:1.5;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:12px;margin-top:10px}
.mvp-modal-bg{display:none;position:absolute;inset:0;z-index:var(--z-modal);background:rgba(42,33,24,.28);align-items:flex-end}
.mvp-modal-bg.on{display:flex}
.mvp-sheet{width:100%;max-height:88%;overflow:auto;background:var(--surface);border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 40px rgba(42,33,24,.2)}
.mvp-sheet-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mvp-sheet-hd h3{font-size:calc(17.8px*var(--fs,1));font-weight:600;color:var(--ink);margin:0}
.mvp-x{border:none;background:#fff;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;cursor:pointer;color:var(--ink2)}
.mvp-form{display:grid;gap:10px}
.mvp-field label{display:block;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--ink2);margin-bottom:5px}
.mvp-field input,.mvp-field select{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;color:#2A2118;caret-color:#2A2118;font-size:calc(16px*var(--fs,1));padding:11px 12px;outline:none}
.mvp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* min-width:0 — 그리드/플렉스 자식의 기본 최소폭은 '내용 최소폭'이라, 안에 nowrap 긴 줄
   (검사기록 요약 '체중 7.8 · CREA 3.4 · …')이 있으면 그 폭만큼 칸이 늘어나 시트 전체가
   가로로 넘쳤다. 자식이 시트 폭 아래로 줄어들 수 있게 풀어 준다 */
.mvp-sheet,.mvp-form>*,.mvp-rec-list,.mvp-rec-list>*{min-width:0}
.mvp-rec-list{display:flex;flex-direction:column;gap:6px}
.mvp-rec-hd{font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--ink2);margin:2px 0}
.mvp-rec-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ECECEF;border-radius:10px;padding:9px 12px}
.mvp-rec-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mvp-rec-meta b{font-size:calc(14.2px*var(--fs,1));color:var(--ink)}
.mvp-rec-meta span{font-size:calc(12.3px*var(--fs,1));color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mvp-rec-del{flex-shrink:0;border:none;background:none;color:var(--danger-tx,#B83A2A);font-size:calc(13.5px*var(--fs,1));font-weight:500;padding:5px 6px;cursor:pointer;font-family:inherit}
.mvp-rec-edit{flex-shrink:0;border:none;background:none;color:var(--primary);font-size:calc(13.5px*var(--fs,1));font-weight:500;padding:5px 6px;cursor:pointer;font-family:inherit}
.mvp-review{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;gap:9px}
.mvp-review.on{display:grid}
.mvp-review-title{font-size:calc(14.9px*var(--fs,1));font-weight:700;color:var(--ink);margin-bottom:1px}
.mvp-review-sub{font-size:calc(12.9px*var(--fs,1));color:var(--ink2);line-height:1.45}
.mvp-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mvp-review label{display:block;font-size:calc(12.3px*var(--fs,1));font-weight:600;color:var(--ink2);margin-bottom:4px}
.mvp-review input{width:100%;box-sizing:border-box;min-width:0;-webkit-appearance:none;appearance:none;font-family:inherit;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:calc(16px*var(--fs,1));padding:9px 10px;outline:none}
/* iOS 날짜 입력: 기본 UA 스타일이 높이·가운데정렬로 깨지는 것 보정 (케어 시작일과 동일 처리) */
.mvp-review input[type=date]{display:block;min-height:41px;text-align:left}
.mvp-review input[type=date]::-webkit-date-and-time-value{text-align:left}
.mvp-lab-preview{display:none;width:100%;max-height:150px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px}
.mvp-ocr-status{font-size:calc(13.5px*var(--fs,1));color:var(--ink2);line-height:1.5;min-height:17px}
.mvp-auto-result{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:calc(14.9px*var(--fs,1));color:var(--ink)}
.mvp-auto-result.on{display:block}
.mvp-lab-bulk{display:none;gap:10px}
.mvp-lab-bulk.on{display:grid}
.mvp-lab-bulk-card{display:grid;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px}
.mvp-lab-bulk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.mvp-lab-bulk-head>div{display:flex;min-width:0;flex-direction:column;gap:2px}
.mvp-lab-bulk-head b{font-size:calc(14.2px*var(--fs,1));color:var(--ink)}
.mvp-lab-bulk-head span{font-size:calc(11.5px*var(--fs,1));color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mvp-lab-bulk-head>button{flex-shrink:0;border:none;background:none;color:var(--danger-tx,#B83A2A);font-size:calc(12.8px*var(--fs,1));font-weight:500;padding:2px;cursor:pointer;font-family:inherit}
.mvp-lab-bulk-date label,.mvp-lab-bulk-card .mvp-review-grid label{display:block;font-size:calc(12.3px*var(--fs,1));font-weight:600;color:var(--ink2);margin-bottom:4px}
.mvp-lab-bulk-date input,.mvp-lab-bulk-card .mvp-review-grid input{width:100%;box-sizing:border-box;min-width:0;-webkit-appearance:none;appearance:none;font-family:inherit;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:calc(16px*var(--fs,1));padding:9px 10px;outline:none}
.mvp-lab-bulk-date input[type=date]{display:block;min-height:41px;text-align:left}
.mvp-lab-conflict{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px;font-size:calc(10.8px*var(--fs,1));color:#9A5B18}
.mvp-lab-conflict button{border:1px solid #E8C890;background:#FFF7E8;color:#854F0B;border-radius:999px;padding:2px 7px;font-size:calc(11.5px*var(--fs,1));font-weight:600;cursor:pointer;font-family:inherit}
.mvp-save{width:100%;background:var(--primary);color:#fff;margin-top:4px}
.mvp-save:disabled{opacity:.55;cursor:default}
.mvp-auth-toggle{display:flex;gap:6px;background:var(--bg);border-radius:12px;padding:4px}
.mvp-auth-tab{flex:1;border:none;border-radius:9px;padding:9px;font-size:calc(15.4px*var(--fs,1));font-weight:600;cursor:pointer;background:transparent;color:var(--ink2);transition:background .15s,color .15s}
.mvp-auth-tab.on{background:var(--primary);color:#fff}
.mvp-social-auth[hidden]{display:none}
.mvp-social-auth{display:flex;flex-direction:column;gap:8px}
.mvp-social-buttons{display:flex;flex-direction:column;gap:8px}
/* 소셜/이메일 버튼: 아이콘은 좌측 고정, 라벨은 중앙 — 구글·카카오 공식 버튼 규격.
   구글=흰 배경+#747775 보더, 카카오=#FEE500+검정 심볼+85% 검정 라벨. 색 임의 변경 금지. */
.mvp-social-btn{width:100%;min-height:47px;border-radius:10px;padding:10px 14px;display:flex;align-items:center;font-family:inherit;font-size:calc(14.8px*var(--fs,1));font-weight:600;cursor:pointer;position:relative;transition:filter .12s}
.mvp-social-btn:active{filter:brightness(.96)}
.mvp-social-ic{position:absolute;left:14px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px}
.mvp-social-tx{flex:1;text-align:center}
.mvp-social-google{background:#fff;color:#1F1F1F;border:1px solid #747775}
.mvp-social-kakao{background:#FEE500;color:rgba(0,0,0,.85);border:1px solid #FEE500}
.mvp-social-email{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mvp-social-email .mvp-social-ic{color:var(--ink2)}
.mvp-social-email.open{border-color:var(--primary);background:var(--primary-pale)}
.mvp-email-auth{display:none;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:12px;padding:14px 12px;background:#FDFCFB;--ink:#2A2118;--ink2:#7A6E60;--ink3:#B0A090;--line:#E8E0D8}
.mvp-email-auth.open{display:flex;animation:mvpEmailAuthIn .18s ease-out}
@keyframes mvpEmailAuthIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mvp-social-consent{font-size:calc(11.4px*var(--fs,1));line-height:1.55;color:var(--ink3);text-align:center;padding:0 4px}
.mvp-social-consent button{border:none;background:none;padding:0;color:var(--ink2);font:inherit;text-decoration:underline;cursor:pointer}
.mvp-form-msg{font-size:calc(14.2px*var(--fs,1));line-height:1.5;color:var(--ink2);min-height:17px}
.mvp-form-msg.err{color:#C2453B;font-weight:500}
.mvp-account-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.mvp-account-avatar{width:46px;height:46px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(23.4px*var(--fs,1));font-weight:700;flex-shrink:0}
.mvp-account-name{font-size:calc(17.3px*var(--fs,1));font-weight:700;color:var(--ink)}
.mvp-account-email{font-size:calc(14.2px*var(--fs,1));color:var(--ink2);margin-top:2px;word-break:break-all}
.mvp-logout-btn{background:#fff;color:#C2453B;border:1px solid var(--line)}
.mvp-logout-btn:hover{background:#FBF1F0}.mvp-pw-form{gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
#toptabs button,.nav button,.pet-chip,.brand-home span{white-space:nowrap}
/* 오늘 컨디션 플로팅 배너 — 대시보드 탭이 보일 때만 뜬다. display는 여기서만 정한다(인라인 금지):
   .off(비로그인·펫 없음)가 최우선, 그 외엔 :has로 대시보드 화면 여부를 본다.
   :has 미지원 옛 웹뷰에선 배너가 안 뜰 뿐이고 기록은 시트 없이도 케어 흐름에 영향 없음 */
#condFab{display:none;align-items:center;gap:6px}
body:has(#screen-dash.on) #condFab:not(.off){display:flex}
/* 예시 미리보기 하단 고정 CTA(#sampleCta, app-core의 syncSampleDecor가 부착) — condFab과 같은 문법:
   대시보드 화면에서만 보인다. 예시 중엔 condFab이 .off라 자리 다툼 없음 */
#sampleCta{display:none}
body:has(#screen-dash.on) #sampleCta{display:flex}
/* 약관·개인정보 문서 뷰어 */
.petbody-terms-modal{position:absolute;inset:0;z-index:var(--z-modal);background:rgba(26,20,14,.55);display:none;align-items:center;justify-content:center;padding:20px}
.petbody-terms-modal.on{display:flex}
.petbody-terms-dialog{background:var(--surface);border-radius:20px;max-width:360px;width:100%;max-height:82%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 48px rgba(26,20,14,.28)}
.petbody-terms-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;gap:12px}
.petbody-terms-head b{font-size:calc(16.5px*var(--fs,1));color:var(--ink)}
.petbody-terms-close{background:none;border:none;font-size:calc(22px*var(--fs,1));color:var(--ink3);cursor:pointer;padding:2px 6px;font-family:inherit}
.petbody-terms-scroll{overflow-y:auto;padding:4px 18px 18px}
.petbody-terms-body{font-size:calc(12.8px*var(--fs,1));line-height:1.68;color:var(--ink2);white-space:pre-line;word-break:keep-all}
.petbody-terms-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.petbody-terms-link{border:none;background:none;padding:0;color:var(--primary);font:700 12.8px/1.5 inherit;text-decoration:underline;cursor:pointer}
/* 기존 회원 재동의 — 닫기·배경 탭·뒤로가기로 해제되지 않는다 */
.mvp-consent-lock{align-items:flex-end}
.mvp-consent-sheet{max-height:94%;padding-top:20px}
.mvp-consent-intro{font-size:calc(13.5px*var(--fs,1));line-height:1.65;color:var(--ink2);background:var(--primary-pale);border-radius:12px;padding:12px 13px;margin-bottom:12px}
.mvp-consent-list{display:flex;flex-direction:column;gap:4px}
.mvp-consent-row{display:flex;align-items:center;gap:8px;min-height:42px;border-bottom:1px solid var(--line)}
.mvp-consent-row label{display:flex;align-items:center;gap:9px;flex:1;font-size:calc(13.5px*var(--fs,1));font-weight:700;color:var(--ink);cursor:pointer}
.mvp-consent-row input{width:17px;height:17px;margin:0;accent-color:var(--primary);flex-shrink:0}
.mvp-consent-row button,.mvp-consent-logout{border:none;background:none;color:var(--ink3);font-family:inherit;text-decoration:underline;cursor:pointer}
.mvp-consent-row button{padding:6px 2px;font-size:calc(12px*var(--fs,1))}
.mvp-consent-logout{display:block;margin:10px auto 0;padding:6px;font-size:calc(12.5px*var(--fs,1))}

/* ═══════════════════════════════════════════════════════════════════
   [복원] 글로우 테마 기본 블록 — night·day·sky·dawn·gold·ocean + 키프레임 + vivid 모션
   beed382 병합 충돌 해소 때 튜토리얼 CSS와 같은 스팬에 있어 통째로 유실됐던 구간
   (b2ab036 983~1559행 그대로). 뒤쪽의 dawn/g 전 페이지 확장 블록은 이 기본 위에서
   같은 토큰을 더 넓은 스코프로 재정의한다 — 캐스케이드상 확장이 이긴다(정상).
═══════════════════════════════════════════════════════════════════ */
html[data-theme=night]{
  background:#0C1123;              /* 모바일 주소창 예약 띠까지 한 덩어리로 */
  --bg:#1E2748;                    /* 캔버스 — .phone은 아래에서 그라디언트로 덮는다 */
}
html[data-theme=night] body{background:#0C1123}

/* ── 무대: 네이비 그라디언트 + 오로라 글로우 ──
   글로우를 ::before(z-index:-1)로 두는 이유 — .phone은 isolation:isolate라
   자기 스태킹 컨텍스트를 만들고, 그 안에서 -1은 '내 배경 위 / 내용 아래'에
   정확히 앉는다. z-index:0으로 두면 position:static인 main.scroll보다 위에
   그려져서 대시보드를 덮어버린다. */
html[data-theme=night] .phone{
  background:linear-gradient(165deg,#141C33 0%,#1E2748 46%,#28305C 78%,#333A68 100%);
  box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
}
html[data-theme=night] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(340px 340px at 6% 4%,rgba(93,205,255,.24),transparent 68%),
    radial-gradient(320px 320px at 94% 92%,rgba(158,124,255,.24),transparent 68%);
}
/* 대시보드 안에서 캔버스색(--bg)으로 칠해 둔 인라인 배경들 — 그대로 두면
   위 그라디언트를 평평한 색으로 덮는다. 투명으로 뚫어 무대가 비치게 한다 */
html[data-theme=night] #screen-dash [style*="background:var(--bg)"]{background:transparent!important}

/* ── 잉크·표면 토큰: 공용 크롬 + 대시보드 안에서만 ── */
html[data-theme=night] .hdr,
html[data-theme=night] .tabs,
html[data-theme=night] .nav,
html[data-theme=night] #screen-dash{
  --ink:#EAEEF9; --ink2:#9BA7C7; --ink3:#6F7B9E;
  --line:rgba(255,255,255,.13);
  --primary:#8FC4FF; --primary-pale:rgba(143,196,255,.15); --primary-mid:#6E8FD0;
  --ok-tx:#5FE3B0;    --ok-bg:rgba(95,227,176,.14);
  --warn-tx:#FFC978;  --warn-bg:rgba(255,201,120,.14);
  --danger-tx:#FF93A6;--danger-bg:rgba(255,147,166,.14);
  /* 카드 표면 = 유리. --white가 .pb-card / .hdr / .tabs 배경을 이미 물고 있어
     여기만 바꿔주면 카드류가 통째로 유리가 된다 */
  --white:rgba(255,255,255,.075);
  --surface:rgba(255,255,255,.075);
  /* 색을 안 지정한 글자는 기본값(검정)으로 떨어져 네이비 위에서 사라진다 —
     이 범위 안에서는 상속 기본값 자체를 밝은 잉크로 바꿔 둔다 */
  color:var(--ink);
}

/* ── 크롬: 헤더 / 상단탭 / 하단내비 ── */
html[data-theme=night] .hdr{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=night] .tabs{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=night] .tabs-track{background:rgba(255,255,255,.07)}
html[data-theme=night] .tabs-pill{
  background:linear-gradient(135deg,rgba(143,231,255,.22),rgba(185,169,255,.22));
  box-shadow:0 1px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme=night] .tabs button{color:rgba(255,255,255,.48)}
html[data-theme=night] .tabs button.on{color:#EAF4FF}
html[data-theme=night] .tab-badge{background:#E5556B;color:#fff}
html[data-theme=night] .nav{
  background:rgba(18,24,44,.82);border-top:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=night] .nav button{color:rgba(255,255,255,.42)}
html[data-theme=night] .nav button.on{color:#9EE4FF}
html[data-theme=night] .icon-btn{background:rgba(255,255,255,.09);color:#B9C4DE}
html[data-theme=night] .logo{color:#EAEEF9}
html[data-theme=night] .logo span{color:#9EE4FF}
html[data-theme=night] .pet-chip{background:rgba(143,196,255,.16);color:#B9D8FF}
/* 인증 대기 스켈레톤 — 밝은 회색 막대는 네이비 위에서 형광등처럼 튄다 */
html[data-theme=night] [data-auth="pending"] .auth-skeleton,
html[data-theme=night] [data-auth="pending"] .hdr-r::before{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.06) 63%);
  background-size:400% 100%;
}
/* 헤더 인라인 색 (index.html에 박혀 있어 !important 필요) */
html[data-theme=night] #globalIrisBadge{background:rgba(143,196,255,.16)!important}
html[data-theme=night] #globalProfileImgFallback{background:rgba(255,255,255,.09)!important}

/* ── 대시보드: 상단 액션 버튼 2개 (index.html 인라인 style) ── */
html[data-theme=night] #dashBtnLab{
  background:rgba(110,190,255,.14)!important;border-color:rgba(110,190,255,.32)!important;color:#9EE4FF!important;
}
html[data-theme=night] #dashBtnLab svg{stroke:#9EE4FF!important}
html[data-theme=night] #dashBtnStory{
  background:rgba(255,201,120,.13)!important;border-color:rgba(255,201,120,.30)!important;color:#FFCE8A!important;
}
html[data-theme=night] #dashMetricsHead span{color:rgba(255,255,255,.52)!important}
html[data-theme=night] #dashMetricsHead button{color:#9EE4FF!important}

/* 지표 타일 가로 스크롤바 */
html[data-theme=night] #screen-dash .hscroll{scrollbar-color:rgba(255,255,255,.18) transparent}
html[data-theme=night] #screen-dash .hscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

/* 오늘 컨디션 플로팅 배너(#condFab)는 renderCondCard가 기록 여부에 따라 색을 두 갈래로
   칠한다. 여기서 !important로 덮으면 두 상태가 같은 색이 되므로 JS의 PB_NIGHT 분기에 맡긴다 */

/* ═══ 모션 — 은은한 쪽 ═══
   대시보드는 하루에 몇 번씩 여는 화면이라 온보딩처럼 계속 움직이면 피로하다.
   ① 그래프는 지표를 고를 때마다 한 번 그려진다(조작에 대한 응답)
   ② 오로라 글로우는 정적
   ③ 마지막 점 파동만 느리고 옅게 반복 — '최신값이 여기'라는 표시 역할

   선택자에 테마를 안 붙인 이유: .pb-night-* 클래스는 글로우 계열(night·day)이
   그릴 때만 마크업에 나온다. 테마마다 선택자를 복제하면 테마를 늘릴 때마다
   여기도 같이 늘려야 하고, 한 군데 빠뜨리면 그 테마만 모션이 죽는다. */
@keyframes pbNightDraw{to{stroke-dashoffset:0}}
@keyframes pbNightFade{from{opacity:0}to{opacity:1}}
@keyframes pbNightHalo{0%{opacity:.5;transform:scale(.5)}100%{opacity:0;transform:scale(2)}}
@media (prefers-reduced-motion:no-preference){
  .pb-night-line{stroke-dasharray:1;stroke-dashoffset:1;
    animation:pbNightDraw .9s cubic-bezier(.4,0,.25,1) forwards}
  .pb-night-area{animation:pbNightFade .7s .35s both}
  .pb-night-halo{animation:pbNightHalo 2.8s .9s ease-out infinite}
}
/* 타일 '선택' 재렌더는 컨테이너 진입 연출만 건너뛴다(data-noanim은 renderMetricCards가
   붙인다) — 타일 줄·카드가 통째로 사라졌다 떠오르면 깜빡임으로 보인다. 단, 카드 안
   그래프가 그려지는 연출(선 드로우·점 팝·면 페이드)은 지표 전환의 핵심 반응이라 남긴다 */
#pbTileRow[data-noanim]>div,
#pbDetail[data-noanim]>div{animation:none!important}
/* 모션을 끈 사용자에게는 완성 상태로 그냥 보여준다 */
@media (prefers-reduced-motion:reduce){
  .pb-night-halo{opacity:0}
}

/* ═══════════════════════════════════════════════════════════════════
   DAY 테마 — ?theme=day (2026-08-11)
   night와 같은 구조·같은 모션, 팔레트만 밝은 쪽. 위 night 블록과 나란히 읽히도록
   항목 순서를 똑같이 맞춰 뒀다.

   ── 흰 바탕에서 달라지는 것 하나 ──
   네이비 위에서는 '발광'이 요소를 띄웠지만, 흰 바탕에서는 빛을 더해도 아무 일도
   일어나지 않는다(이미 제일 밝다). 그래서 같은 자리의 강조를 채도와 아래로 떨어지는
   옅은 색 그림자로 옮겼다. 오로라도 어두운 무대의 빛이 아니라 흰 종이에 번진
   물감처럼 다뤄서, 카드가 그 위에 떠 보이게 한다.
═══════════════════════════════════════════════════════════════════ */
html[data-theme=day]{
  background:#E6EBF8;
  --bg:#F4F7FE;
}
html[data-theme=day] body{background:#E6EBF8}
html[data-theme=day] .phone{
  background:linear-gradient(165deg,#FCFDFF 0%,#F5F8FE 46%,#EFF3FD 78%,#EAEFFB 100%);
  box-shadow:0 24px 56px rgba(60,80,150,.20),0 0 0 1px rgba(120,140,200,.14);
}
html[data-theme=day] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(340px 340px at 6% 4%,rgba(110,190,255,.42),transparent 68%),
    radial-gradient(320px 320px at 94% 92%,rgba(172,146,255,.36),transparent 68%);
}
html[data-theme=day] #screen-dash [style*="background:var(--bg)"]{background:transparent!important}

/* ── 잉크·표면 토큰: 공용 크롬 + 대시보드 안에서만 (이유는 night 블록 주석 참고) ── */
html[data-theme=day] .hdr,
html[data-theme=day] .tabs,
html[data-theme=day] .nav,
html[data-theme=day] #screen-dash{
  --ink:#1A2340; --ink2:#5B6688; --ink3:#8B96B4;
  --line:rgba(120,140,200,.20);
  --primary:#3B82E6; --primary-pale:rgba(59,130,230,.12); --primary-mid:#7FA3DC;
  --ok-tx:#0E8F57;    --ok-bg:rgba(14,143,87,.11);
  --warn-tx:#A2680C;  --warn-bg:rgba(180,116,15,.12);
  --danger-tx:#C42B42;--danger-bg:rgba(210,51,74,.10);
  /* 유리면 — 흰 무대 위에서는 '서리 낀 흰 판'이 유리다 */
  --white:rgba(255,255,255,.66);
  --surface:rgba(255,255,255,.66);
  color:var(--ink);
}

/* ── 크롬: 헤더 / 상단탭 / 하단내비 ── */
html[data-theme=day] .hdr{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=day] .tabs{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=day] .tabs-track{background:rgba(120,140,200,.13)}
html[data-theme=day] .tabs-pill{
  background:#fff;
  box-shadow:0 2px 8px rgba(60,80,150,.16),inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme=day] .tabs button{color:rgba(26,35,64,.48)}
html[data-theme=day] .tabs button.on{color:#1A2340}
html[data-theme=day] .tab-badge{background:#D2334A;color:#fff}
html[data-theme=day] .nav{
  background:rgba(255,255,255,.80);border-top:1px solid rgba(120,140,200,.18);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=day] .nav button{color:rgba(26,35,64,.42)}
html[data-theme=day] .nav button.on{color:#3B82E6}
html[data-theme=day] .icon-btn{background:rgba(120,140,200,.14);color:#5B6688}
html[data-theme=day] .logo{color:#1A2340}
html[data-theme=day] .logo span{color:#3B82E6}
html[data-theme=day] .pet-chip{background:rgba(59,130,230,.12);color:#2A63B8}
html[data-theme=day] [data-auth="pending"] .auth-skeleton,
html[data-theme=day] [data-auth="pending"] .hdr-r::before{
  background:linear-gradient(90deg,rgba(120,140,200,.14) 25%,rgba(120,140,200,.24) 37%,rgba(120,140,200,.14) 63%);
  background-size:400% 100%;
}
html[data-theme=day] #globalIrisBadge{background:rgba(59,130,230,.12)!important}
html[data-theme=day] #globalProfileImgFallback{background:rgba(120,140,200,.14)!important}

/* ── 대시보드: 상단 액션 버튼 2개 (index.html 인라인 style이라 !important 필요) ── */
html[data-theme=day] #dashBtnLab{
  background:rgba(59,130,230,.10)!important;border-color:rgba(59,130,230,.28)!important;color:#2A63B8!important;
}
html[data-theme=day] #dashBtnLab svg{stroke:#2A63B8!important}
html[data-theme=day] #dashBtnStory{
  background:rgba(200,123,47,.10)!important;border-color:rgba(200,123,47,.26)!important;color:#A2620F!important;
}
html[data-theme=day] #dashMetricsHead span{color:rgba(26,35,64,.52)!important}
html[data-theme=day] #dashMetricsHead button{color:#3B82E6!important}

html[data-theme=day] #screen-dash .hscroll{scrollbar-color:rgba(120,140,200,.32) transparent}
html[data-theme=day] #screen-dash .hscroll::-webkit-scrollbar-thumb{background:rgba(120,140,200,.32)}

/* ═══════════════════════════════════════════════════════════════════
   SKY / DAWN 테마 — ?theme=sky · ?theme=dawn (2026-08-11) · 밝은데 화려한 두 벌
   (첫 안이었던 연보라~분홍 무대는 폐기 — 보라가 앱 어디에도 없던 색이라 겉돌았고
   지표선 PHOS 보라와도 겹쳤다.)
   day를 흰 종이처럼 담백하게 잡았더니 화려함이 같이 죽었다. 흰 바탕에서 화려함은
   빛이 아니라 '채도 대비'에서 나온다 — 무대에 실제 색을 넣고 오로라 두 덩이도
   진하게, 카드는 거의 순백으로 그 위에 띄운다. 그림자는 회색 대신 무대 색으로.
   - sky: 하늘빛→아쿠아 단일 계열, 포인트 코럴. 브랜드 블루의 연장
   - dawn: 위는 하늘빛, 아래로 크림→살구로 지는 새벽. 포인트 청록(살구의 보색)
   모션은 night-vivid와 같은 블록을 :is(sky,dawn)으로 함께 받는다(아래).
═══════════════════════════════════════════════════════════════════ */
html[data-theme=sky]{
  background:#D2E8F5;
  --bg:#EAF6FC;
}
html[data-theme=sky] body{background:#D2E8F5}
html[data-theme=sky] .phone{
  background:linear-gradient(160deg,#E8F5FF 0%,#E0F1FF 34%,#DCF3F8 66%,#D9F5EF 100%);
  box-shadow:0 24px 56px rgba(30,120,200,.28),0 0 0 1px rgba(255,255,255,.75);
}
html[data-theme=sky] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(360px 360px at 4% 2%,rgba(60,170,255,.46),transparent 66%),
    radial-gradient(340px 340px at 96% 94%,rgba(45,205,190,.40),transparent 66%);
}
html[data-theme=sky] #screen-dash [style*="background:var(--bg)"]{background:transparent!important}

html[data-theme=dawn]{
  background:#F2E4D8;
  --bg:#FBF2E8;
}
html[data-theme=dawn] body{background:#F2E4D8}
html[data-theme=dawn] .phone{
  background:linear-gradient(168deg,#E4F2FF 0%,#F2F3EE 42%,#FFF0DC 72%,#FFE4D2 100%);
  box-shadow:0 24px 56px rgba(220,120,50,.26),0 0 0 1px rgba(255,255,255,.78);
}
html[data-theme=dawn] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(360px 360px at 4% 2%,rgba(90,180,255,.40),transparent 66%),
    radial-gradient(340px 340px at 96% 94%,rgba(255,150,90,.34),transparent 66%);
}
/* feat/dawn-all-pages: 캔버스색 인라인 배경 뚫기를 전 스크린으로 — 무대가 어디서나 비친다 */
html[data-theme=dawn] .screen [style*="background:var(--bg)"],
html[data-theme=dawn] .comm-post-screen [style*="background:var(--bg)"]{background:transparent!important}

/* ── 잉크·표면 토큰: 공용 크롬 + 대시보드 안에서만 (이유는 night 블록 주석 참고) ── */
html[data-theme=sky] .hdr, html[data-theme=sky] .tabs,
html[data-theme=sky] .nav, html[data-theme=sky] #screen-dash{
  --ink:#14202E; --ink2:#4E6076; --ink3:#7E92A6;
  --line:rgba(120,170,215,.28);
  --primary:#2C9DE8; --primary-pale:rgba(44,157,232,.13); --primary-mid:#72B4E4;
  --ok-tx:#0B7A5C;    --ok-bg:rgba(14,148,110,.13);
  --warn-tx:#95600A;  --warn-bg:rgba(190,120,10,.14);
  --danger-tx:#C1233C;--danger-bg:rgba(214,45,70,.11);
  /* 유리면 — 색이 있는 무대라 흰 판을 좀 더 불투명하게: 카드가 '뜬다' */
  --white:rgba(255,255,255,.74);
  --surface:rgba(255,255,255,.74);
  color:var(--ink);
}
/* feat/dawn-all-pages: 토큰 스코프를 대시보드에서 전 스크린 + 오버레이·모달·서랍으로 확장.
   var(--white)/var(--ink) 계열을 쓰는 표면은 이 한 줄로 통째로 dawn 문법을 탄다 */
html[data-theme=dawn] .hdr, html[data-theme=dawn] .tabs,
html[data-theme=dawn] .nav, html[data-theme=dawn] .screen,
html[data-theme=dawn] .comm-post-screen, html[data-theme=dawn] .mvp-modal-bg,
html[data-theme=dawn] .rag-drawer,
html[data-theme=dawn] #globalProfileHeader, html[data-theme=dawn] #compactBar{
  --ink:#1E222E; --ink2:#5A5E6E; --ink3:#8E9098;
  --line:rgba(215,170,130,.30);
  --primary:#E8823C; --primary-pale:rgba(240,138,60,.13); --primary-mid:#ECAF7E;
  --ok-tx:#0B7A5C;    --ok-bg:rgba(14,148,110,.13);
  --warn-tx:#95600A;  --warn-bg:rgba(190,120,10,.15);
  --danger-tx:#C1233C;--danger-bg:rgba(214,45,70,.11);
  --white:rgba(255,255,255,.74);
  --surface:rgba(255,255,255,.74);
  color:var(--ink);
}

/* ── 크롬: 헤더 / 상단탭 / 하단내비 ── */
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .hdr{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .tabs{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=sky] .tabs-track{background:rgba(120,170,215,.22)}
html[data-theme=dawn] .tabs-track{background:rgba(215,170,130,.24)}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .tabs-pill{
  background:linear-gradient(135deg,#fff,#F6FAFF);
  box-shadow:0 3px 10px rgba(60,110,170,.22),inset 0 1px 0 #fff;
}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .tabs button{color:rgba(20,32,46,.46)}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .tabs button.on{color:#14202E}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .tab-badge{background:#E5476B;color:#fff}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .nav{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=sky] .nav{border-top:1px solid rgba(120,170,215,.26)}
html[data-theme=dawn] .nav{border-top:1px solid rgba(215,170,130,.28)}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .nav button{color:rgba(20,32,46,.42)}
html[data-theme=sky] .nav button.on{color:#1F8AD8}
html[data-theme=dawn] .nav button.on{color:#D06A18}   /* 새벽 무대의 살구를 내비 포인트로 되받는다 */
html[data-theme=sky] .icon-btn{background:rgba(120,170,215,.22);color:#4E6076}
html[data-theme=dawn] .icon-btn{background:rgba(215,170,130,.24);color:#5A5E6E}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .logo{color:#14202E}
html[data-theme=sky] .logo span{color:#1F8AD8}
html[data-theme=dawn] .logo span{color:#D06A18}
html[data-theme=sky] .pet-chip{background:rgba(31,138,216,.13);color:#0F62B8}
html[data-theme=dawn] .pet-chip{background:rgba(230,110,40,.13);color:#B4560F}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) [data-auth="pending"] .auth-skeleton,
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) [data-auth="pending"] .hdr-r::before{
  background:linear-gradient(90deg,rgba(140,160,190,.18) 25%,rgba(140,160,190,.30) 37%,rgba(140,160,190,.18) 63%);
  background-size:400% 100%;
}
html[data-theme=sky] #globalIrisBadge{background:rgba(31,138,216,.12)!important}
html[data-theme=dawn] #globalIrisBadge{background:rgba(230,110,40,.12)!important}
html[data-theme=sky] #globalProfileImgFallback{background:rgba(120,170,215,.22)!important}
html[data-theme=dawn] #globalProfileImgFallback{background:rgba(215,170,130,.24)!important}

/* ── 대시보드: 상단 액션 버튼 2개 (index.html 인라인 style이라 !important 필요) ── */
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnLab{
  background:rgba(31,138,216,.12)!important;border-color:rgba(31,138,216,.32)!important;color:#0F62B8!important;
}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnLab svg{stroke:#0F62B8!important}
html[data-theme=sky] #dashBtnStory{
  background:rgba(255,110,70,.12)!important;border-color:rgba(255,110,70,.30)!important;color:#C24A22!important;
}
html[data-theme=dawn] #dashBtnStory{
  background:rgba(230,110,40,.13)!important;border-color:rgba(230,110,40,.32)!important;color:#B4560F!important;
}
/* dawn 한정(08-12 A안): 두 버튼 테두리 선만 아바타 링과 같은 새벽 그라디언트(2px)로.
   배경·글자·간격은 현행 그대로 — 선은 마스크 링 오버레이로만 그려 안쪽 침범 없음.
   ::after는 아래 샤인 스윕이 쓰므로 링은 ::before */
html[data-theme=dawn] #dashBtnLab, html[data-theme=dawn] #dashBtnStory{position:relative;border-color:transparent!important}
html[data-theme=dawn] #dashBtnLab::before, html[data-theme=dawn] #dashBtnStory::before{
  content:'';position:absolute;inset:0;border-radius:12px;padding:2px;
  background:linear-gradient(140deg,#6EB9FF 0%,#FFD9A8 52%,#F08A3C 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  pointer-events:none;
}
html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashMetricsHead span{color:rgba(20,32,46,.54)!important}
html[data-theme=sky] #dashMetricsHead button{color:#1F8AD8!important}
html[data-theme=dawn] #dashMetricsHead button{color:#D06A18!important}

html[data-theme=sky] #screen-dash .hscroll{scrollbar-color:rgba(120,170,215,.42) transparent}
html[data-theme=sky] #screen-dash .hscroll::-webkit-scrollbar-thumb{background:rgba(120,170,215,.42)}
html[data-theme=dawn] #screen-dash .hscroll{scrollbar-color:rgba(215,170,130,.44) transparent}
html[data-theme=dawn] #screen-dash .hscroll::-webkit-scrollbar-thumb{background:rgba(215,170,130,.44)}

/* ═══════════════════════════════════════════════════════════════════
   GOLD 테마 — ?theme=gold (2026-08-11) · 아침햇살, 밝은 계열의 세 번째 벌
   크림→연노랑→골드로 지는 무대. 강조는 골드의 보색인 브랜드 블루 —
   포인트 색을 새로 만들지 않고 기존 색을 그대로 쓰는 유일한 밝은 벌.
═══════════════════════════════════════════════════════════════════ */
html[data-theme=gold]{
  background:#F0E6C8;
  --bg:#FBF5E2;
}
html[data-theme=gold] body{background:#F0E6C8}
html[data-theme=gold] .phone{
  background:linear-gradient(168deg,#FFFDF2 0%,#FFF8E0 40%,#FFF0C2 70%,#FFE6A6 100%);
  box-shadow:0 24px 56px rgba(200,150,30,.28),0 0 0 1px rgba(255,255,255,.8);
}
html[data-theme=gold] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(360px 360px at 4% 2%,rgba(255,196,60,.40),transparent 66%),
    radial-gradient(340px 340px at 96% 94%,rgba(120,180,255,.30),transparent 66%);
}
html[data-theme=gold] #screen-dash [style*="background:var(--bg)"]{background:transparent!important}

html[data-theme=gold] .hdr, html[data-theme=gold] .tabs,
html[data-theme=gold] .nav, html[data-theme=gold] #screen-dash{
  --ink:#262215; --ink2:#5E5638; --ink3:#948A64;
  --line:rgba(210,175,95,.32);
  --primary:#2C7BE8; --primary-pale:rgba(44,123,232,.12); --primary-mid:#78A8E8;
  --ok-tx:#0B7A5C;    --ok-bg:rgba(14,148,110,.13);
  --warn-tx:#8A5307;  --warn-bg:rgba(190,120,10,.16);
  --danger-tx:#C1233C;--danger-bg:rgba(214,45,70,.11);
  --white:rgba(255,255,255,.74);
  --surface:rgba(255,255,255,.74);
  color:var(--ink);
}
html[data-theme=gold] .hdr{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=gold] .tabs{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=gold] .tabs-track{background:rgba(210,175,95,.26)}
html[data-theme=gold] .tabs-pill{
  background:linear-gradient(135deg,#fff,#FFFBEE);
  box-shadow:0 3px 10px rgba(170,125,25,.24),inset 0 1px 0 #fff;
}
html[data-theme=gold] .tabs button{color:rgba(38,34,21,.46)}
html[data-theme=gold] .tabs button.on{color:#262215}
html[data-theme=gold] .tab-badge{background:#E5476B;color:#fff}
html[data-theme=gold] .nav{
  background:rgba(255,255,255,.78);border-top:1px solid rgba(210,175,95,.30);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=gold] .nav button{color:rgba(38,34,21,.42)}
html[data-theme=gold] .nav button.on{color:#C08A10}   /* 무대의 골드를 내비 포인트로 되받는다 */
html[data-theme=gold] .icon-btn{background:rgba(210,175,95,.26);color:#5E5638}
html[data-theme=gold] .logo{color:#262215}
html[data-theme=gold] .logo span{color:#C08A10}
html[data-theme=gold] .pet-chip{background:rgba(232,162,12,.15);color:#8A5E12}
html[data-theme=gold] [data-auth="pending"] .auth-skeleton,
html[data-theme=gold] [data-auth="pending"] .hdr-r::before{
  background:linear-gradient(90deg,rgba(210,175,95,.20) 25%,rgba(210,175,95,.34) 37%,rgba(210,175,95,.20) 63%);
  background-size:400% 100%;
}
html[data-theme=gold] #globalIrisBadge{background:rgba(232,162,12,.14)!important}
html[data-theme=gold] #globalProfileImgFallback{background:rgba(210,175,95,.26)!important}
html[data-theme=gold] #dashBtnLab{
  background:rgba(44,123,232,.11)!important;border-color:rgba(44,123,232,.30)!important;color:#1B5FC4!important;
}
html[data-theme=gold] #dashBtnLab svg{stroke:#1B5FC4!important}
html[data-theme=gold] #dashBtnStory{
  background:rgba(232,162,12,.13)!important;border-color:rgba(232,162,12,.34)!important;color:#8A5E12!important;
}
html[data-theme=gold] #dashMetricsHead span{color:rgba(38,34,21,.54)!important}
html[data-theme=gold] #dashMetricsHead button{color:#C08A10!important}
html[data-theme=gold] #screen-dash .hscroll{scrollbar-color:rgba(210,175,95,.46) transparent}
html[data-theme=gold] #screen-dash .hscroll::-webkit-scrollbar-thumb{background:rgba(210,175,95,.46)}

/* ═══════════════════════════════════════════════════════════════════
   OCEAN 테마 — ?theme=ocean (2026-08-11) · 중간 밝기 딥 틸
   이 파일의 밝은 벌들과 달리 어두운 계열이라 크롬 문법은 night를 따른다:
   흰 반투명 잉크, 유리 카드, 발광 그래프(JS GC의 PB_DEEP 분기).
═══════════════════════════════════════════════════════════════════ */
html[data-theme=ocean]{
  background:#082530;
  --bg:#124455;
}
html[data-theme=ocean] body{background:#082530}
html[data-theme=ocean] .phone{
  background:linear-gradient(165deg,#0C3140 0%,#114C5E 45%,#17677A 78%,#1D8377 100%);
  box-shadow:0 24px 56px rgba(0,10,16,.5),0 0 0 1px rgba(255,255,255,.10);
}
html[data-theme=ocean] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(360px 360px at 4% 2%,rgba(80,220,255,.26),transparent 66%),
    radial-gradient(340px 340px at 96% 94%,rgba(60,235,185,.24),transparent 66%);
}
html[data-theme=ocean] #screen-dash [style*="background:var(--bg)"]{background:transparent!important}

html[data-theme=ocean] .hdr, html[data-theme=ocean] .tabs,
html[data-theme=ocean] .nav, html[data-theme=ocean] #screen-dash{
  --ink:#EAF6F8; --ink2:#9EC2CC; --ink3:#6E96A2;
  --line:rgba(255,255,255,.14);
  --primary:#6FE8D8; --primary-pale:rgba(111,232,216,.15); --primary-mid:#5CB8B0;
  --ok-tx:#6FE8B8;    --ok-bg:rgba(111,232,184,.15);
  --warn-tx:#FFCB80;  --warn-bg:rgba(255,203,128,.15);
  --danger-tx:#FF97A8;--danger-bg:rgba(255,151,168,.15);
  --white:rgba(255,255,255,.08);
  --surface:rgba(255,255,255,.08);
  color:var(--ink);
}
html[data-theme=ocean] .hdr{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=ocean] .tabs{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=ocean] .tabs-track{background:rgba(255,255,255,.08)}
html[data-theme=ocean] .tabs-pill{
  background:linear-gradient(135deg,rgba(111,232,216,.24),rgba(143,208,255,.22));
  box-shadow:0 1px 8px rgba(0,10,16,.4),inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme=ocean] .tabs button{color:rgba(255,255,255,.48)}
html[data-theme=ocean] .tabs button.on{color:#EFFDFB}
html[data-theme=ocean] .tab-badge{background:#E5556B;color:#fff}
html[data-theme=ocean] .nav{
  background:rgba(8,34,44,.82);border-top:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=ocean] .nav button{color:rgba(255,255,255,.42)}
html[data-theme=ocean] .nav button.on{color:#6FE8D8}
html[data-theme=ocean] .icon-btn{background:rgba(255,255,255,.10);color:#AECDD6}
html[data-theme=ocean] .logo{color:#EAF6F8}
html[data-theme=ocean] .logo span{color:#6FE8D8}
html[data-theme=ocean] .pet-chip{background:rgba(111,232,216,.16);color:#A8F0E4}
html[data-theme=ocean] [data-auth="pending"] .auth-skeleton,
html[data-theme=ocean] [data-auth="pending"] .hdr-r::before{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.06) 63%);
  background-size:400% 100%;
}
html[data-theme=ocean] #globalIrisBadge{background:rgba(111,232,216,.16)!important}
html[data-theme=ocean] #globalProfileImgFallback{background:rgba(255,255,255,.10)!important}
html[data-theme=ocean] #dashBtnLab{
  background:rgba(110,200,255,.14)!important;border-color:rgba(110,200,255,.32)!important;color:#8FD8FF!important;
}
html[data-theme=ocean] #dashBtnLab svg{stroke:#8FD8FF!important}
html[data-theme=ocean] #dashBtnStory{
  background:rgba(255,180,120,.13)!important;border-color:rgba(255,180,120,.30)!important;color:#FFC79A!important;
}
html[data-theme=ocean] #dashMetricsHead span{color:rgba(255,255,255,.52)!important}
html[data-theme=ocean] #dashMetricsHead button{color:#6FE8D8!important}
html[data-theme=ocean] #screen-dash .hscroll{scrollbar-color:rgba(255,255,255,.18) transparent}
html[data-theme=ocean] #screen-dash .hscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

/* ═══ SKY·DAWN 모션 — night-vivid의 화려한 블록을 그대로 받는다 ═══
   keyframes는 night-vivid 브랜치의 것과 이름까지 같다(pbVivid*) — 두 브랜치를
   합칠 일이 생겨도 정의가 동일해 충돌하지 않는다. 다른 건 ④ 숨쉬기의 빛 색
   (시안 → 무대별 색 그림자)과 ⑤ 샤인의 흰색 농도(밝은 무대라 더 진하게)뿐.
   오로라 색만 테마별로 갈리고 움직임은 :is()로 한 벌을 공유한다. */
@keyframes pbVividDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,22px) scale(1.08)}}
@keyframes pbVividDrift2{0%,100%{transform:translate(0,0) scale(1.06)}50%{transform:translate(-22px,-18px) scale(1)}}
@keyframes pbVividPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes pbVividHalo{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.5)}}
@keyframes pbVividRise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pbVividShine{0%{left:-90px}45%,100%{left:130%}}
@keyframes pbVividGlowSky{0%,100%{text-shadow:0 2px 12px rgba(40,140,220,.25)}50%{text-shadow:0 2px 20px rgba(40,140,220,.50)}}
@keyframes pbVividGlowDawn{0%,100%{text-shadow:0 2px 12px rgba(240,138,60,.24)}50%{text-shadow:0 2px 20px rgba(240,138,60,.48)}}
@keyframes pbVividGlowGold{0%,100%{text-shadow:0 2px 12px rgba(232,162,12,.26)}50%{text-shadow:0 2px 20px rgba(232,162,12,.50)}}
@keyframes pbVividGlowG{0%,100%{text-shadow:0 0 22px rgba(255,160,92,.40)}50%{text-shadow:0 0 34px rgba(255,160,92,.75)}}
@keyframes pbVividGlowOcean{0%,100%{text-shadow:0 0 22px rgba(120,230,215,.45)}50%{text-shadow:0 0 34px rgba(120,230,215,.85)}}

@media (prefers-reduced-motion:no-preference){
  /* ① 오로라 — 두 덩어리가 서로 반대로 흐른다. 색은 무대별, 움직임은 공유 */
  html[data-theme=sky] .phone::before{
    background:radial-gradient(360px 360px at 4% 2%,rgba(60,170,255,.46),transparent 66%);
  }
  html[data-theme=sky] .phone::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(340px 340px at 96% 94%,rgba(45,205,190,.40),transparent 66%);
  }
  html[data-theme=dawn] .phone::before{
    background:radial-gradient(360px 360px at 4% 2%,rgba(90,180,255,.40),transparent 66%);
  }
  html[data-theme=dawn] .phone::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(340px 340px at 96% 94%,rgba(255,150,90,.34),transparent 66%);
  }
  html[data-theme=gold] .phone::before{
    background:radial-gradient(360px 360px at 4% 2%,rgba(255,196,60,.40),transparent 66%);
  }
  html[data-theme=gold] .phone::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(340px 340px at 96% 94%,rgba(120,180,255,.30),transparent 66%);
  }
  html[data-theme=ocean] .phone::before{
    background:radial-gradient(360px 360px at 4% 2%,rgba(80,220,255,.26),transparent 66%);
  }
  html[data-theme=ocean] .phone::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(340px 340px at 96% 94%,rgba(60,235,185,.24),transparent 66%);
  }
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .phone::before{animation:pbVividDrift 9s ease-in-out infinite}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .phone::after{animation:pbVividDrift2 11s ease-in-out infinite}

  /* ② 그래프 — 선이 길게 그려지고, 면이 따라 차오르고, 점이 순서대로 튄다 */
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .pb-night-line{animation-duration:1.4s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .pb-night-area{animation:pbNightFade .8s .6s both}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo){
    animation:pbVividPop .42s cubic-bezier(.2,1.7,.4,1) both;
  }
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo):nth-of-type(1){animation-delay:.30s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo):nth-of-type(2){animation-delay:.55s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo):nth-of-type(3){animation-delay:.80s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo):nth-of-type(4){animation-delay:1.05s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo):nth-of-type(5){animation-delay:1.30s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail svg circle:not(.pb-night-halo):nth-of-type(6){animation-delay:1.55s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) .pb-night-halo{animation:pbVividHalo 1.6s 1.6s ease-out infinite}

  /* ③ 타일·카드는 다시 그려질 때마다 올라온다 — 지표를 고르는 조작이 화면에 응답한다 */
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbTileRow > div{animation:pbVividRise .42s cubic-bezier(.2,1.1,.35,1) both}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbTileRow > div:nth-child(1){animation-delay:.02s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbTileRow > div:nth-child(2){animation-delay:.06s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbTileRow > div:nth-child(3){animation-delay:.10s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbTileRow > div:nth-child(4){animation-delay:.14s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbTileRow > div:nth-child(5){animation-delay:.18s}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #pbDetail > div{animation:pbVividRise .5s .12s cubic-bezier(.2,1.1,.35,1) both}

  /* ④ 대표 수치는 천천히 숨 쉰다 — 밝은 무대라 빛 대신 무대색 그림자가 오르내린다 */
  html[data-theme=sky] #pbDetail span[style*="margin-left:auto"]{animation:pbVividGlowSky 3.4s ease-in-out infinite}
  html[data-theme=dawn] #pbDetail span[style*="margin-left:auto"]{animation:pbVividGlowDawn 3.4s ease-in-out infinite}
  html[data-theme=gold] #pbDetail span[style*="margin-left:auto"]{animation:pbVividGlowGold 3.4s ease-in-out infinite}
  html[data-theme=ocean] #pbDetail span[style*="margin-left:auto"]{animation:pbVividGlowOcean 3.4s ease-in-out infinite}

  /* ⑤ 상단 액션 버튼 2개에 샤인이 지나간다 */
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnLab,
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnStory{position:relative;overflow:hidden}
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnLab::after,
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnStory::after{
    content:'';position:absolute;top:0;bottom:0;width:56px;left:-90px;pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);
    animation:pbVividShine 3.6s ease-in-out infinite;
  }
  html:is([data-theme=sky],[data-theme=dawn],[data-theme=gold],[data-theme=ocean]) #dashBtnStory::after{animation-delay:1.2s}
}

/* ═══ 앱 첫 소개 3장 — '연출 시퀀스' 리디자인(2026-08-11, mockups/onboard-wow-deck.html 이식) ═══
   다크 네이비 무대 + 장마다 연출: ①검사지 스캔→그래프 드로잉 ②질문 타이핑→AI 검색→답변
   스트리밍 ③알림→체크 자동 완성→스트릭. 슬라이드가 활성화될 때 ckd-intro.js가 .play를
   다시 붙여 그 장의 연출을 처음부터 재생한다. 배경 장식(.ckd-bg)은 JS가 주입.
   키프레임·클래스는 전부 ckd 접두어 — 전역 스타일과 충돌 방지. */
#ckdIntro{position:absolute;inset:0;z-index:var(--z-onboard-alt);display:none;flex-direction:column;padding:14px 0 22px;
  overflow:hidden;isolation:isolate;
  /* 글자 크기 배율(설정>화면) 차단 — 고정 높이 무대라 --fs>1이면 콘텐츠가 무대를 넘쳐
     SKIP·카피와 겹친다(중앙정렬이라 위아래 양쪽으로 삐져나감). 연출 화면은 크기가 구성의 일부 */
  --fs:1;
  background:linear-gradient(165deg,#1A2340 0%,#232D55 46%,#2E3767 78%,#3A3E74 100%)}
#ckdIntro.on{display:flex}
#ckdIntro .ckd-track,#ckdIntro .ckd-dots,#ckdIntro .ckd-next{position:relative;z-index:1}
/* 무대 장식: 오로라 2덩이 + 그리드 + 부유 불빛 */
#ckdIntro .ckd-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
#ckdIntro .ckd-bg::before,#ckdIntro .ckd-bg::after{content:'';position:absolute;border-radius:50%;filter:blur(58px)}
#ckdIntro .ckd-bg::before{width:320px;height:320px;top:-110px;left:-90px;background:rgba(93,205,255,.30);animation:ckdDrift 9s ease-in-out infinite}
#ckdIntro .ckd-bg::after{width:300px;height:300px;bottom:-100px;right:-80px;background:rgba(158,124,255,.30);animation:ckdDrift 11s ease-in-out infinite reverse}
@keyframes ckdDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,22px)}}
#ckdIntro .ckd-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(80% 60% at 50% 38%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 38%,#000 0%,transparent 75%)}
#ckdIntro .ckd-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(190,230,255,.85);
  box-shadow:0 0 8px rgba(140,215,255,.9);animation:ckdFloat 7s ease-in-out infinite}
@keyframes ckdFloat{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-22px);opacity:.9}}
#ckdIntro .ckd-skip{position:absolute;top:14px;right:16px;z-index:var(--z-raise);background:none;border:none;color:rgba(255,255,255,.42);font-size:calc(13.5px*var(--fs,1));font-weight:600;letter-spacing:1.5px;cursor:pointer;padding:8px;font-family:inherit}
#ckdIntro .ckd-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-height:0}
#ckdIntro .ckd-track::-webkit-scrollbar{display:none}
#ckdIntro .ckd-page{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;padding:34px 30px 0;box-sizing:border-box;text-align:center;position:relative;min-height:0}
/* 눈썹 라벨 */
#ckdIntro .ckd-eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:2.2px;color:rgba(160,205,255,.9);opacity:0;transform:translateY(-8px)}
#ckdIntro .ckd-eyebrow i{width:16px;height:1.5px;background:linear-gradient(90deg,#6FD3FF,transparent);display:block}
#ckdIntro .ckd-page.play .ckd-eyebrow{animation:ckdFadeDn .5s .05s both}
/* 무대 — 위 16px(눈썹 라벨과 분리)·아래 30px(카피와 분리)는 최소 보장 여백.
   콘텐츠가 이 안쪽보다 크면 JS fitStages()가 .ckd-fit을 통째로 비율 축소한다 */
#ckdIntro .ckd-stage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:16px 0 30px}
#ckdIntro .ckd-fit{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* 2장은 질문 풍선이 눈썹 라벨과 확실히 분리되게 상단 여백 보강 */
#ckdIntro .ckd-page:nth-child(2) .ckd-stage{padding-top:28px}
/* 3장은 알림 배너가 내려앉는 상단 영역을 비워둔다 (배너 top 64px + 높이 ~58px + 여유) */
#ckdIntro .ckd-page:nth-child(3) .ckd-stage{padding-top:84px}
/* 카피 */
#ckdIntro .ckd-copy{padding:0 0 6px;min-height:150px}
#ckdIntro h2{font-size:calc(23px*var(--fs,1));font-weight:800;line-height:1.34;letter-spacing:-1px;color:#fff;word-break:keep-all;margin:0}
#ckdIntro h2 .l{display:block;opacity:0;transform:translateY(14px);white-space:nowrap}
#ckdIntro .ckd-page.play h2 .l:nth-child(1){animation:ckdFadeUp .6s var(--ckd-tcopy,4s) cubic-bezier(.2,1,.3,1) both}
#ckdIntro .ckd-page.play h2 .l:nth-child(2){animation:ckdFadeUp .6s calc(var(--ckd-tcopy,4s) + .13s) cubic-bezier(.2,1,.3,1) both}
#ckdIntro .ckd-hl{background:linear-gradient(100deg,#8FE7FF 10%,#B9A9FF 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
#ckdIntro .ckd-body{margin-top:11px;font-size:calc(13.2px*var(--fs,1));line-height:1.68;color:rgba(255,255,255,.62);word-break:keep-all;opacity:0}
#ckdIntro .ckd-body b{color:rgba(255,255,255,.92);font-weight:700}
#ckdIntro .ckd-page.play .ckd-body{animation:ckdFadeUp .6s calc(var(--ckd-tcopy,4s) + .3s) both}
/* 제목은 <br> 아닌 .l 줄 단위 — 좁은 폭·큰 글자 설정에서도 줄이 안 깨지게 폰트 캡 */
@supports (width:1cqw){
  #ckdIntro{container-type:inline-size}
  #ckdIntro h2{font-size:min(calc(23px*var(--fs,1)),6.6cqw)}
}
/* 점 + CTA */
#ckdIntro .ckd-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 13px}
#ckdIntro .ckd-dots span{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.22);transition:width .25s,background .25s}
#ckdIntro .ckd-dots span.on{width:20px;background:linear-gradient(90deg,#8FE7FF,#B9A9FF)}
#ckdIntro .ckd-next{position:relative;margin:0 24px;border:none;border-radius:17px;padding:15px 0;overflow:hidden;cursor:pointer;font-family:inherit;
  font-size:calc(15.5px*var(--fs,1));font-weight:800;letter-spacing:-.3px;color:#0E1730;
  background:linear-gradient(120deg,#A8ECFF,#8FC4FF 55%,#C4B0FF);box-shadow:0 12px 30px rgba(120,180,255,.42)}
#ckdIntro .ckd-next::after{content:'';position:absolute;top:0;bottom:0;width:70px;left:-90px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);
  animation:ckdShine 3s 1.4s ease-in-out infinite}
@keyframes ckdShine{0%{left:-90px}45%,100%{left:130%}}
/* 공용 키프레임 */
@keyframes ckdFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ckdFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ckdFadeDn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ckdPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes ckdHalo{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}

/* ── ① 검사지 스캔 → 그래프 드로잉 ── */
#ckdIntro .ckd-sheet{position:relative;width:96px;height:120px;border-radius:11px;padding:10px 9px;flex-shrink:0;
  background:linear-gradient(180deg,#FDFBF7,#EFEAE0);transform:rotate(-7deg) scale(.7);opacity:0;
  box-shadow:0 14px 30px rgba(0,0,0,.42);overflow:hidden}
#ckdIntro .ckd-page.play .ckd-sheet{animation:ckdSheetIn .6s .15s cubic-bezier(.2,1.3,.4,1) both,ckdSheetOut .55s 2.35s ease both}
@keyframes ckdSheetIn{from{opacity:0;transform:rotate(-16deg) scale(.62) translateY(20px)}to{opacity:1;transform:rotate(-7deg) scale(1) translateY(0)}}
@keyframes ckdSheetOut{to{opacity:.10;filter:blur(2px);transform:rotate(-7deg) scale(.74) translateY(-16px)}}
#ckdIntro .ckd-sheet .hd{font-size:6.5px;font-weight:800;color:#8A7C68;letter-spacing:.3px;margin-bottom:6px;text-align:left}
#ckdIntro .ckd-sheet .ln{height:3.5px;border-radius:2px;background:#DCD4C6;margin-bottom:5px}
#ckdIntro .ckd-sheet .ln.s{width:56%}#ckdIntro .ckd-sheet .ln.m{width:78%}
#ckdIntro .ckd-sheet .ln.hot{background:linear-gradient(90deg,#F0B7C6,#DCD4C6);width:68%}
#ckdIntro .ckd-beam{position:absolute;left:0;right:0;height:26px;top:-30px;
  background:linear-gradient(180deg,transparent,rgba(120,220,255,.55),rgba(255,255,255,.95),rgba(120,220,255,.55),transparent);
  box-shadow:0 0 22px rgba(120,215,255,.95)}
#ckdIntro .ckd-page.play .ckd-beam{animation:ckdScan 1.15s .5s cubic-bezier(.5,0,.5,1) 2 both}
@keyframes ckdScan{0%{top:-30px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:120px;opacity:0}}
#ckdIntro .ckd-lens{position:absolute;right:-9px;bottom:-9px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:linear-gradient(140deg,#6FD3FF,#4A7BE8);box-shadow:0 5px 14px rgba(80,160,255,.6);opacity:0;transform:scale(.4)}
#ckdIntro .ckd-page.play .ckd-lens{animation:ckdPop .45s .5s cubic-bezier(.2,1.6,.4,1) both}
#ckdIntro .ckd-flow{margin:9px 0 11px;font-size:12px;color:rgba(150,205,255,.75);letter-spacing:3px;opacity:0}
#ckdIntro .ckd-page.play .ckd-flow{animation:ckdFadeIn .4s 1.5s both,ckdBob 1.1s 1.9s ease-in-out 2}
@keyframes ckdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
#ckdIntro .ckd-card{position:relative;width:100%;border-radius:22px;padding:15px 16px 13px;opacity:0;transform:scale(.9) translateY(16px);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.28)}
#ckdIntro .ckd-page.play .ckd-card{animation:ckdCardIn .6s 1.85s cubic-bezier(.2,1.2,.4,1) both}
@keyframes ckdCardIn{to{opacity:1;transform:scale(1) translateY(0)}}
#ckdIntro .ckd-tabs{display:flex;gap:6px;margin-bottom:12px}
#ckdIntro .ckd-chip{font-size:11px;font-weight:700;letter-spacing:.2px;padding:5px 11px;border-radius:11px;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.09);opacity:0}
#ckdIntro .ckd-chip.on{color:#0E1730;background:linear-gradient(135deg,#9EE4FF,#6FB4FF);box-shadow:0 4px 14px rgba(110,190,255,.5)}
#ckdIntro .ckd-page.play .ckd-chip{animation:ckdFlyIn .62s cubic-bezier(.2,1.25,.45,1) both}
#ckdIntro .ckd-page.play .ckd-chip:nth-child(1){animation-delay:1.9s}
#ckdIntro .ckd-page.play .ckd-chip:nth-child(2){animation-delay:2.02s}
#ckdIntro .ckd-page.play .ckd-chip:nth-child(3){animation-delay:2.14s}
@keyframes ckdFlyIn{from{opacity:0;transform:translate(-6px,-116px) scale(.55) rotate(-12deg)}60%{opacity:1}to{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
#ckdIntro .ckd-valrow{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px}
#ckdIntro .ckd-val{font-size:44px;font-weight:800;line-height:.95;letter-spacing:-2px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(140,215,255,.55)}
#ckdIntro .ckd-unit{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.5);padding-bottom:5px}
#ckdIntro .ckd-delta{margin-left:auto;font-size:12px;font-weight:800;color:#7BF0B4;background:rgba(60,220,150,.14);border-radius:9px;padding:4px 9px;opacity:0;transform:translateY(6px)}
#ckdIntro .ckd-page.play .ckd-delta{animation:ckdFadeUp .45s 3.35s cubic-bezier(.2,1.4,.4,1) both}
#ckdIntro .ckd-capline{font-size:10.5px;color:rgba(255,255,255,.45);margin-bottom:6px;font-weight:500;text-align:left}
#ckdIntro .ckd-chart{display:block;width:100%;height:98px;overflow:visible}
#ckdIntro .ckd-line{fill:none;stroke:url(#ckdLg);stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(120,210,255,.85))}
#ckdIntro .ckd-page.play .ckd-line{stroke-dasharray:1;stroke-dashoffset:1;animation:ckdDraw 1.5s 2.2s cubic-bezier(.4,0,.25,1) both}
@keyframes ckdDraw{to{stroke-dashoffset:0}}
#ckdIntro .ckd-area{fill:url(#ckdAg);opacity:0}
#ckdIntro .ckd-page.play .ckd-area{animation:ckdFadeIn .9s 2.7s both}
#ckdIntro .ckd-dot{opacity:0}
#ckdIntro .ckd-page.play .ckd-dot{animation:ckdPop .38s cubic-bezier(.2,1.7,.4,1) both}
#ckdIntro .ckd-page.play .ckd-d1{animation-delay:2.35s}#ckdIntro .ckd-page.play .ckd-d2{animation-delay:2.75s}
#ckdIntro .ckd-page.play .ckd-d3{animation-delay:3.15s}#ckdIntro .ckd-page.play .ckd-d4{animation-delay:3.5s}
#ckdIntro .ckd-chalo{opacity:0;transform-origin:286px 74px}
#ckdIntro .ckd-page.play .ckd-chalo{animation:ckdHalo 1.7s 3.6s ease-out infinite}
#ckdIntro .ckd-xlab{display:flex;justify-content:space-between;margin-top:7px;font-size:9.5px;color:rgba(255,255,255,.38);font-weight:600;opacity:0}
#ckdIntro .ckd-page.play .ckd-xlab{animation:ckdFadeIn .5s 3.3s both}
#ckdIntro .ckd-iris{position:absolute;top:-13px;right:12px;display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:14px;
  font-size:12px;font-weight:800;color:#241A00;letter-spacing:.2px;opacity:0;transform:scale(2.1) rotate(-14deg);
  background:linear-gradient(135deg,#FFE9A8,#E0B23F);box-shadow:0 8px 22px rgba(224,178,63,.55);z-index:2}
#ckdIntro .ckd-iris small{font-size:9px;font-weight:700;opacity:.65;letter-spacing:.6px}
#ckdIntro .ckd-page.play .ckd-iris{animation:ckdStamp .55s 3.6s cubic-bezier(.3,1.5,.4,1) both}
@keyframes ckdStamp{0%{opacity:0;transform:scale(2.1) rotate(-14deg)}60%{opacity:1;transform:scale(.9) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
#ckdIntro .ckd-burst{position:absolute;top:0;right:34px;width:0;height:0;z-index:1}
#ckdIntro .ckd-burst i{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFE9A8;opacity:0;box-shadow:0 0 8px rgba(255,225,150,.9)}
#ckdIntro .ckd-page.play .ckd-burst i{animation:ckdBurst .6s 3.72s cubic-bezier(.15,.8,.4,1) both}
@keyframes ckdBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
#ckdIntro .ckd-aitag{position:absolute;left:12px;top:-12px;display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:11px;
  font-size:10px;font-weight:700;color:#0E1730;background:linear-gradient(135deg,#C9F5D8,#7BE8B4);
  box-shadow:0 6px 16px rgba(80,220,160,.4);opacity:0;z-index:2}
#ckdIntro .ckd-page.play .ckd-aitag{animation:ckdFadeUp .45s 3.9s cubic-bezier(.2,1.4,.4,1) both}

/* ── ② 질문 타이핑 → AI 검색 → 답변 스트리밍 ── */
#ckdIntro .ckd-chatwrap{width:100%;display:flex;flex-direction:column;gap:10px}
#ckdIntro .ckd-qbub{align-self:flex-end;max-width:92%;border-radius:18px 18px 5px 18px;padding:12px 15px;
  font-size:calc(13.5px*var(--fs,1));font-weight:600;color:#fff;line-height:1.5;text-align:left;opacity:0;transform:translateY(10px) scale(.94);
  background:linear-gradient(135deg,rgba(143,196,255,.34),rgba(158,124,255,.34));
  border:1px solid rgba(160,200,255,.4);box-shadow:0 8px 22px rgba(93,140,255,.3)}
#ckdIntro .ckd-page.play .ckd-qbub{animation:ckdFadeUp .4s .35s cubic-bezier(.2,1.3,.4,1) both}
#ckdIntro .ckd-caret{display:inline-block;width:2px;height:1em;vertical-align:-2px;background:#BFE2FF;margin-left:1px;animation:ckdBlink .8s step-end infinite}
#ckdIntro .ckd-caret.off{display:none}
@keyframes ckdBlink{50%{opacity:0}}
/* 답변 슬롯 — '검색 중' 풍선을 답변 박스가 나타날 자리에 겹쳐 띄운다(흐름 밖).
   사라져도 유령 공간이 안 남아 질문↔답변 간격이 다른 풍선들과 같고, 높이가 처음부터 고정 */
#ckdIntro .ckd-aslot{position:relative;width:100%;display:flex;flex-direction:column}
#ckdIntro .ckd-think{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;gap:10px;border-radius:18px 18px 18px 5px;padding:11px 15px;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);opacity:0;transform:translateY(8px)}
#ckdIntro .ckd-think.show{animation:ckdFadeUp .35s cubic-bezier(.2,1.3,.4,1) both}
#ckdIntro .ckd-think.hide{animation:ckdThinkOut .3s ease both}
@keyframes ckdThinkOut{to{opacity:0;transform:translateY(-6px) scale(.95)}}
#ckdIntro .ckd-orb{position:relative;width:22px;height:22px;flex-shrink:0}
#ckdIntro .ckd-orb::before{content:'';position:absolute;inset:4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#C9F0FF,#6FB4FF);box-shadow:0 0 14px rgba(120,200,255,.9);animation:ckdOrbPulse 1.1s ease-in-out infinite}
#ckdIntro .ckd-orb::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;
  border-top-color:#8FE7FF;border-right-color:rgba(143,231,255,.35);animation:ckdSpin .8s linear infinite}
@keyframes ckdOrbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes ckdSpin{to{transform:rotate(360deg)}}
#ckdIntro .ckd-tktx{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.45;text-align:left}
#ckdIntro .ckd-tktx b{display:block;font-size:13px;font-weight:800;color:#9EE4FF;font-variant-numeric:tabular-nums;letter-spacing:.3px}
#ckdIntro .ckd-abub{align-self:flex-start;max-width:100%;border-radius:18px 18px 18px 5px;padding:13px 15px;text-align:left;
  font-size:calc(13px*var(--fs,1));line-height:1.62;color:rgba(255,255,255,.82);opacity:0;transform:translateY(10px);
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.24)}
#ckdIntro .ckd-abub.show{animation:ckdFadeUp .4s cubic-bezier(.2,1.3,.4,1) both}
#ckdIntro .ckd-abub b{color:#9EE4FF;font-weight:800;text-shadow:0 0 18px rgba(140,215,255,.5)}
#ckdIntro .ckd-aihd{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:1.2px;color:rgba(158,228,255,.85);margin-bottom:7px}
#ckdIntro .ckd-aihd i{width:14px;height:1.5px;background:linear-gradient(90deg,#6FD3FF,transparent)}
#ckdIntro .ckd-exps{display:flex;flex-direction:column;gap:7px;width:100%}
#ckdIntro .ckd-exp{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px 12px;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.15);opacity:0;transform:translateX(18px)}
#ckdIntro .ckd-exp.show{animation:ckdExpIn .5s cubic-bezier(.2,1.25,.4,1) both}
@keyframes ckdExpIn{to{opacity:1;transform:translateX(0)}}
#ckdIntro .ckd-exp .face{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;
  background:rgba(143,196,255,.18);border:1px solid rgba(143,196,255,.3)}
#ckdIntro .ckd-exp .q{flex:1;font-size:calc(11.5px*var(--fs,1));line-height:1.5;color:rgba(255,255,255,.78)}
#ckdIntro .ckd-exp .q b{color:#9EE4FF}
#ckdIntro .ckd-exp .q small{display:block;margin-top:2px;font-size:9.5px;font-weight:700;color:rgba(158,228,255,.6);letter-spacing:.3px}
#ckdIntro .ckd-exp .tag{font-size:9px;font-weight:800;color:#7BF0B4;background:rgba(60,220,150,.13);border-radius:7px;padding:3px 7px;white-space:nowrap}
#ckdIntro .ckd-stag{align-self:flex-start;display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:11px;
  font-size:10px;font-weight:700;color:#0E1730;background:linear-gradient(135deg,#C9F5D8,#7BE8B4);
  box-shadow:0 6px 16px rgba(80,220,160,.4);opacity:0}
#ckdIntro .ckd-stag.show{animation:ckdFadeUp .45s cubic-bezier(.2,1.4,.4,1) both}

/* ── ③ 알림 → 체크 자동 완성 → 스트릭 ── */
/* 알림 배너 — 눈썹 라벨(목차) 아래로 내려앉는다. top 64 = 페이지 패딩 34 + 라벨 줄 ~19 + 여유 */
#ckdIntro .ckd-noti{position:absolute;top:64px;left:18px;right:18px;z-index:3;display:flex;align-items:center;gap:11px;
  border-radius:18px;padding:12px 14px;opacity:0;transform:translateY(-70px);
  background:rgba(24,31,58,.86);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}
#ckdIntro .ckd-page.play .ckd-noti{animation:ckdNotiIn .65s .4s cubic-bezier(.2,1.25,.4,1) both,ckdNotiOut .5s 3.4s ease both}
@keyframes ckdNotiIn{to{opacity:1;transform:translateY(0)}}
@keyframes ckdNotiOut{to{opacity:0;transform:translateY(-70px)}}
#ckdIntro .ckd-bell{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
  background:linear-gradient(140deg,#6FD3FF,#4A7BE8);box-shadow:0 5px 14px rgba(80,160,255,.5)}
#ckdIntro .ckd-page.play .ckd-bell{animation:ckdRing .9s 1s ease-in-out 2}
@keyframes ckdRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(13deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(5deg)}}
#ckdIntro .ckd-noti .tx{flex:1;text-align:left}
#ckdIntro .ckd-noti .tx b{display:block;font-size:calc(12.5px*var(--fs,1));font-weight:800;color:#fff;letter-spacing:-.2px}
#ckdIntro .ckd-noti .tx span{font-size:10.5px;color:rgba(255,255,255,.55)}
#ckdIntro .ckd-noti .now{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.4)}
#ckdIntro .ckd-tdcard{position:relative;width:100%;border-radius:22px;padding:16px;opacity:0;transform:scale(.92) translateY(18px);
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.26)}
#ckdIntro .ckd-page.play .ckd-tdcard{animation:ckdCardIn .6s 1.0s cubic-bezier(.2,1.2,.4,1) both}
#ckdIntro .ckd-tdhead{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
#ckdIntro .ckd-tdhead b{font-size:calc(13px*var(--fs,1));font-weight:800;color:#fff;letter-spacing:-.2px}
#ckdIntro .ckd-tdhead span{font-size:10px;font-weight:700;letter-spacing:1.4px;color:rgba(158,228,255,.65)}
#ckdIntro .ckd-trow{display:flex;align-items:center;gap:11px;border-radius:14px;padding:11px 12px;margin-bottom:8px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(12px)}
#ckdIntro .ckd-page.play .ckd-trow{animation:ckdFadeUp .45s cubic-bezier(.2,1.2,.4,1) both}
#ckdIntro .ckd-page.play .ckd-trow:nth-of-type(1){animation-delay:1.25s}
#ckdIntro .ckd-page.play .ckd-trow:nth-of-type(2){animation-delay:1.4s}
#ckdIntro .ckd-page.play .ckd-trow:nth-of-type(3){animation-delay:1.55s}
#ckdIntro .ckd-trow .ico{font-size:15px;line-height:1}
#ckdIntro .ckd-trow .tx{flex:1;text-align:left;font-size:calc(12.5px*var(--fs,1));font-weight:700;color:#EAEEF9}
#ckdIntro .ckd-trow .tm{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.42);margin-left:5px}
#ckdIntro .ckd-cbox{position:relative;width:23px;height:23px;border-radius:12px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.3);box-sizing:border-box}
#ckdIntro .ckd-cbox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#ckdIntro .ckd-cbox svg path{fill:none;stroke:#0A1A10;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#ckdIntro .ckd-cbox.pre{border-color:transparent;background:linear-gradient(135deg,#39C98E,#5FE3B0);box-shadow:0 0 14px rgba(95,227,176,.4)}
#ckdIntro .ckd-cbox.pre svg path{stroke-dashoffset:0;opacity:1}
#ckdIntro .ckd-page.play .ckd-cbox.hero{animation:ckdCboxFill .35s 2.0s ease both}
@keyframes ckdCboxFill{to{border-color:transparent;background:linear-gradient(135deg,#39C98E,#5FE3B0);box-shadow:0 0 18px rgba(95,227,176,.55)}}
#ckdIntro .ckd-page.play .ckd-cbox.hero svg path{animation:ckdCkDraw .4s 2.25s cubic-bezier(.4,0,.3,1) both}
@keyframes ckdCkDraw{from{stroke-dashoffset:1;opacity:1}to{stroke-dashoffset:0;opacity:1}}
#ckdIntro .ckd-cbox .h{position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(95,227,176,.6);opacity:0;transform:scale(.4)}
#ckdIntro .ckd-page.play .ckd-cbox.hero .h{animation:ckdHalo 1.1s 2.5s ease-out 2}
#ckdIntro .ckd-page.play .ckd-trow.hero{animation:ckdFadeUp .45s 1.4s cubic-bezier(.2,1.2,.4,1) both,ckdRowGlow .8s 2.3s ease both}
@keyframes ckdRowGlow{30%{background:rgba(95,227,176,.16);border-color:rgba(95,227,176,.45)}100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}}
#ckdIntro .ckd-conf{position:absolute;right:22px;top:50%;width:0;height:0;pointer-events:none}
#ckdIntro .ckd-conf i{position:absolute;width:5px;height:5px;border-radius:2px;opacity:0}
#ckdIntro .ckd-conf i:nth-child(odd){background:#7BF0B4}#ckdIntro .ckd-conf i:nth-child(3n){background:#8FE7FF}
#ckdIntro .ckd-conf i:nth-child(3n+1){background:#FFE9A8}#ckdIntro .ckd-conf i:nth-child(4n){background:#C4B0FF;border-radius:50%}
#ckdIntro .ckd-page.play .ckd-conf i{animation:ckdConf .75s 2.5s cubic-bezier(.15,.8,.4,1) both}
@keyframes ckdConf{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot,220deg)) scale(.5)}}
#ckdIntro .ckd-streak{display:flex;align-items:center;gap:9px;margin-top:4px;border-radius:14px;padding:11px 13px;
  background:linear-gradient(135deg,rgba(255,180,90,.16),rgba(255,120,80,.12));
  border:1px solid rgba(255,190,110,.3);opacity:0;transform:translateY(10px) scale(.95)}
#ckdIntro .ckd-page.play .ckd-streak{animation:ckdFadeUp .5s 2.9s cubic-bezier(.2,1.35,.4,1) both}
#ckdIntro .ckd-streak .fl{font-size:17px;line-height:1}
#ckdIntro .ckd-page.play .ckd-streak .fl{animation:ckdFlame 1s 3.1s ease-in-out 3}
@keyframes ckdFlame{0%,100%{transform:scale(1)}50%{transform:scale(1.28) rotate(-6deg)}}
#ckdIntro .ckd-streak .tx{flex:1;text-align:left;font-size:calc(12px*var(--fs,1));font-weight:700;color:#FFD9A8}
#ckdIntro .ckd-streak .tx b{font-size:calc(14.5px*var(--fs,1));font-weight:800;color:#FFC978;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,190,110,.55)}
#ckdIntro .ckd-week{display:flex;gap:5px}
#ckdIntro .ckd-week i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
#ckdIntro .ckd-page.play .ckd-week i{animation:ckdDayOn .3s cubic-bezier(.2,1.5,.4,1) both}
#ckdIntro .ckd-page.play .ckd-week i:nth-child(1){animation-delay:3.05s}#ckdIntro .ckd-page.play .ckd-week i:nth-child(2){animation-delay:3.13s}
#ckdIntro .ckd-page.play .ckd-week i:nth-child(3){animation-delay:3.21s}#ckdIntro .ckd-page.play .ckd-week i:nth-child(4){animation-delay:3.29s}
#ckdIntro .ckd-page.play .ckd-week i:nth-child(5){animation-delay:3.37s}#ckdIntro .ckd-page.play .ckd-week i:nth-child(6){animation-delay:3.45s}
#ckdIntro .ckd-page.play .ckd-week i:nth-child(7){animation-delay:3.53s}
@keyframes ckdDayOn{to{background:#FFC978;box-shadow:0 0 8px rgba(255,190,110,.8)}}

/* 낮은 화면 — 무대를 살짝 압축해 카피·CTA가 밀리지 않게 */
@media (max-height:720px){
  #ckdIntro .ckd-sheet{width:84px;height:104px}
  #ckdIntro .ckd-copy{min-height:126px}
  #ckdIntro h2{font-size:calc(20px*var(--fs,1))}
  #ckdIntro .ckd-chart{height:78px}
}
/* 모션 최소화: 연출 없이 완성 상태를 바로 보여준다 (JS도 RM이면 타이핑·카운터를 건너뜀) */
@media (prefers-reduced-motion:reduce){
  #ckdIntro *,#ckdIntro *::before,#ckdIntro *::after{animation:none!important}
  #ckdIntro .ckd-eyebrow,#ckdIntro .ckd-sheet,#ckdIntro .ckd-lens,#ckdIntro .ckd-flow,#ckdIntro .ckd-card,
  #ckdIntro .ckd-chip,#ckdIntro .ckd-delta,#ckdIntro .ckd-area,#ckdIntro .ckd-dot,#ckdIntro .ckd-xlab,
  #ckdIntro .ckd-iris,#ckdIntro .ckd-aitag,#ckdIntro h2 .l,#ckdIntro .ckd-body,#ckdIntro .ckd-qbub,
  #ckdIntro .ckd-abub,#ckdIntro .ckd-exp,#ckdIntro .ckd-stag,#ckdIntro .ckd-tdcard,#ckdIntro .ckd-trow,
  #ckdIntro .ckd-streak{opacity:1;transform:none}
  #ckdIntro .ckd-line{stroke-dasharray:none}
  #ckdIntro .ckd-week i{background:#FFC978}
  #ckdIntro .ckd-cbox.hero{border-color:transparent;background:linear-gradient(135deg,#39C98E,#5FE3B0)}
  #ckdIntro .ckd-cbox.hero svg path{stroke-dashoffset:0;opacity:1}
  #ckdIntro .ckd-noti,#ckdIntro .ckd-think,#ckdIntro .ckd-caret{opacity:0}
}

/* ═══════════════════════════════════════════════════════════════════
   DAWN 전 페이지 확장 — feat/dawn-all-pages (2026-08-11)
   위 dawn 블록은 대시보드+공용 크롬까지만 입혔다. 여기서부터는 나머지 여섯
   스크린(검사상세·케어·커뮤니티·라이브·설정·AI)과 시트·서랍의 하드코딩
   표면을 같은 문법으로 덮는다.
   문법 요약 — 무대(새벽 그라디언트)는 비치게, 카드는 반투명 순백 유리,
   고정 크롬(스티키 헤더·입력바)은 유리+블러, 포인트는 살구(#D06A18).
   인라인 style은 [style*=...] 속성 선택자 + !important — night 블록 선례를 따른다.
═══════════════════════════════════════════════════════════════════ */

/* ── 공통: 인라인 흰 배경 → 유리 표면. JS가 그린 인라인 style도 같이 잡힌다.
      주의 — [style*="background:#FFF"] 3글자 대문자는 #FFF5E0·#FFF4F0 같은
      웜 칩까지 삼키므로 쓰지 않는다. 소문자 #fff는 긴 변형이 코드에 없어 안전.
      --surface 토큰 참조라 g(다크 유리)와 공유 ── */
html:is([data-theme=dawn],[data-theme=g]) .screen [style*="background:#fff"],
html:is([data-theme=dawn],[data-theme=g]) .screen [style*="background:#FFFFFF"],
html:is([data-theme=dawn],[data-theme=g]) .comm-post-screen [style*="background:#fff"]{
  background:var(--surface)!important;
}
/* 회색 칩·트랙(#F0F1F4)과 베이지 폴백(#EDE9E4)은 무대 위에서 따로 놀아 — 따뜻한 반투명으로 */
html[data-theme=dawn] .screen [style*="background:#F0F1F4"]{background:rgba(215,170,130,.20)!important}
html[data-theme=dawn] .screen [style*="background:#EDE9E4"]{background:rgba(215,170,130,.24)!important}
/* 검사상세 하단 마감 띠 — 캔버스색 대신 무대가 비치게 (g 공유) */
html:is([data-theme=dawn],[data-theme=g]) .screen [style*="background:#F5F0EB"]{background:transparent!important}

/* ── 검사상세(#screen-detail): 타임라인 카드 + 아코디언 3장 ── */
html[data-theme=dawn] #detailTimeline{border-bottom-color:var(--line)!important}
html[data-theme=dawn] #acc-core, html[data-theme=dawn] #acc-comp{border-bottom-color:var(--line)!important}
html[data-theme=dawn] #screen-detail [style*="border-bottom:1px solid #EDE9E4"]{border-bottom-color:var(--line)!important}

/* ── 케어(#screen-care): .pb-card가 var(--white)를 물고 있어 토큰 확장만으로 유리가 된다.
      카드 테두리 → 그림자로 띄우는 쪽이 무대 위에서 덜 탁하다 ── */
html[data-theme=dawn] .pb-card{
  border-color:rgba(215,170,130,.30);
  box-shadow:0 10px 26px rgba(220,120,50,.10),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── 커뮤니티(#screen-community) ── */
html[data-theme=dawn] .comm-head{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
html[data-theme=dawn] .comm-feed{background:var(--surface);border-top-color:rgba(215,170,130,.18)}
html[data-theme=dawn] .comm-cats button{background:rgba(255,255,255,.66)}
html[data-theme=dawn] .comm-cats button.on{background:#E8823C;border-color:#E8823C}
/* 글 상세 오버레이 — 읽는 화면이라 반투명 대신 무대 그라디언트를 그대로 깐다(글자 대비 확보) */
html[data-theme=dawn] .comm-post-screen{
  background:linear-gradient(168deg,#E4F2FF 0%,#F2F3EE 42%,#FFF0DC 72%,#FFE4D2 100%);
}
html[data-theme=dawn] .comm-post-hdr,
html[data-theme=dawn] .comm-post-cmtbar{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme=dawn] .comm-post-article,
html[data-theme=dawn] .comm-post-comments{background:var(--surface)}
/* 카드화 — 목록 판·글 상세 본문·댓글 판을 무대 위에 뜨는 라운드 카드로.
   판 자체는 계속 불투명에 가까운 표면(긴 글 가독성 유지), 무대는 카드 가장자리로만 비친다.
   기본(refresh) 테마는 흰 배경 위 흰 카드라 의미가 없어 dawn·g에만 적용. */
html:is([data-theme=dawn],[data-theme=g]) .comm-feed{
  margin:10px 10px 16px;border-radius:16px;border:1px solid var(--line);
}
html:is([data-theme=dawn],[data-theme=g]) .comm-post-article{
  margin:10px 10px 0;border-radius:16px;border:1px solid var(--line);
}
html:is([data-theme=dawn],[data-theme=g]) .comm-post-comments{
  margin:8px 10px 14px;border-radius:16px;border:1px solid var(--line);
}
html[data-theme=dawn] :is(.comm-feed,.comm-post-article,.comm-post-comments){
  border-color:rgba(215,170,130,.28);
  box-shadow:0 10px 26px rgba(220,120,50,.09),inset 0 1px 0 rgba(255,255,255,.9);
}
/* 카드화가 가져간 좌우 20px 회수 — 행 안쪽 여백·썸네일·댓글박스를 살짝 줄여
   메타줄(날짜·조회·공감)이 한 줄에 다 들어가게 */
html:is([data-theme=dawn],[data-theme=g]) .comm-row{padding:14px 12px;gap:9px}
html:is([data-theme=dawn],[data-theme=g]) .comm-thumb{width:48px;height:48px}
html:is([data-theme=dawn],[data-theme=g]) .comm-cmtbox{min-width:34px;padding:0 2px}

/* ── 라이브 라운지(#screen-live) ── */
html[data-theme=dawn] .live-chat{background:transparent}
html[data-theme=dawn] .live-presence{background:rgba(255,255,255,.55);border-bottom-color:var(--line)}
html[data-theme=dawn] .live-msg-bubble{
  background:rgba(255,255,255,.92);border-color:rgba(215,170,130,.30);
  box-shadow:0 4px 14px rgba(220,120,50,.10);
}
/* 내 말풍선 — --primary가 살구로 바뀌므로 그대로 두면 자동으로 dawn 포인트가 된다 */
html[data-theme=dawn] .live-compose{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top-color:var(--line);
}
html[data-theme=dawn] .live-compose textarea{background:rgba(255,255,255,.85)}

/* ── 설정(#screen-settings) ── */
html[data-theme=dawn] .set-card{
  border-color:rgba(215,170,130,.28);
  box-shadow:0 10px 26px rgba(220,120,50,.09),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── AI 경험담(#screen-ai): 피드는 무대가 비치고, 입력바·서랍은 유리 ── */
html[data-theme=dawn] .rag-feed{background:transparent}
html[data-theme=dawn] .rag-input{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme=dawn] .rag-input textarea{background:rgba(255,255,255,.85)}
html[data-theme=dawn] .rag-titlebar{background:rgba(255,255,255,.78)}
html[data-theme=dawn] .rag-drawer{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=dawn] .rag-bubble.ai table,
html[data-theme=dawn] .rag-bubble.ai.sys{background:rgba(255,255,255,.88)}

/* ── 바텀시트·모달: 유리+블러 (리프레시 문법 계승, 무대색 그림자) ── */
html[data-theme=dawn] .mvp-sheet{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 -18px 40px rgba(220,120,50,.18);
}
html[data-theme=dawn] .mvp-metric{background:rgba(255,255,255,.85)}
html[data-theme=dawn] .mvp-modal-bg{background:rgba(60,34,14,.30)}

/* ── 스크롤바: 대시보드 전용이던 것을 전 스크린으로 ── */
html[data-theme=dawn] .screen .hscroll{scrollbar-color:rgba(215,170,130,.44) transparent}
html[data-theme=dawn] .screen .hscroll::-webkit-scrollbar-thumb{background:rgba(215,170,130,.44)}

/* ── 공용 프로필 밴드 + 요약바 — 흰 전폭 띠 → 무대 위 유리 카드 (08-11 피드백) ──
   스크린 밖 크롬이라 위 확장에서 빠져 혼자 옛 모습으로 남아 있었다.
   리프레시의 '카드로 띄우기' 문법을 dawn 유리로 승계하고, 아바타에 새벽
   그라디언트 링(하늘빛→살구, 무대 축소판)을 둘러 시선 앵커를 만든다 */
html[data-theme=dawn] #globalProfileHeader{
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,236,214,.66))!important;
  margin:8px 12px 2px;border-radius:16px;padding:9px 12px!important;
  border:1px solid rgba(215,170,130,.32);
  box-shadow:0 10px 26px rgba(220,120,50,.13),inset 0 1px 0 rgba(255,255,255,.95);
}
/* isolation 없으면 z-index:-1 링이 wrap을 지나 밴드 배경 '뒤'까지 내려가 안 보인다
   (.phone::before 오로라와 같은 함정 — night 블록 주석 참고). 링은 새벽 그라디언트
   그대로 g(다크)와 공유 — 어두운 카드 위에서도 같은 브랜드 앵커로 읽힌다 */
html:is([data-theme=dawn],[data-theme=g]) #globalProfilePhotoWrap{isolation:isolate}
html:is([data-theme=dawn],[data-theme=g]) #globalProfilePhotoWrap::before{
  /* 흰 갭(아래 box-shadow 2px)이 안쪽 2px를 덮으므로 -4.5px까지 내밀어야 링이 2.5px 남는다 */
  content:'';position:absolute;inset:-4.5px;border-radius:17px;z-index:-1;
  background:linear-gradient(140deg,#6EB9FF 0%,#FFD9A8 52%,#F08A3C 100%);
  box-shadow:0 5px 14px rgba(240,138,60,.32);
}
/* 링과 사진 사이 흰 갭 한 겹 — 사진이 링에 직접 닿으면 색이 뭉개진다 */
html:is([data-theme=dawn],[data-theme=g]) #globalProfileImg,
html:is([data-theme=dawn],[data-theme=g]) #globalProfileImgFallback{box-shadow:0 0 0 2px rgba(255,255,255,.92)}
/* 이름 줄: 성별·메타가 유리 칩으로 통일되며(A안 08-11) 이름이 상대적으로 얇아 보인다 — 반 단계 승격.
   index.html 인라인(16.8px·600)을 이겨야 하므로 !important */
html:is([data-theme=dawn],[data-theme=g]) #globalProfileNameRow{
  font-size:calc(17.5px*var(--fs,1))!important;font-weight:700!important;letter-spacing:-.3px;
}
/* IRIS 배지: 평면 살구 칩 → 미니 유리 칩. 라벨·물음표의 네이비 인라인 색만 웜으로
   (숫자·아크 색은 JS가 단계별로 칠하므로 건드리지 않는다) */
html[data-theme=dawn] #globalIrisBadge{
  background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,228,198,.6))!important;
  border:1px solid rgba(230,110,40,.26);
  box-shadow:0 6px 16px rgba(240,138,60,.16);
}
html[data-theme=dawn] #globalIrisBadge span[style*="letter-spacing"]{color:#B4560F!important}
html[data-theme=dawn] #globalIrisBadge span[style*="border-radius:50%"]{
  background:rgba(230,110,40,.14)!important;color:#B4560F!important;
}
/* 헤더 알림 벨 — 인라인 #EDE9E4를 이기면서(속성 선택자 유지) 유리 원형으로 */
html[data-theme=dawn] .hdr .icon-btn[style*="#EDE9E4"]{
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(215,170,130,.34);
  color:#6E5A40;
  box-shadow:0 4px 12px rgba(220,120,50,.12);
}
/* 커뮤니티·채팅의 한 줄 요약바(#compactBar)도 같은 문법: 유리+블러 */
html[data-theme=dawn] #compactBar{
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(215,170,130,.28)!important;
}

/* ── 수치상세(#screen-detail) 내부 — JS 렌더 잔재 정리 (08-11 2차 피드백) ──
   선 글로우·드로우 모션·추이 알약은 app-core.js PB_GLOW 분기가 담당.
   여기서는 CSS로 닿는 인라인 색만: 정적 상태 칩, 표 잔선, 스티키 열, SVG 네이비 */
/* 스티키 열은 유리(반투명)면 스크롤한 숫자가 밑에서 비쳐 보인다 — 불투명 웜 화이트 예외.
   표 컨테이너도 같은 단색으로 깔아 스티키와 이음매 없이 한 판이 되게 (g와 같은 원리) */
html[data-theme=dawn] #body-core > .hscroll{background:#FFFCF7;border-radius:12px}
html[data-theme=dawn] #screen-detail [style*="position:sticky"][style*="background:#fff"]{background:#FFFCF7!important}
html[data-theme=dawn] #mvpChart svg rect[fill="#fff"]{fill:#FFFCF7}
/* 아코디언 헤더의 정적 상태 칩(index.html 하드코딩) → 테마 상태색 (토큰 참조라 g와 공유) */
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="background:#F5EAE0"]{background:var(--warn-bg)!important}
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="color:#8A4820"]{color:var(--warn-tx)!important}
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="background:#E8F0E4"]{background:var(--ok-bg)!important}
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="color:#3A6A2A"]{color:var(--ok-tx)!important}
/* 표·아코디언 잔선(구 베이지 팔레트) → 라인 토큰 (토큰 참조라 g와 공유) */
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="border-top:1px solid #F0ECE6"]{border-top-color:var(--line)!important}
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="border-bottom:1px solid #F0ECE6"]{border-bottom-color:var(--line)!important}
html:is([data-theme=dawn],[data-theme=g]) #screen-detail [style*="border-bottom:1px solid #F4EFE8"]{border-bottom-color:var(--line)!important}
/* 아코디언 아이콘·잠금 알약의 네이비 스트로크 → 살구 (단계·상태 의미색 아님) */
html[data-theme=dawn] #screen-detail svg[stroke="#26315A"]{stroke:#D06A18}
html[data-theme=dawn] #mvpChart svg line[stroke="#26315A"]{stroke:#B4560F}
/* 차트 점: 선 드로우가 끝나는 시점에 맞춰 떠오른다 (드로우는 pb-night-line 공유 keyframes) */
@media (prefers-reduced-motion:no-preference){
  html:is([data-theme=dawn],[data-theme=g]) #mvpChart svg circle{animation:pbNightFade .5s .55s both}
}

/* ── 수치상세·케어 '화려함 갭' 메꾸기 (08-11 3차 피드백) ──
   대시보드는 무대 위에 유리 카드가 떠 있는데 수치상세는 흰 전폭 띠 두 장이었다.
   섹션을 대시보드와 같은 둥근 유리 카드로 분리해 사이로 무대가 흐르게 한다.
   차트 강화(그라디언트 스트로크·에어리어·할로 펄스)는 labChartSVG PB_GLOW 분기 담당 */
html[data-theme=dawn] #detailTimeline{
  margin:10px 12px 0!important;border-radius:18px;border-bottom:none!important;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.72))!important;
  border:1px solid rgba(215,170,130,.30);
  box-shadow:0 18px 42px rgba(220,120,50,.15),inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme=dawn] #acc-core,
html[data-theme=dawn] #acc-comp,
html[data-theme=dawn] #acc-general{
  margin:8px 12px;border-radius:18px;border-bottom:none!important;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.74))!important;
  border:1px solid rgba(215,170,130,.28);
  box-shadow:0 12px 30px rgba(220,120,50,.11),inset 0 1px 0 rgba(255,255,255,.95);
}
/* 카드가 거의 순백이라 스티키 열 예외색도 카드에 녹게 살짝 투명하게 유지(위 규칙 그대로) */

/* 케어·수치상세의 .pb-card도 대시보드 카드 문법(그라디언트 유리)으로 */
html[data-theme=dawn] :is(#screen-care,#screen-detail) .pb-card{
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
}

/* ── 진입 모션: 탭을 열 때마다 카드가 아래에서 떠오른다 (대시보드 타일과 같은 리듬, g 공유) ── */
@media (prefers-reduced-motion:no-preference){
  html:is([data-theme=dawn],[data-theme=g]) :is(#detailTimeline,#acc-core,#acc-comp,#acc-general){
    animation:pbVividRise .5s cubic-bezier(.2,1.1,.35,1) both;
  }
  html:is([data-theme=dawn],[data-theme=g]) #detailTimeline{animation-delay:.03s}
  html:is([data-theme=dawn],[data-theme=g]) #acc-core{animation-delay:.10s}
  html:is([data-theme=dawn],[data-theme=g]) #acc-comp{animation-delay:.17s}
  html:is([data-theme=dawn],[data-theme=g]) #acc-general{animation-delay:.24s}
  html:is([data-theme=dawn],[data-theme=g]) #screen-care > div{animation:pbVividRise .45s cubic-bezier(.2,1.1,.35,1) both}
  html:is([data-theme=dawn],[data-theme=g]) #screen-care > div:nth-child(1){animation-delay:.03s}
  html:is([data-theme=dawn],[data-theme=g]) #screen-care > div:nth-child(2){animation-delay:.09s}
  html:is([data-theme=dawn],[data-theme=g]) #screen-care > div:nth-child(3){animation-delay:.15s}
  html:is([data-theme=dawn],[data-theme=g]) #screen-care > div:nth-child(4){animation-delay:.21s}
}

/* ── 헤더 마감 (08-11 4차 피드백: "맨 상단이 혼자 유치하다") ──
   평평한 반투명 띠 + 원색 칩 조합이 문제였다. 헤더는 위가 밝은 유리 그라디언트로
   눌러 주고, 워드마크는 새벽 서사(밤 남빛→해뜨는 살구)를 글자에 입히고,
   칩·벨은 프로필 밴드의 IRIS 배지와 같은 '미니 유리 칩' 문법으로 통일한다 */
html[data-theme=dawn] .hdr{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.58));
  border-bottom:1px solid rgba(215,170,130,.22);
}
html[data-theme=dawn] .hdr .brand-home h1{
  background:linear-gradient(100deg,#1E2A46 0%,#3D6BB4 38%,#C86014 78%,#F08A3C 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;
}
/* 그라디언트는 h1 전체를 통과하므로 www.·.net만 따로 눌러 준다(본체 petbody와 위계 분리) */
html[data-theme=dawn] .brand-net .brand-sub{color:rgba(30,42,70,.5)}
html[data-theme=dawn] .pet-chip{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,228,198,.55));
  border:1px solid rgba(230,110,40,.28);
  color:#8A4E14;
  box-shadow:0 4px 12px rgba(240,138,60,.16);
}

/* ═══════════════════════════════════════════════════════════════════
   G(먼동) 테마 — ?theme=g (2026-08-11) · dawn의 다크 카운터파트, 시스템 다크 기본값
   무대 = 먼동 트기 전: 위는 깊은 남빛 하늘, 아래로 지평선 잔불(앰버)이 남아 있다.
   dawn과 같은 이야기(살구 강조 + 보색 청록 최신값)를 어두운 무대에서 다시 말한다.
   구조·모션·스코프는 위 dawn 전 페이지 규칙과 동일 — :is(dawn,g) 공유 블록이
   구조를, 여기는 색만 담당한다. dev/net 승격 시 이 블록째 그대로 올라간다.
═══════════════════════════════════════════════════════════════════ */
html[data-theme=g]{
  background:#0B0F22;
  --bg:#181E38;
}
html[data-theme=g] body{background:#0B0F22}
html[data-theme=g] .phone{
  background:linear-gradient(165deg,#0E1430 0%,#1A2244 42%,#3A2C4E 72%,#6E3B2A 100%);
  box-shadow:0 24px 56px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);
}
html[data-theme=g] .phone::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(360px 360px at 5% 3%,rgba(96,150,255,.22),transparent 66%),
    radial-gradient(340px 340px at 95% 95%,rgba(255,140,70,.26),transparent 66%);
}
html[data-theme=g] .phone::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(300px 260px at 78% 12%,rgba(180,140,255,.10),transparent 70%);
}

/* ── 잉크·표면 토큰: dawn과 같은 전 스크린 스코프 ── */
html[data-theme=g] .hdr, html[data-theme=g] .tabs,
html[data-theme=g] .nav, html[data-theme=g] .screen,
html[data-theme=g] .comm-post-screen, html[data-theme=g] .mvp-modal-bg,
html[data-theme=g] .rag-drawer,
html[data-theme=g] #globalProfileHeader, html[data-theme=g] #compactBar{
  --ink:#F0EEF8; --ink2:#A9AFC8; --ink3:#787E9C;
  --line:rgba(255,255,255,.13);
  --primary:#FF9D54; --primary-pale:rgba(255,157,84,.15); --primary-mid:#C77B4A;
  --ok-tx:#5FE3B0;    --ok-bg:rgba(95,227,176,.14);
  --warn-tx:#FFC978;  --warn-bg:rgba(255,201,120,.14);
  --danger-tx:#FF93A6;--danger-bg:rgba(255,147,166,.14);
  --white:rgba(255,255,255,.08);
  --surface:rgba(255,255,255,.08);
  color:var(--ink);
}

/* ── 크롬: 헤더 / 상단탭 / 하단내비 ── */
html[data-theme=g] .hdr{
  background:linear-gradient(180deg,rgba(14,20,44,.90),rgba(14,20,44,.55));
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme=g] .hdr .brand-home h1{
  background:linear-gradient(100deg,#8FB4FF 0%,#C9D4FF 34%,#FFB37A 74%,#FF9D54 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;
}
html[data-theme=g] .brand-net .brand-sub{color:rgba(201,212,255,.6)}
html[data-theme=g] .tabs{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=g] .tabs-track{background:rgba(255,255,255,.07)}
html[data-theme=g] .tabs-pill{
  background:linear-gradient(135deg,rgba(255,170,110,.26),rgba(120,180,255,.20));
  box-shadow:0 1px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme=g] .tabs button{color:rgba(255,255,255,.48)}
html[data-theme=g] .tabs button.on{color:#FFEFE2}
html[data-theme=g] .tab-badge{background:#E5556B;color:#fff}
html[data-theme=g] .nav{
  background:rgba(12,16,36,.84);border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=g] .nav button{color:rgba(255,255,255,.42)}
html[data-theme=g] .nav button.on{color:#FFB37A}
html[data-theme=g] .hdr .icon-btn[style*="#EDE9E4"]{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.16);
  color:#C7CCE2;
  box-shadow:0 4px 12px rgba(0,0,0,.30);
}
html[data-theme=g] .pet-chip{
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,150,80,.13));
  border:1px solid rgba(255,170,110,.30);
  color:#FFC9A0;
  box-shadow:0 4px 12px rgba(0,0,0,.30);
}
html[data-theme=g] [data-auth="pending"] .auth-skeleton,
html[data-theme=g] [data-auth="pending"] .hdr-r::before{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.06) 63%);
  background-size:400% 100%;
}

/* ── 공용 프로필 밴드 + IRIS 배지 + 요약바 ── */
html[data-theme=g] #globalProfileHeader{
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,150,80,.09))!important;
  margin:8px 12px 2px;border-radius:16px;padding:9px 12px!important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-theme=g] #globalProfileImgFallback{background:rgba(255,255,255,.10)!important}
html[data-theme=g] #globalIrisBadge{
  background:linear-gradient(150deg,rgba(255,255,255,.15),rgba(255,150,80,.12))!important;
  border:1px solid rgba(255,170,110,.26);
  box-shadow:0 6px 16px rgba(0,0,0,.30);
}
html[data-theme=g] #globalIrisBadge span[style*="letter-spacing"]{color:#FFB37A!important}
html[data-theme=g] #globalIrisBadge span[style*="border-radius:50%"]{
  background:rgba(255,170,110,.18)!important;color:#FFC9A0!important;
}
html[data-theme=g] #compactBar{
  background:rgba(14,20,44,.78)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.10)!important;
}

/* ── 대시보드 상단 액션 버튼 2개 (인라인 style이라 !important) ── */
html[data-theme=g] #dashBtnLab{
  background:rgba(110,190,255,.14)!important;border-color:rgba(110,190,255,.32)!important;color:#9CD2FF!important;
}
html[data-theme=g] #dashBtnLab svg{stroke:#9CD2FF!important}
html[data-theme=g] #dashBtnStory{
  background:rgba(255,157,84,.14)!important;border-color:rgba(255,157,84,.32)!important;color:#FFB37A!important;
}
/* g도 dawn과 같은 A안 링 테두리 — 그라디언트는 아바타 링과 공유(브랜드 앵커 일관) */
html[data-theme=g] #dashBtnLab, html[data-theme=g] #dashBtnStory{position:relative;border-color:transparent!important}
html[data-theme=g] #dashBtnLab::before, html[data-theme=g] #dashBtnStory::before{
  content:'';position:absolute;inset:0;border-radius:12px;padding:2px;
  background:linear-gradient(140deg,#6EB9FF 0%,#FFD9A8 52%,#F08A3C 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  pointer-events:none;
}
html[data-theme=g] #dashMetricsHead span{color:rgba(255,255,255,.52)!important}
html[data-theme=g] #dashMetricsHead button{color:#FFB37A!important}
html[data-theme=g] .screen .hscroll{scrollbar-color:rgba(255,255,255,.20) transparent}
html[data-theme=g] .screen .hscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20)}

/* ── 인라인 회색·베이지 잔재 → 다크 유리 (dawn의 웜 반투명과 값만 다름) ── */
html[data-theme=g] .screen [style*="background:#F0F1F4"]{background:rgba(255,255,255,.10)!important}
html[data-theme=g] .screen [style*="background:#EDE9E4"]{background:rgba(255,255,255,.10)!important}

/* ── 수치상세: 카드 무대화(다크 유리) + 스티키 열 불투명 예외 + SVG 네이비 정리 ── */
html[data-theme=g] #detailTimeline{
  margin:10px 12px 0!important;border-radius:18px;border-bottom:none!important;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 42px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme=g] #acc-core,
html[data-theme=g] #acc-comp,
html[data-theme=g] #acc-general{
  margin:8px 12px;border-radius:18px;border-bottom:none!important;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.15);
}
/* 스티키 열: 불투명 남빛은 카드 위에서 각진 블록으로 도드라진다 — 반투명+블러 유리로.
   뒤로 지나가는 숫자는 블러에 뭉개져 겹침 문제도 같이 해결 */
/* 표 전체를 '한 색의 판'으로 (08-11 5차 피드백: 좌우 스티키만 색이 달라 이상하다) —
   스크롤 컨테이너와 스티키 열을 같은 '불투명 단색'으로 맞추면 겹침 순서와 무관하게
   항상 같은 색이라 이음매·잔상이 원리적으로 사라진다 */
html[data-theme=g] #body-core > .hscroll{background:#232A4A;border-radius:12px}
html[data-theme=g] #screen-detail [style*="position:sticky"][style*="background:#fff"]{background:#232A4A!important}
html[data-theme=g] #mvpChart svg rect[fill="#fff"]{fill:#2A3052}
html[data-theme=g] #screen-detail svg[stroke="#26315A"]{stroke:#FFB37A}
html[data-theme=g] #mvpChart svg line[stroke="#26315A"]{stroke:rgba(255,179,122,.75)}

/* ── 케어·수치상세 .pb-card + 설정 카드: 다크 유리 ── */
html[data-theme=g] :is(#screen-care,#screen-detail) .pb-card{
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
}
html[data-theme=g] .pb-card{
  border-color:rgba(255,255,255,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-theme=g] .set-card{
  border-color:rgba(255,255,255,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.13);
}
/* 설정 행 구분선: 라이트용 #F0F1F4 가 다크 카드 위에서 쨍한 흰 줄로 떠 시안성을 해쳤다(08-12 제보) */
html[data-theme=g] .set-row{border-bottom-color:rgba(255,255,255,.09)}

/* 로그인 시트의 이메일 버튼: 배경이 #fff 고정인데 글자는 --ink 토큰이라 다크에선 흰 바탕 흰 글씨가
   됐다(08-12 제보) — 흰 배경 고정 요소는 글자·아이콘도 고정 진갈색(d08efb2 입력칸과 같은 원칙).
   펼친 상태(.open)는 배경이 어두운 살구 반투명(--primary-pale)으로 바뀌므로 밝은 잉크로 되돌린다 */
html[data-theme=g] .mvp-social-email{color:#2A2118;border-color:rgba(0,0,0,.08)}
html[data-theme=g] .mvp-social-email .mvp-social-ic{color:#6B635A}
html[data-theme=g] .mvp-social-email.open{color:var(--ink)}
html[data-theme=g] .mvp-social-email.open .mvp-social-ic{color:var(--ink2)}

/* ── 커뮤니티 ── */
html[data-theme=g] .comm-head{
  background:rgba(14,20,44,.80);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
html[data-theme=g] .comm-feed{background:var(--surface);border-top-color:rgba(255,255,255,.08)}
html[data-theme=g] .comm-cats button{background:rgba(255,255,255,.08)}
html[data-theme=g] .comm-post-screen{
  background:linear-gradient(165deg,#0E1430 0%,#1A2244 42%,#3A2C4E 72%,#6E3B2A 100%);
}
html[data-theme=g] .comm-post-hdr,
html[data-theme=g] .comm-post-cmtbar{
  background:rgba(14,20,44,.80);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme=g] .comm-post-cmtbar input{background:rgba(255,255,255,.10);color:var(--ink)}
/* 카드화 지오메트리는 dawn 블록의 공용 규칙(html:is)이 담당 — 여기선 색만 */
html[data-theme=g] :is(.comm-feed,.comm-post-article,.comm-post-comments){
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}
html[data-theme=g] .comm-post-article,
html[data-theme=g] .comm-post-comments{background:rgba(255,255,255,.07)}

/* ── 라이브 라운지 ── */
html[data-theme=g] .live-chat{background:transparent}
html[data-theme=g] .live-presence{background:rgba(255,255,255,.07);border-bottom-color:var(--line)}
html[data-theme=g] .live-msg-bubble{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:var(--ink);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
html[data-theme=g] .live-compose{
  background:rgba(14,20,44,.80);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top-color:var(--line);
}
html[data-theme=g] .live-compose textarea{background:rgba(255,255,255,.10);color:var(--ink)}

/* ── AI 경험담 ── */
html[data-theme=g] .rag-feed{background:transparent}
html[data-theme=g] .rag-input{
  background:rgba(14,20,44,.80);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme=g] .rag-input textarea{background:rgba(255,255,255,.10);color:var(--ink)}
html[data-theme=g] .rag-titlebar{background:rgba(14,20,44,.80)}
html[data-theme=g] .rag-drawer{
  background:rgba(16,22,46,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html[data-theme=g] .rag-bubble.ai table,
html[data-theme=g] .rag-bubble.ai.sys{background:rgba(255,255,255,.10)}

/* ── 바텀시트·모달 ── */
html[data-theme=g] .mvp-sheet{
  background:rgba(20,26,52,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 -18px 40px rgba(0,0,0,.5);
}
html[data-theme=g] .mvp-metric{background:rgba(255,255,255,.08);border-color:var(--line)}
html[data-theme=g] .mvp-modal-bg{background:rgba(4,6,16,.55)}


/* ── 모션: dawn 계열과 같은 '화려한 쪽' — vivid 블록의 g 사본 ── */
@media (prefers-reduced-motion:no-preference){
  html[data-theme=g] .phone::before{animation:pbVividDrift 9s ease-in-out infinite}
  html[data-theme=g] .phone::after{animation:pbVividDrift2 11s ease-in-out infinite}
  html[data-theme=g] .pb-night-line{animation-duration:1.4s}
  html[data-theme=g] .pb-night-area{animation:pbNightFade .8s .6s both}
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo){
    animation:pbVividPop .32s cubic-bezier(.2,1.4,.4,1) both;
    transform-box:fill-box;transform-origin:center;
  }
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo):nth-of-type(1){animation-delay:.30s}
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo):nth-of-type(2){animation-delay:.55s}
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo):nth-of-type(3){animation-delay:.80s}
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo):nth-of-type(4){animation-delay:1.05s}
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo):nth-of-type(5){animation-delay:1.30s}
  html[data-theme=g] #pbDetail svg circle:not(.pb-night-halo):nth-of-type(6){animation-delay:1.55s}
  html[data-theme=g] .pb-night-halo{animation:pbVividHalo 1.6s 1.6s ease-out infinite}
  html[data-theme=g] #pbTileRow > div{animation:pbVividRise .42s cubic-bezier(.2,1.1,.35,1) both}
  html[data-theme=g] #pbTileRow > div:nth-child(1){animation-delay:.02s}
  html[data-theme=g] #pbTileRow > div:nth-child(2){animation-delay:.06s}
  html[data-theme=g] #pbTileRow > div:nth-child(3){animation-delay:.10s}
  html[data-theme=g] #pbTileRow > div:nth-child(4){animation-delay:.14s}
  html[data-theme=g] #pbTileRow > div:nth-child(5){animation-delay:.18s}
  html[data-theme=g] #pbDetail > div{animation:pbVividRise .5s .12s cubic-bezier(.2,1.1,.35,1) both}
  html[data-theme=g] #dashBtnLab, html[data-theme=g] #dashBtnStory{position:relative;overflow:hidden}
  html[data-theme=g] #dashBtnLab::after, html[data-theme=g] #dashBtnStory::after{
    content:'';position:absolute;top:0;bottom:0;width:56px;left:-90px;pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);
    animation:pbVividShine 3.6s ease-in-out infinite;
  }
  html[data-theme=g] #dashBtnStory::after{animation-delay:1.2s}
  /* 대표 수치 숨쉬기 — 어두운 무대라 잔불빛이 오르내린다 */
  html[data-theme=g] #pbDetail span[style*="margin-left:auto"]{animation:pbVividGlowG 3.4s ease-in-out infinite}
}

/* ── 08-11 5차 피드백 일괄 ── */
/* ① 상단 탭: .tabs 유리 띠(뒤판)를 지운다 — 둥근 트랙만 무대 위에 뜬다.
   트랙은 자기 배경+블러를 가져가 스크롤 대비를 스스로 책임진다 */
html:is([data-theme=dawn],[data-theme=g]) .tabs{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:none;
}
html[data-theme=dawn] .tabs-track{
  background:rgba(250,243,232,.80);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-theme=g] .tabs-track{
  background:rgba(28,34,62,.80);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
/* ② g 잉크 스윕: JS 인라인의 구 팔레트 잉크(웜 브라운)는 다크 무대에서 사라진다.
   카테고리 라벨('투약'·'수액')부터 시트 본문까지 한 번에 라이트 토큰으로 */
html[data-theme=g] :is(.screen,.comm-post-screen,.mvp-modal-bg) [style*="color:#2A2118"]{color:var(--ink)!important}
html[data-theme=g] :is(.screen,.comm-post-screen,.mvp-modal-bg) :is([style*="color:#7A6E60"],[style*="color:#6B635A"],[style*="color:#8A7A6A"],[style*="color:#5B5348"],[style*="color:#5A4A3A"]){color:var(--ink2)!important}
html[data-theme=g] :is(.screen,.comm-post-screen,.mvp-modal-bg) :is([style*="color:#B0A090"],[style*="color:#B0A898"],[style*="color:#C8C0B8"],[style*="color:#C9C0B4"]){color:var(--ink3)!important}
html[data-theme=g] .screen [style*="color:#5B6E9C"]{color:#9FB6E8!important}
html[data-theme=g] .screen :is([style*="border-top:1px solid #F0F1F4"],[style*="border-top:1px solid #F7F4F0"]){border-top-color:var(--line)!important}
html[data-theme=g] .screen :is([style*="border-bottom:1px solid #F0F1F4"],[style*="border-bottom:1px solid #F7F4F0"]){border-bottom-color:var(--line)!important}
/* ③ AI 경험담 인용 카드: 흰 카드 문법이 하드코딩이라 다크에서 글자가 죽었다 */
html[data-theme=g] .rag-case-card{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 4px 14px rgba(0,0,0,.30);
}
html[data-theme=g] .rag-case-card-head{
  background:rgba(255,255,255,.07);
  border-bottom-color:rgba(255,255,255,.12);
}
html[data-theme=g] .rag-case-card-body{color:var(--ink)}

/* Dev stats reuse the app's modal/sheet shell; only their compact list is custom. */
.dev-stats-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.dev-stats-sheet{max-height:78%;padding:0 0 calc(12px + env(safe-area-inset-bottom));overflow:hidden;display:flex;flex-direction:column}
.dev-stats-head{flex:0 0 auto;align-items:flex-start;margin:0;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.dev-stats-head>div{min-width:0}
.dev-stats-head h3{letter-spacing:0}
.dev-stats-head span{display:block;margin-top:3px;font-size:calc(11.5px*var(--fs,1));font-weight:600;color:var(--ink3);overflow-wrap:anywhere}
.dev-stats-body{min-height:96px;overflow:auto;padding:7px 0;font-size:calc(13px*var(--fs,1));color:var(--ink)}
.dev-visitor-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.dev-visitor-row:last-child{border-bottom:0}
.dev-visitor-no{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-pale);color:var(--primary);font-size:11px;font-weight:700}
.dev-visitor-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.dev-visitor-main b{font-size:calc(13.5px*var(--fs,1));font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.dev-visitor-main span{font-size:calc(12px*var(--fs,1));font-weight:600;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-visitor-main small{font-size:calc(10.5px*var(--fs,1));font-weight:600;color:var(--ink3);line-height:1.35;overflow-wrap:anywhere}
.dev-visitor-src{color:var(--primary)}
.dev-visitor-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dev-visitor-time{font-size:calc(11.5px*var(--fs,1));font-weight:700;color:var(--primary);white-space:nowrap}
.dev-stats-empty{padding:24px 14px;text-align:center;color:var(--ink2);font-weight:600}
.dev-tester-card{padding:11px 14px;border-bottom:1px solid var(--line)}
.dev-tester-card:last-child{border-bottom:0}
.dev-tester-top{display:flex;align-items:flex-start;gap:10px}
.dev-tester-person{min-width:0;flex:1;display:flex;align-items:center;gap:9px}
.dev-tester-person>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.dev-tester-person b{font-size:calc(13.5px*var(--fs,1));color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-tester-person small{font-size:calc(10.5px*var(--fs,1));font-weight:600;color:var(--ink3);line-height:1.35}
.dev-tester-status{flex-shrink:0;border-radius:999px;padding:4px 8px;background:var(--bg);color:var(--ink2);font-size:calc(10.5px*var(--fs,1));font-weight:700;white-space:nowrap}
.dev-tester-status.is-done{background:var(--primary-pale);color:var(--primary)}
.dev-tester-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
.dev-tester-progress span{border-radius:8px;padding:6px 5px;background:var(--bg);color:var(--ink2);font-size:calc(10.5px*var(--fs,1));font-weight:600;text-align:center;white-space:nowrap}
.dev-tester-progress b{color:var(--ink);font-weight:800}
@media(max-width:360px){
  .dev-visitor-row{grid-template-columns:24px minmax(0,1fr);gap:8px}
  .dev-visitor-time{grid-column:2;white-space:normal}
}

/* ═══ 홈 화면 추가 플로팅 버튼 ═══
   --primary-soft는 이 코드베이스에 없다(테마별 변수는 --primary-pale). 폴백을 걸어
   단계 번호 동그라미·'현재 기기' 배지가 투명해지지 않게 한다. */
/* 크기·모양은 우하단 '오늘 컨디션'(#condFab)과 완전히 같은 틀(34px 필)로 — 같은 줄에
   나란히 서는 페어라 한쪽만 다르면 잘못 만든 것처럼 보인다(08-14 피드백으로 40→34 축소,
   테두리도 두 버튼 모두 제거). box-sizing은 그대로 두고 height로 고정한다. */
#homeInstallFab{
  display:none;position:absolute;left:14px;bottom:calc(var(--nav-h) + 16px);z-index:var(--z-screen-top);
  box-sizing:border-box;height:calc(34px*var(--fs,1));max-width:calc(50% - 22px);align-items:center;gap:6px;padding:0 13px;
  border:none;border-radius:17px;background:rgba(255,255,255,.94);color:#B4560F;
  box-shadow:0 5px 14px rgba(42,33,24,.14);font-family:inherit;font-size:calc(12.5px*var(--fs,1));
  font-weight:600;letter-spacing:0;white-space:nowrap;cursor:pointer;
}
#homeInstallFab.is-visible{display:flex}
#homeInstallFab svg{width:15px;height:15px;flex:none}
body:not(:has(#screen-dash.on)) #homeInstallFab{display:none}
/* 예시 미리보기 중 #sampleCta와의 겹침 회피(+64 승강)는 아래 '플로팅 알약 스택' 블록이
   스택 전체를 한 번에 올린다 — 승강 규칙을 두 곳에 두면 한쪽만 고치는 사고가 난다 */

/* dawn·g(08-14 v2): 링·테두리 전면 제거, 두 버튼 다 '채움' — 흰 유리 조연은 밍밍하다는
   피드백. 새벽 팔레트의 양끝을 나눠 갖는다: 오늘 컨디션=보색 청록(주 액션),
   홈 화면 추가=살구 노을(도구). 같은 크기·같은 흰 글자라 페어로 읽히되 색 온도로 역할이
   갈린다. refresh(라이브)는 주황 primary 계열의 조용한 흰 필 그대로 */
html[data-theme=dawn] #homeInstallFab{
  background:linear-gradient(120deg,#FBA04E,#E06E1C);color:#fff;
  box-shadow:0 6px 16px rgba(224,110,28,.30);
}
html[data-theme=g] #homeInstallFab{
  background:linear-gradient(120deg,#FFA05C,#D8641E);color:#fff;
  box-shadow:0 6px 16px rgba(180,90,25,.40);
}

/* Android/iPhone 선택 및 안내 하단 시트 */
.home-install-modal{display:none;position:absolute;inset:0;z-index:var(--z-modal);background:rgba(42,33,24,.34);align-items:flex-end}
.home-install-modal.on{display:flex}
.home-install-sheet{width:100%;background:var(--surface);border-radius:18px 18px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -18px 40px rgba(42,33,24,.2)}
.home-install-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-install-head h3{margin:0;font-size:calc(18px*var(--fs,1));color:var(--ink);letter-spacing:0}
.home-install-close{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink2);font-size:22px;cursor:pointer}
.home-install-copy{margin:8px 0 14px;color:var(--ink2);font-size:calc(13px*var(--fs,1))}
.home-install-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-install-choices button{position:relative;min-width:0;min-height:92px;padding:14px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:inherit;cursor:pointer}
.home-install-choices b,.home-install-choices span{display:block;letter-spacing:0}
.home-install-choices b{font-size:calc(16px*var(--fs,1))}
.home-install-choices span{margin-top:5px;font-size:calc(12px*var(--fs,1));color:var(--ink2)}
.home-install-choices em{position:absolute;top:7px;right:7px;padding:2px 5px;border-radius:7px;background:var(--primary-soft,var(--primary-pale));color:var(--primary);font-size:10px;font-style:normal}
.home-install-steps{display:grid;gap:10px;margin:14px 0 16px;padding:0;list-style:none;counter-reset:install-step}
.home-install-steps li{position:relative;padding:11px 12px 11px 44px;border-bottom:1px solid var(--line);counter-increment:install-step}
.home-install-steps li::before{content:counter(install-step);position:absolute;left:8px;top:10px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft,var(--primary-pale));color:var(--primary);font-weight:700}
.home-install-steps b,.home-install-steps span{display:block;letter-spacing:0}
.home-install-steps b{font-size:calc(14px*var(--fs,1));color:var(--ink)}
.home-install-steps span{margin-top:3px;font-size:calc(12.5px*var(--fs,1));color:var(--ink2);line-height:1.45}
.home-install-done{width:100%;height:46px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-family:inherit;font-weight:700;font-size:calc(14px*var(--fs,1));cursor:pointer}

/* 프로필 수정 시트: 닫기 ×는 더 작게, 오른쪽 가장자리 붙여서 (2026-08-20 피드백) */
#mvpProfileModal .mvp-x{width:26px;height:26px;margin-right:-5px;font-size:calc(14px*var(--fs,1));line-height:1;display:flex;align-items:center;justify-content:center;padding:0}

/* ═══ 플로팅 알약 스택 + 테스터 미션 위젯 (2026-08-21 개정) ═══
   참여 여부와 무관하게 모든 유저의 플로팅 알약을 왼쪽 컴팩트 스택(104×26)으로 쌓는다 —
   오늘 컨디션(1층)·홈 화면 추가(2층). 테스터 참여자(body.tester-mission-on)는
   '오늘 미션' 필(#testerFab)이 3층에 얹힐 뿐 구조는 같다(유저 확정안: 좌우 분리 페어 폐지).
   슬롯: bottom = nav+14(1층)부터 34px씩 위층, 빈 층이 안 생기게 :has로 당겨 앉힌다. */
/* 알약은 흰색 금지(밝은 무대에서 안 보임) — 평소=주황 그라디언트, 오늘 완료=티켓 딥그린. */
#testerFab{
  display:none;position:absolute;left:14px;bottom:calc(var(--nav-h) + 14px + 68px);z-index:var(--z-screen-top);
  box-sizing:border-box;width:calc(104px*var(--fs,1));height:calc(26px*var(--fs,1));
  align-items:center;justify-content:center;gap:4px;padding:0 8px;
  border:none;border-radius:14px;background:linear-gradient(115deg,#0E5C3F,#137A52);
  box-shadow:0 5px 12px rgba(14,92,63,.34);font-family:inherit;cursor:pointer;
}
body.tester-mission-on:has(#screen-dash.on) #testerFab{display:flex}
#testerFab .tw-ring{position:relative;width:16px;height:16px;flex-shrink:0}
#testerFab .tw-ring svg{position:absolute;inset:0;width:100%;height:100%}
#testerFab .tw-cup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(8px*var(--fs,1))}
/* 한 줄 구성 — 오늘 컨디션과 같은 26px 필·11.5px 글자로 정확히 맞춘다(2줄 라벨이 키를 부풀렸음) */
#testerFab .tw-tx{font-size:calc(11.5px*var(--fs,1));font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1;white-space:nowrap}
/* 공통 스택: 홈 화면 추가(2층)·오늘 컨디션(1층)을 왼쪽 104×26 컴팩트로 —
   condFab은 index.html 인라인이 right·bottom을 들고 있어 !important 없이도
   left+width를 주면 over-constrained로 left가 이기는 성질로 눌러 앉힌다
   (크기 계열만 인라인과 겹쳐 !important 유지) */
#homeInstallFab{
  left:14px;bottom:calc(var(--nav-h) + 14px + 34px);width:calc(104px*var(--fs,1));max-width:none;justify-content:center;
  height:calc(26px*var(--fs,1));border-radius:14px;padding:0 8px;font-size:calc(11.5px*var(--fs,1));gap:4px;
}
#homeInstallFab svg{width:12px;height:12px}
#condFab{
  left:14px;right:auto;bottom:calc(var(--nav-h) + 14px);width:calc(104px*var(--fs,1));justify-content:center;
  height:calc(26px*var(--fs,1))!important;border-radius:14px!important;padding:0 8px!important;font-size:calc(11.5px*var(--fs,1))!important;gap:4px;
}
#condFab svg{width:11px;height:11px}
/* 오늘 컨디션이 숨는 화면(예시 미리보기·비로그인)에선 한 층씩 내려 앉는다 */
body:has(#condFab.off) #homeInstallFab{bottom:calc(var(--nav-h) + 14px)}
body.tester-mission-on:has(#condFab.off) #testerFab{bottom:calc(var(--nav-h) + 14px + 34px)}
/* 홈 화면 추가가 없을 때(이미 설치·데스크톱)도 층을 당긴다 */
body.tester-mission-on:has(#homeInstallFab:not(.is-visible)) #testerFab{bottom:calc(var(--nav-h) + 14px + 34px)}
body.tester-mission-on:has(#condFab.off):has(#homeInstallFab:not(.is-visible)) #testerFab{bottom:calc(var(--nav-h) + 14px)}
/* 예시 하단 CTA(#sampleCta)가 있으면 스택 전체가 CTA 위로 올라간다(+64).
   예시 중엔 condFab이 .off라 위의 '내려 앉기' 규칙과 경합한다 — 특이도에서 밀리지 않게
   .is-visible / :has(#condFab.off)를 붙여 이 블록 맨 뒤에 둔다(구판은 여기서 져서 CTA와 겹치는 잠재 버그) */
body:has(#sampleCta) #homeInstallFab.is-visible{left:14px;bottom:calc(var(--nav-h) + 14px + 64px)}
body.tester-mission-on:has(#sampleCta):has(#condFab.off) #testerFab{bottom:calc(var(--nav-h) + 14px + 64px + 34px)}
body.tester-mission-on:has(#sampleCta):has(#condFab.off):has(#homeInstallFab:not(.is-visible)) #testerFab{bottom:calc(var(--nav-h) + 14px + 64px)}
/* ── 미션 시트: mvp-modal-bg(#testerSheetBg) + mvp-sheet(#testerPanel).
   배경 딤·하단 정렬·뒤로가기 닫힘은 공용 문법이 처리하고, 여기선 슬라이드업과 내용만.
   글자색은 토큰(var(--ink) 계열) — 시트가 .mvp-modal-bg 토큰 스코프 안에 있어 다크(g)도 공짜. */
@media (prefers-reduced-motion:no-preference){
  #testerSheetBg.on #testerPanel{animation:twSheetUp .3s cubic-bezier(.32,.72,.33,1)}
}
@keyframes twSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
#testerPanel{padding-top:8px}
/* 헤더 줄: 가운데 그랩바 + 우상단 닫기(공용 .mvp-x 그대로) */
#testerPanel .tw-hd{position:relative;height:34px;margin-bottom:8px}
#testerPanel .tw-hd .tw-grab{position:absolute;left:50%;top:4px;transform:translateX(-50%);width:38px;height:4.5px;border-radius:3px;background:var(--line)}
#testerPanel .tw-hd .mvp-x{position:absolute;right:0;top:0}
#testerPanel .tw-reward{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(115deg,#0E5C3F,#137A52);color:#fff;
  border-radius:14px;padding:11px 14px;margin-bottom:13px;
  box-shadow:0 5px 14px rgba(14,92,63,.24);font-size:calc(12.5px*var(--fs,1));
}
#testerPanel .tw-reward b{font-weight:800;letter-spacing:-.01em}
#testerPanel .tw-reward small{font-weight:600;color:#CFE9DA;font-size:calc(11.5px*var(--fs,1))}
#testerPanel .tw-reward em{margin-left:auto;font-style:normal;font-size:calc(11px*var(--fs,1));font-weight:800;color:#CFE9DA;background:rgba(255,255,255,.14);border-radius:999px;padding:3px 10px;white-space:nowrap}
#testerPanel .tw-prog{display:flex;align-items:center}
#testerPanel .tw-prog b{font-size:calc(14.5px*var(--fs,1));font-weight:800;color:var(--ink);letter-spacing:-.02em}
#testerPanel .tw-prog i{margin-left:auto;font-style:normal;font-size:calc(12.5px*var(--fs,1));font-weight:800;color:#C96B22}
#testerPanel .tw-bar{height:7px;border-radius:6px;background:rgba(215,170,130,.24);overflow:hidden;margin:7px 0 3px}
#testerPanel .tw-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#F0954B,#E8823C);transition:width .5s cubic-bezier(.4,0,.2,1)}
#testerPanel .tw-sec{font-size:calc(11.5px*var(--fs,1));font-weight:800;color:#C87B2F;letter-spacing:.4px;margin:12px 0 3px}
#testerPanel .tw-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--ink);letter-spacing:-.015em}
#testerPanel .tw-row+.tw-row{border-top:1px solid var(--line)}
#testerPanel .tw-ck{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line);background:var(--surface);color:transparent;display:flex;align-items:center;justify-content:center}
#testerPanel .tw-ck svg{width:12px;height:12px}
#testerPanel .tw-row.done{color:var(--ink3,var(--ink2));font-weight:500}
#testerPanel .tw-row.done .tw-ck{background:#159570;border-color:#159570;color:#fff}
#testerPanel .tw-row.tw-tap{cursor:pointer}
#testerPanel .tw-lb{min-width:0}
#testerPanel .tw-lb small{display:block;font-size:calc(11px*var(--fs,1));font-weight:500;color:var(--ink3,var(--ink2));margin-top:2px;letter-spacing:-.01em}
#testerPanel .tw-go{margin-left:auto;flex-shrink:0;font-size:calc(11.5px*var(--fs,1));font-weight:700;color:#C96B22;background:rgba(240,138,60,.12);border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
/* ── 도장판(시트 상단): 완료한 날은 쿠폰 티켓과 같은 딥그린 도장이 -6° 비뚤게 찍힌다.
   흰 이중 링(inset)이 도장 질감, 모서리 주황 ✓ 뱃지. 마지막 ☕는 완주 전까지 잠김.
   애니는 '시트가 열려 있고 새로 찍힌 날'만 — 재생 목록은 localStorage(app-core 참조). */
#testerPanel .tw-streak{
  background:linear-gradient(180deg,rgba(19,122,82,.10),rgba(19,122,82,.045));
  border:1px solid rgba(19,122,82,.14);
  border-radius:16px;padding:16px 10px 12px;margin-bottom:14px;
}
#testerPanel .tw-days{display:flex;gap:14px;align-items:center;justify-content:center}
#testerPanel .tw-st{
  position:relative;width:52px;height:52px;border-radius:50%;flex-shrink:0;
  border:2px dashed rgba(19,122,82,.32);background:rgba(255,255,255,.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:calc(9px*var(--fs,1));font-weight:800;color:rgba(14,110,104,.75);letter-spacing:.06em;line-height:1.1;
}
#testerPanel .tw-st b{font-size:calc(19px*var(--fs,1));letter-spacing:0}
#testerPanel .tw-st.now{border-style:solid;border-color:#E8823C;color:#C96B22;background:#fff;box-shadow:0 0 0 4px rgba(232,130,60,.14)}
#testerPanel .tw-st.done{
  border:none;color:#fff;transform:rotate(-6deg);
  background:linear-gradient(115deg,#0E5C3F,#137A52);
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.30),0 4px 10px rgba(14,92,63,.34);
}
#testerPanel .tw-st.done.now{box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.30),0 4px 10px rgba(14,92,63,.34),0 0 0 4px rgba(232,130,60,.18)}
#testerPanel .tw-st.done::after{
  content:'✓';position:absolute;right:-3px;top:-5px;width:19px;height:19px;border-radius:50%;
  background:#F0954B;color:#fff;font-size:calc(11px*var(--fs,1));font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(200,110,40,.4);transform:rotate(6deg);
}
#testerPanel .tw-st.cup{
  border:none;font-size:calc(21px*var(--fs,1));color:#fff;
  background:linear-gradient(115deg,#0E5C3F,#137A52);
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.22),0 4px 10px rgba(14,92,63,.28);
}
#testerPanel .tw-st.cup.locked{opacity:.45;filter:saturate(.4)}
#testerPanel .tw-cap{text-align:center;font-size:calc(12.5px*var(--fs,1));font-weight:700;color:#0E6E68;margin-top:11px}
@keyframes twStamp{
  0%{transform:scale(2.3) rotate(-24deg);opacity:0}
  52%{transform:scale(.86) rotate(-3deg);opacity:1}
  72%{transform:scale(1.12) rotate(-8deg)}
  100%{transform:scale(1) rotate(-6deg)}
}
@keyframes twThud{0%,44%{transform:none}52%{transform:translateY(2px) scale(.995)}70%{transform:translateY(-1px)}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){
  #testerPanel .tw-st.stamp{animation:twStamp .6s .12s cubic-bezier(.2,.85,.35,1) both}
  #testerPanel .tw-streak.thud{animation:twThud .72s .12s ease-out}
}
/* 다크(g): 알약(주황/딥그린 필)은 다크에서도 그대로 안전 — 시트 글자는 토큰이 알아서 */
html[data-theme=g] #testerPanel .tw-streak{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
html[data-theme=g] #testerPanel .tw-st{background:rgba(255,255,255,.08);color:#7FDCB0}
html[data-theme=g] #testerPanel .tw-st.now{background:rgba(255,255,255,.10)}
html[data-theme=g] #testerPanel .tw-st.done,html[data-theme=g] #testerPanel .tw-st.cup{color:#fff}
html[data-theme=g] #testerPanel .tw-cap{color:#7FDCB0}

/* 좁은 화면에서도 줄이지 않는다 — condFab은 안 줄어드는데 이쪽만 작아지면 다시 크기가 어긋난다.
   375px에서 둘을 합쳐도 가로가 남는다(150 + 122 + 여백). */