@charset "UTF-8";
/* ===================================================================
   플래닛메소샵 — 디자인 시스템

   색 쓰는 규칙 (중요)
     노랑  : 카카오톡 버튼과 로고에만. 그 외에는 쓰지 않습니다.
     보라  : 사이트 포인트색 (LIVE 배지, 단계 번호, 체크 표시 등)
     잉크  : 글자와 어두운 영역
     빨강/파랑 : 시세 오르내림에만

   굵기  : 400 / 600 / 700 세 가지. (800은 시세 숫자 하나뿐)
   자간  : 글자가 클수록 좁게 — 토큰으로 고정
   모서리: 14 / 10 / 8, 버튼만 둥근 알약
   그림자: 한 단계만
   =================================================================== */

:root {
  /* ── 잉크 · 종이 ── */
  /* 가독성을 위해 보조 글자색을 전부 한 단계씩 진하게 했습니다 */
  --ink:        #111318;
  --ink-70:     #363b43;   /* 본문  — 대비 10.2:1 */
  --ink-50:     #555b66;   /* 보조  — 대비  7.0:1 */
  --ink-35:     #767d88;   /* 라벨  — 대비  4.7:1 */
  --ink-20:     #b4b9c0;

  /* 셀렉트 화살표 — 테마별로 색만 갈아끼웁니다 */
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23767d88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");

  --paper:      #ffffff;
  --paper-2:    #f2f4f8;
  --line:       #e4e7ec;
  --line-strong:#d0d4db;

  /* ── 포인트색 (보라) ── */
  --accent:      #5b63d3;
  --accent-dk:   #464dba;
  --accent-wash: #eef0fc;

  /* ── 카카오 노랑 — 버튼·로고 전용 ── */
  --kakao:      #fee500;
  --kakao-dk:   #ebd400;
  --kakao-ink:  #14161a;

  /* ── 밤하늘 (첫 화면 배경) ── */
  --night:      #0e1230;
  --night-2:    #151a3d;

  /* ── 시세 ── */
  --up:         #c0392f;
  --down:       #2f5fc0;
  --star:       #e0a82e;   /* 후기 별점 */

  /* ── 모양 ── */
  --r-lg: 14px;
  --r:    10px;
  --r-sm:  8px;
  --sh:   0 1px 2px rgba(20, 22, 26, .04), 0 10px 28px rgba(20, 22, 26, .07);
  --sh-up:0 2px 6px rgba(10, 14, 40, .22), 0 18px 48px rgba(10, 14, 40, .3);

  /* ── 글자 ── */
  --font: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --ls-display: -.035em;
  --ls-head:    -.025em;
  --ls-body:    -.005em;
  --ls-label:    .02em;

  --maxw: 1080px;
}

/* ───────── 기본 ───────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-70);
  font-family: var(--font);
  font-size: 16.5px;          /* 가독성 — 15.5 → 16.5 */
  font-weight: 400;
  line-height: 1.78;          /* 줄간격도 넉넉하게 */
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: anywhere;
  padding-bottom: 72px;

  /* 아주 옅은 점 격자 — 글자를 방해하지 않을 만큼만 */
  background-color: #f7f8fc;
  background-image: radial-gradient(rgba(20, 22, 40, .04) 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
}
@media (min-width: 861px) { body { padding-bottom: 0; } }

h1, h2, h3 {
  margin: 0; color: var(--ink);
  font-weight: 700; line-height: 1.34; letter-spacing: var(--ls-head);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
table { border-collapse: collapse; width: 100%; }
b, strong { font-weight: 700; color: var(--ink); }

.ticker__price, .total__v, .bar__price, .rateTable td,
.metric strong, .metric dd, .ticker__stats dd, .mobileBar__rate strong,
.ticker__axis, .chart__axis, .rv__date, .ticker__delta, .rateCard__time {
  font-variant-numeric: tabular-nums;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 720px; }

.pill, .field__label, .metric span, .metric dt, .ticker__stats dt,
.ticker__unit, .ticker__pair, .total__k, .rateTable th, .chartBox__head,
.rv__who, .ticker__foot, .ticker__axis, .chart__axis {
  letter-spacing: var(--ls-label);
}

/* ───────── 버튼 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: var(--ls-body);
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn__ico { display: inline-flex; width: 18px; height: 18px; }
.btn__ico svg { width: 100%; height: 100%; }

/* 노랑은 여기에만 */
.btn--kakao { background: var(--kakao); color: var(--kakao-ink); }
.btn--kakao:hover { background: var(--kakao-dk); }

.btn--plain { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn--plain:hover { border-color: var(--ink); }
/* 밤하늘 위에 놓이는 보조 버튼 */
.hero .btn--plain {
  background: rgba(255, 255, 255, .08); color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.hero .btn--plain:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255,255,255,.5); }

.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 15px 28px; font-size: 15.5px; }
.btn--block { display: flex; width: 100%; }
.btn.is-disabled { opacity: .5; }

/* ───────── 공지 ───────── */
/* 공지 → 헤더 → 첫 화면이 하나의 밤하늘로 이어지도록 같은 색을 씁니다. */
.notice { background: var(--night-2); }
.notice__inner { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 20px; }
.notice__tag {
  flex: none; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 2px 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: var(--ls-label);
}
.notice__text { font-size: 13.5px; color: var(--ink-20); }

/* ───────── 헤더 ───────── */
/* 맨 위에서는 밤하늘과 같은 색, 스크롤하면 흰색으로 바뀝니다. */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--night-2);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.header.is-stuck {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }

/* 어두울 때(맨 위) 글자색 */
.header .logo__text strong { color: #fff; }
.header .logo__text small  { color: #8d94b8; }
.header .nav a { color: #b9bfdd; }
.header .nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.header .navToggle { background: transparent; border-color: rgba(255, 255, 255, .25); }
.header .navToggle span { background: #fff; }

/* 흰색으로 바뀐 뒤 */
.header.is-stuck .logo__text strong { color: var(--ink); }
.header.is-stuck .logo__text small  { color: var(--ink-35); }
.header.is-stuck .nav a { color: var(--ink-50); }
.header.is-stuck .nav a:hover { color: var(--accent); background: var(--accent-wash); }
.header.is-stuck .navToggle { background: var(--paper); border-color: var(--line-strong); }
.header.is-stuck .navToggle span { background: var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
/* 브랜드 마크 — favicon.svg 를 그대로 씁니다 (로고를 바꾸면 전부 따라 바뀝니다) */
.logo__mark { display: block; width: 34px; height: 34px; border-radius: var(--r-sm); }
.logo__text { display: flex; flex-direction: column; line-height: 1.26; }
.logo__text strong { font-size: 17px; font-weight: 700; letter-spacing: var(--ls-head); }
.logo__text small { font-size: 11.5px; font-weight: 400; color: var(--ink-35); letter-spacing: 0; }

.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a { padding: 9px 13px; border-radius: var(--r); font-size: 14.5px; font-weight: 600; color: var(--ink-50); }
.nav a:hover { color: var(--accent); background: var(--accent-wash); }
.header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav + .header__actions { margin-left: 10px; }
.navToggle {
  display: none; width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.navToggle span { display: block; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; }

/* ───────── 첫 화면 — 밤하늘 (층을 나눠 깊이감) ───────── */
.hero {
  position: relative; overflow: hidden;
  /* 아래 여백은 시세 보드가 바로 받으므로 짧게 둡니다 */
  padding: 66px 0 40px;
  color: #fff;
  background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 68%, #0b0e26 100%);
}
.hero .wrap { position: relative; z-index: 2; }

.sky { position: absolute; inset: -80px 0 0; pointer-events: none; z-index: 0; }
.sky > * { position: absolute; inset: 0; display: block; will-change: transform; }

/* 가운데 빛무리 — 가장 뒤 */
.sky__glow {
  background: radial-gradient(900px 440px at 50% 6%, rgba(104, 112, 232, .5), transparent 72%);
}

/* 별 세 층 — 뒤로 갈수록 작고 흐리게 */
.sky__stars { opacity: .9; }
.sky__stars--far {
  background-image:
    radial-gradient(1px 1px at 30px 40px,  rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 170px 110px, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 260px 60px,  rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 90px 190px,  rgba(255,255,255,.25), transparent);
  background-size: 320px 230px;
}
.sky__stars--mid {
  background-image:
    radial-gradient(1.5px 1.5px at 60px 90px,  rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 230px 30px, rgba(198,206,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 150px 200px, rgba(255,255,255,.45), transparent);
  background-size: 290px 260px;
}
.sky__stars--near {
  background-image:
    radial-gradient(2.5px 2.5px at 110px 60px, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px     at 300px 170px, rgba(190,200,255,.7), transparent),
    radial-gradient(2.5px 2.5px at 40px 230px,  rgba(255,255,255,.6), transparent);
  background-size: 420px 320px;
}

/* 바닥 지평선 빛 — 가장 앞 */
.sky__horizon {
  top: auto; height: 160px;
  background: linear-gradient(180deg, transparent, rgba(91, 99, 211, .22));
}

/* 시세판을 뺀 뒤 — 가운데 정렬 한 단 구성 */
.hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }

.pill {
  display: inline-block; margin-bottom: 18px;
  font-size: 13px; font-weight: 600; color: #d6dbff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 6px 14px; border-radius: 999px;
}
.hero__title {
  color: #fff;
  font-size: clamp(30px, 5.4vw, 46px);
  font-weight: 700; letter-spacing: var(--ls-display); line-height: 1.32;
  margin-bottom: 26px;                           /* 밑줄과 설명이 붙지 않게 */
  text-shadow: 0 2px 20px rgba(8, 10, 30, .5);   /* 별 위에서도 또렷하게 */
}
.hero__title em {
  font-style: normal; color: #fff;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 2px;
}
.hero__desc {
  font-size: 16.5px; color: #c7cdea; max-width: 52ch; margin: 0 auto 28px;
  text-shadow: 0 1px 12px rgba(8, 10, 30, .45);
}
.hero__desc b { color: #fff; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.hero__meta { font-size: 13.5px; color: #9aa2c6; }

/* ───────── 실시간 시세판 ───────── */
.ticker {
  position: relative; z-index: 2;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 400px; width: 100%; margin: 0 auto;

  /* 여러 겹 그림자로 밤하늘 위에 떠 있는 느낌 */
  box-shadow:
    0 1px 1px rgba(10, 14, 40, .3),
    0 6px 14px rgba(10, 14, 40, .28),
    0 18px 38px rgba(10, 14, 40, .34),
    0 40px 80px rgba(10, 14, 40, .3);
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.ticker.is-tiltable { transition: transform .12s ease-out, box-shadow .25s ease; }
.ticker.is-tiltable:hover {
  box-shadow:
    0 2px 2px rgba(10, 14, 40, .3),
    0 10px 20px rgba(10, 14, 40, .3),
    0 28px 54px rgba(10, 14, 40, .38),
    0 56px 100px rgba(10, 14, 40, .34);
}
.ticker__head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.ticker__pair { font-size: 12.5px; font-weight: 600; color: var(--ink-50); }
.ticker__pair b { color: var(--ink); }
.ticker__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #fff;
  background: var(--accent); border-radius: 999px; padding: 3px 9px;
}
.ticker__live .dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.ticker__main { padding: 20px 18px 2px; }
.ticker__unit { font-size: 12px; font-weight: 600; color: var(--ink-35); }
.ticker__price { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; }
.ticker__price strong {
  font-size: clamp(34px, 6.6vw, 42px); font-weight: 800;
  letter-spacing: var(--ls-display); color: var(--ink); line-height: 1.1;
}
.ticker__price strong.is-up   { animation: flashUp .9s ease; }
.ticker__price strong.is-down { animation: flashDown .9s ease; }
@keyframes flashUp   { 0% { color: var(--up); }   100% { color: var(--ink); } }
@keyframes flashDown { 0% { color: var(--down); } 100% { color: var(--ink); } }
.ticker__price .won { font-size: 17px; font-weight: 600; color: var(--ink-35); }
.ticker__delta { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--ink-35); }
.ticker__delta.is-up { color: var(--up); }
.ticker__delta.is-down { color: var(--down); }
/* 변동률이 없으면 칸을 접어 빈 줄이 남지 않게 합니다 */
.ticker__delta[hidden] { display: none; }


.ticker__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 14px 14px 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.ticker__stats > div { background: var(--paper-2); padding: 11px 13px; }
.ticker__stats dt { font-size: 11px; font-weight: 600; color: var(--ink-35); }
.ticker__stats dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }

.ticker__foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 11px 18px;
  background: var(--paper-2); border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink-35);
}
.ticker__ago { color: var(--ink); }
.ticker__ago::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  margin-right: 6px; margin-top: -2px;
}
.ticker__auto { margin-left: auto; }

/* ───────── 섹션 ───────── */
.section { padding: 70px 0; }
.section--soft { background: rgba(226, 230, 240, .5); border-block: 1px solid var(--line); }
.section--chat { background: rgba(226, 230, 240, .5); border-block: 1px solid var(--line); }

/* 가운데 한 군데만 밤하늘 — 글이 짧고 설득이 필요한 '안전메소' 섹션 */
.section--night {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0c1029 0%, var(--night) 45%, #0c1029 100%);
}
.section--night .wrap { position: relative; z-index: 2; }
.sky--still { inset: 0; }
.sky--still .sky__glow {
  background: radial-gradient(760px 320px at 50% 50%, rgba(104, 112, 232, .32), transparent 72%);
}
.section--night .secHead__title { color: #fff; text-shadow: 0 2px 18px rgba(8, 10, 30, .5); }
.section--night .secHead__desc { color: #c7cdea; }
/* 밤하늘 위에서는 카드가 더 또렷하게 떠 보이도록 */
.section--night .cmp {
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 2px 6px rgba(8, 10, 30, .3), 0 20px 46px rgba(8, 10, 30, .36);
}
.section--night .cmp--bad { background: #f4f5f9; }
.section--night .principle {
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 2px 6px rgba(8, 10, 30, .26), 0 14px 32px rgba(8, 10, 30, .3);
}

.secHead { max-width: 640px; margin-bottom: 34px; }
.secHead--center { margin-left: auto; margin-right: auto; text-align: center; }
.secHead__title { font-size: clamp(24px, 3.8vw, 31px); letter-spacing: var(--ls-display); margin-bottom: 11px; }
.secHead__desc { font-size: 16px; color: var(--ink-50); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.card__title { font-size: 16px; margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ───────── 시세 카드 (본문) ───────── */
.rateCard { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh); }
.rateCard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #fff;
  background: var(--accent); border-radius: 999px; padding: 3px 9px;
}
/* 점에서 파동이 퍼져 나가게 — 숫자가 살아 있다는 느낌을 줍니다 */
.live .dot {
  position: relative; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: livePulse 1.8s ease-in-out infinite;
}
.live .dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid #fff; animation: liveRing 1.8s ease-out infinite;
}
@keyframes liveRing {
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(1.9);  opacity: 0; }
  100% { transform: scale(1.9);  opacity: 0; }
}
/* 연동이 끊겼을 때는 "실시간"이라고 말하지도, 깜빡이지도 않습니다 */
.live.is-off { background: var(--paper-2); color: var(--ink-50); }
.live.is-off .dot { background: var(--ink-35); animation: none; }
.live.is-off .dot::after { display: none; }
.rateCard__unit { font-size: 13px; font-weight: 600; color: var(--ink-50); }
.rateCard__time { margin-left: auto; font-size: 12.5px; color: var(--ink-35); }

/* 본문 시세 섹션의 큰 가격 */
.bigPrice {
  background: var(--accent-wash); border: 1px solid #dde0f8;
  border-radius: var(--r); padding: 20px 22px; text-align: center;
}
.bigPrice__k { font-size: 12.5px; font-weight: 600; color: var(--ink-50); letter-spacing: var(--ls-label); }
.bigPrice__v { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 4px 0 4px; }
.bigPrice__v strong {
  font-size: clamp(32px, 6.4vw, 42px); font-weight: 800;
  letter-spacing: var(--ls-display); color: var(--accent-dk);
  font-variant-numeric: tabular-nums;
}
.bigPrice__v span { font-size: 18px; font-weight: 600; color: var(--ink-50); }
.bigPrice__sub { font-size: 13px; color: var(--ink-50); }

.bars { display: grid; gap: 10px; }
.bar { border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; background: var(--paper); }
.bar--ours { border-color: var(--accent); background: var(--accent-wash); }
.bar__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bar__name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.bar__tag { font-size: 11px; font-weight: 600; letter-spacing: var(--ls-label); padding: 2px 9px; border-radius: 999px; }
.bar__tag--blue { background: var(--accent); color: #fff; }
.bar__tag--gray { background: var(--paper-2); color: var(--ink-35); border: 1px solid var(--line); }
.bar__price { margin-left: auto; display: flex; align-items: baseline; gap: 3px; }
.bar__price strong { font-size: clamp(23px, 4.6vw, 29px); font-weight: 700; letter-spacing: var(--ls-display); color: var(--ink); }
.bar__price span { font-size: 14px; font-weight: 600; color: var(--ink-35); }
.bar__track { height: 5px; border-radius: 999px; background: rgba(20,22,26,.08); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 999px; background: var(--ink-20); transition: width .5s ease; }
.bar--ours .bar__fill { background: var(--accent); }

.verdict {
  margin-top: 13px; padding: 12px 16px;
  background: var(--accent-wash); border: 1px solid #d9ddf8; border-radius: var(--r);
  font-size: 13.5px; font-weight: 600; color: var(--accent-dk); text-align: center;
}
.verdict::before { content: "✓"; font-weight: 700; margin-right: 7px; }

.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 16px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.metric { background: var(--paper); padding: 13px 14px; }
.metric span, .metric dt { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-35); }
.metric strong, .metric dd { display: block; margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.metric strong.is-up, .metric dd.is-up { color: var(--up); }
.metric strong.is-down, .metric dd.is-down { color: var(--down); }

.chartBox { margin-top: 18px; }
.chartBox__top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.chartBox__head { font-size: 13px; font-weight: 600; color: var(--ink-50); }
.chartBox__head i { font-style: normal; color: var(--ink-35); font-weight: 400; }

/* 기간 선택 */
.periods { margin-left: auto; display: flex; gap: 4px; background: var(--paper-2); border-radius: 999px; padding: 3px; }
.period {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-50);
}
.period:hover { color: var(--ink); }
.period.is-on { background: var(--paper); color: var(--accent-dk); box-shadow: 0 1px 2px rgba(20,22,26,.12); }

.chart svg { display: block; width: 100%; height: 120px; }
.chart__axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-35); margin-top: 3px; }
.chart__empty { height: 70px; display: grid; place-items: center; font-size: 12.5px; color: var(--ink-35); }

.srcLink { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--accent); border-bottom: 1px solid var(--accent-wash); }
.srcLink:hover { border-color: var(--accent); }

.alertBox {
  margin-top: 14px; padding: 12px 15px;
  background: #fdf6e3; border: 1px solid #ecdfb8; border-radius: var(--r);
  font-size: 13px; color: #6f5a12; line-height: 1.68;
}
.alertBox b { color: #4e3f07; }

/* ═════════ 시세 보드 — 화면 끝까지 꽉 채움 ═════════
   제목 없이 첫 화면 바로 아래에 붙어, 가격이 가장 먼저 눈에 들어오게 합니다. */
.rateBand { background: #0e1230; }
.rateBand__inner { width: 100%; }

.rateBand .rateCard--board {
  border: 0; border-radius: 0; box-shadow: none;
  /* 배경은 끝까지, 내용은 본문과 같은 폭으로 가운데 정렬 */
  padding: 40px max(20px, calc((100% - var(--maxw)) / 2)) 44px;
}
.rateBand .rateCard__head { padding-bottom: 18px; }

/* 다크 보드 공통 */
.rateCard--board {
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(91, 99, 211, .35), transparent 70%),
    linear-gradient(180deg, #151a3d 0%, #0e1230 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 2px 8px rgba(10, 14, 40, .25), 0 20px 48px rgba(10, 14, 40, .3);

  /* 어두운 바탕에서는 상승/하락 색을 밝게 — 그래프 선까지 같이 바뀝니다 */
  --up:   #ff8b8b;
  --down: #8db4ff;
}
.rateCard--board .rateCard__head { border-bottom-color: rgba(255, 255, 255, .12); }
.rateCard--board .rateCard__unit { color: #c7cdea; }
.rateCard--board .rateCard__time { color: #8d94b8; }

.rateCard--board .bigPrice {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.rateCard--board .bigPrice__k { color: #9aa2c6; }
.rateCard--board .bigPrice__v strong { color: #fff; }
.rateCard--board .bigPrice__v span { color: #9aa2c6; }
.rateCard--board .bigPrice__sub { color: #8d94b8; }

.rateCard--board .metrics { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.rateCard--board .metric { background: #161b3c; }
.rateCard--board .metric span, .rateCard--board .metric dt { color: #8d94b8; }
.rateCard--board .metric strong, .rateCard--board .metric dd { color: #fff; }
.rateCard--board .metric strong.is-up { color: #ff8b8b; }
.rateCard--board .metric strong.is-down { color: #8db4ff; }

.rateCard--board .chartBox__head { color: #9aa2c6; }
.rateCard--board .chart__axis { color: #8d94b8; }
.rateCard--board .periods { background: rgba(255, 255, 255, .08); }
.rateCard--board .period { color: #b9bfdd; }
.rateCard--board .period:hover { color: #fff; }
.rateCard--board .period.is-on { background: rgba(255,255,255,.95); color: var(--accent-dk); }

/* ═════════ 시세 카드 — 대안 C : 좌우 분할 ═════════
   왼쪽에 가격, 오른쪽에 큰 그래프. 그래프가 주인공이 됩니다. */
@media (min-width: 860px) {
  .rateCard--split .rateCard__body {
    display: grid; grid-template-columns: 300px 1fr;
    column-gap: 28px; align-items: start;
  }
  .rateCard--split .rateCard__left { border-right: 1px solid var(--line); padding-right: 28px; }
  .rateCard--split .metrics { grid-template-columns: 1fr; margin-top: 14px; }
  .rateCard--split .chartBox { margin-top: 0; }
  .rateCard--split .chart svg { height: 210px; }
}
.rateCard--split .bigPrice {
  background: transparent; border: none; padding: 0; text-align: left;
}
.rateCard--split .bigPrice__v { justify-content: flex-start; }
.rateCard--split .bigPrice__v strong { font-size: clamp(34px, 7vw, 46px); }

/* ───────── 계산기 ───────── */
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-50); margin-bottom: 8px; }
.field__row { display: flex; gap: 8px; }
.input, .select, .input option, .select option { font-family: var(--font); }
.input, .select {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 13px 15px; font-size: 16px; font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-body);
}
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

/* 기본 화살표는 글자에 바짝 붙고 테두리에 잘려서, 직접 그려 넣습니다 */
.select {
  width: auto; flex: none; min-width: 132px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: var(--chev);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 11px 7px;
}
.select::-ms-expand { display: none; }

.quickRow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.quick {
  background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink-50);
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.quick:hover { border-color: var(--accent); color: var(--accent); }
.quick.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.total { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 14px; text-align: center; }
.total__k { font-size: 12px; font-weight: 600; color: var(--ink-35); }
.total__v { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 4px 0; }
.total__v strong { font-size: clamp(29px, 6vw, 36px); font-weight: 700; letter-spacing: var(--ls-display); color: var(--ink); }
.total__v span { font-size: 17px; font-weight: 600; color: var(--ink-35); }
.total__sub { font-size: 12.5px; color: var(--ink-35); }

.rateTable { font-size: 14.5px; }
.rateTable th { font-size: 11.5px; font-weight: 600; color: var(--ink-35); text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--line-strong); }
.rateTable th:nth-child(n+2), .rateTable td:nth-child(n+2) { text-align: right; }
.rateTable td { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; color: var(--ink-70); }
.rateTable td:first-child { font-weight: 600; color: var(--ink); }
.rateTable td strong { font-weight: 600; }
.rateTable td:last-child { font-size: 12.5px; color: var(--ink-35); }
.rateTable tr:last-child td { border-bottom: 0; }

.noteList { margin-top: 17px; display: grid; gap: 7px; }
.noteList li { font-size: 13px; color: var(--ink-50); padding-left: 17px; position: relative; }
.noteList li::before { content: "·"; position: absolute; left: 5px; color: var(--accent); font-weight: 700; }

/* ───────── 절차 ───────── */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; }
.step__num {
  display: grid; place-items: center; margin-bottom: 14px;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
}
.step__body h3 { font-size: 16.5px; margin-bottom: 7px; }
.step__body p { font-size: 14px; color: var(--ink-50); }
.payNote {
  margin-top: 18px; padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--kakao);
  font-size: 14px; color: var(--ink-70);
}

/* ───────── 비교 ───────── */
.compare { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
.cmp { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; }
.cmp--bad { background: var(--paper-2); }
.cmp--good { border-color: var(--accent); box-shadow: var(--sh); }
.cmp__flag {
  position: absolute; top: -11px; left: 22px;
  background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: var(--ls-label);
  padding: 4px 13px; border-radius: 999px;
}
.cmp h3 { font-size: 18px; margin-bottom: 17px; }
.cmp--bad h3 { color: var(--ink-50); }
.cmp--good h3 { color: var(--accent-dk); }
.cmp ul { display: grid; gap: 11px; }
.cmp li { font-size: 14.5px; color: var(--ink-50); padding-left: 26px; position: relative; }
.cmp li::before {
  position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
.cmp li.no::before { content: "✕"; background: #f4e8e7; color: var(--up); }
.cmp li.ok::before { content: "✓"; background: var(--accent); color: #fff; }

.principles { display: grid; grid-template-columns: 1fr; gap: 14px; }
.principle { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.principle__ico {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-sm); background: var(--accent-wash);
  color: var(--accent); margin-bottom: 14px;
}
.principle__ico svg { width: 18px; height: 18px; }
.principle h3 { font-size: 16px; margin-bottom: 7px; }
.principle p { font-size: 13.5px; color: var(--ink-50); }

/* ───────── 신뢰 근거 ───────── */
.trustStats {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  max-width: 880px; margin: 0 auto;
}
.trustStat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 22px; text-align: center;
}
.trustStat__k { display: block; font-size: 13px; font-weight: 600; color: var(--ink-35); letter-spacing: var(--ls-label); }
.trustStat__v {
  display: block; margin: 6px 0 4px;
  font-size: clamp(28px, 5vw, 34px); font-weight: 700;
  letter-spacing: var(--ls-display); color: var(--accent-dk);
  font-variant-numeric: tabular-nums;
}
.trustStat__sub { display: block; font-size: 13px; color: var(--ink-50); }

.proofs {
  max-width: 880px; margin: 34px auto 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
}
.proofs__title { font-size: 18px; margin-bottom: 8px; }
.proofs__desc { font-size: 14.5px; color: var(--ink-50); margin-bottom: 20px; }
.proofs__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.proof { margin: 0; }
.proof img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-2);
}
.proof figcaption { margin-top: 9px; font-size: 13px; color: var(--ink-35); text-align: center; }

@media (min-width: 720px) {
  .trustStats { grid-template-columns: repeat(3, 1fr); }
  .proofs__grid { grid-template-columns: 1fr 1fr; }
}

/* ───────── 후기 ───────── */
.reviews { display: grid; gap: 16px; }
.rv--chat { display: flex; gap: 10px; align-items: flex-start; }
.rv--chat .rv__avatar {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-sm); background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700;
}
.rv--chat .rv__body { max-width: 88%; }
.rv--chat .rv__who { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-50); }
.rv--chat .rv__bubble {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); border-top-left-radius: 4px;
  padding: 13px 16px; font-size: 14.5px; line-height: 1.7; color: var(--ink-70);
}
.rv--chat .rv__meta { display: flex; align-items: center; gap: 9px; margin-top: 6px; padding-left: 3px; }
.rv--chat .rv__stars { font-size: 12px; color: var(--star); letter-spacing: 1px; }
.rv--chat .rv__date { font-size: 11.5px; color: var(--ink-35); }
.rv__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--ls-label);
  padding: 2px 8px; border-radius: 999px;
  background: #fdf6e3; border: 1px solid #ecdfb8; color: #6f5a12;
}
.rv--chat.is-sample .rv__bubble { border-style: dashed; border-color: var(--line-strong); }
#reviews .alertBox { margin: 0 0 20px; }

/* ───────── 약속 / 고지 ───────── */
.promise {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px;
}
.promise__lead {
  font-size: 17px; font-weight: 600; color: var(--ink);
  line-height: 1.75; letter-spacing: var(--ls-head);
}
.promise__sub {
  margin-top: 12px;
  font-size: 15px; color: var(--ink-50); line-height: 1.8;
}
.promise__note {
  margin-top: 18px; padding: 16px 18px;
  background: var(--paper-2); border-left: 3px solid var(--ink-20);
  border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-50); line-height: 1.8;
}
.promise__list { margin-top: 22px; display: grid; gap: 12px; }
.promise__list li {
  position: relative; padding-left: 34px;
  font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.6;
}
.promise__list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

/* ───────── PC용 QR 안내창 ───────── */
.qrModal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.qrModal[hidden] { display: none; }
.qrModal__back { position: absolute; inset: 0; background: rgba(10, 14, 40, .6); backdrop-filter: blur(3px); }
.qrModal__box {
  position: relative; width: 100%; max-width: 360px; text-align: center;
  background: var(--paper); border-radius: var(--r-lg); padding: 30px 26px 24px;
  box-shadow: 0 10px 30px rgba(10, 14, 40, .3), 0 40px 90px rgba(10, 14, 40, .35);
}
.qrModal__x {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border: none; background: transparent;
  font-size: 26px; line-height: 1; color: var(--ink-35); cursor: pointer; border-radius: 50%;
}
.qrModal__x:hover { background: var(--paper-2); color: var(--ink); }
.qrModal__title { font-size: 19px; margin-bottom: 10px; }
.qrModal__desc { font-size: 14px; color: var(--ink-50); line-height: 1.7; }
.qrModal__img {
  display: block; width: 240px; height: 240px; margin: 18px auto 14px;
  border: 1px solid var(--line); border-radius: var(--r);
}
.qrModal__id { font-size: 14px; color: var(--ink-50); margin-bottom: 16px; }
.qrModal__id b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ───────── Q&A ───────── */
.faq { display: grid; gap: 9px; }
.faqItem { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faqItem[open] { border-color: var(--accent); }
.faqItem summary {
  display: flex; align-items: center; gap: 11px; padding: 16px 18px;
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: var(--ls-head);
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary:hover { background: var(--accent-wash); }
.faqItem__q { flex: none; font-weight: 700; color: var(--ink-35); }
.faqItem[open] .faqItem__q { color: var(--accent); }
.faqItem__ico { flex: none; margin-left: auto; width: 12px; height: 12px; position: relative; }
.faqItem__ico::before, .faqItem__ico::after { content: ""; position: absolute; background: var(--ink-35); border-radius: 2px; transition: transform .18s; }
.faqItem__ico::before { left: 0; top: 5px; width: 12px; height: 2px; }
.faqItem__ico::after { left: 5px; top: 0; width: 2px; height: 12px; }
.faqItem[open] .faqItem__ico::before, .faqItem[open] .faqItem__ico::after { background: var(--accent); }
.faqItem[open] .faqItem__ico::after { transform: scaleY(0); }
.faqItem__a { padding: 0 18px 18px 42px; }
.faqItem__a p { font-size: 14px; color: var(--ink-50); }

/* ───────── 마지막 CTA — 밤하늘 ───────── */
.finalCta {
  position: relative; overflow: hidden; padding: 72px 0; text-align: center;
  background:
    radial-gradient(700px 300px at 50% 120%, rgba(91, 99, 211, .5), transparent 70%),
    linear-gradient(180deg, #0b0e26 0%, var(--night) 100%);
}
.finalCta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 50px,  rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 190px 110px, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px   at 120px 30px,   rgba(198,206,255,.4), transparent);
  background-size: 260px 180px; opacity: .7;
}
.finalCta .wrap { position: relative; z-index: 1; }
.finalCta__inner { display: grid; justify-items: center; gap: 14px; }
.finalCta h2 { font-size: clamp(22px, 3.8vw, 29px); color: #fff; letter-spacing: var(--ls-display); }
.finalCta p { font-size: 15px; color: #aeb5d6; }
.finalCta__hours { font-size: 12.5px; color: #7c84ab; }

/* ───────── 푸터 ───────── */
.footer { background: #0b0e26; color: #8d94b8; padding: 44px 0 38px; }
.footer__inner { display: grid; gap: 24px; }
.footer__inner strong { font-size: 16.5px; color: #fff; font-weight: 700; }
.footer__inner > div > p { font-size: 13px; margin-top: 6px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.footer__nav a { font-size: 13px; }
.footer__nav a:hover { color: #fff; }
.footer__meta { display: grid; gap: 8px; }
.footer__meta p { font-size: 12px; color: #6b7299; }
.footer__disclaimer {
  padding: 14px 16px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r); line-height: 1.7;
}

/* ───────── 모바일 하단 바 ───────── */
.mobileBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
}
.mobileBar__rate { display: flex; flex-direction: column; line-height: 1.28; }
.mobileBar__rate span { font-size: 11px; font-weight: 600; color: var(--ink-35); }
.mobileBar__rate strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.mobileBar__btn { margin-left: auto; padding: 11px 20px; }
@media (min-width: 861px) { .mobileBar { display: none; } }

/* ───────── 깊이감 — 카드가 떠오르는 효과 ───────── */
.card, .step, .principle, .cmp, .faqItem, .rateCard, .rv--chat .rv__bubble {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}
@media (hover: hover) {
  .step:hover, .principle:hover, .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20, 22, 40, .05), 0 16px 34px rgba(20, 22, 40, .12);
    border-color: var(--line-strong);
  }
  .cmp--good:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(91, 99, 211, .1), 0 18px 38px rgba(91, 99, 211, .2);
  }
  .rateCard:hover { box-shadow: 0 2px 4px rgba(20, 22, 40, .05), 0 18px 40px rgba(20, 22, 40, .13); }
  .rv--chat:hover .rv__bubble { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 22, 40, .1); }
  .faqItem:hover { border-color: var(--line-strong); }
}

/* ───────── 가독성 — 작은 글자 키우기 ───────── */
.notice__text { font-size: 14px; }
.nav a { font-size: 15px; }
.metric span, .metric dt, .ticker__stats dt { font-size: 12px; }
.metric strong, .metric dd, .ticker__stats dd { font-size: 15.5px; }
.ticker__unit, .ticker__pair, .total__k { font-size: 13px; }
.ticker__foot { font-size: 12.5px; }
.ticker__axis, .chart__axis { font-size: 11.5px; }
.rateTable { font-size: 15.5px; }
.rateTable th { font-size: 12.5px; }
.rateTable td:last-child { font-size: 13.5px; }
.noteList li { font-size: 14px; }
.step__body p, .principle p, .faqItem__a p { font-size: 15px; }
.cmp li { font-size: 15.5px; }
.rv--chat .rv__bubble { font-size: 15.5px; }
.rv--chat .rv__who { font-size: 13px; }
.rv--chat .rv__date, .ticker__delta { font-size: 13.5px; }
.footer__meta p, .footer__disclaimer { font-size: 13px; }
.footer__nav a { font-size: 14px; }
.secHead__desc, .hero__meta { line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════
   전체 밤하늘 톤  ──  <body class="night"> 를 붙이면 켜집니다
   (끄려면 index.html 의 body 에서 class="night" 만 지우면 원래대로)

   어두운 바탕에서 긴 글이 눈을 피로하게 하지 않도록
   본문 글자는 순백(#fff)이 아니라 살짝 눌러 썼습니다.
   ═══════════════════════════════════════════════════════════════ */
body.night {
  --paper:       #171d40;   /* 카드 면 */
  --paper-2:     #1d2450;   /* 한 단 밝은 면 */
  --line:        rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);

  --ink:     #ffffff;
  --ink-70:  #cbd1e6;       /* 본문 — 순백보다 눈이 덜 피로합니다 */
  --ink-50:  #a7aecb;
  --ink-35:  #9aa2c2;       /* 라벨 — 4.2:1 이어서 한 단 밝혔습니다 */
  --ink-20:  #8a92b4;       /* 공지 문구가 3.4:1 이었습니다 */

  --accent-wash: rgba(91, 99, 211, .18);
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23b6bdd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");

  color: var(--ink-70);
  background-color: #0e1230;

  /* 큰 빛무리 두 개 + 점 격자 — 평평해 보이지 않게 */
  background-image:
    radial-gradient(900px 620px at 12% 14%, rgba(91, 99, 211, .16), transparent 70%),
    radial-gradient(820px 560px at 88% 62%, rgba(104, 112, 232, .11), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: auto, auto, 20px 20px;
  background-attachment: fixed, fixed, fixed;
}

/* 별 — 페이지 전체에 깔리고, 스크롤해도 그 자리에 머뭅니다 (하늘 아래를 지나가는 느낌) */
body.night::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px   at 30px 40px,   rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px   at 170px 110px, rgba(255,255,255,.3),  transparent),
    radial-gradient(1px 1px   at 260px 60px,  rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 60px 190px,  rgba(255,255,255,.5),  transparent),
    radial-gradient(1.5px 1.5px at 230px 30px,  rgba(198,206,255,.45), transparent),
    radial-gradient(2px 2px   at 110px 260px, rgba(255,255,255,.4),  transparent),
    radial-gradient(2px 2px   at 330px 170px, rgba(190,200,255,.35), transparent);
  background-size: 320px 230px, 320px 230px, 320px 230px,
                   290px 260px, 290px 260px,
                   420px 320px, 420px 320px;
  opacity: .85;
}

/* ── 한 페이지처럼 이어지게: 섹션 경계선과 색 단차 제거 ── */
body.night .section--soft,
body.night .section--chat { background: transparent; border-block: 0; }
body.night .rateBand { background: transparent; }

/* 안전메소 구간만 살짝 깊게 — 다만 위아래를 바탕색으로 녹여 선이 안 생기게 */
body.night .section--night {
  background: linear-gradient(180deg,
    rgba(10, 13, 38, 0) 0%, rgba(10, 13, 38, .85) 22%,
    rgba(10, 13, 38, .85) 78%, rgba(10, 13, 38, 0) 100%);
}
body.night .section--night .sky { display: none; }   /* 전체 별과 겹치지 않게 */

/* 첫 화면도 바탕과 이어지도록 아래쪽을 녹입니다 */
body.night .hero {
  background: linear-gradient(180deg, #151a3d 0%, #11153a 55%, rgba(14, 18, 48, 0) 100%);
  overflow: visible;              /* 빛무리가 경계에서 잘리지 않게 */
}
/* 히어로 별은 그대로 두되 아래쪽에서 서서히 사라지게 — 섹션 끝에서 뚝 끊겨 선처럼 보였습니다 */
body.night .hero .sky__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 85%);
}
/* 지평선 빛만 끕니다 — 경계선처럼 보이던 건 이쪽이었습니다 */
body.night .hero .sky__horizon { display: none; }
body.night .hero .sky__glow { opacity: .75; }
body.night .finalCta {
  background: radial-gradient(70% 130% at 50% 100%, rgba(91, 99, 211, .3), transparent 68%);
}
body.night .finalCta::before { opacity: .35; }
body.night .footer { background: transparent; border-top: 1px solid var(--line); }

body.night .header { background: rgba(14, 18, 48, .92); border-bottom-color: var(--line); }
body.night .header.is-stuck { background: rgba(14, 18, 48, .96); }
body.night .header.is-stuck .logo__text strong { color: #fff; }
body.night .header.is-stuck .logo__text small  { color: var(--ink-35); }
body.night .header.is-stuck .nav a { color: var(--ink-50); }
body.night .header.is-stuck .nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
body.night .header.is-stuck .navToggle { background: transparent; border-color: var(--line-strong); }
body.night .header.is-stuck .navToggle span { background: #fff; }
body.night .notice { background: #11163a; }

/* 섹션 바탕 */
body.night .secHead__title { color: #fff; }

/* 카드류 */
body.night .card,
body.night .step,
body.night .principle,
body.night .cmp,
body.night .faqItem,
body.night .trustStat,
body.night .promise { background: var(--paper); border-color: var(--line); }
body.night .cmp--bad { background: rgba(255, 255, 255, .03); }
body.night .cmp--good { border-color: var(--accent); }
/* ✕ / ✓ 표시를 어두운 바탕에서도 또렷하게 */
body.night .cmp li.no::before { background: rgba(255, 139, 139, .18); color: #ff8b8b; }
body.night .cmp li.ok::before { background: var(--accent); color: #fff; }
body.night .cmp--bad h3 { color: #ffa8a8; }
body.night .faqItem summary { color: #fff; }
body.night .faqItem summary:hover { background: rgba(255,255,255,.04); }
body.night .faqItem[open] { border-color: var(--accent); }

/* 입력 */
/* background 단축형을 쓰면 셀렉트 화살표 이미지가 지워집니다 */
body.night .input,
body.night .select { background-color: #10153a; border-color: var(--line-strong); color: #fff; }
body.night .input:focus,
body.night .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,99,211,.3); }
body.night .quick { background: transparent; border-color: var(--line-strong); color: var(--ink-50); }
body.night .quick:hover { color: #fff; border-color: var(--accent); }
body.night .quick.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.night .btn--plain { background: rgba(255,255,255,.06); color: #fff; border-color: var(--line-strong); }
body.night .btn--plain:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* 금액·표 */
body.night .total { background: rgba(255,255,255,.04); border-color: var(--line); }
body.night .total__v strong { color: #fff; }
body.night .rateTable td { color: var(--ink-70); }
body.night .rateTable td:first-child,
body.night .rateTable td strong { color: #fff; }
body.night .metrics { background: var(--line); border-color: var(--line); }
body.night .metric { background: var(--paper); }
body.night .metric strong, body.night .metric dd { color: #fff; }
body.night .bigPrice { background: rgba(255,255,255,.05); border-color: var(--line); }
body.night .bigPrice__v strong { color: #fff; }

/* 안내 박스 */
body.night .promise__note { background: rgba(255,255,255,.04); border-left-color: var(--line-strong); }
body.night .promise__list li { color: #fff; }
body.night .alertBox { background: rgba(240, 180, 60, .1); border-color: rgba(240,180,60,.3); color: #f0d79a; }
body.night .alertBox b { color: #ffe9bd; }
body.night .payNote { background: rgba(254, 229, 0, .07); border-color: rgba(254,229,0,.25); color: var(--ink-70); }
body.night .payNote b { color: #fff; }
body.night .verdict { background: rgba(91,99,211,.14); border-color: rgba(91,99,211,.35); color: #c3c9f5; }

/* 그래프·시세 (어두운 바탕에서는 밝은 상승/하락 색) */
body.night { --up: #ff8b8b; --down: #8db4ff; }

/* 안전메소 섹션은 이미 밤하늘 — 주변과 구분되게 한 단 더 깊게 */

/* 하단 고정바 · QR 창 */
body.night .mobileBar { background: rgba(14, 18, 48, .97); border-top-color: var(--line-strong); }
body.night .mobileBar__rate strong { color: #fff; }
body.night .qrModal__box { background: var(--paper); }
body.night .qrModal__title { color: #fff; }
body.night .qrModal__x:hover { background: rgba(255,255,255,.08); color: #fff; }
/* QR 자체는 흰 바탕을 유지해야 카메라가 읽습니다 */
body.night .qrModal__img { background: #fff; border-color: var(--line-strong); }

/* 떠오르는 효과도 어두운 바탕에 맞게 */
@media (hover: hover) {
  body.night .step:hover,
  body.night .principle:hover,
  body.night .card:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 16px 34px rgba(0,0,0,.4);
    border-color: var(--line-strong);
  }
}

/* ───────── 움직임 줄이기 설정 존중 ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__live .dot, .live .dot, .chart__pulse { animation: none; }
  .live .dot::after { display: none; }
  .ticker__price strong.is-up, .ticker__price strong.is-down { animation: none; }
  .card, .step, .principle, .cmp, .faqItem, .rateCard, .ticker, .rv--chat .rv__bubble {
    transition: none;
  }
  .step:hover, .principle:hover, .card:hover, .cmp--good:hover { transform: none; }
}

/* ───────── 반응형 ───────── */
@media (max-width: 860px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; gap: 2px; background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: var(--sh); padding: 10px 16px 14px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px; font-size: 15px; }
  /* 펼친 메뉴는 흰 바탕이므로 헤더 상태와 무관하게 어두운 글자로 */
  .header .nav a, .header.is-stuck .nav a { color: var(--ink-50); }
  .header .nav a:hover, .header.is-stuck .nav a:hover { color: var(--accent); background: var(--accent-wash); }
  .navToggle { display: flex; }
  .header__inner { position: relative; }
  .nav + .header__actions { margin-left: auto; }
  .hero { padding: 40px 0 26px; }
  .section { padding: 52px 0; }
  .bar__price { margin-left: 0; width: 100%; }
  .rateCard, .card { padding: 20px 18px; }
}
@media (max-width: 420px) {
  .btn--lg, .hero__cta .btn { width: 100%; }
  .select { width: 100%; }
  .field__row { flex-wrap: wrap; }
}
@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; }
  .compare { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1.3fr 1fr; }
  .footer__meta { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .hero { padding: 84px 0 46px; }
  .principles { grid-template-columns: repeat(4, 1fr); }
  .bars { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
   가독성 보정  ──  실제 명암비를 재서 기준(4.5:1) 미달인 곳만 손봤습니다
   ═══════════════════════════════════════════════════════════════ */

/* 푸터 하단 문구 — 3.6:1 이었습니다 */
.footer__meta p { color: #9199bd; }

/* 비교표 "장사로 번 안전메소" 제목 — 어두운 면 위에서 2.4:1 */
body.night .cmp--good h3 { color: #ffd451; }

/* FAQ 의 Q. 표시 — 닫혔을 때 3.2:1, 열렸을 때 보라색이 어두워 3.2:1 */
body.night .faqItem__q { color: var(--ink-50); }
body.night .faqItem[open] .faqItem__q { color: #959df0; }
/* 어두운 면 위의 보라색 글자는 한 단 밝게 */
body.night .quick:hover { color: #959df0; border-color: #959df0; }

/* 한글이 뭉개지던 최소 크기들을 올렸습니다 */
.chart__axis           { font-size: 11.5px; }
.rateTable th          { font-size: 12px; }
.metric span,
.metric dt,
.ticker__stats dt      { font-size: 12px; }
.mobileBar__rate span  { font-size: 12px; }

/* 긴 한글 문단은 줄 간격을 조금 더 줍니다 */
.faqItem__a, .promise__lead, .promise__note { line-height: 1.78; }

/* 배지·로고 보조문구가 한글이라 10.5px 에서 뭉갭니다 */
.logo__text small { font-size: 12px; }
.live, .rateCard__live { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════
   움직이는 별 배경 (assets/js/stars.js)
   ═══════════════════════════════════════════════════════════════ */
#starfield {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  display: block;
}
/* 캔버스가 켜지면 CSS 로 찍어두던 고정 별점은 끕니다 (겹쳐 보입니다) */
body.night.has-starfield::before { background-image: none; }
/* 바탕의 별점 패턴도 캔버스가 대신합니다 */
body.night.has-starfield {
  background-image:
    radial-gradient(900px 620px at 12% 14%, rgba(91, 99, 211, .16), transparent 70%),
    radial-gradient(820px 560px at 88% 62%, rgba(104, 112, 232, .11), transparent 70%);
  background-size: auto, auto;
}
/* 히어로도 바탕을 비워서 움직이는 별이 끝까지 비치게 합니다 */
body.night.has-starfield .hero {
  background: linear-gradient(180deg, rgba(21, 26, 61, .72) 0%, rgba(17, 21, 58, .44) 55%, rgba(14, 18, 48, 0) 100%);
}
body.night.has-starfield .hero .sky__stars { display: none; }

/* ═══════════════════════════════════════════════════════════════
   시세 보드를 밤하늘에 녹입니다
   보드가 불투명한 판이면 흐르던 별이 거기서 끊겨 딴 판처럼 보입니다.
   ═══════════════════════════════════════════════════════════════ */
body.night.has-starfield .rateCard--board {
  background:
    radial-gradient(760px 320px at 50% -18%, rgba(91, 99, 211, .26), transparent 70%),
    linear-gradient(180deg, rgba(21, 26, 61, .58) 0%, rgba(14, 18, 48, .30) 100%);
  box-shadow: none;
}
body.night.has-starfield .rateCard--board .bigPrice { background: rgba(255, 255, 255, .055); }
body.night.has-starfield .rateCard--board .metric  { background: rgba(22, 27, 60, .62); }
body.night.has-starfield .rateCard--board .metrics { background: rgba(255, 255, 255, .10); }

/* 푸터에서 별이 끊기지 않게 — 여기만 불투명한 판이었습니다 */
body.night.has-starfield .footer {
  background: linear-gradient(180deg, rgba(8, 11, 32, .55) 0%, rgba(8, 11, 32, .82) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   별을 가리던 면들 — 안전메소 섹션에 85% 어두운 막이 덮여 있었습니다
   ═══════════════════════════════════════════════════════════════ */
body.night.has-starfield .section--night {
  background: linear-gradient(180deg,
    rgba(10, 13, 38, 0)   0%,
    rgba(10, 13, 38, .30) 22%,
    rgba(10, 13, 38, .30) 78%,
    rgba(10, 13, 38, 0)   100%);
}

/* 카드도 살짝 비치게 — 별이 뒤로 지나가는 게 보입니다 */
body.night.has-starfield .card,
body.night.has-starfield .promise,
body.night.has-starfield .cmp,
body.night.has-starfield .principle,
body.night.has-starfield .step,
body.night.has-starfield .faqItem { background: rgba(23, 29, 64, .78); }
body.night.has-starfield .cmp--good { background: rgba(26, 32, 72, .80); }

/* ═══════════════════════════════════════════════════════════════
   줄 길이 — 한글은 한 줄 25~45자가 편합니다
   ═══════════════════════════════════════════════════════════════ */

/* 결제 안내가 한 줄 76자였습니다 */
.payNote { max-width: 66ch; }

/* 4열이면 한 줄 14자로 쪼개져 여섯 줄이 됩니다.
   본문 폭이 1080px로 묶여 있어 4열은 아무리 넓은 화면에서도 좁습니다. */
@media (min-width: 1000px) {
  .principles { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   별 보험 — 밝은 별이 글자 획 뒤를 지나가도 묻히지 않게
   (카드 위 글자는 카드가 막아주므로 맨 하늘 위 글자에만 겁니다)
   ═══════════════════════════════════════════════════════════════ */
body.night.has-starfield .secHead__title,
body.night.has-starfield .secHead__desc,
body.night.has-starfield .hero__meta,
body.night.has-starfield .finalCta h2,
body.night.has-starfield .finalCta p,
body.night.has-starfield .finalCta small,
body.night.has-starfield .footer__inner strong,
body.night.has-starfield .footer__inner > div > p,
body.night.has-starfield .footer__nav a {
  text-shadow: 0 1px 3px rgba(8, 11, 32, .9), 0 0 10px rgba(8, 11, 32, .6);
}
/* 푸터 고지도 한 줄 82자였습니다 */
.footer__disclaimer { max-width: 72ch; }

/* ═══════════════════════════════════════════════════════════════
   문의 내용 미리 작성 (assets/js/order.js)
   ═══════════════════════════════════════════════════════════════ */
.orderForm { margin-top: 16px; }
.orderForm__lead {
  font-size: 14.5px; color: var(--ink-50); line-height: 1.78;
  margin: -4px 0 18px; max-width: 62ch;
}
.orderForm__lead b { color: var(--ink); }

.orderGrid { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 720px) {
  .orderGrid { grid-template-columns: repeat(3, 1fr); }
}
.orderGrid .input { width: 100%; }

.orderPreview { margin: 6px 0 16px; }
.orderPreview__box {
  margin: 0; padding: 15px 17px;
  background: var(--paper-2); border: 1px solid var(--line-strong);
  border-radius: var(--r); border-left: 3px solid var(--kakao);
  font-family: var(--font); font-size: 14px; line-height: 1.85;
  color: var(--ink-70); white-space: pre-wrap; word-break: break-word;
  cursor: text;
}
.orderPreview__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.orderForm__status { min-height: 20px; margin-top: 10px; font-size: 13.5px; font-weight: 600; text-align: center; }
.orderForm__status.is-ok   { color: #3fc07a; }
.orderForm__status.is-warn { color: #ffa8a8; }

.orderForm__privacy {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.75; color: var(--ink-35); max-width: 62ch;
}
.orderForm__privacy b { color: var(--ink-50); }

body.night .orderPreview__box {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  border-left-color: var(--kakao);
  color: #dfe3f5;
}
/* 복사가 막힌 브라우저에서 직접 복사하실 때 눈에 띄게 */
.orderPreview__box { -webkit-user-select: text; user-select: text; transition: border-color .2s, box-shadow .2s; }
.orderPreview__box.is-highlight {
  border-color: var(--kakao);
  box-shadow: 0 0 0 3px rgba(254, 229, 0, .22);
}

/* ═══════════════════════════════════════════════════════════════
   노란색은 "카톡이 열린다"는 신호입니다 — 버튼에만 남깁니다
   ═══════════════════════════════════════════════════════════════ */

/* 장식으로 쓰이던 노란 테두리는 사이트 보라색으로 */
body.night .payNote {
  background: rgba(91, 99, 211, .12);
  border-color: rgba(91, 99, 211, .3);
  border-left-color: #7b83e8;
}
body.night .orderPreview__box { border-left-color: #7b83e8; }
body.night .orderPreview__box.is-highlight {
  border-color: #7b83e8;
  box-shadow: 0 0 0 3px rgba(123, 131, 232, .25);
}

/* 순색 노랑(#fee500)은 밤하늘 위에 얹힌 스티커처럼 보입니다.
   한 단 눌러서 어둠 속에 켜진 불빛처럼 보이게 합니다. */
body.night { --kakao: #f7d85a; --kakao-dk: #ecc944; }
body.night .btn--kakao {
  box-shadow: 0 8px 30px rgba(247, 216, 90, .18), 0 2px 6px rgba(10, 14, 40, .35);
}
body.night .header .btn--kakao,
body.night .mobileBar .btn--kakao {
  box-shadow: 0 4px 16px rgba(247, 216, 90, .16);
}
/* 다른 버튼에서 문의를 누르면 주문서가 잠깐 깜빡여서 여기임을 알려줍니다 */
.orderForm { transition: border-color .25s, box-shadow .25s; }
body.night .orderForm.is-asking {
  border-color: var(--kakao);
  box-shadow: 0 0 0 3px rgba(247, 216, 90, .22), 0 18px 44px rgba(10, 14, 40, .4);
}

/* ═══════════════════════════════════════════════════════════════
   금액 계산과 문의 — 한 흐름으로
   수량(1) → 문의서(2) 가 세로로 이어지고, 가격표는 옆에서 참고용으로.
   모바일에서는 1 → 2 → 가격표 순서라 흐름이 끊기지 않습니다.
   ═══════════════════════════════════════════════════════════════ */
.calcGrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  /* 1단계와 가격표가 나란히, 2단계는 아래 전체 폭.
     가격표를 세로로 길게 세우면 옆이 통째로 비어 보입니다. */
  .calcGrid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas: "calc  table"
                         "order order";
    align-items: stretch;
  }
  .calcCard  { grid-area: calc; }
  .tableCard { grid-area: table; display: flex; flex-direction: column; }
  /* 표를 카드 가운데에 띄워서 윗머리만 무거워 보이지 않게 합니다.
     표가 멀어지면 제목 밑줄만 혼자 떠 보이므로 그 줄은 지웁니다. */
  .tableCard .rateTable { margin-block: auto; }
  .tableCard .card__title { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .orderForm { grid-area: order; margin-top: 0; }

  /* 폭이 넓어졌으니 입력칸과 미리보기를 나란히 놓습니다 */
  .orderForm .orderGrid { grid-template-columns: repeat(3, 1fr); }
}

/* 단계 제목 */
.stepHead {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; margin: 0 0 16px;
}
.stepHead i {
  flex: none; display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-style: normal; font-size: 13px; font-weight: 700;
}

/* 1단계 카드 끝의 이음말 */
.calcCard__next {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-35); text-align: center;
}
.calcCard__next::after { content: " ↓"; }

/* 2단계 맨 위 — 위에서 고른 수량을 다시 보여줍니다 */
.pickedBar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 13px 16px;
  background: var(--paper-2); border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.pickedBar__v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pickedBar__v strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.pickedBar__v span { font-size: 15px; font-weight: 600; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.pickedBar__edit {
  margin-left: auto; flex: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-50); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 14px; min-height: 36px;
}
.pickedBar__edit:hover { color: var(--ink); border-color: var(--accent); }

body.night .pickedBar { background: rgba(255, 255, 255, .055); border-color: rgba(255,255,255,.14); }
body.night .pickedBar__edit:hover { color: #fff; border-color: #959df0; }

/* 수량을 고치러 올라갔을 때 눈에 띄게 */
.calcCard.is-flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
body.night .calcCard.is-flash { box-shadow: 0 0 0 3px rgba(123, 131, 232, .3); }

/* ═══════════════════════════════════════════════════════════════
   수량별 가격표 — 간격과 열 너비 정리
   ═══════════════════════════════════════════════════════════════ */
.rateTable { width: 100%; table-layout: fixed; border-collapse: collapse; }
/* 금액이 주인공이라 가장 넓게, 1억당은 참고라 좁게 */
.rateTable th:nth-child(1) { width: 20%; }
.rateTable th:nth-child(2) { width: 46%; }
.rateTable th:nth-child(3) { width: 34%; }

.rateTable th { padding-bottom: 11px; letter-spacing: var(--ls-label); }
.rateTable td { padding: 9px 0; }          /* 줄 간격 53px → 44px */
.rateTable td:last-child { white-space: nowrap; }

/* 머리글과 숫자가 같은 선에서 끝나도록 오른쪽을 살짝 띄웁니다 */
.rateTable th:nth-child(n+2),
.rateTable td:nth-child(n+2) { padding-right: 2px; }

.noteList { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════
   실제 받으시는 메소 — 택배 수수료가 빠진 양
   결제 전에 눈에 걸려야 하므로 금액 바로 밑에 또렷하게 둡니다.
   ═══════════════════════════════════════════════════════════════ */
.netBox {
  margin-top: 10px; padding: 13px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper-2);
}
.netBox__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.netBox__k { font-size: 13px; font-weight: 600; color: var(--ink-50); }
.netBox__v { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.netBox__why { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-35); }

body.night .netBox {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .16);
}
body.night .netBox__v { color: #ffd451; }

/* ═══════════════════════════════════════════════════════════════
   1) 키보드 포커스 표시
   Tab 으로 넘길 때 지금 어디 있는지 보여야 합니다.
   :focus-visible 이라 마우스로 누를 때는 테두리가 생기지 않습니다.
   ═══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.input:focus-visible,
.select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
body.night a:focus-visible,
body.night button:focus-visible,
body.night summary:focus-visible,
body.night [tabindex]:focus-visible {
  outline-color: #9aa2ff;
}
/* 노란 버튼 위에서는 보라 테두리가 묻히므로 어두운 색으로 */
.btn--kakao:focus-visible { outline-color: #14161a; }
/* 기본 포커스 테두리는 끄지 않습니다 — 아래는 모양만 다듬습니다 */
.faqItem__sum:focus-visible { outline-offset: -3px; }

/* ═══════════════════════════════════════════════════════════════
   2) 손가락으로 누르는 영역 — 권장 44px
   ═══════════════════════════════════════════════════════════════ */
.period {
  min-height: 40px; padding-inline: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.periods { padding: 4px; }
.footer__nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
}
.nav a { min-height: 42px; display: inline-flex; align-items: center; }
.quick { min-height: 40px; display: inline-flex; align-items: center; }
.logo { min-height: 44px; display: inline-flex; align-items: center; }

/* ═══════════════════════════════════════════════════════════════
   3) 공지 닫기 단추
   ═══════════════════════════════════════════════════════════════ */
.notice__x {
  margin-left: auto; flex: none; cursor: pointer;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; color: var(--ink-35);
}
.notice__x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.notice__inner { gap: 10px; }

/* ═══════════════════════════════════════════════════════════════
   4) 단순 문의 통로 — 주문서를 거치지 않는 작은 링크
   ═══════════════════════════════════════════════════════════════ */
.orderForm__ask {
  margin: 14px 0 0; text-align: center;
  font-size: 13.5px; color: var(--ink-35);
}
.orderForm__ask a {
  color: var(--ink-50); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.orderForm__ask a:hover { color: var(--ink); }
body.night .orderForm__ask a { color: #b6bdd8; }
body.night .orderForm__ask a:hover { color: #fff; }
/* 남은 작은 영역 세 곳 */
.notice__x { width: 40px; height: 40px; }
.pickedBar__edit { min-height: 40px; }
.orderForm__ask a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 4px; }

/* 가격표가 두 열이 되었습니다 — 수량은 가운데, 금액은 오른쪽 */
.rateTable th:nth-child(1),
.rateTable td:nth-child(1) { width: 42%; text-align: center; }
.rateTable th:nth-child(2),
.rateTable td:nth-child(2) { width: 58%; text-align: right; }

/* 가격표가 세 열로 돌아왔습니다 — 수량(가운데) · 금액(오른쪽) · 실수령(오른쪽) */
.rateTable th:nth-child(1), .rateTable td:nth-child(1) { width: 20%; text-align: center; }
.rateTable th:nth-child(2), .rateTable td:nth-child(2) { width: 46%; text-align: right; }
.rateTable th:nth-child(3), .rateTable td:nth-child(3) { width: 34%; text-align: right; }
.rateTable td:last-child { white-space: nowrap; }
/* 줄을 조금 더 띄워 표가 카드를 채우게 */
@media (min-width: 900px) { .tableCard .rateTable td { padding: 13px 0; } }
/* 모바일에서는 세 열이 좁으니 글자를 한 단 줄입니다 */
@media (max-width: 560px) {
  .rateTable { font-size: 14px; }
  .rateTable td:last-child { font-size: 12.5px; }
  .rateTable th:nth-child(1), .rateTable td:nth-child(1) { width: 18%; }
  .rateTable th:nth-child(2), .rateTable td:nth-child(2) { width: 46%; }
  .rateTable th:nth-child(3), .rateTable td:nth-child(3) { width: 36%; }
}

/* ═══════════════════════════════════════════════════════════════
   배치 정리 — 카드 안쪽 여백이 다섯 가지로 제각각이었습니다
     .card 24 / .step 24·22 / .cmp 26·24 / .principle 22 / .promise 30·28
   카드끼리 나란히 놓이는데 안쪽 여백이 다르면 글의 시작선이 어긋납니다.
   ═══════════════════════════════════════════════════════════════ */
.card,
.step,
.cmp,
.principle,
.promise { padding: 24px; }

/* 카드 안에 들어가는 작은 상자들도 하나로 */
.total,
.netBox,
.pickedBar,
.payNote { padding: 16px 18px; }

@media (max-width: 560px) {
  .card, .step, .cmp, .principle, .promise { padding: 20px 18px; }
  .total, .netBox, .pickedBar, .payNote { padding: 15px 16px; }
}

/* 결제 안내 띠가 왼쪽에 매달려 오른쪽이 통째로 비었습니다.
   글줄 길이는 그대로 두고 가운데로 옮깁니다. */
.payNote { margin-inline: auto; }

/* 큰 카드가 나란히 놓이는 간격을 하나로 (14px / 16px 가 섞여 있었습니다) */
.steps,
.principles,
.compare,
.calcGrid,
.split { gap: 16px; }

/* FAQ 항목도 카드인데 혼자 모서리가 10px 이었습니다 */
.faqItem { border-radius: var(--r-lg); }

/* 문의서가 전체 폭이 되면서 미리보기 상자가 한 줄 72자로 길어졌습니다 */
.orderPreview__box { max-width: 62ch; }

/* 모바일 햄버거 단추만 38px 였습니다 */
.navToggle { width: 42px; height: 42px; }

/* ═══════════════════════════════════════════════════════════════
   문의서가 전체 폭이 되었으니 두 기둥으로 나눕니다
   왼쪽에 적는 칸, 오른쪽에 붙여넣을 내용 — 적으면서 바로 확인합니다.
   (한 기둥으로 두면 미리보기 오른쪽이 통째로 빕니다)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .orderForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    grid-template-areas:
      "head    head"
      "picked  picked"
      "lead    lead"
      "fields  preview"
      "cta     cta"
      "status  status"
      "ask     ask"
      "privacy privacy";
  }
  .orderForm > .stepHead         { grid-area: head; }
  .orderForm > .pickedBar        { grid-area: picked; }
  .orderForm > .orderForm__lead  { grid-area: lead; max-width: 68ch; }
  .orderForm > .orderGrid        { grid-area: fields; grid-template-columns: 1fr; }
  .orderForm > .orderPreview     { grid-area: preview; margin-top: 0; }
  .orderForm > #ofCopy           { grid-area: cta; }
  .orderForm > .orderForm__status{ grid-area: status; }
  .orderForm > .orderForm__ask   { grid-area: ask; }
  .orderForm > .orderForm__privacy { grid-area: privacy; margin-inline: auto; text-align: center; }

  /* 오른쪽 기둥을 채우도록 상자 폭 제한을 풀어 줍니다 */
  .orderForm .orderPreview__box { max-width: none; }
  .orderForm .orderGrid .field:last-child { margin-bottom: 0; }
}
/* 여백 체계에서 빠져 있던 둘 — bigPrice 20·22, footer__disclaimer 14·16 */
.bigPrice { padding: 24px; }
.footer__disclaimer { padding: 16px 18px; }
@media (max-width: 560px) {
  .bigPrice { padding: 20px 18px; }
  .footer__disclaimer { padding: 15px 16px; }
}
/* 약속 섹션 안쪽 인용 상자가 모바일 축소에서 빠져 있었습니다 */
@media (max-width: 560px) { .promise__note { padding: 15px 16px; } }

/* ═══════════════════════════════════════════════════════════════
   본문 글씨 키우기

   재보니 전체 글자의 72%가 15px 이하였고, 그중 가장 긴 글
   (FAQ 답변 1,039자)이 15px 로 가장 작았습니다. 읽는 글일수록
   커야 하는데 거꾸로였습니다. 어두운 바탕에서는 더 불리합니다.
   ═══════════════════════════════════════════════════════════════ */

/* 길게 읽는 글 — 16px */
.faqItem__a p,
.principle p,
.step__body p { font-size: 16px; }

/* 중간 길이 안내문 — 15.5px */
.promise__note,
.orderForm__lead,
.payNote { font-size: 15.5px; }

/* 작은 안내 — 13px 은 한글에 너무 작습니다 */
.netBox__why { font-size: 13.5px; }
.orderForm__privacy { font-size: 13.5px; }
.footer__meta p { font-size: 14px; }

/* 문단 전체가 700 이면 강조가 사라지고 글이 뭉쳐 보입니다 */
.promise__list li { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   공지 바 — 글이 두 줄로 넘어갈 때 아래가 잘려 보였습니다
   위아래 여백이 7px 뿐이라 둘째 줄이 경계에 붙었습니다.
   ═══════════════════════════════════════════════════════════════ */
.notice__inner {
  align-items: flex-start;        /* 글이 접히면 배지는 첫 줄에 맞춥니다 */
  gap: 9px;
  padding: 11px 16px 12px;
  min-height: 0;
}
.notice__tag { margin-top: 2px; }
.notice__text { line-height: 1.55; flex: 1 1 auto; min-width: 0; }
/* 닫기 단추가 40px 이라 그대로 두면 첫 줄보다 아래로 처집니다 */
.notice__x { margin-top: -6px; margin-right: -6px; }

@media (min-width: 720px) {
  /* 한 줄로 들어가는 넓이에서는 가운데 정렬이 자연스럽습니다 */
  .notice__inner { align-items: center; padding: 8px 20px; }
  .notice__tag { margin-top: 0; }
  .notice__x { margin-top: 0; margin-right: 0; }
}