/* ==========================================================================
   청담언니 · CJK 타이포그래피 패스                       2026-10-01
   style.css 뒤, mobile.css 앞에 로드된다.

   근거 (실측/공식 문서)
   - 폰트 스택: 淘宝·小红书·美团·知乎·哔哩哔哩·京东 라이브 CSS에서 추출
     모두 PingFang SC를 1순위 폴백으로 두고, 브랜드 자체 서체는 헤드라인 전용.
   - 사이즈: Ant Design Mobile(9–18, main 13) / TDesign Mobile(10→12/14/16/18, 행간1.5)
             Ant Design PC(14 기준, 행간 1.5714) / 小红书 PC(14 본문 · 18·20·24 제목)
   - 리스트 카드: 携程 호텔 리스트 DOM computed style 직접 추출
             (호텔명 20px/700, 나머지 전부 14px, 카드 radius 0px, 사진 236 정사각)
   - 상세: C:\CDU\청담언니_중국어폰트_리스트UI_리서치.md
   - 시편: C:\CDU\font_research\specimen.html
   ========================================================================== */

:root{
  /* 라틴은 Inter, 한자는 PingFang → MiSans 순. 微软雅黑은 최후 폴백. */
  --font-cjk:'Inter','PingFang SC','MiSans','HarmonyOS Sans SC','Source Han Sans SC',
             'Noto Sans SC','Microsoft YaHei UI','Microsoft YaHei',sans-serif;
  /* 숫자·금액·평점 전용. 자리수를 고정해 리스트에서 흔들리지 않게. */
  --font-num:'Inter','SF Pro Display',system-ui,-apple-system,sans-serif;

  --lh-cjk:1.65;      /* 라틴 1.5 → CJK 1.65 */
  --ls-cjk:0;         /* CJK 음수 자간 금지 */

  --r-card:14px;      /* 22px → 14px (携程 0px / 앱 8–12px) */
  --c-score:#006ff6;  /* 평점 배지 */
  --c-gain:#0a8f63;   /* 무료취소·가능 같은 긍정 */
  --c-hot:#e8482f;    /* 사회적 증거 */
  --c-price:#ff5a1f;
}

/* --------------------------------------------------------------------------
   1. 서체 · 행간 · 자간
   -------------------------------------------------------------------------- */
body{
  font-family:var(--font-cjk);
  line-height:var(--lh-cjk);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wordmark,.mobile-brand{font-family:var(--font-cjk)}

/* CJK 제목에서 음수 자간 제거 — 현재 -1px/-.7px/-.3px가 걸려 있던 자리 */
.greeting h1,.hero h2,.section-title h2,.context h2,
.mobile-brand,.wordmark,.page-title,.trip-banner h2,.sheet h2,
.shop-intro h2,.hot-edit h2,.chat-head h1{
  letter-spacing:var(--ls-cjk);
}

/* 숫자·금액·평점은 라틴 폰트로 분리 */
.weather b,.datebox b,.trip-days b,.clinic-price b,.clinic-score,
.product-initial,.ingredient-no,.shop-monogram,.near-card .distance,
.clinic-bottom b,[data-num]{
  font-family:var(--font-num);
  font-feature-settings:'tnum' 1;
}

/* --------------------------------------------------------------------------
   2. 웨이트 정리 — 450/550/650/350은 YaHei(400·700)·PingFang에 없는 값이라
      합성 볼드로 뭉개졌다. 실존 웨이트만 사용한다.
   -------------------------------------------------------------------------- */
.greeting h1,.hero h2,.section-title h2,.context h2,
.mobile-brand,.wordmark,.page-title,.trip-banner h2,
.chat-head h1,.shop-intro h2,.hot-edit h2,.sheet h2{
  font-weight:600;
}
.clinic h3,.journey-card h3,.near-card h3,.event h3,.topic h3,
.ingredient-card h3,.product-card h3,.shopping-store h3,
.comparison-grid h3,.room-devices h3,.room-live h3,
.clinic-bottom b,.clinic-price b{
  font-weight:600;
}
.rail-bottom p,.hero p,.context p,.hot-edit p{font-weight:400}

/* --------------------------------------------------------------------------
   3. 크기 — CJK 실무 하한 12px, 본문 15–16px
   -------------------------------------------------------------------------- */
/* 10–11px 구간을 12px로 (중국 서비스에서 10px는 거의 쓰지 않는다) */
.rail-caption,.tiny,.prototype,.tag,.clinic-info span,
.datebox span,.bottom-nav a,.device,.bubble .who,.demo-note,
.context-footer,.ingredient-card .tiny,.sample-stamp,.product-store,
.pairing-steps,.room-controls label,.room-devices p,.room-session .tiny{
  font-size:12px;
}
.topic .number,.product-store{letter-spacing:.06em}  /* 라틴 라벨만 자간 유지 */

/* 12–13px 보조 텍스트 → 13px */
.micro,.footnote,.shop-intro p,.product-card p,.product-detail,.compare-select,
.ingredient-card p,.comparison-grid p,.shopping-store p,.hot-edit p,
.trip-banner p,.trip-days button,.event time,.event button,.near-card p,
.near-card button,.room-live p,.room-direction,.room-devices .device{
  font-size:13px;
}

/* 13–14px → 14px (리스트 메타·부제) */
.clinic p,.journey-card p,.event p,.near-card p,.weather,.text-button,
.quick,.suggestions button,.chip,.clinic-info span,.detail-row,
.clinic-bottom button,.room-transcript{
  font-size:14px;
}

/* 본문 → 15px, 대화 버블 → 16px (앱 본문 표준) */
.greeting p,.hero p,.subtitle,.context p,.hero .primary,.voice-button,
.shop-compare-button,.room-direction{font-size:15px}
.bubble{font-size:16px;line-height:1.75}

/* 제목 위계 — 小红书/携程 실측 리듬에 맞춤 */
.section-title h2{font-size:20px}
.journey-card h3,.near-card h3,.event h3,.clinic h3,.clinic-head h3{font-size:17px}
.page-title{font-size:26px}
.greeting h1{font-size:28px}
.hero h2{font-size:25px}

/* --------------------------------------------------------------------------
   4. 리스트 카드 — 중국식 정보 위계 5단
      사진 → 이름+평점 배지 → 위치 → 행동 태그 → 가격+단일 CTA
   -------------------------------------------------------------------------- */
.clinic{border-radius:var(--r-card);padding:14px}
.clinic-item{display:flex;gap:12px}
.clinic-thumb{
  width:88px;height:88px;flex:none;border-radius:8px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#eef1f6,#dfe5ee);display:grid;place-items:center;
  text-decoration:none;
}
.clinic-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.clinic-thumb-empty{display:grid;place-items:center;color:#9aa3b5}
.clinic-thumb-empty .icon{width:26px;height:26px}
.clinic-thumb i{
  position:absolute;left:0;right:0;bottom:0;font:400 10px/1.7 var(--font-cjk);font-style:normal;
  text-align:center;color:#3c4655;background:rgba(255,255,255,.88);letter-spacing:.02em;
}
.clinic-main{min-width:0;flex:1}
.clinic-head{display:flex;align-items:flex-start;gap:8px}
.clinic-head h3{margin:0;line-height:1.4;font-weight:600}
.clinic-head .save{width:32px;height:32px;min-width:32px;min-height:32px;margin-left:auto;flex:none}

.clinic-score{display:flex;align-items:center;gap:6px;margin:5px 0 4px;font-size:13px;color:#7b8390}
.score-chip{background:var(--c-score);color:#fff;font-size:12px;font-weight:700;padding:1px 5px;border-radius:3px 3px 7px}
.score-word{color:var(--c-score);font-weight:700}

.clinic-loc{margin:0 0 7px;color:var(--muted)}
.clinic-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.clinic-tags span{font-size:12px;padding:2px 7px;border-radius:5px;background:#f2f4f7;color:#6b7280}
.clinic-tags span.has-award{display:inline-flex;align-items:center;gap:5px}
.clinic-tags .t-gain{background:#e9f6f1;color:var(--c-gain)}
.clinic-tags .t-hot{background:#fdece9;color:var(--c-hot)}

.clinic-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:11px}
.clinic-src span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.clinic-src b{font-size:13px;font-weight:600;color:var(--ink)}
.clinic-cta{background:var(--blue);color:#fff;border:0;border-radius:11px;padding:10px 18px;
  font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;font-family:var(--font-cjk)}

/* 목록 상단 수집 수 표시 — 중국 서비스의 "找到6239家酒店" 자리 */
.clinic-count{font-size:13px;color:var(--muted);margin:0 0 14px}
.clinic-count b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   6. 원화 + 인민폐 참고 환산
      원화가 기준값이고, 괄호 안은 참고 환산이다. 실제 결제는 카드사 환율을 따른다.
   -------------------------------------------------------------------------- */
.price-cny{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--c-price);
  margin-left:6px;white-space:nowrap}
.fx-note{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.7}

/* --------------------------------------------------------------------------
   5. 좁은 화면 보정
   -------------------------------------------------------------------------- */
@media (max-width:430px){
  .clinic-thumb{width:76px;height:76px}
  .clinic-head h3{font-size:16px}
  .clinic-price b{font-size:18px}
  .bottom-nav a{font-size:12px}
  .rail-caption,.tiny{font-size:12px}
}
@media (max-width:340px){
  .clinic-thumb{width:68px;height:68px}
  .clinic-tags span{font-size:11px}
}

/* --------------------------------------------------------------------------
   9. 장소 상세 (병원 · 레스토랑 · 호텔)  — placedetail.js
      참조: 携程 호텔 상세. 사진 → 이름/현지 원명 → 배지·수상 → 주소+지도 →
            평점 → 사실 한 줄 → 추천 포인트 → 하단 고정 액션바.
      제목·보조이름·주소·평점·사실줄·섹션 제목이 모두 같은 좌측 20px 기준선에서 시작한다.
   -------------------------------------------------------------------------- */
.sheet--place{padding:0;overflow:hidden}
.sheet--place .close{
  background:rgba(255,255,255,.92);border-radius:50%;width:42px;height:42px;
  display:grid;place-items:center;font-size:20px;color:var(--ink);z-index:3;
  box-shadow:0 2px 10px #1b1e2822;right:14px;top:14px;
}

.pd{display:flex;flex-direction:column;max-height:88vh;width:100%}

/* 1. 대표 사진 */
.pd-hero{position:relative;height:278px;flex:none;background:linear-gradient(140deg,#e7eaf2,#cfd6e3)}
.pd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pd-hero-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;font-size:44px;color:#9aa3b5;
}
.pd-hero-empty i{font:400 12px/1.5 var(--font-cjk);font-style:normal}
.pd-tools{position:absolute;right:14px;top:14px;display:flex;gap:9px}
.pd-round{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.9);
  color:var(--ink);display:grid;place-items:center;backdrop-filter:blur(8px);
}
.pd-round .icon{width:20px;height:20px}
.pd-round.saved{color:var(--hot)}
.pd-count{
  position:absolute;right:14px;bottom:14px;background:rgba(20,24,34,.62);color:#fff;
  border-radius:20px;padding:5px 11px;font:400 12px/1.4 var(--font-num);
  font-feature-settings:'tnum' 1;
}

/* 2. 본문 — 모든 줄이 같은 좌측 기준선 */
.pd-body{padding:18px 20px 4px;overflow:auto;flex:1}
.pd-title{font-size:22px;font-weight:700;line-height:1.3;letter-spacing:0;margin:0}
.pd-alt{font-size:15px;font-weight:400;color:#5b6270;margin:7px 0 0;line-height:1.5}
.pd-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pd-badge{background:#f2f4f7;color:#4a5260;font-size:12px;border-radius:4px;padding:3px 8px;line-height:1.5}
.pd-badge.has-award{display:inline-flex;align-items:center;gap:6px}
.pd-award{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#9a6a2f;margin:8px 0 0}
.pd-award i{font-style:normal;color:#c9ab74}
/* 수상 표기 배지 이미지 — 흰 바탕을 그대로 살려 얇은 테두리만 두른다 */
.award-ico{width:15px;height:15px;flex:0 0 auto;object-fit:contain;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.10)}
.pd-badge .award-ico,.pd-award .award-ico{width:16px;height:16px}
/* 등급 수만큼 반복되는 배지 — 한 덩어리로 붙여 개수로 읽히게 한다 */
.award-icons{display:inline-flex;align-items:center;gap:1px;flex:0 0 auto}
.pd-addr{font-size:15px;line-height:1.75;margin:9px 0 0;color:var(--ink)}
.pd-addr a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink);white-space:nowrap}

/* 구분선은 20px 거터를 뚫고 화면 폭 전체를 쓴다 */
.pd-rule{height:1px;background:#e9ebf0;border:0;margin:17px -20px 0}

/* 3. 평점 */
.pd-score{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:15px 0 0;font-size:14px;color:var(--muted)}
.pd-chip{
  background:var(--c-score);color:#fff;font:700 14px/1.3 var(--font-num);
  padding:3px 8px;border-radius:5px 5px 8px;font-feature-settings:'tnum' 1;
}
.pd-chip i{font-style:normal;font-size:11px;font-weight:600;opacity:.85}
.pd-word{color:var(--c-score);font-weight:700;font-size:16px}
.pd-rev{font-size:15px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pd-facts{font-size:16px;line-height:1.75;margin:11px 0 0;color:var(--ink)}

/* 4. 추천 포인트 */
.pd-sec{font-size:20px;font-weight:700;margin:19px 0 0}
.pd-points{display:flex;gap:10px;overflow:auto;margin:12px 0 0;padding-bottom:4px}
.pd-point{
  width:236px;flex:none;border:1px solid #e9ebf0;border-radius:10px;padding:10px;
  display:flex;gap:10px;align-items:flex-start;background:#fff;
}
.pd-tile{width:56px;height:56px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:22px;background:#f1f3f9}
.pd-tile.b{background:#eef1ff}
.pd-tile.g{background:#eaf7f1}
.pd-tile.o{background:#fdf1e8}
.pd-point h3{font-size:15px;font-weight:600;margin:1px 0 2px;line-height:1.45}
.pd-point p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
.pd-fine{font-size:12px;color:#959aa5;margin:14px 0 0;line-height:1.7}

/* 5. 하단 고정 액션바 — 좌우 정렬이 바뀌는 유일한 줄 */
.pd-bar{
  display:flex;align-items:center;gap:12px;flex:none;background:#fff;
  border-top:1px solid var(--line);padding:10px 20px max(12px,env(safe-area-inset-bottom));
}
.pd-bar-left{min-width:0}
.pd-bar-left span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.pd-bar-left b{
  display:block;font-family:var(--font-num);font-feature-settings:'tnum' 1;
  font-size:20px;font-weight:700;line-height:1.3;
}
.pd-cta{
  margin-left:auto;flex:none;height:50px;padding:0 26px;border-radius:8px;
  background:var(--blue);color:#fff;font-size:16px;font-weight:600;
  display:flex;align-items:center;text-decoration:none;
}

/* 목록 카드에서는 같은 평점 부품을 카드 크기에 맞춰 줄인다 */
.clinic-main .pd-score{margin:5px 0 4px;gap:6px;font-size:13px}
.clinic-main .pd-chip{font-size:12px;padding:1px 5px;border-radius:3px 3px 7px}
.clinic-main .pd-chip i{font-size:10px}
.clinic-main .pd-word{font-size:13px}
.clinic-main .pd-rev{font-size:13px}
.clinic-main .pd-score-plain{font-size:13px;color:#7b8390}
/* 목록 카드의 주소는 한 줄로 자른다 — 카드 높이를 고정해 스캔 속도를 지킨다 */
.clinic-loc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:430px){
  .pd-hero{height:236px}
  .pd-title{font-size:21px}
  .pd-point{width:214px}
  .pd-cta{height:48px;padding:0 20px}
}

/* 제품 중문명·영문명 — 이름 아래 보조 표기 */
.product-card .product-en{margin:3px 0 0;font-size:11px;letter-spacing:.2px;color:#9aa1af}
.comparison-grid .product-en{margin:2px 0 8px;color:#9aa1af}
.modal .product-en{margin:4px 0 8px;font-size:12px;color:#9aa1af}