/* Plano 3기 수강료 칸 — 가로 배치 + 레이온 결.
 * 이 장에서만 쓴다. site2026/styles.css 를 덮지 않게 .price-card·.info-split 안으로만 건다.
 * 2026-09-03 대표 승인본. */

/* 3기 페이지 수강료 칸 — 데스크톱에서 가로로 편 초안.
 *
 * 휴대폰은 지금 그대로 둔다(대표 「모바일은 괜찮다」). 1080px 이상에서만 가로로 눕는다.
 * 세로로 쌓여 있으면 금액 → 회차 → 단추까지 세 번 스크롤해야 결정이 끝난다.
 * 가로로 펴면 「얼마 · 어느 회차 · 무엇이 들어가나 · 신청」이 한눈에 같이 보인다.
 *
 * 새로 넣는 말은 전부 이미 정해진 사실뿐이다 — 날짜·정원·장소·금액·포함물·환불 조건.
 * 마감 임박이나 할인 같은 안 정한 말은 넣지 않는다. */

.sell-top .dot { opacity: .38; }
.sell-line b { display: block; }

@media (min-width: 1080px) {
  /* 세 칸으로 눕힌다.
   *  왼쪽  — 안내표(일정·시간·장소·정원·준비물·수강 대상). 원래 위에 있던 띠를 여기로 옮겼다
   *  가운데 — 회차별 금액 + 함께 가는 것
   *  오른쪽 — 얼마인지 보고 바로 누르게, 금액을 신청 단추 바로 위에 둔다
   * 안내표와 수강료 칸을 한 테두리로 묶어 한 덩어리로 읽히게 한다. */
  .info-split {
    display: grid !important;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 0;
    /* 세 칸 높이를 맞춘다. 안 맞으면 왼쪽 배경과 세로선이 중간에 끊긴다. */
    align-items: stretch !important;
    border: 1px solid rgba(23,23,15,.14);
    border-radius: 6px;
    overflow: hidden;
  }

  /* 왼쪽 — 안내표 세로로 */
  .info-split > .spec {
    display: block; margin: 0; padding: 26px 0;
    height: 100%; align-self: stretch;
    border-right: 1px solid rgba(23,23,15,.14);
    background: #FBFAF8;
  }
  /* 왼쪽 칸에는 가로선을 긋지 않는다.
     오른쪽 회차 표와 칸 높이가 달라 선끼리 어긋난다 — 맞출 수 없으니 아예 뺀다.
     대신 여백으로 나눈다. */
  .info-split > .spec .spec-row {
    display: block; margin: 0; padding: 0 24px; border: 0;
  }
  .info-split > .spec .spec-row + .spec-row { margin-top: 24px; }
  .info-split > .spec dt { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(11,6,27,.45); }
  .info-split > .spec dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; letter-spacing: -.28px; color: #0B061B; }
  .info-split > .spec .spec-row:first-child dd { color: #FF4800; }

  /* 오른쪽 — 회차 · 포함물 · 금액 · 신청 */
  .price-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(276px, .85fr);
    grid-template-areas:
      "tiers money"
      "tiers coupon"
      "tiers act"
      "tiers pnote"
      "tnote line"
      "give  give";
    align-items: start;
    align-content: start;
    height: 100%;
    column-gap: 0; row-gap: 0;
    margin: 0; padding: 0;
    border: 0 !important; border-radius: 0 !important;
    overflow: hidden;
  }
  .price-card > .tiers        { grid-area: tiers; margin: 0; padding: 26px 28px 8px; }
  .price-card > .give { grid-area: give; margin: 0; padding: 0 28px 26px; }
  /* 제자리 결제(2026-09-04): 회차 고르기·안내 두 줄이 왼쪽 열, 단추 아래 상태 줄은 오른쪽 열 */
  .price-card > .tier-pick { grid-area: tiers; margin: 0; padding: 26px 28px 0; }
  .price-card > .tier-note { grid-area: tnote; margin: 0; padding: 10px 28px 26px; }
  .price-card > .pay-note  { grid-area: pnote; margin: 0; padding: 10px 28px 0; border-left: 1px solid rgba(23,23,15,.14); }
  .price-card > .coupon-box { grid-area: coupon; margin: 0; padding: 18px 28px 0; border-left: 1px solid rgba(23,23,15,.14); }
  .price-card > .pay-note:empty { display: block; padding: 0; }

  /* 금액 — 신청 단추 바로 위 */
  .price-card > .price-top {
    grid-area: money; margin: 0; padding: 26px 28px 0;
    border-left: 1px solid rgba(23,23,15,.14);
  }
  .price-card > .price-actions {
    grid-area: act; display: flex; flex-direction: column; gap: 10px;
    margin: 0; padding: 18px 28px 0;
    border-left: 1px solid rgba(23,23,15,.14);
  }
  .price-card > .price-actions .button { width: 100%; justify-content: center; }
  .price-card > .sell-line {
    grid-area: line; margin: 0; padding: 14px 28px 26px;
    border-left: 1px solid rgba(23,23,15,.14);
    font-size: 13px; line-height: 1.65;
  }
}

/* 1080px 아래 — 지금 세로 배치 그대로. 새로 붙인 두 줄만 자연스럽게 흐른다 */
@media (max-width: 1079px) {
  .sell-top { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; font-size: 13px; }
  .sell-line { margin: 12px 0 0; font-size: 13px; line-height: 1.7; }
}

/* 수강료 칸만 레이온 결로. 페이지 나머지는 안 건드린다.
 * 레이온 밝은 판(www.rayon.design) 실측값 —
 *   바탕 흰색 · 패널 #F7F4F7 · 글자 #0B061B / 70% · 강조 주황 #FF4800
 *   모서리 6px · 그림자 0 · 굵기 400/600/800 · 자간 음수 · 1px 점선 주황(그 사이트 서명 같은 표식) */

.price-card{
  --rc-bg:#FFFFFF; --rc-panel:#F7F4F7;
  --rc-ink:#0B061B; --rc-ink2:rgba(11,6,27,.7); --rc-ink3:rgba(11,6,27,.45);
  --rc-line:rgba(11,6,27,.14); --rc-accent:#FF4800;

  background:var(--rc-bg) !important;
  color:var(--rc-ink) !important;
  border:1px solid var(--rc-line) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}

/* 맨 윗줄 — 사실만 담는 얇은 띠 */
.price-card > .sell-top{
  background:var(--rc-panel);
  border-bottom:1px solid var(--rc-line) !important;
  color:var(--rc-ink2);
  font-size:14px !important; letter-spacing:-.28px;
}
.price-card > .sell-top b{ color:var(--rc-ink); font-weight:600; font-size:14px !important; }
.price-card > .sell-top .dot{ color:var(--rc-ink3); opacity:1; }

/* 금액 — 레이온은 큰 숫자를 800 굵기에 자간 -2px 로 놓는다 */
.price-card .price-label{
  margin:0 0 10px !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rc-accent) !important;
}
.price-card .price-num{
  margin:0 !important; font-size:50px !important; font-weight:800 !important;
  letter-spacing:-2px !important; line-height:.92 !important; color:var(--rc-ink) !important;
}
.price-card .price-num span{ font-size:22px !important; font-weight:600 !important; letter-spacing:-.88px; }
.price-card .price-num i{
  display:block; margin-top:10px; font-style:normal;
  font-size:14px !important; font-weight:400 !important; letter-spacing:-.28px; color:var(--rc-ink2) !important;
}
.price-card .price-note{
  font-size:14px !important; line-height:1.4 !important; letter-spacing:-.28px;
  color:var(--rc-ink2) !important;
}

/* 회차 표 — 선은 실선 대신 점선 한 겹만 (레이온의 그 주황 점선) */
.price-card .tiers{
  border-left:1px solid var(--rc-line) !important;
  border-right:1px solid var(--rc-line) !important;
}
.price-card .tiers .spec-row{
  border-bottom:1px dashed rgba(255,72,0,.34) !important;
  padding:13px 0 !important;
}
.price-card .tiers .spec-row:last-child{ border-bottom:0 !important; }
.price-card .tiers dt{ font-size:14px !important; font-weight:400 !important; letter-spacing:-.28px; color:var(--rc-ink2) !important; }
.price-card .tiers dd{ font-size:14px !important; font-weight:600 !important; letter-spacing:-.28px; color:var(--rc-ink) !important; }

/* 포함물 — 체크 대신 주황 점선 위의 작은 라벨 */
.price-card .price-includes{
  border-left:1px solid var(--rc-line) !important;
  border-right:1px solid var(--rc-line) !important;
  border-top:1px dashed rgba(255,72,0,.34) !important;
  padding-top:20px !important;
}
.price-card .price-includes li{ list-style:none; }
.price-card .price-includes li::before{ content:none !important; }
.price-card .price-includes b{
  display:block; font-size:14px !important; font-weight:600 !important;
  letter-spacing:-.28px; color:var(--rc-ink) !important;
}
.price-card .price-includes span{
  display:block; margin-top:2px; font-size:14px !important; font-weight:400 !important;
  letter-spacing:-.28px; color:var(--rc-ink2) !important;
}

/* 신청 — 레이온 단추는 높이 40, 모서리 6, 글자 14/600. 주 단추만 주황 */
.price-card .price-actions .button{
  min-height:40px !important; height:40px; padding:0 20px !important;
  border-radius:6px !important; font-size:14px !important; font-weight:600 !important;
  letter-spacing:-.28px; box-shadow:none !important;
  background:var(--rc-accent) !important; color:#fff !important; border:1px solid transparent !important;
}
.price-card .price-actions .button.ghost{
  background:rgba(11,6,27,.06) !important; color:var(--rc-ink) !important;
  border:1px solid rgba(11,6,27,.3) !important;
}
.price-card .sell-line{
  font-size:14px !important; line-height:1.4 !important; letter-spacing:-.28px; color:var(--rc-ink2) !important;
}
.price-card .sell-line b{ color:var(--rc-ink) !important; font-weight:600 !important; font-size:14px !important; }

/* 회차 표 — 왼쪽은 「몇 회차 · 언제」, 오른쪽은 금액만.
 * 금액은 자릿수를 맞춰 오른쪽으로 세운다. 세로로 훑으며 비교하는 값이다. */
.price-card .tiers .spec-row{
  display:flex !important; align-items:baseline; justify-content:space-between; gap:18px;
}
.price-card .tiers dt{ flex:1 1 auto; font-size:14px !important; font-weight:600 !important; color:var(--rc-ink) !important; }
.price-card .tiers dt small{
  display:block; margin-top:3px; font-size:13px; font-weight:400;
  letter-spacing:-.28px; color:var(--rc-ink3) !important;
}
.price-card .tiers dd{
  flex:0 0 auto; margin:0 !important; text-align:right;
  font-size:16px !important; font-weight:600 !important; letter-spacing:-.36px;
  font-variant-numeric:tabular-nums; color:var(--rc-ink) !important;
}
/* 부분 수강 줄은 금액이 아니라 안내다. 오른쪽 글씨를 낮춘다. */
.price-card .tiers .tier-note dd{
  font-size:14px !important; font-weight:400 !important; color:var(--rc-ink2) !important;
}

/* 「함께 가는 것」과 「알아둘 것」을 한 덩어리로. 두 줄로 나란히 세운다. */
.price-card .give{
  display:grid; grid-template-columns:1fr 1fr; gap:0 30px;
  border-top:1px dashed rgba(255,72,0,.34); padding-top:20px !important;
}
.price-card .give-head{
  margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rc-accent) !important;
}
.price-card .give ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.price-card .give li{ list-style:none; }
.price-card .give li::before{ content:none !important; }
.price-card .give b{
  display:block; font-size:14px !important; font-weight:600 !important;
  letter-spacing:-.28px; color:var(--rc-ink) !important;
}
.price-card .give span{
  display:block; margin-top:2px; font-size:13px !important; font-weight:400 !important;
  line-height:1.5; letter-spacing:-.28px; color:var(--rc-ink2) !important;
}
.price-card .give .warn b{ color:var(--rc-accent) !important; }
.price-card .give .warn span{ color:var(--rc-ink) !important; font-weight:500 !important; }
.price-card .know-links{
  margin:14px 0 0; font-size:12px; line-height:1.7; color:var(--rc-ink3) !important;
}
.price-card .know-links a{ color:var(--rc-ink) !important; text-decoration:underline !important; }
@media(max-width:1079px){ .price-card .give{ grid-template-columns:1fr; gap:22px; } }

/* 줄바꿈 — 한국어는 낱말 가운데서 끊기면 읽기가 나빠진다.
 * keep-all 로 낱말을 통째로 넘기고, pretty 로 마지막 줄에 한 낱말만 남는 것을 막는다. */
.price-card, .info-split > .spec{ word-break:keep-all; overflow-wrap:break-word; }
.price-card .give span,
.price-card .give b,
.price-card .know-links,
.info-split > .spec dd{ text-wrap:pretty; }

/* 왼쪽 안내표 — 값 아래 작은 설명 줄 */
.info-split > .spec dd small{
  display:block; margin-top:3px; font-size:13px; font-weight:400;
  letter-spacing:-.28px; color:var(--rc-ink2, rgba(11,6,27,.7));
}
.price-card .know-links .agree{ display:block; margin-top:5px; }

/* 「알아둘 것」은 규정 문장이라 줄일 수 없다. 칸을 넓혀 끊기는 자리를 줄인다. */
.price-card .give{ grid-template-columns:0.8fr 1.2fr; gap:0 26px; }

/* 「함께 가는 것 · 알아둘 것」 — 폭을 다 쓰고 항목마다 한 줄로.
 * 제목은 왼쪽에 고정 폭, 설명은 오른쪽. 두 줄로 접히던 문장이 한 줄에 선다. */
.price-card .give{ display:block !important; padding-top:22px !important; }
.price-card .give-col + .give-col{ margin-top:22px; padding-top:20px; border-top:1px dashed rgba(255,72,0,.34); }
.price-card .give ul{ display:block; margin:0; padding:0; }
.price-card .give li{
  display:grid; grid-template-columns:196px minmax(0,1fr); gap:0 22px; align-items:baseline;
  padding:9px 0;
}
.price-card .give li + li{ border-top:1px solid rgba(11,6,27,.07); }
.price-card .give b{ margin:0; }
.price-card .give span{ margin:0 !important; }
.price-card .know-links{
  display:grid; grid-template-columns:196px minmax(0,1fr); gap:0 22px; align-items:baseline;
  margin:10px 0 0 !important; padding-top:10px; border-top:1px solid rgba(11,6,27,.07);
}
.price-card .know-links .agree{ margin:0 !important; }
@media(max-width:1079px){
  .price-card .give li, .price-card .know-links{ grid-template-columns:1fr; gap:2px; }
}

/* ── UI 손질 ────────────────────────────────────────────────
 * 문제였던 것: 가로선이 8줄이라 시끄럽고, 제목 열이 위 회차 표와 세로로 안 맞고,
 * 설명 글자가 너무 흐렸다. 선을 그룹 사이 1줄로 줄이고 세 칸 리듬으로 맞춘다. */

/* 1 · 그룹 이름을 왼쪽 레일로 */
.price-card .give-col{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 24px; align-items:start;
}
.price-card .give-col + .give-col{
  margin-top:0; padding-top:18px; border-top:1px solid rgba(11,6,27,.10) !important;
}
.price-card .give-col .give-head{
  margin:9px 0 0 !important; font-size:12px; letter-spacing:.1em;
}

/* 2 · 항목 사이 선을 없애고 여백으로. 제목 열은 회차 표와 같은 결로 */
.price-card .give li{
  grid-template-columns:190px minmax(0,1fr); gap:0 20px; padding:9px 0 !important;
}
.price-card .give li + li{ border-top:0 !important; }

/* 3 · 설명 글자를 한 단계 진하게 — 너무 흐려서 안 읽혔다 */
.price-card .give span{ color:rgba(11,6,27,.78) !important; font-size:13.5px !important; }
.price-card .give .warn span{ color:var(--rc-ink) !important; }

/* 4 · 링크 줄도 같은 레일에 */
.price-card .know-links{
  grid-template-columns:190px minmax(0,1fr); gap:0 20px;
  margin:8px 0 0 !important; padding-top:12px; border-top:1px solid rgba(11,6,27,.07);
}
.price-card .know-links a:first-child{ font-weight:600; }
.price-card .know-links .agree{ margin:0 !important; color:var(--rc-ink3) !important; }

/* 5 · 금액 — 라벨을 숫자 위에 작게. 옆에 붙으면 자리가 어정쩡하다 */
.price-card .price-top{ text-align:left; }
.price-card .price-label{ margin:0 0 6px !important; }
.price-card .price-num{ display:block; }

/* 6 · 단추 — 높이와 사이 간격을 하나로 */
.price-card .price-actions{ gap:8px !important; padding-top:16px !important; }
.price-card .price-actions .button{ height:48px !important; min-height:48px !important; }

/* 손질 2 — 남은 셋을 잡는다
 *  ① 「함께 가는 것」 세 줄을 감싸던 네모 테두리 (파는 장 모양표가 넣던 것)
 *  ② 링크 줄이 왼쪽 레일 칸으로 밀려 들어간 것
 *  ③ 제목 열이 그룹마다 어긋나던 것 — 180px 하나로 통일 */
.price-card .price-includes,
.price-card .know{ border:0 !important; padding:0 !important; background:none !important; }

.price-card .give-col{ grid-template-columns:150px minmax(0,1fr); }
.price-card .give-col > ul,
.price-card .give-col > .know-links{ grid-column:2; }

.price-card .give li,
.price-card .know-links{ grid-template-columns:180px minmax(0,1fr) !important; gap:0 20px !important; }
.price-card .give li{ padding:7px 0 !important; }

.price-card .know-links{ margin-top:6px !important; padding-top:12px !important; }
.price-card .know-links .agree{ display:block; }

/* 링크 줄은 설명 열에 맞춰 세운다 — 제목 열에 걸치면 어긋나 보인다 */
.price-card .know-links{
  display:block !important; padding-left:200px !important;
  margin-top:4px !important; padding-top:14px !important;
}
.price-card .know-links .agree{ display:block; margin-top:4px !important; }

/* 링크 줄 한 줄로 */
.price-card .know-links{ display:block !important; }
.price-card .know-links .dot{ margin:0 8px; color:rgba(11,6,27,.3); }

/* 링크는 칸 폭을 다 쓰게 — 제목 열만큼 밀면 자리가 모자라 넉 줄이 된다 */
.price-card .know-links{ padding-left:0 !important; white-space:nowrap; font-size:12px !important; }

/* 금액 — 라벨이 숫자 옆에 붙어 두 줄로 접혔다. 위로 올린다 */
.price-card .price-top{ display:block !important; }
.price-card .price-label{ display:block; white-space:nowrap; }
.price-card .price-num i{ white-space:nowrap; }
/* 링크 줄은 설명 열에 맞춰 한 줄 */
.price-card .know-links{ padding-left:200px !important; white-space:nowrap; }
.price-card .give li span a{ color:var(--rc-ink) !important; text-decoration:underline !important; }

/* 판매가 멈춘 동안 — 단추는 눌리지 않게, 이유는 그 아래 한 줄로 */
.button.is-off{
  background:rgba(11,6,27,.10) !important; color:rgba(11,6,27,.45) !important;
  border:1px solid rgba(11,6,27,.14) !important; cursor:default; pointer-events:none;
}
.pause-note{
  margin:12px 0 0; font-size:13px; line-height:1.6; color:rgba(11,6,27,.7);
}
.pause-note b{ color:#FF4800; font-weight:600; }

/* 잠긴 단추 — 결제칸 안 단추 규칙(주황)보다 점수가 높아야 이긴다 */
.price-card .price-actions .button.is-off,
.give .button.is-off, .button.is-off{
  background:rgba(11,6,27,.09) !important; color:rgba(11,6,27,.5) !important;
  border:1px solid rgba(11,6,27,.16) !important; box-shadow:none !important;
  cursor:default; pointer-events:none;
}
.price-card .price-actions .pause-note{ margin-top:10px; }

/* 「청약철회」 라벨은 먹색으로 — 주황은 강조색이라 다른 곳과 무게가 겹친다.
   글 자체는 굵게 남겨 눈에 띈다. */
.price-card .give .warn b{ color:var(--rc-ink) !important; }

/* 4 · 폰 되돌림 — 위 「UI 손질」「손질 2」가 미디어쿼리 밖에서 고정 폭(150/180px)을 !important 로 박아
 * 폰용 1fr 을 덮어썼다. 390px 실측(2026-09-04): 열 150px+115px, 항목 격자 180px+0px → 설명 폭 0,
 * 글자가 세로로 흘렀다. 고정 폭 규칙은 반드시 이 블록 앞에 둔다. tests/plano3MobileGive.test.js 가 순서를 지킨다. */
@media(max-width:1079px){
  .price-card .give-col{ display:block; }
  .price-card .give-col > ul, .price-card .give-col > .know-links{ grid-column:auto; }
  .price-card .give-col .give-head{ margin:0 0 10px !important; }
  .price-card .give li{ grid-template-columns:1fr !important; gap:2px !important; }
  .price-card .know-links{ grid-template-columns:1fr !important; padding-left:0 !important; white-space:normal; }
}

/* ===== 제자리 결제 — 회차 고르기 (2026-09-04) ===== */
.price-card .tier-pick{display:grid;gap:8px;margin:6px 0 10px}
.price-card .tier-opt{display:grid;grid-template-columns:18px 1fr auto;grid-template-areas:"r n p" "r s p";column-gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(11,6,27,.14);border-radius:6px;cursor:pointer;background:#fff}
.price-card .tier-opt.is-on{border-color:#FF4800;box-shadow:inset 0 0 0 1px #FF4800}
.price-card .tier-opt input{grid-area:r;margin:0;accent-color:#FF4800}
.price-card .tier-opt .tier-name{grid-area:n;font-size:14px;font-weight:600;color:var(--rc-ink)}
.price-card .tier-opt .tier-sub{grid-area:s;font-size:12.5px;color:rgba(11,6,27,.62)}
.price-card .tier-opt b{grid-area:p;font-size:14px;font-weight:600;color:var(--rc-ink);white-space:nowrap}
.price-card .tier-note{margin:0 0 4px;font-size:12.5px;color:rgba(11,6,27,.62)}
.price-card .price-actions .button[data-pay-now]{border:0;cursor:pointer;font:inherit;font-weight:750}
.price-card .price-actions .button[data-pay-now]:disabled{opacity:.6;cursor:default}
.price-card .pay-note{margin:8px 0 0;min-height:1em;font-size:12.5px;line-height:1.6;color:rgba(11,6,27,.6)}
.price-card .pay-note:empty{display:none}

/* ===== 무통장 입금 팝업 (2026-09-04) ===== */
.price-card .price-actions .button[data-bank-now]{border:1px solid rgba(11,6,27,.3) !important;background:#fff !important;color:var(--rc-ink) !important;cursor:pointer;font:inherit;font-weight:600}
.bank-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.bank-modal[hidden]{display:none}
.bank-modal-back{position:absolute;inset:0;background:rgba(11,6,27,.55)}
.bank-modal-box{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;padding:26px 24px 22px;border-radius:12px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.25);font-family:inherit}
.bank-modal-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:transparent;font-size:26px;line-height:1;color:rgba(11,6,27,.5);cursor:pointer}
.bank-modal-eyebrow{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rc-accent)}
.bank-modal-box h3{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--rc-ink)}
.bank-modal-amount{margin:0 0 16px;font-size:14px;color:rgba(11,6,27,.7)}
.bank-modal-amount b{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--rc-ink)}
.bank-modal-form{display:grid;gap:10px}
.bank-modal-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--rc-ink)}
.bank-modal-form input{min-height:46px;padding:0 12px;border:1px solid rgba(11,6,27,.18);border-radius:8px;font:inherit;font-size:15px}
.bank-modal-form .button,.bank-modal-result .button{width:100%;justify-content:center;border:0;cursor:pointer;font:inherit;font-weight:700}
.bank-modal-form .button:disabled{opacity:.6;cursor:default}
.bank-modal-note{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:rgba(11,6,27,.62)}
.bank-modal-result{display:grid;gap:12px}
.bank-modal-result[hidden]{display:none}
.bank-modal-result dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;padding:14px;border-radius:8px;background:#f6f5f1;font-size:14px}
.bank-modal-result dt{color:rgba(11,6,27,.6)}
.bank-modal-result dd{margin:0;font-weight:600;color:var(--rc-ink);word-break:break-all}
.bank-modal-result .button.ghost{border:1px solid rgba(11,6,27,.3);background:#fff;color:var(--rc-ink)}
.bank-modal .bank-modal-form .button{background:var(--rc-accent) !important;color:#fff !important}

/* 무통장 팝업 — 열자마자 계좌 (2026-09-04 대표 지시) */
.bank-modal-box{background:#eef1ec}
.bank-modal-box h3{font-size:15px;font-weight:600;color:rgba(11,6,27,.7);margin-bottom:10px}
.bank-modal-account{margin:0 0 16px;font-size:17px;line-height:1.45;color:var(--rc-ink)}
.bank-modal-account b{font-weight:800;font-size:19px;letter-spacing:-.2px}
.bank-modal-account span{font-size:15px;font-weight:600;color:rgba(11,6,27,.8)}
.bank-modal-rows{margin:0 0 16px;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px}
.bank-modal-rows dt{color:rgba(11,6,27,.62)}
.bank-modal-rows dd{margin:0;text-align:right;font-weight:700;color:var(--rc-ink)}
.bank-modal-box > .button[data-bank-copy]{width:auto;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:#2f5a4a !important;color:#fff !important;font:inherit;font-weight:700;cursor:pointer}
.bank-modal-box > .bank-modal-note{margin-top:14px}

/* ===== 쿠폰 칸 — 「지금 신청하기」 위 (2026-09-04) ===== */
.price-card .coupon-box{margin:0 0 4px}
.price-card .coupon-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin:0}
.price-card .coupon-row > span{font-size:13px;font-weight:700;color:var(--rc-ink)}
.price-card .coupon-row input{min-height:44px;padding:0 12px;border:1px solid rgba(11,6,27,.14);border-radius:6px;background:#fff;font:inherit;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.price-card .coupon-apply{min-height:44px;padding:0 14px;border:1px solid rgba(11,6,27,.3);border-radius:6px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--rc-ink);cursor:pointer;white-space:nowrap}
.price-card .coupon-apply:disabled{cursor:wait;opacity:.55}
.price-card .coupon-state{margin:0;min-height:0;font-size:13px;line-height:1.55}
.price-card .coupon-state:not(:empty){margin-top:7px}
.price-card .coupon-state.is-applied{color:#1c6b45;font-weight:700}
.price-card .coupon-state.is-error{color:#a3372f;font-weight:700}

/* ===== 영수증 줄 — 왼쪽 회차·날짜, 오른쪽 금액 (대표 선택 2026-09-04: 회차 18 / 날짜 13 / 금액 22) ===== */
.price-card .price-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 12px;border-bottom:1px solid #e4e2dd}
.price-card .price-k{font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.15;color:var(--rc-ink)}
.price-card .price-k b{font-weight:800}
.price-card .price-k small{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:0;color:#4a4657}
.price-card .price-v{text-align:right;font-size:22px;font-weight:800;letter-spacing:-.6px;line-height:1.1;white-space:nowrap;color:var(--rc-ink)}
.price-card .price-v em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:0;margin-left:1px}
.price-card .price-v small{display:block;margin-top:3px;font-size:12px;font-weight:500;letter-spacing:0;color:#8a8794}
/* 쿠폰 — 상자 없이 밑줄 하나, 「적용」은 글자 */
.price-card .coupon-box{margin:0}
.price-card .coupon-row{display:flex;align-items:flex-end;gap:12px;padding:12px 0;border-bottom:1px solid #e4e2dd}
.price-card .coupon-row > span{font-size:13px;font-weight:600;color:#4a4657;padding-bottom:1px}
.price-card .coupon-row input{flex:1;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;font-size:15px;letter-spacing:.06em;text-align:right;color:var(--rc-ink);outline:0}
.price-card .coupon-row input::placeholder{color:#c2c0bb}
.price-card .coupon-row input:disabled{color:#4a4657}
.price-card .coupon-apply{min-height:0;padding:0 0 1px;border:0;border-radius:0;background:transparent;font-size:13.5px;font-weight:700;color:var(--rc-ink)}
.price-card .coupon-state:not(:empty){margin-top:8px}
.price-card .price-actions{padding-top:16px !important}
@media(min-width:1080px){
  .price-card > .coupon-box{padding:0 28px}
  .price-card > .price-top{padding-bottom:0}
}

/* 회원 정보에 이름·번호가 없을 때만 나오는 두 줄 — 결제장으로 안 보낸다 (2026-09-04 대표: 「그 페이지 안 쓴다」) */
.price-card .buyer-fill[hidden]{display:none}
.price-card .buyer-fill .coupon-row input{text-transform:none;letter-spacing:0}
@media(min-width:1080px){ .price-card > .buyer-fill{grid-area:coupon;align-self:end;margin-top:96px;padding:0 28px} }