/* Hallmark · macrostructure: Marquee Hero · genre: atmospheric
 * theme: studied-DNA (source: image · Behance 花朝青鸾) · studied: yes
 * paper oklch(13% 0.01 340) · dyes: 홍 oklch(76% 0.11 15) ↔ 청 oklch(82% 0.09 170)
 * display: Noto Serif KR (roman) · body: Pretendard · nav: N9 · footer: Ft5
 * pre-emit critique: P4 H4 E4 S5 R4 V5
 *
 * 이 파일은 event-admin.html을 뺀 모든 페이지가 읽는 **유일한 공유 스타일시트**다.
 * 그래서 색 토큰 외에 전 페이지가 쓰는 공용 컴포넌트 세 가지 — 테마 스위치,
 * 염료 괘선, 반원 아치 곡선 — 를 아래 §공용 컴포넌트에 함께 둔다. 이것만을 위해
 * 파일을 하나 더 만들면 페이지마다 요청이 하나씩 더 붙는다.
 */

/* =========================================================
   색 · 라이트 (기본값)
   ---------------------------------------------------------
   라이트 값은 **반드시 맨 :root** 에 있어야 한다. 미디어 쿼리 안에만 두면
   시스템이 다크인 사용자가 라이트를 골랐을 때(data-theme="light") 되돌릴
   값이 없어 다크로 남는다.

   아래 다크 블록이 두 벌인 것도 같은 이유다 — 하나는 시스템 다크,
   하나는 명시적 선택. light-dark() 한 줄로 합칠 수 있지만 미지원 브라우저에서
   토큰 전체가 무효값이 되어 사이트가 통째로 무너진다. 값을 바꿀 때는
   **두 다크 블록을 함께** 고쳐야 한다.
   ========================================================= */
:root {
  color-scheme: light;

  /* ---- 화선지 위 홍·청 염료 ---- */
  --color-paper:        oklch(97.5% 0.006 85);
  --color-paper-2:      oklch(95.5% 0.008 60);
  --color-paper-3:      oklch(92.5% 0.010 50);
  --color-ink:          oklch(23% 0.014 340);
  --color-muted:        oklch(41% 0.014 340);
  --color-neutral:      oklch(47% 0.012 350);
  --color-rule:         oklch(85% 0.012 340);
  --color-rule-soft:    oklch(91% 0.010 340);

  /* 종이가 밝으므로 염료를 깊게 간다 — 도형 위에 흰 글리프를 얹기 위해서다 */
  --dye-blossom:        oklch(60% 0.155 15);   /* 홍 */
  --dye-blossom-deep:   oklch(46% 0.150 15);
  --dye-jade:           oklch(58% 0.105 175);  /* 청 */
  --dye-jade-deep:      oklch(44% 0.095 205);

  /* 염료 도형 위에 얹는 글자색. 다크에서는 종이색(어둠), 라이트에서는 흰색으로
     뒤집힌다 — 그래서 --color-paper 를 직접 쓰면 안 된다. */
  --color-on-dye:       oklch(98.5% 0.005 85);

  --color-accent:       oklch(47% 0.170 15);
  --color-accent-2:     oklch(45% 0.095 200);
  --color-focus:        oklch(47% 0.170 15);

  --color-primary:      oklch(45% 0.095 200);  /* 채워진 실행 버튼 */
  --color-on-primary:   oklch(98.5% 0.005 85);

  --color-select-bg:    oklch(88% 0.070 15);
  --color-select-ink:   oklch(23% 0.014 340);

  --color-ok-ink:       oklch(43% 0.085 180);
  --color-ok-bg:        oklch(95% 0.032 180);
  --color-danger:       oklch(45% 0.170 25);
  --color-danger-bg:    oklch(95% 0.030 25);

  --color-field:        oklch(99% 0.003 85);

  /* ---- type ---- */
  --font-display: "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", system-ui, sans-serif;

  --text-xs:   0.8rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-display-s: clamp(1.9rem, 2.6vw + 1rem, 2.9rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);

  /* ---- space · 4pt ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- misc ---- */
  --rule-hair: 1px;
  --rule-thick: 4px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}

/* ── 색 · 다크 (시스템) — 아래 [data-theme="dark"] 블록과 값이 같아야 한다 ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-paper:        oklch(13% 0.010 340);
    --color-paper-2:      oklch(16% 0.012 340);
    --color-paper-3:      oklch(20% 0.014 340);
    --color-ink:          oklch(94% 0.008 80);
    --color-muted:        oklch(76% 0.012 350);
    --color-neutral:      oklch(62% 0.012 350);
    --color-rule:         oklch(30% 0.014 340);
    --color-rule-soft:    oklch(24% 0.012 340);

    --dye-blossom:        oklch(76% 0.110 15);
    --dye-blossom-deep:   oklch(56% 0.140 15);
    --dye-jade:           oklch(82% 0.090 170);
    --dye-jade-deep:      oklch(56% 0.090 210);

    --color-on-dye:       var(--color-paper);

    --color-accent:       var(--dye-blossom);
    --color-accent-2:     var(--dye-jade);
    --color-focus:        oklch(78% 0.120 15);

    --color-primary:      var(--dye-jade);
    --color-on-primary:   var(--color-paper);

    --color-select-bg:    var(--dye-blossom-deep);
    --color-select-ink:   var(--color-ink);

    --color-ok-ink:       var(--dye-jade);
    --color-ok-bg:        oklch(24% 0.035 180);
    --color-danger:       oklch(74% 0.130 25);
    --color-danger-bg:    oklch(24% 0.045 20);

    --color-field:        var(--color-paper-3);
  }
}

/* ── 색 · 다크 (명시적 선택) — 위 미디어 쿼리 블록과 값이 같아야 한다 ── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper:        oklch(13% 0.010 340);
  --color-paper-2:      oklch(16% 0.012 340);
  --color-paper-3:      oklch(20% 0.014 340);
  --color-ink:          oklch(94% 0.008 80);
  --color-muted:        oklch(76% 0.012 350);
  --color-neutral:      oklch(62% 0.012 350);
  --color-rule:         oklch(30% 0.014 340);
  --color-rule-soft:    oklch(24% 0.012 340);

  --dye-blossom:        oklch(76% 0.110 15);
  --dye-blossom-deep:   oklch(56% 0.140 15);
  --dye-jade:           oklch(82% 0.090 170);
  --dye-jade-deep:      oklch(56% 0.090 210);

  --color-on-dye:       var(--color-paper);

  --color-accent:       var(--dye-blossom);
  --color-accent-2:     var(--dye-jade);
  --color-focus:        oklch(78% 0.120 15);

  --color-primary:      var(--dye-jade);
  --color-on-primary:   var(--color-paper);

  --color-select-bg:    var(--dye-blossom-deep);
  --color-select-ink:   var(--color-ink);

  --color-ok-ink:       var(--dye-jade);
  --color-ok-bg:        oklch(24% 0.035 180);
  --color-danger:       oklch(74% 0.130 25);
  --color-danger-bg:    oklch(24% 0.045 20);

  --color-field:        var(--color-paper-3);
}

/* =========================================================
   공용 컴포넌트 — 전 페이지 공통
   ========================================================= */

/* ── 염료 괘선 · 폴드 경계 ─────────────────────────────── */
.rule-dye {
  height: var(--rule-thick);
  border: 0;
  background: linear-gradient(90deg, var(--dye-jade), var(--dye-blossom));
}

/* ── 아치 창(窓) · 반원 돔 ──────────────────────────────
   가로 반지름 50%(=W/2), 세로 반지름 50cqw(=W/2)라서 rx = ry — 어떤 폭에서도
   정확한 반원이 된다. 세로를 %로 주면 요소 높이에 매여 이미지 비율마다 곡률이
   달라진다: 세로로 긴 index 썸네일은 봐줄 만했지만 가로로 납작한 event 데모는
   같은 값에서 과하게 퍼졌다. 이제 두 페이지의 곡률이 수학적으로 같다.

   cqw는 **자기 자신이 아니라 조상 컨테이너** 를 기준으로 한다. 그래서 이 클래스를
   쓰는 요소는 `container-type: inline-size` 인 부모 안에서 폭 100%여야 한다. */
.arch {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm)
               / 50cqw 50cqw var(--radius-sm) var(--radius-sm);
}
.arch img { display: block; width: 100%; }

/* ── 스토어 버튼 · App Store / Google Play ──────────────
   index.html 과 event.html 이 같은 형태를 쓴다. 아이콘 + 스토어명(작게) +
   무엇을 받는지(굵게) 두 줄 — 버튼만 보고도 어느 스토어인지 알 수 있어야 한다. */
.stores { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.store {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 56px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.store:hover { background: var(--color-paper-2); border-color: var(--color-neutral); transform: translateY(-1.5px); }
.store:active { transform: translateY(1px); }
.store svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.store small { display: block; font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.3; }
.store b { display: block; font-size: var(--text-base); line-height: 1.3; }

@media (max-width: 40rem) {
  .store { width: 100%; justify-content: flex-start; }
}

/* ── 더 보기 뱃지 · 본문 줄 안에 놓는 작은 알약 버튼 ───────
   index 의 .meta span 과 같은 외곽선 알약이되, 누를 수 있다는 신호로 염료색
   글자와 hover 채움을 얹었다. 배경은 비워 둔다 — 이 뱃지는 종이(--color-paper)
   위에도, 카드(--color-paper-2) 위에도 올라가므로 어느 한쪽으로 칠하면
   다른 쪽에서 사라진다. */
.chip-more {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: 0.06em;
  /* 앞 문장과의 간격은 마크업의 줄바꿈(=공백 한 칸)이 만든다. 여기에 margin 을
     더하면 뱃지가 다음 줄로 넘어갔을 때 그만큼 들여써져 왼쪽 정렬이 어긋난다. */
  padding: 5px var(--space-md) 6px;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-accent-2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.chip-more::after { content: "›"; font-size: 1.15em; line-height: 1; margin-block-start: -0.12em; }
.chip-more:hover {
  background: var(--color-paper-3);
  border-color: var(--color-accent-2);
  color: var(--color-ink);
  transform: translateY(-1px);
}
.chip-more:active { transform: translateY(1px); }
.chip-more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .chip-more:hover { transform: none; }
}

/* ── 모달 · 네이티브 <dialog> ────────────────────────────
   showModal() 이 포커스 가둠·Esc·배경 비활성(inert)·최상위 레이어를 전부
   브라우저 몫으로 넘겨준다. 직접 구현하면 그 네 가지를 다 다시 만들어야 한다. */
/* 높이 제한은 **패널**에만 건다. dialog 쪽에 max-height 를 걸고 패널에
   max-height:inherit 을 주면 패널의 100%가 dialog 를 되참조해 상자가 어긋나고,
   가운데 정렬(UA 의 inset:0 + margin:auto)이 깨져 좌상단에 붙는다. */
.modal {
  width: min(100% - 2rem, 34rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
}
.modal::backdrop { background: oklch(0% 0 0 / 0.55); }

/* 머리(제목·닫기)는 스크롤 영역 **밖**이다. 안에 두면 전체화면 모달에서
   목록을 내리는 순간 닫기 버튼이 위로 사라져 빠져나갈 길이 없어진다. */
.modal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 4rem);
  overflow: hidden;                 /* 둥근 모서리 밖으로 본문이 새지 않게 */
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
}
.modal__head {
  flex: none;
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule-soft);
}
.modal__body {
  flex: 1 1 auto;
  min-height: 0;                    /* flex 자식이 줄어들 수 있어야 스크롤이 생긴다 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-lg);
}
.modal__title {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.3;
}
.modal__close {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin: -4px -4px 0 0;
  padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--color-neutral);
  font-size: 22px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal__close:hover { background: var(--color-paper-3); color: var(--color-ink); }
.modal__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.modal__lead { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.65; }
.modal__lead b { color: var(--color-ink); }
.modal__note {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-soft);
  font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.7;
}

/* ── 선택형 쿠폰 목록 ───────────────────────────────────── */
/* 상품 이미지는 흰 배경이 박혀 있다 — 흰 타일에 얹어 '상품 카드'로 읽히게 한다.
   다크에서 흰 사각형이 떠 보이는 것보다 이쪽이 의도적으로 보인다. */
.reward-shots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block: var(--space-lg) var(--space-xs);
  max-width: 26rem;
}
.reward-shots img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #fff;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
}
.reward-shots__cap {
  font-size: var(--text-xs); color: var(--color-neutral);
  margin-block-end: var(--space-lg);
}
.reward-list { list-style: none; display: grid; gap: 1px; background: var(--color-rule-soft); }
.reward-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  background: var(--color-paper-2);
}
.reward-list b {
  flex: 0 0 7.5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-sm); color: var(--color-ink);
}
.reward-list span { flex: 1 1 10rem; font-size: var(--text-sm); color: var(--color-muted); }

/* 모바일 — 전체화면 시트.
   좁은 화면에서 가운데 뜬 작은 상자는 목록을 훑기 어렵고, 배경이 비쳐 어수선하다.
   UA 가 dialog:modal 에 max-width/max-height 를 직접 걸어 두므로 둘 다 풀어야 한다.
   높이는 dvh 로 잡는다 — 주소창이 접히고 펴질 때 100vh 는 화면 밖으로 넘친다. */
@media (max-width: 40rem) {
  .modal {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
  }
  .modal__panel {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  /* 노치·홈 인디케이터를 피한다. 전체화면이 되면서 처음으로 화면 가장자리에
     닿기 때문에, 여기서만 safe-area 를 본다. */
  .modal__head { padding-block-start: max(var(--space-lg), env(safe-area-inset-top)); }
  .modal__body {
    padding-block-end: max(var(--space-2xl), calc(env(safe-area-inset-bottom) + var(--space-lg)));
  }
}

@media (max-width: 30rem) {
  .modal__head { padding-inline: var(--space-md); }
  .modal__body { padding-inline: var(--space-md); }
  /* 상품명이 길어 두 칸으로 나누면 오른쪽이 두세 줄로 접힌다 — 위아래로 쌓는다. */
  .reward-list b { flex-basis: 100%; }
  .reward-list span { flex-basis: 100%; }
}

/* ── 테마 스위치 · 라이트 / 다크 / 시스템 ───────────────
   JS가 그린다(js/theme.js). JS가 없으면 아예 나타나지 않고 시스템 테마로 동작한다. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  background: transparent;
}
.theme-switch__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.theme-switch__btn svg { width: 17px; height: 17px; display: block; }
.theme-switch__btn:hover { color: var(--color-ink); background: var(--color-paper-2); }
.theme-switch__btn[aria-checked="true"] {
  color: var(--color-on-dye);
  background: linear-gradient(135deg, var(--dye-jade), var(--dye-blossom));
}
.theme-switch__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch__btn { transition-duration: 150ms; }
  .store:hover { transform: none; }
}