/* ================================================================
     livero-pricing.html — 기존 "요금제페이지_v4" 시안을 기반으로 수정.
     컬러/카드/타이포 시스템은 원본을 그대로 유지.
     주요 수정: Free/Standard/Pro/Max 4단, 연간결제 토글, 카톡전도 곧 서비스 예정 처리,
     쇼츠 크레딧 별도 섹션 분리, 다운그레이드 용어 제거, 데모 상태 전환(비회원/무료/유료) 등
     ================================================================ */
  :root {
      --bg: #F7F8FB;
      --card: #FFFFFF;
      --line: #E7EAF0;
      --ink: #14161F;
      --ink-dim: #787E92;
      --navy: #3646E0;
      --navy-deep: #1E2560;
      --navy-soft: #EBEDFC;
      --coral: #FF6B4A;
      --coral-text: #C94A2E;
      --coral-soft: #FFEDE8;
      --green: #2E9E5B;
      --green-soft: #E8F6EE;
      --amber: #FEBF24;
      --amber-soft: #FFF3D6;
      --amber-text: #A8710F;
      --radius: 22px;
  }

  * {
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  html,
  body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
  }

  body {
      font-family: 'Pretendard', -apple-system, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      word-break: keep-all;
  }

  a {
      color: inherit;
      text-decoration: none;
  }

  button {
      font-family: inherit;
      cursor: pointer;
  }

  .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
  }

  .gnb {
      background: #fff;
      border-bottom: 1.5px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 60;
  }

  .gnb-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 2px;
      font-weight: 800;
      font-size: 18px;
      color: var(--navy-deep);
  }

  .logo .pill {
      background: var(--coral);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 8px;
      margin-left: 6px;
  }

  .gnb-right {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .login-pill {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-dim);
      padding: 8px 14px;
      border-radius: 10px;
      border: 1.5px solid var(--line);
      background: #fff;
  }

  /* 데모: 사용자 상태 전환 바 */
  .demo-bar {
      background: var(--navy-deep);
      color: #fff;
  }

  .demo-bar .wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 9px 24px;
      font-size: 12.5px;
      flex-wrap: wrap;
  }

  .demo-bar .demo-label {
      font-weight: 700;
      opacity: .85;
  }

  .demo-bar select {
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      padding: 6px 11px;
      border-radius: 8px;
      border: none;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
  }

  .demo-bar select option {
      color: #14161F;
  }

  .sec-h {
      text-align: center;
      margin-bottom: 32px;
  }

  .sec-h h2 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 10px;
  }

  .sec-h p {
      font-size: 15px;
      color: var(--ink-dim);
      margin: 0;
  }

  /* 결제 주기 토글 */
  .cycle-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 0 auto 34px;
      width: fit-content;
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      padding: 5px;
  }

  .cycle-toggle button {
      border: none;
      background: none;
      font-size: 13.5px;
      font-weight: 700;
      padding: 9px 18px;
      border-radius: 999px;
      color: var(--ink-dim);
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .cycle-toggle button.on {
      background: var(--navy);
      color: #fff;
  }

  .cycle-toggle .save {
      font-size: 11px;
      font-weight: 800;
      background: var(--coral-soft);
      color: var(--coral-text);
      padding: 2px 7px;
      border-radius: 100px;
  }

  .plans {
      padding: 44px 0 32px;
  }

  .plan-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      align-items: stretch;
  }

  .plan {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      padding: 26px 22px;
      display: flex;
      flex-direction: column;
      position: relative;
      height: 540px;
  }

  .plan .p-name {
      font-size: 16.5px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .plan .p-for {
      font-size: 13px;
      color: var(--ink-dim);
      margin-top: 10px;
      min-height: 52px;
      line-height: 1.55;
  }

  .plan .p-price {
      margin: 16px 0 0;
      font-size: 29px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
  }

  .plan .p-price small {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink-dim);
      letter-spacing: 0;
  }

  .plan .p-annual-note {
      font-size: 12px;
      color: var(--green);
      font-weight: 700;
      margin-top: 6px;
      display: none;
  }

  .plan.annual .p-annual-note {
      display: block;
  }

  .plan .p-quota {
      margin: 16px 0 18px;
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--bg);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.6;
  }

  .plan .p-quota b {
      font-size: 16.5px;
      font-weight: 800;
  }

  .plan .p-quota .sub-q {
      display: block;
      font-size: 11.5px;
      color: var(--ink-dim);
      font-weight: 600;
      margin-top: 2px;
  }

  .plan ul {
      list-style: none;
      margin: 0 0 16px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
      font-size: 13px;
      flex: 1;
  }

  .plan li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      line-height: 1.5;
  }

  .plan li .ck {
      color: var(--navy);
      font-weight: 800;
      flex: 0 0 auto;
  }

  .plan li.sub {
      color: var(--ink-dim);
      font-size: 12px;
  }

  .plan .p-cta {
      margin-top: auto;
      font-size: 14.5px;
      font-weight: 800;
      padding: 13px;
      border-radius: 13px;
      border: 2px solid var(--navy);
      background: #fff;
      color: var(--navy);
      width: 100%;
  }

  .plan .p-cta:disabled {
      border-color: #EDEEF3;
      background: #F1F2F6;
      color: #AEB2C2;
      cursor: not-allowed;
  }

  .plan.free .p-cta {
      border-color: var(--line);
      color: var(--ink);
  }

  .plan.reco {
      background: var(--navy-deep);
      border-color: var(--navy-deep);
      color: #fff;
      box-shadow: 0 30px 60px -24px rgba(30, 37, 96, 0.5);
  }

  .plan.reco .p-for,
  .plan.reco .p-price small,
  .plan.reco .p-quota .sub-q {
      color: rgba(255, 255, 255, 0.65);
  }

  .plan.reco .p-quota {
      background: rgba(255, 255, 255, 0.09);
      color: #fff;
  }

  .plan.reco li .ck {
      color: var(--coral);
  }

  .plan.reco li.sub {
      color: rgba(255, 255, 255, 0.55);
  }

  .plan.reco .p-cta {
      background: var(--coral);
      border-color: var(--coral);
      color: #fff;
  }

  .plan.reco .p-cta:disabled {
      background: rgba(255, 255, 255, 0.12);
      border-color: transparent;
      color: rgba(255, 255, 255, 0.4);
  }

  .reco-tag {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--coral);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      padding: 5px 14px;
      border-radius: 100px;
      white-space: nowrap;
  }

  .plan-badge {
      display: none;
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 100px;
      white-space: nowrap;
  }

  .plan-badge.current {
      background: var(--green-soft);
      color: var(--green);
  }

  /* 수정: '변경 예약됨' 배지 — 다운그레이드 표현 대신 중립적 표현 사용 */
  .plan-badge.change {
      background: var(--amber-soft);
      color: var(--amber-text);
      top: 40px;
  }

  .plan.reco .plan-badge.current {
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
  }

  .plan.reco .plan-badge.change {
      background: rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.75);
      top: 40px;
  }

  .plan-foot {
      font-size: 13.5px;
      color: var(--ink-dim);
      text-align: center;
      margin-top: 20px;
      line-height: 1.7;
  }

  .ent-bar {
      margin-top: 14px;
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      padding: 22px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
  }

  /* 수정: 울트라·프리미엄을 프리미엄 하나로 통합한 상담 영역 */
  .ent-combined .ent-l {
      display: flex;
      align-items: center;
      gap: 22px;
      flex: 1;
      flex-wrap: wrap;
  }

  .ent-block {
      flex: 1;
      min-width: 220px;
  }

  .ent-block .ent-tag {
      margin-bottom: 8px;
      display: inline-block;
  }

  .ent-divider {
      width: 1px;
      align-self: stretch;
      background: var(--line);
      flex: 0 0 auto;
  }

  @media (max-width:760px) {
      .ent-combined .ent-l {
          flex-direction: column;
          align-items: flex-start;
      }

      .ent-divider {
          width: 100%;
          height: 1px;
      }
  }

  .ent-bar .ent-l {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
  }

  .ent-bar .ent-tag {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink-dim);
      background: var(--bg);
      padding: 5px 12px;
      border-radius: 100px;
  }

  .ent-name {
      font-size: 14.5px;
      font-weight: 700;
      line-height: 1.6;
      color: var(--ink);
      max-width: 520px;
  }

  .ent-bar .ent-desc {
      font-size: 13px;
      color: var(--ink-dim);
      line-height: 1.75;
      margin-top: 7px;
      max-width: 640px;
  }

  .ent-btn {
      font-size: 14px;
      font-weight: 800;
      padding: 12px 20px;
      border-radius: 12px;
      border: none;
      background: var(--navy-deep);
      color: #fff;
      white-space: nowrap;
  }

  /* 카톡전도 - 곧 서비스 예정 안내 */
  .soon-strip {
      margin-top: 14px;
      background: var(--amber-soft);
      border: 1.5px solid #F3DFA0;
      border-radius: 16px;
      padding: 16px 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      color: var(--amber-text);
      font-weight: 700;
  }

  .soon-strip .tag {
      background: var(--amber);
      color: #4A3300;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 100px;
      flex: 0 0 auto;
  }

  .compare {
      padding: 56px 0;
  }

  .cmp-note {
      text-align: center;
      font-size: 13px;
      color: var(--ink-dim);
      margin: -18px 0 22px;
  }

  /* 추가: 플랜별 기능 비교 표 접고 펼치기 */
  .cmp-details {
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 6px 22px 4px;
      overflow: hidden;
  }

  .cmp-summary {
      list-style: none;
      cursor: pointer;
      padding: 16px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 800;
      color: var(--ink);
  }

  .cmp-summary::-webkit-details-marker {
      display: none;
  }

  .cmp-summary-icon {
      color: var(--navy);
      font-weight: 800;
      transition: transform .2s;
  }

  .cmp-details[open] .cmp-summary-icon {
      transform: rotate(180deg);
  }

  .cmp-details .cmp-scroll {
      padding-bottom: 22px;
  }

  .cmp-scroll {
      overflow-x: auto;
  }

  table.cmp {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      min-width: 760px;
  }

  .cmp th,
  .cmp td {
      padding: 13px 16px;
      font-size: 13.5px;
      text-align: center;
      border-bottom: 1.5px solid var(--line);
  }

  .cmp th {
      font-size: 14px;
      font-weight: 800;
      background: #fff;
  }

  .cmp thead th .thp {
      display: block;
      font-size: 12px;
      color: var(--ink-dim);
      font-weight: 700;
      margin-top: 2px;
  }

  .cmp thead th.hl {
      background: var(--navy-deep);
      color: #fff;
  }

  .cmp thead th.hl .thp {
      color: rgba(255, 255, 255, 0.65);
  }

  .cmp td:first-child,
  .cmp th:first-child {
      text-align: left;
      width: 24%;
  }

  .cmp td.hl {
      background: var(--navy-soft);
      font-weight: 700;
  }

  .cmp .grp td {
      background: var(--bg);
      font-size: 12.5px;
      font-weight: 800;
      color: var(--ink-dim);
      text-align: left;
      padding: 9px 16px;
  }

  .cmp tr:last-child td {
      border-bottom: none;
  }

  .ok {
      color: var(--navy);
      font-weight: 800;
  }

  .no {
      color: #C9CDD9;
      font-weight: 800;
  }

  .cmp .soon {
      color: var(--amber-text);
      font-weight: 800;
      font-size: 11.5px;
      background: var(--amber-soft);
      padding: 2px 8px;
      border-radius: 100px;
  }

  /* 쇼츠 크레딧 — 요금제 카드와 분리된 별도 섹션 */
  .credits {
      padding: 16px 0 72px;
  }

  .credits .box {
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: var(--radius);
      padding: 36px;
  }

  .credits .box h3 {
      font-size: 20px;
      font-weight: 800;
      margin: 0 0 8px;
  }

  .credits .box p {
      font-size: 14px;
      color: var(--ink-dim);
      margin: 0 0 22px;
      line-height: 1.7;
  }

  .cc-btn {
      font-size: 15px;
      font-weight: 800;
      padding: 14px 24px;
      border-radius: 13px;
      border: none;
      background: var(--coral);
      color: #fff;
  }

  /* 추가: 쇼츠 크레딧 카드 3종 (참고 이미지 레이아웃) */
  .credit-rule {
      background: #FFF6E6;
      border: 1.5px solid #F3DFA0;
      border-radius: 14px;
      padding: 14px 17px;
      font-size: 13.5px;
      line-height: 1.75;
      color: #7A5A0B;
      margin: 16px 0 18px;
  }

  .credit-rule b {
      display: block;
      color: #8A5340;
      margin-bottom: 2px;
  }

  .credit-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 22px;
  }

  .credit-card {
      background: var(--bg);
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 18px 16px;
      position: relative;
      cursor: pointer;
      transition: .15s;
  }

  .credit-card:hover {
      border-color: #c7cbe0;
  }

  .credit-card.on {
      background: #fff;
      border-color: var(--navy);
      box-shadow: 0 6px 18px -6px rgba(54, 70, 224, .28);
  }

  .cc-check {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: transparent;
  }

  .credit-card.on .cc-check {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
  }

  .cc-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-dim);
      margin-bottom: 8px;
  }

  .cc-price {
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
  }

  .cc-unit {
      display: block;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--ink-dim);
      margin-top: 4px;
  }

  .cc-note {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-dim);
      margin-top: 8px;
  }

  .cc-note.cc-discount {
      color: var(--coral-text);
      font-weight: 800;
  }

  @media (max-width:640px) {
      .credit-cards {
          grid-template-columns: 1fr;
      }
  }

  @media (max-width:1080px) {
      .plan-grid {
          grid-template-columns: repeat(2, 1fr);
          max-width: 640px;
          margin: 0 auto;
      }

      .plan.reco {
          order: -1;
      }
  }

  @media (max-width:640px) {
      .plan-grid {
          grid-template-columns: 1fr;
          max-width: 400px;
      }

      .ent-bar {
          flex-direction: column;
          align-items: flex-start;
      }

      .sec-h h2 {
          font-size: 22px;
      }
  }

  /* 결제(PG) 이동 데모 모달 */
  .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(20, 22, 31, 0.52);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }

  .modal-overlay.show {
      display: flex;
  }

  .modal {
      background: #fff;
      border-radius: 20px;
      width: 100%;
      max-width: 380px;
      padding: 30px;
      text-align: center;
  }

  .modal .m-check {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--green-soft);
      color: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      margin: 0 auto 16px;
  }

  .modal h3 {
      font-size: 18px;
      font-weight: 800;
      margin: 0 0 10px;
  }

  .modal p {
      font-size: 13.5px;
      color: var(--ink-dim);
      margin: 0 0 20px;
      line-height: 1.6;
  }

  .modal button {
      width: 100%;
      padding: 13px;
      border-radius: 12px;
      font-size: 14.5px;
      font-weight: 800;
      border: none;
      background: var(--navy);
      color: #fff;
  }

  /* 추가: 요금제 선택 이후 프로세스 — 단계 표시 및 요약 카드 */
  .flow-progress {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 18px;
  }

  .flow-progress .fp-seg {
      flex: 1;
      height: 4px;
      border-radius: 99px;
      background: var(--line);
  }

  .flow-progress .fp-seg.done {
      background: var(--navy);
  }

  .flow-step-label {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: .03em;
      margin-bottom: 6px;
  }

  .flow-h3 {
      font-size: 17px;
      font-weight: 800;
      margin: 0 0 14px;
  }

  .flow-summary {
      background: var(--bg);
      border-radius: 14px;
      padding: 14px 16px;
      margin-bottom: 16px;
      font-size: 13px;
      line-height: 1.9;
  }

  .flow-summary .row {
      display: flex;
      justify-content: space-between;
  }

  .flow-summary .row b {
      font-weight: 800;
      color: var(--ink);
  }

  .flow-btn-row {
      display: flex;
      gap: 8px;
  }

  .flow-btn-row button {
      flex: 1;
  }

  .flow-btn-row .ghost {
      background: #fff;
      border: 1.5px solid var(--line);
      color: var(--ink);
  }

  .flow-input {
      width: 100%;
      border: 1.5px solid var(--line);
      border-radius: 11px;
      padding: 12px 14px;
      font-size: 14px;
      margin-bottom: 10px;
      font-family: inherit;
  }

  footer {
      padding: 0 0 60px;
  }

  .foot-grid {
      display: flex;
      justify-content: space-between;
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--line);
  }

  .foot-brand p {
      font-size: 15px;
      color: var(--ink-dim);
      max-width: 330px;
      margin-top: 16px;
      line-height: 1.75;
  }

  .foot-col {
      min-width: 150px;
  }

  .foot-col h4 {
      font-size: 15px;
      font-weight: 800;
      margin-bottom: 18px;
  }

  .foot-col a {
      display: block;
      font-size: 15px;
      color: var(--ink-dim);
      margin-bottom: 12px;
      transition: color .18s;
  }

  .foot-col a:hover {
      color: var(--blue);
  }

  .foot-note {
      font-size: 13.5px;
      color: var(--ink-dim);
      margin-top: 28px;
      line-height: 1.9;
  }

  .foot-note .cr {
      display: block;
      margin-top: 14px;
  }

  .pay-notice {
      border: 1px solid var(--line);
      background: #FBFCFE;
      border-radius: 14px;
      padding: 13px 15px;
      margin-top: 12px;
  }

  .pay-notice .pn-t {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 7px;
  }

  .pay-notice .pn-l {
      margin: 0;
      padding-left: 16px;
      font-size: 12.5px;
      line-height: 1.75;
      color: var(--ink-dim);
  }

  .pay-notice .pn-l li {
      margin-bottom: 3px;
  }

  .pay-notice .pn-l b {
      color: var(--ink);
      font-weight: 700;
  }

  .pay-notice a {
      color: var(--navy);
      font-weight: 700;
  }