/* ==========================================================================
   반려견 피부 이상 조기 판별 및 한방 케어 솔루션 — 공통 스타일 v2
   "폴리시한 케어앱" — 세이지 브랜드 유지, 케어앱 손맛(부드러운 면·촉각적 버튼·절제된 모션)
   팔레트: #8B9A6E(sage, 확정) + 증상 기능색 유지
   ========================================================================== */

@font-face{
  font-family:'Pretendard Variable';
  src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 브랜드 */
  --sage:        #8B9A6E;
  --cream:       #FFFFFF;
  --surface:     #F7F7F4;   /* 살짝 눌린 면 — 따뜻한 회백 */
  --surface-2:   #F1F2EC;   /* 페이지 배경 위의 큰 면 */
  --beige:       #EAE2D6;
  --gray:        #EFEFEC;

  /* sage 명도 램프 */
  --sage-900:    #38402C;
  --sage-800:    #4A543A;
  --sage-700:    #5F6B48;
  --sage-600:    #74815A;
  --sage-400:    #A3B089;
  --sage-300:    #B8C3A2;
  --sage-200:    #CBD4B9;
  --sage-100:    #E1E7D4;
  --sage-050:    #EFF2E7;
  --sage-025:    #F7F9F2;

  /* 텍스트 */
  --ink:         #2E3227;
  --ink-2:       #5A5F4E;
  --muted:       #6F6E5D;
  --line:        #E9E8E2;
  --line-2:      #F0EFEA;

  /* 상태 */
  --ok:          #4E7A4B;
  --ok-bg:       #EAF2E6;
  --warn:        #8F6A2E;
  --warn-bg:     #F7EFDF;
  --vet:         #A05340;
  --vet-bg:      #F8EAE4;

  /* 형태 */
  --radius:      16px;
  --radius-sm:   12px;
  --radius-lg:   24px;
  --shadow-xs:   0 1px 2px rgba(56,64,44,.05);
  --shadow:      0 1px 2px rgba(56,64,44,.05), 0 8px 22px -10px rgba(56,64,44,.14);
  --shadow-md:   0 2px 4px rgba(56,64,44,.05), 0 12px 28px -12px rgba(56,64,44,.18);
  --shadow-lg:   0 4px 8px rgba(56,64,44,.06), 0 28px 56px -20px rgba(56,64,44,.26);
  --header-h:    60px;
  --tabbar-h:    64px;

  /* 모션 */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-inout:  cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
  font-size:14px;
  line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  caret-color:var(--sage-700);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* 브라우저 표면도 브랜드로 */
::selection{ background:var(--sage-200); color:var(--sage-900); }
:focus-visible{ outline:2px solid var(--sage-600); outline-offset:2px; border-radius:4px; }
@supports (scrollbar-width:thin){
  *{ scrollbar-width:thin; scrollbar-color:var(--sage-200) transparent; }
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--sage-200); border-radius:99px; border:3px solid #fff; }
::-webkit-scrollbar-track{ background:transparent; }

/* 페이지 진입 모션 — 한 번의 오케스트레이션 */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.page > *{ animation:rise .5s var(--ease-out) backwards; }
.page > *:nth-child(1){ animation-delay:.02s; }
.page > *:nth-child(2){ animation-delay:.07s; }
.page > *:nth-child(3){ animation-delay:.12s; }
.page > *:nth-child(4){ animation-delay:.17s; }
.page > *:nth-child(n+5){ animation-delay:.22s; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- 레이아웃 ---------- */
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding-inline:20px; }
.page{ padding-block:26px 72px; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-title{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.035em; }
.page-sub{ margin:6px 0 0; color:var(--muted); font-size:13.5px; }

/* ---------- 아이콘 (인라인 SVG 공통) ---------- */
.ic{ width:1.2em; height:1.2em; flex-shrink:0; display:inline-block; vertical-align:-.22em; }
.ic *{ vector-effect:non-scaling-stroke; }

/* ---------- 헤더 / GNB ---------- */
.gnb{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.gnb-inner{ height:var(--header-h); display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; font-size:15.5px; flex-shrink:0; }
.brand-mark{
  width:32px; height:32px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(145deg,var(--sage-400),var(--sage) 60%,var(--sage-600));
  display:grid; place-items:center; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px -2px rgba(56,64,44,.35);
}
.brand-mark .ic{ width:17px; height:17px; vertical-align:0; }
.gnb-menu{ display:flex; align-items:center; gap:2px; margin-left:14px; flex:1; min-width:0; }
.gnb-menu a{
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); white-space:nowrap;
  transition:background .18s var(--ease-out),color .18s var(--ease-out),transform .16s var(--ease-out);
}
.gnb-menu a:hover{ background:var(--sage-025); color:var(--sage-800); }
.gnb-menu a:active{ transform:scale(.96); }
.gnb-menu a[aria-current="page"]{ background:var(--sage-600); color:#fff; box-shadow:0 2px 6px -2px rgba(56,64,44,.3); }
.gnb-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }
.gnb-user{ font-size:13px; color:var(--ink-2); font-weight:600; }
.gnb-user b{ color:var(--sage-700); }
.gnb-sep{ color:var(--line); }
.linkbtn{ background:none; border:0; padding:4px 2px; font-size:13px; color:var(--muted); cursor:pointer; font-weight:500; transition:color .15s; }
.linkbtn:hover{ color:var(--sage-700); text-decoration:underline; text-underline-offset:3px; }
.gnb-toggle{ display:none; }

/* 모바일 하단 탭바 — 케어앱의 홈 그라운드 */
.tabbar{ display:none; }
@media (max-width:900px){
  .gnb-menu{ display:none; }
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:grid; grid-template-columns:repeat(5,1fr);
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(1.5) blur(16px);
    -webkit-backdrop-filter:saturate(1.5) blur(16px);
    border-top:1px solid var(--line-2);
  }
  .tabbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:10.5px; font-weight:600; color:var(--muted); border-radius:14px;
    transition:color .18s var(--ease-out), transform .16s var(--ease-out);
  }
  .tabbar a:active{ transform:scale(.92); }
  .tabbar a .ic{ width:23px; height:23px; vertical-align:0; }
  .tabbar a[aria-current="page"]{ color:var(--sage-800); }
  .tabbar a[aria-current="page"] .ic{ color:var(--sage-700); }
  .tabbar .tab-cta{
    position:relative; color:#fff;
  }
  .tabbar .tab-cta i{
    position:absolute; top:-16px; width:52px; height:52px; border-radius:50%;
    background:linear-gradient(150deg,var(--sage),var(--sage-600) 55%,var(--sage-700));
    display:grid; place-items:center; color:#fff;
    box-shadow:0 4px 10px -2px rgba(56,64,44,.4), inset 0 1px 0 rgba(255,255,255,.3);
    transition:transform .18s var(--ease-out);
  }
  .tabbar .tab-cta:active i{ transform:scale(.92); }
  .tabbar .tab-cta i .ic{ width:25px; height:25px; }
  .tabbar .tab-cta span{ margin-top:32px; color:var(--sage-800); }
  body.has-tabbar .page{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 36px); }
  body.has-tabbar .toast-wrap{ bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 14px); }
}

/* ---------- 카드 ---------- */
.card{ min-width:0;
  background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card-pad{ padding:20px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px 0;
}
.card-title{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.025em; display:flex; align-items:center; gap:8px; }
.card-title .dot{ display:none; }
.card-title .ic{ width:19px; height:19px; color:var(--sage-600); }
.card-body{ padding:16px 22px 22px; }
.card-head + .table-scroll{ margin-top:14px; }
.card > .table-scroll:last-child{ padding-bottom:8px; }

.section{ margin-bottom:20px; }
.grid{ display:grid; gap:18px; }
.grid > *{ min-width:0; }
.grid-main{ grid-template-columns:1.15fr .85fr; align-items:start; }
.grid-2{ grid-template-columns:1fr 1fr; align-items:start; }
.grid-side{ grid-template-columns:1fr 340px; }

/* ---------- 통계 타일 ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat{
  background:#fff; border-radius:var(--radius-lg);
  padding:18px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.stat-ic{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  background:var(--sage-050); color:var(--sage-700); margin-bottom:12px;
}
.stat-ic .ic{ width:18px; height:18px; vertical-align:0; }
.stat.is-primary .stat-ic{ background:linear-gradient(145deg,var(--sage-400),var(--sage-600)); color:#fff; }
.stat-label{ font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:4px; }
.stat-value{ font-size:26px; font-weight:800; letter-spacing:-.04em; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-value small{ font-size:13px; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0; }
.stat-note{ font-size:12px; color:var(--muted); margin-top:4px; }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:41px; padding:0 18px; border-radius:13px; border:1px solid transparent;
  font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease-out),border-color .18s var(--ease-out),
             color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .16s var(--ease-out);
}
.btn:not(:disabled):active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(160deg,var(--sage) -25%,var(--sage-600) 50%,var(--sage-700) 125%);
  color:#fff;
  box-shadow:0 2px 8px -2px rgba(56,64,44,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:not(:disabled):hover{ box-shadow:0 4px 14px -3px rgba(56,64,44,.4), inset 0 1px 0 rgba(255,255,255,.2); filter:brightness(1.05); }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--ink-2); box-shadow:var(--shadow-xs); }
.btn-ghost:not(:disabled):hover{ background:var(--surface); border-color:var(--sage-200); color:var(--ink); }
.btn-soft{ background:var(--sage-050); color:var(--sage-800); }
.btn-soft:not(:disabled):hover{ background:var(--sage-100); }
.btn-danger{ background:#fff; border-color:#EAD5CC; color:var(--vet); box-shadow:var(--shadow-xs); }
.btn-danger:not(:disabled):hover{ background:var(--vet-bg); }
.btn-lg{ height:50px; padding:0 26px; font-size:15px; border-radius:15px; }
.btn-sm{ height:32px; padding:0 12px; font-size:12.5px; border-radius:10px; }
.btn-block{ width:100%; }
.btn .ic{ width:1.1em; height:1.1em; }

/* ---------- 폼 ---------- */
.field{ margin-bottom:15px; }
.field:last-child{ margin-bottom:0; }
.label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.label .req{ color:var(--vet); margin-left:2px; }
.input,.select,.textarea{
  width:100%; height:44px; padding:0 14px; background:var(--surface);
  border:1.5px solid transparent; border-radius:13px; font:inherit; color:var(--ink);
  transition:border-color .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.textarea{ height:auto; padding:11px 14px; resize:vertical; min-height:88px; line-height:1.6; }
.input::placeholder,.textarea::placeholder{ color:#77755F; }
.input:focus,.select:focus,.textarea:focus{
  outline:none; background:#fff; border-color:var(--sage); box-shadow:0 0 0 4px rgba(139,154,110,.14);
}
.input:disabled,.select:disabled{ color:var(--muted); background:var(--gray); }
.select{
  appearance:none; cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A8977' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.help{ font-size:12px; color:var(--muted); margin-top:5px; }
.err{ font-size:12px; color:var(--vet); margin-top:5px; font-weight:600; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.radio-row{ display:flex; gap:8px; }
.radio-chip{ flex:1; position:relative; }
.radio-chip input{ position:absolute; opacity:0; pointer-events:none; }
.radio-chip span{
  display:grid; place-items:center; height:44px; border:1.5px solid transparent; border-radius:13px;
  background:var(--surface); font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.radio-chip input:checked + span{ background:var(--sage-050); border-color:var(--sage); color:var(--sage-800); font-weight:700; }
.radio-chip input:focus-visible + span{ box-shadow:0 0 0 4px rgba(139,154,110,.14); }

/* ---------- 배지 ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px;
  border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:-.01em;
  background:var(--gray); color:var(--ink-2); white-space:nowrap;
}
.badge-ok{   background:var(--ok-bg);   color:var(--ok); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-vet{  background:var(--vet-bg);  color:var(--vet); }
.badge-sage{ background:var(--sage-050);color:var(--sage-800); }
.badge-code{ font-variant-numeric:tabular-nums; }

/* ---------- 테이블 ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.table th{
  text-align:left; font-size:12px; font-weight:700; color:var(--muted);
  padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.table td{ padding:14px; border-bottom:1px solid var(--line-2); vertical-align:middle; font-variant-numeric:tabular-nums; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background .15s var(--ease-out); }
.table tbody tr:hover{ background:var(--sage-025); }
.table .num{ text-align:right; }
.table .center{ text-align:center; }
.hide-m{ }
.thumb{ width:46px; height:46px; border-radius:12px; object-fit:cover; border:1px solid var(--line-2); background:var(--gray); }

/* ---------- 빈 상태 ---------- */
.empty{ padding:48px 20px; text-align:center; color:var(--muted); }
.empty-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:20px;
  background:var(--sage-050); color:var(--sage-600); display:grid; place-items:center;
}
.empty-icon .ic{ width:26px; height:26px; vertical-align:0; }
.empty-title{ font-size:14.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px; }
.empty-desc{ font-size:13px; margin-bottom:16px; }

/* ---------- 반려견 카드 ---------- */
.dog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:14px; }
.dog-card{
  background:#fff; border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:13px;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.dog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dog-top{ display:flex; align-items:center; gap:12px; }
.dog-avatar{
  width:52px; height:52px; border-radius:18px; object-fit:cover; flex-shrink:0;
  background:var(--sage-050); border:1px solid var(--line-2); color:var(--sage-800);
  display:grid; place-items:center; overflow:hidden;
}
.dog-avatar .ic{ width:52%; height:52%; vertical-align:0; }
.dog-name{ font-size:15.5px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:6px; }
.dog-meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.dog-facts{ display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; font-size:12.5px; margin:0; }
.dog-facts dt{ color:var(--muted); }
.dog-facts dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.dog-last{
  font-size:12.5px; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface); display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.dog-actions{ display:flex; gap:7px; margin-top:auto; padding-top:2px; }
.dog-actions .btn{ flex:1; }
.dog-add{
  border:1.5px dashed var(--sage-200); background:var(--sage-025); border-radius:var(--radius-lg);
  display:grid; place-items:center; align-content:center; gap:8px; padding:28px 16px; cursor:pointer;
  color:var(--sage-700); font-weight:700; font-size:13.5px; min-height:180px;
  transition:background .2s var(--ease-out), border-color .2s var(--ease-out), transform .16s var(--ease-out);
}
.dog-add:hover{ background:var(--sage-050); border-color:var(--sage-400); }
.dog-add:active{ transform:scale(.98); }
.dog-add .plus{
  width:40px; height:40px; border-radius:50%; background:#fff; color:var(--sage-600);
  display:grid; place-items:center; font-size:22px; line-height:1; box-shadow:var(--shadow-xs);
}

/* 아바타 선택 */
.avatar-pick{ display:flex; gap:14px; align-items:flex-start; }
.avatar-pick-body{ flex:1; min-width:0; }
.emoji-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.emoji-opt{ height:42px; border:1.5px solid transparent; border-radius:12px; background:var(--surface); color:var(--sage-800); cursor:pointer; transition:transform .15s var(--ease-out), border-color .15s, background .15s; }
.emoji-opt .ic{ width:20px; height:20px; vertical-align:-.3em; }
.emoji-opt:hover{ background:var(--sage-025); }
.emoji-opt:active{ transform:scale(.9); }
.emoji-opt.is-on{ border-color:var(--sage); background:var(--sage-050); }
.color-row{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.color-opt{ width:27px; height:27px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; transition:transform .15s var(--ease-out); }
.color-opt:active{ transform:scale(.88); }
.color-opt.is-on{ box-shadow:0 0 0 2px var(--sage); }
@media (max-width:420px){ .emoji-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- 차트 ---------- */
.chart-legend{ display:flex; flex-wrap:wrap; gap:6px 13px; margin-top:14px; }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
.chart-legend i{ width:10px; height:10px; border-radius:4px; flex-shrink:0; }
.chart-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chart-note{ display:flex; align-items:center; gap:7px; margin-top:10px; padding:9px 12px; border-radius:10px; background:var(--sage-025); font-size:12px; color:var(--ink-2); }
.chart-note .ic{ width:14px; height:14px; color:var(--sage-600); flex-shrink:0; }

/* ---------- 업로드 ---------- */
.drop{
  border:1.5px dashed var(--sage-200); background:var(--sage-025); border-radius:var(--radius-lg);
  padding:38px 20px; text-align:center; cursor:pointer; position:relative;
  transition:background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.drop:hover,.drop.is-over{ background:var(--sage-050); border-color:var(--sage-400); }
.drop-icon{ font-size:32px; margin-bottom:10px; }
.drop-title{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
.drop-desc{ font-size:12.5px; color:var(--muted); }
.drop-or{ display:flex; align-items:center; gap:10px; margin:16px auto 0; max-width:300px; color:var(--muted); font-size:12px; }
.drop-or::before,.drop-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.preview{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-2); background:var(--gray); }
.preview img{ width:100%; max-height:420px; object-fit:contain; background:#fff; }
.preview-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:#fff; border-top:1px solid var(--line-2); font-size:12.5px;
}
.preview-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-weight:600; }

/* ---------- 품질 검사 ---------- */
.qc{ display:grid; gap:10px; }
.qc-item{
  display:flex; align-items:center; gap:12px; padding:13px 15px;
  border:1px solid var(--line-2); border-radius:var(--radius); background:#fff;
  animation:rise .4s var(--ease-out) backwards;
}
.qc-item:nth-child(2){ animation-delay:.06s; }
.qc-item.is-fail{ border-color:#EAD5CC; background:var(--vet-bg); }
.qc-item.is-pass{ border-color:var(--sage-100); background:var(--sage-025); }
.qc-icon{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:#fff; }
.qc-icon .ic{ width:14px; height:14px; vertical-align:0; }
.qc-item.is-pass .qc-icon{ background:var(--ok); color:#fff; }
.qc-item.is-fail .qc-icon{ background:var(--vet); color:#fff; }
.qc-body{ flex:1; min-width:0; }
.qc-name{ display:block; font-size:13px; font-weight:700; }
.qc-desc{ display:block; font-size:12px; color:var(--ink-2); margin-top:1px; }
.qc-meter{ display:block; width:96px; flex-shrink:0; }
.qc-bar{ display:block; height:6px; border-radius:99px; background:rgba(0,0,0,.07); overflow:hidden; }
.qc-bar i{ display:block; height:100%; width:100%; border-radius:99px; background:var(--sage); transform-origin:left; transition:transform .6s var(--ease-out); }
.qc-item.is-fail .qc-bar i{ background:var(--vet); }
.qc-val{ display:block; font-size:11px; color:var(--muted); text-align:right; margin-top:3px; font-variant-numeric:tabular-nums; }

/* ---------- 분석 결과: 나란히 보기 ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.compare-pane{ border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-xs); }
.compare-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--line-2); background:var(--surface);
  font-size:12.5px; font-weight:700; color:var(--ink-2);
}
.compare-stage{ position:relative; background:var(--surface); display:grid; place-items:center; }
.compare-stage img{ width:100%; display:block; }
.compare-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.lesion-shape{ cursor:pointer; transition:opacity .18s var(--ease-out); }
.lesion-shape .ls-halo{ fill:none; stroke:rgba(255,255,255,.85); stroke-width:5; vector-effect:non-scaling-stroke; }
.lesion-shape .ls-box{ fill:none; stroke-width:2.5; vector-effect:non-scaling-stroke; }
.lesion-shape .ls-fill{ opacity:.42; }
.lesion-shape.is-dim{ opacity:.25; }
.lesion-shape.is-active .ls-fill{ opacity:.55; }
.lesion-shape.is-active .ls-box{ stroke-width:4; }
.lesion-shape.is-active .ls-halo{ stroke-width:7; }
.lesion-tag{ font-size:11px; font-weight:800; fill:#fff; }
.lesion-tag-bg{ rx:4; stroke:rgba(255,255,255,.9); stroke-width:.4; }

/* ---------- 결과 요약 ---------- */
.verdict{
  display:flex; align-items:center; gap:16px; padding:22px 24px;
  border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-xs);
  border:1px solid var(--line-2); position:relative; overflow:hidden;
}
.verdict::before{ content:''; position:absolute; inset:0; pointer-events:none; }
.verdict.is-abnormal{ border-color:#EAD5CC; }
.verdict.is-abnormal::before{ background:linear-gradient(135deg,var(--vet-bg), transparent 55%); }
.verdict.is-normal{ border-color:var(--sage-100); }
.verdict.is-normal::before{ background:linear-gradient(135deg,var(--sage-050), transparent 55%); }
.verdict-mark{
  width:54px; height:54px; border-radius:19px; display:grid; place-items:center; flex-shrink:0;
  background:#fff; border:1px solid var(--line-2); box-shadow:var(--shadow-xs); position:relative;
}
.verdict.is-normal .verdict-mark{ color:var(--ok); background:var(--ok-bg); border-color:transparent; }
.verdict.is-abnormal .verdict-mark{ color:var(--vet); background:var(--vet-bg); border-color:transparent; }
.verdict-mark .ic{ width:26px; height:26px; vertical-align:0; }
.verdict > div:last-child{ position:relative; }
.verdict-title{ font-size:19px; font-weight:800; letter-spacing:-.03em; }
.verdict-desc{ font-size:13px; color:var(--ink-2); margin-top:4px; max-width:62ch; }

.lesion-list{ display:grid; gap:9px; }
.lesion-row{
  display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:var(--radius); background:#fff;
  transition:border-color .18s var(--ease-out), background .18s var(--ease-out), transform .15s var(--ease-out);
  text-align:left; width:100%;
}
.lesion-row:hover{ border-color:var(--sage-200); background:var(--sage-025); }
.lesion-row:active{ transform:scale(.985); }
.lesion-row.is-active{ border-color:var(--sage); background:var(--sage-050); }
.lesion-swatch{ width:12px; height:36px; border-radius:6px; flex-shrink:0; }
.lesion-info{ flex:1; min-width:0; }
.lesion-name{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lesion-sub{ font-size:12px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.lesion-score{ text-align:right; flex-shrink:0; }
.lesion-score b{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.lesion-score small{ display:block; font-size:11px; color:var(--muted); }
.rank-badge{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:7px;
  font-size:10.5px; font-weight:800; background:var(--sage-700); color:#fff;
}
.rank-badge.rank-2{ background:var(--sage-600); }

/* ---------- 제품 / 솔루션 ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.prod{
  border:1px solid var(--line-2); border-radius:var(--radius); padding:13px; background:#fff;
  display:flex; gap:13px; text-decoration:none; color:inherit;
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .16s var(--ease-out);
}
.prod:hover{ border-color:var(--sage-200); box-shadow:var(--shadow); transform:translateY(-2px); }
.prod:active{ transform:scale(.985); }
.prod-img{ width:56px; height:56px; flex-shrink:0; border-radius:14px; background:var(--surface); border:1px solid var(--line-2); overflow:hidden; display:grid; place-items:center; color:var(--sage-600); position:relative; }
.prod-img .ic{ width:24px; height:24px; vertical-align:0; }
.prod-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
.prod-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.prod-brand{ font-size:11px; color:var(--muted); }
.prod-brand b{ color:var(--sage-700); }
.prod-herbs{ display:flex; flex-wrap:wrap; gap:3px; }
.prod-herbs i{ font-style:normal; font-size:11px; padding:1.5px 8px; border-radius:999px; background:var(--sage-050); color:var(--sage-800); }
.prod-price{ font-size:13.5px; font-weight:800; margin-top:auto; padding-top:5px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-variant-numeric:tabular-nums; }
.prod-price small{ font-weight:500; color:var(--muted); }
.prod-type{ font-size:11px; font-weight:700; color:var(--sage-700); }
.prod-name{ font-size:13.5px; font-weight:700; line-height:1.4; letter-spacing:-.02em; }
.prod-ing{ font-size:12px; color:var(--muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.tag{ font-size:11px; padding:2px 8px; border-radius:7px; background:var(--surface); color:var(--ink-2); }

.sol{ border:1px solid var(--line-2); border-radius:var(--radius); padding:16px 18px; background:#fff; }
.sol + .sol{ margin-top:10px; }
.sol.type-병원권고{ border-color:#EAD5CC; background:linear-gradient(180deg,var(--vet-bg), #fff 130%); }
.sol.type-관찰{ border-color:#ECDFC5; background:linear-gradient(180deg,var(--warn-bg), #fff 130%); }
.sol.type-관리{ border-color:var(--sage-100); background:linear-gradient(180deg,var(--sage-025), #fff 130%); }
.sol-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
.sol-name{ font-size:13.5px; font-weight:700; letter-spacing:-.02em; }
.sol-content{ font-size:13px; color:var(--ink-2); line-height:1.65; }
.sol-caution{
  font-size:12.5px; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(0,0,0,.1);
  color:var(--ink-2); display:flex; gap:7px;
}
.sol-caution b{ flex-shrink:0; color:var(--vet); }

/* 홈케어 가이드 */
.guide{ border:1px solid var(--line-2); border-radius:var(--radius); background:#fff; margin-top:14px; overflow:hidden; box-shadow:var(--shadow-xs); }
.guide + .guide{ margin-top:12px; }
.guide-head{ padding:15px 18px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:9px; flex-wrap:wrap; background:var(--sage-025); }
.guide-title{ font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.guide-what{ padding:13px 18px; font-size:13.5px; color:var(--ink-2); line-height:1.65; border-bottom:1px solid var(--line-2); }
.guide-grid{ display:grid; grid-template-columns:1fr 1fr; }
.guide-col{ padding:15px 18px; }
.guide-col + .guide-col{ border-left:1px solid var(--line-2); }
.guide-col h4{ margin:0 0 9px; font-size:12.5px; font-weight:800; display:flex; align-items:center; gap:6px; }
.guide-col h4 .ic{ width:15px; height:15px; }
.guide-col.is-do h4{ color:var(--ok); }
.guide-col.is-dont h4{ color:var(--vet); }
.guide-col.is-watch h4{ color:var(--warn); }
.guide-col.is-vet h4{ color:var(--vet); }
.guide-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.guide-col li{ font-size:13px; line-height:1.55; padding-left:17px; position:relative; color:var(--ink); }
.guide-col li::before{ content:''; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--sage); }
.guide-col.is-dont li::before{ background:var(--vet); }
.guide-col.is-vet{ background:var(--vet-bg); }
.guide-col.is-vet li::before{ background:var(--vet); }
.guide-col.is-watch li::before{ background:var(--warn); }
.guide-tip{ padding:12px 18px; font-size:12.5px; color:var(--ink-2); border-top:1px dashed var(--line); background:#fff; display:flex; gap:7px; }
.guide-tip .ic{ width:15px; height:15px; color:var(--warn); flex-shrink:0; margin-top:2px; }
.guide-common{ margin-top:14px; padding:14px 18px; border:1px solid var(--line-2); border-radius:var(--radius); font-size:12.5px; color:var(--ink-2); line-height:1.6; background:var(--surface); }
.guide-common b{ color:var(--ink); }
@media (max-width:640px){ .guide-grid{ grid-template-columns:1fr; } .guide-col + .guide-col{ border-left:0; border-top:1px solid var(--line-2); } }

.notice{
  display:flex; gap:10px; padding:14px 16px; border-radius:var(--radius);
  background:var(--surface); font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.notice-icon{ flex-shrink:0; color:var(--sage-600); }
.notice-icon .ic{ width:17px; height:17px; }

/* ---------- 모달 ---------- */
.modal{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(46,50,39,.44); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fade .2s var(--ease-out);
}
.modal-box{
  width:100%; max-width:460px; background:#fff; border-radius:26px;
  box-shadow:var(--shadow-lg); max-height:calc(100vh - 40px); display:flex; flex-direction:column;
  animation:pop .3s var(--ease-out);
}
.modal-box.is-wide{ max-width:560px; }
.modal-head{ padding:22px 24px 0; }
.modal-title{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.03em; }
.modal-desc{ margin:6px 0 0; font-size:13px; color:var(--muted); }
.modal-body{ padding:18px 24px; overflow-y:auto; }
.modal-foot{ padding:0 24px 22px; display:flex; gap:9px; }
.modal-foot .btn{ flex:1; height:46px; border-radius:14px; }
@keyframes fade{ from{opacity:0} }
@keyframes pop{ from{opacity:0; transform:translateY(14px) scale(.96)} }

.alert-mark{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  margin:4px auto 14px; background:var(--vet-bg); color:var(--vet);
}
.alert-mark .ic{ width:26px; height:26px; }

/* ---------- 토스트 ---------- */
.toast-wrap{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90; display:grid; gap:8px; width:calc(100% - 40px); max-width:380px; }
.toast{
  padding:13px 18px; border-radius:15px; background:rgba(46,50,39,.94); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:13px; font-weight:600; box-shadow:var(--shadow-lg);
  animation:toast-in .35s var(--ease-out);
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(12px) scale(.97); } }

/* ---------- 인증 페이지 ---------- */
.auth{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--cream); }
.auth-aside{
  background:linear-gradient(158deg,var(--sage-900) -10%,var(--sage-800) 40%,var(--sage-600) 115%);
  color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-aside::before{
  content:''; position:absolute; width:560px; height:560px; border-radius:50%;
  right:-200px; bottom:-230px; background:rgba(255,255,255,.07);
}
.auth-aside::after{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  left:-120px; top:-110px; background:rgba(255,255,255,.06);
}
.auth-aside .brand{ color:#fff; font-size:16px; position:relative; z-index:1; }
.auth-aside .brand-mark{ background:rgba(255,255,255,.2); box-shadow:none; }
.auth-copy{ position:relative; z-index:1; }
.auth-copy h1{ font-size:34px; line-height:1.32; letter-spacing:-.04em; margin:0 0 14px; font-weight:800; text-wrap:balance; }
.auth-copy p{ font-size:14.5px; opacity:.92; margin:0; line-height:1.7; max-width:34ch; color:#F2F5EA; }
.auth-points{ display:grid; gap:11px; margin-top:30px; position:relative; z-index:1; }
.auth-point{ display:flex; gap:11px; align-items:center; font-size:13.5px; }
.auth-point i{ width:26px; height:26px; border-radius:9px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; flex-shrink:0; }
.auth-foot{ font-size:12px; opacity:.78; position:relative; z-index:1; }
.auth-main{ display:grid; place-items:center; padding:40px 24px; }
.auth-form{ width:100%; max-width:372px; animation:rise .55s var(--ease-out) .08s backwards; }
.auth-form h2{ font-size:25px; font-weight:800; letter-spacing:-.035em; margin:0 0 6px; }
.auth-form .sub{ color:var(--muted); font-size:13.5px; margin:0 0 26px; }
.auth-links{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; font-size:12.5px; color:var(--muted); }
.auth-links a:hover{ color:var(--sage-700); text-decoration:underline; text-underline-offset:3px; }
.auth-alt{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line-2); text-align:center; font-size:13px; color:var(--muted); }
.auth-alt a{ color:var(--sage-700); font-weight:700; }
.auth-alt a:hover{ text-decoration:underline; text-underline-offset:3px; }
.auth-disclaimer{ margin:16px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); text-align:center; }

/* ---------- 필터바 ---------- */
.filterbar{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.filterbar .select,.filterbar .input{ width:auto; min-width:140px; height:40px; }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  height:33px; padding:0 13px; border-radius:999px; border:1.5px solid transparent;
  background:var(--surface); font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:background .18s var(--ease-out), border-color .18s, color .18s, transform .15s var(--ease-out);
}
.chip:hover{ background:var(--sage-025); }
.chip:active{ transform:scale(.94); }
.chip.is-on{ background:var(--sage-600); border-color:var(--sage-600); color:#fff; box-shadow:0 2px 6px -2px rgba(56,64,44,.3); }
.chip .ic{ width:14px; height:14px; }

/* ---------- 타임라인 (이력) ---------- */
.tl{ position:relative; padding-left:26px; }
.tl::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); border-radius:2px; }
.tl-item{ position:relative; padding-bottom:14px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-24px; top:18px; width:11px; height:11px; border-radius:50%; background:var(--sage-200); border:2px solid var(--cream); }
.tl-item.is-abnormal .tl-dot{ background:var(--vet); }
.tl-item.is-normal .tl-dot{ background:var(--ok); }
.tl-card{
  display:flex; gap:13px; align-items:center; padding:13px 15px; background:#fff;
  border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer;
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .15s var(--ease-out);
}
.tl-card:hover{ border-color:var(--sage-200); box-shadow:var(--shadow); }
.tl-card:active{ transform:scale(.99); }
.tl-date{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.tl-del{ position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; transition:background .15s, color .15s; }
.tl-del:hover{ background:var(--vet-bg); color:var(--vet); }
.thumb.is-missing{ object-fit:contain; }

/* ---------- 유틸 ---------- */
.row{ display:flex; align-items:center; gap:9px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stack{ display:grid; gap:9px; }
.mt-auto{ margin-top:auto; }
.text-muted{ color:var(--muted); }
.text-sm{ font-size:12.5px; }
.divider{ height:1px; background:var(--line); margin:18px 0; border:0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.spinner{
  width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; animation:spin .6s linear infinite;
}
.spinner-dark{ border-color:var(--sage-200); border-top-color:var(--sage); }
@keyframes spin{ to{ transform:rotate(360deg) } }

.progress{ height:6px; border-radius:99px; background:var(--gray); overflow:hidden; }
.progress i{ display:block; height:100%; width:100%; background:var(--sage); border-radius:99px; transform-origin:left; transition:transform .4s var(--ease-out); }

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .auth{ grid-template-columns:1fr; grid-template-rows:auto 1fr; background:var(--surface-2); }
  .auth-aside{ padding:24px 22px 56px; gap:18px; border-radius:0 0 30px 30px; }
  .auth-aside::before{ width:340px; height:340px; right:-130px; bottom:-160px; }
  .auth-aside::after{ display:none; }
  .auth-copy h1{ font-size:23px; margin-bottom:8px; }
  .auth-copy p{ font-size:13.5px; max-width:none; }
  .auth-points{ display:none; }
  .auth-aside .auth-foot{ display:none; }
  .auth-main{ padding:0 16px 44px; align-items:start; }
  .auth-form{ background:#fff; border-radius:26px; padding:26px 20px 24px; box-shadow:var(--shadow-md); margin-top:-30px; position:relative; z-index:2; }
}
@media (max-width:900px){
  .grid-main, .grid-2, .grid-side{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .gnb-right .gnb-user{ display:none; }
  .gnb-right .gnb-sep{ display:none; }
  .compare{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .wrap{ padding-inline:16px; }
  .page{ padding-block:16px 48px; }
  .page-head{ margin-bottom:16px; }
  .page-head > .btn, .page-head > .row{ width:100%; }
  .page-head > .row .btn{ flex:1; }
  .page-title{ font-size:21px; }
  .stat-row{ gap:10px; }
  .stat{ padding:14px 15px; border-radius:20px; }
  .stat-ic{ width:30px; height:30px; border-radius:10px; margin-bottom:9px; }
  .stat-value{ font-size:22px; }
  .stat-value .badge{ font-size:12px !important; height:25px !important; }
  .field-row{ grid-template-columns:1fr; }
  .card{ border-radius:20px; }
  .card-head{ padding:15px 16px 0; }
  .card-body{ padding:13px 16px 16px; }
  .card-pad{ padding:14px 16px; }
  .card-title{ font-size:14.5px; }
  .dog-grid{ grid-template-columns:1fr; }
  .dog-add{ min-height:120px; padding:20px; }
  .prod-grid{ grid-template-columns:1fr; }
  .modal{ padding:0; align-items:end; }
  .modal-box{ max-width:none; border-radius:26px 26px 0 0; max-height:92vh; animation:up .35s var(--ease-drawer); }
  .modal-foot{ padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); }
  .toast-wrap{ bottom:calc(16px + env(safe-area-inset-bottom,0px)); }

  .table{ min-width:0; font-size:13px; }
  .table th, .table td{ padding:10px 10px; }
  .hide-m{ display:none; }

  .filterbar{ width:100%; }
  .filterbar .select{ flex:1; min-width:0; }
  .tl{ padding-left:18px; }
  .tl-dot{ left:-16px; }
  .tl-card{ padding:12px; gap:10px; }
  .tl-card .thumb{ width:50px; height:50px; }
  .tl-card > .btn{ display:none; }
  .tl-date{ font-size:11.5px; }

  .verdict{ padding:17px 18px; gap:13px; border-radius:22px; }
  .verdict-mark{ width:46px; height:46px; border-radius:16px; }
  .verdict-mark .ic{ width:22px; height:22px; }
  .prod-img{ width:48px; height:48px; border-radius:12px; }
  .verdict-title{ font-size:16.5px; }
  .lesion-row{ padding:11px 12px; }
  .compare-stage img{ max-height:60vh; object-fit:contain; }
}

/* ==========================================================================
   분석 마법사 (올리브영 스킨스캔 구성 참고) — 모바일 우선 단계형 흐름
   ========================================================================== */
.wiz{ max-width:520px; margin:0 auto; padding:0 20px calc(184px + env(safe-area-inset-bottom,0px)); min-height:calc(100vh - var(--header-h)); }
.wiz-bar{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; height:56px; margin:0 -4px; }
.wiz-bar .ib{ width:44px; height:44px; border:0; background:none; border-radius:14px; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:background .15s, transform .15s var(--ease-out); }
.wiz-bar .ib:hover{ background:var(--surface); }
.wiz-bar .ib:active{ transform:scale(.9); }
.wiz-bar .ib .ic{ width:21px; height:21px; vertical-align:0; }
.wiz-bar h2{ margin:0; text-align:center; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.wiz-steps{ display:flex; gap:5px; margin:2px 0 26px; }
.wiz-steps i{ flex:1; height:4px; border-radius:99px; background:var(--sage-100); transition:background .3s var(--ease-out); }
.wiz-steps i.on{ background:var(--sage); }
.wiz-h1{ font-size:25px; line-height:1.35; font-weight:800; letter-spacing:-.035em; margin:0 0 9px; word-break:keep-all; text-wrap:balance; }
.wiz-sub{ margin:0 0 26px; color:var(--muted); font-size:14px; line-height:1.6; word-break:keep-all; }
.wiz-step{ animation:rise .4s var(--ease-out); }
.wiz-step[hidden]{ display:none; }

/* 하단 고정 CTA */
.cta{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 32%);
      padding:20px 20px calc(16px + env(safe-area-inset-bottom,0px)); }
.cta-inner{ max-width:520px; margin:0 auto; display:grid; gap:9px; }
.cta .btn-lg{ height:56px; font-size:16px; border-radius:17px; }

/* 인트로 */
.intro-hero{
  background:linear-gradient(160deg,var(--sage-050),var(--sage-100) 90%);
  border-radius:28px; padding:30px 22px 0; margin:26px 0 0; position:relative; overflow:hidden;
}
.intro-hero::before{ content:''; position:absolute; width:190px; height:190px; border-radius:50%; right:-60px; top:-70px; background:rgba(255,255,255,.45); }
.intro-hero::after{ content:''; position:absolute; width:110px; height:110px; border-radius:50%; left:-40px; bottom:30px; background:rgba(139,154,110,.12); }
.intro-phone{
  background:#fff; border-radius:30px 30px 0 0; padding:20px 18px 34px; max-width:260px; margin:0 auto;
  box-shadow:0 -10px 30px -14px rgba(56,64,44,.35), 0 0 0 7px rgba(255,255,255,.4);
  position:relative; z-index:1;
}
.intro-phone .ph-top{ display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:800; margin-bottom:14px; }
.intro-phone .ph-top .ic{ width:14px; height:14px; color:var(--sage-600); }
.intro-phone .ph-k{ font-size:11px; color:var(--muted); }
.intro-phone .ph-t{ font-size:14px; font-weight:800; margin:2px 0 9px; letter-spacing:-.02em; }
.intro-phone .ph-chip{ display:inline-block; font-size:11px; font-weight:700; padding:3.5px 9px; border-radius:99px; background:var(--sage-800); color:#fff; margin-right:4px; }
.intro-phone .ph-chip.o{ background:var(--sage-050); color:var(--sage-800); }
.intro-phone .ph-cta{
  margin:15px -8px 0; background:linear-gradient(160deg,var(--sage) -25%,var(--sage-600) 50%,var(--sage-700) 125%);
  color:#fff; font-size:12px; font-weight:800; text-align:center; padding:12px; border-radius:13px;
  box-shadow:0 4px 12px -4px rgba(56,64,44,.4);
}
.intro-phone .ph-doc{ width:74px; height:88px; background:#fff; border:1px solid var(--line); border-radius:10px; margin:18px auto -44px; transform:rotate(-8deg); box-shadow:var(--shadow-xs); padding:10px 8px; }
.intro-phone .ph-doc i{ display:block; height:5px; border-radius:3px; background:var(--gray); margin-bottom:5px; }
.intro-phone .ph-doc i:first-child{ width:60%; height:24px; border-radius:50%; background:var(--sage-200); margin:0 auto 8px; }

/* 인트로 신뢰 포인트 */
.intro-points{ display:grid; gap:9px; margin:18px 0 0; }
.intro-point{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:var(--radius); background:var(--surface); font-size:13.5px; font-weight:600; color:var(--ink-2); animation:rise .45s var(--ease-out) backwards; }
.intro-point:nth-child(2){ animation-delay:.06s; }
.intro-point:nth-child(3){ animation-delay:.12s; }
.intro-point .ip-ic{ width:32px; height:32px; border-radius:11px; background:#fff; color:var(--sage-700); display:grid; place-items:center; flex-shrink:0; box-shadow:var(--shadow-xs); }
.intro-point .ip-ic .ic{ width:17px; height:17px; vertical-align:0; }

/* 정보 입력 — 반려견 선택 */
.opt-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt > span{
  display:grid; place-items:center; height:60px; border:1.5px solid transparent; border-radius:16px;
  background:var(--surface); font-size:15px; font-weight:600; cursor:pointer; text-align:center; padding:0 6px;
  transition:background .18s var(--ease-out), border-color .18s, color .18s, transform .15s var(--ease-out);
}
.opt > span:active{ transform:scale(.97); }
.opt > input:checked + span{ background:var(--sage-050); border-color:var(--sage); color:var(--sage-900); font-weight:700; }
.opt > input:disabled + span{ cursor:default; }
.opt > input:focus-visible + span{ box-shadow:0 0 0 4px rgba(139,154,110,.14); }
.dog-pick{ display:grid; gap:10px; }
.dog-pick .opt > span{ height:auto; padding:14px 16px; display:flex; justify-content:flex-start; gap:12px; text-align:left; }
.dog-pick .opt > input:checked + span .dog-avatar{ border-color:transparent; }
.dog-pick small{ display:block; font-size:12px; font-weight:500; opacity:.75; margin-top:1px; }
.agree{ display:flex; align-items:center; gap:10px; margin-top:34px; font-size:14.5px; font-weight:600; }
.agree input{ width:22px; height:22px; accent-color:var(--sage); }
.agree a{ margin-left:auto; font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-weight:500; }

/* 좋은 사진 예시 */
.good-title{ display:flex; align-items:center; gap:9px; font-size:17px; font-weight:800; margin:0 0 14px; }
.good-title i{ width:26px; height:26px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-style:normal; flex-shrink:0; }
.good-title i .ic{ width:13px; height:13px; vertical-align:0; }
.example{ background:var(--surface); border-radius:var(--radius-lg); padding:24px 20px; text-align:center; }
.example-img{ width:min(100%,250px); aspect-ratio:1; margin:0 auto 14px; border-radius:24px; overflow:hidden; position:relative; background:#8C8C8C; }
.example-img img{ width:100%; height:100%; object-fit:cover; }
.example-img svg{ position:absolute; inset:0; width:100%; height:100%; }
.example-cap{ font-size:14px; line-height:1.55; color:var(--ink); word-break:keep-all; }
.example.ng{ background:#fff; border:1px solid var(--line-2); padding:0; overflow:hidden; text-align:left; }
.example.ng .example-img{ width:100%; border-radius:0; aspect-ratio:1.1; margin:0; background:#B9B3A6; }
.example.ng .ng-mark{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:3px solid #D8544B; }
.example.ng .ng-mark::after{ content:''; position:absolute; left:50%; top:50%; width:3px; height:24px; background:#D8544B; transform:translate(-50%,-50%) rotate(45deg); }
.example.ng .example-cap{ padding:12px 12px 14px; font-size:13px; text-align:center; }
.ng-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guide-link{ display:block; text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; background:none; border:0; cursor:pointer; width:100%; }
.safe{ display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:14px; padding:14px 16px; font-size:13.5px; color:var(--ink-2); margin-top:18px; }
.safe .ic{ width:18px; height:18px; color:var(--sage-600); flex-shrink:0; }

/* 카메라 */
.cam{ position:fixed; inset:0; z-index:70; background:#000; display:flex; flex-direction:column; }
.cam video,.cam canvas.snap{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam-shade{ position:absolute; inset:0; pointer-events:none; }
.cam-top{ position:relative; z-index:2; padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0; display:flex; justify-content:space-between; }
.cam-guide-btn{ height:40px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(255,255,255,.85); background:rgba(0,0,0,.25); color:#fff; font-weight:700; font-size:14px; cursor:pointer; backdrop-filter:blur(4px); }
.cam-hint{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(126px + env(safe-area-inset-bottom,0px)); z-index:2; background:rgba(0,0,0,.72); color:#fff; padding:14px 26px; border-radius:999px; font-size:15px; font-weight:600; white-space:nowrap; backdrop-filter:blur(6px); }
.cam-bar{ position:absolute; left:0; right:0; bottom:0; z-index:2; height:calc(110px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:#161616; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-inline:26px; }
.cam-bar button{ background:none; border:0; color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.cam-bar .l{ text-align:left; } .cam-bar .r{ text-align:right; }
.shutter{ width:74px; height:74px; border-radius:50%; border:4px solid #fff; background:none; padding:4px; transition:transform .15s var(--ease-out); }
.shutter:active{ transform:scale(.9); }
.shutter i{ display:block; width:100%; height:100%; border-radius:50%; background:#fff; }
.cam-fallback{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; text-align:center; padding:30px; z-index:1; }

/* 바텀시트 */
.sheet{ position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center; animation:fade .22s var(--ease-out); }
.sheet-box{
  width:100%; max-width:560px; background:#fff; border-radius:28px 28px 0 0;
  padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px)); max-height:88vh; overflow-y:auto;
  animation:up .4s var(--ease-drawer);
}
.sheet-box::before{ content:''; display:block; width:40px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 16px; }
.sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.sheet-head h3{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1.35; }
.sheet-head .ib{ width:36px; height:36px; border:0; border-radius:12px; background:var(--surface); font-size:20px; cursor:pointer; color:var(--ink-2); flex-shrink:0; margin:-4px -6px 0 0; transition:background .15s, transform .15s var(--ease-out); }
.sheet-head .ib:active{ transform:scale(.9); }
.sheet-desc{ color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0 0 18px; }
@keyframes up{ from{ transform:translateY(60px); opacity:0 } }

/* 사진 확인 */
.confirm-img{ border-radius:24px; overflow:hidden; background:var(--gray); aspect-ratio:1; max-width:340px; margin:0 auto 16px; box-shadow:var(--shadow); }
.confirm-img img{ width:100%; height:100%; object-fit:cover; }
.confirm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.confirm-actions .btn{ height:50px; font-size:15px; border-radius:15px; }

/* 분석 중 */
.loading{ text-align:center; padding:64px 0; }
.loading .ring{ width:74px; height:74px; margin:0 auto 24px; border-radius:50%; border:5px solid var(--sage-100); border-top-color:var(--sage); animation:spin .8s linear infinite; }
.loading h3{ font-size:19px; margin:0 0 6px; letter-spacing:-.02em; }

@media (min-width:640px){
  .cta{ padding-inline:0; }
  .wiz{ padding-top:6px; }
}