/* =========================================================
   pages.css
   역할: 페이지별로 필요한 미세 보정
   ========================================================= */

/* =========================================================
   Login PAGE (login.html)
   ========================================================= */

.auth {
   position: relative;
   min-height: calc(100svh - var(--header-h));
   padding: 5rem 2rem;
   overflow: hidden;
}

/* BACKGROUND IMAGE */
.auth__bg {
   position: absolute;
   inset: 0;
   background-image: url(../assets/pages/login/rewards__bg.png);
   background-size: cover;
   background-position: top;
   filter: brightness(0.7) saturate(0.9);
}

/* OPTIONAL GRADIENT MASK (가독성 보강) */
.auth__bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.45)
   );
}

/* OVERLAY LAYER */
.auth__overlay {
   position: relative;
   z-index: 1;

   min-height: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* GLASS FORM */
.auth__form {
   width: 100%;
   max-width: 420px;
   position: absolute;
   top: 45%;
   padding: 3rem 2.5rem;
   border-radius: 1.25rem;

   background: rgba(255, 255, 255, 0.18);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);

   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);

   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}

/* TITLE */
.auth__title {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;

   font-size: 1.5rem;
   font-weight: 600;
   /* color: var(--brand-600); */
   color: #fff;
}

/* FORM FIELD */
.form__field input {
   width: 100%;
   height: 44px;
   padding: 0 1rem;

   background: rgba(255, 255, 255, 0.9);
   border-radius: 0.5rem;
   border: 1px solid rgba(0, 0, 0, 0.08);
}

/* BUTTON */
.login__btn {
   width: 120px;
   margin: 0 auto;
   padding: 0.6rem;

   border-radius: 0.5rem;
   border: 1px solid rgba(0, 0, 0, 0.08);

   background-color: #fff;
   color: #000;

   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

   transition:
      background-color 280ms var(--ease-out),
      color 280ms var(--ease-out),
      transform 280ms var(--ease-out),
      box-shadow 280ms var(--ease-out);
}

.login__btn:hover {
   background-color: #000;
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

/* LINKS */
.auth__links {
   display: flex;
   justify-content: center;
   gap: 1rem;
   font-weight: 500;
   color: #fff;
}

/* ACCESSIBILITY */
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
}

/* =========================================================
   HOME PAGE (index.html)
   ========================================================= */

/* Hero Section 상단 여백 조정 (고정 헤더 고려) */
.hero {
   margin-top: 0;
}

/* Featured Picks - 홈페이지 전용 강조 */
.featured__picks .container {
   max-width: 100%;
}

/* Menu Preview - 홈페이지 전용 패딩 */
.menu__preview {
   padding-top: clamp(48px, 8vh, 96px);
   padding-bottom: clamp(48px, 8vh, 96px);
}

/* Rewards Teaser - 홈페이지 배경 고정 */
@media (min-width: 1025px) {
   .rewards__teaser {
      background-attachment: fixed;
   }
}

/* Seasonal Bridge - 홈페이지 전용 높이 조정 */
.seasonal__bridge {
   min-height: 80svh;
}

/* Brand Story - 홈페이지 전용 여백 */
.brand__story {
   padding-top: clamp(48px, 8vh, 96px);
}

/* Store Experience - 홈페이지 전용 높이 */
.store__experience {
   min-height: 100svh;
}

/* =========================================================
   MENU PAGE (menu.html)
   ========================================================= */

.menu__hero {
   width: 100%;
   height: 100svh;
   background: url(../assets/img/Hero/hero__bg__03.png) center / cover no-repeat;
}

/* =========================================================
   REWARDS PAGE (rewards.html)
   ========================================================= */

/* Rewards 페이지: 전체 배경 */
.page-rewards {
   background: linear-gradient(to bottom, var(--brand-100), var(--bg-0));
}

/* Root */
.rewards {
   width: 100%;
   background-color: #fbfbfc;
}

/* =========================================================
   Rewards Hero
========================================================= */

.rewards__hero {
   position: relative;
   min-height: calc(100svh - 72px);
   overflow: hidden;
}

.rewards__hero__bg {
   position: absolute;
   inset: 0;
   background: url('../assets/pages/reward/reward__bg.png') center / cover;
   animation: rewardsHeroZoom 14s cubic-bezier(0.16, 1, 0.3, 1) infinite
      alternate;
}

.rewards__hero__bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.75)
   );
}

@keyframes rewardsHeroZoom {
   from {
      transform: scale(1.05);
   }
   to {
      transform: scale(1.15);
   }
}

.rewards__hero__inner {
   position: relative;
   z-index: 1;
   min-height: calc(100svh - 72px);
   display: flex;
   align-items: center;
   justify-content: center;
}

.rewards__hero__content {
   max-width: 720px;
   padding: 0 24px;
   text-align: center;
   color: #ffffff;
}

.rewards__hero__content h1 {
   font-size: 2.6rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
}

.rewards__hero__content p {
   font-size: 1.05rem;
   line-height: 1.7;
   opacity: 0.9;
}

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

.rewards__intro {
   padding: 7rem 0;
   background: linear-gradient(180deg, #ffffff 0%, #f2f4f7 100%);
}

.rewards__intro__header,
.rewards__tiers__header {
   text-align: center;
   margin-bottom: 5rem;
}

.rewards__intro__title,
.rewards__tiers__title {
   font-size: 2.1rem;
   font-weight: 700;
   margin-bottom: 1rem;
}

.rewards__intro__desc,
.rewards__tiers__desc {
   color: #4b5563;
}

.rewards__intro__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3rem;
}

.rewards__intro__item {
   position: relative;
   padding: 3.5rem 2.5rem;
   border-radius: 24px;
   text-align: center;
   box-shadow: 0 24px 50px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease;
}

.rewards__intro__item:hover {
   transform: translateY(-6px);
}

.rewards__intro__step {
   position: absolute;
   top: -18px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 0.85rem;
   font-weight: 700;
   padding: 6px 14px;
   border-radius: 999px;
   background: #111318;
   color: #ffffff;
}

/* Intro Color Mapping */
.rewards__intro__item:nth-child(1) {
   background: linear-gradient(180deg, #fff5f7 0%, #ffffff 70%);
}
.rewards__intro__item:nth-child(2) {
   background: linear-gradient(180deg, #d9f3e5 0%, #ffffff 70%);
}
.rewards__intro__item:nth-child(3) {
   background: linear-gradient(180deg, #fff4d6 0%, #ffffff 70%);
}

/* =========================================================
   Rewards Tiers
========================================================= */

.rewards__tiers {
   padding: 6.5rem 0;
   background: #f2f4f7;
}

.rewards__tiers__list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3rem;
}

.rewards__tiers__item {
   padding: 3rem 2.5rem;
   border-radius: 20px;
   text-align: center;
   background: #ffffff;
   box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

/* Tier Gradients */
.rewards__tiers__item:nth-child(1) {
   background: linear-gradient(180deg, #ffe4ec 0%, #ffffff 75%);
}
.rewards__tiers__item:nth-child(2) {
   background: linear-gradient(180deg, #d9f3e5 0%, #ffffff 75%);
}
.rewards__tiers__item:nth-child(3) {
   background: linear-gradient(180deg, #fff2cc 0%, #ffffff 70%);
}

/* =========================================================
   Rewards CTA
========================================================= */

.rewards__cta__re {
   text-align: center;
   line-height: 3;
   margin: 0 auto;
   display: flex;
   justify-content: center;
}

.rewards__cta__button {
   padding: 0rem 2rem;
   border-radius: 999px;
   background: #0b6b3a;
   color: #ffffff;
   font-weight: 600;
   box-shadow: 0 18px 40px rgba(11, 107, 58, 0.4);
}

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

@media (max-width: 1024px) {
   .rewards__intro__grid,
   .rewards__tiers__list {
      grid-template-columns: 1fr;
      gap: 2.5rem;
   }

   .rewards__hero__content h1 {
      font-size: 2.2rem;
   }
}

@media (max-width: 640px) {
   .rewards__hero__content h1 {
      font-size: 1.9rem;
   }
   .rewards__cta__title,
   .rewards__cta__desc {
      display: none;
   }
   .rewards__cta {
      padding: 0;
      text-align: center;
      line-height: 2;
   }
}

/* =========================================================
   BRAND PAGE (brand.html)
   ========================================================= */

.brand-hero {
   position: relative;
   min-height: calc(100svh - var(--header-h));
   width: 100%;
   overflow: hidden;
}

/* Background */
.brand-hero__bg {
   position: absolute;
   inset: 0;
   background-image: url('../assets/pages/brand/brand__hero.png');
   background-size: cover;
   background-position: center;
}

.brand-hero__bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.65)
   );
}

.brand-hero__bg {
   animation: heroZoom 12s var(--ease-out) forwards infinite;
}

@keyframes heroZoom {
   from {
      transform: scale(1.05);
   }
   to {
      transform: scale(1.12);
   }
}

.brand-hero__inner {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100svh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.brand-hero__content {
   max-width: 800px;
   padding: 0 2rem;
   text-align: center;
   color: #fff;
   line-height: 2;
}

.brand-hero__title {
   font-size: clamp(2.5rem, 4vw, 3.5rem);
   font-weight: 600;
   margin-bottom: 1rem;
}

.brand-hero__description {
   font-size: 1.125rem;
   opacity: 0.9;
}

/* Brand 페이지: 지그재그 간격 확대 */
.page-brand .zigzag {
   gap: clamp(24px, 4vh, 36px);
}

/* Brand 페이지: 미니 카드 호버 효과 */
.page-brand .mini__card {
   transition: transform 200ms var(--ease-out);
}

.page-brand .mini__card:hover {
   transform: translateY(-2px);
}
/* 모바일: 640px 이하 */
@media (max-width: 640px) {
   .brand-hero {
      position: relative;
      height: 40svh;
      width: 100%;
      overflow: hidden;
   }
}

/* =========================================================
   EVENT PAGE (event.html)
   ========================================================= */

.event__hero {
   position: relative;
   min-height: calc(100svh - var(--header-h));
   overflow: hidden;
   height: 100svh;
}

.event__hero__bg {
   position: absolute;
   inset: 0;
   background-image: url('../assets/pages/event/event__bg.png');
   background-size: cover;
   background-position: center;
   transform: scale(1.08);
   animation: eventHeroZoom 7s var(--ease-out) infinite alternate;
}

.event__hero__bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.7)
   );
}

@keyframes eventHeroZoom {
   from {
      transform: scale(1.05);
   }
   to {
      transform: scale(1.12);
   }
}

.event__hero__content {
   position: relative;
   z-index: 1;
   text-align: center;
   color: #fff;
   display: grid;
   place-content: center;
   gap: 12px;
   height: 100%;
}

.event__hero__content h1 {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 700;
   animation: fadeUp 1.2s ease forwards;
}

.event__hero__content h2 {
   font-size: clamp(1.5rem, 3vw, 2.2rem);
   font-weight: 600;
   animation: fadeUp 1.4s ease forwards;
}

.event__hero__content p {
   font-size: clamp(1rem, 2vw, 1.2rem);
   animation: fadeUp 1.6s ease forwards;
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* =========================================================
    EVENT CARDS
 ========================================================= */
.event__cards {
   padding: 6rem 0;
   background-color: #f2f4f7;
}

.event__cards__header {
   text-align: center;
   margin-bottom: 4rem;
}

.event__cards__title {
   font-size: 2rem;
   font-weight: 700;
   color: #111318;
}

.event__cards__desc {
   font-size: 1rem;
   color: #4b5563;
}

.event__cards__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 2rem;
}

.event__card {
   background: #fff;
   border-radius: 1.25rem;
   overflow: hidden;
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.15);
   text-align: center;
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
}

.event__card:hover {
   transform: translateY(-6px);
   box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}

.event__card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.event__card h3 {
   font-size: 1.2rem;
   font-weight: 700;
   margin: 0.75rem 0 0.5rem;
   color: #111318;
}

.event__card p {
   font-size: 0.95rem;
   color: #4b5563;
   padding: 0 12px 12px;
}

/* Responsive */
@media (max-width: 768px) {
   .event__hero__content h1 {
      font-size: 2rem;
   }
   .event__hero__content h2 {
      font-size: 1.5rem;
   }
   .event__hero__content p {
      font-size: 0.95rem;
   }
   .event__cards__grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   }
}

@media (max-width: 480px) {
   .event__hero__content h1 {
      font-size: 1.6rem;
   }
   .event__hero__content h2 {
      font-size: 1.2rem;
   }
   .event__hero__content p {
      font-size: 0.9rem;
   }
}

.event__cta {
   padding: 6.5rem 0;
   background: linear-gradient(180deg, #ffffff 0%, #f2f4f7 100%);
   text-align: center;
}

.event__cta__title {
   font-size: 2rem;
   font-weight: 700;
   color: #111318;
   margin-bottom: 1rem;
}

.event__cta__desc {
   font-size: 1rem;
   color: #4b5563;
   margin-bottom: 3rem;
}

.event__cta__actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}

.event__cta__button {
   padding: 1.1rem 3rem;
   background-color: #0b6b3a;
   color: #ffffff;
   font-weight: 600;
   border-radius: 999px;
   text-decoration: none;
   box-shadow: 0 16px 36px rgba(11, 107, 58, 0.35);
   transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
}

.event__cta__button:hover {
   transform: translateY(-3px);
   box-shadow: 0 24px 48px rgba(11, 107, 58, 0.45);
}

.event__cta__notice {
   font-size: 0.85rem;
   color: #8a93a3;
}
.event__timeline {
   padding: 6rem 0;
   background-color: #ffffff;
}

.event__timeline__header {
   text-align: center;
   margin-bottom: 4rem;
}

.event__timeline__title {
   font-size: 2rem;
   font-weight: 700;
   color: #111318;
   margin-bottom: 0.75rem;
}

.event__timeline__desc {
   color: #4b5563;
}

.event__timeline__list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2.5rem;
   text-align: center;
}

.event__timeline__item {
   padding: 2.5rem 1.5rem;
   border-radius: 1.25rem;
   background-color: #f2f4f7;
   cursor: pointer;
}

.event__timeline__item.is-active {
   background: linear-gradient(180deg, #d9f3e5 0%, #ffffff 80%);
   border: 1px solid #0b6b3a;
}

.event__timeline__date {
   display: block;
   font-size: 1.4rem;
   font-weight: 700;
   color: #0b6b3a;
   margin-bottom: 0.5rem;
}

.event__timeline__label,
.event__timeline__text {
   font-size: 0.95rem;
   color: #4b5563;
}

.event__closing {
   padding: 5rem 0;
   background: linear-gradient(180deg, #0b6b3a 0%, #085a31 100%);
   text-align: center;
}

.event__closing__en {
   font-size: 1.2rem;
   font-weight: 600;
   color: #ffffff;
   margin-bottom: 0.5rem;
   opacity: 0.9;
}

.event__closing__ko {
   font-size: 1rem;
   color: #d9f3e5;
}
/* =========================================================
   EVENT TIMELINE – MOBILE TEXT CONTROL
========================================================= */

.event__timeline__text.is-mobile {
   display: none;
   font-size: 0.9rem;
   color: #4b5563;
}

.event__timeline__link {
   display: inline-block;
   margin-top: 0.5rem;
   font-weight: 600;
   color: #0b6b3a;
   text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
   .event__timeline__text.is-mobile {
      display: block;
   }

   .event__timeline__list {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
}

/* =========================================================
   STORE PAGE (store.html)
   ========================================================= */

.store {
   width: 100%;
}

/* =========================================================
   1️⃣ STORE HERO
========================================================= */
.store__hero {
   position: relative;
   height: calc(100svh - var(--header-h));
   overflow: hidden;
}

.store__hero__bg {
   position: absolute;
   inset: 0;
   background: url('../assets/pages/stroe/store_hero.png') center / cover
      no-repeat;
   transform: scale(1.05);
   animation: storeHeroZoom 16s ease-in-out infinite alternate;
}

.store__hero__bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.65)
   );
}

@keyframes storeHeroZoom {
   from {
      transform: scale(1.05);
   }
   to {
      transform: scale(1.12);
   }
}

.store__hero__content {
   position: relative;
   z-index: 1;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 12px;
   text-align: center;
   color: #fff;
}

.store__hero__title {
   font-size: clamp(2.2rem, 4vw, 3.4rem);
   font-weight: 700;
}

.store__hero__desc {
   font-size: clamp(1rem, 1.6vw, 1.2rem);
   opacity: 0.9;
}

/* =========================================================
   2️⃣ STORE EXPERIENCE OVERVIEW
========================================================= */

.store__experience {
   position: relative;
   padding: clamp(72px, 12vh, 140px) 0;
   background: linear-gradient(180deg, #ffffff 0%, var(--bg-50) 100%);
   overflow: hidden;
   min-height: 50svh;
}

/* subtle background accent */
.store__experience::before {
   content: '';
   position: absolute;
   top: -120px;
   left: -120px;
   width: 420px;
   height: 420px;
   background: radial-gradient(circle, var(--brand-100) 0%, transparent 70%);
   opacity: 0.6;
   pointer-events: none;
}

.store__experience__inner {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(40px, 6vw, 96px);
   align-items: center;
}

/* ================= TEXT AREA ================= */

.store__experience__text {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.store__experience__title {
   font-size: clamp(1.9rem, 2.6vw, 2.5rem);
   font-weight: var(--fw-bold);
   letter-spacing: var(--ls-tight);
   color: var(--brand-600);
   margin-bottom: 1.25rem;
}

.store__experience__desc {
   font-size: var(--fs-16);
   line-height: 1.75;
   color: var(--text-600);
}

/* ================= IMAGE AREA ================= */

.store__experience__image {
   position: relative;
   border-radius: 1.5rem;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
   transform: translateY(0);
   transition:
      transform 0.4s var(--ease-out),
      box-shadow 0.4s var(--ease-out);
}

.store__experience__image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   transform: scale(1.02);
   transition: transform 0.6s var(--ease-out);
}

/* image overlay */
.store__experience__image::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.35) 100%
   );
   opacity: 0.8;
}

/* hover interaction */
.store__experience__image:hover {
   transform: translateY(-6px);
   box-shadow: 0 40px 90px rgba(0, 0, 0, 0.25);
}

.store__experience__image:hover img {
   transform: scale(1.06);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1024px) {
   .store__experience__inner {
      grid-template-columns: 1fr;
   }

   .store__experience__text {
      max-width: 100%;
   }
}

@media (max-width: 768px) {
   .store__experience {
      padding: 72px 0;
   }

   .store__experience__title {
      font-size: 1.8rem;
   }

   .store__experience__desc {
      font-size: 0.95rem;
   }

   .store__experience__image {
      border-radius: 1.25rem;
   }
}

/* =========================================================
   3️⃣ STORE TYPE / CONCEPT
========================================================= */
.store__types {
   padding: clamp(64px, 10vh, 120px) 0;
   background: #f2f4f7;
}

.store__types__header {
   text-align: center;
   margin-bottom: 4rem;
}

.store__types__title {
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   color: #0b6b3a;
}

.store__types__desc {
   color: #0b6b3a;
}

.store__types__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
}

.store__type {
   background: #ffffff;
   padding: 2.5rem 2rem;
   border-radius: 1.25rem;
   text-align: center;
   box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
   transition: transform 200ms ease;
}

.store__type:hover {
   transform: translateY(-6px);
}

.store__type__title {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
}

.store__type__desc {
   font-size: 0.95rem;
   color: #4b5563;
}

/* =========================================================
   4️⃣ FEATURED STORE HIGHLIGHT
========================================================= */
.store__featured {
   padding: clamp(64px, 10vh, 120px) 0;
   background: #ffffff;
}

.store__featured__inner {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: clamp(32px, 5vw, 80px);
   align-items: center;
}

.store__featured__image img {
   width: 100%;
   border-radius: 1.5rem;
}

.store__featured__title {
   font-size: clamp(1.8rem, 2.4vw, 2.4rem);
   font-weight: 700;
   color: #0b6b3a;
}

.store__featured__location {
   margin-top: 0.5rem;
   font-size: 0.95rem;
   color: #6b7280;
}

.store__featured__points {
   margin-top: 1.5rem;
   display: grid;
   gap: 0.75rem;
}

.store__featured__points li {
   font-size: 0.95rem;
   color: #374151;
}

/* =========================================================
   5️⃣ STORE SERVICES
========================================================= */
.store__services {
   padding: clamp(64px, 10vh, 120px) 0;
   background: #f2f4f7;
}

.store__services__header {
   text-align: center;
   margin-bottom: 3rem;
}

.store__services__title {
   font-size: 2rem;
   font-weight: 700;
   color: #0b6b3a;
}

.store__services__list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2rem;
   text-align: center;
}

.store__service {
   padding: 1.75rem 1rem;
   background: #ffffff;
   border-radius: 1rem;
   font-weight: 600;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.store__service {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 20px 18px;
   border-radius: var(--radius-sm);
   background: #ffffff;
   border: 1px solid var(--line-200);
   box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
   transition:
      transform 240ms var(--ease-out),
      box-shadow 240ms var(--ease-out);
}

.store__service:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 38px rgba(0, 0, 0, 0.14);
}

.store__service__icon {
   font-size: 28px;
   line-height: 1;
}

.store__service__content {
   display: grid;
   gap: 6px;
}

.store__service__title {
   font-size: 15px;
   font-weight: var(--fw-bold);
   color: var(--text-900);
   letter-spacing: var(--ls-tight);
   text-align: left;
}

.store__service__desc {
   font-size: 14px;
   line-height: 1.5;
   color: var(--text-600);
}

/* Responsive */
@media (max-width: 1024px) {
   .store__services__list {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 640px) {
   .store__services__list {
      grid-template-columns: 1fr;
   }
}
/* =========================================================
   6️⃣ VISIT CTA
========================================================= */
.store__cta__store {
   padding: clamp(64px, 8vh, 100px) 0;
   background: linear-gradient(180deg, #0b6b3a 0%, #085a31 100%);
   text-align: center;
   color: #ffffff;
   height: 35svh;
   width: 100%;
}

.store__cta__title {
   font-size: clamp(1.8rem, 2.4vw, 2.2rem);
   font-weight: 700;
}

.store__cta__desc {
   margin-top: 0.75rem;
   font-size: 1rem;
   opacity: 0.9;
}

.store__cta__actions {
   margin-top: 2.5rem;
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.store__cta__button {
   padding: 0.9rem 2.5rem;
   background: #ffffff;
   color: #0b6b3a;
   font-weight: 700;
}

.store__cta__link {
   padding: 0.9rem 2.5rem;

   border: 1px solid rgba(255, 255, 255, 0.5);
   color: #ffffff;
}

/* =========================================================
   7️⃣ CLOSING BRAND MESSAGE
========================================================= */

.store__closing__text {
   font-size: clamp(1.2rem, 2vw, 1.8rem);

   font-weight: 600;
   color: #ffffff;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
   .store__experience__inner,
   .store__featured__inner {
      grid-template-columns: 1fr;
   }

   .store__types__grid,
   .store__services__list {
      grid-template-columns: repeat(2, 1fr);
   }
}

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

   .store__cta__actions {
      flex-direction: column;
   }
}

/* =========================================================
   SERVICE PAGE (service.html)
   ========================================================= */

/* ===== 1. SERVICE HERO ===== */
.service__hero {
   position: relative;
   min-height: 100svh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.service__hero__bg {
   position: absolute;
   inset: 0;
   background: url(../assets/pages/service/service__hero.png) center / cover
      no-repeat;
   transform: scale(1.05);
   animation: serviceHeroZoom 14s ease-in-out infinite alternate;
}

.service__hero__bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.7)
   );
}

@keyframes serviceHeroZoom {
   from {
      transform: scale(1.05);
   }
   to {
      transform: scale(1.12);
   }
}

.service__hero__content {
   position: relative;
   z-index: 1;
   text-align: center;
   color: #fff;
   max-width: 800px;
   padding: 0 24px;
}

.service__hero__title {
   font-size: clamp(2.5rem, 4vw, 3.5rem);
   font-weight: 700;
   margin-bottom: 1.5rem;
}

.service__hero__subtitle-en {
   font-size: clamp(1.2rem, 2vw, 1.6rem);
   font-weight: 600;
   margin-bottom: 0.5rem;
   opacity: 0.95;
}

.service__hero__subtitle-ko {
   font-size: clamp(1.2rem, 2vw, 1.6rem);
   font-weight: 600;
   margin-bottom: 1.5rem;
   opacity: 0.95;
}

.service__hero__desc {
   font-size: clamp(1rem, 1.4vw, 1.125rem);
   line-height: 1.7;
   opacity: 0.85;
}

/* ===== 2. SERVICE LAYOUT (Sidebar + Content) ===== */
.service__layout {
   display: grid;
   grid-template-columns: 1fr 280px;
   gap: 48px;
   max-width: 1440px;
   margin: 0 auto;
   padding: 80px 0px;
   margin-right: 100px;
}

/* ===== 3. SIDEBAR NAVIGATION ===== */
.service__sidebar {
   position: sticky;
   top: calc(var(--header-h) + 24px);
   height: fit-content;
}

.service__nav {
   background: #fff;
   border-radius: var(--radius-sm);
   border: 1px solid var(--line-200);
   overflow: hidden;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
   /* border: 1px solid red; */
}

.service__nav__item {
   border-bottom: 1px solid var(--line-200);
}

.service__nav__item:last-child {
   border-bottom: none;
}

.service__nav__toggle {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.service__nav__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   color: var(--text-900);
   transition: background 200ms ease;
}

.service__nav__header:hover {
   background: var(--bg-50);
}

.service__nav__icon {
   width: 16px;
   height: 16px;
   position: relative;
}

.service__nav__icon::before,
.service__nav__icon::after {
   content: '';
   position: absolute;
   background: var(--text-600);
   transition: 0.2s ease;
}

.service__nav__icon::before {
   width: 16px;
   height: 2px;
   top: 7px;
}

.service__nav__icon::after {
   width: 2px;
   height: 16px;
   left: 7px;
}

.service__nav__toggle:checked
   + .service__nav__header
   .service__nav__icon::after {
   opacity: 0;
}

.service__nav__links {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   background: var(--bg-50);
}

.service__nav__toggle:checked ~ .service__nav__links {
   max-height: 300px;
}

.service__nav__links li {
   border-top: 1px solid var(--line-200);
}

.service__nav__links a {
   display: block;
   padding: 12px 20px 12px 36px;
   font-size: 13px;
   color: var(--text-600);
   transition: all 200ms ease;
}

.service__nav__links a:hover {
   background: #fff;
   color: var(--brand-600);
   padding-left: 40px;
}

.service__nav__link {
   display: block;
   padding: 16px 20px;
   font-size: 14px;
   font-weight: 600;
   color: var(--text-900);
   transition: background 200ms ease;
}

.service__nav__link:hover {
   background: var(--bg-50);
}

/* ===== 4. SEARCH SECTION ===== */
.service__search {
   background: #fff;
   border-radius: var(--radius-sm);
   padding: clamp(40px, 6vh, 64px) clamp(24px, 4vw, 48px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
   border: 1px solid var(--line-200);
}

.service__search__title {
   font-size: clamp(1.8rem, 2.4vw, 2.2rem);
   font-weight: 700;
   text-align: center;
   margin-bottom: 2rem;
   color: var(--text-900);
}

.service__search__box {
   position: relative;
   max-width: 600px;
   margin: 0 auto 24px;
}

.service__search__input {
   width: 100%;
   height: 56px;
   padding: 0 56px 0 20px;
   border: 2px solid var(--line-300);
   border-radius: 999px;
   font-size: 16px;
   transition: border-color 200ms ease;
}

.service__search__input:focus {
   outline: none;
   border-color: var(--brand-600);
}

.service__search__btn {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--brand-600);
   border-radius: 50%;
   transition: background 200ms ease;
}

.service__search__btn:hover {
   background: var(--brand-700);
}

.service__search__btn svg {
   width: 20px;
   height: 20px;
   stroke: #fff;
}

.service__search__keywords {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
}

.service__keyword {
   padding: 8px 18px;
   border-radius: 999px;
   background: var(--bg-50);
   border: 1px solid var(--line-200);
   font-size: 14px;
   color: var(--text-700);
   transition: all 200ms ease;
}

.service__keyword:hover {
   background: var(--brand-600);
   color: #fff;
   border-color: var(--brand-600);
   transform: translateY(-2px);
}

/* ===== 5. FAQ SECTION ===== */
.service__faq {
   margin-top: 48px;
}

.service__faq__title {
   font-size: clamp(1.8rem, 2.4vw, 2.2rem);
   font-weight: 700;
   margin-bottom: 2rem;
   color: var(--text-900);
}

.service__faq__list {
   display: grid;
   gap: 12px;
}

.service__faq__item {
   background: #fff;
   border-radius: var(--radius-sm);
   border: 1px solid var(--line-200);
   overflow: hidden;
   transition: box-shadow 200ms ease;
}

.service__faq__item:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.service__faq__toggle {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.service__faq__question {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   cursor: pointer;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-900);
   transition: background 200ms ease;
}

.service__faq__question:hover {
   background: var(--bg-50);
}

.service__faq__icon {
   width: 20px;
   height: 20px;
   position: relative;
   flex-shrink: 0;
}

.service__faq__icon::before,
.service__faq__icon::after {
   content: '';
   position: absolute;
   background: var(--brand-600);
   transition: 0.2s ease;
}

.service__faq__icon::before {
   width: 20px;
   height: 2px;
   top: 9px;
}

.service__faq__icon::after {
   width: 2px;
   height: 20px;
   left: 9px;
}

.service__faq__toggle:checked
   + .service__faq__question
   .service__faq__icon::after {
   opacity: 0;
}

.service__faq__answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   background: var(--bg-50);
}

.service__faq__toggle:checked ~ .service__faq__answer {
   max-height: 300px;
}

.service__faq__answer p {
   padding: 20px 24px;
   font-size: 15px;
   line-height: 1.7;
   color: var(--text-600);
}

/* ===== 6. PROCESS SECTION ===== */
.service__process {
   margin-top: 48px;
}

.service__process__title {
   font-size: clamp(1.8rem, 2.4vw, 2.2rem);
   font-weight: 700;
   text-align: center;
   margin-bottom: 1rem;
   color: var(--text-900);
}

.service__process__desc {
   text-align: center;
   color: var(--text-600);
   margin-bottom: 3rem;
}

.service__process__steps {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   margin-bottom: 48px;
}

.service__process__step {
   text-align: center;
   padding: 24px 16px;
   background: #fff;
   border-radius: var(--radius-sm);
   border: 1px solid var(--line-200);
   transition: all 280ms ease;
}

.service__process__step:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
   border-color: var(--brand-600);
}

.service__process__number {
   width: 48px;
   height: 48px;
   margin: 0 auto 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--brand-600);
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   border-radius: 50%;
}

.service__process__step-title {
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 8px;
   color: var(--text-900);
}

.service__process__step-desc {
   font-size: 13px;
   line-height: 1.6;
   color: var(--text-600);
}

.service__process__notice {
   padding: 32px;
   background: linear-gradient(135deg, var(--brand-100), var(--bg-50));
   border-radius: var(--radius-sm);
   border: 1px solid var(--brand-500);
}

.service__process__notice h3 {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 12px;
   color: var(--brand-700);
}

.service__process__notice p {
   font-size: 14px;
   line-height: 1.7;
   color: var(--text-700);
}

/* ===== 7. TIPS SECTION ===== */
.service__tips {
   margin-top: 48px;
   padding-bottom: 48px;
}

.service__tips__title {
   font-size: clamp(1.8rem, 2.4vw, 2.2rem);
   font-weight: 700;
   text-align: center;
   margin-bottom: 1rem;
   color: var(--text-900);
}

.service__tips__desc {
   text-align: center;
   color: var(--text-600);
   margin-bottom: 3rem;
}

.service__tips__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.service__tip {
   padding: 32px 24px;
   background: #fff;
   border-radius: var(--radius-sm);
   border: 1px solid var(--line-200);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
   transition: all 280ms ease;
}

.service__tip:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.service__tip__icon {
   font-size: 48px;
   text-align: center;
   margin-bottom: 20px;
}

.service__tip__title {
   font-size: 18px;
   font-weight: 700;
   text-align: center;
   margin-bottom: 20px;
   color: var(--text-900);
}

.service__tip__list {
   display: grid;
   gap: 12px;
}

.service__tip__list li {
   position: relative;
   padding-left: 20px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--text-600);
}

.service__tip__list li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--brand-600);
   font-weight: 700;
}

/* ===== 8. RESPONSIVE ===== */
@media (max-width: 1024px) {
   .service__layout {
      grid-template-columns: 1fr;
      gap: 32px;
      margin: 0;
   }

   .service__sidebar {
      position: static;
   }

   .service__process__steps {
      grid-template-columns: repeat(2, 1fr);
   }

   .service__tips__grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 640px) {
   .service__layout {
      padding: 48px 16px;
      margin: 0;
   }
   .service__hero__bg {
      background: url(../assets/pages/service/service__hero.png) right center /
         cover no-repeat;
   }
   .service__process__steps {
      grid-template-columns: 1fr;
   }

   .service__search {
      padding: 32px 20px;
   }
}

/* =========================================================
   PRINT STYLES - 인쇄 최적화
   ========================================================= */
@media print {
   /* 헤더/푸터 숨김 */
   .site__header,
   .site__footer,
   .hamburger,
   .mobile-nav,
   .overlay {
      display: none !important;
   }

   /* 배경 이미지 제거 */
   .hero,
   .featured__picks,
   .rewards__teaser,
   .seasonal__bridge,
   .store__experience {
      background: white !important;
   }

   /* 페이지 여백 */
   body {
      margin: 2cm;
   }

   /* 링크 URL 표시 */
   a[href]::after {
      content: ' (' attr(href) ')';
      font-size: 0.8em;
      color: #666;
   }

   /* 페이지 나누기 */
   section {
      page-break-inside: avoid;
   }

   h1,
   h2,
   h3 {
      page-break-after: avoid;
   }
}

/* =========================================================
   ACCESSIBILITY - 페이지별 접근성 개선
   ========================================================= */

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
   .menu__card__inner,
   .rewards__item,
   .brand__tabbar label {
      border-width: 2px;
   }

   .menu__badge {
      font-weight: 900;
   }
}

/* 다크모드 페이지별 조정 */
@media (prefers-color-scheme: dark) {
   .page-menu .menu__filter__tabs {
      background: var(--bg-50);
   }

   .page-brand .brand__tabbar {
      background: var(--bg-50);
   }

   .page-store .store__card {
      background: var(--bg-50);
   }
}