/* ═══════════════════════════════
   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;

}

*{margin:0;padding:0;box-sizing:border-box;
  font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  -webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
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){
  body{padding:0;background:var(--bg)}
  .phone{width:100%;height:100vh;height:100svh;max-height:100svh;border-radius:0;box-shadow:none}
}

/* ═══════════════════════════
   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:22.1px;font-weight:900;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}
.hdr-r{display:flex;align-items:center;gap:8px}
.pet-chip{display:flex;align-items:center;gap:5px;background:var(--primary-pale);
          border-radius:20px;padding:5px 10px 5px 8px;font-size:14.9px;
          font-weight:700;color:var(--primary);cursor:pointer}
.pet-chip .dot{display:none}

/* ── 인증 확인 중(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:14.8px;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:800}

/* ═══════════════════════════
   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}}

/* ═══════════════════════════
   DIVIDER
═══════════════════════════ */
.divider{height:8px;background:var(--bg)}.iris-box .lbl{font-size:9.8px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.5px}
.iris-box .num{font-size:29.6px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
.iris-box .sub{font-size:9.8px;color:rgba(255,255,255,.6)}.m-name{display:flex;align-items:center;gap:6px}
.m-name b{font-size:14.9px;font-weight:800;color:var(--ink);letter-spacing:.2px}.m-badge{font-size:11.1px;font-weight:800;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:700}.m-trend .delta{font-size:11.8px;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:9.8px;font-weight:800;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:13.5px;color:var(--ink2);font-weight:600}
.trail .col.cur{font-size:16px;font-weight:900;color:var(--ink)}
.sub-head .trail .col{font-size:11.8px;color:var(--ink3);font-weight:700}
.sub-head .trail .col.cur{color:var(--primary);font-size:11.8px}.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:15.4px;font-weight:700;color:var(--ink)}
.todo .tt .s{font-size:12.9px;color:var(--ink2);margin-top:1px}
.done-tx{color:var(--ink3)!important;text-decoration:line-through}.reg-txt .s{font-size:12.9px;color:var(--ink2);margin-top:2px}.care-empty{padding:18px 16px;text-align:center;color:var(--ink2);font-size:13px;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:16px;font-weight:700;color:#fff;cursor:pointer;transform:translateX(80px);transition:transform .25s}
.care-kebab{border:none;background:transparent;color:#B0A898;font-size:20.9px;font-weight:800;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:16px;font-weight:700;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}
.tc-custom input[type=time]{border:none;background:transparent;font-family:inherit;font-size:16px;font-weight:700;color:var(--primary);outline:none;width:92px}
.tc-x{color:var(--ink3);font-weight:800;cursor:pointer;padding:0 3px;font-size:15.4px}
.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:13.8px;font-weight:700;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:15.4px;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:14.9px;font-weight:700;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:12.9px;color:var(--ink2);margin-top:1px}
.ti-body .dt{font-size:11.8px;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;gap:3px;font-size:11.8px;font-weight:700;
            color:var(--ink3);cursor:pointer;transition:.15s}
.nav button svg{width:20px;height:20px}
.nav button.on{color:var(--primary)}

/* ═══════════════════════════
   케어 등록
═══════════════════════════ */
.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:16px;
               color:var(--ink2);font-weight:700;cursor:pointer;background:none;border:none}
.reg-hdr .back svg{width:16px;height:16px}
.reg-hdr h2{font-size:18.5px;font-weight:900;color:var(--ink)}
.reg-hdr .save{font-size:16px;color:var(--primary);font-weight:800;
               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:14.2px;font-weight:700;
            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:14.2px;font-weight:800;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:16px;font-weight:700;
            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:16px;
                 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}
.brand-h{font-size:12.3px;font-weight:800;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:15.4px;font-weight:700;color:var(--ink);flex:1}
.opt .nm small{display:block;font-size:11.8px;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:11.1px;font-weight:800;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:14.2px;font-weight:700;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:14.9px;font-weight:700;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:14.9px;font-weight:700;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:14.9px;font-weight:700;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:14.2px;color:var(--ink2);line-height:1.55}
.preview .ptx b{font-weight:800;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:21px;font-weight:900;color:var(--ink);letter-spacing:-.3px;margin-bottom:2px}
.modal .subt{font-size:14.2px;color:var(--ink2);margin-bottom:14px}
.modal-sec{margin-bottom:13px}
.modal-sec b{display:block;font-size:13.5px;font-weight:800;color:var(--primary);
             margin-bottom:5px;letter-spacing:.2px}
.modal-sec p{font-size:15.4px;line-height:1.65;color:var(--ink)}
.range-tbl{display:grid;grid-template-columns:1fr auto;gap:5px 14px;
           font-size:14.9px;background:var(--bg);border-radius:10px;padding:10px 13px}
.range-tbl .lab{font-weight:700}
.range-tbl .val{font-weight:800;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:14.2px;
         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:800;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:15.4px;font-weight:700;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가 담당) */
.scroll.rag-mode{ padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); 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:15.5px; font-weight:800; 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:15.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rag-thread.cur .rag-thread-title{ font-weight:800; }
.rag-threads-empty{ padding:26px 16px; font-size:14.3px; color:var(--ink3); text-align:center; }
.rag-drawer-foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); font-size:13px; color:var(--ink2); flex-shrink:0; }
.rag-title{ font-size:18.2px; font-weight:800; color:var(--ink); }
.rag-species{ border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); font-size:13.5px; font-weight:800; padding:4px 8px; outline:none; }
.rag-status{ font-size:12.3px; padding:3px 8px; border-radius:999px; font-weight:700; }
.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; }
.rag-bubble{ max-width:88%; border-radius:16px; padding:11px 14px; font-size:16px; line-height:1.6; }
.rag-bubble.ai{ background:var(--white); border:1px solid var(--line); color:var(--ink); }
.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:17.1px; margin:8px 0; }
.rag-bubble th{ background:var(--primary-pale); color:var(--primary); font-weight:700; 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:700; color:var(--primary); }
.rag-disc{ font-size:13.5px; 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:16px; color:var(--ink2); }
.rag-case-chip{ display:inline-block; background:var(--primary-pale); color:var(--primary); font-size:12.6px; font-weight:700; 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:12.8px; font-weight:800; color:var(--primary); letter-spacing:-.2px; }
.rag-case-card-body{ padding:10px 12px; font-size:15.2px; 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:12.9px; 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:700; 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:700; color:var(--ink2); }
.rag-dbg-score{ font-family:ui-monospace,Consolas,monospace; font-size:12.1px; 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:700; 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:12.3px; 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:12.9px; 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:16px; 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:22.1px; cursor:pointer; flex-shrink:0; }
.rag-input button:disabled{ background:var(--ink3); cursor:default; }
.nav{ transition:transform .18s ease, opacity .18s ease, visibility .18s ease; }
/* AI 상담 전체화면: 로고 헤더만 남기고 프로필·상단탭·하단내비 숨김 */
body.ai-fullscreen #globalProfileHeader,
body.ai-fullscreen #toptabs,
body.ai-fullscreen .nav{ display:none !important; }
body.ai-fullscreen .scroll.rag-mode{ padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
body.rag-composing .nav{
  transform:translateY(calc(100% + 14px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.rag-composing .scroll.rag-mode{ padding-bottom:calc(8px + max(env(safe-area-inset-bottom,0px), var(--kb,0px))); }
body.rag-composing .rag-input{
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 22px rgba(42,33,24,.08);
}

/* ══ 설정 ══ */
.set-wrap{padding:14px 14px 8px}
.set-title{font-size:19.3px;font-weight:800;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:13.2px;font-weight:800;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}
.set-row:last-child{border-bottom:none}
.set-row-t{font-size:15.4px;font-weight:700;color:var(--ink)}
.set-row-sub{font-size:13.2px;color:var(--ink3);margin-top:1px}
.set-chev{color:var(--ink3);font-size:16.5px;flex-shrink:0}
.set-val{font-size:13.8px;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:18.5px;font-weight:800;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:14.2px;font-weight:700;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:800}
.comm-write{flex-shrink:0;display:flex;align-items:center;gap:5px;border:none;background:var(--primary-pale);color:var(--primary);font-size:14.2px;font-weight:800;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:16px;font-weight:700;color:var(--ink);line-height:1.45;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.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:800;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-row-meta{margin-top:5px;font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.comm-row-meta b{color:var(--ink2);font-weight:700}
.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:16.6px;font-weight:800;color:var(--ink2)}
.comm-cmtbox span{font-size:11.1px;color:var(--ink3);font-weight:700}
.comm-cmtbox.has{background:none}
.comm-cmtbox.has b{color:var(--primary)}
.comm-empty{text-align:center;color:var(--ink3);font-size:14.9px;padding:44px 0 24px;line-height:1.8}
.comm-empty b{display:block;font-size:16px;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:14.9px;font-weight:800;color:#fff;flex-shrink:0}
.comm-who{flex:1;min-width:0}
.comm-name{font-size:14.2px;font-weight:800;color:var(--ink)}
.comm-time{font-size:12.3px;color:var(--ink3);margin-top:1px}
.comm-badge{font-size:12.3px;font-weight:800;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-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:11.9px;font-weight:700;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:14.2px;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:13.5px;font-weight:700;font-family:inherit;cursor:pointer}
.comm-like b{font-weight:800;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:18.5px;font-weight:800;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;border:1px solid var(--line);border-radius:999px;padding:11px 14px;font-size:16px;outline:none;color:var(--ink)}
.comm-post-cmtbar button{border:none;background:var(--primary);color:#fff;border-radius:999px;padding:0 18px;font-weight:800;font-size:14.9px;cursor:pointer;flex-shrink:0}
.comm-post-cmtbar button:disabled{background:var(--ink3)}
.comm-detail-title{font-size:18.9px;font-weight:800;color:var(--ink);line-height:1.45;letter-spacing:-.2px;margin:2px 0 10px}
.comm-detail-body{font-size:16px;line-height:1.75;color:var(--ink);white-space:pre-wrap}
.comm-cmt-hd{font-size:14.2px;font-weight:800;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:13px}
.comm-cmt-main{flex:1;min-width:0}
.comm-cmt-top{display:flex;align-items:baseline;gap:6px}
.comm-cmt-top b{font-size:13.6px;color:var(--ink)}
.comm-cmt-top span{font-size:11.9px;color:var(--ink3)}
.comm-cmt-body{font-size:15.2px;color:var(--ink);line-height:1.6;margin-top:2px;white-space:pre-wrap}

/* 글쓰기 · AI 초안 시트 */
.comm-ai-note{display:flex;gap:8px;align-items:flex-start;background:var(--primary-pale);border-radius:10px;padding:10px 12px;font-size:14px;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:var(--ink2);font-size:14.2px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer}
.comm-cat-pick button.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:800}
.comm-compose textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;line-height:1.65;color:var(--ink);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:42.7px;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:15.4px;color:var(--ink2);font-weight:700;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:15.4px;font-weight:800;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:13.8px;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:14.9px;font-weight:700;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:18px;font-weight:900;color:var(--ink);letter-spacing:-.3px}
.live-status{display:flex;align-items:center;gap:5px;font-size:12.4px;font-weight:700;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:13.4px;font-weight:800;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:12.6px;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:14px;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:11.8px;color:var(--ink3)}
.live-msg-author{font-weight:800;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:15px;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:17px;margin-bottom:5px}
.live-login button{margin-top:14px;border:none;border-radius:999px;background:var(--primary);color:#fff;padding:10px 19px;font-size:14.8px;font-weight:800;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:16px;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:18px;font-weight:900;cursor:pointer}
.live-send:disabled{background:var(--ink3);cursor:default}

/* PetBody MVP: profile + lab OCR */
.mvp-legacy-hide{display:none!important}.mvp-actions button,.mvp-save,.mvp-upload-btn{border:none;border-radius:10px;padding:11px 12px;font-size:15.4px;font-weight:800;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:13.5px;font-weight:900;color:var(--ink)}
.mvp-pill{font-size:11.1px;font-weight:800;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:27.2px;font-weight:900;color:var(--ink);line-height:1}
.mvp-unit{font-size:12.3px;font-weight:600;color:var(--ink3);margin-left:3px}
.mvp-date{font-size:12.3px;color:var(--ink3);margin-top:6px}.mvp-empty{font-size:13.5px;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:17.8px;font-weight:800;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:13.5px;font-weight:800;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:var(--ink);font-size:16px;padding:11px 12px;outline:none}
.mvp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mvp-rec-list{display:flex;flex-direction:column;gap:6px}
.mvp-rec-hd{font-size:13.5px;font-weight:800;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:14.2px;color:var(--ink)}
.mvp-rec-meta span{font-size:12.3px;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:13.5px;font-weight:700;padding:5px 6px;cursor:pointer;font-family:inherit}
.mvp-rec-edit{flex-shrink:0;border:none;background:none;color:var(--primary);font-size:13.5px;font-weight:700;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:14.9px;font-weight:900;color:var(--ink);margin-bottom:1px}
.mvp-review-sub{font-size:12.9px;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:12.3px;font-weight:800;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:16px;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:13.5px;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:14.9px;color:var(--ink)}
.mvp-auto-result.on{display:block}
.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:15.4px;font-weight:800;cursor:pointer;background:transparent;color:var(--ink2);transition:background .15s,color .15s}
.mvp-auth-tab.on{background:var(--primary);color:#fff}
.mvp-form-msg{font-size:14.2px;line-height:1.5;color:var(--ink2);min-height:17px}
.mvp-form-msg.err{color:#C2453B;font-weight:700}
.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:23.4px;font-weight:900;flex-shrink:0}
.mvp-account-name{font-size:17.3px;font-weight:900;color:var(--ink)}
.mvp-account-email{font-size:14.2px;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}
.mvp-reg-pet{gap:10px}
.mvp-reg-divider{font-size:13.5px;font-weight:800;color:var(--primary);border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.mvp-reg-divider span{font-weight:600;color:var(--ink2)}
#toptabs button,.nav button,.pet-chip,.brand-home span{white-space:nowrap}

/* ═══════════════════════════
   온보딩 튜토리얼 (코치마크)
═══════════════════════════ */
#tutOverlay{position:absolute;inset:0;z-index:var(--z-coach);visibility:hidden}
#tutOverlay.on{visibility:visible}
#tutSpot{position:absolute;border-radius:14px;
  box-shadow:0 0 0 4000px rgba(26,20,14,.62);
  transition:top .32s cubic-bezier(.4,0,.2,1),left .32s cubic-bezier(.4,0,.2,1),
             width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1),
             border-radius .32s;
  pointer-events:none}
#tutSpot::after{content:'';position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid rgba(255,255,255,.85);animation:tutPulse 1.8s ease-in-out infinite}
@keyframes tutPulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.4;transform:scale(1.015)}}
#tutCard{position:absolute;left:16px;right:16px;background:#fff;border-radius:16px;
  padding:16px 16px 14px;box-shadow:0 8px 32px rgba(26,20,14,.35);
  transition:top .32s cubic-bezier(.4,0,.2,1)}
#tutCard .tut-arrow{position:absolute;width:14px;height:14px;background:#fff;
  transform:rotate(45deg);left:50%;margin-left:-7px}
#tutCard .tut-arrow.up{top:-6px}
#tutCard .tut-arrow.down{bottom:-6px}
#tutStepTag{display:inline-flex;align-items:center;gap:5px;background:var(--primary-pale);
  color:var(--primary);font-size:11.5px;font-weight:800;border-radius:10px;
  padding:3px 9px;margin-bottom:8px;letter-spacing:.3px}
#tutTitle{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:5px;letter-spacing:-.2px;word-break:keep-all}
#tutDesc{font-size:13.6px;color:var(--ink2);line-height:1.55;word-break:keep-all}
#tutDesc ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
#tutDesc li{position:relative;padding-left:13px}
#tutDesc li::before{content:'';position:absolute;left:1px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--primary-mid)}
#tutDesc b{color:var(--ink);font-weight:700}
.tut-foot{display:flex;align-items:center;margin-top:13px;gap:8px}
#tutDots{display:flex;gap:4px;flex:1;flex-wrap:wrap}
#tutDots i{width:6px;height:6px;border-radius:50%;background:#E3DCD4;transition:.2s}
#tutDots i.on{background:var(--primary);width:16px;border-radius:3px}
.tut-btn{border:none;cursor:pointer;font-weight:700;border-radius:10px;font-size:13.6px;font-family:inherit}
#tutSkip{background:none;color:var(--ink3);padding:9px 8px}
#tutPrev{background:#F1EDE8;color:var(--ink2);padding:9px 14px}
#tutNext{background:var(--primary);color:#fff;padding:9px 18px;box-shadow:0 2px 8px rgba(38,49,90,.3)}
#tutPrev[disabled]{opacity:0;pointer-events:none}
#tutIntro{position:absolute;inset:0;z-index:var(--z-onboard);background:rgba(26,20,14,.62);
  display:none;align-items:center;justify-content:center;padding:24px;transition:opacity .3s}
#tutIntro.on{display:flex}
#tutIntro .tut-box{background:#fff;border-radius:24px;width:330px;max-width:100%;
  padding:0 0 24px;text-align:center;box-shadow:0 16px 48px rgba(26,20,14,.45)}
#tutIntro .tut-band{height:118px;border-radius:24px 24px 0 0;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#F3EDFB 0%,#E9EBF6 45%,#DCE4F5 100%)}
#tutIntro .tut-bub{position:absolute;border-radius:50%;background:rgba(38,49,90,.07)}
#tutIntro .tut-demoji{position:absolute;font-size:20px;opacity:.85}
#tutIntro .tut-paw{width:92px;height:92px;border-radius:30px;background:#fff;margin:-46px auto 0;
  display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;z-index:var(--z-raise);
  box-shadow:0 8px 24px rgba(38,49,90,.22),0 0 0 8px rgba(255,255,255,.6)}
#tutIntro h2{font-size:22px;font-weight:900;color:var(--ink);margin:14px 0 0;letter-spacing:-.4px}
#tutIntro .tut-sub{font-size:14px;color:var(--ink2);margin-top:7px;line-height:1.55}
#tutIntro .tut-feat{display:flex;flex-direction:column;gap:11px;margin:18px 26px 0;text-align:left}
#tutIntro .tut-feat>div{display:flex;align-items:center;gap:12px}
#tutIntro .tut-fic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:18px;flex-shrink:0}
#tutIntro .tut-ft b{display:block;font-size:14.5px;color:var(--ink);letter-spacing:-.2px}
#tutIntro .tut-ft span{font-size:12.3px;color:var(--ink2)}
#tutIntro .tut-go{width:calc(100% - 48px);margin:20px auto 0;display:block;border:none;border-radius:14px;
  padding:16px 0;font-size:16.5px;font-weight:800;color:#fff;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#26315A,#4A5E96);box-shadow:0 6px 16px rgba(38,49,90,.35)}
#tutIntro .tut-later{display:block;background:none;border:none;color:var(--ink3);font-size:13.5px;
  font-weight:600;margin:12px auto 0;cursor:pointer;padding:4px;font-family:inherit}
#tutDone{position:absolute;left:50%;bottom:calc(var(--nav-h) + 20px);
  transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;border-radius:12px;padding:11px 18px;
  opacity:0;transition:.35s;z-index:var(--z-onboard-done);pointer-events:none;
  width:max-content;max-width:calc(100% - 40px);box-sizing:border-box;text-align:center;line-height:1.55;word-break:keep-all}
#tutDone.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ═══ 질환 첫 안내(신부전·검사 숫자·IRIS) — 가입 후 튜토리얼 웰컴 카드 앞에 1회 ═══ */
/* 첫 실행 풀스크린 슬라이드 온보딩 — 스와이프(스크롤 스냅) + 점 + SKIP */
#ckdIntro{position:absolute;inset:0;z-index:var(--z-onboard-alt);background:#fff;display:none;flex-direction:column;padding:14px 0 22px}
#ckdIntro.on{display:flex}
#ckdIntro .ckd-skip{position:absolute;top:14px;right:16px;z-index:var(--z-raise);background:none;border:none;color:#C9C0B4;font-size:13.5px;font-weight:800;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}
#ckdIntro .ckd-track::-webkit-scrollbar{display:none}
#ckdIntro .ckd-page{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px;box-sizing:border-box;text-align:center}
#ckdIntro .ckd-emoji{font-size:38px;line-height:1;margin-bottom:4px}
#ckdIntro h2{font-size:20px;font-weight:900;color:var(--ink);margin:14px 0 10px;letter-spacing:-.3px;line-height:1.4}
#ckdIntro .ckd-body{font-size:13.8px;color:#5A4A3A;line-height:1.7}
#ckdIntro .ckd-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 12px}
#ckdIntro .ckd-dots span{width:6px;height:6px;border-radius:3px;background:#E5DDD2;transition:width .2s}
#ckdIntro .ckd-dots span.on{width:16px;background:#26315A}
#ckdIntro .ckd-next{margin:0 24px;border:none;border-radius:14px;padding:14px 0;font-size:15.5px;font-weight:800;color:#fff;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,#26315A,#4A5E96);box-shadow:0 6px 16px rgba(38,49,90,.35)}