/*
 * top.css: fixed nav, hero gradient, title and subtitle, three plan cards.
 * Every selector sits under the root class .s-top (the <header> and the first <section>).
 * Values are the computed values of the original page.
 * Breakpoints are the base contract: desktop rules first, then the tablet and the mobile block.
 *
 *   1. Section tokens
 *   2. Text presets
 *   3. Nav (desktop and tablet)
 *   4. Hero (gradient box, title, subtitle)
 *   5. Plan cards
 *   6. Tablet  (810 to 1199.98)
 *   7. Mobile  (809.98 and below), with the menu open state
 */

/* 1. Section tokens ------------------------------------------------------------ */

.s-top {
  --top-line: rgba(0, 0, 0, 0.07);           /* nav bottom line (border via ::after) */
  --top-row-line: rgb(238, 238, 238);         /* mobile menu row bottom line */
  --top-bar: rgb(153, 153, 153);              /* burger bars */
  --top-btn-bg: rgb(51, 51, 51);              /* 도입 상담하기 box */
  --top-btn-shadow:
    rgba(0, 0, 0, 0.06) 0px 0.706592px 0.706592px -0.625px,
    rgba(0, 0, 0, 0.06) 0px 1.80656px 1.80656px -1.25px,
    rgba(0, 0, 0, 0.055) 0px 3.62176px 3.62176px -1.875px,
    rgba(0, 0, 0, 0.05) 0px 6.8656px 6.8656px -2.5px,
    rgba(0, 0, 0, 0.043) 0px 13.6468px 13.6468px -3.125px,
    rgba(0, 0, 0, 0.02) 0px 30px 30px -3.75px;
  --top-hero-bg: linear-gradient(rgba(255, 255, 255, 0), rgba(252, 252, 247, 0.75) 74.7748%, rgb(245, 252, 246));
  --top-title-lead: linear-gradient(270deg, rgb(98, 211, 119) 0%, rgb(27, 207, 60) 100%);
  --top-sub: rgb(120, 120, 120);              /* hero subtitle */
  --top-desc: rgb(130, 130, 130);             /* card description */
  --top-icon: rgb(153, 153, 153);             /* card check icon */
  --top-card-shadow: rgba(214, 214, 214, 0.25) 0px 1px 35px 0px;
}

/* 2. Text presets ---------------------------------------------------------------
 * .top-t13 is the body preset mpu97g (Medium 13px / 20.8px / -0.26px, #333).
 * The faces are registered as weight 400, so every text rule keeps font-weight 400.
 */
.s-top .top-t13 {
  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); color: var(--c-text); text-align: start;
  text-transform: none; text-decoration: none;
}

/* 3. Nav (desktop and tablet) -------------------------------------------------------
 * The original fixes a wrapper with left 50% + translate(-50%). That shifts the nav half a pixel
 * at odd widths, so the header uses left 0 and width 100% instead.
 */
.s-top.top-hdr {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.s-top .top-nav {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 20px; width: 100%; height: 64px; padding: 20px 60px; overflow: visible;
  background-color: rgb(255, 255, 255); scrollbar-width: none;
}
.s-top .top-nav::-webkit-scrollbar { width: 0px; height: 0px; }
.s-top .top-nav::-webkit-scrollbar-thumb { background: transparent; }

/* The 1px bottom line, drawn over the box like the original [data-border]::after. */
.s-top .top-nav::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  box-sizing: border-box; border: 0 solid var(--top-line); border-bottom-width: 1px;
  border-radius: inherit; pointer-events: none;
}

.s-top .top-name {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center flex-start;
  align-items: center; gap: 20px; flex: 0 0 auto; width: min-content; height: min-content;
  padding: 0; overflow: visible;
}

.s-top .top-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 82px;
  height: 16px;
  background-image: url("../img/camfit-logo-green.svg");
  background-size: 100% 100%;
  image-rendering: pixelated;
  text-decoration: none;
}

/* The burger is a mobile-only <button> (policy h). */
.s-top .top-burger { display: none; }

.s-top .top-links {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center flex-end;
  align-items: center; gap: 30px; flex: 1 0 0px; width: 1px; height: min-content; padding: 0;
  overflow: hidden;
}

/* 홈 is plain text in the original (a <p>, not a link). Kept as is. */
.s-top .top-home {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  user-select: none;
}

/* Text links (preset aac0o0). Policy a: the <a> is the whole "Inline Link" box (33 or 55 wide),
   the span is the original text box: centered in it, carrying the underline where the original
   inline <a> drew it. The text is 0.06 to 0.11px narrower than the box, so centering matters. */
.s-top .top-link {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; height: min-content; white-space: pre;
  user-select: none; color: var(--c-link-gray); text-decoration: none;
  transition: color var(--dur-link) var(--ease-framer);
}
.s-top .top-w33 { width: 33px; }
.s-top .top-w55 { width: 55px; }
.s-top .top-lt { display: block; flex: 0 0 auto; text-decoration: none; }
.s-top .top-link[aria-current="page"],
.s-top .top-mrow[aria-current="page"] { color: var(--c-link-gray-current); }
.s-top .top-link[aria-current="page"] .top-lt,
.s-top .top-mrow[aria-current="page"] .top-lt { text-decoration: underline; }
.s-top .top-link:hover,
.s-top .top-mrow:hover { color: var(--c-link-gray-hover); }
.s-top .top-link:hover .top-lt,
.s-top .top-mrow:hover .top-lt { text-decoration: none; }

/* 도입 상담하기 (preset 1qf738v on the text). Policy a: the <a> is the whole dark box. */
.s-top .top-cta {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: min-content; height: 36px; padding: 15px;
  overflow: visible; background-color: var(--top-btn-bg); border-radius: 8px;
  box-shadow: var(--top-btn-shadow); white-space: pre; color: var(--c-link-white);
  text-decoration: none;
}
.s-top .top-cta:hover { color: var(--c-link-white-hover); }
.s-top .top-ct { display: block; flex: 0 0 auto; }

/* Keyboard focus ring. Policy a made the link boxes bigger, but the ring stays around the text as
   in the original, where each link was an inline box inside the text (Chrome UA link offset 1px).
   .top-ring is that inline box. Parents with overflow hidden cut the ring the same way. */
.s-top .top-link:focus-visible,
.s-top .top-cta:focus-visible,
.s-top .top-mrow:focus-visible { outline: none; }
.s-top .top-link:focus-visible .top-ring,
.s-top .top-cta:focus-visible .top-ring,
.s-top .top-mrow:focus-visible .top-ring {
  outline: auto 1px; outline: auto 1px -webkit-focus-ring-color; outline-offset: 1px;
}

/* Mobile menu parts stay out of the desktop and tablet nav. */
.s-top .top-mlinks,
.s-top .top-mcta { display: none; }

/* 4. Hero ---------------------------------------------------------------------------
 * .top-bg is the original "Main" box: the gradient covers the hero text and the card row.
 * .top-tw is the rich text wrapper. It carries data-appear="hero" (base.css owns the motion).
 */
.s-top.top-bg {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center flex-start;
  align-items: center; gap: 40px; flex: 0 0 auto; width: 100%; height: auto; padding: 120px 0 0;
  overflow: hidden; background-color: transparent; background-image: var(--top-hero-bg);
}

.s-top .top-hero {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: 100%; height: min-content; padding: 40px 0;
  overflow: hidden;
}

.s-top .top-tw {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  flex: 0 0 auto; width: auto; max-width: 100%; height: auto; white-space: pre-wrap;
  word-break: break-word; overflow-wrap: break-word; outline: none;
}

.s-top .top-h1 {
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.4em;
  letter-spacing: -0.6px;
  color: var(--c-brand);
  text-align: center;
}

.s-top .top-h4 {
  font-family: var(--font-semibold);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4em;
  letter-spacing: 0;
  color: var(--top-sub);
  text-align: start;
}

/* Title words by breakpoint: 숙소 from 810 up, 캠핑장 below (as in the original). */
.s-top .top-m { display: none; }

/* 5. Plan cards ------------------------------------------------------------------------ */

.s-top .top-plans {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 14px; flex: 0 0 auto; width: 100%; height: min-content;
  padding: 20px 40px; overflow: visible;
}

.s-top .top-cards {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: 1000px; height: min-content; padding: 0;
  overflow: visible;
}

/* The standard card sets the row height; partner and premium stretch to it. */
.s-top .top-card {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center flex-start;
  align-items: center; gap: 60px; flex: 1 0 0px; width: 1px; height: auto; padding: 40px 20px 20px;
  overflow: hidden; border-radius: 14px; box-shadow: var(--top-card-shadow);
}
.s-top .top-partner { align-self: stretch; background-color: rgb(239, 252, 235); }
.s-top .top-standard { height: min-content; background-color: rgb(240, 248, 255); }
.s-top .top-premium { align-self: stretch; background-color: rgb(255, 240, 240); }

.s-top .top-head {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 24px; flex: 0 0 auto; width: 100%; height: min-content; padding: 0;
  overflow: hidden;
}

.s-top .top-htop {
  position: relative; display: flex; flex-flow: column nowrap; place-content: flex-start center;
  align-items: flex-start; gap: 4px; flex: 0 0 auto; width: 100%; height: min-content; padding: 0;
  overflow: hidden;
}

.s-top .top-chip {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: min-content; height: min-content;
  padding: 4px 12px; overflow: hidden; border-radius: 7px;
}
.s-top .top-chipt { flex: 0 0 auto; white-space: pre; }
.s-top .top-partner .top-chip { background-color: rgb(195, 237, 185); }
.s-top .top-standard .top-chip { background-color: rgb(211, 229, 242); }
.s-top .top-premium .top-chip { background-color: rgb(250, 207, 205); }
.s-top .top-partner .top-chipt { color: rgb(64, 140, 45); }
.s-top .top-standard .top-chipt { color: rgb(92, 151, 196); }
.s-top .top-premium .top-chipt { color: rgb(214, 86, 77); }

.s-top .top-h3 {
  position: relative; flex: 0 0 auto; width: auto; font-family: var(--font-bold); font-weight: 400;
  font-size: 22px; line-height: 1.5em; letter-spacing: 0; text-align: start; white-space: pre;
}
.s-top .top-partner .top-h3 { color: rgb(67, 184, 40); }
.s-top .top-standard .top-h3 { color: rgb(67, 174, 232); }
.s-top .top-premium .top-h3 { color: rgb(245, 66, 66); }

.s-top .top-price {
  position: relative; flex: 0 0 auto; width: auto; font-family: var(--font-semibold);
  font-weight: 400; font-size: 19px; line-height: 1.4em; letter-spacing: 0; color: var(--c-text);
  text-align: start; white-space: pre;
}

/* The partner card has full-width title and price boxes in the original. */
.s-top .top-full {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.s-top .top-desc {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  color: var(--top-desc);
}

.s-top .top-list {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: 16px;
  flex: 0 0 auto;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: hidden;
}
.s-top .top-partner .top-list { place-content: flex-start; align-items: flex-start; }
.s-top .top-standard .top-list { width: 99%; place-content: center flex-end; align-items: center; }
.s-top .top-premium .top-list { place-content: center flex-start; align-items: center; }

.s-top .top-row {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center flex-start;
  align-items: center; gap: 12px; flex: 0 0 auto; width: 99%; height: min-content; padding: 0;
  overflow: hidden;
}
.s-top .top-blank { min-height: 21px; }

.s-top .top-check {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--top-icon);
}
.s-top .top-check svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  user-select: none;
}

.s-top .top-rt { position: relative; flex: 0 0 auto; white-space: pre; }

/* 6. Tablet ------------------------------------------------------------------------------ */

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* The original span is 50px inside a 40px heading preset: 65px lines (1.3em of 50px). */
  .s-top .top-h1 { line-height: 1.3em; }

  .s-top .top-cards { flex: 1 0 0px; width: 1px; }
  .s-top .top-card { padding: 12px; }
  .s-top .top-h3 { font-size: 20px; }
  .s-top .top-price { font-size: 15px; }
  .s-top .top-fill {
    flex: 1 0 0px;
    width: 1px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* 7. Mobile -------------------------------------------------------------------------------
 * Closed: the Name row (logo + burger) only. Open (.is-open, set by top.js): 홈, 요금제, Home and
 * the button. Height, bar position and bar angle move together on spring C (400/40, 550ms).
 * justify-content flex-start (original center) keeps the rows in place while the height moves.
 * The end states are the same, because the open content fills the box exactly. Only in a viewport
 * under 392px tall the original center pushes the top rows up and out of scroll reach. Here they stay.
 * The 120px bottom padding moves with the height. A border-box is never shorter than its padding,
 * so a padding set at once made the box jump from 64px to 120px in the first frame of the opening.
 * The original closes with a layout projection that scales the 1px bottom line up to about 6px for
 * a few frames. That glitch is not copied: the line stays 1px.
 */
@media (max-width: 809.98px) {
  .s-top .top-nav {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    overflow: hidden;
    transition:
      height var(--spring-c-ms) var(--spring-c),
      padding-bottom var(--spring-c-ms) var(--spring-c);
  }

  .s-top .top-name {
    width: 100%;
    height: 64px;
    padding: 0 10px 0 20px;
    justify-content: space-between;
    gap: 0;
    z-index: 2;
    cursor: pointer;
  }

  /* The whole Name row toggles the menu. The logo sits above the button and stays a link. */
  .s-top .top-burger {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .s-top .top-logo { z-index: 1; }

  .s-top .top-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 44px;
    height: 44px;
    overflow: hidden;
  }

  .s-top .top-bar {
    position: absolute;
    left: calc(50% - 10px);
    display: block;
    width: 20px;
    height: 2px;
    overflow: hidden;
    background-color: var(--top-bar);
    border-radius: 10px;
    transition:
      top var(--spring-c-ms) var(--spring-c),
      transform var(--spring-c-ms) var(--spring-c);
  }
  .s-top .top-bar-t { top: calc(37.5% - 1px); }
  .s-top .top-bar-b { top: calc(62.5% - 1px); }
  /* The original bars get will-change transform from their first move on and keep it. */
  .s-top .top-moved .top-bar { will-change: transform; }

  .s-top .top-links,
  .s-top .top-dcta { display: none; }

  .s-top .top-mlinks {
    position: relative; display: flex; flex-flow: column nowrap; place-content: flex-start;
    align-items: flex-start; gap: 0; flex: 0 0 auto; width: 100%; height: 168px; padding: 0 20px;
    overflow: hidden; z-index: 2;
  }

  /* 홈 and 요금제 rows. Policy a: the <a> is the whole 56px row. */
  .s-top .top-mrow {
    position: relative; display: flex; flex-flow: row nowrap; place-content: center flex-start;
    align-items: center; gap: 15px; flex: 0 0 auto; width: 100%; height: 56px; padding: 0;
    overflow: hidden; white-space: pre; user-select: none; color: var(--c-link-gray);
    text-decoration: none; transition: color var(--dur-link) var(--ease-framer);
  }
  .s-top .top-mrow::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    box-sizing: border-box; border: 0 solid var(--top-row-line); border-bottom-width: 1px;
    border-radius: inherit; pointer-events: none;
  }

  /* Home: plain text in the original menu. Kept as is. */
  .s-top .top-mhome {
    position: relative;
    flex: 0 0 auto;
    white-space: pre;
    user-select: none;
  }

  .s-top .top-mcta {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    width: 90%;
    height: 40px;
    padding: 20px;
    will-change: transform;
  }

  .s-top .top-nav.is-open {
    height: 392px;
    max-height: 100vh;
    padding: 0 0 120px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  /* The original keeps the bottom line about 380ms into the opening, then drops it at once. */
  .s-top .top-nav.is-open::after {
    border-bottom-width: 0;
    transition: border-bottom-width 0s linear 0.38s;
  }
  .s-top .is-open .top-bar { top: calc(50% - 1px); }
  .s-top .is-open .top-bar-t { transform: rotate(45deg); }
  .s-top .is-open .top-bar-b { transform: rotate(-45deg); }

  /* Hero */
  .s-top.top-bg { padding: 40px 0; }
  .s-top .top-hero { padding: 60px 20px; }
  .s-top .top-h1 { font-size: 32px; line-height: 1.3em; }
  .s-top .top-d { display: none; }
  .s-top .top-m { display: inline; }
  /* One space in the original gradient-text span: invisible, but it moves line 1 by 3.29px. */
  .s-top .top-lead {
    letter-spacing: -0.8px;
    background-image: var(--top-title-lead);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Cards */
  .s-top .top-plans { flex-direction: column; padding: 20px; }
  .s-top .top-cards { flex-direction: column; width: 100%; }
  .s-top .top-card { flex: 0 0 auto; gap: 20px; width: 100%; }
  .s-top .top-partner { align-self: auto; height: min-content; border-radius: 20px; }
  .s-top .top-standard { border-radius: 20px; }
  .s-top .top-premium { align-self: auto; height: min-content; padding: 20px; }
  .s-top .top-h3 { font-size: 16px; }
  .s-top .top-price { font-size: 14px; }
  .s-top .top-check { width: 24px; height: 24px; }
}