/* ══════════════════════════════════════════════════════════════════════
   당현함 공용 껍데기 · dh-frame.css   (2026-09-29)
   ──────────────────────────────────────────────────────────────────────
   ★ 무엇인가
     인터넷 쪽 18장과 정수기 쪽 409장이 **따로 갖고 있던** 머리띠·햄버거·폰 메뉴·발바닥을
     한 곳에 모은 파일입니다. 화면 427장이 이 파일을 「맨 먼저」 부릅니다.
     디자인보드 값 묶음(:root)도 여기 있습니다 — 두 집안이 같은 이름표를 씁니다.
   ★ 규칙
     · 여기 값을 고치면 427장이 함께 바뀝니다. 고친 뒤 부르는 화면의 ?v= 를 올리세요.
     · 집안마다 달라야 하는 것은 dh-shell.css(인터넷)·dh-brand.css(정수기)에 있고,
       이 파일보다 뒤에 와서 이깁니다. 화면 속 <style> 은 그보다도 뒤입니다.
     · 폰 메뉴는 부품 이름이 두 가지입니다(.mobile-menu · .m-menu). 화면 글은 건드리지 않고
       선택자를 둘 다 적었습니다.
   ══════════════════════════════════════════════════════════════════════ */
: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;
  /* 2026-09-23 — 900 을 보드 값 #0F172A 로 맞췄습니다(전 #191F28).
     보드 「회색 900 = 제목·본문 글자」와 값이 달라 정수기 400장만 조금 옅었습니다(대비 16.6 → 17.9).
     ※ 아래 --dh-gray-950 도 같은 값이 되었습니다(발바닥 바탕). 보드에는 950 이 없으니 나중에 하나로 합쳐도 됩니다. */
  --dh-gray-500:#5F6672; --dh-gray-600:#465368; --dh-gray-700:#333D4B; --dh-gray-900:#0F172A;
  /* 2026-09-18 — 발바닥 배경으로 쓰던 --dh-gray-950 이 정의돼 있지 않아
     정수기 화면 400장의 발바닥이 투명(흰 바탕에 흰 글씨)이 되어 안 보였습니다.
     첫 화면·렌탈과 같은 값으로 채웁니다. */
  --dh-gray-950:#0F172A;
  --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:56px;                     /* 머리띠 높이 — 여백 눈금과 별개(라이브와 같아야 함) */
  --t-nav:14px;                        /* 머리띠 메뉴 글씨 — 라이브 값. 보드 글씨 눈금과 별개 */
  --t-logo:24px; --t-logo-sm:24px;   /* 로고 전용 — 글씨 눈금과 별개 */
  --r-pill:999px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* ── 머리띠 ─────────────────────────────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--c-card);
  box-shadow:0 2px 16px rgba(15,42,90,.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}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:var(--h-touch);
  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;width:37px;height:24px}
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:600;color:var(--c-sub);
  text-decoration:none;white-space:nowrap;transition:.2s}
nav a:hover{background:var(--dh-gray-100)}
nav a[aria-current="page"],nav a.on{color:var(--c-strong);background:var(--c-strong-bg);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}

/* ── 폰 메뉴(햄버거를 누르면 내려오는 목록) ─────────────────────── */
.mobile-menu,.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 32px rgba(11,46,92,.16)}
.mobile-menu.open,.m-menu.open{display:block}
.mobile-menu a,.m-menu a{display:flex;align-items:center;min-height:var(--h-touch);
  font-size:15px;font-weight:600;color:var(--c-title);text-decoration:none;
  border-bottom:1px solid var(--c-line)}
.mobile-menu a:last-child,.m-menu a:last-child{border-bottom:0}

/* ── 발바닥 ─────────────────────────────────────────────────────── */
footer{background:var(--dh-gray-950);color:rgba(255,255,255,.6);padding:40px var(--pad-card);
  font-size:var(--t-sub);font-weight:400;line-height:var(--lh-sub);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:400}
.footer-links a:hover{color:#fff}
.footer-disclaimer{margin-top:16px;font-size:var(--t-min);font-weight:400;
  line-height:var(--lh-min);color:rgba(255,255,255,.35)}


/* ── 발바닥 회사 정보 (js/dh-footer.js 가 그립니다) ───────────────
   2026-09-29: 자바가 style= 로 직접 붙이던 값을 여기로 옮겼습니다. */
.footer-info{font-size:var(--t-sub)}
.footer-info strong{color:rgba(255,255,255,.8)}

/* ── 폰 가로 메뉴 띠 (js/dh-topnav.js 가 만듭니다 · 768 이하에서만) ──
   2026-09-29: 자바 안에 글자로 박혀 있던 모양을 여기로 옮겼습니다.
   2026-09-29: 아래 줄 색을 보드 선 색(--c-line #EEEFF3)으로 맞췄습니다(전 #E5E8EB — 이 줄에만 쓰던 값). */
@media(max-width:768px){
  html.tn-on body{padding-top:44px}
  html.tn-on .hamburger{display:none!important}
  #상단메뉴줄{position:fixed;left:0;right:0;top:var(--h-header, 56px);z-index:900;height:44px;
    background:var(--c-card);border-bottom:1px solid var(--c-line);will-change:transform}
  #상단메뉴줄 .tn-row{display:flex;gap:4px;height:100%;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-left:8px}
  #상단메뉴줄 .tn-row::-webkit-scrollbar{display:none}
  #상단메뉴줄 .tn-row::after{content:"";flex:0 0 8px}
  #상단메뉴줄 a{flex:none;display:flex;align-items:center;padding:0 12px;height:100%;
    font-size:15px;font-weight:600;color:var(--c-sub);text-decoration:none;white-space:nowrap;
    border-bottom:2px solid transparent;box-sizing:border-box}
  #상단메뉴줄 a[aria-current="page"]{color:var(--c-strong);border-bottom-color:var(--c-strong)}
  #상단메뉴줄 a[hidden]{display:none}
  /* 아래에 붙는 줄들이 이 줄에 가리지 않도록 그만큼 내려 붙입니다 */
  html.tn-on .tabbar{top:calc(var(--h-header, 56px) + 44px)}
  html.tn-on .filter-stick{top:calc(var(--h-header, 56px) + 44px)}
  html.tn-on{scroll-padding-top:calc(var(--stick-h, 133px) + 44px)}
}
@media(min-width:769px){#상단메뉴줄{display:none}}

/* ── 폭에 따라 ──────────────────────────────────────────────────── */
@media(min-width:931px){
  .header-inner nav{position:absolute;left:50%;transform:translateX(-50%);
    width:max-content;max-width:none}
}
@media(min-width:769px) and (max-width:880px){
  .header-inner{padding:0 14px}
  nav a{padding:0 7px}
}
@media(max-width:768px){
  nav{display:none}
  .hamburger{display:block}
}
/* ── 휴대폰에서는 한 단 낮춥니다 (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; }
}