/* ═══════════════════════════════════════════════════════════
   MAMORY 홈페이지
   앱과 같은 값을 쓴다. 색은 FrameModels.swift의 freeThemes,
   프레임 여백은 FrameRenderer.Metrics에서 그대로 가져왔다.
   (배치 6종 수치는 Design/MakeFrameSpec.py의 measure()로 뽑았다 —
    2026-08-18에 chromeScale·topTrim 반영분으로 전부 갱신함)
   ═══════════════════════════════════════════════════════════ */

/* ───────── 토큰 ───────── */

:root {
  /* 바탕과 글자 */
  --bg:        #FBF8F3;
  --bg-alt:    #F4EFE6;
  --surface:   #FFFFFF;
  --text:      #26221D;
  --muted:     #6E675E;
  --line:      #E5DED2;

  /* 브랜드 강조 — 프레임 테마 '클레이'에서 왔다 */
  --accent:    #8C6A5D;
  --accent-on: #FDF8F4;

  /* 일러스트 포인트. 장식에만 쓰고 글자에는 쓰지 않는다 */
  --apricot:   #F6A99A;
  --yellow:    #FFCB6B;
  --teal:      #4E7C99;

  /* 체험 스튜디오(어두운 무대) 전용 */
  --studio-bg:   #191512;
  --studio-fg:   #F4EDE2;
  --studio-dim:  #A79E93;
  --studio-line: #322B25;

  /* 간격 — 앱의 DesignSystem 값과 맞췄다 */
  --gap-side:  20px;
  --gap-sec:   28px;
  --r-card:    18px;
  --r-btn:     14px;
  --r-chip:    12px;

  --wrap:      1120px;
  --shadow:    0 1px 2px rgba(58, 51, 44, .05), 0 8px 28px rgba(58, 51, 44, .07);

  /* 종이 질감 — 바깥에서 가져오지 않고 데이터 URI로 품는다 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light dark;
}

/* 어둡게 — 시스템 설정을 따르되, 사용자가 고른 것이 이긴다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #131211;
    --bg-alt:  #1A1817;
    --surface: #1E1B19;
    --text:    #F2EEE8;
    --muted:   #A79E93;
    --line:    #2E2A26;
    --accent:  #D2A894;
    --accent-on: #221B17;
    --shadow:  0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg:      #131211;
  --bg-alt:  #1A1817;
  --surface: #1E1B19;
  --text:    #F2EEE8;
  --muted:   #A79E93;
  --line:    #2E2A26;
  --accent:  #D2A894;
  --accent-on: #221B17;
  --shadow:  0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.35);
}

/* ───────── 바탕 ───────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;   /* 한글이 낱말 가운데서 끊기지 않게 */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap-side); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.dim { color: var(--muted); }

h1, h2, h3 { line-height: 1.22; letter-spacing: -.025em; margin: 0; }
/* 줄이 나뉘는 자리를 브라우저가 고르게 다듬는다 — 제목은 줄 길이를 맞추고(balance),
   문단은 마지막 줄에 낱말 하나만 남는 것을 피한다(pretty). 모르는 브라우저는 무시한다. */
h1, h2, .sec-title { text-wrap: balance; }
.lead, .sec-sub, .band-text, .card li, .ticks li, .rail-item p,
.value p, .friend p, .region p, .premium-foot, .booth-note, .sec-foot { text-wrap: pretty; }
h1 { font-size: clamp(38px, 7vw, 72px); font-weight: 800; }
h2 { font-size: clamp(27px, 4vw, 44px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-on);
  padding: 12px 18px; border-radius: var(--r-btn); z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

/* ───────── 단추 ───────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;                    /* 앱과 같은 최소 터치 영역 */
  padding: 12px 26px;
  background: var(--accent); color: var(--accent-on);
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; opacity: .92; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.btn-sm { min-height: 38px; padding: 8px 18px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 15px 36px; font-size: 18px; }
.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--line);
}
.btn-dark {
  background: var(--text); color: var(--bg);
}

/* ───────── 상단 막대 ───────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav-inner {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--text); font-weight: 700; letter-spacing: .04em; font-size: 17px;
}
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; }

.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 15px; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.nav-right { display: flex; align-items: center; gap: 10px; }

.theme-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer; color: var(--text);
}
.theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* 아이콘도 상태가 셋이다 — 시스템 따르기 / 밝게 / 어둡게.
   한쪽만 걸면 시스템이 어두운데 해가 뜨는 식으로 어긋난다. */
.theme-btn .i-sun  { display: block; }
.theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: block; }
}
:root[data-theme="dark"]  .theme-btn .i-sun  { display: none; }
:root[data-theme="dark"]  .theme-btn .i-moon { display: block; }
:root[data-theme="light"] .theme-btn .i-sun  { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ───────── 첫 화면 ───────── */

.hero {
  position: relative;
  padding: clamp(52px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
/* 종이 질감 — 아주 옅게. 글자 대비를 해치지 않는 선에서만 */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .05; pointer-events: none;
}

/* 칸을 그냥 1fr로 두면 최소 너비가 min-content가 되는데, 한글은 keep-all이라
   낱말이 안 쪼개져 그 값이 커진다. 그러면 칸이 화면보다 넓어지고 글이 잘린다.
   minmax(0, …)로 최소값을 0으로 눌러야 한다. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  position: relative;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
/* 46ch를 그대로 두면 좁은 화면에서 글상자가 화면보다 넓어져 오른쪽이 잘린다.
   한글은 keep-all이라 낱말 안에서 끊기지도 않아 그대로 밖으로 삐져나간다. */
.lead { font-size: 18px; color: var(--muted); max-width: min(46ch, 100%); }
.hero-copy h1 { margin-bottom: 26px; }
/* 강조 낱말 — 손으로 그은 밑줄. 그림이 아니라 그라데이션 한 줄이다 */
.hl {
  background-image: linear-gradient(to top, color-mix(in srgb, var(--apricot) 55%, transparent) 0 .28em, transparent .28em);
  background-repeat: no-repeat;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 16px; }
.hero-note { font-size: 14px; color: var(--muted); }

/* 첫 화면 프레임 — 벽에 붙인 사진처럼 살짝 기울여 둔다 */
.hero-demo .demo-stage .strip-frame {
  rotate: -1.6deg;
  transition: rotate .35s ease;
}
.hero-demo .demo-stage:hover .strip-frame { rotate: 0deg; }

/* ───────── 네컷 프레임 (앱의 실제 규격) ─────────
   FrameRenderer.Metrics: 바깥 0.09 · 간격 0.045 · 로고띠 0.22 ·
   날짜띠 0.13 · 글자여백 0.055 (모두 셀 짧은 변 기준) ×
   FrameLayout.chromeScale(배치별 배수) · topTrim(세로4컷 0.55).
   그 값을 프레임 폭 대비 %로 환산해 cqw로 넣었다.
   숫자를 다시 뽑으려면 Design/MakeFrameSpec.py의 measure()를 쓸 것.
   js/main.js의 METRICS와 같은 표다 — 한쪽만 고치면 저장 결과가 어긋난다. */

/* 폭은 **배치마다 따로** 잡는다. 배치마다 비율이 크게 달라서
   (세로4컷 1:3.09, 가로2컷 1:0.78) 같은 폭을 주면 어떤 것은 화면을 넘고
   어떤 것은 우표만 해진다. */
.strip-frame {
  container-type: inline-size;
  width: var(--frame-w);
  margin-inline: auto;
}
.strip-frame[data-layout="single"] { --frame-w: clamp(200px, 62vw, 290px); }
.strip-frame[data-layout="pair2"]  { --frame-w: clamp(240px, 78vw, 400px); }
.strip-frame[data-layout="strip2"] { --frame-w: clamp(190px, 56vw, 235px); }
.strip-frame[data-layout="strip4"] { --frame-w: clamp(148px, 42vw, 168px); }
.strip-frame[data-layout="grid4"]  { --frame-w: clamp(220px, 72vw, 330px); }
.strip-frame[data-layout="grid6"]  { --frame-w: clamp(205px, 64vw, 255px); }

/* 배치를 바꿔도 **화면이 움직이지 않게** 높이가 고정된 무대에 얹는다.
   무대 높이는 가장 키가 큰 세로4컷에 맞춰 계산한다(비율 3.0886을 폭에 곱한 것).
   숫자를 손으로 적지 않고 위 clamp를 그대로 곱하므로, 폭을 바꾸면 무대도 따라온다. */
.demo-stage {
  height: calc(3.0886 * clamp(148px, 42vw, 168px));
  display: grid;
  place-items: center;
}

.strip {
  display: flex; flex-direction: column;
  aspect-ratio: var(--ar);
  /* 위 여백은 topTrim이 있는 배치(세로4컷)만 좌우와 다르다 */
  padding: var(--padt, var(--pad)) var(--pad) var(--padb);
  border-radius: 6px;
  background: var(--frame-bg);
  color: var(--frame-fg);
  box-shadow: var(--shadow);
  transition: background .35s ease, color .35s ease;
}

/* 세로 4컷 — 칸 4:3, 전체 1:3.09 (topTrim 0.55 — 위를 덜어 아래로) */
.strip-frame[data-layout="strip4"] {
  --ar: .32378;
  --padt: 2.676cqw; --pad: 5.947cqw; --padb: 6.542cqw;
  --sp: 2.974cqw;   --inset: 3.634cqw;
  --band-date: 8.590cqw;  --band-logo: 14.537cqw;  --band-gap: 3.271cqw;
  --fs-date: 4.956cqw;    --fs-logo: 5.617cqw;
  --cols: 1;  --cell-ar: 4 / 3;
}

/* 2 × 2 격자 — 칸 1:1, 전체 1:1.16 */
.strip-frame[data-layout="grid4"] {
  --ar: .86107;
  --pad: 4.045cqw;  --padb: 2.225cqw;
  --sp: 2.022cqw;   --inset: 2.472cqw;
  --band-date: 5.843cqw;  --band-logo: 9.888cqw;  --band-gap: 2.225cqw;
  --fs-date: 3.371cqw;    --fs-logo: 3.820cqw;
  --cols: 2;  --cell-ar: 1 / 1;
}

/* 세로 2컷 — 칸 4:3 두 개가 위아래로, 전체 1:1.68 (chromeScale 0.85) */
.strip-frame[data-layout="strip2"] {
  --ar: .59539;
  --pad: 5.147cqw;  --padb: 2.831cqw;
  --sp: 2.573cqw;   --inset: 3.145cqw;
  --band-date: 7.434cqw;  --band-logo: 12.581cqw;  --band-gap: 2.831cqw;
  --fs-date: 4.289cqw;    --fs-logo: 4.861cqw;
  --cols: 1;  --cell-ar: 4 / 3;
}

/* 3 × 2 격자(6컷) — 칸 1:1 여섯, 전체 1:1.63 */
.strip-frame[data-layout="grid6"] {
  --ar: .61312;
  --pad: 4.045cqw;  --padb: 2.225cqw;
  --sp: 2.022cqw;   --inset: 2.472cqw;
  --band-date: 5.843cqw;  --band-logo: 9.888cqw;  --band-gap: 2.225cqw;
  --fs-date: 3.371cqw;    --fs-logo: 3.820cqw;
  --cols: 2;  --cell-ar: 1 / 1;
}

/* 한 장 — 칸 3:4(세로로 긴 사진), 전체 1:1.51 (chromeScale 0.65) */
.strip-frame[data-layout="single"] {
  --ar: .66343;
  --pad: 5.237cqw;  --padb: 2.880cqw;
  --sp: 0cqw;       --inset: 3.201cqw;
  --band-date: 7.565cqw;  --band-logo: 12.802cqw; --band-gap: 2.880cqw;
  --fs-date: 4.364cqw;    --fs-logo: 4.947cqw;
  --cols: 1;  --cell-ar: 3 / 4;
}

/* 가로 2컷 — 칸 3:4 두 개가 나란히, 전체 1:0.78 (chromeScale 0.65) */
.strip-frame[data-layout="pair2"] {
  --ar: 1.27473;
  --pad: 2.726cqw;  --padb: 1.499cqw;
  --sp: 1.363cqw;   --inset: 1.666cqw;
  --band-date: 3.937cqw;  --band-logo: 6.663cqw;  --band-gap: 1.499cqw;
  --fs-date: 2.271cqw;    --fs-logo: 2.574cqw;
  --cols: 2;  --cell-ar: 3 / 4;
}

/* 배치마다 쓰는 칸 수가 다르다. 칸은 HTML에 여섯 다 두고 남는 것을 감춘다 —
   자바스크립트가 막혀도 기본 배치(세로4컷)는 제대로 보이게 하려는 것이다. */
.strip-frame[data-layout="single"] .cell:nth-child(n+2) { display: none; }
.strip-frame[data-layout="pair2"]  .cell:nth-child(n+3),
.strip-frame[data-layout="strip2"] .cell:nth-child(n+3) { display: none; }
.strip-frame[data-layout="strip4"] .cell:nth-child(n+5),
.strip-frame[data-layout="grid4"]  .cell:nth-child(n+5) { display: none; }

.strip-date, .strip-logo {
  margin: 0;
  /* 글자 여백은 바깥 테두리보다 좁다 — 칸보다 넓게 퍼진다 */
  margin-inline: calc(var(--inset) - var(--pad));
  display: flex; align-items: center;
  white-space: nowrap;
  /* 날짜와 로고는 **그림보다 나중에** 그려야 한다. 앱의 FrameRenderer도 같은 순서다 —
     그러지 않으면 비스타 창가의 아치가 날짜를 덮는다. */
  position: relative; z-index: 1;
}
.strip-date {
  height: var(--band-date);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--fs-date);
  letter-spacing: .04em;
  opacity: .82;
}
.strip-logo {
  height: var(--band-logo);
  margin-top: var(--band-gap);
  justify-content: center;
  font-size: var(--fs-logo);
  font-weight: 700; letter-spacing: .22em;
  opacity: .9;
}

.strip-cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--sp);
}

.cell {
  aspect-ratio: var(--cell-ar);
  border-radius: 2px;
  background: var(--g, linear-gradient(140deg, #C9BCA8, #EDE4D4));
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.cell > img.shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.cell.is-empty {
  background: color-mix(in srgb, var(--frame-fg) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--frame-fg) 32%, transparent);
}
/* 프레임 폭이 180px 남짓이라 cqw 값이 작다. 3cqw면 6px도 안 돼 안 읽힌다. */
.who {
  font-size: 7cqw; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  letter-spacing: .02em;
}
.cell.is-empty .who { color: var(--frame-fg); opacity: .55; text-shadow: none; }

/* 프레임 색 6종 — FrameModels.swift의 freeThemes */
.strip[data-theme="black"]    { --frame-bg: #111111; --frame-fg: #FFFFFF; }
.strip[data-theme="white"]    { --frame-bg: #FAFAFA; --frame-fg: #111111; }
.strip[data-theme="ivory"]    { --frame-bg: #EFE9DD; --frame-fg: #3A352C; }
.strip[data-theme="charcoal"] { --frame-bg: #3A3A3C; --frame-fg: #F2F2F2; }
.strip[data-theme="navy"]     { --frame-bg: #1C2A3A; --frame-fg: #F2F2F2; }
.strip[data-theme="clay"]     { --frame-bg: #8C6A5D; --frame-fg: #FDF8F4; }

/* ───────── 필름 마키 — 첫 화면 아래를 가로지르는 미니 네컷 행렬 ─────────
   순수 CSS 애니메이션이다. 내용을 두 벌 이어 붙이고 절반만큼 밀면
   끝없이 흐르는 것처럼 보인다. '움직임 줄이기'에서는 멈춘 채 보여준다. */

.film-marquee {
  overflow: hidden;
  padding: clamp(20px, 3vw, 34px) 0;
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
}
.film-track {
  display: flex; gap: 22px; width: max-content;
  animation: film-roll 46s linear infinite;
}
.film-marquee:hover .film-track { animation-play-state: paused; }
@keyframes film-roll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .film-track { animation: none; }
}

.mini-strip {
  flex: 0 0 auto;
  width: 68px;
  padding: 6px 6px 4px;
  border-radius: 4px;
  background: var(--fb, #EFE9DD);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.mini-strip:nth-child(odd)  { rotate: -2deg; }
.mini-strip:nth-child(even) { rotate: 1.6deg; translate: 0 4px; }
.mini-strip i {
  display: block; aspect-ratio: 4 / 3; margin-bottom: 4px;
  border-radius: 1px; background: var(--g);
}
.mini-strip b {
  display: block; text-align: center;
  font-size: 5px; font-weight: 700; letter-spacing: .2em;
  color: var(--ff, #3A352C); opacity: .75;
  padding-block: 2px 1px;
}

/* ───────── 체험 스튜디오 (어두운 무대) ─────────
   여기만 페이지 안에서 톤을 뒤집는다 — 사진 부스 안에 들어온 느낌.
   페이지의 밝게/어둡게와 무관하게 늘 어둡다.                       */

.studio {
  position: relative;
  background: var(--studio-bg);
  color: var(--studio-fg);
  overflow: hidden;
}
.studio::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .07; pointer-events: none;
}
.studio .sec-title, .studio h2 { color: var(--studio-fg); }
.studio .sec-sub { color: var(--studio-dim); }

.studio-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  position: relative;
}
/* min-width:auto 사슬을 끊는다. 그냥 두면 필터 줄(칩 13개 ≈ 830px)의
   최소 폭이 칸을 밀어내 옆 프레임 위까지 뻗는다(실제로 겹쳤다).
   0으로 눌러야 줄이 칸 폭에 묶이고 안에서 가로 스크롤이 된다. */
.studio-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 모드 고르기 */
.booth-modes { display: flex; flex-wrap: wrap; gap: 10px; }

.studio .btn-ghost { color: var(--studio-fg); border-color: var(--studio-line); }
.studio .btn-ghost:hover { border-color: var(--studio-dim); }

.booth-note { font-size: 14px; color: var(--studio-dim); margin-top: 14px; }
.booth-note strong { color: var(--studio-fg); font-weight: 600; }

.booth-msg { font-size: 15px; margin-top: 10px; color: var(--apricot); min-height: 1.5em; }

/* 필터 줄 — 옆으로 민다 */
.filter-row {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 6px 2px 10px;
  scrollbar-width: thin;
}
.filter-chip {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--studio-dim); font-family: inherit; font-size: 12px;
}
.filter-chip i {
  display: block; width: 56px; height: 56px; border-radius: 10px;
  background-image: linear-gradient(150deg, #F6C89A, #C97A5E 55%, #4E7C99);
  filter: var(--f, none);
  border: 2px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.filter-chip:hover i { transform: translateY(-2px); }
.filter-chip.is-on { color: var(--studio-fg); }
.filter-chip.is-on i { border-color: var(--studio-fg); }
.filter-chip .pro {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: var(--yellow);
}

/* 스튜디오 안의 조작 라벨/스와치 재사용 */
.studio .ctl-label { color: var(--studio-dim); }
.studio .chip {
  background: transparent; color: var(--studio-fg); border-color: var(--studio-line);
}
.studio .chip:hover { border-color: var(--studio-dim); }
.studio .chip.is-on { background: var(--studio-fg); color: var(--studio-bg); border-color: var(--studio-fg); }
.studio .sw { border-color: color-mix(in srgb, var(--studio-fg) 30%, transparent); }
.studio .sw.is-on { box-shadow: 0 0 0 3px var(--studio-bg), 0 0 0 5px var(--studio-fg); }

/* 왼쪽 정렬하되 **stretch로 둔다** — flex-start로 두면 자식이 내용 폭만큼
   넓어져서, 필터 줄(칩 13개 ≈ 830px)이 칸을 넘어 옆의 프레임 위까지 뻗는다
   (실제로 겹쳤다). stretch면 줄이 칸 폭에 묶이고 안에서 가로 스크롤이 된다. */
.booth-ctls { display: grid; gap: 18px; margin-top: 20px; }
.booth-ctls .ctl { align-items: stretch; text-align: left; min-width: 0; }
.booth-ctls .filter-row { max-width: 100%; }
.booth-ctls .chips, .booth-ctls .swatches { flex-wrap: wrap; justify-content: flex-start; }

/* 결과 미리보기 무대 — 촬영 중에도 옆에서 채워진다 */
.booth-stage {
  display: grid; place-items: center;
  min-height: calc(3.0886 * clamp(148px, 42vw, 168px));
  padding: 10px 0;
}
.booth-stage .strip { box-shadow: 0 10px 40px rgba(0,0,0,.5); }
/* 체험용 프레임의 칸에 필터가 얹힌다 — 저장 결과와 같은 CSS 필터 */
.booth-stage .cell > img.shot { filter: var(--booth-filter, none); }

.booth-side-note { text-align: center; color: var(--studio-dim); font-size: 14px; margin-top: 10px; }

/* ───────── 이름 이야기 띠 ───────── */

.band {
  position: relative;
  background: var(--accent);
  color: var(--accent-on);
  padding: clamp(44px, 6.5vw, 72px) 0;
  text-align: center;
  overflow: hidden;
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .06; pointer-events: none;
}
.band-text { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.7; position: relative; }
.band-text strong { font-weight: 800; }

/* ───────── 구역 공통 ───────── */

.sec { padding: clamp(60px, 8vw, 112px) 0; }
.sec-alt { background: var(--bg-alt); }

/* 구역 번호 — 잡지의 챕터 표기처럼 */
.sec-eyebrow {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.sec-eyebrow::before, .sec-eyebrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5;
}
.sec-eyebrow.left { justify-content: flex-start; }
.sec-eyebrow.left::after { display: none; }
/* 아워모리는 번호표가 제목 없이 바로 그림과 붙는 유일한 구역이라 사이를 벌린다 */
#ourmory .sec-eyebrow { margin-bottom: clamp(28px, 5vw, 56px); }

.sec-title { text-align: center; margin-bottom: 14px; }
.sec-sub { text-align: center; color: var(--muted); margin-bottom: 44px; font-size: 18px; }
.sec-title + .cards-3, .sec-title + .cards-2 { margin-top: 44px; }
.sec-foot { text-align: center; color: var(--muted); margin-top: 36px; }

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) {
  .cards-3 { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; }
  .cards-2 { grid-template-columns: minmax(0, 1fr); }
}

.card, .region, .friend, .value, .premium {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover, .region:hover, .friend:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .region:hover, .friend:hover { transform: none; }
}
.card-ico {
  width: 44px; height: 44px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
}
.card-ico svg {
  width: 23px; height: 23px;
  fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.card h3 { margin-bottom: 12px; }
.card ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 16px; }
.card li { margin-bottom: 7px; }

/* ───────── 좌우 나눔 (아워모리) ───────── */

.split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-visual { order: -1; }
}
.split-copy h2 { margin-bottom: 18px; }

.ticks { list-style: none; margin: 20px 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--muted);
}
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2.4px solid var(--accent); border-bottom: 2.4px solid var(--accent);
  transform: rotate(-45deg);
}
.ticks.two-col { columns: 2; column-gap: 28px; }
@media (max-width: 640px) { .ticks.two-col { columns: 1; } }

/* ───────── 지역 프레임 ───────── */

.region { padding: 0; overflow: hidden; }
.scene { width: 100%; height: auto; display: block; }
.region h3 { margin: 22px 28px 8px; }
.region p { margin: 0 28px 26px; color: var(--muted); font-size: 16px; }

/* ───────── 캐릭터 ───────── */

.friend { text-align: center; }
.friend img { width: 132px; height: 132px; margin: 0 auto 18px; transition: transform .3s ease; }
.friend:hover img { transform: translateY(-6px) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .friend:hover img { transform: none; } }
.friend h3 { margin-bottom: 10px; }
.friend .from {
  font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .02em;
}
.friend p { color: var(--muted); font-size: 16px; }

/* ───────── 약속 ───────── */

.value { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.value-ico {
  font-size: 26px; line-height: 1;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--bg-alt); border-radius: 14px;
}
.value h3 { margin-bottom: 8px; }
.value p { color: var(--muted); font-size: 16px; grid-column: 2; }
.value h3 { grid-column: 2; }
.value-ico { grid-row: span 2; }

/* ───────── 프레임 슬라이드 ───────── */

.rail-wrap { position: relative; margin-top: 40px; }

.rail {
  display: flex; gap: 20px;
  overflow-x: auto;
  /* mandatory + align:center 조합은 쓰지 않는다. 항목이 화면보다 좁으면
     여러 항목의 스냅 지점이 0으로 겹쳐, 밀어도 첫 칸으로 도로 끌려간다
     (실제로 단추를 눌러도 4px에서 안 움직였다).
     왼쪽 끝 기준 + proximity로 두면 손으로 민 자리를 존중한다. */
  scroll-snap-type: x proximity;
  scroll-padding-left: 4px;
  scroll-behavior: smooth;
  /* 고른 것을 감싸는 그림자가 잘리지 않게 위아래로 자리를 주고 되돌린다 */
  padding: 8px 4px 8px;
  margin-inline: -4px;
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }

.rail-item {
  flex: 0 0 clamp(260px, 78vw, 320px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 20px 26px;
  text-align: center;
}

/* 프레임마다 키가 달라서, 높이가 고정된 무대에 **가운데로** 얹는다.
   위쪽 정렬로 두면 2×2가 세로4컷 옆에서 붕 떠 보인다.
   무대 높이는 가장 키가 큰 프레임에 맞춘다 — 새 4종(생일·픽셀·90s·카툰)이
   기본 세로4컷 규격(1:3.09)이라 말풍선 팝(1:2.97)보다 크다. 말풍선 팝 기준으로
   두면 새 프레임의 아래가 무대를 넘어 제목 글자를 덮는다(실제로 겹쳤다). */
.design-stage {
  height: calc(3.0886 * clamp(150px, 44vw, 180px));
  display: grid; place-items: center;
  margin-bottom: 20px;
}

.rail-item h3 { margin-bottom: 8px; }
.rail-item p { color: var(--muted); font-size: 15px; }

.design-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  font-size: 12px; font-weight: 600; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  vertical-align: middle;
}
.design-tag.paid { background: var(--accent); color: var(--accent-on); }

.rail-btn {
  position: absolute; top: calc(50% - 40px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: pointer; font-size: 20px; line-height: 1;
  transition: opacity .18s ease;
}
.rail-btn.prev { left: -10px; }
.rail-btn.next { right: -10px; }
.rail-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) { .rail-btn { display: none; } }

.rail-hint { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* ───────── MAMORY 디자인 프레임 (분위기를 옮긴 그림) ─────────
   그림이 통째로 들어가는 프레임이다. 바깥 여백이 기본보다 넓어서
   (paddingScale 1.9 / 1.7) 전체 비율도 달라진다 — 그 값까지 반영했다.
   원본은 Models/FrameDesign.swift와 Rendering/FrameArtworks.swift.
   여기 있는 것은 **분위기를 옮긴 그림**이지 앱 렌더러의 출력 그대로는 아니다. */

/* 모리의 하루 — 세로4컷 · 무료 · paddingScale 1.9 → 전체 약 1:2.89 */
.strip-frame[data-layout="mori-day"] {
  /* 세로로 긴 프레임들은 **같은 폭**을 써야 한다.
     무대 높이를 그중 키가 큰 쪽에 맞춰 잡아 두었기 때문에, 여기만 넓히면
     무대를 넘겨 아래 제목과 겹친다(실제로 겹쳤다). */
  --frame-w: clamp(150px, 44vw, 180px);
  --ar: .34586;
  --pad: 10.207cqw; --padb: 5.614cqw;
  --sp: 2.686cqw;   --inset: 3.283cqw;
  --band-date: 7.760cqw;  --band-logo: 13.131cqw;  --band-gap: 5.614cqw;
  --fs-date: 4.477cqw;    --fs-logo: 5.074cqw;
  --cols: 1;  --cell-ar: 4 / 3;
  --frame-bg: #FAF3E6; --frame-fg: #4A4038;
}
/* 사진 칸 테두리 — 사진이 붙기 전에 깔아 두면 가장자리가 정돈돼 보인다 */
.strip-frame[data-layout="mori-day"] .cell {
  outline: .9cqw solid #D6C39F;
  outline-offset: -2cqw;
}
/* 좌우 여백에 흩뿌린 점 */
.strip-frame[data-layout="mori-day"] .strip-cells {
  position: relative;
}
/* 점은 **반지름을 직접 지정한 원**으로 그린다. 비율(45%)로 두면 칸이 세로로 길어서
   원이 아니라 길쭉한 막대가 된다. */
.strip-frame[data-layout="mori-day"] .strip-cells::before,
.strip-frame[data-layout="mori-day"] .strip-cells::after {
  content: ""; position: absolute; top: 4%; bottom: 4%; width: 2.4cqw;
  background-image: radial-gradient(circle 1.15cqw at 50% 50%, #E3D5B8 100%, transparent 0);
  background-size: 100% 14.5%;
}
.strip-frame[data-layout="mori-day"] .strip-cells::before { left: -6.4cqw; }
.strip-frame[data-layout="mori-day"] .strip-cells::after  { right: -6.4cqw; top: 8%; }

/* 모리는 첫 칸 오른쪽 위 모서리에 걸터앉는다.
   앱에서는 칸 오른쪽 위 모서리를 중심으로 셀 짧은 변의 0.46배 크기다. */
.strip-frame[data-layout="mori-day"] .strip-cells .cell:first-child { position: relative; }
.mori-sit {
  position: absolute; width: 42%; height: auto;
  left: 68%; top: -26%;
  transform: rotate(6deg);
  filter: drop-shadow(0 1px 2px rgba(74,64,56,.18));
}

/* 비스타 창가 — 2×2 · 무료 · paddingScale 1.7 → 전체 약 1:1.16 */
.strip-frame[data-layout="vista-window"] {
  --frame-w: clamp(220px, 72vw, 330px);
  --ar: .86552;
  --pad: 6.508cqw;  --padb: 3.579cqw;
  --sp: 1.914cqw;   --inset: 2.339cqw;
  --band-date: 5.530cqw;  --band-logo: 9.358cqw;  --band-gap: 3.579cqw;
  --fs-date: 3.190cqw;    --fs-logo: 3.616cqw;
  --cols: 2;  --cell-ar: 1 / 1;
  --frame-bg: #EAF2F5; --frame-fg: #3C4A52;
}
/* 창틀 — 칸 뒤에 깔리는 창턱과 위쪽 아치 */
.strip-frame[data-layout="vista-window"] .strip-cells {
  position: relative;
  isolation: isolate;
}
.strip-frame[data-layout="vista-window"] .strip-cells::before {
  content: ""; position: absolute; z-index: -1;
  inset: -3.2cqw;
  background: #C9DEE8;
  border: .9cqw solid #8FAFBF;
  border-radius: 4.6cqw;
}
/* 아치 — 창문 위를 둥글게 덮는다 */
.strip-frame[data-layout="vista-window"] .strip-cells::after {
  content: ""; position: absolute; z-index: -1;
  left: -3.2cqw; right: -3.2cqw; top: -12cqw; height: 14cqw;
  background: #C9DEE8;
  border: .9cqw solid #8FAFBF;
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* 창살 — 네 칸 사이 십자 */
.strip-frame[data-layout="vista-window"] .strip-cells .cell {
  outline: .8cqw solid #8FAFBF;
  outline-offset: 0;
}

/* 말풍선 팝 — 세로4컷 · 유료 · paddingScale 1.5 → 전체 약 1:2.97 */
.strip-frame[data-layout="speech-pop"] {
  --frame-w: clamp(150px, 44vw, 180px);
  --ar: .33623;
  --pad: 8.420cqw;  --padb: 4.631cqw;
  --sp: 2.807cqw;   --inset: 3.430cqw;
  --band-date: 8.108cqw;  --band-logo: 13.721cqw;  --band-gap: 4.631cqw;
  --fs-date: 4.678cqw;    --fs-logo: 5.302cqw;
  --cols: 1;  --cell-ar: 4 / 3;
  --frame-bg: #2B2A32; --frame-fg: #F5F1E8;
}
/* 칸 테두리는 번갈아 노랑·크림 */
.strip-frame[data-layout="speech-pop"] .cell {
  outline: 1.2cqw solid #F5F1E8; outline-offset: -2cqw;
}
.strip-frame[data-layout="speech-pop"] .cell:nth-child(odd) { outline-color: #F2B55C; }
/* 말풍선 — 칸마다 번갈아 왼쪽·오른쪽 위에. 셋째 칸은 비워 둔다(원본과 같다) */
.strip-frame[data-layout="speech-pop"] .cell { position: relative; }
/* 원본 치수: 폭 unit×0.46, 높이 unit×0.20 (unit은 셀 짧은 변 = 셀 높이).
   셀 폭으로 환산하면 폭 34.5%, 높이는 셀 높이의 20%다. */
.bubble {
  position: absolute; top: 5%; width: 34.5%; height: 20%;
  border-radius: 46% / 50%;
  background: #F5F1E8;
  box-shadow: 0 0 0 .8cqw rgba(58,51,44,.25);
}
.bubble::after {
  content: ""; position: absolute; left: 24%; bottom: -30%;
  border: .8cqw solid transparent;
  border-top: 1.8cqw solid #F5F1E8;
}
.bubble.left  { left: 3%; }
.bubble.right { right: 3%; }
.bubble.warm  { background: #F2B55C; }
.bubble.warm::after { border-top-color: #F2B55C; }
/* 마지막 칸 오른쪽 아래에 리브가 빼꼼 */
.riv-peek {
  position: absolute; width: 40%; height: auto;
  right: -14%; bottom: -12%;
  transform: rotate(-6deg);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

/* 여름 바다 — 2×2 · 무료 · paddingScale 1.9 + 아래 그림 띠 0.62 → 전체 약 1:1.41
   그림 띠가 프레임 맨 아래에 통째로 붙는 첫 프레임이다. 그 높이만큼
   --padb를 키워 글자와 칸이 띠를 침범하지 않게 막는다.
   원본: Rendering/FrameArtworks.swift의 SummerSeaArtwork */
.strip-frame[data-layout="summer-sea"] {
  --frame-w: clamp(210px, 66vw, 280px);
  --ar: .70745;
  --pad: 7.164cqw;
  /* 아래 여백 = 보통 여백(3.940) + 그림 띠(25.975) */
  --padb: 29.915cqw;
  --sp: 1.885cqw;   --inset: 2.304cqw;
  --band-date: 5.446cqw;  --band-logo: 9.217cqw;  --band-gap: 3.940cqw;
  --fs-date: 3.142cqw;    --fs-logo: 3.561cqw;
  --cols: 2;  --cell-ar: 1 / 1;
  --frame-bg: #F4EDDB; --frame-fg: #3A332C;
}
.strip-frame[data-layout="summer-sea"] .strip { position: relative; }
.strip-frame[data-layout="summer-sea"] .cell {
  outline: .545cqw solid rgba(78, 124, 153, .4); outline-offset: -1.257cqw;
}

/* 맨 위 물결 — 수면을 위에서 본 띠. 아래로 물방울이 늘어진다.
   날짜보다 **먼저** 그린다(.strip-date가 z-index 1로 위에 온다). */
.sea-top {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1.95cqw;
  background: #4E7C99;
  border-radius: 6px 6px 0 0;
}
/* 늘어진 물방울 다섯 — 원본의 bumps와 같은 개수다 */
.sea-top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2cqw;
  background-image: radial-gradient(ellipse 40% 100% at 50% 0, #4E7C99 99%, transparent 0);
  background-size: 20% 100%;
}

/* 좌우 여백 — 해초가 줄기를 세우고 잎을 번갈아 뻗는다.
   **잎 폭을 여백 안으로 묶어 둔다.** 넘기면 안쪽 절반이 사진에 가려 잘려 보인다
   (앱에서 겪은 것과 같은 문제라 여기서도 여백 너비에서 크기를 뽑았다). */
.strip-frame[data-layout="summer-sea"] .strip-cells { position: relative; }
.sea-kelp {
  position: absolute; top: 1%; bottom: 1%; width: 5.4cqw; z-index: 0;
  background-image:
    radial-gradient(ellipse 42% 8% at 84% 30%, #4E8C86 99%, transparent 0),
    radial-gradient(ellipse 42% 8% at 16% 66%, rgba(78, 140, 134, .55) 99%, transparent 0),
    linear-gradient(to right, transparent 45%, rgba(78, 140, 134, .55) 45% 55%, transparent 55%);
  background-size: 100% 12.5%;
}
.sea-kelp.l { left: -6.28cqw; }
.sea-kelp.r { right: -6.28cqw; }

/* 칸 소품 — 프레임 **바깥을 향한** 모서리에만 둔다.
   안쪽 모서리에 두면 격자에서 위아래 칸의 소품이 한 점에 포개진다. */
.sea-prop { position: absolute; width: 20%; aspect-ratio: 1; }
.sea-prop.tl { left: 3%; top: 4%; }
.sea-prop.tr { right: 3%; top: 4%; }
.sea-prop.bl { left: 3%; bottom: 4%; }
.sea-prop.br { right: 3%; bottom: 4%; }
.sea-prop.star {
  background: #FFCB6B;
  clip-path: polygon(50% 0, 62% 36%, 100% 37%, 69% 60%, 81% 97%, 50% 74%, 19% 97%, 31% 60%, 0 37%, 38% 36%);
  rotate: -14deg;
}
.sea-prop.star.pink { background: #E8756B; rotate: 28deg; }
/* 조개 — 부챗살 있는 반원 */
.sea-prop.shell {
  aspect-ratio: 2 / 1;
  background:
    conic-gradient(from -90deg at 50% 100%,
      #F6A99A 0 22%, #FBC4B8 22% 39%, #F6A99A 39% 61%, #FBC4B8 61% 78%, #F6A99A 78% 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* 물고기 — 몸통 하나에 꼬리 하나 */
.sea-prop.fish {
  width: 22%; aspect-ratio: 2 / 1;
  background: #FFCB6B;
  border-radius: 50%;
}
.sea-prop.fish::after {
  content: ""; position: absolute; right: -30%; top: 50%;
  width: 38%; height: 130%;
  transform: translateY(-50%);
  background: #FFCB6B;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* 맨 아래 그림 띠 — 바다와 모래, 그 위에 모래성·파라솔·슬리퍼.
   **하늘은 칠하지 않는다.** 프레임 바탕(크림)이 그대로 하늘이 되어야
   띠가 프레임에 스며든다. 하늘색을 칠하면 띠 위에 사각형 경계가 생긴다. */
.sea-beach {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 25.975cqw;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
}
/* 바다 — 수평선 34%에서 물가 60%까지.
   **수평선은 곧은 선이 아니라 물결이다.** 곧게 두면 크림 바탕 위에 파란 사각형을
   붙여 놓은 것처럼 보인다(앱에서 하늘을 칠했다가 같은 문제를 겪었다).
   가면(mask)으로 위쪽을 얕은 호로 파낸다. **깊게 파지 말 것** — 원본의 물결 진폭은
   띠 높이의 3%뿐이라, 더 파면 부챗살처럼 보이고 물결로 안 읽힌다. */
.sea-beach::before {
  content: ""; position: absolute; left: 0; right: 0; top: 33%; height: 27%;
  background: #4E7C99;
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 99%, transparent 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 25% 4%, 100% 96%;
  -webkit-mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 99%, transparent 0), linear-gradient(#000 0 0);
  mask-size: 25% 4%, 100% 96%;
  mask-position: 0 0, 0 100%;
  mask-repeat: repeat-x, no-repeat;
}
/* 모래 — 물가가 완만하게 굽고, 그 선을 따라 흰 포말이 남는다 */
.sea-beach::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 57%; bottom: 0;
  background: #EFD9AE;
  border-radius: 46% 46% 0 0 / 14% 14% 0 0;
  border-top: .4cqw solid rgba(255, 255, 255, .7);
}
.sea-beach > span { position: absolute; bottom: 10%; z-index: 1; }
/* 모래성 — 가운데 탑이 가장 높고 양옆이 낮다 */
.sea-castle {
  left: 17%; translate: -50% 0;
  width: 3.71cqw; height: 8.83cqw;
  background: #E0C18A;
  border-radius: .4cqw .4cqw 0 0;
}
.sea-castle::before, .sea-castle::after {
  content: ""; position: absolute; bottom: 0;
  width: 3.71cqw; height: 5.48cqw;
  background: #E0C18A;
  border-radius: .4cqw .4cqw 0 0;
}
.sea-castle::before { right: 100%; margin-right: 1.77cqw; }
.sea-castle::after  { left: 100%;  margin-left: 1.77cqw; }
/* 파라솔 — 기둥이 살짝 기울고 지붕은 부챗살로 색이 번갈아 든다 */
.sea-parasol {
  left: 50%; translate: -50% 0;
  width: .54cqw; height: 11.95cqw;
  background: #355E76;
  rotate: -6deg;
}
.sea-parasol::after {
  content: ""; position: absolute; left: 50%; top: -.4cqw;
  width: 12.43cqw; height: 6.22cqw;
  transform: translateX(-50%);
  background:
    conic-gradient(from -90deg at 50% 100%,
      #E8756B 0 16.7%, #FFF9EF 16.7% 33.3%, #E8756B 33.3% 50%,
      #FFF9EF 50% 66.7%, #E8756B 66.7% 83.3%, #FFF9EF 83.3% 100%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* 슬리퍼 두 짝 — 원본은 폭 size×0.68, 높이 size×1.5짜리 타원 둘이 ±size×0.62에 놓인다.
   모래에 놓인 것이라 바닥선(bottom 10%)보다 조금 아래까지 내려온다. */
.sea-flops {
  left: 81.46cqw; translate: -50% 0; bottom: .7cqw;
  width: 3.886cqw; height: 8.57cqw;
  background: #FFCB6B;
  border-radius: 50%;
  rotate: -8deg;
}
.sea-flops::after {
  content: ""; position: absolute; left: 100%; bottom: 0;
  margin-left: 3.194cqw;
  width: 3.886cqw; height: 8.57cqw;
  background: #F6A99A;
  border-radius: 50%;
  rotate: 12deg;
}

/* ── 새 프레임 4종 (2026-08-15에 앱에 들어간 것) ──
   전부 기본 규격(strip4)을 그대로 쓰는 디자인이라 배치 수치는 물려받고
   바탕과 장식만 더한다. .in-rail이 슬라이드용 폭을 정한다. */

.strip-frame.in-rail { --frame-w: clamp(150px, 44vw, 180px); }
.strip-frame.in-rail .strip { position: relative; }

/* 생일 — 무료 · 갈랜드와 축하 문구. 원본: BirthdayArtwork */
.strip-frame.design-birthday { --frame-bg: #FFF6EA; --frame-fg: #4A3B2E; }
/* 갈랜드 — 깃발 삼각형이 맨 위 가장자리에 줄지어 걸린다.
   **날짜 글자 위에서 끝나야 한다.** 세로4컷은 topTrim으로 머리가 얇아서
   (위 여백 2.7cqw + 날짜 글자 위 끝 ≈ 4.5cqw) 깃발을 두껍게 걸면
   날짜를 그대로 가로지른다(실제로 겹쳤다). */
.strip-frame.design-birthday .strip::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: .5cqw; height: 3.2cqw;
  background-image:
    conic-gradient(from 122deg at 50% 0, #E8756B 0 116deg, transparent 0),
    conic-gradient(from 122deg at 50% 0, #F2B55C 0 116deg, transparent 0),
    linear-gradient(to bottom, rgba(74,59,46,.4) 0 .4cqw, transparent 0);
  background-size: 16% 92%, 16% 92%, 100% 100%;
  background-position: 0% 15%, 8% 15%, 0 0;
  background-repeat: repeat-x;
}
/* 축하 문구 — 로고 띠 위 가운데 (앱은 4개 언어로 그린다).
   글자 위 끝이 마지막 사진 아래(padb + 로고띠 + 띠간격)를 넘지 않게
   바닥과 크기를 함께 잡는다 — 넘으면 사진에 얹힌다(실제로 걸렸다). */
.bday-title {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--padb) + var(--band-logo) * .98);
  text-align: center;
  font-size: 3.4cqw; font-weight: 800; letter-spacing: .3em;
  color: #C97A5E;
}
/* 색종이 — 여백에 점점이 */
.strip-frame.design-birthday .strip::after {
  content: ""; position: absolute; inset: 8% 1.4% 12%;
  background-image:
    radial-gradient(circle 1cqw at 12% 24%, #F2B55C 99%, transparent 0),
    radial-gradient(circle .8cqw at 88% 36%, #E8756B 99%, transparent 0),
    radial-gradient(circle .9cqw at 10% 62%, #7FA36B 99%, transparent 0),
    radial-gradient(circle .8cqw at 90% 74%, #F2B55C 99%, transparent 0);
  pointer-events: none;
}

/* 픽셀 — 유료 · 8비트 아케이드. 원본: PixelArcadeArtwork (글자까지 5×7 도트) */
.strip-frame.design-pixel { --frame-bg: #171234; --frame-fg: #EDEBFF; }
/* 세 겹 테두리 + CRT 주사선 */
.strip-frame.design-pixel .strip {
  box-shadow: inset 0 0 0 1.4cqw #2A2159, inset 0 0 0 2.4cqw #5EF2C8,
              inset 0 0 0 3.2cqw #171234, var(--shadow);
}
.strip-frame.design-pixel .strip::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.05) 0 .55cqw, transparent .55cqw 2.2cqw);
  pointer-events: none;
}
.strip-frame.design-pixel .cell { outline: .8cqw solid #3B3566; outline-offset: -.8cqw; }
/* HUD — 날짜 띠 오른쪽의 목숨 하트 */
.pixel-hud {
  position: absolute; right: var(--inset); top: calc(var(--padt, var(--pad)) + var(--band-date) * .18);
  font-size: 4cqw; letter-spacing: .12em; color: #FF5E7A; z-index: 1;
}
/* 아케이드 글귀 — 로고 위 (번역하지 않는 낱말만 쓴다).
   생일 문구와 같은 규칙 — 사진 아래 선을 넘지 않는 크기로 둔다. */
.pixel-note {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--padb) + var(--band-logo) * .98);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 3.4cqw; font-weight: 700; letter-spacing: .24em;
  color: #5EF2C8;
}

/* 90s — 유료 · 캠코더 뷰파인더 + 영수증. 원본: NinetiesArtwork */
.strip-frame.design-90s { --frame-bg: #101010; --frame-fg: #F2E8D8; }
.strip-frame.design-90s .cell { outline: .5cqw solid #3A3A3A; outline-offset: -.5cqw; }
/* REC — 날짜 맞은편에 빨간 점과 글자 (원본도 오른쪽으로 모았다) */
.rec-badge {
  position: absolute; right: var(--inset); top: calc(var(--padt, var(--pad)) + var(--band-date) * .22);
  display: flex; align-items: center; gap: 1.4cqw;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 3.6cqw; font-weight: 700; letter-spacing: .1em;
  color: #FF4B3A; z-index: 1;
}
.rec-badge::before {
  content: ""; width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  background: #FF4B3A;
  animation: rec-blink 1.4s steps(1) infinite;
}
@keyframes rec-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-badge::before { animation: none; } }
/* 영수증 — 아래 띠 위쪽에 크림색 종이와 바코드.
   위 끝이 마지막 사진(padb + 로고띠 + 띠간격)에 닿지 않고,
   아래 끝이 MAMORY 글자(띠 가운데)를 덮지 않는 사이에 끼운다. */
.receipt {
  position: absolute; left: 18%; right: 18%;
  bottom: calc(var(--padb) + var(--band-logo) * .74);
  height: 7cqw;
  background: #F6EFDF;
  clip-path: polygon(0 6%, 4% 0, 8% 6%, 12% 0, 16% 6%, 20% 0, 24% 6%, 28% 0, 32% 6%, 36% 0,
    40% 6%, 44% 0, 48% 6%, 52% 0, 56% 6%, 60% 0, 64% 6%, 68% 0, 72% 6%, 76% 0,
    80% 6%, 84% 0, 88% 6%, 92% 0, 96% 6%, 100% 0, 100% 100%, 0 100%);
}
.receipt::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 34%; bottom: 22%;
  background-image: repeating-linear-gradient(
    to right, #33291D 0 .7cqw, transparent .7cqw 1.5cqw, #33291D 1.5cqw 1.9cqw, transparent 1.9cqw 3cqw);
}

/* 카툰 — 유료 · 만화책 한 쪽. 원본: CartoonArtwork */
.strip-frame.design-cartoon { --frame-bg: #FFFDF5; --frame-fg: #1F1B16; }
.strip-frame.design-cartoon .strip { box-shadow: inset 0 0 0 1.2cqw #1F1B16, var(--shadow); }
/* 칸마다 잉크 테두리 + 하드 그림자 */
.strip-frame.design-cartoon .cell {
  outline: 1cqw solid #1F1B16; outline-offset: 0;
  box-shadow: 1.6cqw 1.6cqw 0 rgba(31,27,22,.85);
  overflow: visible;              /* 그림자가 칸 밖에 있다 */
}
.strip-frame.design-cartoon .cell > * { border-radius: 0; }
/* 날짜 명패 — 노랑 상자. 앱도 명패 안에 날짜를 넣는다(기울이지 않는다) */
.strip-frame.design-cartoon .strip-date {
  background: #FFD34D;
  box-shadow: 1cqw 1cqw 0 #1F1B16, inset 0 0 0 .6cqw #1F1B16;
  padding-inline: 2cqw;
  margin-right: auto;
  opacity: 1;
}
/* 하프톤 점무늬 — 오른쪽 위 구석 */
.strip-frame.design-cartoon .strip::before {
  content: ""; position: absolute; right: 0; top: 0; width: 34%; height: 12%;
  background-image: radial-gradient(circle 1cqw at 50% 50%, rgba(232,117,107,.5) 99%, transparent 0);
  background-size: 3.4cqw 3.4cqw;
  pointer-events: none;
}
/* POW 별 — 첫 칸 모서리에 걸친다 */
.toon-pow {
  position: absolute; left: -4%; top: -5%; width: 26%; aspect-ratio: 1; z-index: 1;
  background: #FFD34D;
  clip-path: polygon(50% 0, 61% 20%, 82% 8%, 76% 30%, 100% 34%, 82% 50%, 100% 66%,
    76% 70%, 82% 92%, 61% 80%, 50% 100%, 39% 80%, 18% 92%, 24% 70%, 0 66%,
    18% 50%, 0 34%, 24% 30%, 18% 8%, 39% 20%);
  filter: drop-shadow(.8cqw .8cqw 0 #1F1B16);
}

/* ───────── 미리보기 조작 ───────── */

.demo-controls {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 22px; margin-top: 26px;
}
.ctl { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ctl-label { font-size: 13px; color: var(--muted); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  min-height: 38px; padding: 8px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-chip);
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .mini-tag {
  font-size: 10px; font-weight: 700; vertical-align: super; margin-left: 2px;
  color: var(--accent);
}
.chip.is-on .mini-tag { color: inherit; }

/* 고른 것을 표시하는 링이 칩 바깥에 그려진다 — 잘리지 않게 자리를 준다
   (앱에서 겪은 것과 같은 문제. Metric.selectionRing 참고) */
.swatches { display: flex; gap: 10px; padding: 5px; }
/* 테두리를 글자색에서 뽑는다. 고정색으로 두면 '블랙' 칩이 어두운 바탕에서
   통째로 사라져 색이 다섯 개로 보인다. */
.sw {
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: var(--c);
  transition: box-shadow .18s ease, transform .18s ease;
}
.sw:hover { transform: scale(1.08); }
.sw.is-on {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text);
}

.demo-note { margin-top: 16px; text-align: center; font-size: 14px; color: var(--muted); }

/* 좁은 화면에서는 '배치'와 '프레임 색'을 위아래로 쌓는다.
   나란히 두면 색 동그라미 여섯 개가 화면 밖으로 밀려난다. */
@media (max-width: 560px) {
  .demo-controls { flex-direction: column; gap: 18px; }
}

/* ───────── 프리미엄 ───────── */

.premium { padding: clamp(32px, 5vw, 52px); text-align: center; }
.premium h2 { margin-bottom: 14px; }
/* .lead에 걸린 max-width가 글상자를 왼쪽에 붙여 놓는다. text-align:center는
   그 좁은 상자 **안에서만** 가운데라, 제목과 축이 어긋나 보인다. 상자째 가운데로 민다. */
.premium .lead { margin-inline: auto; }
.premium .ticks { text-align: left; display: inline-block; margin: 28px 0; }
.premium-foot { color: var(--muted); font-size: 16px; }

/* ───────── 받기 ───────── */

.download h2 { margin-bottom: 26px; }
.download .hero-note { margin-top: 18px; }

/* ───────── 문의 · 의견 보내기 ───────── */

.contact-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 44px);
}
.contact-form { display: grid; gap: 18px; margin-top: 26px; text-align: left; }

/* 출시 알림은 한 줄이면 된다 — 이메일 한 칸과 단추뿐 */
.notify-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin: 26px 0 14px;
}
.notify-form input[type="email"] { flex: 1 1 260px; max-width: 340px; }
.notify-form .form-msg { flex: 1 0 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 문의 페이지 머리 */
.page-top { padding-top: clamp(40px, 6vw, 72px); }
.page-title { font-size: clamp(30px, 4.6vw, 44px); margin-bottom: 18px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 14px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }

.contact-form input,
.contact-form select,
.contact-form textarea,
.notify-form input[type="email"] {
  min-height: 44px; padding: 11px 14px;
  font-family: inherit; font-size: 16px;   /* 16px 미만이면 아이폰이 화면을 확대한다 */
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-btn);
}
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; }
.contact-form textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus,
.notify-form input[type="email"]:focus {
  border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 0;
}
.contact-form button { justify-self: start; }

/* 벌레잡이 칸 — 사람 눈에는 안 보이고 스팸 로봇만 채운다.
   비어 있지 않으면 Netlify가 그 제출을 버린다. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 13px; color: var(--muted); margin-top: -4px; }

/* ───────── 동의·고지 ─────────
   법에서 요구하는 문구라 지우면 안 된다. 눈에 띄되 폼을 압도하지 않게
   테두리만 두르고 글자를 작게 뒀다. 왼쪽 정렬을 강제하는 것은
   '곧 만나요' 구역이 가운데 정렬이라 그냥 두면 읽기 어려워서다. */

.consent {
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 12px 14px;
  text-align: left;
  display: grid;
  gap: 8px;
}

.consent-detail {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.consent-detail strong { color: var(--text); font-weight: 600; }

.consent-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}

/* 글자 첫 줄과 눈높이를 맞춘다. 기본값으로 두면 체크칸이 위로 떠 보인다. */
.consent-check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.consent-check strong { color: var(--text); font-weight: 600; }

.consent .form-note { margin-top: 0; }
.form-msg {
  margin-top: 4px; padding: 14px 16px; border-radius: var(--r-btn);
  font-size: 15px; display: none;
}
.form-msg.is-on { display: block; }
.form-msg.ok   { background: color-mix(in srgb, #4E7C99 16%, transparent); color: var(--text); }
.form-msg.bad  { background: color-mix(in srgb, #C0553F 16%, transparent); color: var(--text); }

/* ───────── 출시 예정 표시 ───────── */

.soon-badge {
  display: inline-block; padding: 3px 10px; margin-left: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; vertical-align: middle;
  background: var(--accent); color: var(--accent-on);
}
.soon-note { color: var(--muted); font-size: 15px; margin-top: 16px; }

/* ───────── 바닥 ───────── */

.foot {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 48px 0 40px;
  font-size: 15px;
}
.foot-inner { display: grid; gap: 26px; }
@media (min-width: 760px) {
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-copy { grid-column: 1 / -1; }
}
.foot-brand { font-weight: 700; letter-spacing: .06em; margin-bottom: 4px; }
.foot-links p { margin-bottom: 6px; }
/* 링크가 셋이라 좁은 화면에서 줄이 바뀐다. 가운뎃점이 줄 첫머리에 혼자 남지 않게
   앞 링크와 한 덩어리로 묶는다. */
.foot-nav .sep { color: var(--muted); margin-inline: 2px; }
.foot-nav a { white-space: nowrap; }
.foot-copy { padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }

/* ───────── 나타나는 움직임 ───────── */

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .chip, .sw, .strip { transition: none; }
}