/*
 * compare.css: the "여러 플랜의 옵션 비교" section.
 * Every selector sits under the root class .s-compare.
 * Values are the computed values and measurements of the original page. The boxes:
 *   .s-compare     section, white, clips overflow
 *   .cmp-inner     inner box (padding 60px 0, gap 40px)
 *   .cmp-headwrap  heading wrapper
 *   .cmp-titlebox  heading box (data-appear="fade")
 *   .cmp-scroll    table wrapper (scrolls sideways on tablet and mobile)
 *   .cmp-cont      table container
 *   .cmp-table     table root
 *   .cmp-body      38 rows, 1000px wide
 * Keep line-height and letter-spacing in em: rounding to px changes the table height (2549.5625px).
 */

/* Section ------------------------------------------------------------------ */

.s-compare {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 45px; padding: 120px 100px;
  flex: none; width: 100%; height: min-content;
  position: relative; overflow: hidden;
  background-color: #fff;
}

.s-compare .cmp-inner {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 40px; padding: 60px 0;
  flex: none; width: 1000px; height: min-content;
  position: relative; overflow: hidden;
}

.s-compare .cmp-headwrap {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: flex-start; align-content: flex-start; justify-content: center;
  gap: 10px; padding: 0;
  flex: none; width: 1000px; height: min-content;
  position: relative; overflow: hidden;
}

/* The appear preset owns opacity, transform and will-change of this box (base.css section 5). */
.s-compare .cmp-titlebox {
  display: flex; flex-direction: column; justify-content: flex-start;
  flex: none; flex-shrink: 0; width: 100%; height: auto;
  position: relative; overflow: visible;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

.s-compare .cmp-title {
  margin: 0; padding: 0;
  font-family: var(--font-bold); font-style: normal; font-weight: 400;
  font-size: 36px; line-height: 1.4em; letter-spacing: normal;
  text-align: center; text-transform: none; text-decoration: none;
  color: var(--c-text);
}

.s-compare .cmp-scroll {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 30px; padding: 0;
  flex: none; width: 100%; height: min-content;
  position: relative; overflow: visible;
  border-radius: 20px; background-color: #fff;
}

.s-compare .cmp-cont { flex: none; width: 1000px; height: auto; position: relative; }

.s-compare .cmp-table {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 10px; padding: 0;
  width: 100%; height: min-content;
  position: relative; background-color: #fff;
}

.s-compare .cmp-body {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 0; padding: 0;
  flex: none; width: 1000px; height: min-content;
  position: relative; overflow: visible;
}

/* Text preset mpu97g (13px Pretendard Medium). <strong> stays in the Medium face: weight 700 is
   drawn as synthetic bold, exactly like the original. Do not switch to the Bold face. */
.s-compare .cmp-p {
  display: block; margin: 0; padding: 0;
  font-family: var(--font-medium); font-style: normal; font-weight: 400;
  font-size: var(--text-body-size); line-height: var(--text-body-line); letter-spacing: var(--text-body-spacing);
  text-align: start; text-transform: none; text-decoration: none;
  color: var(--c-text);
}
.s-compare strong { font-weight: 700; }

/* Header row (row 0, 70px) --------------------------------------------------- */

.s-compare .cmp-row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: flex-start;
  gap: 0; padding: 0;
  flex: none; width: 100%; height: 70px;
  position: relative; overflow: visible;
}

.s-compare .cmp-hcell {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 10px; padding: 20px;
  flex: 1 0 0px; width: 1px; height: 100%;
  position: relative; overflow: hidden;
  background-color: #fff;
}

.s-compare .cmp-htext {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1 0 0px; flex-shrink: 0; width: 1px; height: auto;
  position: relative;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.s-compare .cmp-htext--label { height: 30px; }
.s-compare .cmp-p--plan { text-align: center; }

/* Group rows (12 rows, 60.796875px): #fafafa band with 1px #d9d9d9 lines inside top and bottom. */

.s-compare .cmp-grow {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: flex-start;
  gap: 0; padding: 20px;
  flex: none; width: 100%; height: min-content;
  position: relative; overflow: visible;
  background-color: var(--c-surface-soft);
}
.s-compare .cmp-grow::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  box-sizing: border-box; border-style: solid; border-color: #d9d9d9; border-width: 1px 0;
  border-radius: inherit; pointer-events: none;
}

.s-compare .cmp-ginner {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: flex-start;
  gap: 8px; padding: 0;
  flex: 1 0 0px; width: 1px; height: min-content;
  position: relative; overflow: visible;
}

.s-compare .cmp-gtext {
  display: flex; flex-direction: column; justify-content: center;
  align-self: stretch; flex: none; flex-shrink: 0; width: auto; height: auto;
  position: relative; white-space: pre;
}

/* Item rows (25 rows, 70px): label cell 250x70, plan cells 250x60 centred in the row. */

.s-compare .cmp-irow {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: flex-start;
  gap: 0; padding: 0;
  flex: none; width: 100%; height: min-content;
  position: relative; overflow: visible;
}

.s-compare .cmp-lcell,
.s-compare .cmp-pcell {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center;
  gap: 10px; padding: 20px;
  flex: 1 0 0px; width: 1px; height: min-content;
  position: relative; overflow: hidden;
  background-color: #fff;
}
.s-compare .cmp-lcell { justify-content: flex-start; }
.s-compare .cmp-pcell { justify-content: center; }

.s-compare .cmp-ltext {
  display: flex; flex-direction: column; justify-content: center;
  flex: none; flex-shrink: 0; width: auto; height: 30px;
  position: relative; white-space: pre;
}
/* Row 21 label: the original focusable div is a button here (policy h). Same box, pointer cursor. */
.s-compare .cmp-ltext--btn { cursor: pointer; }

/* Icons: Phosphor bold 20x20, inline SVG painted with currentColor. */
.s-compare .cmp-icon { display: block; flex: none; width: 20px; height: 20px; position: relative; }
.s-compare .cmp-svg {
  display: block; width: 100%; height: 100%; flex-shrink: 0;
  fill: currentColor; user-select: none; -webkit-user-select: none; pointer-events: none;
}
/* Info icon: a button for keyboard access, but it keeps the original arrow cursor and grey colour. */
.s-compare .cmp-info { cursor: auto; color: #b8b8b8; }

.s-compare .cmp-c-partner { color: #46cf66; }      /* rgb(70, 207, 102) */
.s-compare .cmp-c-standard { color: #475fd6; }     /* rgb(71, 95, 214) */
.s-compare .cmp-c-premium { color: #fa5c5c; }      /* rgb(250, 92, 92) */
.s-compare .cmp-c-premium-alt { color: #fa6666; }  /* rgb(250, 102, 102), rows 7 and 8 */
.s-compare .cmp-c-none { color: #ededed; }         /* rgb(237, 237, 237) */
.s-compare .cmp-c-none-alt { color: #efefef; }     /* rgb(239, 239, 239), rows 24, 25 and 32 */

/* Tooltip ----------------------------------------------------------------------
 * One shared box, positioned by compare.js in section coordinates (absolute, so it scrolls with
 * the page and stays put when the table scrolls sideways). No animation, no arrow (original).
 */
.s-compare .cmp-tip { position: absolute; top: 0; left: 0; z-index: 11; width: 300px; height: auto; }
.s-compare .cmp-tip--wide { width: 315px; } /* row 8 only */
/* Rows 3, 4 and 5 only: the original tooltip box of these rows keeps will-change transform, so it
   is drawn in its own layer and the text and shadow edges come out a little different. */
.s-compare .cmp-tip--layer .cmp-tip-box { will-change: transform; }

.s-compare .cmp-tip-box {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center;
  gap: 10px; padding: 16px;
  width: 100%; height: min-content;
  position: relative; overflow: hidden;
  background-color: rgba(31, 31, 31, 0.8); border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px 0px;
}

.s-compare .cmp-tip-tbox {
  display: flex; flex-direction: column; justify-content: flex-start;
  flex: 1 0 0px; flex-shrink: 0; width: 1px; height: auto;
  position: relative;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.s-compare .cmp-tip-p { color: #fff; text-align: left; }

/* Tablet 810 - 1199.98 ------------------------------------------------------------ */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .s-compare { padding: 40px; }
  .s-compare .cmp-inner,
  .s-compare .cmp-headwrap { width: 100%; }
  .s-compare .cmp-title { font-size: 28px; }
  /* The table stays 1000px and sticks to the left, also at 1120 - 1199 where it fits (original). */
  .s-compare .cmp-scroll { align-items: flex-start; align-content: flex-start; justify-content: flex-start; overflow: auto; }
  .s-compare .cmp-cont { width: auto; }
}

/* Mobile up to 809.98 ---------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .s-compare { gap: 12px; padding: 24px 16px; }
  .s-compare .cmp-inner { width: 100%; align-items: flex-start; align-content: flex-start; overflow: auto; }
  .s-compare .cmp-headwrap { width: 100%; }
  .s-compare .cmp-title { font-size: 22px; }
  .s-compare .cmp-scroll { align-items: flex-start; align-content: flex-start; overflow: auto; }
  .s-compare .cmp-cont { width: auto; }
}