/* ===================================================================================================== */
/* ========================================= QR알리미 플랜 ============================================== */
/* ===================================================================================================== */
/* Page-scoped stylesheet, matching the one-css-per-page convention used by
   QR_Introduction and QR_Features. The shared header and footer are injected at
   runtime by the component scripts and bring their own styles. */

/* Every sibling page resets this; without it the browser's default 8px body
   margin leaves a white gutter down the left of the full-bleed yellow header
   (and along the top and right). */
body {
  margin: 0;
  /* The header is position:fixed, so it takes no space in flow and the page
     title ends up underneath it. Two bars have to be cleared here, not one:
     the 64px top bar, plus the 83px sub-menu, which is permanently open on
     this page because desktop_header_component.js marks the "QR알리미 is"
     group active for /QR_Plan. Pages like QR_Introduction get away with
     ignoring this only because they open with a full-bleed hero image that
     is meant to sit under the header. */
  padding-top: 147px;
}

/* Below 459px the desktop header is display:none and the 65px mobile header
   takes over — no sub-menu, so the offset is much smaller. That breakpoint is
   set in css/mobile/header.css and css/desktop-header.css; keep them in sync. */
@media all and (max-width: 459px) {
  body {
    padding-top: 65px;
  }
}

.qr-page-container {
  width: 100%;
  overflow-x: hidden;
  font-family: "NanumSquare", "Nanum Gothic", sans-serif;
  color: #222;
  background: #fff;
}

/* Top padding is modest because body already offsets the fixed header; this is
   just breathing room between the header and the title. */
.plan-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 20px 96px;
  box-sizing: border-box;
}

/* ============================== Intro ============================== */

.plan-intro {
  text-align: center;
  margin-bottom: 56px;
}

.plan-intro-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 16px;
}

.plan-intro-lead {
  font-size: 17px;
  line-height: 1.7;
  color: #555;
  margin: 0;
}

.plan-intro-lead strong {
  color: #222;
  font-weight: 800;
}

/* ============================== Section ============================== */

.plan-section {
  margin-bottom: 72px;
}

.plan-section-title {
  font-family: "NEXON Lv1 Gothic OTF", "NanumSquare", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid #fae100;
  display: inline-block;
}

/* B2B 라이센스 heading renders one size down from the personal-plan heading
   in the source design (20px vs 24px) even though both use the same markup
   pattern — applied as a modifier rather than duplicating the block. */
.plan-section-title-sm {
  font-size: 20px;
}

.plan-section-note {
  font-size: 16px;
  line-height: 1.4;
  color: #9a9a9a;
  margin: 16px 0 28px;
}

.plan-section-footnote {
  margin: 28px 0 0;
  padding: 16px 18px;
  background: rgba(250, 225, 0, 0.1);
  border: 1px solid #fae100;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #454545;
}

.plan-section-footnote strong {
  font-weight: 800;
  color: #454545;
}

/* ============================== Cards ============================== */

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

.plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d6d6d6;
  border-radius: 12px;
  padding: 40px 24px;
  background: #fff;
  box-sizing: border-box;
}

/* Premium is the plan being steered toward, so it carries the brand accent. */
.plan-card-featured {
  border: 1px solid #fae100;
  box-shadow: 0 2px 16px 2px rgba(0, 0, 0, 0.1);
}

.plan-card-wide {
  max-width: 620px;
}

/* The B2B description runs two lines and sits tighter than the B2C cards'
   single-line price-sub, so it gets its own (smaller) type scale. */
.plan-card-wide .plan-card-price-sub {
  font-size: 12px;
  line-height: 1.4;
}

.plan-card-wide .plan-feature-list li {
  font-size: 14px;
  margin-bottom: 8px;
}

.plan-card-wide .plan-feature-list {
  margin-bottom: 28px;
}

.plan-card-head {
  border-bottom: 1px solid rgba(154, 154, 154, 0.5);
  padding-bottom: 20px;
  margin-bottom: 16px;
}

.plan-card-name {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
}

.plan-card-price {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-card-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-card-price-main {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

/* Plan-tier badge (F / B / P) sitting beside the price. Not a plain circle —
   Figma's "Union" icon (node 2618:24926, 2618:24942, 2618:24992) is a
   12-point scalloped blob, so the exact exported path is used as the
   background instead of a border-radius:50% circle. */
.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  flex: 0 0 auto;
}

.plan-badge-free {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M14.9971 0C16.5435 0 17.8634 0.962895 18.3945 2.32129C19.5337 1.40918 21.16 1.23611 22.5 2.00977C23.8386 2.78267 24.5015 4.27546 24.2832 5.7168C25.7234 5.50007 27.2151 6.16333 27.9873 7.50098C28.7597 8.83926 28.5867 10.4627 27.6777 11.6016C29.0371 12.1322 30 13.4537 30 15.001C30 16.5475 29.038 17.8683 27.6797 18.3994C28.5879 19.5383 28.7596 21.1612 27.9873 22.499C27.2151 23.8366 25.7243 24.4989 24.2842 24.2822C24.5032 25.724 23.841 27.218 22.502 27.9912C21.1613 28.7653 19.5338 28.591 18.3945 27.6777C17.8636 29.0365 16.5438 30 14.9971 30C13.4517 30 12.1314 29.0386 11.5996 27.6816C10.4607 28.5908 8.83734 28.7638 7.49902 27.9912C6.16051 27.2184 5.49771 25.7254 5.71582 24.2842C4.27522 24.5015 2.78323 23.839 2.01074 22.501C1.23813 21.1626 1.41024 19.5384 2.31934 18.3994C0.961712 17.868 2.09566e-05 16.547 0 15.001C0 13.4545 0.96207 12.1327 2.32031 11.6016C1.4114 10.4626 1.23924 8.83924 2.01172 7.50098C2.7839 6.16345 4.27477 5.50024 5.71484 5.7168C5.49658 4.27557 6.15959 2.7827 7.49805 2.00977C8.83644 1.237 10.4606 1.40907 11.5996 2.31836C12.1313 0.961306 13.4516 2.56967e-06 14.9971 0Z' fill='%23747474'/%3E%3C/svg%3E");
}

.plan-badge-basic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M14.9961 0C16.5426 0 17.8635 0.962787 18.3945 2.32129C19.5337 1.40874 21.1608 1.23601 22.501 2.00977C23.8396 2.78267 24.5025 4.27546 24.2842 5.7168C25.7243 5.50018 27.2151 6.16341 27.9873 7.50098C28.7599 8.83946 28.587 10.4626 27.6777 11.6016C29.0365 12.1324 29.999 13.4541 29.999 15.001C29.999 16.5474 29.0369 17.8682 27.6787 18.3994C28.5883 19.5385 28.7611 21.1623 27.9883 22.501C27.2157 23.8391 25.7239 24.5016 24.2832 24.2842C24.5013 25.7254 23.8385 27.2184 22.5 27.9912C21.1597 28.7648 19.5336 28.5904 18.3945 27.6777C17.8637 29.0366 16.5429 30 14.9961 30C13.4508 29.9998 12.1303 29.0385 11.5986 27.6816C10.4597 28.5906 8.83626 28.7639 7.49805 27.9912C6.15972 27.2184 5.49679 25.7253 5.71484 24.2842C4.27445 24.5012 2.78312 23.8388 2.01074 22.501C1.23802 21.1625 1.4101 19.5385 2.31934 18.3994C0.961712 17.868 2.09566e-05 16.547 0 15.001C0 13.4545 0.96207 12.1327 2.32031 11.6016C1.41132 10.4626 1.23916 8.83929 2.01172 7.50098C2.78377 6.16368 4.27403 5.50058 5.71387 5.7168C5.49562 4.2755 6.15944 2.78265 7.49805 2.00977C8.83631 1.23717 10.4597 1.40928 11.5986 2.31836C12.1303 0.961348 13.4507 0.000159604 14.9961 0Z' fill='%2354AAFA'/%3E%3C/svg%3E");
}

.plan-badge-premium {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M14.9971 0C16.5433 0 17.8643 0.962214 18.3955 2.32031C19.5346 1.40897 21.1604 1.23639 22.5 2.00977C23.8387 2.78268 24.5015 4.27546 24.2832 5.7168C25.724 5.49914 27.2166 6.16271 27.9893 7.50098C28.7617 8.83932 28.5888 10.4627 27.6797 11.6016C29.038 12.1326 30.0009 13.4535 30.001 15C30.001 16.5473 29.0371 17.8688 27.6777 18.3994C28.5874 19.5385 28.7601 21.1623 27.9873 22.501C27.2151 23.8386 25.7243 24.5008 24.2842 24.2842C24.5021 25.7251 23.8401 27.2174 22.502 27.9902C21.1616 28.7641 19.5347 28.5904 18.3955 27.6777C17.8647 29.0367 16.5439 30 14.9971 30C13.451 30 12.1309 29.0376 11.5996 27.6797C10.4605 28.5903 8.83623 28.7634 7.49707 27.9902C6.15897 27.2177 5.49543 25.7259 5.71289 24.2852C4.27382 24.5002 2.7843 23.8375 2.0127 22.501C1.23993 21.1622 1.41237 19.5374 2.32227 18.3984C0.963324 17.8676 0 16.547 0 15C8.33472e-05 13.4537 0.962252 12.1328 2.32031 11.6016C1.41135 10.4626 1.23924 8.83926 2.01172 7.50098C2.78391 6.16346 4.27475 5.50025 5.71484 5.7168C5.49657 4.27555 6.15952 2.7827 7.49805 2.00977C8.83647 1.237 10.4606 1.40908 11.5996 2.31836C12.1313 0.961326 13.4516 3.11312e-05 14.9971 0Z' fill='%23FAD054'/%3E%3C/svg%3E");
}

.plan-card-price-sub {
  font-size: 14px;
  color: #9a9a9a;
  line-height: 1.5;
}

/* ============================== Features ============================== */

.plan-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.plan-feature-list li {
  position: relative;
  padding: 0 0 0 24px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

.plan-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAE100' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.plan-card-includes {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(154, 154, 154, 0.5);
  font-size: 14px;
  font-weight: 800;
  color: #9a9a9a;
}

/* ============================== Responsive ============================== */

@media (max-width: 900px) {
  .plan-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .plan-card-wide {
    max-width: none;
  }
}

@media (max-width: 549px) {
  .plan-main {
    padding: 40px 16px 64px;
  }

  .plan-intro-title {
    font-size: 28px;
  }

  .plan-intro-lead {
    font-size: 15px;
  }

  .plan-section-title {
    font-size: 20px;
  }

  .plan-section-title-sm {
    font-size: 17px;
  }

  .plan-card {
    padding: 22px 18px;
  }

  .plan-card-price-main {
    font-size: 23px;
  }
}