/* 요금제 선택 (2026-10-20 · 온보딩 확정본 S1 · /account/plans) — 목업 만든-원본/src.html «요금제 선택(구매 판)» 규칙을 옮겨 짰다.
   기본 다크 + 라임(#C6F24E) · 밝은 화면 전용 색(노션 4-5: 바탕 #F4F6F1 · 카드 #FCFCF9/#DDE3D8 · 베이직 #EEF5E6/#7EA95D · 단추 #3F7D4E · 보조 #5E665D).
   글꼴 = 본문 Pretendard · 제목·큰 숫자 Wanted Sans · 작은 영문 표시 IBM Plex Mono(shell.css 와 같은 이름). */
:root {
  --pl-page: #0A0A0A; --pl-card: #1e2125; --pw-card: var(--pl-card); --line: #2a2e34; --line-2: #31353b;   /* 🔄 10-21 --page·--card·--tx·--tx2·--tx3 → --pl-… (공통 기둥의 tokens.css 와 이름이 겹쳐서 · 값 그대로) · --pw-card = 결제 팝업 판이 읽는 이름 */
  --pl-tx: #F2F4F7; --pl-tx2: #C4CAD3; --pl-tx3: #98A2B3;
  --acc: #c6f24e; --acc-soft: #1f2a10; --on-acc: #14180c;
  --pl-bg: #23272c; --pl-bg2: #1b1e22; --pl-ln: #3a4048;
  --buy-bg: rgba(255, 255, 255, .11); --buy-ln: rgba(255, 255, 255, .30);
  --amber: #dfb173; --amber-soft: #2a2213;
  --f-head: "Wanted Sans", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --pl-page: #f4f6f1; --pl-card: #fcfcf9; --line: #e4e8df; --line-2: #dde3d8;
  --pl-tx: #1b1f1c; --pl-tx2: #3b423c; --pl-tx3: #5e665d;
  --acc: #3f7d4e; --acc-soft: #e1ecd5; --on-acc: #ffffff;
  --pl-bg: #fcfcf9; --pl-bg2: #fcfcf9; --pl-ln: #dde3d8;
  --buy-bg: #ffffff; --buy-ln: #cfd7c9;
  --amber: #8a6514; --amber-soft: #fbf2dc;
  color-scheme: light;
}
* { box-sizing: border-box }
html { background: var(--pl-page) }
html body { margin: 0; min-height: 100vh; background: var(--pl-page); color: var(--pl-tx); font-family: var(--f-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; word-break: keep-all }
:root[data-theme="light"] body {
  background: radial-gradient(900px 340px at 18% -60px, rgba(126, 169, 93, .16), transparent 70%),
    radial-gradient(760px 300px at 88% -40px, rgba(240, 233, 206, .75), transparent 70%),
    linear-gradient(180deg, #f7f8f2 0px, #f4f6f1 280px) no-repeat, #f4f6f1 }
h1, h2, p { margin: 0 }
h1, h2 { text-wrap: balance; letter-spacing: -.025em }
a { color: inherit }
button { font: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px }
.hidden { display: none !important }
/* 🆕 10-21 (J.J 마지막 지침) 공통 기둥(body.gr-setup-몸)이 섰을 땐 이 장의 자기 띠(header.top)를 감춘다 — 로그인 전·문지기 못 온 손님에겐 옛 띠 그대로. html body = shell.css body{font-family} 보다 센 자리(글꼴 그대로) */
body.gr-setup-몸 header.top { display: none }

/* 맨 위 띠 — 계산대(billing.html)와 같은 자리 */
.top { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--pl-page) 90%, transparent); backdrop-filter: blur(8px); z-index: 5 }
.logo { font-weight: 800; letter-spacing: -.03em; font-size: 17px; text-decoration: none }
.logo span { color: var(--pl-tx3) }
.crumb { color: var(--pl-tx3); font-size: 13px }
.sp { flex: 1 }
.topbtn { font-size: 13px; font-weight: 600; color: var(--pl-tx2); text-decoration: none; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-2) }
.topbtn:hover { color: var(--pl-tx); border-color: var(--pl-tx3) }

.ck { max-width: 1128px; margin: 0 auto; padding: 40px 24px 80px }
.loading, .closed { color: var(--pl-tx2); font-size: 15px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--pl-card) }

/* 진행 단계 */
.ck-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap }
.ck-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--pl-tx3); white-space: nowrap }
.ck-dot { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 11.5px }
.ck-step.current { color: var(--pl-tx) }
.ck-step.current .ck-dot { background: var(--acc); border-color: var(--acc); color: var(--on-acc) }
.ck-sep { width: 48px; height: 1px; background: var(--line-2) }

/* 머리 */
.eyebrow { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; color: var(--acc) }
.ck-head h1 { font-family: var(--f-head); font-size: clamp(26px, 3vw, 34px); line-height: 1.28; margin-top: 8px }
.ck-desc { margin-top: 8px; color: var(--pl-tx2); font-size: 15px }
.ck-refund { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13.5px; color: var(--pl-tx2) }
.ck-ok { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); font-size: 11px; font-weight: 800 }
.ck-rfsep { color: var(--pl-tx3); margin: 0 -1px }
.ck-refund a { color: var(--pl-tx2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px }
.ck-refund a:hover { color: var(--pl-tx) }
.ck-cancel { display: grid; gap: 4px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 13.5px }
.ck-cancel b { font-size: 14.5px }

/* 카드 셋 — 같은 높이·여백 · 라디오 없음 · 베이직 추천(라임 테두리·옅은 초록 바탕·라임 단추) */
.ck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; align-items: stretch }
.ck-plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 22px; border-radius: 18px;
  background: linear-gradient(180deg, var(--pl-bg) 0%, var(--pl-bg2) 100%); border: 1px solid var(--pl-ln);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -26px rgba(0, 0, 0, .9); transition: border-color .18s, transform .18s, box-shadow .18s }
.ck-plan:not(.cur):hover { border-color: color-mix(in srgb, var(--acc) 70%, transparent); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 46px -26px rgba(0, 0, 0, .95) }
.ck-plan.rec { --pl-bg: #262f1b; --pl-bg2: #1c2216; --pl-ln: color-mix(in srgb, var(--acc) 65%, transparent) }
.ck-plan.rec:hover { border-color: var(--acc) }
.ck-rec { position: absolute; top: -11px; left: 22px; padding: 3px 10px; border-radius: 999px; background: #c6f24e; color: #14180c; font-size: 11.5px; font-weight: 800; letter-spacing: .02em }
.ck-name { font-family: var(--f-head); font-size: 19px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.ck-curtag { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--pl-tx2) }
.ck-for { font-size: 12.5px; color: var(--pl-tx2); margin-top: 6px; min-height: 19px }
.ck-price { display: flex; align-items: baseline; gap: 6px; margin-top: 22px }
.ck-price strong { font-family: var(--f-head); font-size: 34px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.ck-price span { font-size: 13px; color: var(--pl-tx3) }
/* 🆕 10-23 할인 첫 달 — 정가 빗금(작게) · 첫 달 값 크게(강조색) */
.ck-price.has-off { flex-wrap: wrap; row-gap: 2px }
.ck-price .ck-was { font-size: 15px; color: var(--pl-tx3); text-decoration: line-through; text-decoration-thickness: 1.5px; flex-basis: 100% }
.ck-price.has-off strong { color: var(--acc) }
.ck-first { font-size: 12.5px; color: var(--pl-tx3); margin-top: 8px; min-height: 19px }
.ck-first b { color: var(--acc) }
.ck-rule { border-top: 1px solid rgba(255, 255, 255, .08); margin: 16px 0 14px }
.ck-coins { font-weight: 700; font-size: 15.5px }
.ck-coins em { font-style: normal; color: var(--acc) }
.ck-goods { font-size: 13px; color: var(--pl-tx2); margin-top: 3px }
.ck-goods b { color: var(--pl-tx) }
.ck-buy { margin-top: auto; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--pl-tx); background: var(--buy-bg); border: 1px solid var(--buy-ln); transition: background .15s, border-color .15s, color .15s }
.ck-goods + .ck-buy, .ck-coins + .ck-buy { margin-top: 20px }
.ck-plan:not(.cur):hover .ck-buy { background: color-mix(in srgb, var(--acc) 14%, transparent); border-color: var(--acc); color: var(--acc) }
.ck-plan.rec .ck-buy, .ck-plan.rec:hover .ck-buy { background: var(--acc); border-color: var(--acc); color: var(--on-acc) }
.ck-plan.rec:hover .ck-buy { filter: brightness(1.05) }
/* 🆕 10-22 시작 화면에서 온 새 손님 — 상태 답 전 누름 안내(같은 자리 한 줄 · 토스트 아님) */
.ck-wait-say { margin: 8px 0 0; font-size: 12.5px; color: var(--pl-tx3); text-align: center }
.ck-buy:disabled { opacity: .55; cursor: default }
.ck-plan.cur { cursor: default }
.ck-after { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; font-size: 12.5px; color: var(--pl-tx3) }

/* 밝은 화면 전용(J.J 10/20) — 세이지 바탕 · 아이보리 카드 · 베이직 그린 */
:root[data-theme="light"] .ck-plan { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(40, 56, 38, .05), 0 14px 32px -18px rgba(40, 56, 38, .22) }
:root[data-theme="light"] .ck-plan:not(.cur):hover { border-color: #a9c391; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(40, 56, 38, .06), 0 22px 40px -20px rgba(40, 56, 38, .30) }
:root[data-theme="light"] .ck-plan.rec { --pl-bg: #f1f7ea; --pl-bg2: #eaf3e1; --pl-ln: #7ea95d; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 4px rgba(63, 125, 78, .08), 0 18px 38px -18px rgba(63, 125, 78, .30) }
:root[data-theme="light"] .ck-plan.rec:hover { border-color: #5f8f43 }
:root[data-theme="light"] .ck-rec { box-shadow: 0 2px 6px -2px rgba(63, 125, 78, .35); color: #1b2410 }
:root[data-theme="light"] .ck-rule { border-color: #e4e8df }
:root[data-theme="light"] .ck-plan.rec .ck-rule { border-color: #d3e3c3 }
:root[data-theme="light"] .ck-buy { box-shadow: 0 1px 2px rgba(40, 56, 38, .06) }
:root[data-theme="light"] .ck-plan:not(.cur):not(.rec):hover .ck-buy { background: #f1f7ea; border-color: var(--acc); color: var(--acc) }
:root[data-theme="light"] .ck-plan.rec .ck-buy { box-shadow: 0 6px 14px -8px rgba(63, 125, 78, .7) }
:root[data-theme="light"] .ck-plan.rec:hover .ck-buy { background: #356b42; border-color: #356b42; filter: none }
:root[data-theme="light"] .ck-step.current .ck-dot { color: #fff }

/* 모바일(노션 4-10) — 이름·한 줄 설명 왼쪽 / 가격 오른쪽 한 줄 · 카드 높이 압축(약 220px) */
@media (max-width: 760px) {
  .top { padding: 12px 16px }
  .crumb { display: none }
  .ck { padding: 22px 16px 60px }
  .ck-steps { gap: 6px; margin-bottom: 18px }
  .ck-sep { width: 18px }
  .ck-head h1 { font-size: 23px }
  .ck-desc { font-size: 13.5px }
  .ck-refund { margin-top: 6px; font-size: 12.5px }
  .ck-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px }
  .ck-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: end; padding: 16px 16px 14px; border-radius: 14px }
  .ck-plan > * { grid-column: 1 / -1 }
  .ck-plan > .ck-name { grid-column: 1; grid-row: 1; font-size: 17px }
  .ck-plan > .ck-for { grid-column: 1; grid-row: 2; margin-top: 2px; min-height: 0 }
  .ck-plan > .ck-price { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center }
  .ck-price strong { font-size: 24px }
  .ck-first { margin-top: 4px; min-height: 0; text-align: right }
  .ck-first:empty { display: none }
  .ck-rule { margin: 12px 0 10px }
  .ck-coins { font-size: 14.5px }
  .ck-goods { font-size: 12.5px; margin-top: 1px }
  .ck-buy, .ck-goods + .ck-buy, .ck-coins + .ck-buy { margin-top: 12px; height: 42px }
  .ck-rec { top: -10px; left: 14px; font-size: 11px }
  .ck-after { margin-top: 12px; font-size: 12px }
}
@media (prefers-reduced-motion: reduce) { .ck-plan, .ck-buy { transition: none } .ck-plan:hover { transform: none !important } }

/* ═══ 🆕 S4 — 결제 팝업(pay-popup.css · #payWait)이 기대는 «장 바탕» — billing.html 과 «같은 값»(그 장에서 옮겨 적음) ═══
   팝업 규칙은 색 이름(--pl-card · --line · --body …)과 .btn · .linkbtn · .msg 를 부르는 장에서 받는다(pay-popup.css 머리말).
   요금제 화면의 색 이름(--pl-card 등)과 겹치지 않게 #payWait «안»에서만 정한다 · 단추 꼴은 billing.html 그대로. */
#payWait {
  --pl-card: #0E1013; --inner: #11151A; --line: #272C32; --line-soft: #1C2025;
  --ink: #FFFFFF; --body: #9AA0A8; --faint: #646C76; --sub: #868E98;
  --silver: #C6D6E8; --silver-deep: #8EA3BC; --lime: #C6F24E; --gold: #E7B65A; --ok: #7FD39A; --err: #FF8A80;
  font-family: 'Wanted Sans', Pretendard, 'Apple SD Gothic Neo', -apple-system, system-ui, sans-serif; font-size: 15px; line-height: 1.6; word-break: keep-all }
  /* ── 단추 — 기본은 어두운 판 + 얇은 실버 테두리 + 흰 글씨. 가장 중요한 CTA 만 밝은 실버 바탕 + 검은 글씨 ── */
  /* 🔄 2026-10-07 스모키 글래스(J.J) — 반투명 차콜 + 위가 조금 밝은 세로 그라데이션 + 위 가장자리 1px 실버 하이라이트 + 아주 약한 inset */
  .btn { position: relative; overflow: hidden; font: inherit; font-size: 14px; font-weight: 600; border-radius: 10px; padding: 10px 18px;
    border: 1px solid rgba(170, 185, 200, .28);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .025) 35%, rgba(0, 0, 0, .18) 100%), #0D1013;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .22);
    color: var(--ink); cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: background .2s, border-color .2s, box-shadow .2s, transform .08s }
  .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(238, 244, 251, .14) 40%, rgba(198, 242, 78, .08) 50%, transparent 70%);
    transform: translateX(-120%); }
  .btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .04) 35%, rgba(0, 0, 0, .14) 100%), #11151A;
    border-color: rgba(190, 205, 220, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .22) }
  .btn:active { transform: translateY(1px); background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(0, 0, 0, .22) 100%), #0B0D10 }
  .btn:hover::after { transform: translateX(120%); transition: transform .7s ease }
  /* 대표 CTA — 같은 가족 · 표면만 한 단계 밝게(흰 단추로 만들지 않는다) */
  .btn.pri { border-color: rgba(190, 205, 220, .38);
    background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .05) 35%, rgba(0, 0, 0, .12) 100%), #12161B;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28) }
  .btn.pri:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .07) 35%, rgba(0, 0, 0, .1) 100%), #151A20; border-color: rgba(205, 218, 232, .5) }
  .btn.sm { padding: 6px 12px; font-size: 13px }
  .btn[disabled] { opacity: .45; cursor: default }
  .linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
  .linkbtn:hover { color: var(--ink) }
  .linkbtn[disabled] { opacity: .45; cursor: default }
  .msg { margin: 10px 0 0; font-size: 14px; color: var(--body) }
  .msg.err { color: var(--err) }
  .msg.ok { color: var(--ok) }

/* 🆕 S4 돌아온 손님 띠 — 대기(라임 점) · 완료(체크) */
.ck-pending { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); background: var(--acc-soft) }
.ck-pending > div { display: grid; gap: 2px; flex: 1; min-width: 0 }
.ck-pending b { font-size: 14.5px }
.ck-pending span { font-size: 13px; color: var(--pl-tx2) }
.ck-pd-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent) }
.ck-pending.paid .ck-pd-dot { width: 22px; height: 22px; box-shadow: none; display: grid; place-items: center; color: var(--on-acc); font-size: 12px; font-weight: 800 }
.ck-pd-btn { flex: none; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--acc); background: transparent; color: var(--acc); font-size: 13px; font-weight: 700 }
.ck-pd-btn:hover { background: color-mix(in srgb, var(--acc) 14%, transparent) }
main > .msg { margin: 12px 0 0; font-size: 14px; color: var(--pl-tx2) }
main > .msg:empty { display: none }
main > .msg.ok { color: var(--acc) }
main > .msg.err { color: #f08a62 }
@media (max-width: 760px) { .ck-pending { flex-wrap: wrap } .ck-pd-btn { width: 100% } }

/* 🔄 10-22 틀 먼저(GPT B-2) — 답 전 «빈 막대·카드 껍데기». 값·글은 0 · 움직임은 아주 약하게(줄이기 설정이면 멈춤) */
.ck-skel { margin-top: 6px }
.ck-skel-head { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 4px }
.ck-skel .sk { display: block; border-radius: 8px; background: color-mix(in srgb, var(--pl-tx2, #8a8f98) 18%, transparent); animation: ck-skel-pulse 1.4s ease-in-out infinite }
.ck-skel .sk-eb { width: 110px; height: 12px }
.ck-skel .sk-h1 { width: min(420px, 80%); height: 28px }
.ck-skel .sk-desc { width: min(300px, 60%); height: 14px }
.ck-skel-card { cursor: default; gap: 14px; min-height: 260px; pointer-events: none }
.ck-skel-card:hover { transform: none; box-shadow: none }
.ck-skel .sk-name { width: 70px; height: 18px }
.ck-skel .sk-line { width: 80%; height: 12px }
.ck-skel .sk-btn { width: 100%; height: 40px; margin-top: auto; border-radius: 12px }
.ck-skel-say { color: var(--pl-tx2, #8a8f98); font-size: 14px }
.ck-skel.hidden { display: none }
@keyframes ck-skel-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ck-skel .sk { animation: none } }
@media (max-width: 760px) { .ck-skel-grid { grid-template-columns: 1fr } .ck-skel-card:nth-child(n+2) { display: none } }


/* 🆕 10-22 카드 먼저(J.J 10/22 «요금제 보기가 유독 느리다») — 공개 요금제 표로 카드를 먼저 그리면 카드 껍데기는 걷고 «제목 자리 빈 막대»만 남긴다.
   빈 막대 높이 = 새 손님 머리(진행 단계 + 눈썹·제목·설명) 높이 — 상태 답이 와서 진짜 머리가 서도 카드가 덜 움직인다(잰 값 · 이용 중 손님은 단계 줄이 없어 조금 올라간다). */
.ck-skel.ck-skel-cards .ck-skel-grid { display: none }
.ck-skel.ck-skel-cards { margin-top: 0 }
.ck-skel.ck-skel-cards .ck-skel-head { margin: 0; min-height: var(--ck-head-h, 154px); justify-content: flex-end; padding-bottom: 2px }

/* 링크와 «적용됨» 표는 높이가 같다(26px) — 어느 쪽이 서도 카드 자리가 안 움직인다.
   🆕 10-22 할인코드 자리(J.J 10/22 «요금제 화면 오른쪽 끝에 할인코드 넣는 자리») — 머리 오른쪽 끝 작은 링크 → 칸 + [적용].
   넓은 화면: 눈썹·제목과 같은 줄 오른쪽(폭 고정 — 칸을 열어도 제목 폭이 안 바뀐다) · 폰(≤760): 설명 밑 왼쪽.
   칸·단추 꼴은 결제 팝업 할인 칸(pay-popup.css .pw-field.mono · .pw-coupon)과 같은 값 — 색은 이 장 이름(--pl-…)으로(밝게/어둡게 둘 다). */
.ck-head { display: flex; align-items: flex-start; gap: 24px }
.ck-head-main { flex: 1; min-width: 0 }
.ck-code { flex: none; width: min(300px, 38%); display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.ck-code-link { background: none; border: 0; padding: 4px 0; line-height: 18px; font-size: 13px; font-weight: 500; color: var(--pl-tx3); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px }
.ck-code-link:hover { color: var(--pl-tx) }
.ck-code-chip { font-family: var(--f-mono); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: var(--acc-soft); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent) }
.ck-code-row { display: flex; gap: 8px; width: 100% }
.ck-code-in { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--pl-card); color: var(--pl-tx); font-family: var(--f-mono); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; box-sizing: border-box }
.ck-code-in::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--f-body); color: var(--pl-tx3) }
.ck-code-in:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent) }
.ck-code-go { flex: none; height: 40px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--pl-tx); background: var(--buy-bg); border: 1px solid var(--buy-ln) }
.ck-code-go:hover { border-color: var(--acc); color: var(--acc) }
.ck-code-go:disabled, .ck-code-in:disabled { opacity: .55; cursor: default }
.ck-code-msg { font-size: 12.5px; line-height: 1.5; color: var(--pl-tx2); text-align: right }
.ck-code-msg:empty { display: none }
.ck-code-msg.ok { color: var(--acc) }
.ck-code-msg.err { color: #f08a62 }
.ck-code-msg.warn { color: var(--amber) }
:root[data-theme="light"] .ck-code-msg.err { color: #b4532a }
@media (max-width: 760px) {
  .ck-head { flex-direction: column; gap: 10px }
  .ck-code { width: 100%; align-items: flex-start }
  .ck-code-msg { text-align: left }
  .ck-skel.ck-skel-cards .ck-skel-head { min-height: var(--ck-head-h-m, 163px) }
}