/* ══════════════════════════════════════════════════════════════════════
   당현함 브랜드 상세 화면 전용 스타일  ·  dh-brand.css

   ⚠ 이 파일은 브랜드 상세 여섯 장에만 붙입니다.
     rental-coway / rental-sk / rental-cuckoo / rental-lg / rental-chungho / rental-wells

   ⛔ 이미 있는 화면(index.html · rental.html · rental-c.html · plans-*.html · gift.html)에는
     붙이지 마세요. 아래 body 규칙이 그 화면들의 글꼴·크기·바탕색을 통째로 덮습니다.

   값의 정답은 당현함 디자인보드입니다 — 안티그라비티\당현함 디자인보드\dh-tokens.css
   색이나 치수를 바꿀 때는 보드 원본을 먼저 고치고 여기에 옮겨 적습니다.

   고친 뒤에는 부르는 쪽 주소의 ?v= 번호를 올려야 손님 화면에 반영됩니다.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --dh-blue-050:#EFF6FF; --dh-blue-600:#1257C9; --dh-blue-700:#0E45A0;
  /* 주황은 디자인보드에서 **강조 띠 전용** 입니다. 단추에는 쓰지 않습니다.
     050·100·800 은 600 에서 **밝기만 옮겨** 뽑았습니다 (색조 24° · 선명도 100% 그대로).
     800 은 옅은 바탕 위에서 대비 4.83 이라 글자로 읽힙니다. */
  --dh-orange-050:#FFF3EB; --dh-orange-100:#FFDAC2;
  --dh-orange-600:#F26100; --dh-orange-800:#B84900; --dh-navy-900:#0B2E5C;
  --dh-gray-100:#F5F6F8; --dh-gray-200:#EEEFF3; --dh-gray-400:#8A9099;
  --dh-gray-500:#5F6672; --dh-gray-600:#465368; --dh-gray-700:#333D4B; --dh-gray-900:#191F28;
  --dh-white:#FFFFFF; --dh-kakao:#FEE500;

  /* 제품 기능 딱지 전용 — 이 여섯 색은 딱지에만 쓴다 */
  /* 여섯 색 모두 디자인보드 5절의 값 그대로입니다. 여기서 지어내지 마세요.
     글자색 셋(#B4231A·#0C7A54·#A34100)은 보드 빨강·초록·주황과 색조가 같은 진한 판입니다. */
  --fb-cold-bg:#EFF6FF;   --fb-cold-tx:#1257C9;   /* 냉수   5.97 */
  --fb-ice-bg:#F0F9FF;    --fb-ice-tx:#0E45A0;    /* 얼음   8.29 */
  --fb-hot-bg:#FEF2F2;    --fb-hot-tx:#B4231A;    /* 온수   6.01 */
  --fb-pure-bg:#F0FDF4;   --fb-pure-tx:#0C7A54;   /* 정수   5.11 */
  --fb-filter-bg:#ECFDF5;                          /* 나노필터 5.08 · 글자는 정수와 같은 색 */
  --fb-direct-bg:#FFFBEB; --fb-direct-tx:#A34100;  /* 직수형 6.11 */

  --c-strong:var(--dh-blue-600); --c-strong-press:var(--dh-blue-700);
  --c-strong-bg:var(--dh-blue-050); --c-highlight:var(--dh-orange-600);
  --c-highlight-bg:var(--dh-orange-050); --c-highlight-line:var(--dh-orange-100);
  --c-highlight-text:var(--dh-orange-800);
  --c-title:var(--dh-gray-900);
  /* 2026-09-08: 본문 글자를 gray-700 에서 gray-900 으로 올렸습니다(보드 원본도 같이 고침).
     라이브 요금표가 이미 더 진한 검정으로 나가 있어 나란히 놓으면 흐려 보였습니다.
     제목과 본문은 이제 색이 같고 크기·굵기로 구분합니다. */
  --c-body:var(--dh-gray-900);
  /* 2026-09-08: 보조 글자를 gray-500(5.8) 에서 gray-600(7.8) 로 올렸습니다.
     세 곳 실측 — 미소 10.7 · 아정당 6.6 · 우리 5.8 로 우리가 가장 옅었습니다. */
  --c-sub:var(--dh-gray-600); --c-dim:var(--dh-gray-400);
  --c-page:var(--dh-white); --c-card:var(--dh-white);
  --c-line:var(--dh-gray-200); --c-band:var(--dh-navy-900);
  /* 2026-09-09: --c-danger 가 빠져 있어 「특가·한정」 딱지가 색 없이 나왔습니다.
     디자인보드 --dh-c-danger 와 같은 빨강입니다. */
  --c-danger:var(--dh-red-600);
  --c-kakao:var(--dh-kakao);

  /* 2026-09-08 새 디자인보드 눈금입니다. 라이브 요금표를 실측해 짠 계단입니다.
     ★ 요금(--t-money)만 사장님 지시로 지금 것(26px)을 그대로 씁니다 — 보드는 22 입니다.
     괄호 안은 휴대폰(768 이하)에서 쓰는 크기입니다. */
  --t-amount:34px; --lh-amount:40px; --w-amount:900;   /* 폰 24 */
  --t-h1:24px;   --lh-h1:29px;   --w-h1:800;           /* 폰 22 */
  --t-money:26px; --lh-money:34px; --w-money:800;      /* ★ 보드는 22, 우리는 26 */
  --t-h2:20px;   --lh-h2:24px;   --w-h2:800;           /* 폰 18 */
  --t-body:16px; --lh-body:24px; --w-body:400;         /* 폰 15 · 읽는 글 */
  --t-h3:16px;   --lh-h3:22px;   --w-h3:600;
  --t-table:15px; --lh-table:24px; --w-table:400;      /* 폰 14 · 표 칸 */
  --t-sub:13px;  --lh-sub:23px;  --w-sub:500;
  --t-min:12px;  --lh-min:16px;  --w-min:700;

  /* 자간 — 덩어리로 읽히는 글만 좁힙니다. 본문과 표는 건드리지 않습니다 */
  --ls-hero:-1px; --ls-title:-0.5px; --ls-sub:-0.4px; --ls-chip:-0.3px;

  --gap-block:28px;   /* 덩어리끼리 — 라이브 요금표와 같은 값(보드 눈금 밖, 일부러) */
  --pad-screen:16px; --pad-card:20px; --gap-section:32px; --gap-item:8px;
  --x16:64px; --x18:72px; --x28:112px;   /* 새 보드가 더한 큰 여백 */
  --r-chip:4px; --r-control:8px; --r-card:12px;
  --h-control:48px; --h-touch:44px;

  /* 글 한 줄이 너무 길어지지 않도록 라이브 요금표와 같은 860 으로 잡습니다 */
  --w-page:860px; --w-foot:1100px;
  --h-header:64px;                     /* 머리띠 높이 — 여백 눈금과 별개(라이브와 같아야 함) */
  --t-nav:14px;                        /* 머리띠 메뉴 글씨 — 라이브 값. 보드 글씨 눈금과 별개 */
  --t-logo:32px; --t-logo-sm:43px;   /* 로고 전용 — 글씨 눈금과 별개 */
  --r-pill:999px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box}
/* 자리표로 뛸 때 머리띠(64) 아래로 화면 여백만큼 더 내려 앉게 한다 */
html{scroll-padding-top:calc(var(--stick-h,133px) + var(--pad-screen))}
body{
  margin:0; font-family:var(--font); font-size:var(--t-body); line-height:var(--lh-body);
  font-weight:400; color:var(--c-body); background:var(--c-page);
  letter-spacing:-.01em; word-break:keep-all;
  -webkit-tap-highlight-color:transparent;
}
.dh-num{font-variant-numeric:tabular-nums}
a{color:inherit}

/* ── 견본 표시 띠 (실제 페이지에는 없다) ───────────────── */
.mark{background:#111827;color:#fff;text-align:center;font-size:var(--t-sub);font-weight:var(--w-sub);
      line-height:var(--lh-sub);padding:8px 12px;letter-spacing:0}
.mark b{color:#FFD54A}

/* ── 머리띠 ─────────────────────────────────────────────
   ⚠ 아래 머리띠·꼬리말·떠 있는 단추는 라이브(DangHH/rental.html · plans-*.html)에서
     옮겨 온 것입니다. 손님이 같은 방문에서 두 화면을 오가므로 모양이 같아야 합니다.
     ★ 라이브 쪽을 고치면 여기도 같이 고쳐야 합니다 (반대도 마찬가지).
   보드와 다른 점 셋, 일부러 그렇게 두었습니다.
     1) 로고 글씨 크기(32·43)는 글씨 눈금 밖입니다 — 로고는 글이 아니라 브랜드 자산입니다.
     2) 메뉴 누르는 높이를 라이브 34 대신 44 로 올렸습니다 — 보드 '반드시 할 것' 1번.
        글씨 크기·색은 라이브 그대로라 보기에는 같습니다.
     3) 꼬리말 맨 아래 고지는 라이브 11px 대신 12px 입니다 — 보드가 12 미만을 막습니다. */
header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--c-card);
  box-shadow:0 2px 12px rgba(0,0,0,.08)}
.header-inner{position:relative;max-width:1200px;margin:0 auto;padding:0 var(--pad-card);
  height:var(--h-header);display:flex;align-items:center;justify-content:space-between}
/* 2026-09-09: 폰에서 로고 글씨가 PC(32)보다 커지고(43) 그림도 사라졌습니다.
   폰은 메뉴가 접혀 자리가 넉넉하므로 그림을 그대로 두고 크기를 32 로 맞춥니다. */
.logo{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-logo);font-weight:900;
  color:var(--c-strong);text-decoration:none;letter-spacing:-.5px;line-height:1;flex:none}
.logo-mark{flex:none;display:block}
nav{display:flex;gap:4px;align-items:center}
nav a{display:flex;align-items:center;min-height:var(--h-touch);padding:0 12px;
  border-radius:var(--r-control);font-size:var(--t-nav);font-weight:500;color:var(--c-sub);
  text-decoration:none;white-space:nowrap;transition:.2s}
nav a:hover{color:var(--c-strong);background:var(--c-strong-bg)}
nav a[aria-current="page"]{color:var(--c-strong);font-weight:700}
nav a.cta{color:var(--c-strong);font-weight:700}
.hamburger{display:none;width:var(--h-touch);height:var(--h-touch);border:0;background:none;
  padding:12px;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:var(--c-title);
  border-radius:var(--r-chip);margin:4px 0}
.m-menu{display:none;position:fixed;top:var(--h-header);left:0;right:0;z-index:999;
  background:var(--c-card);padding:12px var(--pad-card);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.m-menu.open{display:block}
.m-menu a{display:flex;align-items:center;min-height:var(--h-touch);
  font-size:var(--t-body);font-weight:500;color:var(--c-title);text-decoration:none;
  border-bottom:1px solid var(--c-line)}
.m-menu a:last-child{border-bottom:0}
/* 넓으면 메뉴를 머리띠 한가운데에 둔다. 좁으면 로고와 붙어 버려서 931 부터만.
   width:max-content 가 없으면 글자가 두 줄로 접힌다(라이브에서 실제로 겪은 함정). */
@media(min-width:931px){
  .header-inner nav{position:absolute;left:50%;transform:translateX(-50%);
    width:max-content;max-width:none}
}
@media(max-width:930px){ nav{display:none} .hamburger{display:block} }

/* 머리띠가 화면에 못 박혀 있어 본문이 그 아래로 숨는다. 그만큼 자리를 비운다. */
main{padding-top:var(--h-header)}

/* ── 브랜드 고르는 줄 (머리띠 밑에 붙어 따라옴) ────────
   라이브 요금표(plans-*.html)의 통신사 탭과 같은 자리·같은 몫입니다. */
.tabbar{position:sticky;top:var(--h-header);z-index:500;background:var(--c-card);
  border-bottom:1px solid var(--c-line)}
.tabs{max-width:var(--w-page);margin:0 auto;padding:12px var(--pad-screen);
  display:flex;gap:var(--gap-item);justify-content:center;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;white-space:nowrap;display:flex;align-items:center;
  min-height:var(--h-touch);padding:0 16px;border-radius:var(--r-card);cursor:pointer;
  background:var(--c-card);border:1px solid var(--c-line);color:var(--c-sub);
  font-family:inherit;font-size:var(--t-h3);font-weight:700;letter-spacing:-.3px;
  text-decoration:none;transition:.2s}
.tab:hover{border-color:var(--c-strong);color:var(--c-strong)}
.tab:active{transform:translateY(1px) scale(.985)}
.tab[aria-current="page"]{background:var(--c-strong);border-color:var(--c-strong);color:#fff}
@media(max-width:560px){ .tabs{justify-content:flex-start;padding:12px var(--pad-screen)} }

/* ── 페이지 제목 칸 ────────────────────────────────────
   라이브 요금표와 같은 짜임 — 파란 첫 화면 없이 제목 한 줄로 시작합니다. */
.page-head{max-width:var(--w-page);margin:0 auto;padding:24px var(--pad-screen) 20px}
.page-head h1{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:900;
  letter-spacing:-1px;margin:0;text-wrap:balance}
.page-head h1 em{font-style:normal;color:var(--c-strong)}

/* ── ※ 로 시작하는 작은 주석 ───────────────────────────
   조건·기준은 강조 상자가 아니라 표 아래 작은 주석으로 둡니다. */
.note{margin:16px 0 0;padding:16px 20px;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-card);
  font-size:var(--t-sub);font-weight:var(--w-sub);line-height:22px;color:var(--c-sub);word-break:keep-all}
.note b{color:var(--c-body);font-weight:700}

/* ── 아래 고정 신청 막대 · 떠 있는 상담 단추 ────────────
   라이브와 같은 것입니다. 비교함 띠가 떠 있으면 막대는 잠시 비킵니다(아래 규칙). */
.mobile-cta-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:950;
  padding:8px var(--pad-screen);background:var(--c-card);box-shadow:0 -3px 16px rgba(0,0,0,.12)}
.mobile-cta-btn{display:flex;align-items:center;justify-content:center;width:100%;
  height:var(--h-control);border-radius:var(--r-card);text-decoration:none;color:#fff;
  font-size:var(--t-h3);font-weight:800;letter-spacing:-.3px;background:var(--c-strong);
  box-shadow:0 8px 20px rgba(18,87,201,.45);transition:transform .08s ease,background .2s}
.mobile-cta-btn:active{background:var(--c-strong-press);transform:translateY(2px) scale(.96);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.22)}
.floating-btns{position:fixed;right:20px;bottom:24px;display:flex;flex-direction:column;
  gap:12px;z-index:900}
.float-btn{width:56px;height:56px;border-radius:var(--r-pill);display:flex;
  align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.18);transition:transform .08s ease,box-shadow .08s ease}
.float-btn:active{transform:translateY(1px) scale(.985)}
.float-phone{background:var(--c-strong);color:#fff}
.float-kakao{background:var(--c-kakao);color:#3C1E1E}
@media(min-width:769px){ .floating-btns{bottom:24px;right:24px} }
@media(max-width:768px){
  .mobile-cta-bar{display:block}
  .floating-btns{bottom:80px}
  /* 비교함 띠가 떠 있으면 신청 막대는 비키고, 떠 있는 단추는 띠 위로 올라간다 */
  body.cmp-on .mobile-cta-bar{display:none}
  body.cmp-on .floating-btns{bottom:calc(var(--cmp-bar-h,88px) + 8px)}
}

/* ── 꼬리말 ────────────────────────────────────────────
   라이브(rental.html · plans-*.html)와 같은 것입니다. */
footer{background:var(--dh-gray-950);color:rgba(255,255,255,.6);
  padding:40px var(--pad-card);font-size:var(--t-sub);font-weight:var(--w-sub);line-height:24px;margin-top:var(--gap-section)}
.footer-inner{max-width:var(--w-foot);margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  gap:20px;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo{display:flex;align-items:center;gap:8px;font-size:var(--t-h2);font-weight:900;color:#fff}
.footer-mark{flex:none;display:block}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{display:flex;align-items:center;min-height:var(--h-touch);
  color:rgba(255,255,255,.6);text-decoration:none;font-size:var(--t-sub);font-weight:var(--w-sub)}
.footer-links a:hover{color:#fff}
.footer-info strong{color:rgba(255,255,255,.8)}
.footer-disclaimer{margin-top:16px;font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);
  color:rgba(255,255,255,.3)}

/* ── 본문 틀 ──────────────────────────────────────────── */
/* 칸(section)은 화면 폭을 그대로 쓰고, 글 폭은 그 안의 .wrap 이 잡는다.
   ⚠ 예전에는 100vw 음수 여백으로 회색 바탕을 넓혔는데, 100vw 에 세로 스크롤바 폭이
     들어 있어 가로 스크롤이 8px 생겼다. 머리띠가 sticky 라 overflow-x:hidden 으로는
     못 막는다(sticky 가 같이 죽는다). 그래서 구조를 이렇게 바꿨다. */
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--pad-screen)}
section{padding:var(--gap-section) 0}
/* 2026-09-08: 제품 목록 칸의 회색 바탕을 없앴습니다(사장님 지시).
   화면 전체가 흰 바탕입니다 — 제품 사진들의 배경이 흰색이라 그래야 들쭉날쭉해 보이지 않습니다. */
h1{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:800;color:var(--c-title);
  letter-spacing:var(--ls-hero);
  margin:0 0 8px;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:800;color:var(--c-title);
  letter-spacing:var(--ls-title);margin:0 0 4px}
.lead{color:var(--c-sub);font-size:var(--t-body);margin:0}
/* 문장 전체를 강조색으로 (어디서 신청해도 요금이 같다는 결론) */
.lead b{color:var(--c-strong);font-weight:700}
.back{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-sub);font-weight:var(--w-sub);
  color:var(--c-sub);text-decoration:none;margin-bottom:12px}
.back:hover{color:var(--c-strong)}

/* ── 브랜드 이동 단추 ─────────────────────────────────── */
.brands{display:flex;gap:var(--gap-item);overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;margin-top:16px}
.brands a{flex:none;min-height:var(--h-touch);display:flex;align-items:center;
  padding:0 16px;border:1px solid var(--c-line);background:var(--c-card);
  border-radius:var(--r-control);text-decoration:none;color:var(--c-body);
  font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:600;white-space:nowrap;transition:.15s}
.brands a:hover{border-color:var(--c-strong);color:var(--c-strong)}
.brands a.now{background:var(--c-strong);border-color:var(--c-strong);color:#fff}

/* ── 안내 상자 ────────────────────────────────────────── */
.notice{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--pad-card);margin-top:20px}
.notice ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.notice li{font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-body);color:var(--c-body)}
.notice li b{color:var(--c-title)}

/* ── 갈래 고르개 · 더 보기 ────────────────────────────────
   제품이 브랜드마다 최대 36종이라 한 번에 다 펼치면 손님이 지칩니다.
   먼저 갈래로 좁히고, 여섯 개씩 펼쳐 보게 합니다.
   고른 칸·안 고른 칸 모양은 디자인보드 5절 그대로입니다. */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
@media(max-width:560px){ .picks{grid-template-columns:repeat(2,1fr)} }
.pick-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:76px;padding:12px 8px;cursor:pointer;
  background:var(--c-card);border:1.5px solid var(--c-line);border-radius:var(--r-card);
  color:var(--c-body);font-family:inherit;font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:600;
  transition:border-color .15s,background-color .15s,color .15s}
.pick-btn svg{width:24px;height:24px;flex:none}
.pick-btn .pick-num{font-size:var(--t-min);font-weight:var(--w-min);font-weight:500;color:var(--c-sub)}
.pick-btn:hover{border-color:var(--c-strong)}
.pick-btn.on{background:var(--c-strong-bg);border-color:var(--c-strong);color:var(--c-strong)}
.pick-btn.on .pick-num{color:var(--c-strong)}

/* 보조 단추 — 흰 바탕이 아니라 연파랑 바탕에 파란 글씨(보드 5절) */
/* 보드의 '보조 단추' 그대로입니다 — 흰 바탕 + 파란 테두리 1.5px + 파란 글씨, 높이 44.
   (2026-09-08 이 단추 때문에 보드 규칙을 정리했습니다. 옛 규칙이던 '연파랑 바탕 + 테두리 없음'은
    회색 칸 위에서 밝기 차이가 1.07배뿐이라 단추가 아예 안 보였습니다) */
.more-btn{
  display:block;width:100%;max-width:320px;margin:20px auto 0;
  min-height:var(--h-touch);padding:0 20px;cursor:pointer;
  background:var(--c-card);border:1.5px solid var(--c-strong);
  border-radius:var(--r-control);
  color:var(--c-strong);font-family:inherit;font-size:var(--t-h3);font-weight:700;
  transition:background-color .15s,color .15s}
.more-btn:hover{background:var(--c-strong);color:#fff}
.more-btn:active{transform:translateY(1px) scale(.99)}

/* ── 제품 카드 ────────────────────────────────────────── */
.goods{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
@media(max-width:1000px){ .goods{grid-template-columns:1fr} }
/* ⚠ flex 안의 칸은 기본값이 '내용만큼 늘어남'이라, 넓은 요금표가 카드를 밖으로 밀어냈다.
   그러면 표가 자기 자리에서 밀리는 게 아니라 카드째 화면 밖으로 나가 글까지 잘린다.
   자식들에게 min-width:0 을 줘야 카드 안에서 접히고, 표만 옆으로 밀린다. */
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--pad-card);display:flex;flex-direction:column;gap:16px;
  min-width:0;overflow:hidden}
.card > *{min-width:0;max-width:100%}
.card-top{display:flex;gap:16px;align-items:flex-start}
.shot{flex:none;width:112px;height:132px;display:flex;align-items:center;justify-content:center}
.shot img{max-width:100%;max-height:100%;object-fit:contain}
.info{flex:1;min-width:0}
.name{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:700;color:var(--c-title);margin:0}
.model{font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub);margin:4px 0 0;
  font-variant-numeric:tabular-nums}

/* 프로모션 딱지 — 뜻이 같은 것끼리 한 색 (디자인보드 5절).
   ⚠ 색을 새로 지어내지 말 것. 아래 다섯 갈래 안에서만 씁니다. */
.promos{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.promo{font-size:var(--t-min);font-weight:var(--w-min);line-height:1;font-weight:600;padding:4px 8px;
  border-radius:var(--r-chip);color:#fff}
.promo.half{background:var(--c-strong)}   /* 반값 계열 */
.promo.off {background:var(--c-band)}     /* 요금할인 · 면제 */
.promo.deal{background:var(--c-danger)}   /* 특가 · 한정 */
.promo.pick{background:var(--c-sub)}      /* 신상 · 인기 */
.promo.etc {background:var(--c-line);color:var(--c-sub)}

/* 기능 딱지 — 여섯만 색이 있고 나머지는 회색 (디자인보드 5절) */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tag{font-size:var(--t-min);font-weight:var(--w-min);line-height:1;font-weight:600;padding:4px 8px;border-radius:var(--r-chip)}
.tag.cold  {background:var(--fb-cold-bg);  color:var(--fb-cold-tx)}
.tag.hot   {background:var(--fb-hot-bg);   color:var(--fb-hot-tx)}
.tag.pure  {background:var(--fb-pure-bg);  color:var(--fb-pure-tx)}
.tag.ice   {background:var(--fb-ice-bg);   color:var(--fb-ice-tx)}
.tag.filter{background:var(--fb-filter-bg);color:var(--fb-pure-tx)}
.tag.direct{background:var(--fb-direct-bg);color:var(--fb-direct-tx)}
.tag.etc   {background:var(--c-line);      color:var(--c-sub)}

/* ⚠ body 에 word-break:keep-all 이 걸려 있어, 가운뎃점으로 길게 이어진 기능 설명이
   낱말 하나처럼 취급돼 카드 밖으로 삐져나갔다(폰에서 실제로 잘렸다). 그래서 여기만 푼다. */
.spec{font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub);margin:8px 0 0;
  overflow-wrap:anywhere;word-break:break-word}
.color{font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub);margin:4px 0 0;
  overflow-wrap:anywhere;word-break:break-word}

/* 가장 낮은 요금 — 손님이 카드에서 가장 먼저 보는 숫자.
   보드 규칙상 34px 짜리 큰 금액(--t-amount)은 화면에 하나뿐이라 여기서는 h3 크기로 둡니다. */
.least{margin:0;padding:12px;background:var(--c-strong-bg);border-radius:var(--r-control);
  font-size:var(--t-sub);font-weight:var(--w-sub);color:var(--c-body);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.least b{font-size:var(--t-h3);font-weight:800;color:var(--c-strong);margin-left:4px}
/* 제품 상세 단추 — 보조 단추(흰 바탕 + 파란 글씨)로 둔다.
   색이 든 단추는 화면에 파랑 하나뿐이라는 보드 규칙을 지키기 위해서다. */
.detail-btn{flex:none;min-height:var(--h-touch);display:inline-flex;align-items:center;gap:4px;
  padding:0 16px;cursor:pointer;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-control);color:var(--c-strong);
  font-family:inherit;font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:700;transition:.15s}
.detail-btn:hover{border-color:var(--c-strong)}
.detail-btn:active{transform:translateY(1px) scale(.99)}
.detail-btn svg{width:14px;height:14px}

/* 요금표 — 머리글과 값의 열을 맞추고, 표를 카드 바닥에 붙인다.
   칸이 많아 좁은 화면에서는 표만 옆으로 밀립니다(페이지는 안 밀림). */
.fee{border-top:1px solid var(--c-line);padding-top:12px;margin-top:auto}
/* 칸이 많아 좁은 화면에서는 표만 옆으로 밀린다. 오른쪽 끝을 흐리게 해서
   '더 있다'는 것을 알려 준다(가려진 칸이 있는 줄 모르고 지나치는 일을 막는다). */
.fee-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* ⚠ 보드의 "그러데이션 금지"는 바탕·단추 이야기입니다. 이 둘은 색이 아니라
     '오른쪽 끝을 서서히 지워 더 있다고 알려 주는' 장치라 예외로 씁니다. */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
/* 다 보이는 표는 흐리게 하지 않는다 */
.fee-scroll.all{-webkit-mask-image:none;mask-image:none}
.fee table{width:100%;min-width:340px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fee th,.fee td{padding:8px;font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-sub);text-align:right;
  vertical-align:top;white-space:nowrap}
/* 첫 칸(관리 방식)은 표를 옆으로 밀어도 자리에 남는다.
   안 그러면 폰에서 값만 보이고 '무슨 조건의 값인지' 알 수 없다. */
.fee tbody th{text-align:left;color:var(--c-sub);font-weight:500;white-space:normal;
  min-width:104px;padding-left:0;position:sticky;left:0;background:var(--c-card)}
.fee thead th:first-child{position:sticky;left:0;background:var(--c-card);z-index:1}
.fee thead th{color:var(--c-sub);font-weight:600;border-bottom:1px solid var(--c-line);
  font-size:var(--t-min);font-weight:var(--w-min);white-space:nowrap}
.fee thead th:first-child{text-align:left;padding-left:0}
.fee tbody tr+tr th,.fee tbody tr+tr td{border-top:1px solid var(--c-line)}
.fee td.none{color:var(--c-dim);font-weight:400}
/* 값 한 칸 = 취소선 원래값 / 할인값 / 할인 이름 */
.fee .was{display:block;font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-dim)}
.fee .now-price{display:block;font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-sub);
  font-weight:800;color:var(--c-strong)}
.fee .won{display:block;font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-sub);
  font-weight:700;color:var(--c-title)}
.fee .why{display:block;font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);
  color:var(--c-sub);font-weight:500}
.fee-note{font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub);margin:8px 0 0}

/* ── 설득 그림 ────────────────────────────────────────── */
/* 설득 자리 — 짧은 글 한 덩이 + 그림 한 장을 한 묶음으로 둔다.
   글은 파워컨텐츠 원고에서 그 그림에 해당하는 대목만 줄여 옮겼다.
   그림 속 글씨는 검색에 안 잡히므로, 같은 말을 글로도 한 번 적어 둔다.

   ⚠ 그림마다 가로세로 비가 달라도 '바깥 테두리'는 하나로 맞춘다.
     그림 자체에 테두리를 주면 720 / 460 이 번갈아 나와 지그재그로 보였다. */
/* 묶음(글+그림)끼리 벌리는 여백 28 · 묶음 안 12 — 라이브 요금표(plans-*.html)가 쓰는 값입니다.
   요금표가 세로로 쓰는 여백은 8 · 12 · 16 · 24 · 28 · 40 여섯 가지뿐입니다. */
.pics{display:flex;flex-direction:column;gap:var(--gap-block);margin-top:8px}
.pics .one{display:flex;flex-direction:column;gap:12px;width:100%}
.pics p{margin:0;color:var(--c-body);font-size:var(--t-body);line-height:var(--lh-body)}
.pics p b{color:var(--c-title);font-weight:700}
/* 그림 배경이 흰색이라 테두리를 두르면 액자처럼 떠 보인다. 테두리 없이 글과 이어 붙인다 */
.pics figure{margin:0;width:100%;background:var(--c-card);overflow:hidden;
  display:flex;justify-content:center}
.pics img{width:100%;height:auto;display:block}
/* 세로로 긴 그림은 카드 안에서만 좁게 — 720 으로 늘리면 화면 두 개 높이를 잡아먹는다 */
.pics figure.tall img{max-width:460px}

/* ── 상담 단추 ────────────────────────────────────────── */
.talk{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.btn{min-height:var(--h-control);display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:0 24px;border-radius:var(--r-control);font-weight:700;font-size:var(--t-h3);
  text-decoration:none;transition:.15s;flex:1 1 220px}
.btn-primary{background:var(--c-strong);color:#fff}
.btn-primary:hover{background:var(--c-strong-press)}
.btn-primary:active{transform:translateY(1px) scale(.985)}
.btn-kakao{background:var(--c-kakao);color:#3C1E1E}
.btn-kakao:hover{box-shadow:0 2px 6px rgba(0,0,0,.16)}
.btn-kakao:active{transform:translateY(1px) scale(.985);box-shadow:none}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ── 제품 상세 보는 창 ────────────────────────────────────
   개인정보처리방침 창과 같은 방식(화면 위에 덮는 창)입니다.
   그림자는 보드 4절이 정한 팝업 값 하나만 씁니다. */
.pop{display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(11,46,92,.55);padding:16px;
  align-items:center;justify-content:center}
.pop.open{display:flex}
.pop-box{background:var(--c-card);border-radius:var(--r-card);width:100%;max-width:800px;
  max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 8px 32px rgba(11,46,92,.16)}
.pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--c-line);flex:none}
.pop-head h3{margin:0;font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:800;color:var(--c-title)}
.pop-head p{margin:4px 0 0;font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub)}
.pop-head p b{color:var(--c-strong);font-weight:700}
.pop-close{flex:none;width:var(--h-touch);height:var(--h-touch);border:0;cursor:pointer;
  background:var(--dh-gray-100);border-radius:var(--r-control);
  color:var(--c-sub);font-size:var(--t-h3);font-family:inherit;
  display:flex;align-items:center;justify-content:center}
.pop-close:hover{background:var(--c-line);color:var(--c-title)}
.pop-body{padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--c-card)}
/* ★ height:auto 가 없으면 창이 760보다 좁아질 때 가로만 줄고 세로는 그대로 남아
   그림이 눌려 보입니다(2026-09-09 고침). 태그의 height 값이 그대로 쓰이기 때문입니다. */
.pop-body img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}
.pop-note{margin:0;padding:16px 20px;font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);
  color:var(--c-sub);border-top:1px solid var(--c-line);background:var(--c-card)}
body.pop-open{overflow:hidden}

/* == 비교함 =============================================================
   카드에서 담고, 화면 아래 띠에서 확인하고, 창에서 나란히 견준다.
   담은 것은 브라우저에 남으므로 브랜드를 옮겨도 그대로다. */
.card-acts{display:flex;gap:8px;flex:none}
.cmp-btn{min-height:var(--h-touch);display:inline-flex;align-items:center;gap:4px;
  padding:0 16px;cursor:pointer;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-control);color:var(--c-body);
  font-family:inherit;font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:700;transition:.15s}
.cmp-btn svg{width:14px;height:14px}
.cmp-btn:hover{border-color:var(--c-strong);color:var(--c-strong)}
.cmp-btn.on{background:var(--c-strong);border-color:var(--c-strong);color:#fff}
.cmp-btn:active{transform:translateY(1px) scale(.99)}

/* 아래 따라다니는 띠 — 흰 바탕에 파란 주 단추 하나(보드 5절) */
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:1500;
  background:var(--c-card);border-top:1px solid var(--c-line);
  box-shadow:0 -2px 12px rgba(11,46,92,.08);
  transform:translateY(110%);transition:transform .2s}
.cmp-bar.on{transform:none}
.cmp-bar-in{max-width:var(--w-page);margin:0 auto;padding:12px var(--pad-screen);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cmp-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.cmp-chip{display:inline-flex;align-items:center;gap:4px;
  padding:4px 4px 4px 12px;background:var(--c-strong-bg);border-radius:var(--r-pill);
  font-size:var(--t-min);font-weight:var(--w-min);font-weight:600;color:var(--c-strong)}
.cmp-x{width:24px;height:24px;border:0;background:none;cursor:pointer;
  color:var(--c-strong);font-size:var(--t-min);font-weight:var(--w-min);font-family:inherit;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill)}
.cmp-x:hover{background:rgba(18,87,201,.12)}
.cmp-acts{display:flex;align-items:center;gap:8px;flex:none}
.cmp-clear{min-height:var(--h-touch);padding:0 16px;cursor:pointer;
  background:none;border:0;color:var(--c-sub);font-family:inherit;
  font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:600;border-radius:var(--r-control)}
.cmp-clear:hover{background:var(--dh-gray-100);color:var(--c-title)}
.cmp-go{flex:none;min-height:var(--h-control);padding:0 24px;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--t-h3);font-weight:700;border-radius:var(--r-control)}

/* 알림 — 담을 수 있는 수를 넘겼을 때만 잠깐 뜬다 */
/* ⚠ 알림을 아래에 두었더니 담긴 목록 띠와 겹쳐 글이 안 읽혔다(폰에서 실제로 겪음).
     그래서 머리띠 바로 아래로 올린다. */
.cmp-toast{position:fixed;left:50%;top:112px;transform:translate(-50%,-12px);
  z-index:1600;max-width:calc(100% - 32px);
  padding:12px 20px;border-radius:var(--r-control);
  background:var(--c-band);color:#fff;font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.cmp-toast.on{opacity:1;transform:translate(-50%,0)}

/* 비교 창 =============================================================
   견줘 본 곳 ㄱ 에서 배운 것 : 표보다 '말로 된 요약'을 먼저 보여 준다
   견줘 본 곳 ㄴ 에서 배운 것 : 좁은 화면에서는 가로형 카드가 정보를 더 담는다
   우리가 더한 것     : 요금 낮은 순으로 줄 세우고, 폰에서는 표를 '항목 카드'로 바꾼다
                       (표를 옆으로 밀어야 하는 것이 폰에서 가장 읽기 나빴다) */
.cmp-body{padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* 1. 말로 된 요약 */
.cmp-sum{margin:0;padding:16px 20px;background:var(--c-strong-bg)}
.cmp-sum h4{margin:0 0 8px;font-size:var(--t-h3);line-height:var(--lh-h3);
  font-weight:800;color:var(--c-title)}
.cmp-sum ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.cmp-sum li{font-size:var(--t-body);line-height:var(--lh-body);color:var(--c-body)}
.cmp-sum li b{color:var(--c-strong);font-weight:800}
.cmp-basis{margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(18,87,201,.16);
  font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub)}
.cmp-basis b{color:var(--c-body)}

/* 2. 제품 카드 — 요금 낮은 순 */
.cmp-cards{display:flex;flex-direction:column;gap:8px;padding:16px 20px}
.cmp-card{display:flex;align-items:center;gap:16px;padding:12px;
  border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-card);
  position:relative}
.cmp-card.first{border-color:var(--c-strong);background:var(--c-strong-bg)}
.cmp-rank{position:absolute;top:12px;right:12px;
  padding:4px 8px;border-radius:var(--r-chip);
  background:var(--c-line);color:var(--c-sub);
  font-size:var(--t-min);font-weight:var(--w-min);font-weight:700}
.cmp-card.first .cmp-rank{background:var(--c-strong);color:#fff}
.cmp-card img{flex:none;width:64px;height:80px;object-fit:contain}
.cmp-card-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cmp-brand{font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub)}
.cmp-name{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:700;color:var(--c-title);
  padding-right:56px}
.cmp-price{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:800;color:var(--c-title)}
.cmp-card.first .cmp-price{color:var(--c-strong)}
.cmp-gap{font-size:var(--t-min);font-weight:var(--w-min);line-height:var(--lh-min);color:var(--c-sub);font-weight:600}
.cmp-x2{align-self:flex-start;margin-top:4px;min-height:32px;padding:0 12px;cursor:pointer;
  background:var(--dh-gray-100);border:0;border-radius:var(--r-control);
  color:var(--c-sub);font-family:inherit;font-size:var(--t-min);font-weight:var(--w-min);font-weight:600}
.cmp-x2:hover{background:var(--c-line);color:var(--c-title)}

/* 3. 항목별 견주기 */
.cmp-h{margin:8px 20px 0;font-size:var(--t-h3);line-height:var(--lh-h3);
  font-weight:800;color:var(--c-title)}
.cmp-table{border-collapse:collapse;width:calc(100% - 40px);margin:12px 20px 20px;
  font-variant-numeric:tabular-nums}
.cmp-table th,.cmp-table td{border-bottom:1px solid var(--c-line);padding:12px 8px;
  font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-sub);text-align:center;vertical-align:top}
.cmp-table thead td{font-weight:700;color:var(--c-title)}
.cmp-table tbody th{text-align:left;color:var(--c-sub);font-weight:600;white-space:nowrap}
.cmp-corner{text-align:left;color:var(--c-sub);font-weight:600}
.cmp-table .best{color:var(--c-strong);font-weight:800}
.cmp-no{color:var(--c-dim)}
.cmp-sub{display:block;margin-top:4px;font-size:var(--t-min);font-weight:var(--w-min);color:var(--c-sub);font-weight:400}
.cmp-fn{display:inline-block;margin:0 4px 4px 0;padding:4px 8px;border-radius:var(--r-chip);
  font-size:var(--t-min);font-weight:var(--w-min);font-weight:600;background:var(--c-line);color:var(--c-dim)}
.cmp-fn.yes{background:var(--c-strong-bg);color:var(--c-strong)}
.cmp-tag{display:inline-block;margin:0 4px 4px 0;padding:4px 8px;border-radius:var(--r-chip);
  font-size:var(--t-min);font-weight:var(--w-min);font-weight:600;background:var(--c-strong);color:#fff}

/* ⚠ 폰에서는 표를 옆으로 밀어야 해서 가장 읽기 나빴다.
     그래서 표를 버리고 '항목 하나에 카드 하나'로 세로로 쌓는다.
     값 앞에는 어느 제품 것인지 이름을 붙여 준다(data-이름). */
@media(max-width:760px){
  .cmp-table{display:block;width:auto;margin:12px 16px 20px;border-collapse:separate}
  .cmp-table thead{display:none}
  .cmp-table tbody{display:flex;flex-direction:column;gap:8px}
  .cmp-table tr{display:block;border:1px solid var(--c-line);border-radius:var(--r-card);
    padding:12px;background:var(--c-card)}
  .cmp-table tbody th{display:block;border:0;padding:0 0 8px;
    font-size:var(--t-min);font-weight:var(--w-min);color:var(--c-sub)}
  .cmp-table td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    border:0;padding:8px 0;text-align:right}
  .cmp-table td + td{border-top:1px solid var(--c-line)}
  .cmp-table td::before{content:attr(data-이름);flex:1;min-width:0;text-align:left;
    font-size:var(--t-sub);font-weight:var(--w-sub);color:var(--c-body);font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmp-sub{text-align:right}
  .cmp-cards{padding:16px}
  .cmp-sum{padding:16px}
  .cmp-h{margin:8px 16px 0}
}

/* 비교 창 안 상담 칸 — 이탈을 막는 자리라 번호 하나만 받는다 */
.cmp-cta{border-top:1px solid var(--c-line);padding:16px 20px;background:var(--dh-gray-100);flex:none}
.cmp-cta h4{margin:0 0 4px;font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:800;color:var(--c-title)}
.cmp-cta p{margin:0 0 12px;font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-sub);color:var(--c-sub)}
.cmp-form{display:flex;gap:8px;flex-wrap:wrap}
.cmp-form input{flex:1 1 200px;min-width:0;min-height:var(--h-control);
  padding:0 16px;border:1px solid var(--c-line);border-radius:var(--r-control);
  background:var(--c-card);font-family:inherit;font-size:var(--t-body);color:var(--c-title)}
.cmp-form input:focus{outline:none;border-color:var(--c-strong)}
.cmp-form button{flex:none;min-height:var(--h-control);padding:0 24px;border:0;cursor:pointer;
  background:var(--c-strong);color:#fff;border-radius:var(--r-control);
  font-family:inherit;font-size:var(--t-h3);font-weight:700}
.cmp-form button:hover{background:var(--c-strong-press)}
.cmp-form button:active{transform:translateY(1px) scale(.99)}
.cmp-msg{margin:8px 0 0;font-size:var(--t-sub);font-weight:var(--w-sub);line-height:var(--lh-sub);font-weight:600}
.cmp-msg.bad{color:var(--c-danger)}
.cmp-msg.good{color:var(--c-good)}
.cmp-ways{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cmp-ways a{flex:1 1 160px;min-height:var(--h-touch);display:inline-flex;align-items:center;
  justify-content:center;gap:4px;border-radius:var(--r-control);text-decoration:none;
  font-size:var(--t-sub);font-weight:var(--w-sub);font-weight:700}
.cmp-ways .way-tel{background:var(--c-card);border:1px solid var(--c-line);color:var(--c-strong)}
.cmp-ways .way-tel:hover{border-color:var(--c-strong)}
.cmp-ways .way-kakao{background:var(--c-kakao);color:#3C1E1E}
.cmp-ways .way-kakao:hover{box-shadow:0 2px 6px rgba(0,0,0,.16)}

/* 비교 창은 넓게 쓴다 */
#비교창 .pop-box{max-width:1000px}

/* 띠가 떠 있을 때 본문 끝이 가리지 않도록 — 실제 띠 높이를 부품이 재서 넣어 준다 */
body.cmp-on{padding-bottom:var(--cmp-bar-h,calc(var(--h-control) + var(--gap-section)))}

@media(max-width:560px){
  .cmp-bar-in{gap:8px}
  .cmp-acts{width:100%}
  .cmp-go{flex:1}
  .card-acts{width:100%}
  .card-acts button{flex:1;justify-content:center}
  /* 담긴 것이 넷이면 세 줄까지 차지해 화면을 가렸다. 한 줄로 두고 옆으로 밀어 보게 한다 */
  .cmp-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    -webkit-overflow-scrolling:touch}
  .cmp-chip{flex:none}
  /* 상담 단추가 짧게 붙어 있어 아래 카톡·전화 단추와 모양이 어긋났다.
     폰에서는 셋 다 가로로 꽉 채워 한 벌로 보이게 한다. */
  .cmp-form{flex-direction:column}
  .cmp-form input,.cmp-form button{flex:1 1 auto;width:100%}
  .cmp-ways a{flex:1 1 100%}
}

/* ── 휴대폰에서는 한 단 낮춥니다 (2026-09-08 새 보드) ───────
   ★ 요금(--t-money)은 사장님 지시로 폰에서도 26 을 지킵니다. */
@media(max-width:768px){
  :root{ --t-amount:24px; --t-h1:22px; --t-h2:18px; --t-body:15px; --t-table:14px; }
}