/*
 * home-feat-a.css: the features wrapper box and two feature blocks of the home page,
 * booking (data-section="feat-booking") and naver (data-section="feat-naver").
 *
 *   1. Features wrapper (.h-features, the box around all six feature blocks)
 *   2. Pieces both blocks use: icon colors, the chip icon, card text
 *   3. Booking: two fixed-height cards, each with a calendar picture cut off at the card edge
 *   4. Naver: one gradient card with a photo, a phone screen and a green chip on top
 *   5. Tablet  (810 to 1199.98)
 *   6. Mobile  (809.98 and below)
 *
 * Every selector sits under the root class .h-feat-a. The one exception is .h-features itself:
 * it is styled on its own selector only, never through it, because the blocks inside it have
 * their own owners. Class names start with hfa-. The block frame, head, kicker row, kicker,
 * title and subtitle come from home-base.css (.hb-*). The appear motion comes from base.css.
 *
 * Values are computed values of the original page at twelve widths from 1920 to 360.
 * The faces are registered as weight 400, so every text rule keeps font-weight 400.
 * Shadow colors keep the original hex alpha (40 = 64/255, 4d = 77/255), not a rounded decimal.
 */

/* 1. Features wrapper ------------------------------------------------------------------- */
.h-features {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center; gap: 45px;
  width: 100%; height: min-content; padding: 120px 100px; margin: 0;
  flex: none; position: relative; overflow: hidden; background-color: #fff;
}

/* 2. Shared pieces ---------------------------------------------------------------------- */
/* Kicker icon drawings and pictures that fill their box come from home-base.css. */
.h-feat-a .hfa-chip-icon > svg {
  display: block; width: 100%; height: 100%; fill: currentColor; user-select: none;
}
.h-feat-a .hfa-icon-clock { color: rgb(125, 184, 232); }
.h-feat-a .hfa-icon-link { color: rgb(125, 232, 179); }

/* Card text: Bold 26px / 1.4em. The labels drop to 20px on tablet, every line on mobile. */
.h-feat-a .hfa-ct {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-bold); font-size: 26px; line-height: 1.4em; text-align: center;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  flex: none; height: auto; position: relative;
}

/* 3. Booking ---------------------------------------------------------------------------- */
.h-feat-a .hfa-card {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: flex-start;
  width: 1000px; height: 720px; padding: 40px; margin: 0;
  flex: none; position: relative; overflow: hidden; border-radius: 40px;
}
.h-feat-a .hfa-card-cal { gap: 50px; background-color: #e3f6ff; }
.h-feat-a .hfa-card-settle { gap: 30px; padding: 40px 40px 0; background-color: #e6eeff; }

.h-feat-a .hfa-ctext {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center; gap: 10px;
  height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; z-index: 1;
}
.h-feat-a .hfa-ctext-cal { width: min-content; }
.h-feat-a .hfa-ctext-settle { width: 100%; }

/* The calendar card text box is as wide as its second line, which does not wrap. */
.h-feat-a .hfa-cal-label { align-self: stretch; width: auto; color: rgb(90, 120, 176); }
.h-feat-a .hfa-cal-line { width: auto; white-space: pre; text-align: start; color: rgb(118, 169, 194); }
.h-feat-a .hfa-settle-label { width: 100%; color: rgb(107, 95, 161); }
.h-feat-a .hfa-settle-line { width: 100%; color: rgb(167, 137, 204); }

/* The white board under the calendar text: 593px high, it cuts the picture, the card cuts it. */
.h-feat-a .hfa-board {
  width: 100%; height: 593px; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
  background-color: #fff; border-radius: 18px;
}
.h-feat-a .hfa-shot {
  width: 100%; height: auto; aspect-ratio: 1.3703703703703705 / 1;
  flex: none; position: relative; overflow: visible;
}
.h-feat-a .hfa-shot-cal { position: absolute; top: 0; left: 0; }

/* 4. Naver ------------------------------------------------------------------------------ */
.h-feat-a .hfa-nwrap {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center; gap: 30px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: visible;
  background-color: #fff; border-radius: 20px;
}
.h-feat-a .hfa-ncard {
  width: 100%; height: auto; aspect-ratio: 1.6181229773462784 / 1;
  flex: none; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #eaffe8, #e6faff); border-radius: 40px;
}
.h-feat-a .hfa-photo {
  position: absolute; left: 46%; bottom: 51px; transform: translate(-50%);
  width: 832px; height: auto; aspect-ratio: 1.9703791469194314 / 1;
  flex: none; overflow: visible; opacity: 0.88;
  border-radius: 35px; box-shadow: 0 0 35px #c2c2c240;
}
.h-feat-a .hfa-phone {
  position: absolute; left: 618px; bottom: 0;
  width: 303px; height: auto; aspect-ratio: 0.5627769571639586 / 1;
  flex: none; overflow: visible;
  filter: drop-shadow(0px -7px 27px rgba(148, 148, 148, 0.25));
}
.h-feat-a .hfa-chip {
  position: absolute; left: 50%; bottom: 91px; transform: translate(-50%);
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; align-content: center; justify-content: center; gap: 10px;
  width: min-content; height: min-content; padding: 20px 40px; margin: 0;
  flex: none; overflow: hidden;
  background-color: var(--c-brand); border-radius: 19px; box-shadow: 0 1px 30px #62d3774d;
}
.h-feat-a .hfa-chip-icon {
  display: block; position: relative; flex: none; width: 32px; height: 32px; color: #fff;
}
.h-feat-a .hfa-chip-text {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  font-family: var(--font-bold); font-size: 20px; line-height: 1.2em; color: #fff;
  text-align: start; white-space: pre;
  flex: none; position: relative;
}

/* 5. Tablet ----------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .h-features { padding: 40px; }

  .h-feat-a .hfa-card { width: 100%; height: 568px; }
  .h-feat-a .hfa-ct-label { font-size: 20px; }

  .h-feat-a .hfa-photo { width: 80%; }
  .h-feat-a .hfa-phone {
    left: 428px; bottom: -30px; width: 34%;
    filter: none; border-radius: 18px; box-shadow: 0 -7px 62px #94949440;
  }
}

/* 6. Mobile ----------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .h-features { gap: 12px; padding: 40px 16px; }

  .h-feat-a .hfa-card { width: 100%; height: 327px; padding: 20px; border-radius: 14px; }
  .h-feat-a .hfa-ctext { gap: 4px; }
  .h-feat-a .hfa-ct { font-size: 20px; }
  /* The board becomes a plain column as tall as its picture. The card edge cuts it. */
  .h-feat-a .hfa-board {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: center; align-content: center; justify-content: center; gap: 10px;
    height: min-content; background-color: transparent; border-radius: 0;
  }
  .h-feat-a .hfa-shot-cal { position: relative; top: auto; left: auto; }

  .h-feat-a .hfa-krow-naver { gap: 4px; }
  .h-feat-a .hfa-ncard { border-radius: 14px; }
  .h-feat-a .hfa-photo { left: 16px; bottom: 37px; transform: none; width: 64%; border-radius: 18px; }
  .h-feat-a .hfa-phone { left: 213px; bottom: -1px; width: 102px; }
  .h-feat-a .hfa-chip { bottom: 19px; padding: 20px 30px; border-radius: 14px; }
  .h-feat-a .hfa-chip-icon { width: 24px; height: 24px; }
  .h-feat-a .hfa-chip-text { font-size: 16px; }
}