@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Myeongjo:wght@800&family=Nanum+Pen+Script&display=swap');

:root {
        --night: #07111f;
        --night-deep: #030810;
        --pine: #10221f;
        --mist: #dce7ef;
        --ember: #f4b66a;
        --ember-soft: rgba(244, 182, 106, 0.18);
        --line: rgba(255, 255, 255, 0.18);
        --panel: rgba(7, 17, 31, 0.88);
        --panel-solid: #0b1724;
        --good: #89f0b5;
        --warn: #ffd18f;
        --danger: #ff9a9a;
        --home-left-rail: clamp(1rem, 9.2vw, 11rem);
        --home-right-rail: clamp(1rem, 10vw, 12rem);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--night);
        color: white;
        font-family:
          Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        line-break: strict;
        overflow-wrap: normal;
        word-break: keep-all;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        overflow-x: hidden;
      }

      body[data-page="home"] {
        scroll-snap-type: none;
      }

      a,
      button,
      input,
      select,
      textarea {
        font: inherit;
      }

      button,
      select {
        cursor: pointer;
      }

      .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        overflow: hidden;
        isolation: isolate;
        transform-origin: center;
        will-change: transform, filter;
        transition:
          transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
          filter 640ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      body.info-nav-open .hero {
        filter: brightness(0.74) saturate(0.86);
        transform: translateX(calc(-1 * min(18rem, 22vw))) scale(0.985);
      }

      body.info-detail-open .hero {
        filter: brightness(0.58) saturate(0.75);
        transform: translateX(0) scale(0.99);
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -4;
        background-image: url("../assets/camp-night-main-v2.png");
        background-position: center;
        background-size: cover;
        transform: scale(1.015);
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background:
          radial-gradient(circle at 42% 68%, rgba(244, 182, 106, 0.24), transparent 17rem),
          linear-gradient(90deg, rgba(2, 7, 14, 0.84), rgba(2, 7, 14, 0.24) 54%, rgba(2, 7, 14, 0.74)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.22) 0%, rgba(4, 10, 18, 0.52) 48%, rgba(5, 11, 19, 0.94) 100%);
      }

      .noise {
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        opacity: 0.14;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: linear-gradient(to bottom, black, transparent 80%);
      }

      .topbar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 24;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: min(100%, 80rem);
        margin: 0 auto;
        padding: 1.25rem;
      }

      .brand {
        flex-shrink: 0;
        color: white;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 750;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
      }

      .home-titlemark {
        margin: 0;
        color: white;
        font-size: clamp(1.75rem, 3vw, 3.6rem);
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1;
        text-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
        white-space: nowrap;
      }

      .nav {
        display: flex;
        min-width: 0;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
      }

      .nav-button,
      .text-button,
      .primary-button,
      .ghost-button,
      .danger-button {
        display: inline-flex;
        min-height: 2.5rem;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        padding: 0 1rem;
        text-decoration: none;
        font-size: 1.08rem;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
        backdrop-filter: blur(14px);
        transition:
          border-color 180ms ease,
          background 180ms ease,
          color 180ms ease,
          transform 180ms ease;
      }

      .actions .nav-button,
      .actions .text-button,
      .actions .primary-button,
      .actions .ghost-button,
      .actions .danger-button,
      .sms-verify-box .ghost-button {
        font-size: 1.05rem;
      }

      .primary-button,
      .ghost-button,
      .danger-button,
      .text-button,
      .nav-button {
        max-width: 100%;
        min-width: 0;
        text-align: center;
      }

      .nav-button:hover,
      .ghost-button:hover,
      .text-button:hover {
        border-color: rgba(244, 182, 106, 0.75);
        background: rgba(244, 182, 106, 0.16);
        transform: translateY(-1px);
      }

      .icon-button {
        width: 2.5rem;
        padding: 0;
      }

      .primary-button,
      .reserve-button {
        border-color: transparent;
        background: var(--ember);
        color: #07111f;
        font-weight: 800;
      }

      .primary-button:hover,
      .reserve-button:hover {
        background: #ffd18f;
        border-color: transparent;
        transform: translateY(-1px);
      }

      .floating-reserve-cta {
        position: fixed;
        left: 50%;
        bottom: 1.25rem;
        z-index: 42;
        display: inline-flex;
        min-height: 4.25rem;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        border: 1px solid rgba(255, 220, 170, 0.66);
        border-radius: 999px;
        background: linear-gradient(135deg, #ffc36f, #f4a94d);
        color: #07111f;
        padding: 0 2.35rem;
        font-size: 1.08rem;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        box-shadow:
          0 20px 70px rgba(0, 0, 0, 0.38),
          0 0 36px rgba(244, 182, 106, 0.2);
        transform: translateX(-50%);
        transition:
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .floating-reserve-cta:hover {
        box-shadow:
          0 24px 82px rgba(0, 0, 0, 0.42),
          0 0 44px rgba(244, 182, 106, 0.3);
        transform: translate(-50%, -2px);
      }

      .site-back-button {
        position: fixed;
        top: 5.25rem;
        right: max(1rem, calc((100vw - 80rem) / 2 + 1rem));
        z-index: 64;
        display: inline-flex;
        min-height: 2.55rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(7, 17, 31, 0.72);
        color: #ffffff;
        padding: 0 1.05rem;
        font-size: 0.92rem;
        font-weight: 850;
        line-height: 1;
        backdrop-filter: blur(14px);
        cursor: pointer;
        box-shadow: 0 16px 46px rgba(0, 0, 0, 0.3);
      }

      .site-back-button:hover {
        border-color: rgba(255, 220, 170, 0.48);
        background: rgba(15, 27, 45, 0.82);
      }

      body[data-page="home"] .site-back-button,
      body[data-page="reserve"] .floating-reserve-cta,
      body[data-page="account"] .floating-reserve-cta {
        display: none;
      }

      .primary-button:disabled,
      .ghost-button:disabled {
        cursor: default;
        opacity: 0.58;
        transform: none;
      }

      .primary-button:disabled:hover,
      .ghost-button:disabled:hover {
        transform: none;
      }

      .danger-button {
        border-color: rgba(255, 154, 154, 0.35);
        color: #ffe2e2;
      }

      .danger-button:hover {
        background: rgba(255, 154, 154, 0.12);
      }

      .content {
        width: min(100%, 80rem);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 7.4rem 1.25rem 10rem;
        text-align: right;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        padding: 0.56rem 0.78rem;
        color: rgba(220, 231, 239, 0.9);
        font-size: 0.74rem;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: none;
        white-space: nowrap;
        backdrop-filter: blur(14px);
      }

      h1 {
        max-width: 36rem;
        margin: 0;
        font-size: 5.25rem;
        font-weight: 760;
        line-height: 1.02;
        letter-spacing: 0;
        white-space: nowrap;
      }

      h1 span {
        display: block;
        color: rgba(220, 231, 239, 0.86);
      }

      .lead {
        max-width: 35rem;
        margin: 1.5rem 0 0;
        color: rgba(220, 231, 239, 0.84);
        font-size: 1.05rem;
        line-height: 1.75;
      }

      .signals {
        display: grid;
        max-width: 35rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 2rem;
      }

      .signal {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 0.75rem;
        color: rgba(220, 231, 239, 0.8);
        font-size: 0.9rem;
        text-align: right;
        white-space: nowrap;
      }

      .demo-rail {
        position: absolute;
        right: max(1rem, calc((100vw - 80rem) / 2 + 1.25rem));
        bottom: 1.25rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        width: min(28rem, calc(100vw - 2rem));
      }

      .mini-stat {
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0.75rem;
        background: rgba(7, 17, 31, 0.56);
        padding: 0.72rem;
        backdrop-filter: blur(16px);
      }

      .mini-stat strong {
        display: block;
        color: white;
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mini-stat span {
        display: block;
        margin-top: 0.25rem;
        color: rgba(220, 231, 239, 0.7);
        font-size: 0.72rem;
        white-space: nowrap;
      }

      .home-review-preview {
        position: absolute;
        top: clamp(7.75rem, 13vh, 9.5rem);
        left: clamp(1.25rem, 4vw, 4rem);
        right: auto;
        z-index: 6;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 0.85rem;
        width: min(45rem, 47vw);
        max-height: min(36rem, 57vh);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 16% 0%, rgba(244, 182, 106, 0.12), transparent 17rem),
          linear-gradient(180deg, rgba(7, 17, 31, 0.68), rgba(3, 8, 16, 0.78));
        padding: 1rem;
        box-shadow: 0 30px 110px rgba(0, 0, 0, 0.24);
        backdrop-filter: blur(18px);
      }

      .home-review-head,
      .home-review-row-meta,
      .home-review-dialog-head,
      .home-review-dialog-meta,
      .home-review-comments-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .home-review-head h2 {
        margin: 0;
        font-size: 1.35rem;
        letter-spacing: 0;
      }

      .home-review-count {
        display: inline-flex;
        min-width: 3rem;
        min-height: 2.2rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 999px;
        color: rgba(220, 231, 239, 0.78);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .home-review-copy {
        margin: 0;
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.88rem;
        line-height: 1.55;
      }

      .home-review-list {
        display: grid;
        gap: 0.55rem;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0.15rem;
      }

      .home-review-row {
        display: grid;
        gap: 0.45rem;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.055);
        color: white;
        padding: 0.85rem;
        text-align: left;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .home-review-row.has-thumb {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 32%);
        align-items: stretch;
        min-height: 7.35rem;
        gap: 0.8rem;
      }

      .home-review-row-copy {
        display: grid;
        min-width: 0;
        align-content: center;
        gap: 0.45rem;
      }

      .home-review-row-thumb {
        position: relative;
        display: block;
        min-height: 6.2rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.06);
      }

      .home-review-row-thumb img {
        width: 100%;
        height: 100%;
        min-height: inherit;
        display: block;
        object-fit: cover;
      }

      .home-review-row:hover {
        border-color: rgba(244, 182, 106, 0.52);
        background: rgba(244, 182, 106, 0.12);
        transform: translateY(-1px);
      }

      .home-review-row-title {
        overflow: hidden;
        color: white;
        font-size: 0.98rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .home-review-row-summary {
        display: -webkit-box;
        overflow: hidden;
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.84rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .home-review-row-meta {
        justify-content: flex-start;
        color: rgba(220, 231, 239, 0.55);
        font-size: 0.74rem;
        white-space: nowrap;
      }

      .home-billboard {
        position: absolute;
        top: clamp(8.9rem, 17vh, 11.25rem);
        right: var(--home-right-rail);
        z-index: 5;
        width: min(24rem, 23vw);
        height: min(35rem, 56vh);
        min-height: 24rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1.25rem;
        background:
          radial-gradient(circle at 50% 0%, rgba(137, 240, 181, 0.11), transparent 16rem),
          linear-gradient(180deg, rgba(10, 23, 35, 0.7), rgba(4, 10, 18, 0.78));
        box-shadow: 0 34px 120px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(16px);
      }

      .home-billboard-track {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .home-billboard-slide {
        position: relative;
        min-width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .home-billboard-slide::after {
        position: absolute;
        inset: 0;
        content: "";
        background:
          linear-gradient(180deg, rgba(2, 7, 14, 0.05), transparent 38%, rgba(2, 7, 14, 0.76)),
          linear-gradient(90deg, rgba(2, 7, 14, 0.2), transparent 42%);
        pointer-events: none;
      }

      .home-billboard-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .home-billboard-caption {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 1.2rem;
        z-index: 1;
        display: grid;
        gap: 0.35rem;
        color: white;
      }

      .home-billboard-caption em {
        color: var(--ember);
        font-size: 0.72rem;
        font-style: normal;
        font-weight: 850;
        text-transform: uppercase;
      }

      .home-billboard-caption strong {
        overflow: hidden;
        font-size: 1.15rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .home-billboard-dots {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0.65rem;
        z-index: 2;
        display: flex;
        gap: 0.35rem;
        justify-content: flex-end;
      }

      .home-billboard-dots button {
        width: 0.48rem;
        height: 0.48rem;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.38);
        padding: 0;
      }

      .home-billboard-dots button.active {
        width: 1.4rem;
        background: var(--ember);
      }

      .home-billboard-placeholder {
        display: grid;
        height: 100%;
        align-content: center;
        gap: 0.7rem;
        padding: 1.35rem;
        color: rgba(220, 231, 239, 0.72);
      }

      .home-billboard-placeholder span {
        color: var(--ember);
        font-size: 0.72rem;
        font-weight: 850;
        text-transform: uppercase;
      }

      .home-billboard-placeholder strong {
        color: white;
        font-size: clamp(1.45rem, 2vw, 2.15rem);
        line-height: 1.15;
      }

      .home-billboard-placeholder p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.65;
      }

      .home-review-modal {
        position: fixed;
        inset: 0;
        z-index: 34;
        display: grid;
        place-items: center;
        background: rgba(2, 7, 14, 0.66);
        padding: 1rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        backdrop-filter: blur(8px);
      }

      .home-review-modal.show {
        opacity: 1;
        pointer-events: auto;
      }

      .home-review-dialog {
        width: min(54rem, calc(100vw - 2rem));
        max-height: min(88vh, 52rem);
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 18% 0%, rgba(244, 182, 106, 0.12), transparent 18rem),
          linear-gradient(180deg, rgba(11, 23, 36, 0.98), rgba(5, 11, 19, 0.98));
        box-shadow: 0 32px 120px rgba(0, 0, 0, 0.46);
        padding: 1.35rem;
      }

      .home-review-dialog-head {
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.9rem;
      }

      .home-review-dialog-head h3 {
        margin: 0.6rem 0 0;
        font-size: 1.55rem;
        line-height: 1.35;
      }

      .home-review-dialog-meta {
        justify-content: flex-start;
        margin-top: 0.85rem;
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.82rem;
      }

      .home-review-dialog-content {
        min-height: 14rem;
        margin-top: 1rem;
        color: rgba(220, 231, 239, 0.88);
        font-size: 0.98rem;
        line-height: 1.8;
      }

      .home-review-comments {
        display: grid;
        gap: 0.65rem;
        margin-top: 1.1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1rem;
      }

      .home-review-comments-head h4 {
        margin: 0;
        font-size: 1rem;
      }

      .home-review-comment {
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.8rem;
      }

      .home-review-comment div {
        display: flex;
        justify-content: space-between;
        gap: 0.7rem;
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.78rem;
      }

      .home-review-comment p {
        margin: 0.5rem 0 0;
        color: rgba(220, 231, 239, 0.86);
        line-height: 1.65;
      }

      .icon-close {
        display: inline-flex;
        width: 2.45rem;
        height: 2.45rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: white;
        font-size: 1.35rem;
        line-height: 1;
        backdrop-filter: blur(14px);
      }

      .policy-float-button {
        position: absolute;
        right: clamp(1rem, 4vw, 3rem);
        bottom: 1.35rem;
        z-index: 7;
        min-height: 2.65rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(7, 17, 31, 0.66);
        color: rgba(255, 255, 255, 0.92);
        padding: 0 1rem;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(16px);
      }

      .policy-modal {
        position: fixed;
        inset: 0;
        z-index: 36;
        display: grid;
        place-items: center;
        background: rgba(2, 7, 14, 0.72);
        padding: 1rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        backdrop-filter: blur(10px);
      }

      .policy-modal.show {
        opacity: 1;
        pointer-events: auto;
      }

      .policy-dialog {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        width: min(62rem, calc(100vw - 2rem));
        max-height: min(88vh, 54rem);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 18% 0%, rgba(244, 182, 106, 0.12), transparent 20rem),
          linear-gradient(180deg, rgba(11, 23, 36, 0.98), rgba(5, 11, 19, 0.98));
        box-shadow: 0 34px 130px rgba(0, 0, 0, 0.5);
      }

      .policy-dialog-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem;
      }

      .policy-dialog-head h2 {
        margin: 0.6rem 0 0;
        font-size: clamp(1.35rem, 2.5vw, 2rem);
        line-height: 1.25;
      }

      .policy-tabs {
        display: flex;
        gap: 0.45rem;
        overflow-x: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem 1rem;
      }

      .policy-tabs button {
        flex: 0 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(220, 231, 239, 0.76);
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
        font-weight: 750;
        white-space: nowrap;
      }

      .policy-tabs button.active {
        border-color: rgba(244, 182, 106, 0.64);
        background: rgba(244, 182, 106, 0.16);
        color: white;
      }

      .policy-body {
        overflow-y: auto;
        padding: 1rem;
        color: rgba(220, 231, 239, 0.86);
        line-height: 1.75;
      }

      .policy-section {
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 1rem;
      }

      .policy-section + .policy-section {
        margin-top: 0.85rem;
      }

      .policy-section h3,
      .policy-section h4,
      .policy-section h5 {
        margin: 0 0 0.65rem;
        color: white;
        line-height: 1.35;
      }

      .policy-section h3 {
        font-size: 1.25rem;
      }

      .policy-section h4 {
        color: var(--ember);
        font-size: 1.02rem;
      }

      .policy-section h5 {
        margin-top: 1rem;
        font-size: 0.95rem;
      }

      .policy-section p,
      .policy-section ol,
      .policy-section ul {
        margin: 0.55rem 0 0;
      }

      .policy-section li + li {
        margin-top: 0.28rem;
      }

      .policy-note,
      .policy-check {
        border-radius: 0.75rem;
        background: rgba(244, 182, 106, 0.08);
        padding: 0.75rem;
      }

      .policy-table-wrap {
        margin-top: 0.75rem;
        overflow-x: auto;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0.75rem;
      }

      .policy-table-wrap table {
        width: 100%;
        min-width: 42rem;
        border-collapse: collapse;
      }

      .policy-table-wrap th,
      .policy-table-wrap td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.75rem;
        text-align: left;
        vertical-align: top;
      }

      .policy-table-wrap th {
        background: rgba(244, 182, 106, 0.1);
        color: white;
        font-size: 0.82rem;
      }

      .policy-table-wrap td {
        color: rgba(220, 231, 239, 0.82);
        font-size: 0.84rem;
      }

      .policy-dialog-foot {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.9rem 1rem;
      }

      .home-advantages {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 100vh;
        overflow: hidden;
        isolation: isolate;
        background: var(--night-deep);
        color: white;
        padding: 7rem 1.25rem 4.5rem;
        will-change: transform, filter;
      }

      .home-advantages::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: url("../assets/전경및 풍경/풍경2.jpg");
        background-position: 58% center;
        background-size: cover;
        transform: scale(1.04);
        filter: saturate(0.82) brightness(0.72);
      }

      .home-advantages::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          radial-gradient(circle at 24% 66%, rgba(244, 182, 106, 0.2), transparent 24rem),
          linear-gradient(90deg, rgba(2, 7, 14, 0.88), rgba(2, 7, 14, 0.44) 52%, rgba(2, 7, 14, 0.82)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.45), rgba(4, 10, 18, 0.92));
      }

      .advantage-inner {
        width: min(100%, 76rem);
        margin: 0 auto;
        will-change: transform, opacity, filter;
      }

      .advantage-slider {
        width: 100%;
        overflow: hidden;
        padding: 0.25rem 0.05rem 0.9rem;
        mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
      }

      .hero .content,
      .hero .home-review-preview,
      .hero .home-billboard,
      .hero .demo-rail {
        will-change: transform, opacity, filter;
      }

      .section-title-row {
        display: grid;
        grid-template-columns: minmax(3rem, 1fr) auto minmax(3rem, 1fr);
        align-items: center;
        gap: 1.6rem;
        margin-bottom: 2.6rem;
      }

      .section-title-row span {
        height: 2px;
        background-image: radial-gradient(circle, rgba(220, 231, 239, 0.5) 1.5px, transparent 1.5px);
        background-size: 0.85rem 2px;
        background-repeat: repeat-x;
      }

      .section-title-row h2 {
        margin: 0;
        color: rgba(220, 231, 239, 0.84);
        font-size: 1.05rem;
        font-weight: 650;
        letter-spacing: 0.9em;
        text-align: center;
        white-space: nowrap;
      }

      .advantage-grid {
        display: flex;
        gap: clamp(1.5rem, 3vw, 2.4rem);
        width: max-content;
        animation: advantageSlide 44s linear infinite;
      }

      .advantage-slider:hover .advantage-grid {
        animation-play-state: paused;
      }

      @keyframes advantageSlide {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(calc(-50% - clamp(0.75rem, 1.5vw, 1.2rem)));
        }
      }

      .advantage-card {
        display: grid;
        gap: 1.35rem;
        flex: 0 0 clamp(19rem, 35vw, 34rem);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.54);
        padding: 1rem;
        box-shadow: 0 30px 110px rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(16px);
      }

      .advantage-photo {
        position: relative;
        min-height: clamp(18rem, 31vw, 23rem);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.7rem;
        background: #172333;
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
      }

      .advantage-photo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .advantage-photo-clean {
        background-image:
          linear-gradient(180deg, rgba(2, 7, 14, 0.08), rgba(2, 7, 14, 0.42)),
          url("../assets/시설/타프설치.jpg");
        background-position: center;
        background-size: cover;
      }

      .advantage-photo-clean .tile-wall,
      .advantage-photo-clean .shower-booth,
      .advantage-photo-clean .sink-counter {
        display: none;
      }

      .advantage-photo-clean .tile-wall {
        position: absolute;
        inset: 38% 0 0;
        background:
          linear-gradient(rgba(80, 80, 80, 0.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(80, 80, 80, 0.12) 1px, transparent 1px),
          #384250;
        background-size: 4.2rem 4.2rem;
      }

      .advantage-photo-clean .shower-booth {
        position: absolute;
        left: 11%;
        bottom: 16%;
        width: 38%;
        height: 56%;
        border-radius: 0.25rem;
        background:
          linear-gradient(90deg, rgba(34, 37, 42, 0.95), rgba(75, 77, 83, 0.9)),
          linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
        box-shadow:
          13rem 0 0 rgba(43, 46, 52, 0.86),
          0 2.5rem 0 rgba(0, 0, 0, 0.06);
      }

      .advantage-photo-clean .sink-counter {
        position: absolute;
        right: 8%;
        bottom: 17%;
        width: 34%;
        height: 17%;
        border-radius: 0.2rem;
        background:
          radial-gradient(ellipse at 21% -12%, #fff 0 20%, transparent 21%),
          radial-gradient(ellipse at 70% -12%, #fff 0 20%, transparent 21%),
          linear-gradient(90deg, #966b3d, #c89355);
        box-shadow: 0 1.7rem 0 rgba(117, 78, 42, 0.55);
      }

      .advantage-photo-city {
        background-image:
          linear-gradient(180deg, rgba(2, 7, 14, 0.04), rgba(2, 7, 14, 0.44)),
          url("../assets/전경및 풍경/사이트들.jpg");
        background-position: center;
        background-size: cover;
      }

      .advantage-photo-city::before,
      .advantage-photo-city .road-line,
      .advantage-photo-city .city-block {
        display: none;
      }

      .advantage-photo-city::before {
        content: "";
        position: absolute;
        inset: 16% 0 auto;
        height: 28%;
        background:
          linear-gradient(150deg, transparent 0 42%, rgba(69, 88, 92, 0.35) 43% 46%, transparent 47%),
          linear-gradient(20deg, transparent 0 43%, rgba(91, 106, 98, 0.32) 44% 48%, transparent 49%);
      }

      .advantage-photo-city .road-line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 42%;
        background:
          linear-gradient(155deg, transparent 0 39%, rgba(255, 255, 255, 0.74) 40% 42%, transparent 43%),
          linear-gradient(25deg, transparent 0 42%, rgba(255, 255, 255, 0.56) 43% 44%, transparent 45%),
          linear-gradient(180deg, #786d65, #4d4b48);
      }

      .city-block {
        position: absolute;
        bottom: 35%;
        border-radius: 0.25rem 0.25rem 0 0;
        background: rgba(14, 25, 36, 0.92);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      }

      .block-a {
        left: 13%;
        width: 18%;
        height: 30%;
      }

      .block-b {
        left: 40%;
        width: 23%;
        height: 40%;
      }

      .block-c {
        right: 13%;
        width: 18%;
        height: 27%;
      }

      .city-glow {
        position: absolute;
        inset: 20% 10% 32%;
        background:
          radial-gradient(circle at 20% 78%, rgba(244, 182, 106, 0.7), transparent 1.6rem),
          radial-gradient(circle at 48% 66%, rgba(244, 182, 106, 0.6), transparent 2rem),
          radial-gradient(circle at 76% 72%, rgba(244, 182, 106, 0.65), transparent 1.6rem);
        filter: blur(0.5px);
      }

      .advantage-text {
        position: relative;
        min-height: 9.5rem;
        padding: 0.3rem 0.25rem 0;
      }

      .black-rule {
        display: block;
        width: 3.5rem;
        height: 0.32rem;
        margin-bottom: 1rem;
        background: #111;
        background: var(--ember);
      }

      .advantage-text h3 {
        margin: 0;
        font-size: clamp(1.25rem, 2vw, 1.55rem);
        line-height: 1.35;
      }

      .advantage-text strong {
        display: block;
        margin-top: 0.65rem;
        color: rgba(255, 255, 255, 0.94);
        font-size: 0.98rem;
        line-height: 1.65;
      }

      .advantage-text p {
        margin: 0.55rem 0 0;
        color: rgba(220, 231, 239, 0.75);
        font-size: 0.92rem;
        line-height: 1.75;
      }

      .site-footer {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        background:
          radial-gradient(circle at 78% 18%, rgba(244, 182, 106, 0.12), transparent 22rem),
          linear-gradient(180deg, #07111f, #030810);
        color: white;
        padding: 7rem 1.25rem 4rem;
      }

      .site-footer-inner {
        width: min(100%, 76rem);
        margin: 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.055);
        padding: clamp(1rem, 3vw, 2rem);
        backdrop-filter: blur(16px);
      }

      .site-footer h2 {
        margin: 0;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
      }

      .footer-business-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 1rem;
        margin-top: 1rem;
        color: rgba(220, 231, 239, 0.75);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .footer-policy-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 1.5rem;
      }

      .footer-policy-links button {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: white;
        padding: 0.65rem 0.9rem;
        font-weight: 750;
      }

      .dropdown {
        position: relative;
      }

      .menu {
        position: absolute;
        right: 0;
        top: calc(100% + 0.6rem);
        display: none;
        min-width: 12rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 0.9rem;
        background: rgba(7, 17, 31, 0.9);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(18px);
      }

      .dropdown:hover .menu,
      .dropdown:focus-within .menu {
        display: block;
      }

      .menu button {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0.85rem 1rem;
        color: rgba(220, 231, 239, 0.92);
        text-align: left;
        font-size: 0.9rem;
      }

      .menu button:hover {
        background: rgba(255, 255, 255, 0.09);
        color: white;
      }

      .info-preview {
        position: fixed;
        inset: 0 min(40rem, 34vw) 0 0;
        z-index: 18;
        display: grid;
        place-items: center end;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(2.5rem);
        transition:
          opacity 420ms ease,
          transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      body.info-nav-open .info-preview {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        cursor: pointer;
      }

      .info-preview::before,
      .info-detail-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: url("../assets/camp-night-main-v2.png");
        background-position: center;
        background-size: cover;
        transform: scale(1.02);
        transition:
          filter 260ms ease,
          background-position 420ms ease;
      }

      .info-preview::after,
      .info-detail-page::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(2, 7, 14, 0.86), rgba(2, 7, 14, 0.5) 52%, rgba(2, 7, 14, 0.76)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.34), rgba(4, 10, 18, 0.9)),
          radial-gradient(circle at 24% 64%, rgba(244, 182, 106, 0.24), transparent 24rem);
      }

      .info-preview[data-preview="sites"]::before,
      .info-detail-page[data-preview="sites"]::before {
        background-position: 62% 50%;
        filter: hue-rotate(8deg) saturate(1.08);
      }

      .info-preview[data-preview="facilities"]::before,
      .info-detail-page[data-preview="facilities"]::before {
        background-position: 42% 58%;
        filter: brightness(1.06) saturate(0.92);
      }

      .info-preview[data-preview="guide"]::before,
      .info-detail-page[data-preview="guide"]::before {
        background-position: 50% 46%;
        filter: contrast(1.08) saturate(0.82);
      }

      .info-preview[data-preview="reservation"]::before,
      .info-detail-page[data-preview="reservation"]::before {
        background-position: 68% 52%;
        filter: saturate(1.15);
      }

      .info-preview[data-preview="membership"]::before,
      .info-detail-page[data-preview="membership"]::before {
        background-position: 34% 54%;
        filter: sepia(0.08) saturate(1.12);
      }

      .info-preview[data-preview="program"]::before,
      .info-detail-page[data-preview="program"]::before {
        background-position: 48% 42%;
        filter: brightness(0.95) saturate(1.2);
      }

      .info-preview[data-preview="notice"]::before,
      .info-detail-page[data-preview="notice"]::before {
        background-position: 57% 46%;
        filter: grayscale(0.12) contrast(1.04);
      }

      .info-preview[data-preview="community"]::before,
      .info-detail-page[data-preview="community"]::before {
        background-position: 40% 52%;
        filter: hue-rotate(-8deg) saturate(1.06);
      }

      .info-preview[data-preview="location"]::before,
      .info-detail-page[data-preview="location"]::before {
        background-position: 74% 50%;
        filter: brightness(0.9) contrast(1.15);
      }

      .info-preview[data-preview]::before,
      .info-detail-page[data-preview]::before {
        background-position: center;
        filter: none;
      }

      body.info-detail-open {
        overflow: hidden;
      }

      body.info-detail-open .hero {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
      }

      .info-preview-content {
        width: min(32rem, calc(100% - 3rem));
        margin-right: clamp(1.5rem, 4vw, 3.8rem);
        padding: 2rem;
        transform: translateY(-2vh);
      }

      .info-preview-kicker,
      .detail-kicker {
        color: var(--ember);
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0.04em;
        text-transform: none;
        white-space: nowrap;
      }

      .info-preview-title {
        margin: 0.75rem 0 0;
        font-size: clamp(4.2rem, 6vw, 6.6rem);
        font-weight: 790;
        line-height: 0.9;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .info-preview-copy {
        max-width: 30rem;
        margin: 1rem 0 0;
        color: rgba(220, 231, 239, 0.82);
        font-size: 1.1rem;
        line-height: 1.7;
        text-wrap: pretty;
      }

      .info-drawer {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 26;
        width: min(40rem, 34vw);
        min-width: 30rem;
        overflow-y: auto;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        background:
          radial-gradient(circle at 12% 0%, rgba(244, 182, 106, 0.11), transparent 17rem),
          linear-gradient(180deg, rgba(7, 17, 31, 0.98), rgba(3, 8, 16, 0.98));
        box-shadow: -40px 0 120px rgba(0, 0, 0, 0.44);
        transform: translateX(100%);
        transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
        backdrop-filter: blur(20px);
      }

      body.info-nav-open .info-drawer {
        transform: translateX(0);
      }

      body.info-detail-open.info-nav-open .info-drawer {
        transform: translateX(100%);
      }

      .info-drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(7, 17, 31, 0.88);
        padding: 1.35rem;
        backdrop-filter: blur(18px);
      }

      .info-drawer-actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex: 0 0 auto;
      }

      .info-drawer-reserve {
        min-height: 2.5rem;
        padding: 0 1.05rem;
        font-size: 0.88rem;
      }

      .info-drawer-title {
        margin: 0.3rem 0 0;
        font-size: 1.72rem;
        font-weight: 820;
        letter-spacing: 0;
      }

      .info-list {
        display: grid;
        gap: 0.75rem;
        padding: 1.1rem;
      }

      .info-section-button {
        display: block;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.055);
        color: white;
        padding: 1.08rem;
        text-decoration: none;
        text-align: left;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .info-section-button:hover,
      .info-section-button.active {
        border-color: rgba(244, 182, 106, 0.52);
        background: rgba(244, 182, 106, 0.13);
        transform: translateX(-0.18rem);
      }

      .info-section-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
      }

      .info-section-index {
        color: rgba(244, 182, 106, 0.8);
        font-size: 0.72rem;
        font-weight: 780;
      }

      .info-section-title {
        display: block;
        margin-top: 0.18rem;
        font-size: 1.18rem;
        font-weight: 820;
        white-space: nowrap;
      }

      .info-section-keywords {
        display: flex;
        flex-wrap: wrap;
        gap: 0.38rem;
        margin-top: 0.78rem;
      }

      .info-keyword-chip {
        display: inline-flex;
        min-height: 1.62rem;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(220, 231, 239, 0.7);
        padding: 0 0.58rem;
        font-size: 0.72rem;
        font-weight: 650;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition:
          border-color 180ms ease,
          background 180ms ease,
          color 180ms ease,
          transform 180ms ease;
      }

      .info-keyword-chip:hover,
      .info-keyword-chip:focus-visible {
        border-color: rgba(244, 182, 106, 0.62);
        background: rgba(244, 182, 106, 0.14);
        color: white;
        outline: none;
        transform: translateY(-1px);
      }

      .info-detail-page {
        position: fixed;
        inset: 0 min(28rem, 42vw) 0 0;
        z-index: 25;
        overflow-y: auto;
        isolation: isolate;
        color: white;
        background: var(--night-deep);
        opacity: 0;
        pointer-events: none;
        transform: scale(0.992);
        transform-origin: center;
        transition:
          right 620ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 220ms ease,
          transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      body.info-detail-open .info-detail-page {
        right: 0;
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
        padding-top: 5rem;
        scroll-padding-top: 5rem;
      }

      body.info-detail-open .info-preview {
        opacity: 0;
        pointer-events: none;
      }

      .detail-topbar {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(3, 8, 16, 0.72);
        padding: 1rem max(1rem, calc((100vw - 80rem) / 2 + 1rem));
        backdrop-filter: blur(18px);
      }

      .detail-shell {
        width: min(100%, 80rem);
        margin: 0 auto;
        padding: clamp(1.75rem, 3vw, 3rem) 1rem 4rem;
      }

      .detail-title {
        max-width: 56rem;
        margin: 0.8rem 0 0;
        font-size: clamp(3rem, 3.4vw, 3.6rem);
        font-weight: 820;
        line-height: 1;
        letter-spacing: 0;
      }

      .detail-copy {
        max-width: 40rem;
        margin: 1rem 0 0;
        color: rgba(220, 231, 239, 0.78);
        font-size: 1.08rem;
        line-height: 1.75;
        text-wrap: pretty;
      }


      .info-detail-page[data-preview="sites"] .detail-shell {
        width: min(100%, 80rem);
      }

      .info-detail-page[data-preview="sites"] .detail-title,
      .info-detail-page[data-preview="sites"] .detail-copy {
        max-width: 56rem;
      }

      .info-detail-page[data-preview="about"] .detail-shell {
        width: 100%;
        padding: 0;
      }

      .info-detail-page[data-preview="about"] {
        scroll-padding-top: 0;
      }

      .info-detail-page[data-preview="about"] .detail-kicker,
      .info-detail-page[data-preview="about"] .detail-title,
      .info-detail-page[data-preview="about"] .detail-copy {
        display: none;
      }

      .info-detail-page[data-preview="sites"] .detail-kicker,
      .info-detail-page[data-preview="sites"] .detail-title,
      .info-detail-page[data-preview="sites"] .detail-copy {
        position: relative;
        z-index: 1;
      }

      .info-detail-page[data-preview="sites"] .detail-title {
        max-width: 56rem;
        font-size: clamp(3rem, 3.4vw, 3.6rem);
        opacity: 1;
      }

      .info-detail-page[data-preview="sites"] .detail-copy {
        max-width: 48rem;
        color: rgba(220, 231, 239, 0.88);
      }

      .detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
        gap: 1rem;
        margin-top: 2rem;
      }

      .detail-placeholder {
        min-height: 18rem;
        border: 1px dashed rgba(255, 255, 255, 0.22);
        border-radius: 0.9rem;
        background: rgba(7, 17, 31, 0.56);
        padding: 1.2rem;
        backdrop-filter: blur(16px);
      }

      .detail-subnav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-top: 0.9rem;
      }

      .detail-grid-single {
        grid-template-columns: minmax(0, 1fr);
      }

      .guide-detail-page {
        display: grid;
        gap: 1rem;
        margin-top: 2rem;
      }

      .guide-hero-card,
      .guide-info-card,
      .guide-rules-section,
      .guide-safety-section,
      .guide-refund-section,
      .guide-policy-section {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
          rgba(7, 17, 31, 0.78);
        box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.24);
        backdrop-filter: blur(18px);
      }

      .guide-hero-card {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.75fr);
        align-items: center;
        gap: 1.5rem;
        padding: clamp(1.25rem, 3vw, 2rem);
      }

      .guide-hero-card h3,
      .guide-section-head h3,
      .guide-policy-section h3 {
        margin: 0.65rem 0 0.45rem;
        font-size: clamp(1.45rem, 2.6vw, 2.15rem);
        line-height: 1.25;
      }

      .guide-hero-card p,
      .guide-policy-section p {
        margin: 0;
        color: rgba(225, 234, 241, 0.78);
        line-height: 1.75;
      }

      .guide-time-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }

      .guide-time-card {
        display: grid;
        gap: 0.2rem;
        min-height: 9rem;
        align-content: center;
        border: 1px solid rgba(229, 167, 98, 0.28);
        border-radius: 0.85rem;
        background: rgba(229, 167, 98, 0.09);
        padding: 1rem;
        text-align: center;
      }

      .guide-time-card span,
      .guide-time-card small {
        color: rgba(235, 241, 246, 0.72);
        font-weight: 800;
      }

      .guide-time-card strong {
        color: #f4c28e;
        font-size: 1.65rem;
      }

      .guide-info-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
      }

      .guide-rules-section,
      .guide-safety-section {
        display: grid;
        gap: 1rem;
        padding: clamp(1.15rem, 2.5vw, 1.7rem);
      }

      .guide-section-head > div {
        min-width: 0;
      }

      .guide-section-head p {
        max-width: 58rem;
        margin: 0.4rem 0 0;
        color: rgba(225, 234, 241, 0.76);
        line-height: 1.7;
      }

      .guide-rules-grid,
      .guide-safety-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
      }

      .guide-rule-card,
      .guide-safety-card {
        display: grid;
        align-content: start;
        gap: 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.85rem;
        background: rgba(2, 8, 16, 0.38);
        padding: 1rem;
      }

      .guide-rule-card h4,
      .guide-safety-card h4 {
        margin: 0;
        color: #f4c28e;
        font-size: 1.08rem;
      }

      .guide-rule-card ul,
      .guide-safety-card ul,
      .guide-liability-note ul {
        display: grid;
        gap: 0.55rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .guide-rule-card li,
      .guide-safety-card li,
      .guide-liability-note li {
        position: relative;
        padding-left: 1rem;
        color: rgba(225, 234, 241, 0.8);
        line-height: 1.65;
      }

      .guide-rule-card li::before,
      .guide-safety-card li::before,
      .guide-liability-note li::before {
        position: absolute;
        top: 0.68em;
        left: 0;
        width: 0.34rem;
        height: 0.34rem;
        border-radius: 50%;
        background: #e5a762;
        content: "";
      }

      .guide-safety-card p {
        margin: 0;
        color: rgba(225, 234, 241, 0.8);
        line-height: 1.72;
      }

      .guide-safety-card p strong {
        color: #ffffff;
      }

      .guide-safety-card-wide {
        grid-column: 1 / -1;
      }

      .guide-liability-note {
        display: grid;
        grid-template-columns: minmax(13rem, 0.35fr) minmax(0, 1fr);
        align-items: start;
        gap: 1rem;
        border: 1px solid rgba(80, 211, 194, 0.28);
        border-radius: 0.85rem;
        background: rgba(80, 211, 194, 0.07);
        padding: 1rem;
      }

      .guide-liability-note strong {
        color: #72e0d2;
        line-height: 1.5;
      }

      .guide-reservation-head {
        padding: 0.55rem 0.25rem 0;
      }

      .guide-reservation-head h3 {
        margin: 0.65rem 0 0;
        font-size: clamp(1.35rem, 2.4vw, 1.9rem);
        line-height: 1.25;
      }

      .guide-detail-page [id^="guide-child-"] {
        scroll-margin-top: clamp(7rem, 9vw, 9.5rem);
      }

      .guide-info-card {
        position: relative;
        display: grid;
        align-content: start;
        gap: 0.8rem;
        min-height: 18rem;
        padding: 1.25rem;
        overflow: hidden;
      }

      .guide-info-card h4,
      .guide-refund-card h4 {
        margin: 0;
        font-size: 1.15rem;
      }

      .guide-info-card > p {
        margin: 0;
        color: rgba(225, 234, 241, 0.82);
        line-height: 1.72;
      }

      .guide-card-number {
        color: #f4c28e;
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.12em;
      }

      .guide-rule-list {
        display: grid;
        gap: 0.65rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .guide-rule-list li {
        display: grid;
        gap: 0.2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.65rem;
      }

      .guide-rule-list span,
      .guide-card-note,
      .guide-highlight span {
        color: rgba(225, 234, 241, 0.72);
        font-size: 0.88rem;
        line-height: 1.6;
      }

      .guide-highlight {
        display: grid;
        gap: 0.35rem;
        border: 1px solid rgba(80, 211, 194, 0.3);
        border-radius: 0.8rem;
        background: rgba(80, 211, 194, 0.08);
        padding: 0.85rem;
      }

      .guide-highlight strong {
        color: #72e0d2;
        line-height: 1.45;
      }

      .guide-refund-section {
        display: grid;
        gap: 1rem;
        padding: clamp(1.15rem, 2.5vw, 1.7rem);
      }

      .guide-section-head,
      .guide-policy-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .guide-refund-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
      }

      .guide-refund-card {
        display: grid;
        gap: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.8rem;
        background: rgba(2, 8, 16, 0.38);
        padding: 1rem;
      }

      .guide-refund-card p {
        margin: 0;
        color: #f4c28e;
        font-weight: 900;
      }

      .guide-refund-card span {
        color: rgba(225, 234, 241, 0.7);
        font-size: 0.82rem;
        line-height: 1.65;
      }

      .guide-owner-refund {
        display: grid;
        grid-template-columns: minmax(13rem, 0.35fr) minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
        border: 1px solid rgba(229, 167, 98, 0.25);
        border-radius: 0.8rem;
        background: rgba(229, 167, 98, 0.07);
        padding: 1rem;
      }

      .guide-owner-refund strong {
        color: #f4c28e;
      }

      .guide-owner-refund p {
        margin: 0;
        color: rgba(225, 234, 241, 0.78);
        line-height: 1.65;
      }

      .guide-policy-section {
        padding: clamp(1.15rem, 2.5vw, 1.7rem);
      }

      .guide-policy-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.55rem;
      }

      @media (max-width: 980px) {
        .guide-hero-card,
        .guide-info-grid {
          grid-template-columns: 1fr;
        }

        .guide-info-card {
          min-height: 0;
        }

        .guide-refund-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 680px) {
        .guide-time-grid,
        .guide-rules-grid,
        .guide-safety-grid,
        .guide-refund-grid {
          grid-template-columns: 1fr;
        }

        .guide-safety-card-wide {
          grid-column: auto;
        }

        .guide-time-card {
          min-height: 7.5rem;
        }

        .guide-section-head,
        .guide-policy-section,
        .guide-owner-refund,
        .guide-liability-note {
          display: grid;
          grid-template-columns: 1fr;
          align-items: start;
        }

        .guide-policy-actions {
          justify-content: stretch;
        }

        .guide-policy-actions .ghost-button {
          width: 100%;
        }
      }

      .facilities-detail-page {
        display: grid;
        gap: 1rem;
        margin-top: 2rem;
      }

      .pool-opening-popup {
        position: fixed;
        inset: 0;
        z-index: 10050;
        display: none;
        place-items: center;
        padding: 1rem;
        background: rgba(0, 7, 16, 0.82);
        backdrop-filter: blur(10px);
      }

      .pool-opening-popup.show {
        display: grid;
      }

      .pool-opening-dialog {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
        width: min(58rem, 100%);
        max-height: calc(100vh - 2rem);
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 1.35rem;
        background: #07111f;
        box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.62);
      }

      .pool-opening-close {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        z-index: 2;
        display: grid;
        width: 2.8rem;
        height: 2.8rem;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 999px;
        background: rgba(2, 9, 18, 0.82);
        color: #fff;
        font-size: 1.8rem;
        line-height: 1;
        cursor: pointer;
      }

      .pool-opening-photo {
        min-height: 25rem;
        background: #020912;
      }

      .pool-opening-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .pool-opening-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        padding: 3.4rem 2rem 2rem;
      }

      .pool-opening-badge {
        width: fit-content;
        padding: 0.45rem 0.75rem;
        border: 1px solid rgba(246, 183, 105, 0.48);
        border-radius: 999px;
        background: rgba(246, 183, 105, 0.13);
        color: #f6b769;
        font-weight: 800;
      }

      .pool-opening-copy h2,
      .pool-opening-copy p {
        margin: 0;
      }

      .pool-opening-copy h2 {
        color: #fff;
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        line-height: 1.25;
      }

      .pool-opening-copy p {
        color: rgba(220, 231, 239, 0.78);
        line-height: 1.7;
      }

      .pool-opening-copy > strong,
      .facility-pool-opening-date,
      .facility-shop-opening-date {
        color: #71e6d5;
        font-size: clamp(1.18rem, 2vw, 1.5rem);
      }

      .pool-opening-safety,
      .facility-pool-safety {
        border: 1px solid rgba(255, 125, 105, 0.48);
        border-radius: 0.85rem;
        background: rgba(119, 25, 25, 0.22);
        color: #ffe6df;
      }

      .pool-opening-safety {
        padding: 0.8rem 0.9rem;
        line-height: 1.55;
      }

      .pool-opening-safety b {
        display: block;
        margin-bottom: 0.2rem;
        color: #ff9b87;
        font-size: 1.05rem;
      }

      .facility-pool-safety {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: fit-content;
        margin-top: 0.35rem;
        padding: 0.75rem 0.9rem;
      }

      .facility-pool-safety strong {
        color: #ff9b87;
        white-space: nowrap;
      }

      .facility-pool-safety span {
        color: #ffe6df;
        line-height: 1.5;
      }

      .pool-opening-actions {
        display: grid;
        grid-template-columns: 0.7fr 1.3fr;
        gap: 0.7rem;
        margin-top: 0.5rem;
      }

      .facility-pool-section {
        border-color: rgba(113, 230, 213, 0.3);
        background:
          linear-gradient(135deg, rgba(34, 159, 169, 0.17), rgba(255, 255, 255, 0.03)),
          rgba(7, 17, 31, 0.8);
      }

      .facility-shop-section {
        border-color: rgba(246, 183, 105, 0.3);
      }

      .facility-pool-card {
        position: relative;
        overflow: hidden;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background: #020912;
      }

      .facility-pool-card img {
        display: block;
        width: 100%;
        max-height: 38rem;
        aspect-ratio: 16 / 10;
        object-fit: cover;
      }

      .facility-pool-card figcaption {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 2.5rem 1rem 0.9rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
        color: #fff;
        font-weight: 700;
      }

      @media (max-width: 720px) {
        .pool-opening-dialog {
          grid-template-columns: 1fr;
        }

        .pool-opening-photo {
          min-height: 0;
          aspect-ratio: 16 / 10;
        }

        .pool-opening-copy {
          padding: 1.4rem;
        }
      }

      .facility-feature-section,
      .facility-pending-section {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(7, 17, 31, 0.72);
        box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
      }

      .facility-feature-section {
        padding: 1.15rem;
      }

      .facility-section-head {
        display: grid;
        gap: 0.45rem;
        margin-bottom: 1rem;
      }

      .facility-section-head h3 {
        margin: 0;
        font-size: clamp(1.45rem, 2.2vw, 2rem);
        color: #fff;
      }

      .facility-section-head p {
        margin: 0;
        color: rgba(220, 231, 239, 0.78);
        line-height: 1.7;
      }

      .facility-photo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.9rem;
      }

      .facility-photo-card {
        overflow: hidden;
        min-height: 100%;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.85rem;
        background: rgba(2, 9, 18, 0.58);
      }

      .facility-photo-card img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }

      .facility-photo-card figcaption {
        display: grid;
        gap: 0.35rem;
        padding: 0.85rem;
      }

      .facility-photo-card strong {
        color: #fff;
        font-size: 1rem;
      }

      .facility-photo-card span {
        color: rgba(220, 231, 239, 0.76);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .facility-pending-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.15rem;
      }

      .facility-pending-section h4,
      .facility-pending-section p {
        margin: 0;
      }

      .facility-pending-section h4 {
        color: #fff;
        font-size: 1.04rem;
      }

      .facility-pending-section p {
        color: rgba(220, 231, 239, 0.7);
      }

      .storage-detail-page {
        display: grid;
        gap: 1rem;
        margin-top: 2rem;
      }

      .storage-intro-panel,
      .storage-notice-panel,
      .storage-card {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(7, 17, 31, 0.7);
        box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
      }

      .storage-intro-panel {
        padding: clamp(1.2rem, 2vw, 1.7rem);
      }

      .storage-intro-panel h3 {
        margin: 0.8rem 0 0.65rem;
        color: #ffffff;
        font-size: clamp(2rem, 2.8vw, 3.1rem);
        line-height: 1.1;
      }

      .storage-intro-panel p {
        margin: 0;
        color: rgba(220, 231, 239, 0.86);
        font-size: 1.15rem;
        line-height: 1.75;
      }

      .storage-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
      }

      .storage-card {
        overflow: hidden;
      }

      .storage-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.55rem;
        background: rgba(255, 255, 255, 0.06);
      }

      .storage-gallery img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 0.75rem;
        object-fit: cover;
      }

      .storage-card-copy {
        padding: 1.1rem;
      }

      .storage-tag {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        padding: 0 0.8rem;
        border: 1px solid rgba(244, 182, 106, 0.45);
        border-radius: 999px;
        background: rgba(244, 182, 106, 0.12);
        color: var(--ember);
        font-weight: 900;
      }

      .storage-card-copy h4 {
        margin: 0.8rem 0 0.5rem;
        color: #ffffff;
        font-size: clamp(1.55rem, 2vw, 2.1rem);
        line-height: 1.15;
      }

      .storage-size {
        margin: 0 0 1rem;
        color: rgba(220, 231, 239, 0.82);
        font-size: 1rem;
        font-weight: 800;
      }

      .storage-price-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
      }

      .storage-price-grid div {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.06);
        padding: 0.8rem 0.7rem;
      }

      .storage-price-grid span {
        display: block;
        color: rgba(220, 231, 239, 0.7);
        font-size: 0.9rem;
        font-weight: 800;
      }

      .storage-price-grid strong {
        display: block;
        margin-top: 0.25rem;
        color: #ffffff;
        font-size: 1.25rem;
        line-height: 1.2;
      }

      .storage-notice-panel {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 1rem;
        align-items: center;
        border-color: rgba(244, 182, 106, 0.35);
        padding: 1.15rem;
      }

      .storage-notice-panel strong {
        display: block;
        margin-top: 0.35rem;
        color: var(--ember);
        font-size: 1.25rem;
        line-height: 1.35;
      }

      .storage-notice-panel p {
        margin: 0;
        color: rgba(220, 231, 239, 0.86);
        font-size: 1.05rem;
        line-height: 1.7;
      }

      @media (max-width: 900px) {
        .storage-card-grid,
        .storage-notice-panel {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 640px) {
        .storage-gallery,
        .storage-price-grid {
          grid-template-columns: 1fr;
        }
      }

      .about-detail {
        display: grid;
        gap: 0;
        margin-top: 0;
        position: relative;
        z-index: 2;
      }

      .about-poster-page {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
        gap: 1rem;
        min-height: calc(100vh - 4.75rem);
        padding: clamp(1rem, 2vw, 1.5rem) max(1rem, calc((100vw - 96rem) / 2 + 1rem));
        background:
          radial-gradient(circle at 80% 18%, rgba(244, 182, 106, 0.16), transparent 20rem),
          linear-gradient(120deg, rgba(2, 7, 14, 0.9), rgba(2, 7, 14, 0.52)),
          rgba(7, 17, 31, 0.82);
      }

      .about-poster-visual {
        position: relative;
        min-height: 34rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background: rgba(2, 7, 14, 0.68);
        box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.34);
      }

      .about-poster-visual img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 34rem;
        object-fit: cover;
        object-position: center;
        filter: none;
      }

      .about-poster-visual::after {
        position: absolute;
        inset: 0;
        content: "";
        background: linear-gradient(180deg, transparent 0%, rgba(2, 7, 14, 0.04) 58%, rgba(2, 7, 14, 0.76) 100%);
      }

      .about-poster-copy {
        position: absolute;
        left: clamp(1.1rem, 4vw, 3rem);
        right: clamp(1.1rem, 4vw, 3rem);
        bottom: clamp(1.2rem, 4vw, 3rem);
        z-index: 2;
        color: #ffffff;
        text-shadow: 0 0.15rem 0.65rem rgba(0, 0, 0, 0.78);
      }

      .about-poster-copy span {
        color: rgba(244, 182, 106, 0.95);
        font-size: 0.82rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .about-poster-copy h3 {
        max-width: 48rem;
        margin: 0.65rem 0 0;
        font-size: clamp(2.1rem, 5vw, 5.25rem);
        line-height: 1.04;
        letter-spacing: 0;
      }

      .about-poster-copy p {
        max-width: 32rem;
        margin: 1rem 0 0;
        color: rgba(220, 231, 239, 0.86);
        font-size: clamp(1rem, 1.3vw, 1.22rem);
        line-height: 1.7;
      }

      .about-poster-side {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-end;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background:
          linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
          rgba(7, 17, 31, 0.74);
        padding: clamp(1rem, 2vw, 1.35rem);
        box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
      }

      .about-poster-side h3 {
        margin: 0.8rem 0 0;
        color: #ffffff;
        font-size: clamp(1.45rem, 2.1vw, 2.15rem);
        line-height: 1.16;
      }

      .about-poster-side p {
        margin: 0.85rem 0 0;
        color: rgba(220, 231, 239, 0.82);
        line-height: 1.72;
      }

      .about-keyword-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 1rem;
      }

      .about-keyword-grid span {
        border: 1px solid rgba(244, 182, 106, 0.28);
        border-radius: 0.65rem;
        background: rgba(244, 182, 106, 0.1);
        padding: 0.65rem;
        color: #ffffff;
        font-weight: 850;
        text-align: center;
      }

      .about-poster-page,
      .about-zone-page,
      .about-gallery-page,
      .about-map-page {
        scroll-margin-top: clamp(5.5rem, 6vw, 7rem);
      }

      .about-gallery-page {
        display: grid;
        gap: 1rem;
        padding: clamp(1rem, 2vw, 1.5rem) max(1rem, calc((100vw - 96rem) / 2 + 1rem));
        background: rgba(2, 7, 14, 0.74);
      }

      .about-zone-page {
        display: grid;
        gap: 1rem;
        padding: clamp(1rem, 2vw, 1.5rem) max(1rem, calc((100vw - 96rem) / 2 + 1rem));
        background:
          radial-gradient(circle at 18% 20%, rgba(244, 182, 106, 0.13), transparent 22rem),
          rgba(2, 7, 14, 0.78);
      }

      .about-zone-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
      }

      .about-zone-card {
        position: relative;
        min-height: 30rem;
        margin: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.7);
        box-shadow: 0 1.3rem 3.8rem rgba(0, 0, 0, 0.3);
      }

      .about-zone-card img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 30rem;
        object-fit: cover;
        filter: none;
      }

      .about-zone-card::after {
        position: absolute;
        inset: 0;
        content: "";
        background: linear-gradient(180deg, transparent 0%, transparent 52%, rgba(2, 7, 14, 0.76) 100%);
      }

      .about-zone-card figcaption {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        z-index: 2;
        display: grid;
        gap: 0.5rem;
        color: #ffffff;
        text-shadow: 0 0.12rem 0.55rem rgba(0, 0, 0, 0.78);
      }

      .about-zone-card figcaption span {
        width: max-content;
        border: 1px solid rgba(244, 182, 106, 0.5);
        border-radius: 999px;
        background: rgba(244, 182, 106, 0.14);
        padding: 0.35rem 0.8rem;
        color: #ffd28e;
        font-weight: 950;
      }

      .about-zone-card figcaption strong {
        max-width: 28rem;
        font-size: clamp(1.35rem, 2.3vw, 2.25rem);
        line-height: 1.12;
      }

      .about-zone-card figcaption p {
        max-width: 30rem;
        margin: 0;
        color: rgba(220, 231, 239, 0.82);
        line-height: 1.62;
      }

      .about-zone-card.zone-b img {
        object-position: center;
      }

      .about-gallery-head {
        max-width: 42rem;
      }

      .about-gallery-head h3 {
        margin: 0.75rem 0 0;
        color: #ffffff;
        font-size: clamp(1.8rem, 3vw, 3rem);
        line-height: 1.08;
      }

      .about-gallery-head p {
        margin: 0.75rem 0 0;
        color: rgba(220, 231, 239, 0.78);
        line-height: 1.65;
      }

      .about-landscape-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 18rem;
        gap: 0.9rem;
      }

      @media (max-width: 1100px) {
        .about-landscape-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      .about-landscape-card {
        position: relative;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0.9rem;
        background: rgba(7, 17, 31, 0.68);
      }

      .about-landscape-card.is-large {
        grid-column: span 2;
        grid-row: span 2;
        min-height: 0;
      }

      .about-landscape-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none;
      }

      .about-landscape-card::after {
        position: absolute;
        inset: 0;
        content: "";
        background: linear-gradient(180deg, transparent 0%, transparent 52%, rgba(2, 7, 14, 0.76) 100%);
      }

      .about-landscape-card figcaption {
        position: absolute;
        right: 0.85rem;
        bottom: 0.85rem;
        left: 0.85rem;
        z-index: 2;
        display: grid;
        gap: 0.35rem;
        color: #ffffff;
        text-shadow: 0 0.12rem 0.5rem rgba(0, 0, 0, 0.78);
      }

      .about-landscape-card strong {
        font-size: 1.08rem;
      }

      .about-landscape-card span {
        color: rgba(220, 231, 239, 0.78);
        font-size: 0.88rem;
        line-height: 1.5;
      }

      .about-story-page {
        display: grid;
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
        gap: 1.1rem;
        min-height: calc(100vh - 4.75rem);
        border: 0;
        border-radius: 0;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
          rgba(7, 17, 31, 0.62);
        padding: clamp(1rem, 2vw, 1.5rem) max(1rem, calc((100vw - 96rem) / 2 + 1rem));
        overflow: hidden;
        backdrop-filter: blur(18px);
      }

      .about-story-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: clamp(0.5rem, 2vw, 2rem);
      }

      .about-story-copy h3 {
        margin: 0.45rem 0 0;
        max-width: 24rem;
        color: #ffffff;
        font-size: clamp(1.55rem, 3vw, 3.05rem);
        line-height: 1.05;
      }

      .about-story-copy p {
        margin: 0.55rem 0 0;
        max-width: 26rem;
        color: rgba(220, 231, 239, 0.82);
        font-size: 0.95rem;
        line-height: 1.45;
      }

      .about-night-page {
        background:
          linear-gradient(120deg, rgba(2, 7, 14, 0.72), rgba(2, 7, 14, 0.18)),
          rgba(7, 17, 31, 0.62);
      }

      .about-night-visual,
      .about-map-slot,
      .about-photo-slot {
        position: relative;
        display: grid;
        min-height: 20rem;
        place-items: end start;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.9rem;
        padding: 1rem;
        overflow: hidden;
        color: white;
        isolation: isolate;
      }

      .about-night-visual {
        min-height: 100%;
        background-image:
          linear-gradient(180deg, rgba(2, 7, 14, 0.08), rgba(2, 7, 14, 0.72)),
          url("../assets/camp-night-view-1.jpeg");
        background-position: center;
        background-size: cover;
      }

      .about-night-visual span,
      .about-map-slot span,
      .about-photo-slot span,
      .about-play-card em {
        color: rgba(220, 231, 239, 0.78);
        font-style: normal;
        font-size: 0.86rem;
      }

      .about-photo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.8rem;
        min-height: 100%;
      }

      .about-photo-slot {
        align-content: end;
        min-height: 100%;
        background-image:
          linear-gradient(180deg, rgba(2, 7, 14, 0.05), rgba(2, 7, 14, 0.72)),
          url("../assets/camp-shower-room.jpeg");
        background-size: cover;
      }

      .about-photo-slot.clean-restroom {
        background-position: 43% center;
      }

      .about-photo-slot.clean-shower {
        background-position: 56% center;
      }

      .about-photo-slot.clean-detail {
        background-position: 68% center;
      }

      .about-photo-slot::before,
      .about-map-slot::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0.75;
      }

      .about-photo-slot.clean-restroom::before {
        background:
          linear-gradient(135deg, rgba(178, 216, 255, 0.18), transparent),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 3.25rem);
      }

      .about-photo-slot.clean-shower::before {
        background:
          radial-gradient(circle at 50% 20%, rgba(125, 211, 252, 0.24), transparent 16rem),
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
      }

      .about-photo-slot.clean-detail::before {
        background:
          radial-gradient(circle at 18% 18%, rgba(244, 182, 106, 0.2), transparent 13rem),
          linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent);
      }

      
      

      .about-photo-credit {
        font-size: 0.95rem;
        color: rgba(220, 231, 239, 0.7);
        font-style: italic;
        margin: 0.6rem 0 1.2rem;
        letter-spacing: 0.01em;
      }

      .about-location-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
      }

      .about-location-list li {
        font-size: 1.1rem;
        font-weight: 600;
        color: rgba(220, 231, 239, 0.92);
        padding-left: 1.1rem;
        position: relative;
        line-height: 1.4;
      }

      .about-location-list li::before {
        content: "·";
        position: absolute;
        left: 0;
        color: var(--ember);
        font-weight: 800;
      }


      .about-map-page {
        grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
      }

      .about-map-slot {
        min-height: 100%;
        background-image:
          linear-gradient(180deg, rgba(2, 7, 14, 0.06), rgba(2, 7, 14, 0.68)),
          url("../assets/camp-sunset-view.jpeg");
        background-position: center;
        background-size: cover;
      }

      /* 지도 iframe 컨테이너 */
      .about-map-iframe-wrap {
        position: relative;
        min-height: 100%;
        min-width: 0;
        border-radius: 0.9rem;
        overflow: hidden;
        background: rgba(7, 17, 31, 0.5);
      }

      .about-map-iframe-wrap iframe {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 28rem;
        border: 0;
        border-radius: 0.75rem;
      }

      .about-map-slot::before {
        background: linear-gradient(135deg, rgba(244, 182, 106, 0.2), transparent 55%);
        background-size: auto;
        opacity: 1;
      }

      .about-photo-slot.clean-restroom::before,
      .about-photo-slot.clean-shower::before,
      .about-photo-slot.clean-detail::before {
        background: linear-gradient(180deg, transparent 0%, rgba(2, 7, 14, 0.68) 100%);
        opacity: 1;
      }

      .about-city-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 1rem;
      }

      .about-city-list span {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.75rem;
        padding: 0.65rem 0.75rem;
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        font-size: 1.04rem;
      }

      /* 노을 사진 섹션 */
      .about-sunset-page {
        padding: clamp(1rem, 2vw, 1.5rem) max(1rem, calc((100vw - 96rem) / 2 + 1rem));
        scroll-margin-top: clamp(8rem, 8vw, 9.25rem);
      }

      .about-sunset-wrap {
        position: relative;
        width: 100%;
        border-radius: 0.9rem;
        overflow: hidden;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
      }

      .about-sunset-img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.9rem;
      }

      .about-sunset-caption {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        padding: 1.5rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
        border-radius: 0 0 0.9rem 0.9rem;
        color: #ffffff;
      }

      .about-sunset-caption h3 {
        margin: 0 0 0.3rem;
        font-size: 1.3rem;
        font-weight: 700;
      }

      .about-sunset-caption p {
        margin: 0;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.78);
      }

      .about-play-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0.8rem;
      }

      .about-play-page .about-story-copy {
        padding-top: 0;
      }

      .about-play-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.9rem;
        height: 100%;
        min-height: 0;
      }

      .about-play-card {
        display: flex;
        height: 100%;
        min-height: 0;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0.95rem;
        padding: 1rem;
        color: #ffffff;
        text-align: left;
        cursor: pointer;
        background:
          linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
          rgba(7, 17, 31, 0.72);
      }

      .about-play-card.pool {
        background:
          linear-gradient(160deg, rgba(45, 212, 191, 0.22), rgba(14, 165, 233, 0.1)),
          rgba(7, 17, 31, 0.72);
      }

      .about-play-card.sports {
        background:
          linear-gradient(160deg, rgba(163, 230, 53, 0.18), rgba(244, 182, 106, 0.1)),
          rgba(7, 17, 31, 0.72);
      }

      .about-play-card.event {
        background:
          linear-gradient(160deg, rgba(244, 182, 106, 0.22), rgba(236, 72, 153, 0.1)),
          rgba(7, 17, 31, 0.72);
      }

      .about-play-card span {
        color: rgba(244, 182, 106, 0.92);
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .about-play-card strong,
      .about-photo-slot strong,
      .about-map-slot strong,
      .about-night-visual strong {
        display: block;
        color: #ffffff;
        font-size: 1.2rem;
      }

      .site-detail {
        display: grid;
        gap: 1rem;
        margin-top: 1.35rem;
        position: relative;
        z-index: 2;
        border-radius: 1rem;
      }

      .site-map-card {
        min-height: auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0.95rem;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
          rgba(7, 17, 31, 0.62);
        overflow: hidden;
        backdrop-filter: blur(18px);
      }

      .floor-strip {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.95rem;
        background: rgba(3, 8, 16, 0.68);
        padding: 1rem;
        backdrop-filter: blur(18px);
      }

      .site-map-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 0.75rem 1rem;
      }

      .site-map-head > div {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        flex-wrap: wrap;
      }

      .site-map-guide-text {
        color: rgba(220, 231, 239, 0.72);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }

      .site-map-pet-warning {
        color: #ff4c64;
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        white-space: nowrap;
        text-shadow: 0 0 0.85rem rgba(255, 76, 100, 0.38);
      }

      .camp-map {
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        border: 0;
        border-radius: 0.9rem;
        background: transparent;
        align-self: start;
      }

      /* 이미지와 마커를 같은 크기로 묶는 래퍼 */
      .camp-map-inner {
        position: relative;
        width: min(100%, 52rem);
        margin: 0;
        line-height: 0;
      }

      .camp-map-img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.9rem;
        pointer-events: none;
        user-select: none;
      }

      .camp-map-markers {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
      }

      .camp-map-markers button {
        pointer-events: all;
      }

      /* 사이트 투명 클릭 영역 */
      .marker-yellow,
      .marker-gold,
      .marker-green,
      .marker-teal {
        background: transparent;
        border-color: transparent;
        color: transparent;
      }

      .marker-yellow:hover,
      .marker-gold:hover,
      .marker-green:hover,
      .marker-teal:hover,
      .map-site-marker.active {
        background: rgba(244, 182, 106, 0.62);
        border-color: rgba(255, 220, 132, 0.98);
        box-shadow:
          0 0 0 0.18rem rgba(244, 182, 106, 0.28),
          0 0 1.2rem rgba(244, 182, 106, 0.48);
      }

      /* 사이트 정보 패널 */
      .site-panel-hint {
        color: rgba(220, 231, 239, 0.45);
        font-size: 0.9rem;
        text-align: center;
        margin: 2rem 0 1rem;
        line-height: 1.6;
      }

      .site-info-card {
        margin-bottom: 0.8rem;
      }

      .site-info-badge {
        display: inline-block;
        border-radius: 999px;
        padding: 0.25rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 700;
      }

      .zone-badge-a { background: rgba(200,160,0,0.18); color: #f0d060; border: 1px solid rgba(200,160,0,0.4); }
      .zone-badge-b { background: rgba(15,107,122,0.18); color: #7dd8e8; border: 1px solid rgba(15,107,122,0.4); }

      .site-info-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
        margin-bottom: 0.6rem;
      }

      .pet-badge {
        background: rgba(244, 182, 106, 0.18);
        border: 1px solid rgba(244, 182, 106, 0.42);
        color: var(--ember);
      }

      .no-pet-badge {
        background: rgba(255, 70, 90, 0.15);
        border: 1px solid rgba(255, 70, 90, 0.44);
        color: #ff6b7d;
      }

      .site-info-name {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.45rem;
        font-size: 1.35rem;
        font-weight: 800;
        color: white;
        margin: 0 0 0.8rem;
      }

      .site-pet-note {
        font-size: 0.78rem;
        font-weight: 800;
        color: var(--ember);
        white-space: nowrap;
      }

      .site-pet-note.is-disabled {
        color: #ff6b7d;
      }

      .site-info-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.48rem;
        margin: 0;
      }

      .site-info-specs > div {
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 0.65rem;
        background: rgba(255,255,255,0.05);
        padding: 0.5rem 0.62rem;
      }

      .site-info-specs dt {
        font-size: 0.92rem;
        color: rgba(220,231,239,0.68);
        font-weight: 600;
        margin-bottom: 0.2rem;
      }

      .site-info-specs dd {
        font-size: 1.04rem;
        font-weight: 700;
        color: white;
        margin: 0;
      }

      .site-info-specs dd.site-guests-value {
        font-size: 0.98rem;
        white-space: nowrap;
      }

      .site-info-specs dd span {
        color: rgba(220, 231, 239, 0.78);
        font-size: 0.9em;
        white-space: nowrap;
      }

      .site-info-specs dd.site-price-value {
        display: flex;
        align-items: baseline;
        gap: 0.45rem;
        flex-wrap: wrap;
      }

      .site-info-specs dd.site-price-value strong {
        color: #ffffff;
        font-size: 1.04rem;
      }

      .site-info-specs .site-price-original {
        color: rgba(220, 231, 239, 0.52);
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
        text-decoration-color: rgba(244, 182, 106, 0.82);
      }

      .site-info-photo {
        margin: 0.75rem 0 0;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 0.75rem;
        overflow: hidden;
        background: rgba(255,255,255,0.05);
      }

      .site-info-photo img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
      }

      .site-info-photo figcaption {
        padding: 0.45rem 0.65rem;
        color: rgba(220,231,239,0.74);
        font-size: 0.82rem;
        font-weight: 700;
      }

      .site-map-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
        gap: 1rem;
        padding: 0.85rem;
      }

      .map-road,
      .map-road::before,
      .map-road::after {
        position: absolute;
        content: "";
        border-radius: 999px;
        background: rgba(220, 231, 239, 0.18);
      }

      .map-road {
        left: 8%;
        right: 8%;
        bottom: 18%;
        height: 0.55rem;
        transform: rotate(-7deg);
      }

      .map-road::before {
        width: 34%;
        height: 0.45rem;
        left: 34%;
        bottom: 7rem;
        transform: rotate(68deg);
      }

      .map-road::after {
        width: 28%;
        height: 0.45rem;
        left: 12%;
        bottom: 12rem;
        transform: rotate(-38deg);
      }

      .map-zone {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.055);
        padding: 0.8rem;
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.78rem;
        font-weight: 760;
      }

      .zone-1 {
        left: 8%;
        top: 52%;
        width: 36%;
        height: 30%;
      }

      .zone-2 {
        left: 34%;
        top: 26%;
        width: 34%;
        height: 28%;
      }

      .zone-3 {
        right: 8%;
        top: 9%;
        width: 28%;
        height: 28%;
      }

      .map-facility {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 1.8rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 999px;
        background: rgba(2, 7, 14, 0.5);
        padding: 0 0.65rem;
        color: rgba(220, 231, 239, 0.76);
        font-size: 0.72rem;
      }

      .map-site-marker {
        position: absolute;
        z-index: 6;
        display: inline-flex;
        width: clamp(1.02rem, 1.76vw, 2.02rem);
        height: clamp(1.02rem, 1.76vw, 2.02rem);
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        border-radius: 50%;
        background: transparent;
        color: transparent;
        font-size: 0;
        font-weight: 800;
        box-shadow: none;
        transform: translate(-50%, -50%);
        cursor: pointer;
        touch-action: manipulation;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease;
      }

      .map-site-marker:hover,
      .map-site-marker.active {
        background: rgba(244, 182, 106, 0.62);
        border-color: rgba(255, 220, 132, 0.98);
        box-shadow:
          0 0 0 0.14rem rgba(244, 182, 106, 0.25),
          0 0 0.9rem rgba(244, 182, 106, 0.44);
        transform: translate(-50%, -50%) scale(1);
      }

      .map-focus-card {
        position: absolute;
        left: 1rem;
        bottom: 1rem;
        width: min(20rem, calc(100% - 2rem));
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.85rem;
        background: rgba(3, 8, 16, 0.72);
        padding: 1rem;
        backdrop-filter: blur(16px);
      }

      .floor-selector {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.15rem;
      }

      .floor-button {
        min-height: 7rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.06);
        color: white;
        padding: 1.15rem;
        text-align: left;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .floor-button:hover,
      .floor-button.active {
        border-color: rgba(244, 182, 106, 0.62);
        background: rgba(244, 182, 106, 0.14);
        transform: translateY(-0.15rem);
      }

      .floor-button strong {
        display: block;
        margin-top: 0.4rem;
        font-size: 1.08rem;
        text-wrap: balance;
      }

      .floor-button span {
        display: block;
        margin-top: 0.5rem;
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.82rem;
        line-height: 1.45;
      }

      .site-list-panel {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.95rem;
        background: rgba(7, 17, 31, 0.58);
        padding: 1.05rem;
        backdrop-filter: blur(16px);
        align-self: start;
        min-height: 15.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
      }

      .site-seat-grid { display: none; }

      .mobile-site-picker {
        display: none;
      }

      .site-seat-button {
        min-height: 4.8rem;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.055);
        color: white;
        padding: 0.75rem;
        text-align: left;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .site-seat-button:hover,
      .site-seat-button.active {
        border-color: rgba(244, 182, 106, 0.72);
        background: rgba(244, 182, 106, 0.16);
        transform: translateY(-0.12rem);
      }

      .site-seat-button strong,
      .site-seat-button span {
        display: block;
      }

      .site-seat-button span {
        margin-top: 0.35rem;
        color: rgba(220, 231, 239, 0.64);
        font-size: 0.76rem;
        line-height: 1.35;
      }

      .board-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
        gap: 1rem;
        margin-top: 3rem;
      }

      .board-main,
      .board-sidebar {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.95rem;
        background: rgba(7, 17, 31, 0.62);
        padding: 1rem;
        backdrop-filter: blur(16px);
      }

      .board-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
        padding-bottom: 1rem;
      }

      .board-head-tools {
        display: grid;
        justify-items: end;
        gap: 0.55rem;
      }

      .board-sort-tabs {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.055);
        padding: 0.25rem;
      }

      .board-sort-button {
        min-height: 2rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(220, 231, 239, 0.68);
        padding: 0 0.72rem;
        font-size: 0.78rem;
        font-weight: 850;
        white-space: nowrap;
        cursor: pointer;
      }

      .board-sort-button.active {
        background: rgba(255, 195, 111, 0.18);
        color: #ffc36f;
      }

      .board-head h3,
      .board-sidebar h3 {
        margin: 0.55rem 0 0;
        font-size: 1.4rem;
      }

      .board-list-head,
      .board-post-row {
        display: grid;
        grid-template-columns: 4.2rem minmax(0, 1fr) 7rem 7rem 5.4rem;
        gap: 0.8rem;
        align-items: center;
      }

      .board-list-head {
        margin-top: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 0.75rem 0.65rem;
        color: rgba(220, 231, 239, 0.55);
        font-size: 1.02rem;
        font-weight: 780;
      }

      .board-compose {
        display: grid;
        gap: 0.75rem;
        margin-top: 1rem;
        border: 1px solid rgba(244, 182, 106, 0.22);
        border-radius: 0.85rem;
        background: rgba(244, 182, 106, 0.08);
        padding: 1rem;
      }

      .board-write-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.055);
        padding: 0.9rem 1rem;
      }

      .board-write-panel.simple {
        justify-content: flex-end;
        border-color: transparent;
        background: transparent;
        padding: 1rem 0 0;
      }

      .board-write-panel.compact {
        margin-top: 0.85rem;
      }

      .board-write-panel p {
        margin: 0.45rem 0 0;
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.9rem;
      }

      .board-compose-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
      }

      .board-image-uploader {
        display: grid;
        gap: 0.45rem;
      }

      .board-image-preview {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
      }

      .board-image-preview:empty {
        display: none;
      }

      .board-image-preview-item,
      .board-row-thumb {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.65rem;
        background: rgba(255, 255, 255, 0.06);
      }

      .board-image-preview-item {
        display: grid;
        gap: 0.35rem;
        padding: 0.35rem;
      }

      .board-image-preview-item img,
      .board-row-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .board-image-preview-item img {
        aspect-ratio: 4 / 3;
        border-radius: 0.5rem;
      }

      .board-image-preview-item em {
        overflow: hidden;
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.72rem;
        font-style: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .board-post-list {
        display: grid;
      }

      .board-post-row {
        width: 100%;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: transparent;
        color: white;
        padding: 0.92rem 0.75rem;
        text-align: left;
        transition:
          background 180ms ease,
          color 180ms ease;
      }

      .board-post-row:hover {
        background: rgba(244, 182, 106, 0.1);
      }

      .board-post-row strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .board-post-row span {
        color: rgba(220, 231, 239, 0.64);
        font-size: 0.82rem;
        white-space: nowrap;
      }

      .board-row-thumb {
        display: grid;
        width: 3.8rem;
        height: 3.1rem;
        place-items: center;
        color: rgba(220, 231, 239, 0.44);
        font-size: 0.72rem;
        font-weight: 800;
      }

      .board-row-likes {
        color: rgba(255, 195, 111, 0.86) !important;
        font-weight: 800;
      }

      .board-post-detail {
        margin-top: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.06);
        padding: 1.15rem;
      }

      .board-detail-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .board-detail-actions {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
      }

      .board-like-button {
        display: inline-flex;
        min-height: 2.35rem;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff;
        padding: 0 0.8rem;
        font-size: 0.82rem;
        font-weight: 850;
        cursor: pointer;
      }

      .board-like-button strong {
        color: #ffc36f;
      }

      .board-like-button.active {
        border-color: rgba(255, 195, 111, 0.65);
        background: rgba(255, 195, 111, 0.18);
        color: #ffe4bb;
      }

      .board-detail-title {
        margin: 1.1rem 0 0;
        font-size: 1.65rem;
        line-height: 1.3;
      }

      .board-detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 0.7rem;
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.82rem;
      }

      .board-detail-content {
        min-height: 12rem;
        margin-top: 1.15rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1.15rem;
        color: rgba(220, 231, 239, 0.86);
        font-size: 0.98rem;
        line-height: 1.8;
        white-space: normal;
      }

      .board-image-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.05rem;
      }

      .board-image-grid.count-1 {
        grid-template-columns: minmax(0, 1fr);
      }

      .board-image-grid.count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .board-image-tile {
        overflow: hidden;
        min-height: 12rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.85rem;
        background: rgba(0, 0, 0, 0.18);
        padding: 0;
        cursor: zoom-in;
      }

      .board-image-tile img {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }

      .board-comments {
        display: grid;
        gap: 0.85rem;
        margin-top: 1.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1rem;
      }

      .board-comments-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .board-comments-head h4 {
        margin: 0;
        font-size: 1rem;
      }

      .board-comment-list {
        display: grid;
        gap: 0.65rem;
      }

      .board-comment {
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0.75rem;
        background: rgba(0, 0, 0, 0.16);
        padding: 0.82rem;
      }

      .board-comment-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        color: rgba(220, 231, 239, 0.66);
        font-size: 0.78rem;
      }

      .board-comment p {
        margin: 0.55rem 0 0;
        color: rgba(220, 231, 239, 0.86);
        line-height: 1.65;
      }

      .board-comment-form {
        display: grid;
        gap: 0.7rem;
        border: 1px solid rgba(244, 182, 106, 0.18);
        border-radius: 0.85rem;
        background: rgba(244, 182, 106, 0.06);
        padding: 0.9rem;
      }

      .board-category-list {
        display: grid;
        gap: 0.55rem;
        margin-top: 1rem;
      }

      .board-category-button {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.055);
        color: white;
        padding: 0.85rem;
        text-align: left;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          transform 180ms ease;
      }

      .board-category-button:hover,
      .board-category-button.active {
        border-color: rgba(244, 182, 106, 0.62);
        background: rgba(244, 182, 106, 0.14);
        transform: translateX(-0.12rem);
      }

      .board-category-button strong,
      .board-category-button span {
        display: block;
      }

      .board-category-button span {
        margin-top: 0.35rem;
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.78rem;
        line-height: 1.4;
      }

      .overlay {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        place-items: stretch end;
        background: rgba(2, 7, 14, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
      }

      .overlay:has(.panel.auth-panel) {
        place-items: center;
      }

      .overlay.show {
        opacity: 1;
        pointer-events: auto;
      }

      .panel {
        width: min(100%, 34rem);
        min-height: 100vh;
        overflow-y: auto;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
        background:
          radial-gradient(circle at 24% 0%, rgba(244, 182, 106, 0.13), transparent 16rem),
          linear-gradient(180deg, rgba(11, 23, 36, 0.96), rgba(7, 17, 31, 0.98));
        box-shadow: -24px 0 100px rgba(0, 0, 0, 0.38);
        transform: translateX(1rem);
        transition: transform 180ms ease;
        backdrop-filter: blur(18px);
      }

      .overlay.show .panel {
        transform: translateX(0);
      }

      .panel.auth-panel {
        width: min(calc(100vw - 2rem), 35rem);
        min-height: auto;
        max-height: min(52rem, calc(100vh - 2rem));
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 0.85rem;
        box-shadow: 0 28px 120px rgba(0, 0, 0, 0.48);
        transform: translateY(0.85rem) scale(0.98);
      }

      .overlay.show .panel.auth-panel {
        transform: translateY(0) scale(1);
      }

      .panel.auth-panel .panel-body {
        padding: 1rem;
      }

      .auth-popup-shell {
        display: grid;
        place-items: center;
      }

      .auth-popup-card {
        width: 100%;
        background: rgba(7, 17, 31, 0.74);
        backdrop-filter: blur(18px);
      }

      .auth-popup-card .primary-button,
      .auth-popup-card .ghost-button,
      .policy-inline-button {
        white-space: normal;
        line-height: 1.25;
      }

      .auth-form-message {
        margin: -0.15rem 0 0;
        border: 1px solid rgba(255, 122, 122, 0.48);
        border-radius: 0.8rem;
        background: rgba(112, 25, 35, 0.28);
        padding: 0.75rem 0.85rem;
        color: #ffd4d4;
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1.45;
      }

      .auth-form-message[hidden] {
        display: none;
      }

      .auth-helper-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin: -0.15rem 0 0.1rem;
      }

      .auth-helper-links button {
        border: 0;
        background: transparent;
        color: rgba(220, 231, 239, 0.82);
        font: inherit;
        font-size: 0.92rem;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 0.22rem;
        cursor: pointer;
      }

      .auth-helper-links button:hover {
        color: var(--ember);
      }

      .auth-helper-links span {
        width: 1px;
        height: 0.9rem;
        background: rgba(220, 231, 239, 0.28);
      }

      .account-tier-card {
        display: grid;
        place-items: center;
        gap: 0.35rem;
        border: 1px solid rgba(244, 182, 106, 0.24);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 50% 0%, rgba(244, 182, 106, 0.18), transparent 70%),
          rgba(255, 255, 255, 0.055);
        padding: 0.95rem 1rem;
        text-align: center;
      }

      .account-tier-card span {
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.92rem;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      .account-tier-card strong {
        color: var(--ember);
        font-size: 1.32rem;
        font-weight: 900;
        letter-spacing: -0.03em;
      }

      .panel-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(7, 17, 31, 0.88);
        padding: 1rem;
        backdrop-filter: blur(16px);
      }

      .panel-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 780;
      }

      .panel-body {
        padding: 1rem;
      }

      .stack {
        display: grid;
        gap: 0.85rem;
      }

      .split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
      }

      .card {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.065);
        padding: 1rem;
      }

      .reserve-flow {
        gap: 1rem;
      }

      .reserve-reschedule-banner {
        display: grid;
        gap: 0.65rem;
        border: 1px solid rgba(229, 167, 98, 0.35);
        border-radius: 0.85rem;
        background:
          linear-gradient(135deg, rgba(229, 167, 98, 0.14), rgba(229, 167, 98, 0.045)),
          rgba(7, 17, 31, 0.5);
        padding: 1rem;
      }

      .reserve-reschedule-banner > div {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        flex-wrap: wrap;
      }

      .reserve-reschedule-banner > div > strong {
        color: #f4c28e;
        line-height: 1.5;
      }

      .reserve-reschedule-cancel {
        margin-left: auto;
        min-height: 2.35rem;
        padding: 0.4rem 0.75rem;
        font-size: 0.82rem;
      }

      .reserve-reschedule-banner p {
        margin: 0;
        color: rgba(236, 243, 248, 0.78);
        font-size: 0.88rem;
        line-height: 1.65;
      }

      .reserve-step-card {
        display: grid;
        gap: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0.8rem;
        background: rgba(2, 7, 14, 0.24);
        padding: 0.9rem;
      }

      .reserve-step-card.disabled {
        opacity: 0.62;
      }

      .reserve-step-head {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
      }

      .reserve-step-head > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--ember);
        color: #07111f;
        font-size: 0.78rem;
        font-weight: 900;
      }

      .reserve-step-head h3 {
        margin: 0;
      }

      .reserve-step-head p {
        margin: 0.25rem 0 0;
      }

      .reserve-site-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
      }

      .reserve-site-card {
        display: grid;
        gap: 0.34rem;
        min-height: 8.2rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.78rem;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
          rgba(4, 10, 18, 0.62);
        color: white;
        padding: 0.85rem;
        text-align: left;
        transition:
          border-color 160ms ease,
          background 160ms ease,
          transform 160ms ease;
      }

      .reserve-site-card:hover {
        border-color: rgba(244, 182, 106, 0.7);
        transform: translateY(-1px);
      }

      .reserve-site-card.active {
        border-color: var(--ember);
        background:
          linear-gradient(180deg, rgba(244, 182, 106, 0.24), rgba(244, 182, 106, 0.08)),
          rgba(4, 10, 18, 0.76);
      }

      .reserve-site-card.unavailable,
      .reserve-site-card:disabled {
        cursor: not-allowed;
        opacity: 0.48;
        transform: none;
      }

      .reserve-site-card strong,
      .reserve-site-card b {
        font-size: 1rem;
      }

      .reserve-site-card span:not(.reserve-site-status) {
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.78rem;
        line-height: 1.45;
      }

      .reserve-site-status {
        justify-self: start;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        padding: 0.24rem 0.52rem;
        color: rgba(220, 231, 239, 0.82);
        font-size: 0.72rem;
        font-weight: 800;
      }

      .reserve-site-card.active .reserve-site-status {
        background: var(--ember);
        color: #07111f;
      }

      .reserve-date-field {
        font-weight: 800;
      }

      body[data-page="reserve"] .hero,
      body[data-page="account"] .hero {
        height: 0;
        min-height: 0;
        overflow: visible;
      }

      body[data-page="reserve"] .hero .content,
      body[data-page="reserve"] .hero .demo-rail,
      body[data-page="reserve"] .hero .policy-float-button,
      body[data-page="reserve"] .home-advantages,
      body[data-page="reserve"] .site-footer,
      body[data-page="account"] .hero .content,
      body[data-page="account"] .hero .demo-rail,
      body[data-page="account"] .hero .policy-float-button,
      body[data-page="account"] .home-advantages,
      body[data-page="account"] .site-footer,
      body[data-page="account"] .reservation-page,
      body[data-page="account"] .auth-page {
        display: none;
      }

      .reservation-page {
        position: relative;
        display: none;
        min-height: 100vh;
        isolation: isolate;
        padding: 7.25rem 1.25rem 4rem;
        color: white;
        overflow: hidden;
      }

      body[data-page="reserve"] .reservation-page {
        display: block;
      }

      body[data-page="reserve"] .topbar.home-glass-nav,
      body[data-page="account"] .topbar.home-glass-nav {
        position: fixed;
        top: 0.75rem;
        left: clamp(1rem, 2.6vw, 3.25rem);
        right: clamp(1rem, 2.6vw, 3.25rem);
        z-index: 72;
        display: flex;
        align-items: center;
        gap: clamp(0.9rem, 1.4vw, 1.5rem);
        width: auto;
        background: transparent;
        border: 0;
        padding: 0;
      }

      body[data-page="reserve"] .home-titlemark,
      body[data-page="account"] .home-titlemark {
        display: inline-flex;
        align-items: center;
        gap: 0;
        flex: 0 0 auto;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
      }

      body[data-page="reserve"] .home-titlemark .logo-cj,
      body[data-page="reserve"] .home-titlemark .logo-camp,
      body[data-page="account"] .home-titlemark .logo-cj,
      body[data-page="account"] .home-titlemark .logo-camp {
        font-family: 'Nanum Myeongjo', serif;
        font-size: clamp(1.65rem, 2.15vw, 2.55rem);
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.01em;
        line-height: 1;
      }

      body[data-page="reserve"] .home-titlemark .logo-byeol,
      body[data-page="account"] .home-titlemark .logo-byeol {
        font-family: 'Nanum Pen Script', cursive;
        font-size: clamp(2.45rem, 3.15vw, 3.65rem);
        font-weight: 400;
        color: var(--ember);
        letter-spacing: 0.02em;
        line-height: 1;
      }

      body[data-page="reserve"] .home-nav-pill,
      body[data-page="account"] .home-nav-pill {
        min-width: 0;
        flex: 1;
      }

      .reservation-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: url("../assets/camp-night-main-v2.png");
        background-position: center;
        background-size: cover;
        filter: brightness(0.78) saturate(0.86);
        transform: scale(1.02);
      }

      .reservation-page::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          radial-gradient(circle at 74% 22%, rgba(244, 182, 106, 0.16), transparent 22rem),
          linear-gradient(90deg, rgba(3, 8, 16, 0.9), rgba(3, 8, 16, 0.58) 52%, rgba(3, 8, 16, 0.88)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.28), rgba(3, 8, 16, 0.96));
      }

      .reservation-page-inner {
        width: min(100%, 82rem);
        margin: 0 auto;
      }

      .reservation-page-head {
        max-width: 44rem;
        margin-bottom: 1.4rem;
      }

      .reservation-page-head h1 {
        margin: 0.75rem 0 0;
        font-size: clamp(2.8rem, 6vw, 5.7rem);
        line-height: 0.92;
        letter-spacing: 0;
      }

      .reservation-page-head p {
        max-width: 36rem;
        margin: 1rem 0 0;
        color: rgba(220, 231, 239, 0.78);
        font-size: 1.02rem;
        line-height: 1.65;
      }

      .reservation-page-body {
        display: grid;
        gap: 0.9rem;
      }

      body[data-page="reserve"] form[data-form="reserve"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
        align-items: start;
        gap: 1rem;
      }

      body[data-page="reserve"] .reserve-flow,
      body[data-page="reserve"] .reservation-page-body > form > .card {
        background: rgba(7, 17, 31, 0.72);
        backdrop-filter: blur(18px);
      }

      body[data-page="reserve"] .reserve-site-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      body[data-page="reserve"] .reserve-site-card {
        min-height: 6.4rem;
      }

      body[data-page="reserve"] .reserve-calendar-day {
        min-height: 4.75rem;
      }

      body[data-page="reserve"] .reserve-calendar-day strong {
        font-size: 1.15rem;
      }

      .account-page {
        position: relative;
        display: none;
        min-height: 100vh;
        isolation: isolate;
        color: white;
        overflow: hidden;
        padding: 7.25rem 1.25rem 4rem;
      }

      body[data-page="account"] .account-page {
        display: block;
      }

      body[data-page="account"] #overlay,
      body[data-page="account"] #overlay.show {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      .account-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: url("../assets/camp-night-main-v2.png");
        background-position: center;
        background-size: cover;
        filter: brightness(0.74) saturate(0.88);
        transform: scale(1.02);
      }

      .account-page::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          radial-gradient(circle at 74% 20%, rgba(244, 182, 106, 0.14), transparent 22rem),
          linear-gradient(90deg, rgba(3, 8, 16, 0.94), rgba(3, 8, 16, 0.64) 52%, rgba(3, 8, 16, 0.92)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.24), rgba(3, 8, 16, 0.96));
      }

      .account-page-inner {
        width: min(100%, 76rem);
        margin: 0 auto;
      }

      .account-page-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.65rem;
      }

      .account-page-head > div {
        max-width: 48rem;
      }

      .account-page-head h1 {
        margin: 0.65rem 0 0;
        font-size: clamp(2.6rem, 3.4vw, 3.6rem);
        line-height: 1;
        letter-spacing: 0;
      }

      .account-page-head p {
        max-width: 42rem;
        margin: 0.85rem 0 0;
        color: rgba(220, 231, 239, 0.78);
        font-size: 1.02rem;
        line-height: 1.65;
      }

      .account-page-home {
        flex-shrink: 0;
        margin-top: 0.35rem;
        min-height: 2.8rem;
        padding: 0 1.2rem;
      }

      .account-page-summary {
        display: none;
        gap: 0.45rem;
        padding: 1rem 1.1rem;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.72);
        box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.24);
      }

      .account-page-summary span {
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.9rem;
        font-weight: 800;
      }

      .account-page-summary strong {
        color: #ffffff;
        font-size: 1.35rem;
        font-weight: 900;
      }

      .account-page-summary em {
        color: var(--ember);
        font-size: 1.05rem;
        font-style: normal;
        font-weight: 900;
      }

      .account-page-card {
        padding: clamp(1.05rem, 2vw, 1.5rem);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1.2rem;
        background: rgba(7, 17, 31, 0.72);
        backdrop-filter: blur(18px);
      }

      .account-page-card > .stack {
        gap: 1rem;
      }

      .account-page-card .card {
        background: rgba(255, 255, 255, 0.045);
      }

      .account-dashboard {
        display: grid;
        gap: 1rem;
      }

      .account-member-card,
      .account-reservation-card {
        border-color: rgba(255, 255, 255, 0.13);
        background: rgba(2, 7, 14, 0.3);
      }

      .account-page-card form[data-form="account-profile"].account-profile-form {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 1rem;
      }

      .account-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.8rem;
      }

      .account-tier-card.account-tier-inline {
        display: grid;
        justify-items: start;
        gap: 0.25rem;
        width: 100%;
        border-color: rgba(244, 182, 106, 0.32);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 22% 10%, rgba(244, 182, 106, 0.13), transparent 15rem),
          rgba(255, 255, 255, 0.045);
        padding: 1rem 1.15rem;
        text-align: left;
      }

      .account-tier-card.account-tier-inline span {
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.92rem;
        font-weight: 900;
      }

      .account-tier-card.account-tier-inline strong {
        color: var(--ember);
        font-size: 1.65rem;
        font-weight: 950;
      }

      .account-tier-card.account-mini-status {
        background:
          radial-gradient(circle at 18% 10%, rgba(80, 211, 194, 0.1), transparent 12rem),
          rgba(255, 255, 255, 0.042);
      }

      .account-tier-card.account-mini-status strong {
        color: #ffffff;
        font-size: 1.22rem;
        line-height: 1.25;
      }

      .account-summary-link {
        justify-self: start;
        border: 1px solid rgba(244, 182, 106, 0.45);
        border-radius: 999px;
        background: rgba(244, 182, 106, 0.12);
        color: var(--ember);
        cursor: pointer;
        font-size: 0.86rem;
        font-weight: 950;
        padding: 0.38rem 0.75rem;
      }

      .account-summary-link:hover {
        background: rgba(244, 182, 106, 0.2);
        color: #ffffff;
      }

      .account-membership-benefits {
        display: grid;
        gap: 0.8rem;
        border: 1px solid rgba(80, 211, 194, 0.24);
        border-radius: 1rem;
        background: rgba(80, 211, 194, 0.055);
        padding: 1rem 1.15rem;
      }

      .account-membership-benefits.is-expired {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-color: rgba(244, 182, 106, 0.32);
        background: rgba(244, 182, 106, 0.07);
      }

      .account-membership-benefits.is-expired h3,
      .account-membership-benefits.is-expired p {
        margin: 0.45rem 0 0;
      }

      .account-membership-benefits.is-expired > strong {
        color: var(--ember);
        font-size: 1.4rem;
      }

      .account-benefit-heading,
      .account-benefit-stats {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
      }

      .account-benefit-heading > div {
        display: grid;
        gap: 0.2rem;
      }

      .account-benefit-heading span,
      .account-benefit-expiry span {
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .account-benefit-heading strong {
        color: #ffffff;
        font-size: 1.32rem;
      }

      .account-benefit-heading small {
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.82rem;
      }

      .account-benefit-expiry {
        text-align: right;
      }

      .account-benefit-progress {
        height: 0.55rem;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.09);
      }

      .account-benefit-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--ember);
      }

      .account-benefit-stats {
        align-items: center;
        color: rgba(236, 243, 248, 0.88);
        font-size: 0.88rem;
        font-weight: 850;
      }

      .account-membership-benefits > p {
        margin: 0;
        color: rgba(220, 231, 239, 0.64);
        font-size: 0.85rem;
        line-height: 1.65;
      }

      .membership-register-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
      }

      .account-info-list {
        display: grid;
        gap: 0.78rem;
      }

      .account-info-row {
        display: grid;
        grid-template-columns: 8rem minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
        margin: 0;
      }

      .account-info-row .label {
        margin: 0;
        color: rgba(220, 231, 239, 0.82);
        font-size: 1.05rem;
        font-weight: 950;
      }

      .account-profile-input {
        width: 100%;
      }

      .account-profile-input[readonly] {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff;
      }

      .account-profile-input[readonly]:placeholder-shown {
        color: transparent;
      }

      .account-profile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .account-profile-actions .primary-button,
      .account-profile-actions .ghost-button {
        min-width: 12rem;
        justify-content: center;
      }

      .account-section-title h3 {
        margin: 0 0 0.85rem;
        color: #ffffff;
        font-size: 1.48rem;
      }

      .account-reservation-list {
        display: grid;
        gap: 0.75rem;
      }

      .account-reservation-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.055);
        padding: 1rem;
      }

      .account-reservation-row strong {
        display: block;
        color: #ffffff;
        font-size: 1.13rem;
        font-weight: 950;
      }

      .account-reservation-row span {
        display: block;
        margin-top: 0.25rem;
        color: var(--ember);
        font-size: 1.05rem;
        font-weight: 950;
      }

      .account-reservation-row small {
        display: block;
        margin-top: 0.3rem;
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.88rem;
        font-weight: 800;
      }

      .account-reservation-row.is-cancelled {
        background: rgba(255, 255, 255, 0.025);
        opacity: 0.88;
      }

      .account-dialog-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: grid;
        place-items: center;
        padding: 1rem;
        background: rgba(1, 5, 12, 0.68);
        backdrop-filter: blur(10px);
      }

      .account-dialog {
        width: min(100%, 36rem);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.96);
        box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
        color: #ffffff;
        padding: 1.15rem;
      }

      .account-dialog-wide {
        width: min(100%, 58rem);
      }

      .account-dialog-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 0.85rem;
      }

      .account-dialog-head h3 {
        margin: 0;
        font-size: 1.42rem;
      }

      .account-dialog-fields {
        display: grid;
        gap: 0.85rem;
        margin-top: 1rem;
      }

      .account-dialog-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.6rem;
        margin-top: 1rem;
      }

      .account-coupon-list {
        display: grid;
        gap: 0.85rem;
        margin-top: 1rem;
      }

      .account-coupon-card {
        border: 1px solid rgba(244, 182, 106, 0.24);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 12% 0%, rgba(244, 182, 106, 0.12), transparent 13rem),
          rgba(255, 255, 255, 0.045);
        padding: 1rem;
      }

      .account-coupon-card.is-muted {
        opacity: 0.68;
      }

      .account-coupon-card-head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.55rem;
      }

      .account-coupon-card-head strong {
        color: #ffffff;
        font-size: 1.28rem;
        font-weight: 950;
      }

      .account-coupon-card p {
        margin: 0.7rem 0 0;
        color: rgba(220, 231, 239, 0.86);
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.55;
      }

      .account-coupon-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        margin: 0.9rem 0 0;
      }

      .account-coupon-meta div {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.7rem 0.8rem;
      }

      .account-coupon-meta dt {
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.82rem;
        font-weight: 900;
      }

      .account-coupon-meta dd {
        margin: 0.25rem 0 0;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 950;
      }

      .account-notice-dialog p {
        margin: 1rem 0 0;
        color: rgba(220, 231, 239, 0.84);
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.6;
        white-space: pre-line;
      }

      .account-refund-quote {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        margin-top: 1rem;
      }

      .account-refund-quote div {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        padding: 0.75rem;
      }

      .account-refund-quote div.is-total {
        border-color: rgba(229, 167, 98, 0.45);
        background: rgba(229, 167, 98, 0.1);
      }

      .account-refund-quote span,
      .account-refund-quote strong {
        display: block;
      }

      .account-refund-quote span {
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.82rem;
        font-weight: 850;
      }

      .account-refund-quote strong {
        margin-top: 0.3rem;
        color: #fff;
        font-size: 1.05rem;
        font-weight: 950;
      }

      .account-refund-notice {
        border-left: 3px solid var(--ember);
        padding-left: 0.8rem;
      }

      .account-refund-special-notice {
        margin-top: 0.75rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid rgba(255, 190, 92, 0.36);
        border-radius: 0.7rem;
        background: rgba(255, 190, 92, 0.08);
        color: #ffe0aa;
        font-size: 0.88rem;
        line-height: 1.6;
      }

      .account-cancel-reason {
        display: grid;
        gap: 0.35rem;
        margin-top: 1rem;
      }

      .account-reservation-detail-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1rem 0;
      }

      .account-reservation-detail-summary div {
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.055);
        padding: 0.8rem;
      }

      .account-reservation-detail-summary span {
        display: block;
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.84rem;
        font-weight: 900;
      }

      .account-reservation-detail-summary strong {
        display: block;
        margin-top: 0.25rem;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 950;
      }

      @media (max-width: 1100px) {
        .account-summary-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 720px) {
        .account-page {
          padding-inline: 1rem;
        }

        .account-page-head {
          display: block;
        }

        .account-page-home {
          margin-top: 1rem;
          width: 100%;
        }

        .account-summary-grid {
          grid-template-columns: 1fr;
        }

        .account-benefit-heading,
        .account-benefit-stats,
        .account-membership-benefits.is-expired {
          display: grid;
          grid-template-columns: 1fr;
          align-items: start;
        }

        .account-benefit-expiry {
          text-align: left;
        }

        .membership-register-options {
          grid-template-columns: 1fr;
        }

        .account-coupon-meta {
          grid-template-columns: 1fr;
        }

        .account-info-row,
        .account-reservation-row,
        .account-reservation-detail-summary {
          grid-template-columns: 1fr;
        }

        .account-profile-actions .primary-button,
        .account-profile-actions .ghost-button,
        .account-reservation-row .ghost-button {
          width: 100%;
        }
      }

      body[data-page="auth"] .hero {
        height: 0;
        min-height: 0;
        overflow: visible;
      }

      body[data-page="auth"] .hero .content,
      body[data-page="auth"] .hero .demo-rail,
      body[data-page="auth"] .hero .policy-float-button,
      body[data-page="auth"] .topbar,
      body[data-page="auth"] .home-advantages,
      body[data-page="auth"] .site-footer,
      body[data-page="auth"] .reservation-page,
      body[data-page="auth"] .floating-reserve-cta {
        display: none;
      }

      .auth-page {
        position: relative;
        display: none;
        min-height: 100vh;
        isolation: isolate;
        color: white;
        overflow: hidden;
        padding: 1.4rem;
      }

      body[data-page="auth"] .auth-page {
        display: block;
      }

      .auth-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: url("../assets/camp-night-main-v2.png");
        background-position: center;
        background-size: cover;
        filter: brightness(0.74) saturate(0.88);
        transform: scale(1.02);
      }

      .auth-page::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
          radial-gradient(circle at 74% 20%, rgba(244, 182, 106, 0.14), transparent 22rem),
          linear-gradient(90deg, rgba(3, 8, 16, 0.94), rgba(3, 8, 16, 0.64) 52%, rgba(3, 8, 16, 0.92)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.24), rgba(3, 8, 16, 0.96));
      }

      .auth-page-inner {
        width: min(100%, 74rem);
        min-height: calc(100vh - 2.8rem);
        margin: 0 auto;
      }

      .auth-page-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.35rem 0 3rem;
      }

      .auth-brand {
        display: inline-flex;
        align-items: center;
        gap: 0;
        color: white;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
      }

      .auth-brand .logo-cj,
      .auth-brand .logo-camp {
        font-family: 'Nanum Myeongjo', serif;
        font-size: clamp(1.65rem, 2.15vw, 2.55rem);
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.01em;
        line-height: 1;
      }

      .auth-brand .logo-byeol {
        font-family: 'Nanum Pen Script', cursive;
        font-size: clamp(2.45rem, 3.15vw, 3.65rem);
        font-weight: 400;
        color: var(--ember);
        letter-spacing: 0.02em;
        line-height: 0.9;
      }

      .auth-page-tabs {
        margin-top: 0;
      }

      .auth-page-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(21rem, 32rem);
        align-items: center;
        gap: clamp(1.2rem, 5vw, 5.2rem);
        min-height: calc(100vh - 9rem);
      }

      .auth-page-copy {
        max-width: 43rem;
      }

      .auth-page-copy h1 {
        margin: 0.9rem 0 0;
        font-size: clamp(2.4rem, 5.8vw, 5.2rem);
        line-height: 0.98;
        letter-spacing: 0;
        text-wrap: balance;
      }

      .auth-page-copy p {
        max-width: 34rem;
        margin: 1rem 0 0;
        color: rgba(220, 231, 239, 0.78);
        font-size: 1.02rem;
        line-height: 1.65;
        text-wrap: pretty;
      }

      .auth-card .card {
        background: rgba(7, 17, 31, 0.7);
        backdrop-filter: blur(18px);
      }

      .social-auth-block {
        display: grid;
        gap: 0.75rem;
      }

      .social-auth-divider {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0.75rem;
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .social-auth-divider::before,
      .social-auth-divider::after {
        height: 1px;
        background: rgba(255, 255, 255, 0.13);
        content: "";
      }

      .social-auth-grid {
        display: grid;
        gap: 0.55rem;
      }

      .social-auth-button {
        display: inline-flex;
        min-height: 2.9rem;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        border: 1px solid transparent;
        border-radius: 0.72rem;
        padding: 0 1rem;
        font-size: 0.94rem;
        font-weight: 900;
        line-height: 1;
        transition:
          filter 160ms ease,
          transform 160ms ease;
      }

      .social-auth-button:hover,
      .social-auth-button:focus-visible {
        filter: brightness(1.04);
        outline: none;
        transform: translateY(-1px);
      }

      .social-auth-button.kakao {
        background: #fee500;
        color: #191919;
      }

      .social-auth-button.naver {
        background: #03c75a;
        color: #ffffff;
      }

      .social-auth-button.google {
        border-color: rgba(255, 255, 255, 0.24);
        background: #ffffff;
        color: #1f1f1f;
      }

      .social-auth-mark {
        display: inline-flex;
        width: 1.45rem;
        height: 1.45rem;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.12);
        font-size: 0.78rem;
        font-weight: 950;
      }

      .social-auth-button.google .social-auth-mark {
        background: linear-gradient(135deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
        color: #ffffff;
      }

      .reserve-selected-date {
        display: grid;
        align-content: center;
        min-height: 3.35rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0.7rem;
        background: rgba(2, 7, 14, 0.42);
        padding: 0.7rem 0.85rem;
      }

      .reserve-selected-date strong {
        font-size: 0.98rem;
      }

      .reserve-calendar {
        display: grid;
        gap: 0.6rem;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.8rem;
        background: rgba(2, 7, 14, 0.28);
        padding: 0.75rem;
      }

      .reserve-calendar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .reserve-calendar-head > div {
        display: grid;
        justify-items: center;
        gap: 0.2rem;
      }

      .reserve-calendar-head strong {
        font-size: 1.05rem;
      }

      .reserve-calendar-loading {
        color: rgba(220, 231, 239, 0.6);
        font-size: 0.72rem;
        font-weight: 700;
      }

      .reserve-calendar-weekdays,
      .reserve-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.38rem;
      }

      .reserve-calendar-weekdays span {
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.72rem;
        font-weight: 800;
        text-align: center;
      }

      .reserve-calendar-empty {
        min-height: 4rem;
      }

      .reserve-calendar-day {
        display: grid;
        place-items: center;
        gap: 0.18rem;
        min-height: 4rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.65rem;
        background: rgba(255, 255, 255, 0.055);
        color: white;
        padding: 0.35rem;
        transition:
          border-color 160ms ease,
          background 160ms ease,
          transform 160ms ease;
      }

      .reserve-calendar-day:hover {
        border-color: rgba(244, 182, 106, 0.64);
        background: rgba(244, 182, 106, 0.12);
        transform: translateY(-1px);
      }

      .reserve-calendar-day strong {
        font-size: 1rem;
      }

      .reserve-calendar-day span {
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.68rem;
        font-weight: 700;
      }

      .reserve-calendar-day.red-day {
        border-color: rgba(255, 93, 118, 0.35);
        background: rgba(255, 93, 118, 0.07);
      }

      .reserve-calendar-day.red-day strong,
      .reserve-calendar-day.red-day span {
        color: #ff6678;
      }

      .reserve-calendar-day.selected {
        border-color: var(--ember);
        background: rgba(244, 182, 106, 0.22);
      }

      .reserve-calendar-day.selected strong,
      .reserve-calendar-day.selected span {
        color: #ffffff;
      }

      .reserve-calendar-day.unavailable,
      .reserve-calendar-day.outside,
      .reserve-calendar-day:disabled {
        cursor: not-allowed;
        opacity: 0.4;
        transform: none;
      }

      .reservation-confirm-note {
        margin-top: 0.75rem;
        border: 1px dashed rgba(244, 182, 106, 0.35);
        border-radius: 0.7rem;
        background: rgba(244, 182, 106, 0.08);
        color: rgba(220, 231, 239, 0.78);
        padding: 0.75rem;
        font-size: 0.82rem;
        line-height: 1.55;
      }

      .membership-overview {
        display: grid;
        gap: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.9rem;
        background:
          radial-gradient(circle at 0% 0%, rgba(244, 182, 106, 0.13), transparent 15rem),
          rgba(255, 255, 255, 0.055);
        padding: 1rem;
      }

      .membership-overview-head,
      .membership-tier-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .membership-overview-head h3 {
        margin: 0.55rem 0 0;
      }

      .membership-current-badge,
      .tier-current-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--ember);
        color: #07111f;
        font-size: 0.76rem;
        font-weight: 850;
        white-space: nowrap;
      }

      .membership-current-badge {
        min-height: 2.15rem;
        padding: 0 0.8rem;
      }

      .membership-tier-list {
        display: grid;
        gap: 0.7rem;
      }

      .membership-tier-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.85rem;
        background: rgba(2, 7, 14, 0.28);
        padding: 0.9rem;
      }

      .membership-tier-card.current {
        border-color: rgba(244, 182, 106, 0.82);
        background:
          radial-gradient(circle at 100% 0%, rgba(244, 182, 106, 0.18), transparent 12rem),
          rgba(244, 182, 106, 0.08);
        box-shadow: inset 0 0 0 1px rgba(244, 182, 106, 0.18);
      }

      .membership-tier-card.vip {
        border-color: rgba(137, 240, 181, 0.2);
      }

      .membership-tier-top h4 {
        margin: 0.25rem 0 0;
        font-size: 1.08rem;
      }

      .membership-tier-top strong {
        color: var(--ember);
        font-size: 0.82rem;
        white-space: nowrap;
      }

      .tier-price-note {
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.75rem;
        font-weight: 750;
      }

      .membership-tier-card p {
        margin: 0.65rem 0 0;
        color: rgba(220, 231, 239, 0.74);
        font-size: 0.86rem;
        line-height: 1.55;
      }

      .membership-tier-card ul {
        display: grid;
        gap: 0.38rem;
        margin: 0.75rem 0 0;
        padding: 0;
        list-style: none;
      }

      .membership-tier-card li {
        position: relative;
        padding-left: 1rem;
        color: rgba(220, 231, 239, 0.86);
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .membership-tier-card li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.58em;
        width: 0.38rem;
        height: 0.38rem;
        border-radius: 999px;
        background: var(--ember);
      }

      .tier-current-mark {
        margin-top: 0.85rem;
        padding: 0.35rem 0.65rem;
      }

      .membership-detail {
        display: grid;
        gap: 1.25rem;
      }

      .membership-detail-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.95rem;
        background: rgba(7, 17, 31, 0.54);
        padding: 1rem;
        backdrop-filter: blur(14px);
      }

      .membership-detail-head h3 {
        margin: 0.55rem 0 0;
        font-size: clamp(1.45rem, 2.6vw, 2.05rem);
      }

      .membership-detail-head .soft {
        margin-bottom: 0;
      }

      .membership-detail-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.9rem;
      }

      .membership-detail-card {
        position: relative;
        display: flex;
        min-height: 28rem;
        overflow: hidden;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1rem;
        background:
          radial-gradient(circle at 18% 0%, rgba(244, 182, 106, 0.11), transparent 15rem),
          rgba(7, 17, 31, 0.62);
        padding: 1rem;
        backdrop-filter: blur(16px);
      }

      .membership-detail-card.current {
        border-color: rgba(244, 182, 106, 0.82);
        background:
          radial-gradient(circle at 100% 0%, rgba(244, 182, 106, 0.21), transparent 14rem),
          rgba(244, 182, 106, 0.08);
        box-shadow:
          inset 0 0 0 1px rgba(244, 182, 106, 0.22),
          0 24px 90px rgba(244, 182, 106, 0.08);
      }

      .membership-detail-card.vip {
        border-color: rgba(137, 240, 181, 0.24);
      }

      .membership-detail-card-top h4 {
        margin: 0.35rem 0 0;
        font-size: 1.45rem;
      }

      .membership-detail-card-top strong {
        display: inline-flex;
        margin-top: 0.65rem;
        border: 1px solid rgba(244, 182, 106, 0.3);
        border-radius: 999px;
        background: rgba(244, 182, 106, 0.09);
        color: var(--ember);
        padding: 0.34rem 0.58rem;
        font-size: 0.8rem;
      }

      .membership-detail-card p {
        margin: 0.85rem 0 0;
        color: rgba(220, 231, 239, 0.72);
        font-size: 0.9rem;
        line-height: 1.65;
      }

      .membership-detail-card ul {
        display: grid;
        gap: 0.55rem;
        margin: 1rem 0 1.25rem;
        padding: 0;
        list-style: none;
      }

      .membership-detail-card li {
        position: relative;
        padding-left: 1.1rem;
        color: rgba(220, 231, 239, 0.9);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .membership-detail-card li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.58em;
        width: 0.42rem;
        height: 0.42rem;
        border-radius: 999px;
        background: var(--ember);
      }

      .membership-detail-card .benefit-note,
      .membership-tier-card .benefit-note {
        display: inline-block;
        margin-left: 0.28rem;
        font-size: 0.78em;
        color: rgba(220, 231, 239, 0.72);
        vertical-align: baseline;
      }

      .membership-detail-footer {
        display: grid;
        gap: 0.8rem;
        margin-top: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1rem;
      }

      .membership-price span {
        display: block;
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.76rem;
        font-weight: 700;
      }

      .membership-price strong {
        display: block;
        margin-top: 0.22rem;
        color: white;
        font-size: 1.28rem;
      }

      .membership-detail-action {
        width: 100%;
      }

      .soft {
        color: rgba(220, 231, 239, 0.76);
        text-wrap: pretty;
      }

      .muted {
        color: rgba(220, 231, 239, 0.58);
      }

      .label {
        display: block;
        margin-bottom: 0.38rem;
        color: rgba(220, 231, 239, 0.76);
        font-size: 1.02rem;
        font-weight: 780;
        white-space: nowrap;
      }

      .field,
      .select,
      .textarea {
        width: 100%;
        min-height: 3.35rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0.7rem;
        background: rgba(2, 7, 14, 0.42);
        color: white;
        outline: none;
        padding: 0.95rem 1rem;
        transition:
          border-color 160ms ease,
          background 160ms ease;
      }

      .textarea {
        min-height: 5.5rem;
        resize: vertical;
      }

      .field:focus,
      .select:focus,
      .textarea:focus {
        border-color: rgba(244, 182, 106, 0.72);
        background: rgba(2, 7, 14, 0.66);
      }

      .select option {
        color: #07111f;
      }

      .sms-verify-box {
        display: grid;
        gap: 0.55rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.75rem;
      }

      .sms-code-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
        align-items: center;
      }

      .agreement-card {
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 0.78rem;
        background: rgba(255, 255, 255, 0.055);
        padding: 0.9rem;
        text-align: left;
      }

      .agreement-row,
      .checkbox-field {
        display: grid;
        grid-template-columns: 1.25rem minmax(0, 1fr);
        align-items: start;
        justify-content: start;
        gap: 0.75rem;
        width: 100%;
        text-align: left;
      }

      .agreement-text,
      .checkbox-field {
        color: rgba(220, 231, 239, 0.82);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.65;
        text-align: left;
      }

      .agreement-text {
        display: block;
        margin: 0;
      }

      .agreement-row input[type="checkbox"],
      .checkbox-field input {
        width: 1.15rem;
        height: 1.15rem;
        flex: 0 0 auto;
        margin: 0.32rem 0 0;
        accent-color: var(--ember);
      }

      .policy-inline-button {
        display: inline;
        border: 0;
        background: none;
        color: #ffd092;
        cursor: pointer;
        font: inherit;
        font-weight: 850;
        padding: 0;
        text-decoration: underline;
        text-underline-offset: 0.18em;
      }

      .policy-inline-button:hover {
        color: white;
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-top: 0.85rem;
      }

      .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 1.8rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        padding: 0 0.68rem;
        color: rgba(220, 231, 239, 0.82);
        font-size: 0.75rem;
        font-weight: 700;
        white-space: nowrap;
      }

      .site-map-title-pill {
        font-size: 1.5rem;
        min-height: 2.6rem;
        padding: 0 1.2rem;
      }

      .pill.good {
        border-color: rgba(137, 240, 181, 0.32);
        background: rgba(137, 240, 181, 0.12);
        color: #c7ffdc;
      }

      .pill.warn {
        border-color: rgba(255, 209, 143, 0.32);
        background: rgba(255, 209, 143, 0.12);
        color: #ffe5bf;
      }

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        padding: 0.72rem 0;
      }

      .row > span,
      .row > strong {
        min-width: 0;
      }

      .row > span {
        flex: 0 0 auto;
        white-space: nowrap;
      }

      .row > strong {
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* 상세 화면 공통 글자 크기 보정: 안내문보다 작은 글자가 남지 않도록 하한선을 둡니다. */
      body.info-detail-open .info-detail-page :where(
        p,
        li,
        span,
        em,
        label,
        button,
        input,
        textarea,
        select,
        .detail-copy,
        .detail-kicker,
        .soft,
        .muted,
        .pill,
        .site-map-guide-text,
        .detail-placeholder,
        .about-photo-credit,
        .about-location-list li,
        .about-city-list span,
        .map-facility,
        .floor-button span,
        .site-seat-button span,
        .board-sort-button,
        .board-list-head,
        .board-post-row span,
        .board-write-panel p,
        .board-image-preview-item em,
        .board-row-thumb,
        .board-like-button,
        .board-detail-meta,
        .board-detail-content,
        .board-comments-head h4,
        .board-comment-meta,
        .board-category-button span,
        .membership-current-badge,
        .tier-current-mark,
        .membership-tier-top strong,
        .tier-price-note,
        .membership-tier-card p,
        .membership-tier-card li,
        .membership-detail-card-top strong,
        .membership-detail-card p,
        .membership-detail-card li,
        .membership-price span
      ) {
        font-size: max(1.25rem, 1em) !important;
      }

      body.info-detail-open .info-detail-page :where(
        .about-story-copy p,
        .about-night-visual span,
        .about-map-slot span,
        .about-photo-slot span,
        .about-play-card em,
        .about-sunset-caption p,
        .reservation-confirm-note
      ) {
        font-size: 1.25rem !important;
        line-height: 1.6;
      }

      .row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
      }

      .price {
        color: var(--ember);
        font-size: 1.8rem;
        font-weight: 820;
        letter-spacing: 0;
      }

      .empty {
        border: 1px dashed rgba(255, 255, 255, 0.18);
        border-radius: 0.75rem;
        padding: 1rem;
        color: rgba(220, 231, 239, 0.68);
      }

      .reservation-item {
        display: grid;
        gap: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.055);
        padding: 0.9rem;
      }

      .toast {
        position: fixed;
        left: 50%;
        bottom: 1.25rem;
        z-index: 40;
        width: min(calc(100% - 2rem), 30rem);
        transform: translate(-50%, 1rem);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.94);
        padding: 0.9rem 1rem;
        color: rgba(220, 231, 239, 0.92);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 180ms ease,
          transform 180ms ease;
        backdrop-filter: blur(18px);
      }

      .toast.show {
        opacity: 1;
        transform: translate(-50%, 0);
      }

      @media (max-width: 720px) {
        .topbar {
          align-items: flex-start;
          flex-direction: column;
          padding: 1rem;
        }

        .brand {
          max-width: none;
          line-height: 1.3;
        }

        .nav {
          flex-wrap: wrap;
          justify-content: flex-start;
          gap: 0.4rem;
        }

        .nav-button {
          min-height: 2.35rem;
          padding: 0 0.72rem;
          font-size: 0.78rem;
        }

        .icon-button {
          width: 2.35rem;
          padding: 0;
        }

        .content {
          padding: 10.6rem 1rem 9.5rem;
        }

        h1 {
          font-size: 2.25rem;
        }

        .signals {
          grid-template-columns: 1fr;
          max-width: 24rem;
        }

        .demo-rail {
          left: 1rem;
          right: 1rem;
          bottom: 1rem;
          grid-template-columns: 1fr 1fr;
          width: auto;
        }

        .mini-stat:last-child {
          grid-column: 1 / -1;
        }

        .panel {
          width: 100%;
          border-left: 0;
        }

        .policy-float-button {
          right: 1rem;
          bottom: 8.4rem;
          min-height: 2.35rem;
          font-size: 0.78rem;
        }

        .policy-modal {
          padding: 0;
        }

        .policy-dialog {
          width: 100%;
          height: 100vh;
          max-height: none;
          border-radius: 0;
        }

        .policy-dialog-head,
        .policy-dialog-foot {
          padding: 0.85rem;
        }

        .policy-body {
          padding: 0.85rem;
        }

        .site-footer {
          padding-top: 6.5rem;
        }

        .footer-business-grid {
          grid-template-columns: 1fr;
        }

        .membership-overview-head,
        .membership-tier-top {
          align-items: flex-start;
          flex-direction: column;
        }

        .split {
          grid-template-columns: 1fr;
        }

        body.info-nav-open .hero,
        body.info-detail-open .hero {
          transform: none;
        }

        .info-preview {
          display: none;
        }

        .info-drawer {
          width: 100%;
          min-width: 0;
        }

        .info-drawer-actions {
          gap: 0.45rem;
        }

        .info-drawer-reserve {
          min-height: 2.35rem;
          padding: 0 0.85rem;
          font-size: 0.82rem;
        }

        .info-drawer-title {
          font-size: 1.3rem;
        }

        .detail-topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        .detail-shell {
          padding: 4.5rem 1rem 3rem;
        }

        .detail-title {
          font-size: 3.2rem;
        }

        .info-detail-page[data-preview="sites"] .detail-title {
          font-size: 3rem;
        }

        .info-preview-title {
          font-size: 3.45rem;
        }

        .info-preview-copy {
          font-size: 1rem;
        }

        .detail-grid {
          grid-template-columns: 1fr;
        }

        .facility-photo-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .about-story-page,
        .about-map-page {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .about-poster-page {
          grid-template-columns: 1fr;
          min-height: auto;
          padding: 1rem;
        }

        .about-poster-visual,
        .about-poster-visual img {
          min-height: 28rem;
        }

        .about-poster-copy h3 {
          font-size: clamp(2rem, 11vw, 3.2rem);
        }

        .about-poster-side {
          justify-content: flex-start;
        }

        .about-gallery-page {
          padding: 1rem;
        }

        .about-poster-page,
        .about-zone-page,
        .about-gallery-page,
        .about-map-page {
          scroll-margin-top: 7.5rem;
        }

        .about-zone-page {
          padding: 1rem;
        }

        .about-zone-grid {
          grid-template-columns: 1fr;
        }

        .about-zone-card,
        .about-zone-card img {
          min-height: 24rem;
        }

        .about-landscape-grid {
          grid-template-columns: 1fr;
          grid-auto-rows: auto;
        }

        .about-landscape-card,
        .about-landscape-card.is-large {
          grid-column: auto;
          grid-row: auto;
          min-height: 21rem;
        }

        .about-night-visual,
        .about-map-slot {
          min-height: 22rem;
        }

        .about-photo-grid,
        .about-play-grid {
          grid-template-columns: 1fr;
        }

        .camp-map {
          min-height: 21rem;
        }

        .site-map-layout {
          grid-template-columns: 1fr;
          padding: 0.75rem;
        }

        .board-layout {
          grid-template-columns: 1fr;
        }

        .board-head {
          flex-direction: column;
        }

        .board-head-tools {
          width: 100%;
          justify-items: stretch;
        }

        .board-sort-tabs {
          width: 100%;
        }

        .board-sort-button {
          flex: 1;
        }

        .membership-detail-head {
          flex-direction: column;
        }

        .membership-detail-grid {
          grid-template-columns: 1fr;
        }

        .board-sidebar {
          order: -1;
        }

        .board-write-panel {
          align-items: stretch;
          flex-direction: column;
        }

        .board-write-panel .primary-button,
        .board-write-panel .ghost-button {
          width: 100%;
        }

        .board-list-head,
        .board-post-row {
          grid-template-columns: 3.6rem minmax(0, 1fr) 4.6rem;
        }

        .board-list-head span:nth-child(3),
        .board-list-head span:nth-child(4),
        .board-post-row .board-row-author,
        .board-post-row .board-row-date {
          display: none;
        }

        .board-row-thumb {
          width: 3.3rem;
          height: 2.75rem;
        }

        .board-image-preview,
        .board-image-grid,
        .board-image-grid.count-2,
        .board-image-grid.count-3 {
          grid-template-columns: 1fr;
        }

        .floor-selector {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 0.9rem;
        }

        .floor-button {
          min-height: 6.2rem;
          padding: 0.8rem;
        }

        .floor-button strong {
          font-size: 0.92rem;
        }

        .floor-button span:not(.pill) {
          display: none;
        }
      }

      @media (max-width: 420px) {
        .pool-opening-dialog {
          grid-template-columns: 1fr;
        }

        .pool-opening-photo {
          min-height: 0;
          aspect-ratio: 4 / 3;
        }

        .pool-opening-copy {
          padding: 1.35rem;
        }

        .pool-opening-actions {
          grid-template-columns: 1fr;
        }

        .facility-pool-safety {
          align-items: flex-start;
          flex-direction: column;
          gap: 0.3rem;
          width: 100%;
        }

        .facility-photo-grid {
          grid-template-columns: 1fr;
        }

        .facility-pending-section {
          align-items: flex-start;
          flex-direction: column;
        }

        .topbar {
          gap: 0.65rem;
        }

        .brand {
          max-width: 6.5rem;
          font-size: 0.82rem;
        }

        .content {
          padding-top: 11.25rem;
        }

        h1 {
          font-size: 1.86rem;
        }

        .detail-title,
        .info-detail-page[data-preview="sites"] .detail-title,
        .info-preview-title {
          font-size: 2.45rem;
        }

        .about-story-page {
          padding: 0.85rem;
        }

        .about-story-copy h3 {
          font-size: 2.1rem;
        }

        .about-city-list {
          grid-template-columns: 1fr;
        }

        .lead {
          font-size: 0.96rem;
        }

        .signals {
          gap: 0.45rem;
        }

        .signal {
          font-size: 0.78rem;
        }
      }

      body[data-page="home"] .topbar {
        left: var(--home-left-rail);
        right: var(--home-right-rail);
        width: auto;
        margin: 0;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.25rem 0;
        text-align: left;
      }

      body[data-page="home"] .nav-button {
        min-height: 3.85rem;
        background: rgba(7, 17, 31, 0.66);
        color: white;
        padding: 0 1.55rem;
        font-size: 1.25rem;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
      }

      body[data-page="home"] .reserve-button {
        background: var(--ember);
        color: #07111f;
      }

      body[data-page="home"] .nav {
        gap: 0.75rem;
        justify-content: flex-end;
      }

      body[data-page="home"] .reserve-button svg {
        width: 1.25rem;
        height: 1.25rem;
      }

      body[data-page="home"] .content {
        width: 100%;
        max-width: none;
        align-items: flex-start;
        padding-left: clamp(1.25rem, 6vw, 6rem);
        padding-right: 1.25rem;
        text-align: left;
      }

      body[data-page="home"] .lead {
        max-width: 38rem;
      }

      body[data-page="home"] .signals {
        max-width: 38rem;
      }

      body[data-page="home"] .signal {
        text-align: left;
      }

      body[data-page="home"] .demo-rail {
        bottom: 4.25rem;
        left: var(--home-left-rail);
        right: auto;
      }

      body[data-page="home"] .home-review-preview {
        left: var(--home-left-rail);
      }

      body[data-page="home"] .home-billboard {
        right: var(--home-right-rail);
      }

      body[data-page="home"] .policy-float-button {
        right: var(--home-right-rail);
      }

      @media (max-width: 900px) {
        .home-advantages {
          padding-top: 6.5rem;
        }

        .section-title-row {
          grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
          gap: 0.9rem;
        }

        .section-title-row h2 {
          max-width: 16rem;
          font-size: 0.95rem;
          letter-spacing: 0.35em;
          white-space: normal;
        }

        .advantage-grid {
          gap: 1rem;
        }

        .advantage-card {
          flex-basis: min(82vw, 24rem);
        }

        .reserve-site-grid {
          grid-template-columns: 1fr;
        }

        .auth-page {
          padding: 1rem;
        }

        .auth-page-layout {
          grid-template-columns: 1fr;
          align-items: start;
          min-height: auto;
        }

        .auth-page-copy {
          max-width: 36rem;
        }

        .auth-page-copy h1 {
          font-size: clamp(2rem, 9vw, 3.35rem);
        }

        .reserve-calendar-day,
        .reserve-calendar-empty {
          min-height: 3.25rem;
        }

        .advantage-photo {
          min-height: 17rem;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .advantage-grid {
          animation: none;
          width: 100%;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
        }

        .advantage-card {
          scroll-snap-align: start;
        }
      }

      @media (max-width: 720px) {
        body[data-page="home"] .topbar {
          left: 1rem;
          right: 1rem;
          align-items: flex-start;
          flex-direction: column;
          gap: 0.75rem;
        }

        body[data-page="home"] .nav {
          justify-content: flex-start;
          max-width: 100%;
        }

        body[data-page="home"] .nav-button {
          min-height: 2.8rem;
          padding: 0 1rem;
          font-size: 0.9rem;
        }

        body[data-page="home"] .home-titlemark {
          font-size: 1.45rem;
        }

        body[data-page="home"] .reserve-button svg {
          width: 1rem;
          height: 1rem;
        }

        body[data-page="home"] .content {
          padding-left: 1rem;
          padding-right: 1rem;
        }

        .auth-page-head {
          align-items: flex-start;
          flex-direction: column;
          padding-bottom: 2rem;
        }

        .auth-page-tabs {
          width: 100%;
        }

        .auth-page-tabs .primary-button,
        .auth-page-tabs .ghost-button {
          flex: 1 1 0;
        }

        body[data-page="home"] .demo-rail {
          bottom: 5.35rem;
          left: 1rem;
          right: 1rem;
          width: auto;
        }
      }

      @media (max-width: 1120px) {
        .home-review-preview {
          top: 7.75rem;
          left: var(--home-left-rail);
          right: auto;
          bottom: auto;
          width: min(32rem, calc(58vw - 1.5rem));
          max-height: 17.5rem;
        }

        .home-billboard {
          top: 7.75rem;
          width: min(21rem, calc(39vw - 1rem));
          height: 17.5rem;
          min-height: 0;
        }

        .home-billboard-placeholder strong {
          font-size: 1.35rem;
        }
      }

      @media (max-width: 720px) {
        .home-review-preview {
          right: 1rem;
          left: 1rem;
          top: 9.75rem;
          bottom: auto;
          width: auto;
          max-height: 12.25rem;
          padding: 0.85rem;
        }

        .home-review-row.has-thumb {
          grid-template-columns: minmax(0, 1fr) 5.9rem;
          min-height: 6.25rem;
        }

        .home-review-row-thumb {
          min-height: 5rem;
        }

        .home-billboard {
          top: 23rem;
          right: 1rem;
          left: 1rem;
          width: auto;
          height: 11rem;
          min-height: 0;
          border-radius: 1rem;
        }

        .floating-reserve-cta {
          bottom: 1rem;
          min-height: 3.25rem;
          padding: 0 1.45rem;
          font-size: 0.96rem;
        }

        .site-back-button {
          top: 4.65rem;
          right: 0.85rem;
          min-height: 2.35rem;
          padding: 0 0.9rem;
          font-size: 0.86rem;
        }

        .home-review-head h2 {
          font-size: 1.1rem;
        }

        .home-review-copy,
        .home-review-row-summary {
          display: none;
        }

        .home-review-dialog {
          max-height: 82vh;
          padding: 0.95rem;
        }
      }

      body[data-page="home"] .hero.home-landing {
        display: block;
        min-height: 100vh;
        padding: 1rem;
      }

      body[data-page="home"] .hero.home-landing::before {
        background-image: url("../assets/camp-night-view-1.jpeg");
        background-position: center;
        filter: none;
        transform: scale(1.025);
      }

      body[data-page="home"] .hero.home-landing::after {
        background:
          linear-gradient(90deg, rgba(2, 7, 14, 0.9), rgba(2, 7, 14, 0.44) 45%, rgba(2, 7, 14, 0.2) 68%, rgba(2, 7, 14, 0.46)),
          linear-gradient(180deg, rgba(3, 8, 16, 0.16) 0%, rgba(3, 8, 16, 0.12) 48%, rgba(3, 8, 16, 0.74) 100%);
      }

      body[data-page="home"] .topbar.home-glass-nav {
        position: fixed;
        top: 1rem;
        left: max(1rem, calc((100vw - 94rem) / 2 + 1rem));
        right: max(1rem, calc((100vw - 94rem) / 2 + 1rem));
        z-index: 28;
        display: flex;
        align-items: center;
        gap: 1.8rem;
        width: auto;
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
        backdrop-filter: none;
      }

      /* 메뉴+버튼을 감싸는 글래스 박스 */
      .home-nav-pill {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        gap: 0.8rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.75rem;
        background: rgba(5, 15, 28, 0.68);
        padding: 0.6rem 1.1rem;
        box-shadow: 0 20px 74px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
      }

      .mobile-menu-toggle {
        display: none;
      }

      /* ── 로고 (글래스 박스 밖) ── */
      body[data-page="home"] .home-titlemark {
        display: inline-flex;
        align-items: center;
        gap: 0;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1;
      }

      body[data-page="home"] .home-titlemark .logo-cj {
        font-family: 'Nanum Myeongjo', serif;
        font-size: 3.36rem;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.01em;
        line-height: 1;
      }

      body[data-page="home"] .home-titlemark .logo-byeol {
        font-family: 'Nanum Pen Script', cursive;
        font-size: 5.25rem;
        font-weight: 400;
        color: var(--ember);
        letter-spacing: 0.02em;
        line-height: 1;
      }

      body[data-page="home"] .home-titlemark .logo-camp {
        font-family: 'Nanum Myeongjo', serif;
        font-size: 3.36rem;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.01em;
        line-height: 1;
      }

      .home-nav-links,
      .home-nav-actions,
      .hero-cta-row {
        display: flex;
        align-items: center;
      }

      .home-nav-links {
        min-width: 0;
        justify-content: center;
        gap: 2.4rem;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .home-nav-links::-webkit-scrollbar {
        display: none;
      }

      .home-nav-links a,
      .home-nav-links button {
        display: inline-flex;
        min-height: 3rem;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.86);
        padding: 0 0.1rem;
        text-decoration: none;
        font-size: 1.26rem !important;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
      }

      .home-nav-links a:hover,
      .home-nav-links button:hover {
        color: var(--ember);
      }

      .home-nav-actions {
        justify-content: flex-end;
        gap: 0.5rem;
        flex-shrink: 0;
        margin-left: auto;
      }

      /* 로그인 / 회원가입 / 실시간 예약 — 3개 완전 동일 크기 */
      body[data-page="home"] .account-nav-button,
      body[data-page="home"] .signup-nav-button,
      body[data-page="home"] .hero-top-reserve {
        min-height: 3.05rem !important;
        height: 3.05rem !important;
        padding: 0 1.15rem !important;
        font-size: 1.25rem !important;
        font-weight: 800;
        border-radius: 7px;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      body[data-page="home"] .account-nav-button,
      body[data-page="home"] .signup-nav-button {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: rgba(255, 255, 255, 0.9);
        box-shadow: none;
      }

      body[data-page="home"] .account-nav-button:hover,
      body[data-page="home"] .signup-nav-button:hover {
        background: rgba(255, 255, 255, 0.13);
        color: #fff;
      }

      body[data-page="home"] .hero-top-reserve {
        box-shadow: 0 6px 20px rgba(244, 166, 77, 0.2);
      }

      .hero-copy {
        position: relative;
        z-index: 5;
        display: flex;
        width: min(100%, 94rem);
        min-height: calc(100vh - 2rem);
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 7.5rem 3rem 5rem;
      }

      .hero-copy h1 {
        max-width: 41rem;
        margin: 0;
        color: white;
        font-size: 4.55rem;
        font-weight: 920;
        line-height: 1.18;
        letter-spacing: 0;
        text-shadow: 0 22px 72px rgba(0, 0, 0, 0.44);
        white-space: normal;
      }

      .hero-copy h1 span {
        display: inline;
        color: var(--ember);
      }

      .hero-copy p {
        max-width: 40rem;
        margin: 1.8rem 0 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 1.25rem;
        font-weight: 650;
        line-height: 1.7;
      }

      .hero-cta-row {
        gap: 0.9rem;
        margin-top: 2.2rem;
      }

      .hero-main-cta,
      .hero-map-cta {
        min-height: 4.4rem;
        border-radius: 0.72rem;
        padding: 0 1.55rem;
        font-size: 1.25rem;
        font-weight: 900;
      }

      body[data-page="home"] .pill,
      body[data-page="home"] .signal,
      body[data-page="home"] .home-review-row-meta,
      body[data-page="home"] .home-review-dialog-meta,
      body[data-page="home"] .home-review-copy,
      body[data-page="home"] .home-review-row-copy,
      body[data-page="home"] .site-map-guide-text,
      body[data-page="home"] .site-map-title-pill,
      body[data-page="home"] .site-info-panel,
      body[data-page="home"] .site-info-panel * {
        font-size: max(1.25rem, 1em);
      }

      .hero-map-cta {
        border-color: rgba(255, 255, 255, 0.52);
        background: rgba(7, 17, 31, 0.44);
      }

      body[data-page="home"] .hero-account-rail,
      body[data-page="home"] .hero .home-review-preview,
      body[data-page="home"] .hero .home-billboard,
      body[data-page="home"] .floating-reserve-cta {
        display: none;
      }

      body[data-page="home"] .policy-float-button {
        right: max(1rem, calc((100vw - 94rem) / 2 + 1rem));
        bottom: 1.25rem;
      }

      @media (max-width: 1180px) {
        body[data-page="home"] .topbar.home-glass-nav {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .home-nav-pill {
          order: 2;
          flex-basis: 100%;
          flex-wrap: wrap;
        }

        .home-nav-links {
          flex: 1;
          justify-content: flex-start;
          gap: 1.2rem;
        }

        .home-nav-links a,
        .home-nav-links button {
          font-size: 1.4rem;
        }
      }

      @media (max-width: 900px) {
        body[data-page="home"] .hero.home-landing {
          padding: 0.75rem;
        }

        body[data-page="home"] .topbar.home-glass-nav {
          top: 0.75rem;
          left: 0.75rem;
          right: 0.75rem;
          gap: 0.6rem;
        }

        body[data-page="home"] .home-titlemark .logo-cj,
        body[data-page="home"] .home-titlemark .logo-camp {
          font-size: 2.4rem;
        }

        body[data-page="home"] .home-titlemark .logo-byeol {
          font-size: 3.6rem;
        }

        .home-nav-pill {
          padding: 0.5rem 0.8rem;
        }

        .home-nav-actions {
          gap: 0.35rem;
        }

        body[data-page="home"] .account-nav-button,
        body[data-page="home"] .signup-nav-button,
        body[data-page="home"] .hero-top-reserve {
          min-height: 2.9rem;
          padding: 0 0.75rem;
          font-size: 1.08rem !important;
        }

        .home-nav-links a,
        .home-nav-links button {
          min-height: 2.45rem;
          font-size: 1.1rem;
        }

        .hero-copy {
          min-height: 100vh;
          padding: 10.5rem 1.35rem 4.5rem;
        }

        .hero-copy h1 {
          max-width: 34rem;
          font-size: 3.4rem;
        }

        .hero-copy p {
          font-size: 1.2rem;
        }
      }

      @media (max-width: 560px) {
        body[data-page="home"] .topbar.home-glass-nav {
          grid-template-columns: 1fr;
          align-items: stretch;
        }

        .home-nav-actions {
          justify-content: space-between;
        }

        .home-nav-links {
          gap: 0.86rem;
        }

        .hero-copy {
          padding: 13rem 0.85rem 4rem;
        }

        .hero-copy h1 {
          font-size: 2.55rem;
          line-height: 1.2;
        }

        .hero-copy p {
          font-size: 1rem;
        }

        .hero-cta-row {
          width: 100%;
          flex-direction: column;
          align-items: stretch;
        }

        .hero-main-cta,
        .hero-map-cta {
          width: 100%;
          min-height: 3.65rem;
        }
      }

      body[data-page="home"] .topbar.home-glass-nav {
        left: clamp(1rem, 2.6vw, 3.25rem);
        right: clamp(1rem, 2.6vw, 3.25rem);
        z-index: 72;
        padding: clamp(0.62rem, 0.72vw, 1rem) clamp(1rem, 1.35vw, 1.8rem);
      }

      body[data-page="home"] .home-titlemark {
        min-height: clamp(2.9rem, 3.25vw, 4.2rem);
        font-size: clamp(1.35rem, 1.42vw, 2.25rem);
      }

      .home-nav-links {
        gap: clamp(0.7rem, 1.08vw, 1.45rem);
        overflow: visible;
      }

      .home-nav-item {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .home-nav-submenu {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 50%;
        z-index: 80;
        display: grid;
        min-width: 12.25rem;
        gap: 0.3rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.72rem;
        background: rgba(5, 15, 28, 0.9);
        padding: 0.45rem;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 0.4rem);
        transition:
          opacity 160ms ease,
          transform 160ms ease;
        backdrop-filter: blur(18px);
      }

      .home-nav-submenu::before {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 0.55rem;
        content: "";
      }

      .home-nav-item:hover .home-nav-submenu,
      .home-nav-item:focus-within .home-nav-submenu {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
      }

      .home-nav-submenu button {
        width: 100%;
        min-height: 3rem;
        justify-content: flex-start;
        border-radius: 0.48rem;
        padding: 0 0.9rem;
        color: rgba(220, 231, 239, 0.82);
        font-size: 1.25rem;
        font-weight: 780;
        text-align: left;
      }

      .home-nav-submenu button:hover,
      .home-nav-submenu button:focus-visible {
        background: rgba(244, 182, 106, 0.14);
        color: #ffffff;
        outline: none;
      }

      body[data-page="home"] .account-nav-button,
      body[data-page="home"] .signup-nav-button,
      body[data-page="home"] .hero-top-reserve {
        min-height: clamp(2.85rem, 3.1vw, 3.75rem);
        padding: 0 clamp(0.82rem, 1vw, 1.35rem);
        font-size: clamp(1.25rem, 1.05vw, 1.38rem) !important;
      }

      .home-nav-actions .account-nav-button,
      .home-nav-actions .signup-nav-button,
      .home-nav-actions .hero-top-reserve {
        min-height: 2.65rem !important;
        height: 2.65rem !important;
        padding: 0 1rem !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        border-radius: 999px !important;
        white-space: nowrap;
      }

      .home-nav-links > .home-nav-item > button {
        min-height: clamp(2.55rem, 2.8vw, 3.4rem);
        font-size: clamp(1.25rem, 1.05vw, 1.42rem);
      }

      .home-nav-links a,
      .home-nav-links button,
      .home-nav-links > .home-nav-item > button {
        min-height: 2.65rem !important;
        font-size: 1.08rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
      }

      .home-nav-pill {
        gap: 0.7rem;
      }

      .home-nav-links {
        gap: 1.35rem;
      }

      .reservation-page-head h1 {
        font-size: clamp(3rem, 3.4vw, 3.6rem) !important;
        line-height: 1 !important;
      }

      .hero-copy {
        width: min(100%, 118rem);
        padding: clamp(8rem, 14vh, 11.5rem) clamp(1.35rem, 4.4vw, 6.5rem) clamp(4rem, 8vh, 7rem);
      }

      .hero-copy h1 {
        max-width: clamp(34rem, 43vw, 58rem);
        font-size: clamp(3.1rem, 3.75vw, 5.8rem);
      }

      .hero-copy p {
        max-width: clamp(32rem, 38vw, 50rem);
        font-size: clamp(1.25rem, 1.15vw, 1.5rem);
      }

      .hero-main-cta,
      .hero-map-cta {
        min-height: clamp(3.75rem, 3.9vw, 4.95rem);
        padding: 0 clamp(1.15rem, 1.45vw, 2.1rem);
        font-size: clamp(1.25rem, 1.05vw, 1.38rem);
      }

      body.info-detail-open .hero.home-landing {
        position: fixed;
        inset: 0;
        z-index: 15;
        min-height: 0;
        overflow: visible;
        opacity: 1;
        pointer-events: none;
        visibility: visible;
        filter: none;
        transform: none;
      }

      body.info-detail-open .hero.home-landing::before,
      body.info-detail-open .hero.home-landing::after,
      body.info-detail-open .hero.home-landing > .noise,
      body.info-detail-open .hero.home-landing > .hero-copy,
      body.info-detail-open .floating-reserve-cta {
        display: none;
      }

      /* Final top navigation standard: use the reservation screen style everywhere. */
      .topbar.home-glass-nav {
        position: fixed !important;
        top: 0.75rem !important;
        left: clamp(1rem, 2.6vw, 3.25rem) !important;
        right: clamp(1rem, 2.6vw, 3.25rem) !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 72 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: clamp(0.9rem, 1.4vw, 1.5rem) !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
      }

      .topbar.home-glass-nav .home-titlemark {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        min-width: 0 !important;
        max-width: 24rem !important;
        white-space: nowrap !important;
        text-decoration: none !important;
      }

      .topbar.home-glass-nav .home-titlemark .logo-cj,
      .topbar.home-glass-nav .home-titlemark .logo-camp {
        font-size: clamp(1.65rem, 2.15vw, 2.55rem) !important;
        line-height: 1 !important;
      }

      .topbar.home-glass-nav .home-titlemark .logo-byeol {
        font-size: clamp(2.45rem, 3.15vw, 3.65rem) !important;
        line-height: 0.9 !important;
      }

      .topbar.home-glass-nav .home-nav-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 0.7rem !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0.75rem !important;
        background: rgba(5, 15, 28, 0.68) !important;
        padding: 0.5rem 0.8rem !important;
        box-shadow: none !important;
        backdrop-filter: blur(18px) !important;
      }

      .topbar.home-glass-nav .home-nav-links {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: clamp(1rem, 1.4vw, 1.35rem) !important;
      }

      .topbar.home-glass-nav .home-nav-links > a,
      .topbar.home-glass-nav .home-nav-links > button,
      .topbar.home-glass-nav .home-nav-links > .home-nav-item > button {
        min-height: 2.65rem !important;
        height: 2.65rem !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 1.08rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        letter-spacing: -0.035em !important;
        white-space: nowrap !important;
      }

      .topbar.home-glass-nav .home-nav-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        gap: 0.45rem !important;
        min-width: max-content !important;
      }

      .topbar.home-glass-nav .home-nav-actions .account-nav-button,
      .topbar.home-glass-nav .home-nav-actions .signup-nav-button,
      .topbar.home-glass-nav .home-nav-actions .hero-top-reserve {
        min-height: 2.65rem !important;
        height: 2.65rem !important;
        padding: 0 1rem !important;
        border-radius: 999px !important;
        font-size: 1.05rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
      }

      .site-back-button {
        display: none !important;
      }

      @media (max-width: 720px) {
        html,
        body {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden !important;
        }

        body * {
          min-width: 0;
        }

        body[data-page],
        .hero,
        .info-detail-page,
        .reservation-page,
        .auth-page,
        .account-page {
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
        }

        .topbar.home-glass-nav {
          left: 0.55rem !important;
          right: 0.55rem !important;
          max-width: calc(100vw - 1.1rem) !important;
          overflow: visible !important;
        }

        .topbar.home-glass-nav .home-titlemark {
          max-width: calc(100vw - 1.1rem) !important;
          transform: scale(0.88);
          transform-origin: left center;
        }

        .topbar.home-glass-nav .home-nav-pill {
          width: 100% !important;
          max-width: calc(100vw - 1.1rem) !important;
          align-items: stretch !important;
          flex-wrap: wrap !important;
          overflow: hidden !important;
          padding: 0.55rem !important;
        }

        .topbar.home-glass-nav .home-nav-links {
          flex: 1 1 100% !important;
          width: 100% !important;
          max-width: 100% !important;
          gap: 1rem !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          padding: 0 0.1rem 0.25rem !important;
          scroll-padding-inline: 0.6rem;
          -webkit-overflow-scrolling: touch;
        }

        .topbar.home-glass-nav .home-nav-links > a,
        .topbar.home-glass-nav .home-nav-links > button,
        .topbar.home-glass-nav .home-nav-links > .home-nav-item > button {
          height: 2.35rem !important;
          min-height: 2.35rem !important;
          font-size: 1rem !important;
          flex: 0 0 auto !important;
        }

        .topbar.home-glass-nav .home-nav-actions {
          flex: 1 1 100% !important;
          width: 100% !important;
          max-width: 100% !important;
          justify-content: flex-start !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          padding-bottom: 0.15rem !important;
          -webkit-overflow-scrolling: touch;
        }

        .topbar.home-glass-nav .home-nav-actions .account-nav-button,
        .topbar.home-glass-nav .home-nav-actions .signup-nav-button,
        .topbar.home-glass-nav .home-nav-actions .hero-top-reserve {
          height: 2.45rem !important;
          min-height: 2.45rem !important;
          padding: 0 0.85rem !important;
          font-size: 0.98rem !important;
          flex: 0 0 auto !important;
        }

        .site-map-card {
          padding: 0.9rem !important;
        }

        .site-map-layout {
          gap: 0.65rem !important;
        }

        .site-list-panel {
          scroll-margin-top: 7rem;
        }

        .site-info-card {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }

        body.info-detail-open .topbar.home-glass-nav {
          top: 0.35rem !important;
          left: 0.45rem !important;
          right: 0.45rem !important;
          max-width: calc(100vw - 0.9rem) !important;
          z-index: 80 !important;
        }

        body.info-detail-open .topbar.home-glass-nav .home-titlemark {
          display: none !important;
        }

        body.info-detail-open .topbar.home-glass-nav .home-nav-pill {
          border-radius: 0.65rem !important;
          background: rgba(5, 15, 28, 0.88) !important;
          padding: 0.45rem !important;
        }

        body.info-detail-open .info-detail-page {
          padding-top: 7.2rem !important;
          scroll-padding-top: 7.2rem !important;
        }

        body.info-detail-open .detail-shell {
          width: 100% !important;
          max-width: 100% !important;
          padding-right: 0.75rem !important;
          padding-left: 0.75rem !important;
        }

        .site-map-card,
        .site-map-layout,
        .camp-map,
        .camp-map-inner,
        .site-list-panel,
        .site-info-card {
          width: 100% !important;
          max-width: 100% !important;
        }

        .camp-map {
          justify-content: center !important;
        }

        .camp-map-inner {
          overflow: hidden;
        }

        .camp-map-img {
          width: 100% !important;
          max-width: 100% !important;
        }

        .site-detail .camp-map-markers {
          display: none !important;
        }

        .mobile-site-picker {
          display: grid;
          gap: 0.75rem;
          width: 100%;
          max-width: 100%;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 0.85rem;
          background: rgba(7, 17, 31, 0.56);
          padding: 0.75rem;
        }

        .mobile-site-zone {
          display: grid;
          gap: 0.5rem;
        }

        .mobile-site-zone strong {
          color: rgba(220, 231, 239, 0.82);
          font-size: 0.92rem;
        }

        .mobile-site-zone div {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 0.42rem;
        }

        .mobile-site-zone button {
          min-height: 2.45rem;
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-radius: 0.55rem;
          background: rgba(255, 255, 255, 0.055);
          color: #fff;
          font-size: 0.88rem;
          font-weight: 900;
        }

        .mobile-site-zone button.active {
          border-color: rgba(244, 182, 106, 0.86);
          background: rgba(244, 182, 106, 0.2);
          color: #ffd28e;
        }

        .reserve-mobile-site-picker {
          display: grid !important;
          margin-top: 0.55rem !important;
        }

        .reserve-mobile-site-picker button.reserved {
          border-color: rgba(255, 72, 92, 0.34);
          background: rgba(255, 72, 92, 0.08);
          color: rgba(255, 114, 130, 0.72);
          text-decoration: line-through;
        }

        .reserve-map-dialog {
          width: min(94vw, 42rem) !important;
          max-height: 88vh !important;
          padding: 0.75rem !important;
          overflow-x: hidden !important;
        }

        .reserve-map-dialog-head {
          gap: 0.65rem !important;
          padding-bottom: 0.65rem !important;
        }

        .reserve-map-dialog-head h3 {
          font-size: 1.35rem !important;
          line-height: 1.25 !important;
          word-break: keep-all;
        }

        .reserve-map-dialog-head p {
          font-size: 0.9rem !important;
          line-height: 1.5 !important;
        }

        .reserve-map-dialog-body {
          gap: 0.65rem !important;
        }

        body[data-page="reserve"] .reservation-page {
          padding-top: 5.6rem !important;
        }

        body[data-page="reserve"] .reservation-page-head {
          margin-bottom: 0.9rem !important;
        }

        body[data-page="reserve"] .reservation-page-head h1 {
          margin-top: 0 !important;
          font-size: clamp(2.35rem, 14vw, 3.4rem) !important;
          line-height: 0.98 !important;
          max-width: none !important;
          word-break: keep-all;
        }

        body[data-page="reserve"] .reservation-page-head p {
          margin-top: 0.8rem !important;
          font-size: 0.94rem !important;
          line-height: 1.62 !important;
        }

        .site-info-specs {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .site-info-specs dd,
        .site-info-specs dd.site-guests-value,
        .site-info-specs dd.site-price-value {
          white-space: normal !important;
          word-break: keep-all;
        }

        .reservation-page,
        body[data-page="reserve"] .content,
        body[data-page="reserve"] form[data-form="reserve"],
        .reserve-calendar,
        .reserve-calendar-grid,
        .reserve-calendar-weekdays {
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          overflow-x: hidden !important;
        }

        .reserve-calendar {
          padding: 0.55rem !important;
        }

        .reserve-calendar-weekdays,
        .reserve-calendar-grid {
          gap: 0.28rem !important;
        }

        .reserve-calendar-day,
        .reserve-calendar-empty {
          min-width: 0 !important;
          min-height: 3.45rem !important;
          border-radius: 0.55rem !important;
          padding: 0.2rem !important;
        }

        .reserve-calendar-day strong {
          font-size: 0.9rem !important;
        }

        .reserve-calendar-day span {
          font-size: 0.58rem !important;
        }

        .reserve-selected-date.reserve-selected-date-wide {
          display: grid !important;
          grid-template-columns: 1fr !important;
          gap: 0.35rem !important;
          align-items: start !important;
          justify-items: start !important;
          min-height: auto !important;
          padding: 0.7rem 0.8rem !important;
        }

        .reserve-selected-date.reserve-selected-date-wide .label {
          font-size: 0.82rem !important;
          line-height: 1.2 !important;
          white-space: nowrap !important;
        }

        .reserve-selected-date.reserve-selected-date-wide strong {
          width: 100% !important;
          font-size: 0.9rem !important;
          line-height: 1.35 !important;
          text-align: left !important;
          white-space: normal !important;
          word-break: keep-all;
        }
      }

      @media (max-width: 720px) {
        .topbar.home-glass-nav,
        body.info-detail-open .topbar.home-glass-nav,
        body[data-page="reserve"] .topbar.home-glass-nav,
        body[data-page="account"] .topbar.home-glass-nav {
          position: fixed !important;
          top: 0.55rem !important;
          left: 0.7rem !important;
          right: 0.7rem !important;
          display: grid !important;
          grid-template-columns: minmax(0, 1fr) auto !important;
          align-items: center !important;
          gap: 0.55rem !important;
          width: auto !important;
          max-width: calc(100vw - 1.4rem) !important;
          overflow: visible !important;
          padding: 0 !important;
          background: transparent !important;
          border: 0 !important;
          z-index: 90 !important;
        }

        .topbar.home-glass-nav .home-titlemark,
        body.info-detail-open .topbar.home-glass-nav .home-titlemark,
        body[data-page="reserve"] .home-titlemark,
        body[data-page="account"] .home-titlemark {
          display: inline-flex !important;
          max-width: 100% !important;
          min-height: 2.8rem !important;
          transform: none !important;
          overflow: hidden !important;
          white-space: nowrap !important;
        }

        .topbar.home-glass-nav .home-titlemark .logo-cj,
        .topbar.home-glass-nav .home-titlemark .logo-camp {
          font-size: clamp(1.45rem, 7vw, 2.05rem) !important;
        }

        .topbar.home-glass-nav .home-titlemark .logo-byeol {
          font-size: clamp(2.1rem, 9.4vw, 3rem) !important;
        }

        .mobile-menu-toggle {
          display: inline-grid !important;
          width: 2.65rem;
          height: 2.65rem;
          place-items: center;
          gap: 0.18rem;
          border: 1px solid rgba(255, 255, 255, 0.22);
          border-radius: 0.75rem;
          background: rgba(5, 15, 28, 0.84);
          padding: 0.62rem;
          box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.28);
          backdrop-filter: blur(16px);
        }

        .mobile-menu-toggle span {
          display: block;
          width: 1.15rem;
          height: 0.13rem;
          border-radius: 999px;
          background: #ffffff;
        }

        .topbar.home-glass-nav .home-nav-pill,
        body.info-detail-open .topbar.home-glass-nav .home-nav-pill,
        body[data-page="reserve"] .home-nav-pill,
        body[data-page="account"] .home-nav-pill {
          position: absolute !important;
          top: calc(100% + 0.45rem) !important;
          left: 0 !important;
          right: 0 !important;
          display: none !important;
          width: 100% !important;
          max-width: 100% !important;
          grid-column: 1 / -1 !important;
          border-radius: 0.85rem !important;
          background: rgba(5, 15, 28, 0.94) !important;
          padding: 0.75rem !important;
          box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.42) !important;
          backdrop-filter: blur(18px) !important;
        }

        body.mobile-menu-open .topbar.home-glass-nav .home-nav-pill {
          display: grid !important;
          gap: 0.7rem !important;
        }

        .topbar.home-glass-nav .home-nav-links,
        body.info-detail-open .topbar.home-glass-nav .home-nav-links,
        body[data-page="reserve"] .home-nav-links,
        body[data-page="account"] .home-nav-links {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 0.45rem !important;
          width: 100% !important;
          overflow: visible !important;
          padding: 0 !important;
        }

        .topbar.home-glass-nav .home-nav-item,
        .topbar.home-glass-nav .home-nav-links > a,
        .topbar.home-glass-nav .home-nav-links > button {
          width: 100% !important;
        }

        .topbar.home-glass-nav .home-nav-links > a,
        .topbar.home-glass-nav .home-nav-links > button,
        .topbar.home-glass-nav .home-nav-links > .home-nav-item > button {
          width: 100% !important;
          height: 2.45rem !important;
          min-height: 2.45rem !important;
          justify-content: center !important;
          border-radius: 0.6rem !important;
          background: rgba(255, 255, 255, 0.06) !important;
          padding: 0 0.45rem !important;
          font-size: 0.9rem !important;
          letter-spacing: 0 !important;
        }

        .topbar.home-glass-nav .home-nav-submenu {
          display: none !important;
        }

        .topbar.home-glass-nav .home-nav-actions,
        body.info-detail-open .topbar.home-glass-nav .home-nav-actions,
        body[data-page="reserve"] .home-nav-actions,
        body[data-page="account"] .home-nav-actions {
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 0.45rem !important;
          width: 100% !important;
          overflow: visible !important;
          padding: 0 !important;
        }

        .topbar.home-glass-nav .home-nav-actions .account-nav-button,
        .topbar.home-glass-nav .home-nav-actions .signup-nav-button,
        .topbar.home-glass-nav .home-nav-actions .guest-lookup-nav-button,
        .topbar.home-glass-nav .home-nav-actions .hero-top-reserve {
          width: 100% !important;
          height: 2.55rem !important;
          min-height: 2.55rem !important;
          padding: 0 0.35rem !important;
          font-size: 0.82rem !important;
          border-radius: 0.6rem !important;
        }

        body.info-detail-open .info-detail-page {
          padding-top: 4.7rem !important;
          scroll-padding-top: 4.7rem !important;
        }

        body.info-detail-open.mobile-menu-open .info-detail-page {
          padding-top: 13rem !important;
        }

        .site-map-layout {
          gap: 0.45rem !important;
          padding: 0.55rem !important;
        }

        .camp-map {
          min-height: auto !important;
          margin: 0 !important;
        }

        .mobile-site-picker {
          margin-top: 0 !important;
          padding: 0.65rem !important;
        }

        .site-list-panel {
          min-height: auto !important;
          padding: 0.75rem !important;
        }

        .site-panel-hint {
          margin: 0.5rem 0 !important;
          font-size: 0.86rem !important;
        }
      }

      .reserve-selected-date-wide {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .reserve-date-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 18rem);
        gap: 1rem;
        align-items: start;
      }

      .reserve-date-main,
      .reserve-date-side {
        display: grid;
        gap: 0.85rem;
      }

      .reserve-date-side {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.85rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.85rem;
      }

      .reserve-date-side.disabled {
        opacity: 0.62;
      }

      .reserve-side-fieldset {
        display: grid;
        gap: 0.75rem;
      }

      .reserve-side-fieldset label {
        display: grid;
        gap: 0.35rem;
      }

      .reserve-side-fieldset .select {
        min-height: 3rem;
        font-size: 0.95rem;
        font-weight: 850;
      }

      .reserve-map-open-button {
        min-height: 3.15rem;
        width: 100%;
        justify-content: center;
        border-color: rgba(244, 182, 106, 0.42);
        color: #ffffff;
        font-size: 1rem;
        font-weight: 900;
      }

      .reserve-selected-site-card {
        display: grid;
        gap: 0.28rem;
        border: 1px solid rgba(244, 182, 106, 0.38);
        border-radius: 0.75rem;
        background: rgba(244, 182, 106, 0.09);
        padding: 0.85rem 1rem;
      }

      .reserve-selected-site-card span {
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .reserve-selected-site-card strong {
        color: var(--ember);
        font-size: 1.5rem;
        line-height: 1;
      }

      .reserve-selected-site-card small {
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.78rem;
        font-weight: 850;
      }

      .reserve-selected-site-card.empty {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.045);
        color: rgba(220, 231, 239, 0.68);
        font-weight: 800;
      }

      .reserve-selected-site-card.unavailable {
        border-color: rgba(255, 72, 92, 0.52);
        background: rgba(255, 72, 92, 0.1);
      }

      .reserve-summary-schedule-row {
        align-items: center;
        gap: 0.7rem;
      }

      .reserve-summary-schedule-row strong {
        display: grid;
        gap: 0.12rem;
        text-align: right;
      }

      .reserve-summary-nights-select {
        width: 6.25rem;
        min-height: 2.55rem;
        padding: 0 0.8rem;
        font-size: 0.92rem;
        font-weight: 900;
      }

      .reserve-benefit-summary {
        display: grid;
        gap: 0.25rem;
        border: 1px solid rgba(80, 211, 194, 0.3);
        border-radius: 0.75rem;
        background: rgba(80, 211, 194, 0.07);
        padding: 0.85rem 1rem;
      }

      .reserve-benefit-summary strong {
        color: #50d3c2;
        font-size: 0.9rem;
      }

      .reserve-benefit-summary span {
        color: rgba(236, 243, 248, 0.82);
        font-size: 0.85rem;
        font-weight: 800;
      }

      .reserve-reschedule-summary {
        border-color: rgba(229, 167, 98, 0.35);
        background: rgba(229, 167, 98, 0.08);
      }

      .reserve-reschedule-summary strong {
        color: #f4c28e;
      }

      .reserve-payment-overlay {
        position: fixed;
        inset: 0;
        z-index: 130;
        display: grid;
        place-items: center;
        padding: 1.4rem;
      }

      body.reserve-guest-modal-open {
        overflow: hidden;
      }

      body.reserve-guest-modal-open .topbar.home-glass-nav {
        visibility: hidden !important;
        pointer-events: none !important;
      }

      .reserve-payment-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(2, 7, 14, 0.74);
        backdrop-filter: blur(8px);
      }

      .reserve-payment-dialog {
        position: relative;
        display: grid;
        gap: 1rem;
        width: min(94vw, 38rem);
        max-height: 92vh;
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.97);
        padding: 1rem;
        box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.46);
      }

      .reserve-payment-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.85rem;
      }

      .reserve-payment-head h3 {
        margin: 0.4rem 0 0;
        font-size: clamp(1.45rem, 2vw, 2rem);
      }

      .reserve-payment-head p {
        margin: 0.35rem 0 0;
        color: rgba(220, 231, 239, 0.72);
        font-weight: 750;
      }

      .reserve-payment-dialog .round-close {
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 1.2rem;
        font-weight: 900;
      }

      .reserve-vehicle-size-dialog {
        width: min(94vw, 42rem);
      }

      .reserve-vehicle-size-sites {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 0.75rem;
      }

      .reserve-vehicle-size-site {
        display: grid;
        gap: 0.32rem;
        border: 1px solid rgba(247, 173, 90, 0.42);
        border-radius: 0.9rem;
        background: linear-gradient(145deg, rgba(247, 173, 90, 0.15), rgba(255, 255, 255, 0.04));
        padding: 1rem;
      }

      .reserve-vehicle-size-site span,
      .reserve-vehicle-size-site small {
        color: rgba(220, 231, 239, 0.72);
        font-weight: 800;
      }

      .reserve-vehicle-size-site strong {
        color: #fff;
        font-size: clamp(1.65rem, 5vw, 2.35rem);
        line-height: 1.1;
      }

      .reserve-vehicle-size-warning {
        border-left: 0.28rem solid var(--ember);
        border-radius: 0.75rem;
        background: rgba(255, 159, 67, 0.1);
        padding: 0.9rem 1rem;
      }

      .reserve-vehicle-size-warning strong {
        color: #ffd39e;
      }

      .reserve-vehicle-size-warning p {
        margin: 0.45rem 0 0;
        color: rgba(235, 242, 247, 0.82);
        line-height: 1.65;
      }

      .reserve-vehicle-size-warning a {
        color: #ffd39e;
        font-weight: 900;
      }

      .reserve-vehicle-size-check {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        border: 1px solid rgba(115, 213, 202, 0.42);
        border-radius: 0.85rem;
        background: rgba(57, 177, 165, 0.1);
        padding: 0.95rem;
        color: #eefafa;
        font-weight: 850;
        line-height: 1.55;
        cursor: pointer;
      }

      .reserve-vehicle-size-check input {
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.12rem;
        accent-color: #49c9bc;
      }

      .reserve-vehicle-size-actions {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 0.7rem;
      }

      .reserve-vehicle-size-actions button {
        width: 100%;
      }

      .reserve-payment-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
      }

      .reserve-payment-summary div {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.75rem;
      }

      .reserve-payment-summary span {
        display: block;
        margin-bottom: 0.35rem;
        color: rgba(220, 231, 239, 0.62);
        font-size: 0.78rem;
        font-weight: 850;
      }

      .reserve-payment-summary strong {
        color: #fff;
        font-size: 1rem;
        line-height: 1.35;
      }

      .reserve-payment-fields {
        display: grid;
        gap: 0.8rem;
      }

      .reserve-checkout-step {
        display: grid;
        gap: 1rem;
      }

      .reserve-checkout-step[hidden],
      [data-checkout-no-charge][hidden],
      [data-checkout-paid-methods][hidden] {
        display: none !important;
      }

      .reserve-payment-fields label {
        display: grid;
        gap: 0.35rem;
      }

      .reserve-payment-fields .label b {
        color: var(--ember);
        font-style: normal;
      }

      .reserve-payment-fields .label em {
        color: rgba(220, 231, 239, 0.62);
        font-style: normal;
      }

      .reserve-payment-methods {
        display: grid;
        gap: 0.65rem;
        min-width: 0;
        margin: 0;
        border: 0;
        padding: 0;
      }

      .reserve-payment-methods legend {
        margin-bottom: 0.15rem;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 950;
      }

      .reserve-payment-method {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        gap: 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.8rem;
        cursor: pointer;
      }

      .reserve-payment-method:has(input:checked) {
        border-color: rgba(229, 167, 98, 0.56);
        background: rgba(229, 167, 98, 0.1);
      }

      .reserve-payment-method.is-disabled {
        cursor: not-allowed;
        opacity: 0.48;
      }

      .reserve-payment-method input {
        margin-top: 0.2rem;
        accent-color: var(--ember);
      }

      .reserve-payment-method strong,
      .reserve-payment-method small {
        display: block;
      }

      .reserve-payment-method strong {
        color: #fff;
        font-weight: 950;
      }

      .reserve-payment-method small {
        margin-top: 0.25rem;
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.82rem;
        font-weight: 750;
        line-height: 1.45;
      }

      .reserve-policy-agreements {
        display: grid;
        gap: 0.65rem;
        min-width: 0;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.8rem;
        padding: 0.8rem;
      }

      .reserve-policy-agreements legend {
        padding: 0 0.3rem;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 950;
      }

      .reserve-policy-agreements label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        gap: 0.55rem;
        color: rgba(220, 231, 239, 0.82);
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1.5;
      }

      .reserve-policy-agreements input {
        margin-top: 0.25rem;
        accent-color: var(--ember);
      }

      .reserve-payment-submit {
        width: 100%;
        min-height: 3.2rem;
        font-size: 1rem;
        font-weight: 950;
      }

      .reserve-payment-submit:disabled {
        cursor: not-allowed;
        filter: grayscale(0.35);
        opacity: 0.45;
      }

      .reserve-coupon-section,
      .reserve-checkout-total {
        display: grid;
        gap: 0.75rem;
      }

      .reserve-checkout-section-head {
        display: grid;
        gap: 0.35rem;
      }

      .reserve-checkout-section-head h4 {
        margin: 0.45rem 0 0;
        color: #fff;
        font-size: 1.15rem;
      }

      .reserve-checkout-section-head small {
        color: rgba(220, 231, 239, 0.68);
        font-weight: 750;
        line-height: 1.5;
      }

      .reserve-coupon-list,
      [data-checkout-paid-methods] {
        display: grid;
        gap: 0.65rem;
      }

      .reserve-coupon-option {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        gap: 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.045);
        padding: 0.85rem;
        cursor: pointer;
      }

      .reserve-coupon-option:has(input:checked) {
        border-color: rgba(80, 211, 194, 0.58);
        background: rgba(80, 211, 194, 0.1);
      }

      .reserve-coupon-option input {
        margin-top: 0.2rem;
        accent-color: #50d3c2;
      }

      .reserve-coupon-option strong,
      .reserve-coupon-option small {
        display: block;
      }

      .reserve-coupon-option strong {
        color: #fff;
        font-weight: 950;
      }

      .reserve-coupon-option small {
        margin-top: 0.25rem;
        color: rgba(220, 231, 239, 0.72);
        font-weight: 750;
        line-height: 1.45;
      }

      .reserve-checkout-total {
        border: 1px solid rgba(229, 167, 98, 0.35);
        border-radius: 0.9rem;
        background: rgba(229, 167, 98, 0.08);
        padding: 0.95rem;
      }

      .reserve-checkout-total > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: rgba(235, 242, 247, 0.78);
        font-weight: 850;
      }

      .reserve-checkout-total .is-final {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 0.8rem;
        color: #fff;
      }

      .reserve-checkout-total .is-final strong {
        color: #ffc176;
        font-size: 1.4rem;
      }

      .reserve-checkout-actions {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 0.7rem;
      }

      .reserve-checkout-actions button,
      .reserve-payment-continue {
        width: 100%;
        min-height: 3.2rem;
        font-weight: 950;
      }

      /* 예약자 정보와 결제는 팝업이 아니라 예약 화면 안의 독립 페이지로 표시합니다. */
      .reserve-checkout-form,
      .reserve-checkout-page {
        width: 100%;
        min-width: 0;
      }

      body[data-page="reserve"] form.reserve-checkout-form {
        grid-template-columns: minmax(0, 1fr);
      }

      .reserve-checkout-page .reserve-payment-dialog {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
        align-items: start;
        gap: 1.15rem;
        width: 100%;
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
      }

      .reserve-checkout-page .reserve-payment-head {
        grid-column: 1 / -1;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1rem;
        background: rgba(10, 23, 39, 0.82);
        padding: 1.15rem;
      }

      .reserve-checkout-edit-button {
        flex: 0 0 auto;
        min-width: 7.5rem;
      }

      .reserve-checkout-page .reserve-checkout-step {
        grid-column: 1;
        grid-row: 2;
        gap: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1rem;
        background: rgba(8, 20, 35, 0.88);
        padding: 1.1rem;
      }

      .reserve-checkout-page .reserve-payment-summary {
        position: sticky;
        top: 6.5rem;
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: 1fr;
        gap: 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1rem;
        background: rgba(8, 20, 35, 0.94);
        box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.22);
      }

      .reserve-checkout-page .reserve-payment-summary div {
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0;
        background: transparent;
        padding: 0.9rem 1rem;
      }

      .reserve-checkout-page .reserve-payment-summary div:last-child {
        border-bottom: 0;
      }

      .reserve-checkout-page .reserve-payment-summary .reserve-checkout-summary-total {
        background: rgba(80, 211, 194, 0.1);
        padding-block: 1.1rem;
      }

      .reserve-checkout-page .reserve-checkout-summary-total strong {
        color: #77e1d4;
        font-size: clamp(1.45rem, 2.4vw, 2rem);
      }

      .reserve-free-night-option {
        border-color: rgba(80, 211, 194, 0.38);
        background: rgba(80, 211, 194, 0.07);
      }

      .reserve-bank-account {
        display: grid;
        gap: 0.22rem;
        margin-top: 0.75rem;
        border: 1px solid rgba(80, 211, 194, 0.45);
        border-radius: 0.75rem;
        background: rgba(80, 211, 194, 0.1);
        padding: 0.85rem;
      }

      .reserve-bank-account[hidden] {
        display: none !important;
      }

      .reserve-bank-account b {
        color: #77e1d4;
        font-size: 0.8rem;
      }

      .reserve-bank-account strong {
        color: #fff;
        font-size: 1.05rem;
      }

      .reserve-bank-account small {
        margin: 0;
        color: rgba(236, 246, 248, 0.84);
      }

      @media (max-width: 900px) {
        .reserve-checkout-page .reserve-payment-dialog {
          grid-template-columns: 1fr;
        }

        .reserve-checkout-page .reserve-checkout-step,
        .reserve-checkout-page .reserve-payment-summary {
          grid-column: 1;
        }

        .reserve-checkout-page .reserve-checkout-step {
          grid-row: 2;
        }

        .reserve-checkout-page .reserve-payment-summary {
          position: static;
          grid-row: 3;
        }
      }

      @media (max-width: 560px) {
        .reserve-payment-overlay {
          align-items: end;
          padding: 0;
        }

        .reserve-payment-dialog {
          width: 100%;
          max-height: 96vh;
          border-radius: 1rem 1rem 0 0;
          padding: 0.9rem;
        }

        .reserve-payment-summary,
        .reserve-checkout-actions {
          grid-template-columns: 1fr;
        }

        .reserve-payment-head h3 {
          font-size: 1.35rem;
        }

        .reserve-checkout-page .reserve-payment-dialog {
          width: 100%;
          max-height: none;
          overflow: visible;
          border-radius: 0;
          padding: 0;
        }

        .reserve-checkout-page .reserve-payment-head,
        .reserve-checkout-page .reserve-checkout-step {
          padding: 0.9rem;
        }

        .reserve-checkout-page .reserve-payment-head {
          display: grid;
        }

        .reserve-checkout-edit-button {
          width: 100%;
        }
      }

      .reserve-map-overlay {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: grid;
        place-items: center;
        padding: 1.4rem;
      }

      .reserve-map-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(2, 7, 14, 0.72);
        backdrop-filter: blur(8px);
      }

      .reserve-map-dialog {
        position: relative;
        display: grid;
        gap: 1rem;
        width: min(95vw, 82rem);
        max-height: 92vh;
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.96);
        padding: 1rem;
        box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.46);
      }

      .reserve-map-dialog-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 0.85rem;
      }

      .reserve-map-dialog-head h3 {
        margin: 0.4rem 0 0;
        font-size: clamp(1.45rem, 2vw, 2rem);
      }

      .reserve-map-dialog-head p {
        margin: 0.35rem 0 0;
        color: rgba(220, 231, 239, 0.7);
        font-weight: 750;
      }

      .reserve-map-selection-count {
        display: inline-block;
        margin-top: 0.5rem;
        color: var(--ember);
        font-size: 0.92rem;
      }

      .reserve-map-dialog .round-close {
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font-size: 1.2rem;
        font-weight: 900;
      }

      .reserve-map-dialog-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
        align-items: start;
        gap: 1rem;
      }

      .reserve-map-camp {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.9rem;
        background: rgba(255, 255, 255, 0.04);
        padding: 0.75rem;
      }

      .reserve-map-camp .camp-map-inner {
        width: min(100%, 58rem);
        margin: 0;
      }

      .reserve-map-info-panel {
        min-height: auto;
      }

      .reserve-map-info-panel .site-info-card {
        min-height: 0;
      }

      .reserve-map-confirm {
        width: 100%;
        min-height: 3rem;
        margin-top: 1rem;
        font-size: 1rem;
        font-weight: 950;
      }

      .reserve-map-confirm:disabled {
        cursor: not-allowed;
        filter: grayscale(0.35);
        opacity: 0.45;
      }

      .reserve-map-marker.reserved,
      .reserve-map-marker.reserved:hover {
        background: rgba(14, 15, 18, 0.92) !important;
        border-color: rgba(255, 72, 92, 0.96) !important;
        box-shadow:
          0 0 0 0.16rem rgba(255, 72, 92, 0.24),
          0 0 1.1rem rgba(255, 72, 92, 0.48) !important;
        cursor: not-allowed;
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.96);
      }

      @media (max-width: 980px) {
        .reserve-date-layout,
        .reserve-payment-summary,
        .reserve-map-dialog-body,
        body[data-page="reserve"] form[data-form="reserve"] {
          grid-template-columns: 1fr;
        }

        .reserve-map-dialog {
          width: min(96vw, 48rem);
        }

        .reserve-summary-schedule-row strong {
          text-align: left;
        }

        .reserve-vehicle-size-actions {
          grid-template-columns: 1fr;
        }
      }

      .panel.signup-auth-panel {
        width: min(96vw, 66rem);
      }

      .panel.signup-auth-panel .panel-body {
        max-height: min(78vh, 48rem);
        overflow-y: auto;
      }

      .signup-form-card {
        gap: 0.85rem;
      }

      .signup-form-card h3 {
        margin: 0;
        font-size: clamp(1.32rem, 1.7vw, 1.7rem);
      }

      .signup-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem 1rem;
        align-items: start;
      }

      .signup-form-grid label {
        min-width: 0;
      }

      .signup-form-grid .field,
      .signup-address-field .field {
        min-height: 3rem;
      }

      .signup-address-field {
        grid-column: 1 / -1;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1rem;
        padding: 0.9rem;
        margin: 0;
      }

      .signup-address-field legend {
        padding: 0 0.35rem;
        color: #ffffff;
        font-weight: 900;
      }

      .signup-address-row,
      .signup-address-detail-row {
        display: grid;
        gap: 0.65rem;
      }

      .signup-address-row {
        grid-template-columns: minmax(8rem, 0.35fr) auto;
        margin-bottom: 0.65rem;
      }

      .signup-address-detail-row {
        grid-template-columns: 1.15fr 0.85fr;
      }

      .postcode-search-button {
        min-height: 3rem;
        padding: 0 1rem;
        white-space: nowrap;
      }

      @media (max-width: 760px) {
        .signup-form-grid,
        .signup-address-row,
        .signup-address-detail-row {
          grid-template-columns: 1fr;
        }
      }

      /* 비회원 예약 · 예약확인 화면 */
      body[data-page="auth"] .topbar.home-glass-nav {
        display: none !important;
      }

      .guest-reserve-actions {
        display: grid;
        gap: 0.62rem;
        margin-top: 0.85rem;
      }

      .guest-reserve-actions .primary-button,
      .guest-reserve-actions .ghost-button {
        width: 100%;
        min-height: 3.1rem;
      }

      .guest-member-benefit-link,
      .guest-member-login-link {
        border: 0;
        background: transparent;
        color: rgba(220, 231, 239, 0.72);
        padding: 0.15rem;
        font: inherit;
        font-size: 0.86rem;
        font-weight: 850;
        text-decoration: underline;
        text-underline-offset: 0.22rem;
        cursor: pointer;
      }

      .guest-member-benefit-link:hover,
      .guest-member-login-link:hover {
        color: var(--ember);
      }

      .guest-reservation-note {
        display: grid;
        gap: 0.22rem;
        border: 1px solid rgba(244, 182, 106, 0.32);
        border-radius: 0.8rem;
        background: linear-gradient(135deg, rgba(244, 182, 106, 0.13), rgba(244, 182, 106, 0.04));
        padding: 0.82rem 0.9rem;
      }

      .guest-reservation-note strong {
        color: #ffd39c;
        font-size: 0.94rem;
      }

      .guest-reservation-note span {
        color: rgba(236, 243, 248, 0.76);
        font-size: 0.84rem;
        font-weight: 750;
        line-height: 1.5;
      }

      .guest-password-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
      }

      .guest-password-grid label {
        min-width: 0;
      }

      .guest-password-field {
        position: relative;
        display: block;
      }

      .guest-password-field .field {
        width: 100%;
        padding-right: 4rem;
      }

      .guest-password-field button {
        position: absolute;
        top: 50%;
        right: 0.55rem;
        min-width: 2.9rem;
        border: 0;
        border-radius: 0.45rem;
        background: rgba(255, 255, 255, 0.09);
        color: rgba(255, 255, 255, 0.82);
        padding: 0.38rem 0.48rem;
        font: inherit;
        font-size: 0.75rem;
        font-weight: 900;
        transform: translateY(-50%);
        cursor: pointer;
      }

      .guest-password-field button:hover {
        background: rgba(244, 182, 106, 0.18);
        color: #fff;
      }

      .guest-password-help,
      .guest-sensitive-help {
        color: rgba(220, 231, 239, 0.6);
        font-size: 0.76rem;
        font-weight: 700;
        line-height: 1.45;
      }

      .guest-password-help {
        grid-column: 1 / -1;
        margin-top: -0.25rem;
      }

      .auth-popup-shell {
        gap: 0.8rem;
      }

      .guest-lookup-entry-card {
        display: grid;
        width: 100%;
        gap: 0.72rem;
        border: 1px solid rgba(244, 182, 106, 0.25);
        border-radius: 0.85rem;
        background: rgba(244, 182, 106, 0.07);
        padding: 0.82rem;
      }

      .guest-lookup-entry-card > div:first-child {
        display: grid;
        gap: 0.18rem;
      }

      .guest-lookup-entry-card strong {
        color: #fff;
        font-size: 0.92rem;
      }

      .guest-lookup-entry-card span {
        color: rgba(220, 231, 239, 0.68);
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.45;
      }

      .guest-lookup-entry-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
      }

      .guest-lookup-entry-actions .ghost-button {
        width: 100%;
        min-height: 2.65rem;
        padding-inline: 0.65rem;
        font-size: 0.82rem;
      }

      .guest-lookup-page {
        overflow-y: auto;
      }

      .guest-lookup-page .auth-page-layout {
        align-items: start;
        min-height: auto;
        padding: clamp(1rem, 4vh, 3.5rem) 0 4rem;
      }

      .guest-lookup-page .auth-page-copy h1 {
        max-width: 38rem;
        font-size: clamp(2.35rem, 4.4vw, 4.5rem);
      }

      .guest-reservation-complete-page .auth-page-inner {
        width: min(100% - 2rem, 76rem);
      }

      .guest-reservation-complete-head {
        justify-content: center;
      }

      .guest-reservation-complete-main {
        display: grid;
        min-height: calc(100vh - 9rem);
        place-items: center;
        padding: clamp(1.25rem, 4vw, 3.5rem) 0 5rem;
      }

      .guest-reservation-complete-shell {
        display: grid;
        width: min(100%, 42rem);
        gap: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1.35rem;
        background: linear-gradient(145deg, rgba(12, 24, 40, 0.96), rgba(5, 14, 27, 0.94));
        box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, 0.34);
        padding: clamp(1rem, 3vw, 1.6rem);
        backdrop-filter: blur(22px);
      }

      .guest-reservation-complete-intro {
        display: grid;
        justify-items: center;
        gap: 0.55rem;
        padding: 0.4rem 0.5rem 0.25rem;
        text-align: center;
      }

      .guest-reservation-complete-icon {
        display: grid;
        width: 3.2rem;
        height: 3.2rem;
        place-items: center;
        border: 1px solid rgba(98, 226, 164, 0.42);
        border-radius: 999px;
        background: rgba(98, 226, 164, 0.1);
        color: #8df0bc;
        font-size: 1.35rem;
        font-weight: 950;
      }

      .guest-reservation-complete-intro h1 {
        margin: 0.2rem 0 0;
        color: #fff;
        font-size: clamp(1.55rem, 3vw, 2.2rem);
        line-height: 1.25;
      }

      .guest-reservation-complete-intro p {
        max-width: 33rem;
        margin: 0;
        color: rgba(220, 231, 239, 0.72);
        font-weight: 750;
        line-height: 1.6;
      }

      .guest-reservation-bank-account {
        display: grid;
        gap: 0.25rem;
        border: 1px solid rgba(244, 182, 106, 0.34);
        border-radius: 0.9rem;
        background: rgba(244, 182, 106, 0.09);
        padding: 0.9rem 1rem;
        text-align: center;
      }

      .guest-reservation-bank-account span,
      .guest-reservation-bank-account small {
        color: rgba(229, 237, 243, 0.68);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .guest-reservation-bank-account strong {
        color: #ffd39c;
        font-size: clamp(1rem, 2.2vw, 1.25rem);
        line-height: 1.45;
      }

      .guest-reservation-complete-results {
        display: grid;
        gap: 0.8rem;
      }

      .guest-reservation-complete-result {
        box-shadow: none;
      }

      .guest-reservation-complete-confirm {
        display: inline-flex;
        width: 100%;
        min-height: 3.35rem;
        align-items: center;
        justify-content: center;
        text-decoration: none;
      }

      .reserve-map-status-dialog {
        width: min(100% - 1.5rem, 42rem);
      }

      .reserve-map-live-status {
        display: grid;
        min-height: 20rem;
        place-items: center;
        align-content: center;
        gap: 0.65rem;
        padding: clamp(1.5rem, 5vw, 3rem);
        text-align: center;
      }

      .reserve-map-live-status-icon {
        display: grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border: 1px solid rgba(244, 182, 106, 0.4);
        border-radius: 999px;
        background: rgba(244, 182, 106, 0.1);
        color: #ffd39c;
        font-size: 1.1rem;
        font-weight: 950;
      }

      .reserve-map-live-status strong {
        color: #fff;
        font-size: clamp(1.15rem, 2.5vw, 1.55rem);
      }

      .reserve-map-live-status p {
        max-width: 30rem;
        margin: 0;
        color: rgba(220, 231, 239, 0.7);
        font-weight: 750;
        line-height: 1.6;
      }

      .reserve-map-live-status .primary-button {
        min-width: 10rem;
        margin-top: 0.35rem;
      }

      .guest-lookup-shell {
        display: grid;
        gap: 0.85rem;
      }

      .guest-lookup-results {
        display: grid;
        gap: 0.85rem;
      }

      .guest-lookup-form-copy h2 {
        margin: 0;
        color: #fff;
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        line-height: 1.25;
      }

      .guest-lookup-form-copy p {
        margin: 0.35rem 0 0;
        color: rgba(220, 231, 239, 0.7);
        font-size: 0.86rem;
        font-weight: 750;
        line-height: 1.55;
      }

      .guest-lookup-security-note {
        margin: 0;
        border-left: 3px solid rgba(244, 182, 106, 0.55);
        color: rgba(220, 231, 239, 0.66);
        padding-left: 0.72rem;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.55;
      }

      .guest-member-login-link {
        width: 100%;
      }

      .guest-lookup-form > .pill {
        display: inline-flex;
        width: 100%;
        min-height: 2.65rem;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 1rem;
        font-size: 1.02rem;
        font-weight: 850;
      }

      .guest-member-login-button {
        width: 100%;
        min-height: 3.1rem;
        margin-top: 0.1rem;
        font-size: 1.02rem;
        font-weight: 850;
      }

      /* v131: 비로그인 상단에서 회원가입과 예약확인을 별도 동작으로 표시 */
      .topbar.home-glass-nav .home-nav-actions .guest-lookup-nav-button {
        min-height: 2.65rem !important;
        height: 2.65rem !important;
        padding: 0 1rem !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: rgba(255, 255, 255, 0.9);
        box-shadow: none;
        font-size: 1.05rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
      }

      .topbar.home-glass-nav .home-nav-actions .guest-lookup-nav-button[hidden] {
        display: none !important;
      }

      @media (max-width: 720px) {
        .topbar.home-glass-nav .home-nav-actions .guest-lookup-nav-button {
          width: 100% !important;
          height: 2.55rem !important;
          min-height: 2.55rem !important;
          padding: 0 0.35rem !important;
          font-size: 0.82rem !important;
          border-radius: 0.6rem !important;
        }
      }

      .guest-lookup-empty,
      .guest-lookup-result {
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 1rem;
        background: rgba(7, 17, 31, 0.78);
        box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.22);
        padding: 1rem;
        backdrop-filter: blur(18px);
      }

      .guest-lookup-empty {
        display: grid;
        place-items: center;
        gap: 0.42rem;
        min-height: 10rem;
        color: rgba(220, 231, 239, 0.72);
        text-align: center;
      }

      .guest-lookup-empty-icon {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        border: 1px solid rgba(244, 182, 106, 0.45);
        border-radius: 999px;
        background: rgba(244, 182, 106, 0.1);
        color: #ffd39c;
        font-size: 1.05rem;
        font-weight: 950;
      }

      .guest-lookup-empty strong {
        color: #fff;
      }

      .guest-lookup-empty p {
        max-width: 27rem;
        margin: 0;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.55;
      }

      .guest-lookup-preview-label {
        border-radius: 0.55rem;
        background: rgba(255, 188, 92, 0.12);
        color: #ffd39c;
        padding: 0.55rem 0.65rem;
        font-size: 0.74rem;
        font-weight: 900;
        line-height: 1.4;
        text-align: center;
      }

      .guest-lookup-result header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.8rem;
        margin-top: 0.9rem;
      }

      .guest-lookup-result header span {
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.76rem;
        font-weight: 850;
      }

      .guest-lookup-result h3 {
        margin: 0.25rem 0 0;
        color: #fff;
        font-size: 1.18rem;
      }

      .guest-status-badge {
        flex-shrink: 0;
        border: 1px solid rgba(98, 226, 164, 0.35);
        border-radius: 999px;
        background: rgba(98, 226, 164, 0.1);
        color: #8df0bc;
        padding: 0.38rem 0.62rem;
        font-size: 0.76rem;
        white-space: nowrap;
      }

      .guest-lookup-result dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin: 0.9rem 0 0;
      }

      .guest-lookup-result dl div {
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0.7rem;
        background: rgba(255, 255, 255, 0.035);
        padding: 0.72rem;
      }

      .guest-lookup-result dt {
        color: rgba(220, 231, 239, 0.55);
        font-size: 0.72rem;
        font-weight: 850;
      }

      .guest-lookup-result dd {
        margin: 0.28rem 0 0;
        color: #fff;
        font-size: 0.88rem;
        font-weight: 850;
        line-height: 1.45;
      }

      .guest-lookup-result-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 0.8rem;
      }

      .guest-lookup-result-actions .ghost-button {
        width: 100%;
        min-height: 2.7rem;
        font-size: 0.8rem;
      }

      .guest-lookup-result-actions .ghost-button:disabled {
        cursor: not-allowed;
        opacity: 0.42;
      }

      .guest-lookup-result > p {
        margin: 0.75rem 0 0;
        color: rgba(220, 231, 239, 0.58);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.5;
      }

      @media (max-width: 720px) {
        .guest-password-grid,
        .guest-lookup-entry-actions,
        .guest-lookup-result dl,
        .guest-lookup-result-actions {
          grid-template-columns: 1fr;
        }

        .auth-page-tabs {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .auth-page-tabs > :last-child {
          grid-column: 1 / -1;
        }
      }