/* ==========================================================================
   반려견 피부 이상 조기 판별 및 한방 케어 솔루션 — 공통 스타일
   팔레트: #8B9A6E / #F7F2EB / #EAE2D6 / #EEEEEE (colorhunt)
   ※ 위 4색에는 어두운 텍스트색·경고색이 없어 같은 색상 계열에서 파생값을 추가함
   ========================================================================== */

:root{
  /* 지정 팔레트 */
  --sage:        #8B9A6E;
  --cream:       #FFFFFF;   /* 배경은 흰색으로 확정 (원 팔레트 #F7F2EB 미사용) */
  --surface:     #F6F6F6;   /* 표 헤더·호버 등 살짝 눌린 면 */
  --beige:       #EAE2D6;
  --gray:        #EEEEEE;

  /* 파생 (sage 명도 변형) */
  --sage-900:    #3F4733;
  --sage-700:    #5F6B48;
  --sage-600:    #74815A;
  --sage-400:    #A3B089;
  --sage-200:    #C7D0B4;
  --sage-050:    #EDF0E5;

  /* 텍스트 */
  --ink:         #35392E;
  --ink-2:       #5E6252;
  --muted:       #8B8A7C;
  --line:        #E6E6E6;

  /* 상태 (베이지 톤과 어울리는 저채도) */
  --ok:          #6E8F6B;
  --ok-bg:       #EAF0E6;
  --warn:        #B98A4B;
  --warn-bg:     #F6EEE0;
  --vet:         #B4705A;
  --vet-bg:      #F7E9E3;

  --radius:      14px;
  --radius-sm:   9px;
  --radius-lg:   20px;
  --shadow:      0 1px 2px rgba(63,71,51,.05), 0 8px 24px -12px rgba(63,71,51,.18);
  --shadow-lg:   0 2px 4px rgba(63,71,51,.06), 0 24px 48px -20px rgba(63,71,51,.28);
  --header-h:    62px;
}

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

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Pretendard','Pretendard Variable',-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;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

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

.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:23px; font-weight:800; letter-spacing:-.03em; }
.page-sub{ margin:5px 0 0; color:var(--muted); font-size:13px; }

/* ---------- 헤더 / GNB ---------- */
.gnb{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.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:15px; flex-shrink:0; }
.brand-mark{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(145deg,var(--sage-400),var(--sage));
  display:grid; place-items:center; color:#fff; font-size:15px;
}
.gnb-menu{ display:flex; align-items:center; gap:2px; margin-left:12px; flex:1; min-width:0; }
.gnb-menu a{
  padding:8px 13px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; transition:background .15s,color .15s;
}
.gnb-menu a:hover{ background:var(--gray); color:var(--ink); }
.gnb-menu a[aria-current="page"]{ background:var(--sage); color:#fff; }
.gnb-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.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; }
.linkbtn:hover{ color:var(--sage-700); text-decoration:underline; }
.gnb-toggle{ display:none; width:38px; height:38px; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; }

/* ---------- 카드 ---------- */
.card{ min-width:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{ padding:20px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.card-title{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.card-title .dot{ width:6px; height:6px; border-radius:50%; background:var(--sage); flex-shrink:0; }
.card-body{ padding:20px; }

.section{ margin-bottom:22px; }
.grid{ display:grid; gap:18px; }
.grid > *{ min-width:0; }           /* 자식 콘텐츠(차트 등)가 트랙을 넓히지 못하게 */
.grid-main{ grid-template-columns:1.15fr .85fr; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-side{ grid-template-columns:1fr 340px; }

/* ---------- 통계 타일 ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:17px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.stat::after{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--sage-200); }
.stat.is-primary::after{ background:var(--sage); }
.stat-label{ font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.stat-value{ font-size:27px; font-weight:800; letter-spacing:-.04em; line-height:1.15; 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:5px; }

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 17px; border-radius:10px; border:1px solid transparent;
  font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:var(--sage); color:#fff; }
.btn-primary:not(:disabled):hover{ background:var(--sage-700); }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--ink-2); }
.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-700); border-color:var(--sage-200); }
.btn-soft:not(:disabled):hover{ background:var(--sage-200); }
.btn-danger{ background:#fff; border-color:#E3CFC6; color:var(--vet); }
.btn-danger:not(:disabled):hover{ background:var(--vet-bg); }
.btn-lg{ height:48px; padding:0 26px; font-size:15px; border-radius:12px; }
.btn-sm{ height:31px; padding:0 11px; font-size:12.5px; border-radius:8px; }
.btn-block{ width:100%; }

/* ---------- 폼 ---------- */
.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:42px; padding:0 13px; background:#fff;
  border:1px solid var(--line); border-radius:10px; font:inherit; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.textarea{ height:auto; padding:11px 13px; resize:vertical; min-height:88px; line-height:1.6; }
.input::placeholder,.textarea::placeholder{ color:#B6B0A2; }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(139,154,110,.16);
}
.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='%238B8A7C' 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 13px 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:42px; border:1px solid var(--line); border-radius:10px;
  background:#fff; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.radio-chip input:checked + span{ background:var(--sage-050); border-color:var(--sage); color:var(--sage-700); }
.radio-chip input:focus-visible + span{ box-shadow:0 0 0 3px rgba(139,154,110,.16); }

/* ---------- 배지 ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px;
  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-700); }
.badge-code{ font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ---------- 테이블 ---------- */
.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:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface);
}
.table td{ padding:13px 14px; border-bottom:1px solid var(--gray); vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr{ transition:background .12s; }
.table tbody tr:hover{ background:var(--surface); }
.table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.table .center{ text-align:center; }
.hide-m{ }
.thumb{ width:44px; height:44px; border-radius:9px; object-fit:cover; border:1px solid var(--line); background:var(--gray); }

/* ---------- 빈 상태 ---------- */
.empty{ padding:52px 20px; text-align:center; color:var(--muted); }
.empty-icon{ font-size:30px; margin-bottom:10px; opacity:.5; }
.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:1px solid var(--line); border-radius:var(--radius);
  padding:17px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:13px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.dog-card:hover{ border-color:var(--sage-200); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.dog-top{ display:flex; align-items:center; gap:12px; }
.dog-avatar{
  width:52px; height:52px; border-radius:15px; object-fit:cover; flex-shrink:0;
  background:var(--sage-050); border:1px solid var(--line);
  display:grid; place-items:center; font-size:23px;
}
.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; }
.dog-facts dt{ color:var(--muted); }
.dog-facts dd{ margin:0; font-weight:600; }
.dog-last{
  font-size:12.5px; padding:9px 11px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--gray); display:flex; align-items:center; gap:7px;
}
.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-050); border-radius:var(--radius);
  display:grid; place-items:center; gap:7px; padding:28px 16px; cursor:pointer;
  color:var(--sage-700); font-weight:700; font-size:13.5px; min-height:180px; transition:.15s;
}
.dog-add:hover{ background:var(--sage-200); border-color:var(--sage); }
.dog-add .plus{ font-size:26px; line-height:1; }

/* ---------- 차트 ---------- */
.chart-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; 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:3px; flex-shrink:0; }
.chart-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- 업로드 ---------- */
.drop{
  border:1.5px dashed var(--sage-200); background:var(--sage-050); border-radius:var(--radius);
  padding:38px 20px; text-align:center; cursor:pointer; transition:.15s; position:relative;
}
.drop:hover,.drop.is-over{ background:var(--sage-200); border-color:var(--sage); }
.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); 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); 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:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
}
.qc-item.is-fail{ border-color:#E3CFC6; background:var(--vet-bg); }
.qc-item.is-pass{ border-color:var(--sage-200); background:var(--sage-050); }
.qc-icon{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; flex-shrink:0; background:#fff; }
.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(--muted); margin-top:1px; }
.qc-meter{ display:block; width:96px; flex-shrink:0; }
.qc-bar{ display:block; height:5px; border-radius:99px; background:var(--gray); overflow:hidden; }
.qc-bar i{ display:block; height:100%; border-radius:99px; background:var(--sage); transition:width .5s cubic-bezier(.22,1,.36,1); }
.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); border-radius:var(--radius); overflow:hidden; background:#fff; }
.compare-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 13px; border-bottom:1px solid var(--line); 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 .15s; }
.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:19px 21px;
  border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow);
}
.verdict.is-abnormal{ border-color:#E3CFC6; background:linear-gradient(180deg,var(--vet-bg),#fff 70%); }
.verdict.is-normal{ border-color:var(--sage-200); background:linear-gradient(180deg,var(--sage-050),#fff 70%); }
.verdict-mark{ width:50px; height:50px; border-radius:16px; display:grid; place-items:center; font-size:24px; flex-shrink:0; background:#fff; border:1px solid var(--line); }
.verdict-title{ font-size:18px; font-weight:800; letter-spacing:-.03em; }
.verdict-desc{ font-size:13px; color:var(--ink-2); margin-top:3px; }

.lesion-list{ display:grid; gap:9px; }
.lesion-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; transition:.15s;
  text-align:left; width:100%;
}
.lesion-row:hover{ border-color:var(--sage-200); background:var(--surface); }
.lesion-row.is-active{ border-color:var(--sage); background:var(--sage-050); }
.lesion-swatch{ width:11px; height:34px; border-radius:4px; 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; }
.lesion-score{ text-align:right; flex-shrink:0; }
.lesion-score b{ font-size:16px; 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:19px; height:19px; padding:0 5px; border-radius:6px;
  font-size:10.5px; font-weight:800; background:var(--sage); color:#fff;
}
.rank-badge.rank-2{ background:var(--sage-400); }

/* ---------- 제품 / 솔루션 ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.prod{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; background:#fff;
  display:flex; gap:12px; transition:.15s; text-decoration:none; color:inherit;
}
.prod-img{ width:50px; height:50px; flex-shrink:0; border-radius:12px; background:var(--surface); border:1px solid var(--gray); overflow:hidden; display:grid; place-items:center; font-size:20px; }  /* 판정 카드 아이콘(.verdict-mark)과 같은 크기 */
.prod-img img{ width:100%; height:100%; object-fit:cover; }
.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-price{ font-size:13px; font-weight:700; margin-top:auto; padding-top:4px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prod-price small{ font-weight:500; color:var(--muted); }
.prod:hover{ border-color:var(--sage-200); box-shadow:var(--shadow); }
.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 7px; border-radius:6px; background:var(--surface); color:var(--ink-2); border:1px solid var(--gray); }

.sol{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px 16px; background:#fff; }
.sol + .sol{ margin-top:10px; }
.sol.type-병원권고{ border-color:#E3CFC6; background:var(--vet-bg); }
.sol.type-관찰{ border-color:#EBDDC3; background:var(--warn-bg); }
.sol.type-관리{ border-color:var(--sage-200); background:var(--sage-050); }
.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:9px; padding-top:9px; border-top:1px dashed rgba(0,0,0,.09);
  color:var(--ink-2); display:flex; gap:7px;
}
.sol-caution b{ flex-shrink:0; }

/* 홈케어 가이드 */
.guide{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-top:14px; overflow:hidden; }
.guide + .guide{ margin-top:12px; }
.guide-head{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.guide-title{ font-size:14.5px; font-weight:800; letter-spacing:-.02em; }
.guide-what{ padding:12px 16px; font-size:13.5px; color:var(--ink-2); line-height:1.65; background:var(--surface); }
.guide-grid{ display:grid; grid-template-columns:1fr 1fr; }
.guide-col{ padding:14px 16px; }
.guide-col + .guide-col{ border-left:1px solid var(--line); }
.guide-col h4{ margin:0 0 8px; font-size:12.5px; font-weight:800; display:flex; align-items:center; gap:6px; }
.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:18px; position:relative; color:var(--ink); }
.guide-col li::before{ content:''; position:absolute; left:2px; top:8px; width:7px; height:7px; 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:11px 16px; font-size:12.5px; color:var(--ink-2); border-top:1px dashed var(--line); background:#fff; }
.guide-common{ margin-top:14px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:12.5px; color:var(--ink-2); line-height:1.6; }
.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); } }

.notice{
  display:flex; gap:10px; padding:13px 15px; border-radius:var(--radius-sm);
  background:var(--beige); border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
.notice-icon{ flex-shrink:0; }

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

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

/* ---------- 토스트 ---------- */
.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:12px 16px; border-radius:11px; background:var(--sage-900); color:#fff;
  font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); animation:pop .2s ease;
}

/* ---------- 인증 페이지 ---------- */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth-aside{
  background:linear-gradient(160deg,var(--sage-700),var(--sage) 55%,var(--sage-400));
  color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-aside::after{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  right:-190px; bottom:-210px; background:rgba(255,255,255,.08);
}
.auth-aside .brand{ color:#fff; font-size:16px; position:relative; z-index:1; }
.auth-aside .brand-mark{ background:rgba(255,255,255,.2); }
.auth-copy{ position:relative; z-index:1; }
.auth-copy h1{ font-size:34px; line-height:1.3; letter-spacing:-.04em; margin:0 0 14px; font-weight:800; }
.auth-copy p{ font-size:14.5px; opacity:.88; margin:0; line-height:1.7; max-width:30ch; }
.auth-points{ display:grid; gap:10px; margin-top:28px; position:relative; z-index:1; }
.auth-point{ display:flex; gap:10px; align-items:center; font-size:13.5px; }
.auth-point i{ width:24px; height:24px; border-radius:8px; background:rgba(255,255,255,.2); display:grid; place-items:center; font-style:normal; font-size:12px; flex-shrink:0; }
.auth-foot{ font-size:12px; opacity:.72; position:relative; z-index:1; }
.auth-main{ display:grid; place-items:center; padding:40px 24px; }
.auth-form{ width:100%; max-width:368px; }
.auth-form h2{ font-size:24px; font-weight:800; letter-spacing:-.03em; 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-alt{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); 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; }

/* ---------- 필터바 ---------- */
.filterbar{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.filterbar .select,.filterbar .input{ width:auto; min-width:140px; height:38px; }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  height:31px; padding:0 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.chip:hover{ border-color:var(--sage-200); background:var(--surface); }
.chip.is-on{ background:var(--sage); border-color:var(--sage); color:#fff; }

/* ---------- 타임라인 (이력) ---------- */
.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:16px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-24px; top:16px; 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); border-radius:var(--radius-sm); transition:.15s; cursor:pointer;
}
.tl-card:hover{ border-color:var(--sage-200); box-shadow:var(--shadow); }
.tl-date{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:4px; }

/* ---------- 유틸 ---------- */
.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 .7s 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%; background:var(--sage); border-radius:99px; transition:width .35s ease; }

/* ---------- 반응형 ---------- */
@media (max-width:1024px){
  .auth{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .auth-aside{ padding:22px 22px 26px; gap:18px; }
  .auth-aside::after{ display:none; }
  .auth-copy h1{ font-size:22px; margin-bottom:8px; }
  .auth-copy p{ font-size:13.5px; max-width:none; }
  .auth-points, .auth-aside .auth-foot{ display:none; }
  .auth-main{ padding:30px 20px 44px; align-items:start; }
}
@media (max-width:900px){
  .grid-main, .grid-2, .grid-side{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .gnb-toggle{ display:grid; place-items:center; margin-left:auto; }
  .gnb-menu{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line); padding:10px 20px 16px;
    margin:0; gap:3px; box-shadow:var(--shadow);
  }
  .gnb-menu[hidden]{ display:none; }
  .gnb-menu a{ padding:11px 14px; border-radius:10px; }
  .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:18px 48px; }
  .page-head{ margin-bottom:16px; }
  .page-head > .btn, .page-head > .row{ width:100%; }
  .page-head > .row .btn{ flex:1; }
  .page-title{ font-size:20px; }
  .stat-row{ gap:10px; }
  .stat{ padding:14px 14px; }
  .stat-value{ font-size:22px; }
  .stat-value .badge{ font-size:12px !important; height:24px !important; }
  .field-row{ grid-template-columns:1fr; }
  .card-body,.card-pad{ padding:14px; }
  .card-head{ padding:13px 14px; }
  .card-title{ font-size:14px; }
  .dog-grid{ grid-template-columns:1fr; }
  .dog-add{ min-height:120px; padding:20px; }
  .prod-grid{ grid-template-columns:1fr; }
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{ max-width:none; border-radius:20px 20px 0 0; max-height:92vh; }
  .modal-foot{ padding-bottom:calc(20px + 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:11px 12px; gap:10px; }
  .tl-card .thumb{ width:48px; height:48px; }
  .tl-card > .btn{ display:none; }
  .tl-date{ font-size:11.5px; }

  /* 결과 */
  .verdict{ padding:15px 16px; gap:12px; }
  .verdict-mark{ width:42px; height:42px; font-size:20px; border-radius:13px; }
  .prod-img{ width:42px; height:42px; border-radius:10px; font-size:17px; }
  .verdict-title{ font-size:16px; }
  .lesion-row{ padding:11px 12px; }
  .compare-stage img{ max-height:60vh; object-fit:contain; }
}
@media (max-width:380px){
  .stat-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   분석 마법사 (올리브영 스킨스캔 구성 참고) — 모바일 우선 단계형 흐름
   ========================================================================== */
.wiz{ max-width:520px; margin:0 auto; padding:0 20px calc(96px + 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:12px; display:grid; place-items:center; cursor:pointer; color:var(--ink); font-size:20px; }
.wiz-bar .ib:hover{ background:var(--gray); }
.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:3px; border-radius:99px; background:var(--beige); }
.wiz-steps i.on{ background:var(--sage); }
.wiz-h1{ font-size:24px; line-height:1.35; font-weight:800; letter-spacing:-.035em; margin:0 0 8px; word-break:keep-all; }
.wiz-sub{ margin:0 0 28px; color:var(--muted); font-size:14px; line-height:1.6; }
.wiz-step{ animation:pop .25s cubic-bezier(.22,1,.36,1); }
.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 30%);
      padding:18px 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:54px; font-size:16px; border-radius:14px; }

/* 인트로 */
.intro-hero{ background:var(--beige); border-radius:var(--radius-lg); padding:26px 22px 0; margin:26px 0; position:relative; overflow:hidden; }
.intro-phone{ background:#fff; border:6px solid #D9D0C2; border-bottom:0; border-radius:26px 26px 0 0; padding:18px 16px 30px; max-width:250px; margin:0 auto; box-shadow:0 -6px 20px -10px rgba(63,71,51,.3); position:relative; }
.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-k{ font-size:9.5px; color:var(--muted); }
.intro-phone .ph-t{ font-size:13px; font-weight:800; margin:2px 0 8px; }
.intro-phone .ph-chip{ display:inline-block; font-size:9px; padding:3px 8px; border-radius:99px; background:var(--sage-900); color:#fff; margin-right:4px; }
.intro-phone .ph-chip.o{ background:#fff; color:var(--ink-2); border:1px solid var(--line); }
.intro-phone .ph-cta{ margin:14px -26px 0; background:var(--sage-900); color:#fff; font-size:12px; font-weight:800; text-align:center; padding:11px; border-radius:10px; box-shadow:0 0 0 3px rgba(139,154,110,.45); }
.intro-phone .ph-doc{ width:72px; height:86px; background:#fff; border:1px solid var(--line); border-radius:8px; margin:16px auto -40px; transform:rotate(-8deg); box-shadow:var(--shadow); 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:22px; border-radius:50%; background:var(--sage-200); margin:0 auto 8px; }

/* 정보 입력 — 반려견 선택 */
.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:1px solid var(--line); border-radius:12px; background:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:.15s; text-align:center; padding:0 6px; }
.opt > input:checked + span{ background:var(--sage-900); color:#fff; border-color:var(--sage-900); }
.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; 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; font-size:13px; }
.example{ background:var(--gray); 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:22px; 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); 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 #E5484D; }
.example.ng .ng-mark::after{ content:''; position:absolute; left:50%; top:50%; width:3px; height:24px; background:#E5484D; 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(--gray); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--ink-2); margin-top:18px; }

/* 카메라 */
.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:#1B1B1B; 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:17px; font-weight:600; cursor:pointer; }
.cam-bar .l{ text-align:left; } .cam-bar .r{ text-align:right; }
.shutter{ width:72px; height:72px; border-radius:50%; border:4px solid #fff; background:none; padding:4px; }
.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,.55); display:flex; align-items:flex-end; justify-content:center; animation:fade .2s; }
.sheet-box{ width:100%; max-width:560px; background:#fff; border-radius:22px 22px 0 0; padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px)); max-height:88vh; overflow-y:auto; animation:up .28s cubic-bezier(.22,1,.36,1); }
.sheet-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.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; background:none; font-size:22px; cursor:pointer; color:var(--ink); flex-shrink:0; margin:-6px -8px 0 0; }
.sheet-desc{ color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0 0 18px; }
@keyframes up{ from{ transform:translateY(40px); opacity:0 } }

/* 사진 확인 */
.confirm-img{ border-radius:22px; overflow:hidden; background:var(--gray); aspect-ratio:1; max-width:340px; margin:0 auto 16px; }
.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; }

/* 분석 중 */
.loading{ text-align:center; padding:60px 0; }
.loading .ring{ width:72px; height:72px; margin:0 auto 22px; border-radius:50%; border:5px solid var(--beige); border-top-color:var(--sage); animation:spin .9s linear infinite; }
.loading h3{ font-size:19px; margin:0 0 6px; }

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