/* =============================================================================
   화면별 레이아웃 — v4 시안의 페이지 안 <style> 블록을 한 파일로 모은 것

   시안은 화면 하나가 파일 하나라 스타일이 그 파일 안에 있었다. 여기서는 셸이
   하나(`page.html`)이므로 한 파일로 모은다. **공용이 될 만한 것은 여기 두지 않고
   filme-p.css 로 올린다** — 이 파일은 "그 화면에서만 쓰는 배치" 만 갖는다.

   순서는 화면 번호 순이다(01 랜딩 → 12 시작하기).
   ========================================================================== */

/* ── 01 랜딩 ──────────────────────────────────────────────────────────────── */
.hero {
  padding: 70px 0 10px;
}
.hero .in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero .d1 {
  margin-top: 16px;
}
.hero .lede {
  margin-top: 20px;
  max-width: 44ch;
}
.hero .cta {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 28px;
  align-items: center;
}
.hero .figs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 54px;
}
.kpi div {
  padding: 22px 20px;
}
.kpi div + div {
  border-left: 1px solid var(--line);
}
.kpi b {
  display: block;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink3);
}
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: flex-start;
}
.step .n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.step .n.app {
  background: var(--ink);
  color: #fff;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* 격자 칸의 **자동 최소 크기**는 min-content 라, 안에 든 이미지의 원본 폭이
   칸을 밀어낸다(390px 화면에서 칸이 390px 이 되어 가로 스크롤이 생겼다 — 실측).
   `min-width: 0` 이 그 바닥을 푼다. */
.split > * {
  min-width: 0;
}
.lst {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lst li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink2);
}
.lst li .ic {
  color: var(--pri);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
}
.lst li.no {
  color: var(--ink3);
}
.lst li.no .ic {
  color: var(--ink4);
}
.rule {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.rule .r1 {
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}
.rule :is(h3, h4) {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* 포스터 카드 폭은 앱과 같은 **126 고정**이다(`kContentCardWidth`) — 화면 폭으로
   계산하면 같은 포스터가 기기마다 달라져 "통일" 이 성립하지 않는다. */
.wkrail .wc {
  width: 126px;
  flex: none;
}

/* ── 02 홈 ────────────────────────────────────────────────────────────────── */
.band {
  padding-block: 24px 6px;
}
.hero-band {
  position: relative;
}
a.hero {
  position: relative;
  display: block;
  border-radius: var(--r20);
  overflow: hidden;
  aspect-ratio: 24/9;
  color: #fff;
  background: var(--mute);
  padding: 0;
}
a.hero > img,
a.hero > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a.hero .sc {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 15, 20, 0.86) 8%,
    rgba(11, 15, 20, 0.42) 52%,
    rgba(11, 15, 20, 0.08) 100%
  );
}
a.hero .bx {
  position: absolute;
  left: clamp(24px, 3vw, 48px);
  bottom: clamp(24px, 3vw, 44px);
  max-width: 52ch;
  z-index: 2;
}
a.hero h2 {
  margin: 12px 0 0;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1.1;
  text-shadow: var(--tsh);
}
a.hero p {
  margin: 11px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 44ch;
}
.near {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--sh1);
}
.nrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  color: inherit;
}
.nrow + .nrow {
  border-top: 1px solid var(--line2);
}
.nrow:hover {
  background: var(--paper);
  color: inherit;
}
.nrow .th {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: var(--r10);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.nrow .th > img,
.nrow .th > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nrow .nm {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.028em;
}
.nrow .wk {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink3);
}
.nrow .ds {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.nrow .ds b {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nrow .ds span {
  display: block;
  font-size: 11px;
  color: var(--ink4);
}
.near .mapside {
  position: relative;
  min-height: 334px;
  border-left: 1px solid var(--line);
}
.near .mapside .map {
  position: absolute;
  inset: 0;
}
.tmk {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: var(--r10);
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 5px 14px rgba(23, 29, 31, 0.26);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.tmk img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scrail .sccd {
  width: 298px;
  flex: none;
}
.pcrail .pc {
  width: 186px;
  flex: none;
}

/* ── 04 촬영지 상세 ─────────────────────────────────────────────────────────── */
.bc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0 0;
  font-size: 12.5px;
  color: var(--ink3);
  flex-wrap: wrap;
}
.bc a {
  color: var(--ink3);
}
.bc a:hover {
  color: var(--ink);
}
.ph1 {
  display: block;
  position: relative;
  border-radius: var(--r20);
  overflow: hidden;
  aspect-ratio: 21/9;
  background: var(--mute);
  margin-top: 14px;
}
.ph1 > img,
.ph1 > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph1 .tl {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.ph1 .nx {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 7px;
}
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.act {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.act .a1 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 15px;
  border-radius: var(--r12);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink2);
  box-shadow: var(--sh1);
}
.act a.a1:hover {
  background: var(--mute);
  color: var(--ink);
}
.body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 40px;
  align-items: start;
  padding-block: 34px 20px;
}
.sec2 {
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.sec2:first-child {
  border-top: 0;
  padding-top: 0;
}
.big {
  position: relative;
}
.big .cut {
  aspect-ratio: 3/2;
  border-radius: var(--r16);
}
.thumbs {
  display: flex;
  gap: 9px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.thumbs::-webkit-scrollbar {
  display: none;
}
.thumbs .t1 {
  width: 118px;
  flex: none;
  border-radius: var(--r8);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/2;
  background: var(--film);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.thumbs .t1.on {
  box-shadow: 0 0 0 2.5px var(--pri);
}
.thumbs .t1 > img,
.thumbs .t1 > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side .box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r16);
  padding: 20px;
  box-shadow: var(--sh1);
}
.side .box + .box {
  margin-top: 16px;
}
.side :is(h2, h3, h4) {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.eat {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  color: inherit;
}
.eat + .eat {
  border-top: 1px solid var(--line2);
}
.eat:hover {
  color: inherit;
}
.eat .th {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--r10);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.eat .th > img,
.eat .th > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 이름·설명이 든 가운데 칸. **`min-width: 0` 이 있어야 줄어든다** — flex 항목의
   기본 최소 폭은 min-content 이고, 한글은 `word-break: keep-all` 이라 어절이 안
   쪼개진다. 그래서 "고려삼계탕관광식당 · 369m" 한 줄이 칸을 밀어 올렸다. */
.eat > span:not(.th):not(.rt) {
  min-width: 0;
}
.eat .nm {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.026em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eat .mm {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eat .rt {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
}
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* ── 05 작품 상세 ─────────────────────────────────────────────────────────── */
.wh {
  position: relative;
  background: var(--film);
  color: #fff;
  overflow: hidden;
}
.wh::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, #1e262a 0 10px, #171e21 10px 20px);
  opacity: 0.85;
}
.wh .in {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 34px;
  padding-block: 38px 34px;
  align-items: flex-end;
}
.wh .po {
  display: block;
  width: 186px;
  aspect-ratio: 2/3;
  border-radius: var(--r12);
  overflow: hidden;
  background: #222;
  flex-shrink: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.wh .po > img,
.wh .po > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wh h1 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.wh .sub {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.wh .st {
  display: flex;
  gap: 30px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.wh .st div b {
  display: block;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.wh .st div span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.66);
}
.wh .act {
  display: flex;
  gap: 9px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.tabline {
  position: sticky;
  top: var(--sticky-top);
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tabline .tb {
  border-bottom: 0;
}
.spot {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r14);
  background: var(--card);
  color: inherit;
}
.spot:hover {
  color: inherit;
  box-shadow: var(--sh2);
}
.spot .th {
  display: block;
  width: 114px;
  height: 84px;
  border-radius: var(--r14);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.spot .th > img,
.spot .th > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spot .nm {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.028em;
}
.spot .mm {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink3);
}
.spot .ep {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--ink4);
  text-transform: uppercase;
}
.grp {
  margin: 24px 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink4);
}
.body2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 38px;
  align-items: start;
  padding-block: 30px 60px;
}

/* 07(탐색)·10(인증샷 피드) 구획이 여기 있었다. 그 두 화면을 2026-08-20 에 웹에서
   뺐다(server.js 「웹에 없는 화면 셋」). 번호는 다시 쓰지 않고 비워 둔다 — 남은
   구획 번호가 밀리면 예전 커밋의 "05 작품 상세" 같은 말이 딴 곳을 가리킨다. */

/* ── 08 지역 ──────────────────────────────────────────────────────────────── */
.rh {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  background: var(--film2);
}
.rh > img,
.rh > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rh .sc {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0.28), rgba(11, 15, 20, 0.82));
}
.rh .in {
  position: relative;
  padding-block: 34px 30px;
  width: 100%;
}
.rh h1 {
  margin: 8px 0 0;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.rh .st {
  display: flex;
  gap: 30px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.rh .st div b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.rh .st div span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}
.prefbar {
  position: sticky;
  top: var(--sticky-top);
  z-index: 40;
  background: rgba(249, 250, 251, 0.94); /* --paper 에 알파 — 바탕과 값이 갈리면 안 된다 */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.prefbar .in {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 60px;
  overflow-x: auto;
  scrollbar-width: none;
}
.prefbar .in::-webkit-scrollbar {
  display: none;
}
.rgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* ── 11 내 기록 (앱 화면 미리보기) ────────────────────────────────────────── */
.uh {
  padding-block: 30px 24px;
}
.uh .in {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(var(--pri) 0 62%, var(--line2) 62% 100%);
  flex-shrink: 0;
}
.ring .av2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: var(--mute);
  display: grid;
  place-items: center;
  color: var(--ink4);
}
.body4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 38px;
  align-items: start;
  padding-block: 6px 40px;
}
.g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.g3 .cell {
  position: relative;
  border-radius: var(--r10);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--mute);
  display: block;
}
.g3 .cell > img,
.g3 .cell > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crow {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r14);
  background: var(--card);
}
.crow + .crow {
  margin-top: 11px;
}
.crow .th {
  display: block;
  width: 104px;
  height: 76px;
  border-radius: var(--r12);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}

/* ── 12 시작하기 ──────────────────────────────────────────────────────────── */
.wrap2 {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 34px;
}
.top2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  align-items: center;
  padding-block: 56px;
}
.card2 {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r20);
  padding: 28px;
  box-shadow: var(--sh2);
}
.sso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.sso span {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 50px;
  padding: 0 17px;
  border-radius: var(--r12);
  font-size: 14.5px;
  font-weight: 700;
  border: 1px dashed var(--line);
  background: var(--mute);
  /* 눌린 면 위 --ink4 는 4.28:1 — 이 줄은 "앱에서 만든다" 는 **안내문**이라
     비활성 컨트롤 예외를 받지 않는다. */
  color: var(--ink3);
}
.sso .lg {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink3);
}
.divi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink4);
}
.divi::before,
.divi::after {
  content: '';
  height: 1px;
  background: var(--line);
  flex: 1;
}
.divi span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.faq summary {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  margin-left: auto;
  font-size: 19px;
  color: var(--ink4);
  font-weight: 600;
}
.faq details[open] summary::after {
  content: '–';
}
.faq p {
  margin: 11px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink2);
  max-width: 76ch;
}
.gsteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.gsteps .s1 {
  padding-top: 15px;
  border-top: 2px solid var(--ink);
}
.gsteps .s1 .n2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink4);
}
.gsteps .s1 :is(h3, h4) {
  margin: 8px 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ── 09 에디토리얼 ────────────────────────────────────────────────────────── */
.art {
  padding-block: 36px 10px;
}
.lead {
  max-width: 74ch;
  margin: 0 auto;
}
.lead h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
  margin: 0;
}
.lead .sum {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink2);
  letter-spacing: -0.018em;
}
.lead .meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink3);
  flex-wrap: wrap;
}
.cover {
  display: block;
  position: relative;
  border-radius: var(--r20);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--mute);
  margin: 16px auto 0;
  max-width: 1000px;
}
.cover > img,
.cover > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover .bd3 {
  position: absolute;
  left: 16px;
  top: 16px;
}
.tocbox {
  max-width: 74ch;
  margin: 34px auto;
  padding: 22px;
  border-radius: var(--r16);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh1);
}
.tocbox :is(h3, h4) {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ctaband {
  max-width: 74ch;
  margin: 38px auto 0;
  padding: 22px;
  border-radius: var(--r16);
  background: var(--pri-t);
  border: 1px solid #cfedf8;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.oglink {
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 74ch;
  margin: 0 auto 26px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r12);
  background: var(--card);
  color: inherit;
}
.oglink:hover {
  color: inherit;
  box-shadow: var(--sh2);
}
.oglink .th {
  display: block;
  width: 88px;
  height: 64px;
  border-radius: var(--r8);
  overflow: hidden;
  background: var(--mute);
  flex-shrink: 0;
}
.oglink .th > img,
.oglink .th > .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.share {
  max-width: 74ch;
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r12);
  overflow: hidden;
}
.share button,
.share a {
  border: 0;
  background: var(--card);
  color: var(--ink2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 13px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.share button:hover,
.share a:hover {
  background: var(--mute);
  color: var(--ink);
}

/* ── 반응형 ───────────────────────────────────────────────────────────────── */
@media (max-width: 1160px) {
  .hero .in {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi div:nth-child(odd) {
    border-left: 0;
  }
  .kpi div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .rule {
    grid-template-columns: 1fr 1fr;
  }
  /* `1fr` 이 아니라 `minmax(0, 1fr)` 이다. `1fr` 의 최소 크기는 min-content 라
     안에 안 줄어드는 것(긴 한글 한 덩어리, 고정 폭 썸네일)이 하나만 있어도 칸이
     화면보다 넓어진다 — 촬영지 상세가 390px 폰에서 429px 로 샜다. */
  .body,
  .body2,
  .body4,
  .top2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .near {
    grid-template-columns: 1fr;
  }
  .near .mapside {
    border-left: 0;
    border-top: 1px solid var(--line);
    min-height: 260px;
  }
  a.hero {
    aspect-ratio: 16/9;
  }
  .wh .in {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .wh .po {
    width: 130px;
  }
  .rgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cand {
    grid-template-columns: 1fr;
  }
  .shots {
    grid-template-columns: repeat(2, 1fr);
  }
  .gsteps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 780px) {
  .hero {
    padding: 34px 0 0;
  }
  .split,
  .rule,
  .gsteps {
    grid-template-columns: 1fr;
  }
  .rgrid {
    grid-template-columns: 1fr 1fr;
  }
  .wrap2 {
    padding: 0 18px;
  }
  .share {
    grid-template-columns: 1fr 1fr;
  }
}

/* 랜딩의 앱 칸에 서는 실제 앱 화면. **높이를 묶는다** — 폭을 묶으면 세로 비율
   1:2.05 때문에 카드가 두 배로 길어진다(옛 히어로에서 한 번 밟은 자리다).
   `<img width height>` 속성은 CSS height 로도 먹으므로 `height:auto` 를 빼먹지 말 것. */
.appshot {
  margin-top: 18px;
  border-radius: var(--r14);
  overflow: hidden;
  background: var(--film2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.appshot img {
  width: 100%;
  height: auto;
  aspect-ratio: 828 / 620;
  object-fit: cover;
  object-position: 50% 26%;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   모바일 — 화면별 (2026-08-15)
   공통 규칙(하단 내비 · 카드 비율 · 2열 격자)은 filme-p.css 아래쪽에 있다.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  /* 가로 줄 카드 폭 — 앱 `placeCardWidth` 와 같은 식이다:
     (화면폭 − 여백 − 간격×2) / 2.18, 최대 176. 어느 기기에서나 **2장 + 여유**가
     되고, 다음 카드가 살짝 보여서 "옆으로 더 있다" 가 읽힌다.
     (이 규칙은 위쪽 `.scrail .sccd{width:298px}` 을 덮어야 하므로 같은 파일에 둔다 —
      filme-p.css 에 두면 나중에 로드되는 이 파일에 진다.) */
  .scrail .sccd,
  .pcrail .pc,
  .rail .pc,
  .rail .sccd {
    width: min(176px, calc((100vw - 36px - 20px) / 2.18));
  }
  .wkrail .wc {
    width: 126px;
  }

  /* 안내 줄의 아이콘은 **인라인**이다. `display:flex` 로 두면 아이콘·글자·<b> 가
     각각 flex 항목이 되어 한 줄이 조각조각 벌어진다(실측 — 홈의 안내가 그랬다). */
  .note,
  .lst li {
    display: block;
  }
  .note .ic,
  .lst li .ic {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
  }

  /* 01 랜딩 — 히어로 사진이 제목보다 먼저 오지 않게 순서를 지킨다 */
  .hero .in {
    gap: 26px;
  }
  .kpi div {
    padding: 16px 14px;
  }
  .kpi b {
    font-size: 24px;
  }

  .near .mapside {
    display: none; /* 손바닥에서 장식 지도는 자리만 먹는다 — 목록이 일이다 */
  }

  /* 04 촬영지 상세 */
  .ph1 {
    aspect-ratio: 3 / 2; /* 21:9 는 폰에서 띠처럼 얇아진다 */
    border-radius: var(--r14);
  }
  .head {
    gap: 14px;
  }
  .act {
    width: 100%;
  }
  .act .a1 {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .thumbs .t1 {
    width: 96px;
  }
  .shots {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* 05 작품 상세 — 포스터와 제목이 한 줄에 서면 둘 다 작아진다 */
  .wh .in {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }
  .wh .po {
    width: 104px;
  }
  .wh .st {
    gap: 18px;
  }
  .wh .st div b {
    font-size: 19px;
  }
  .spot {
    padding: 10px;
    gap: 10px;
  }
  .spot .th {
    width: 88px;
    height: 66px;
  }

  /* 08 지역 */
  .rh {
    min-height: 260px;
  }
  .prefbar .in {
    height: 54px;
  }

  /* 11 내 기록 · 12 시작하기 */
  .ring {
    width: 76px;
    height: 76px;
  }
  .top2 {
    padding-block: 30px;
  }

  /* 09 에디토리얼 — 커버가 칼럼을 뚫는 여백은 폰에 없다 */
  .cover {
    border-radius: var(--r14);
  }
}

@media (max-width: 780px) {
  /* 작품 히어로의 두 버튼은 폭이 제각각이면 계단처럼 보인다 — 두 칸으로 나눈다. */
  .wh .act {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .wh .act .b {
    width: 100%;
  }

  /* 코스 카드가 두 장씩 서면 사진 위의 작성자 알약과 작품 태그가 부딪힌다.
     둘 중 남는 것은 **작품** 이다 — 어느 작품 코스인지가 먼저 궁금하다. */
  .cc .im .who {
    display: none;
  }
}