/* ═══════════════════════════════════════════════════════════════════════════
   LILT 첫 화면(브릿지) — 템플릿 미리보기 지면
   근거: 바탕화면 `design_handoff_lilt_template_preview/`(2026-09-20) — `.dc.html` 본문이 정본.

   무드: **따뜻한 회색 지면 위 먹색 활자.** 지면은 펄 종이(`#fafaf8` 평균 · 편집기·콘솔의 `#f4f3f1` 보다 살짝 희다)다
        (lilt-tokens.css 를 끌어오지는 않으므로 값이 두 벌이다 — 한쪽만 고치지 말 것).
   ⚠ 세로로 길게 늘어놓던 랜딩(히어로 → 샘플 → 기능 → 후기 → FAQ)은 폐기했다.
     지금은 **네 뷰를 갈아 끼우는 한 장**이다. 되살리지 말 것.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 본문 서체 — 가변 프리텐다드 한 벌. 핸드오프는 CDN 을 걸었지만 이 지면은 **외부를 부르지 않는다**
   (저장소에 이미 같은 파일이 있다 · static/assets/fonts/PretendardVariable.woff2).
   ⚠ 45~920 가변이라 500·600 굵기가 그대로 나온다 — 400/700 두 벌로 되돌리지 말 것. */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920; font-style:normal; font-display:swap;
  src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root{
  --bg:#fafaf8;           /* 지면 — ⚠ 이미지가 뜨기 전에만 보이는 색이다(paper.jpg 가 알파 없이 덮는다). 실제 지면색은 body 의 흰 겹까지 더한 값 — 함께 맞출 것 */
  /* 종이는 body·.hd 에 직접 적는다(url 을 변수에 넣으면 브라우저마다 기준 경로가 달라 깨진다).
     펄 화이트 종이(바탕화면 pearl.png → 큰 얼룩을 펴고 --bg 색으로 맞춘 이음새 없는 768px 타일).
     ⚠ 늘려 깔지 않는다 — 결이 커지고 깨진다. 384px 칸으로 **여러 장 이어 붙인다**(레티나에서 1:1 — 입자를 줄이려면 이 칸을 줄인다 · 케이크 셰이더의 /384. 와 함께). */
  --ink:#1e1c19;          /* 본문 */
  --umber: rgb(40 30 27 / 84%);   /* 헤더 단추·글자와 푸터 인스타 아이콘의 브라운 — 먹색이 너무 시꺼멓다 */
  --soft:#5a544d;         /* 답변 글 */
  --mute:#8a827a;         /* 캡션·보조 */
  --faint:#b6ada2;        /* 3차 */
  --line:rgba(30,28,25,.1);
  --line-2:rgba(30,28,25,.07);
  --line-3:rgba(30,28,25,.16);
  --card-bg:#e9e4dc;      /* 사진이 오기 전 카드 바탕 */
  --kakao:#FEE500;
  --kakao-ink:#191600;
  --hd-h:80px;
  --e-out:cubic-bezier(.22,.61,.36,1);   /* 미끄러지듯 멈춘다 */
  --e-in:cubic-bezier(.76,0,.24,1);      /* 메뉴처럼 단호하게 */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  /* ⚠ 지면을 밝히려면 `--bg` 가 아니라 **이 흰 겹**을 고친다(2026-09-30).
     `paper.jpg` 는 알파가 없는 24bit JPG 라 아래 색을 통째로 덮는다 — 화면에 보이는 것은
     이미지의 평균(249,250,247)이고 `--bg` 는 이미지가 뜨기 전에만 잠깐 비친다.
     ⚠ 종이 결은 **어두운 쪽으로만** 그려져 있어(밝은 끝이 이미 255) 밝힐수록 결이 옅어진다.
       0.225 는 평균을 249→250 으로만 올린다(0.45 는 너무 밝다고 물렀다 · 그 절반).
     ⚠ `.hd` 도 같은 겹을 쓴다 — 한쪽만 고치면 머리 띠와 본문 사이에 이음매가 생긴다. */
  /* 2026-11-02 — 지면을 캔버스 결로 바꿨다(canvas.jpg · 이음새 없는 768px 타일을 384px 로 깐다).
     평균 밝기는 예전 종이 + 흰 겹과 같다(≈250,250,248)라 흰 겹을 따로 얹지 않는다. */
  background:
    url(../bridge/canvas.jpg) 0 0/384px 384px repeat,
    var(--bg);
  color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  overflow:hidden;              /* 스크롤은 .main 안에서만 일어난다 */
  /* ⚠ 한국어 지면이다. 없으면 "채워보 / 세요" 처럼 어절 한가운데서 끊긴다. */
  word-break:keep-all;
}
a{ color:var(--ink); text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
img{ display:block; }

/* ══════════ 헤더 ══════════ 좌 메뉴 / 중앙 로고 / 우 로그인. 로고가 화면 한가운데 선다. */
.hd{
  position:fixed; top:var(--pop-h, 0px); left:0; right:0; z-index:40; height:var(--hd-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  /* 지면과 **같은 오프화이트**다(2026-09-29 · 첫 화면만). 흰 반투명 띠는 걷었다.
     ⚠ 대시보드·운영자 콘솔의 .topbar(dashboard.css)는 여전히 흰 반투명 띠다 — 여기만 다르다. */
  /* 본문과 같은 종이 — 둘 다 화면 왼쪽 위(0,0)에서 깔려 이음매가 없다.
     ⚠ 흰 겹의 농도까지 body 와 같아야 한다(다르면 띠만 밝거나 어둡다). */
  background:
    url(../bridge/canvas.jpg) 0 0/384px 384px repeat,
    var(--bg);
  border-bottom:1px solid rgba(0,0,0,.07);
}
/* ══════════ 샘플 미리보기 ══════════ 카드의 [미리보기]가 여는 지면.
   ⚠ 지면을 **줄이지 않는다**(배율 1). 폭만 좁혀 그린다 — 0.8 로 줄이면 본문 16px 이
     12.9px 로 보여 읽을 수 없다(편집 화면 미리보기에서 겪은 것과 같은 일).
   ⚠ 폰 베젤을 두르지 않는다. 지면이 그만큼 줄고 이 화면의 어휘도 아니다.
   ⚠ PC·모바일이 같은 모양이다 — 폭만 화면에 맞춰 줄어든다. */
/* ⚠ **화면을 꽉 채운다** — PC·모바일이 같다(2026-09-22 고객 지시).
     머리줄은 두지 않는다. 바닥에는 [이 템플릿으로 제작] 띠 하나만 둔다(2026-09-29 — 제작 버튼을 카드에서 이리로 옮겼다).
     닫는 길은 지면 위에 뜨는 ✕ 하나와 Esc 뿐이다(편집 화면 미리보기와 같은 결).
   ⚠ 지면을 **줄이지 않는다**(배율 1). 0.8 로 줄이면 본문 16px 이 12.9px 로 보여 읽을 수 없다.
   ⚠ 폰 베젤을 두르지 않는다. 지면이 그만큼 줄고 이 화면의 어휘도 아니다. */
/* 바탕 — 흰 벽이 아니라 뒤 화면이 살짝 흐리게 비치는 반투명(로딩 중에 특히 보인다). */
.tpv{ position:fixed; inset:0; z-index:60; background:rgba(250,250,248,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  display:flex; align-items:stretch; justify-content:center; }
.tpv[hidden]{ display:none; }                 /* ⚠ [hidden] 짝 규칙 */
/* 판 — 좁은 화면에서는 화면 전체다. 넓은 화면 규칙은 아래 @media 에 있다. */
.tpv__pane{ position:relative; width:100%; height:100%; background:#fff; transition:background .5s ease, border-color .5s ease; }
/* 불러오는 동안 — 판을 비워 흐린 바탕이 비치게 하고, 청첩장은 숨겨 두었다가 다 뜨면 서서히 나타난다. */
/* ⚠ 넓은 화면의 좌우 테두리도 같이 지운다 — 남겨 두면 별만 떠 있는 빈 화면에 세로 선 두 줄이 찌꺼기로 보인다. */
.tpv.is-loading .tpv__pane{ background:transparent; border-color:transparent; }
.tpv iframe{ width:100%; height:100%; border:0; display:block; transition:opacity .55s ease; }
/* 불러오는 동안에는 버튼을 통째로 감춘다 — 별만 보인다. 그동안은 화면 아무 데나 누르면 닫힌다(JS). */
.tpv.is-loading iframe, .tpv.is-loading .tpv__bar{ opacity:0; }
.tpv.is-loading .tpv__make, .tpv.is-loading .tpv__close{ pointer-events:none; }
.tpv.is-loading .tpv__loading{ cursor:pointer; }
/* [이 템플릿으로 제작] — 지면 위에 뜨는 **반투명 유리 알약**(편집 화면 모바일 미리보기의 .mpv__btn 과 같은 값).
   ⚠ 띠를 깔지 않는다 — 청첩장이 화면 끝까지 보인다. 대신 스크롤하는 동안은 숨었다가(.is-hide)
     멈추면 다시 뜬다(JS) — 맨 아래 공유 버튼 같은 것을 가리지 않게. */
.tpv__bar{ position:absolute; z-index:5; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; justify-content:center; align-items:center; gap:8px; pointer-events:none;
  transition:opacity .25s ease .2s, transform .3s var(--e-out) .2s; }   /* 다시 뜰 때만 0.2초 늦춘다 — 화환 버튼이 먼저 올라가 자리를 비운 뒤에 뜬다(숨을 때는 바로) */
.tpv__bar.is-hide{ opacity:0; transform:translateY(10px); transition-delay:0s; }
/* 「nn명이 선택했어요」 — 버튼 줄(높이 40px) 바로 위 한가운데에 뜨는 **작은 유리 알약**. 버튼과 한 벌이고, 줄과 함께 숨고 뜬다
   (JS 가 .is-hide 를 같이 건다).
   ⚠ 청첩장 바탕은 템플릿마다 다르다(흰 종이 · 차콜 · 사진). 글자만 띄우면 바탕을 탄다 — 버튼보다 짙은 유리(78%)에 흐림을 깔아
     어느 바탕에서도 먹색 글자가 읽히게 한다. blend(difference)로 뒤집는 안은 버렸다(글자가 떠 보인다).
   ⚠ 누르는 것이 아니다 — 아래 청첩장을 가로막지 않게 pointer-events 를 끈다. */
.tpv__pick{ position:absolute; z-index:5; left:50%; bottom:calc(16px + env(safe-area-inset-bottom) + 40px + 8px);
  transform:translateX(-50%); display:block; padding:5px 12px; border-radius:999px; white-space:nowrap; pointer-events:none;
  border:1px solid rgba(38,37,34,.08); background:rgba(244,243,241,.78); color:var(--ink);
  font-size:11.5px; font-weight:500; letter-spacing:-.01em; line-height:1.3;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:opacity .25s ease .2s, transform .3s var(--e-out) .2s; }   /* 줄과 같이 — 다시 뜰 때만 늦춘다 */
.tpv__pick[hidden]{ display:none; }           /* ⚠ [hidden] 짝 규칙 */
.tpv__pick.is-hide{ opacity:0; transform:translate(-50%, 10px); transition-delay:0s; }
.tpv.is-loading .tpv__pick{ opacity:0; }
.tpv__make{ pointer-events:auto; display:inline-flex; align-items:center; min-height:40px; padding:0 20px;
  border:1px solid rgba(38,37,34,.10); border-radius:999px;
  background:rgba(244,243,241,.07); color:var(--ink);   /* 거의 비치게 — 흐림(blur)이 글자 뒤를 받쳐 준다 */
  font-size:13px; font-weight:500; letter-spacing:-.01em;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 10px 28px -18px rgba(0,0,0,.52); transition:opacity .16s, background .2s; }
.tpv__bar.is-hide .tpv__make, .tpv__bar.is-hide .tpv__close{ pointer-events:none; }
.tpv__make:hover{ background:rgba(244,243,241,.3); color:var(--ink); }
.tpv__make:active{ opacity:.7; }
/* [닫기] — [제작] 오른쪽에 나란히 서는 같은 유리 알약. 위쪽 ✕ 는 걷었다(닫는 길을 한곳에 모은다).
   ⚠ 그려지는 높이는 40px 이지만 닿는 자리는 44px 로 넓혀 둔다. */
.tpv__close{ pointer-events:auto; position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 18px;
  border:1px solid rgba(38,37,34,.10); border-radius:999px; background:rgba(244,243,241,.07); color:var(--ink);
  font-size:13px; font-weight:500; letter-spacing:-.01em; cursor:pointer;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:opacity .16s, background .2s; }
.tpv__close::after{ content:""; position:absolute; inset:-2px 0; }
.tpv__close:hover{ background:rgba(244,243,241,.3); }
.tpv__close:active{ opacity:.7; }
.tpv__loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:transparent; font-size:12px; letter-spacing:.04em; color:rgba(30,28,25,.5);
  transition:opacity .45s ease; }
.tpv:not(.is-loading) .tpv__loading{ opacity:0; pointer-events:none; }/* 반짝이는 별 — bridge/spark.png 는 64px 12칸을 가로로 이은 한 장이다(768×64). 32px 로 줄여 12칸을 차례로 넘긴다.
   ⚠ steps(12) 와 칸 수·그림 폭은 한 벌 — 그림을 바꾸면 셋을 같이 고친다. 8fps = 한 바퀴 1.5초.
   ⚠ 칸을 넘기는 건 `background-position` 이 아니라 **`transform`** 이다(메인 스레드가 바쁜 모바일에서
     앞엣것은 첫 칸에 멈춘다). dashboard.css 의 liltSpark 와 같은 짜임이니 함께 고칠 것. */
.tpv__spark{ display:block; position:relative; width:32px; height:32px; overflow:hidden; }
.tpv__spark::before{ content:""; display:block; position:absolute; top:0; left:0;
  width:384px; height:32px;
  background:url(../bridge/spark.png) 0 0/384px 32px no-repeat;
  transform:translate3d(0,0,0); will-change:transform;
  animation:tpvSpark 1.5s steps(12) infinite; }
@keyframes tpvSpark{ to{ transform:translate3d(-384px,0,0); } }
@media (prefers-reduced-motion:reduce){
  .tpv__spark::before{ animation:tpvBreath 1.9s ease-in-out infinite; } }
@keyframes tpvBreath{ 0%,100%{ opacity:.35 } 50%{ opacity:.85 } }
.tpv__loading[hidden]{ display:none; }
/* 뒤 지면이 스크롤되지 않게 — 미리보기 안에서만 구른다. */
body.tpv-on{ overflow:hidden; }

/* 넓은 화면 — **모바일 폭**만큼만 세운다(2026-09-22 고객 지시).
   ⚠ 청첩장은 세로 지면이라 가로로 펼쳐 봐야 양옆이 비고, 닫기 ✕ 만 화면 구석으로
     멀어져 찾게 된다. 폭을 잡아 두면 ✕ 가 늘 지면 모서리에 붙는다.
   ⚠ 폭만 잡고 **배율은 건드리지 않는다**(1 그대로) — 줄이면 본문이 읽히지 않는다.
   ⚠ 높이는 꽉 채운다. 위아래 여백을 두면 그만큼 지면이 짧아진다. */
@media (min-width:640px){
  .tpv{ background:rgba(30,28,25,.42);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .tpv__pane{ width:420px; max-width:100%; border-left:1px solid rgba(30,28,25,.08);
    border-right:1px solid rgba(30,28,25,.08); }
}

/* 메뉴 — 2×2 점. 열리면 네 점이 **대각선 획으로 늘어나 X(닫기와 같은 네 조각)** 가 되고, 닫히면 다시 점이 된다.
   점은 span 이 아니라 ::before 가 그린다 — 가운데 기준으로 늘어나야 X 가 흐트러지지 않는다.
   ⚠ 메뉴가 열려 있는 동안 헤더를 메뉴 띠 위로 올린다(.menu-on .hd) — 안 그러면 X 가 띠 밑에 가린다.
     그래서 띠 안의 따로 된 닫기(.menu__x)는 감춘다. 닫기는 이 버튼이 한다(열기·닫기 토글). */
.hd__menu{
  width:44px; height:44px; margin-left:10px; padding:0; border:0; border-radius:22px;
  background:transparent; display:grid; grid-template-columns:4.4px 4.4px; grid-auto-rows:4.4px; gap:6px;
  align-content:center; justify-content:center; transition:background .2s;
}
/* hover 는 동그라미 면 없이 점(획)만 살짝 옅게 — 닫기(X) 상태도 같은 버튼이다. */
.hd__menu span{ position:relative; width:4.4px; height:4.4px; transition:transform .32s var(--e-out); }
.hd__menu span::before{ content:""; position:absolute; left:50%; top:50%; width:4.4px; height:4.4px;
  border-radius:2.2px; background:var(--umber); transform:translate(-50%,-50%) rotate(45deg);
  transition:width .32s var(--e-out), height .32s var(--e-out), opacity .2s ease; }
.hd__menu span:nth-child(2)::before, .hd__menu span:nth-child(3)::before{ transform:translate(-50%,-50%) rotate(-45deg); }
.menu-on .hd__menu span::before{ width:8.4px; height:2.4px; }
/* 획이 된 뒤 살짝 바깥으로 — 닫기 X 처럼 가운데가 넉넉히 빈다 */
.menu-on .hd__menu span:nth-child(1){ transform:translate(-.8px,-.8px); }
.menu-on .hd__menu span:nth-child(2){ transform:translate(.8px,-.8px); }
.menu-on .hd__menu span:nth-child(3){ transform:translate(-.8px,.8px); }
.menu-on .hd__menu span:nth-child(4){ transform:translate(.8px,.8px); }
/* 메뉴가 열리면 헤더는 X 를 띄우려고 띠 위로 올라가되, 바탕은 비워 **띠의 흰색이 상단바까지 덮게** 한다. */
.menu-on .hd, .menu-closing .hd{ z-index:52; background:transparent; border-bottom-color:transparent; }
/* 로고·[시작하기]는 흰 박스 밑으로 사라진다 — 열린 동안 보이는 것은 흰 박스와 X 뿐이다. */
.hd__logo, .hd__login{ transition:opacity .2s ease; }
.menu-on .hd__logo, .menu-on .hd__login{ opacity:0; pointer-events:none; }
.hd{ transition:background .3s ease, border-color .3s ease; }

.hd__logo{ justify-self:center; display:flex; align-items:center; height:var(--hd-h); }
.hd__logo img{ width:42px; height:42px; object-fit:contain; }

.hd__login{
  justify-self:end; margin-right:10px; height:44px; padding:0 10px;
  display:flex; align-items:center; gap:7px; border:0; background:transparent;
  font-size:12px; font-weight:600; letter-spacing:.04em; white-space:nowrap; color:var(--umber);
  transition:color .2s;
}
.hd__login span{ color:var(--faint); transition:color .2s; }
.hd__login:hover, .hd__login:hover span{ color:var(--mute); }
/* ⚠ 머리줄 버튼에 카카오 마크를 두지 않는다(2026-09-29 에 넣었다가 걷었다) —
   글자가 「시작하기」로 바뀌면서, 어디로 가는지는 그 화면의 노란 버튼이 말한다. */

/* ══════════ 메뉴 ══════════ 헤더를 덮으며 내려오는 띠.
   ⚠ `hidden` 짝 규칙이 필요하다 — display 를 준 요소는 UA 의 [hidden] 을 이긴다. */
.menu-scrim{ position:fixed; inset:0; z-index:49; background:rgba(30,28,25,.18);
  opacity:0; transition:opacity .3s ease; }
.menu-scrim[hidden]{ display:none; }
.menu-on .menu-scrim{ opacity:1; }

.menu{
  position:fixed; top:var(--pop-h, 0px); left:0; right:0; z-index:51; height:184px;
  background:#fff;   /* 흰 박스 — 상단바까지 통째로 덮는다(반투명·흐림 없음) */
  border-bottom:1px solid var(--line-2);
  box-shadow:0 20px 40px -30px rgba(30,28,25,.45);
  transform-origin:top; transform:scaleY(0); transition:transform .3s var(--e-in);
}
.menu[hidden]{ display:none; }
.menu-on .menu{ transform:scaleY(1); transition-duration:.42s; }

/* 닫기 — 네 조각으로 끊긴 X(바탕화면 close.png 의 모양을 SVG 로 다시 그렸다 · 동그라미 테두리·바탕은 뺐다).
   메뉴 단추(2×2 점)와 같은 "끊긴 점·획" 어휘다. 닿는 자리는 44px 그대로. */
.menu__x{ position:absolute; top:18px; right:clamp(10px,4vw,52px); width:44px; height:44px;
  display:grid; place-items:center; padding:0; border:0; background:none; color:var(--umber);
  opacity:0; transition:opacity .3s ease .14s; }
.menu__x svg{ width:19px; height:19px; display:block; transition:transform .25s var(--e-out), opacity .2s; }
.menu-on .menu__x{ opacity:1; }
.menu__x{ display:none; }   /* 헤더의 햄버거가 X 로 변해 닫기를 맡는다(위 .hd__menu 주석) */
.menu__x:hover svg{ opacity:.6; transform:rotate(90deg); }
.menu__x:focus{ outline:none; }
.menu__x:focus-visible svg{ opacity:.6; }

.menu__items{ position:absolute; left:0; right:0; bottom:26px;
  display:flex; align-items:flex-end; gap:clamp(18px,4vw,44px); flex-wrap:wrap;
  padding:0 clamp(16px,5vw,64px); }
.menu__items a{ font-size:clamp(18px,3vw,28px); font-weight:600; letter-spacing:-.02em;
  opacity:0; transform:translateY(22px); transition:opacity .18s ease, transform .42s var(--e-out), color .2s; }
.menu__items a:hover{ color:var(--mute); }
.menu-on .menu__items a{ opacity:1; transform:translateY(0); transition-duration:.42s; }
.menu-on .menu__items a:nth-child(1){ transition-delay:.12s; }
.menu-on .menu__items a:nth-child(2){ transition-delay:.18s; }
.menu-on .menu__items a:nth-child(3){ transition-delay:.24s; }
/* ⚠ 항목을 늘리면 지연도 한 줄 늘린다 — 빠뜨리면 그 항목만 지연 없이 먼저 튀어나온다. */
.menu-on .menu__items a:nth-child(4){ transition-delay:.30s; }

/* 가이드는 나머지 셋과 **글자색이 같다**(2026-09-29 · 한 단 낮췄다가 되돌렸다).
   다른 일이라는 신호는 ↗ 하나로 충분하다 — 색까지 다르면 메뉴 넷의 결이 갈라진다.
   ⚠ 화살표는 글자 크기를 따라간다(em) — 메뉴 글자가 clamp 로 늘었다 줄었다 하기 때문이다. */
.menu__items a.menu__guide::after{ content:"\2197"; display:inline-block;
  font-size:.58em; font-weight:500; margin-left:.16em; vertical-align:.34em;
  transition:transform .2s var(--e-out); }
.menu__items a.menu__guide:hover::after{ transform:translate(2px,-2px); }

/* ══════════ 본문 ══════════ 헤더와 푸터 사이를 가득 채우고, 스크롤은 여기서만. */
/* ⚠ `justify-content:center` 를 쓰지 않는다. 스크롤 상자에서 가운데 정렬을 하면 내용이
     상자보다 길 때 **위쪽이 스크롤 범위 밖으로 밀려 잘린다**(기능 소개 화면에서 겪었다).
     대신 위아래 auto 마진으로 가운데를 만든다 — 짧으면 가운데, 길면 위에서부터 흐른다. */
.main{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:100%; padding:calc(var(--hd-h) + var(--pop-h, 0px) + 24px) 0 24px; gap:16px;
}
.main > .view{ margin-top:auto; margin-bottom:auto; }
/* 뷰는 네 개가 다 DOM 에 있고, 지금 뷰만 보인다(검색엔진은 전부 읽는다) */
.view{ display:none; width:100%; }
body[data-view="home"]     .view--home,
body[data-view="slider"]   .view--slider,
body[data-view="features"] .view--features,
body[data-view="faq"]      .view--faq,
body[data-view="login"]    .view--login{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  animation:riseIn .5s var(--e-out) both;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{ width:100%; max-width:720px; padding:8px clamp(20px,5vw,40px); }
.wrap--wide{ max-width:1100px; }
.wrap--narrow{ max-width:420px; display:flex; flex-direction:column; align-items:center; text-align:center; }

.label{ display:block; font-size:11px; font-weight:600; letter-spacing:.24em; color:var(--mute); }
.h2{ margin:10px 0 8px; font-size:clamp(20px,3.4vw,26px); font-weight:600; letter-spacing:-.02em; }
.lead{ margin:0 0 22px; font-size:13px; color:var(--mute); }
.empty{ max-width:420px; padding:0 24px; font-size:13.5px; line-height:1.7; color:var(--mute); text-align:center; }

/* ══════════ 홈 ══════════ 정사각 투명 애니메이션(WebP) 한 장 + 샵으로 가는 글자 하나.
   ⚠ 크기는 폭과 높이 중 빠듯한 쪽에 맞춘다 — 빼는 280px 은 헤더·푸터·아래 글자 몫이다.
   ⚠ 화면을 채우지 않는다 — 여백 속에 작게 놓인 한 장이다(PC 288px). */
body[data-view="home"] .view--home{ gap:22px; }
.home__film{ display:block;
  width:max(140px, min(240px, calc((100vw - 96px) * .7), calc((100vh - 280px) * .8)));
  width:max(140px, min(240px, calc((100vw - 96px) * .7), calc((100svh - 280px) * .8)));
  aspect-ratio:16/17; position:relative; }
/* 4:5 그림을 16:17 상자에 눌러 담는다 = 세로 85%(object-fit:fill). 바닥을 축으로 살짝(2.5°) 오른쪽으로 기울인다. */
.home__still{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:fill;
  transform-origin:50% 100%; transform:rotate(2.5deg);
  /* 케이크 그림자 — 그림의 **둥근 윤곽을 따라** 아래로 드리운다(drop-shadow). 따로 둔 타원은 양옆이 떠 보여서 걷었다.
     가까이 붙은 짙은 그림자 + 조금 멀리 퍼지는 옅은 그림자 두 겹이다. */
  filter:drop-shadow(0 2px 1.5px rgba(52,46,40,.30)) drop-shadow(0 7px 5px rgba(52,46,40,.14)); }
/* 스프링클 — 케이크 위쪽에서 솔솔 뿌려져 내려오다, 케이크 위로 내려앉듯 사르르 녹아 사라진다. 여러 알이 시간차로 계속 이어진다.
   모양은 예전 반짝이 별과 같은 인쇄 느낌이다: 먹색 가는 테두리 + 그보다 **살짝 빗겨 놓인** 파스텔 칠(box-shadow 의 같은 색).
   ⚠ 처음엔 보이지 않는다(opacity 0) — 움직임을 끄는 환경(prefers-reduced-motion)에서는 아예 안 보인다. */
.home__film{ overflow:visible; }
.home__spr{ position:absolute; left:var(--x); top:-14%; width:4px; height:11px; border-radius:2.2px / 2.6px; box-sizing:border-box;
  /* 케이크·지면에 어우러지게 — 먹색 윤곽 대신 같은 색조의 옅은 테두리, 캔버스 결을 곱해 칠한 질감, 케이크와 같은 결의 그림자 */
  background-color:var(--c); background-image:url(../bridge/canvas.jpg); background-size:90px 90px; background-blend-mode:multiply;
  box-shadow:inset 0 0 0 .6px rgba(70,80,105,.38), inset -.8px -1px 1px rgba(60,50,45,.16);
  filter:drop-shadow(0 1px 1px rgba(52,46,40,.28));
  pointer-events:none; opacity:0; transform:rotate(var(--r));
  animation:homeSpr var(--du) ease-in var(--d) infinite; }
@keyframes homeSpr{
  0%   { opacity:0; transform:translate(0,0) rotate(var(--r)); filter:drop-shadow(0 1px 1px rgba(52,46,40,.28)) blur(0); }
  14%  { opacity:1; }
  72%  { opacity:1; filter:drop-shadow(0 1px 1px rgba(52,46,40,.28)) blur(0); }
  100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r) + 110deg)) scale(.5); filter:drop-shadow(0 1px 1px rgba(52,46,40,.28)) blur(1.5px); }
}
/* [View the Collection] — 글자가 아니라 그림(view-the-collection.png · 540×70)이다. 높이로 크기를 정한다.
   화살표는 가는 선 + **윗촉 하나**(반쪽 화살)로 그린다. 선은 가운데가 아니라 **글자 밑줄 자리(기준선)** 에 선다 —
   그림의 글자 아래 끝이 곧 기준선이라(내림획 없는 문구) 아래 끝을 맞춘다(align-items:flex-end).
   hover 면 선이 오른쪽으로 길어진다(촉은 선 끝에 붙어 따라간다). */
.home__go{ display:inline-flex; align-items:flex-end; gap:8px; padding:6px 4px; }
.home__go img{ display:block; height:15px; width:auto; }
.home__arr{ position:relative; display:block; flex:none; width:16px; height:5px; margin-bottom:.4px;
  transition:width .35s var(--e-out); }
.home__arr::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); }
/* 윗촉 — 선 끝에서 왼쪽 위로 뻗는 짧은 획. 오른쪽 끝을 축으로 돌린다. */
.home__arr::after{ content:""; position:absolute; right:0; bottom:0; width:5.5px; height:1px; background:var(--ink);
  transform-origin:100% 50%; transform:rotate(38deg); }
.home__go:hover .home__arr, .home__go:focus-visible .home__arr{ width:28px; }

/* ══════════ 샵 — 티켓 카드 레일 ══════════
   근거: 바탕화면 `상품card.zip`(handoff/lilt-template-cards · README) — 수치는 그대로다.
   ⚠ 서체는 IBM Plex Mono(허용 영문 목록)를 **저장소 파일**로 쓴다 — 핸드오프는 구글 폰트를 불렀지만 이 지면은 외부를 부르지 않는다.
   ⚠ 티켓 홈은 mask 두 장의 교집합으로 **실제로 뚫는다**(지면 종이가 비친다) — 옛 사파리용 -webkit-mask-composite 도 함께 둔다.
   ⚠ 카드 폭 min(260px, 56vw) · 윗단 비율 1:1.3 — 핸드오프(400px · 1:1.1)보다 좁고 길쭉하다. 옆 카드가 한두 장 걸쳐 보인다.
     좌우 여백은 1200px 컨테이너에 맞춘다(PC 4장 남짓 · 폰 1장 + 다음 카드 1/3). */
/* 템플릿 이름 — Archive Garamond Pro(상업 이용 허락받음 · 저장소 기록에서 되살린 파일). */
@font-face{ font-family:'Archive Garamond Pro'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ArchiveGaramondPro.ttf') format('truetype'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/IBMPlexMono-SemiBold.ttf') format('truetype'); }
.lc-price{ font-weight:600; }
.lc{ --lc-tint:rgba(46,40,32,.072);   /* 카드 색 — 뒤 지면 위에 얹는 반투명 한 겹(지면보다 한 톤 짙다). 불투명이면 뒤 결이 가려진다 */
     --lc-card:#e9e8e6;   /* 불투명 연그레이(웜 기운만 살짝) — 지면보다 한 톤 짙어 티켓 홈·모서리가 선다. 결은 아래 종이를 곱해 입힌다.
                             ⚠ 곱하는 종이(248,248,246)가 노란 쪽이다 — 여기서 더 누렇게 가면 카키빛이 돈다(#e9e7e2 가 그랬다). */
   --lc-ink:#1c1a17; --lc-ink2:#2a2825; --lc-muted:#6e6a64; --lc-line:#8d8a84; --lc-dot:#3a3733;
  /* 높이에도 맞춘다 — 낮은 화면에서 카드가 길어 [+] VIEW SAMPLE 이 잘렸다.
     ⚠ 나누는 수는 **카드 높이 ÷ 폭**이다(윗칸 1.15 + 아랫칸 0.91 = 2.06 · 폰은 1.15 + 0.88 = 2.03).
       세 값은 한 벌이니 윗칸·아랫칸을 고치면 **여기도 같이 고친다.** 2.0 으로 조금 크게 둬서
       화면을 다 쓰지 않게 한다 — 넘치면 버튼이 잘리지만 남으면 아무 일도 없다.
       (아랫단을 늘리고도 이 수를 1.2 로 둔 탓에 실제 기기에서 바닥이 잘렸다 — 2026-09-30.)
     ⚠ 빼는 값은 카드 **밖** 고정분이다(머리줄 + 레일 아래 여백).
     ⚠ 이벤트 띠가 서면 헤더가 그만큼(`--pop-h`) 내려선다 — 그 높이도 함께 뺀다. 안 빼면 카드 바닥이 잘려 스크롤이 생긴다. */
  --card-w:min(240px, 52vw, max(160px, calc((100svh - 140px - var(--pop-h, 0px)) / 2.16))); --lc-gap:16px; --notch:11px; --lc-r:13px;
  --gutter:max(20px, calc((100vw - 1200px) / 2));
  width:100%; display:flex; flex-direction:column; color:var(--lc-ink);
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; -webkit-font-smoothing:antialiased; }
.lc a{ color:var(--lc-ink); }
.lc a:hover{ color:var(--lc-muted); }
.lc-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:6px var(--gutter) 20px; font-size:12px; letter-spacing:.14em; color:#3d3a36; }
/* 시작가 옆 (i) 와 요금제 말풍선 — 머리줄이 레일 위에 서야 말풍선이 카드에 가리지 않는다. */
.lc-head{ position:relative; z-index:3; }
.lc-price{ position:relative; display:flex; align-items:center; gap:8px; }
/* `[?]` — 레일의 `[←]` `[→]` · 카드의 `[+]` 와 같은 대괄호 표기다. */
.lc-i{ order:-1;   /* PRICE 앞에 선다 */
  flex:none; padding:0; border:0; background:none; font:inherit; font-weight:400; font-size:13px; letter-spacing:0;
  color:var(--lc-muted); position:relative; transition:color .2s; }
.lc-i::after{ content:""; position:absolute; inset:-13px -10px; }   /* 누르는 자리를 44px 로 넓힌다 */
.lc-i:hover, .lc-i[aria-expanded="true"]{ color:var(--lc-ink); }
.lc-tip{ position:absolute; left:0; top:calc(100% + 12px); width:min(264px, calc(100vw - var(--gutter) * 2));
  padding:6px 16px; background:#fff; border-radius:10px; box-shadow:0 14px 30px -12px rgba(30,28,25,.3), 0 0 0 1px rgba(30,28,25,.06);
  font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif; letter-spacing:0; font-weight:400; color:var(--lc-ink);
  animation:lcTip .28s var(--e-out) both; }
.lc-tip[hidden]{ display:none; }
/* 꼬리 — (i) 바로 아래를 가리킨다. 가격 글자 수에 따라 (i) 자리가 달라지므로 열 때 JS 가 `--ax` 를 잰다. */
.lc-tip::before{ content:""; position:absolute; top:-5px; left:var(--ax, 24px); width:10px; height:10px;
  background:#fff; transform:rotate(45deg); box-shadow:-1px -1px 0 rgba(30,28,25,.06); }
.lc-tip__r{ padding:12px 0; }
.lc-tip__r + .lc-tip__r{ border-top:1px solid rgba(30,28,25,.08); }
.lc-tip__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; }
.lc-tip__h b{ font-weight:600; }
/* 이벤트 뱃지(할인 중일 때만) — **이벤트가(판매가) 바로 앞**에 선다. 면을 채우지 않고 잉크 선만 두른 작은 네모. */
.lc-tip__now{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.lc-tip__tag{ font-style:normal; padding:1px 6px; border:1px solid var(--lc-ink); border-radius:0;
  font-size:10px; font-weight:400; line-height:1.5; letter-spacing:-.01em; color:var(--lc-ink); white-space:nowrap; }
.lc-tip__h span{ font-variant-numeric:tabular-nums; }
/* 할인 중 — 정가에 취소선을 긋고 그 아래에 판매가를 적는다 */
.lc-tip__p{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.35; }
.lc-tip__p s{ font-size:11.5px; opacity:.55; font-variant-numeric:tabular-nums; }
.lc-tip p{ margin:5px 0 0; font-size:12px; line-height:1.6; color:var(--lc-muted); }
@keyframes lcTip{ from{ opacity:0; transform:translateY(-4px) } }
.lc-nav{ display:flex; align-items:center; gap:8px; }
/* 차례 숫자는 머리줄 자간(.14em)을 물려받지 않는다 — 숫자 사이가 벌어져 한 덩이로 안 읽힌다. */
#lcIndex{ letter-spacing:.04em; margin-right:2px; }
.lc-nav button{ border:0; background:none; padding:6px 4px; font:inherit; font-size:13px; letter-spacing:0;
  color:var(--lc-ink); cursor:pointer; }
.lc-nav button:hover{ color:var(--lc-muted); }

.lc-rail{ display:flex; gap:var(--lc-gap); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:6px var(--gutter) 24px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* 카드가 가운데 서고 양옆 카드가 조금씩 보인다 — 양 끝을 흐려 이어지는 쪽으로 스며들게 한다. 폭은 화면에 비례(폰 28px · PC 최대 120px). */
  --lc-fade:clamp(28px, 9vw, 120px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--lc-fade), #000 calc(100% - var(--lc-fade)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--lc-fade), #000 calc(100% - var(--lc-fade)), transparent 100%); }
.lc-rail::-webkit-scrollbar{ display:none; }

.lc-card{ flex:0 0 auto; width:var(--card-w); display:flex; flex-direction:column; scroll-snap-align:center; }
/* 티켓 홈 — 위아래가 만나는 좌우에 반원 두 개를 파낸다 */
/* ⚠ 윗칸 비율과 `.lc-phone` 의 폭은 **한 벌**이다(2026-09-30).
   폰 높이 = 카드폭 × 폰폭비 × 1.9704(프레임 원본 2796/1419)이고, 윗칸 높이 = 카드폭 × 이 비율이다.
   윗칸이 폰보다 짧으면 overflow:hidden 이 **폰 턱을 잘라낸다** — 예전 1.3 : 68% 조합이 그랬다.
   비율을 줄이거나 폰을 키울 때는 `폰폭비 × 1.9704 + 위아래 여백 ≤ 이 비율` 을 다시 풀 것. */
.lc-top{ position:relative; aspect-ratio:1/1.15; overflow:hidden; background:var(--lc-tint);   /* 2026-11-02 카드에 종이결을 따로 먹이지 않는다 — 뒤 지면(캔버스결)이 비친다 */
  border-radius:var(--lc-r) var(--lc-r) 0 0;
  -webkit-mask:radial-gradient(circle at 0 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)),
               radial-gradient(circle at 100% 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px));
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle at 0 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px)),
               radial-gradient(circle at 100% 100%,#0000 var(--notch),#000 calc(var(--notch) + .5px));
          mask-composite:intersect; }
/* 아랫단 — 글 높이에 맡기지 않고 카드 폭에 비례시킨다(어느 폭에서도 비율이 같게).
   ⚠ 1.2 · 1.45 로 늘려 봤다가 **둘 다 되돌렸다**(2026-09-30). [+] VIEW SAMPLE 이
     `margin-top:auto` 로 바닥에 붙어 있어, 늘린 만큼 글과 벌어져 빈 칸으로 읽혔다.
     길게 가는 방향은 이미 두 번 실패했으니 되살리지 말 것.
   ⚠ 2026-09-30 에 사용자 요청으로 **조금만**(.85 → .91 · 폰 .82 → .88) 늘렸다. 이 이상은 위 이유로 빈 칸이 된다. 
   ⚠ 그 뒤 다시 조금 줄였다(.86 · 폰 .90) — 띠 팝업이 서면 카드 바닥이 화면 밖으로 밀렸다. */
.lc-body{ position:relative; flex:1; min-height:calc(var(--card-w) * .86); display:flex; flex-direction:column; background:var(--lc-tint);
  border-radius:0 0 var(--lc-r) var(--lc-r); padding:22px 20px 20px;   /* ⚠ 위 조각과 겹치지 않는다 — 반투명이라 겹치면 이음매에 진한 줄이 선다 */
  -webkit-mask:radial-gradient(circle at 0 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)),
               radial-gradient(circle at 100% 0,#0000 var(--notch),#000 calc(var(--notch) + .5px));
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle at 0 0,#0000 var(--notch),#000 calc(var(--notch) + .5px)),
               radial-gradient(circle at 100% 0,#0000 var(--notch),#000 calc(var(--notch) + .5px));
          mask-composite:intersect; }

/* 폰 목업 — 프레임 PNG(원본 1419×2796)에서 잰 화면 자리.
   ⚠ 자리는 **가운데 고정**이다 — `top/left` 를 손으로 계산하지 말 것(폭을 바꿀 때마다 어긋났다).
     폭만 고치면 가로·세로 모두 저절로 가운데에 선다.
   ⚠ 폰 높이 = 카드폭 × 폰폭비 × 1.9704 다. 그 값이 윗칸 비율(.lc-top 의 1.15)보다 크면
     넘치는 만큼 **위아래가 균등하게 잘린다**(overflow:hidden). 통째로 보이려면 폰폭비 ≤ 0.50. */
.lc-phone{ position:absolute; left:50%; top:65%; transform:translate(-50%,-50%);
  width:70%; aspect-ratio:1419/2796; }
.lc-phone__shadow{ position:absolute; left:4.86%; top:2.5%; width:90.13%; height:95%; border-radius:16.4%/7.9%;
  box-shadow:0 26px 44px -18px rgba(30,28,25,.42), 0 2px 6px rgba(30,28,25,.08); }
.lc-phone__screen{ position:absolute; left:8.456%; top:4.292%; width:83.087%; height:91.416%;
  border-radius:14%/6.456%; overflow:hidden; background:#0d0d0d; container-type:inline-size; }
/* ⚠ 화면 바탕은 베젤과 같은 검정이다. 예전 밝은 회색(#dedbd6)은 폰이 반 픽셀 위치(PC 폭 1511·1707px 등)에 놓일 때
   프레임 구멍 가장자리·윗모서리를 따라 하얀 실선·띠로 비쳤다(마우스를 올려 커지면 가려진다). */
.lc-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
/* 상태 표시줄 아래 캡처 — 화면 끝까지 채운다(높이 auto 면 캡처가 짧아 아래에 빈 띠가 비친다). */
.lc-shot.is-below{ inset:auto; left:0; top:6.338%; height:93.662%; }
.lc-phone__frame{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.lc-sb{ position:absolute; left:0; top:0; width:100%; height:6.338%; display:flex; align-items:center;
  justify-content:space-between; padding:0 7.5% 0 10.5%; box-sizing:border-box;
  font:600 4.3cqw/1 -apple-system,system-ui,sans-serif; }
.lc-sb i{ display:block; width:6.6cqw; height:3.2cqw; border:.35cqw solid currentColor; border-radius:1cqw;
  box-sizing:border-box; padding:.4cqw; }
.lc-sb i::after{ content:""; display:block; width:100%; height:100%; background:currentColor; border-radius:.35cqw; }
.lc-island{ position:absolute; left:25%; top:1.015%; width:49.5%; height:5.535%; border-radius:999px; background:#000; }

.lc-name{ font-family:'Archive Garamond Pro','IBM Plex Mono',serif; font-size:25px; line-height:1.1; letter-spacing:-.02em; }
.lc-meta{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:11px; line-height:1.3; color:var(--lc-muted); }
.lc-line{ position:relative; height:1px; background:var(--lc-line); margin:15px 0 26px; }
.lc-line::after{ content:""; position:absolute; top:50%; left:var(--pos); width:6px; height:6px; border-radius:50%;
  background:var(--lc-dot); transform:translate(-50%,-50%); }
.lc-desc{ font-size:11px; line-height:1.6; color:var(--lc-ink2); text-wrap:pretty; text-transform:uppercase; word-break:normal; }
/* [+] VIEW SAMPLE — **밑줄을 늘 둔다**(2026-09-30). 글자만 놓여 있던 때는 눌러 볼 것으로 보이지
   않아 미리보기가 있는 줄 모르고 지나쳤다. 티켓 전체가 과녁이지만, 어디로 가는지는 이 줄이 말한다. */
.lc-cta{ margin-top:auto; padding-top:40px; font-size:12px; line-height:1.3; align-self:flex-start;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  text-decoration-color:rgba(28,26,23,.32); transition:text-decoration-color .2s; }

/* ══ 티켓 한 장이 통째로 과녁이다 ══ 카드 클릭을 JS 가 [+] VIEW SAMPLE 로 넘긴다(bridge.jsp).
   ⚠ `.lc-card` 에 transform 을 주지 말 것 — 윗칸·아랫칸이 `background-attachment:fixed` 로
     종이를 깔아, 조상에 transform 이 생기면 결의 기준이 화면에서 카드로 바뀐다. 그러면
     카드마다 결이 따로 놀아 "한 장의 종이 위" 라는 인상이 깨진다. 움직임은 폰 목업만 맡는다. */
.lc-card{ cursor:pointer; }
.lc-phone{ transition:transform .3s var(--e-out); }
@media (hover:hover){
  .lc-card:hover .lc-phone{ transform:translate(-50%,-50%) scale(1.035); }
  .lc-card:hover .lc-cta{ text-decoration-color:currentColor; }
}
/* 손가락에도 응답한다 — hover 가 없는 화면에서 "눌렸다"를 알리는 유일한 신호다. */
.lc-card:active .lc-phone{ transform:translate(-50%,-50%) scale(.985); }
/* 폰 — 글·여백을 한 단 줄이고 윗단 비율을 낮춰 카드 한 장이 버튼까지 화면에 들어오게 한다. */
@media (max-width:639.98px){
  .lc{ --card-w:min(210px, 55vw, max(150px, calc((100svh - 120px - var(--pop-h, 0px)) / 2.13))); --lc-gap:12px; }
  .lc-head{ padding-bottom:5px; font-size:11px; }
  .lc-body{ min-height:calc(var(--card-w) * .90); padding:18px 22px 18px; }
  .lc-name{ font-size:21px; }
  .lc-meta{ margin-top:10px; font-size:9.5px; }
  .lc-line{ margin:11px 0 16px; }
  .lc-desc{ font-size:9.5px; line-height:1.55; }
  .lc-cta{ padding-top:20px; font-size:11px; }
}

/* ══════════ 포함 기능 ══════════ 두 열로 흐르는 체크 목록 */
/* ⚠ **두 열 고정**이다. `auto-fit` 으로 두면 넓은 화면에서 세 열이 되어 마지막 긴 항목만
   두 줄로 흘러 줄이 어긋난다. 열은 `minmax(0,1fr)` 로 적는다 — 맨 `1fr` 은 칸 내용보다
   못 줄어들어 긴 문구가 있는 열이 넓어진다. */
.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,5vw,56px); border-top:1px solid var(--line); }
.feat__i{ display:flex; align-items:baseline; gap:16px; padding:13px 2px;
  border-bottom:1px solid var(--line); font-size:14px; line-height:1.45;
  letter-spacing:-.01em; text-wrap:pretty; }
.feat__c{ position:relative; flex:none; width:15px; height:15px; transform:translateY(2px);
  border:1px solid rgba(30,28,25,.22); border-radius:3px; }
.feat__c::after{ content:''; position:absolute; left:4.5px; top:2px; width:4px; height:8px;
  border-right:1.4px solid var(--ink); border-bottom:1.4px solid var(--ink); transform:rotate(42deg); }
/* 스탠다드에서만 되는 줄 — 글자 옆에 테두리만 두른 작은 꼬리표. 색을 들이지 않는다(지면 어휘 그대로).
   ⚠ 괄호로 적던 「(스탠다드)」를 대신한다 — 줄이 길어져 두 열의 줄이 어긋났다. */
.feat__p{ display:inline-block; margin-left:6px; padding:1px 5px; vertical-align:1px;
  border:1px solid rgba(30,28,25,.3); border-radius:2px;
  font-family:var(--ar, inherit); font-size:9px; font-weight:500; letter-spacing:.08em;
  line-height:1.5; color:var(--soft, rgba(30,28,25,.6)); white-space:nowrap; }

/* ══════════ 자주 묻는 질문 ══════════
   ⚠ 여는 방식은 `grid-template-rows:0fr → 1fr` 이다. max-height 로 되돌리지 말 것 —
     답변 길이에 맞춰 시간이 어긋나고, 긴 답이 잘린다. */
.faq{ border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 2px; border:0; background:transparent; text-align:left;
  font-size:14px; font-weight:600; letter-spacing:-.01em; transition:color .2s; }
.faq__q:hover{ color:var(--mute); }
/* 표식 — 가로선 하나에 세로선이 겹쳐 있다가, 열리면 세로선이 누워 사라진다(+ → −) */
.faq__m{ position:relative; flex:none; width:12px; height:12px; }
.faq__m::before, .faq__m::after{ content:''; position:absolute; top:5.5px; left:0;
  width:12px; height:1.2px; background:currentColor; }
.faq__m::after{ transform:rotate(90deg); transition:transform .35s var(--e-out); }
.faq__i.is-open .faq__m::after{ transform:rotate(0deg); }
.faq__w{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--e-out); }
.faq__i.is-open .faq__w{ grid-template-rows:1fr; }
.faq__w > div{ overflow:hidden; }
.faq__a{ margin:0; padding:0 2px 18px; font-size:13.5px; line-height:1.65;
  color:var(--soft); text-wrap:pretty; }
.faq__ask{ margin:18px 0 0; font-size:12px; line-height:1.7; color:var(--mute); }
.faq__ask a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-3); }
.faq__ask a:hover{ color:var(--mute); }

/* ══════════ 로그인 ══════════ */
/* ⚠ 이 두 줄에는 `text-wrap:pretty` 를 쓰지 않는다 — 줄바꿈을 마크업의 `<br>` 로 직접 잡아 둔
   문단이기 때문이다. Safari 는 `pretty` 를 문단 전체를 다시 재는 최적화로 구현해서, 상자를
   가장 긴 줄보다 좁게 잡고 우리가 잡아 둔 줄을 한 번 더 쪼갠다(아이폰 15 Pro 에서 제목이
   두 줄이 아니라 세 줄로 떨어졌다. Chromium 에서는 재현되지 않는다).
   ⚠ 자유롭게 흐르는 글(`.feat__i` · `.faq__a`)에는 그대로 둔다 — 거기서는 제 일을 한다. */
.h2--login{ margin:12px 0 0; font-size:clamp(19px,3.4vw,24px); line-height:1.35; }
.h2--login img{ display:block; height:clamp(30px,5vw,38px); width:auto; }
.lead--login{ margin:20px 0 0; font-size:12.5px; line-height:1.6; color:var(--soft); }
.login__expired{ margin-top:10px; color:var(--ink); }
/* ⚠ 이 화면에서 채도가 있는 면은 이 버튼 하나뿐이다. 카카오 노랑은 공식 색을 그대로 쓴다. */
.kakao{
  width:100%; max-width:320px; height:50px; margin-top:28px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:25px; background:var(--kakao); color:var(--kakao-ink);
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; transition:filter .2s;
}
.kakao:hover{ filter:brightness(.95); color:var(--kakao-ink); }
/* 아이콘은 검정 누끼 한 장을 마스크로 쓴다(전 화면 공통 규칙).
   ⚠ `display:block` 이 없으면 span 이 inline 이라 width·height 가 먹지 않아 **아이콘이 사라진다.** */
.ico-kakao{ display:block; flex:none; width:17px; height:17px; background:currentColor;
  -webkit-mask:url(../img/kakao.png) center/contain no-repeat;
          mask:url(../img/kakao.png) center/contain no-repeat; }
/* 네이버 스토어 구매 고객 — 카카오 버튼과 같은 폭의 **선 버튼**이다(면을 채우지 않는다). */
.naverbuy{
  width:100%; max-width:320px; height:46px; margin-top:10px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line-3); border-radius:25px; background:none; color:var(--ink);
  font-size:13.5px; font-weight:500; letter-spacing:-.01em; transition:border-color .2s;
}
.naverbuy:hover{ border-color:var(--ink); color:var(--ink); }
/* 네이버 심볼 — 받은 그림을 그대로 쓴다(색을 입히지 않는다). 카카오 아이콘과 같은 크기. */
.ico-naver{ display:block; flex:none; width:17px; height:17px; }
/* 휴대폰 번호 로그인 — 카카오 버튼 아래의 **작은 글자 한 줄**이다.
   ⚠ 버튼으로 키우지 말 것. 새로 오는 사람의 길은 카카오 하나이고, 이건 기존 고객만 찾는 길이다. */
.login__phone{ display:inline-block; margin-top:16px; font-size:12px; color:var(--mute);
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .2s, border-color .2s; }
.login__phone:hover{ color:var(--ink); border-bottom-color:var(--line-3); }
.login__back{ margin-top:14px; padding:0; border:0; background:none;
  font-size:12px; color:var(--mute); transition:color .2s; }
.login__back:hover{ color:var(--ink); }
.login__terms{ margin:15px 0 0; font-size:11px; line-height:1.6; color:var(--faint); }

/* ══════════ 푸터 ══════════ 한 줄 — 좌 Contact · Policy / 우 저작권 */
.ft{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(16px,5vw,40px); border-top:1px solid var(--line-2); }
/* Contact — 인스타그램·카카오톡 채널을 한 단어로 접었다(푸터 자리가 모자라서). 누르면 샘플 음악 [출처]처럼 말풍선이 뜬다.
   글자만 · 버튼 모양은 두르지 않는다(옆의 Terms + Policy 와 같은 글자 결). */
.ft__ct{ position:relative; display:inline-block; }
.ft__ctb{ padding:10px 0; border:0; background:none; cursor:pointer; font:inherit; font-size:12px; letter-spacing:.04em; color:var(--soft);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-3); white-space:nowrap; transition:color .2s, text-decoration-color .2s; }
.ft__ctb:hover, .ft__ctb[aria-expanded="true"]{ color:var(--ink); text-decoration-color:var(--ink); }
/* ⚠ 왼쪽 끝에 맞춰 연다 — 푸터가 화면 왼쪽에 붙어 있어 가운데 정렬로 두면 밖으로 삐져나간다. `[hidden]` 짝을 함께 둔다(display 를 줬다). */
.ft__pop{ position:absolute; left:0; bottom:calc(100% + 4px); z-index:5; display:flex; flex-direction:column; gap:2px; padding:8px 4px; min-width:150px;
  background:var(--ink); color:var(--bg); font-size:12px; letter-spacing:.02em; }
.ft__pop[hidden]{ display:none; }
.ft__pop a{ display:flex; align-items:center; gap:9px; padding:7px 12px; color:inherit; text-decoration:none; white-space:nowrap; }
.ft__pop a:hover{ background:rgba(255,255,255,.1); }
/* 말풍선 아래 꼭지 — Contact 글자 위에 선다 */
.ft__pop::after{ content:''; position:absolute; left:18px; top:100%; border:5px solid transparent; border-top-color:var(--ink); }
.ft__pico{ flex:none; width:14px; height:14px; }
.ft__pico--ig{ background-color:currentColor; -webkit-mask:url(../img/instagram.png) center/contain no-repeat; mask:url(../img/instagram.png) center/contain no-repeat; }
/* 카카오 로고는 검은 말풍선이라 어두운 바탕에서는 뒤집어 흰 말풍선으로 쓴다 */
.ft__pico--kk{ width:16px; height:auto; filter:invert(1); }
.ft__copy{ font-size:11px; letter-spacing:.02em; color:var(--mute); text-align:right; }
/* 푸터 왼쪽 — 인스타그램 아이콘 옆에 「Policy+」(개인정보 처리방침으로 간다 · 약관 등이 늘면 이 이름 아래로 모은다). 글자만, 버튼 모양은 두르지 않는다.
   ⚠ 이름은 영문 한 단어로 둔다(인스타 아이콘과 같은 키) — 한글로 길게 쓰면 폰 폭에서 저작권과 부딪힌다.
   눌림 영역은 위아래 패딩으로 키운다. */
.ft__left{ display:flex; align-items:center; gap:14px; min-width:0; }
.ft__priv{ font-size:12px; letter-spacing:.04em; color:var(--soft); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--line-3); padding:10px 0; white-space:nowrap; transition:color .2s, text-decoration-color .2s; }
.ft__priv:hover{ color:var(--ink); text-decoration-color:var(--ink); }
.login__terms a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ══════════ 좁은 화면 ══════════ 카드가 한 장씩만 보이는 구간(JS 가 640px 로 가른다) */
@media (max-width:639.98px){
  .ft{ padding:14px 16px; }
  .ft__copy{ font-size:10.5px; }
  .ft__left{ gap:12px; }
  .ft__priv{ font-size:11.5px; }
  .main{ gap:12px; }
  .feat{ grid-template-columns:minmax(0,1fr); }   /* 한 열로 */
  /* 메뉴 띠 — 폰에서는 184px 이 길어 보여 살짝 줄인다(메뉴 글자가 작아지는 폭이다). */
  .menu{ height:160px; }
  .menu__items{ bottom:22px; }
}

/* 주소로 곧장 들어오면(`/#features`) 브라우저가 그 요소로 스크롤한다 — 고정 헤더만큼 띄워 둔다.
   ⚠ setView 가 `.main.scrollTop = 0` 으로 맞추지만, 브라우저의 앵커 스크롤이 그보다 늦게
     일어나는 경우가 있어 제목 윗줄이 헤더에 가렸다(2026-09-21). */
.view{ scroll-margin-top:calc(var(--hd-h) + 24px); }

/* ══════════ 샘플 배경음악 출처 ══════════ 샵 레일 아래 한 줄.
   ⚠ 조그맣고 옅게 — 샘플을 보러 온 지면에서 눈에 걸리면 안 된다.
   ⚠ 말풍선에 `[hidden]` 짝을 반드시 둔다 — display 를 준 요소는 hidden 속성만으로 안 숨는다. */
/* ⚠ 지면 오른쪽 끝에 붙인다(2026-10-05 지시). `.view` 가 `align-items:center` 라 그냥 두면 가운데 서므로
   `align-self:stretch` 로 폭을 받고 글자만 오른쪽으로 보낸다. */
/* ⚠ `--gutter` 는 `.lc` 안에서만 선언된다 — 여기는 그 바깥이라 **같은 식을 직접** 쓴다
   (var 로 받으면 폴백 20px 이 걸려 PC 에서 레일 머리글과 오른쪽 끝이 어긋난다). */
.bgm{ align-self:stretch; margin:0; padding-right:max(20px, calc((100vw - 1200px) / 2)); text-align:right;
  font-size:10.5px; letter-spacing:.02em; color:var(--faint); }
.bgm__in{ position:relative; display:inline-block; }
.bgm__b{ margin-left:5px; padding:2px 4px; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.bgm__b:hover{ color:var(--mute); }
/* ⚠ 오른쪽 끝에 맞춰 연다 — 가운데 정렬로 두면 화면 밖으로 삐져나간다. */
.bgm__pop{ position:absolute; right:0; bottom:calc(100% + 7px);
  display:block; padding:6px 10px; white-space:nowrap;
  background:var(--ink); color:var(--bg); font-size:10.5px; }
.bgm__pop[hidden]{ display:none; }
.bgm__pop a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* 말풍선 아래 꼭지 — [출처] 버튼 위에 선다(말풍선이 오른쪽 맞춤이라 좌표도 오른쪽 기준). */
.bgm__pop::after{ content:''; position:absolute; right:16px; top:100%;
  border:4px solid transparent; border-top-color:var(--ink); }

/* 샵 카드의 BEST 1·2·3 — 많이 고른 세 디자인의 폰 목업 왼쪽 위에 뜨는 말풍선. 샘플 창의 말풍선(.tpv__pick)과 같은 꼴이다
   (흰 바탕 · 둥근 모서리 · 아래 꼬리). 꼬리는 폰 쪽(오른쪽 아래)을 가리킨다. */
.lc-best{ position:absolute; z-index:3; left:12px; top:10px; pointer-events:none;
  padding:5px 10px; border-radius:12px; white-space:nowrap;
  background:rgba(255,255,255,.74); color:var(--ink); font-size:9.5px; font-weight:600; line-height:1.3; letter-spacing:.08em;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);   /* 살짝 비친다 — 흐림이 글자 뒤를 받쳐 준다 */
  box-shadow:0 8px 20px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(38,37,34,.06);
  animation:lcBestFloat 3.4s ease-in-out infinite; }
/* 꼬리 — 끝이 오른쪽으로 살짝 휜다. 테두리 삼각형으로는 휘지 못해 마스크(SVG)로 딴다.
   ⚠ 몸통과 겹치지 않게 바로 아래(top:100%)에 붙인다 — 반투명이라 겹친 자리만 진해진다. */
.lc-best::after{ content:''; position:absolute; right:13px; top:100%; width:12px; height:9px;
  background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M0 0H8C8 4 9.5 7 12 9C7 8.5 2 5.5 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M0 0H8C8 4 9.5 7 12 9C7 8.5 2 5.5 0 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
/* 두둥실 — 3px 를 천천히 오르내린다. 카드 순위마다 박자를 어긋나게 하지 않는다(화면에는 한두 개만 보인다). */
@keyframes lcBestFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){ .lc-best{ animation:none; } }

/* ══════════ 이벤트 팝업 ══════════ 운영자 콘솔의 「팝업」 탭이 켠다(BridgeController 의 popup).
   방식은 둘 — 바로 카드 / 헤더 위 띠(누르면 카드). 카드는 샵 티켓과 같은 종이·홈·활자다.
   ⚠ 띠가 서면 `body.pop-bar-on` 이 `--pop-h` 를 세우고, 헤더·메뉴·본문이 그만큼 내려선다(셋이 한 벌).
   ⚠ 띠는 메뉴 가림막(49)보다 아래다 — 메뉴가 열리면 함께 어두워진다. */
body.pop-bar-on{ --pop-h:38px; }
.pop-bar{ position:fixed; top:0; left:0; right:0; z-index:41; height:38px; display:flex; align-items:center;
  background:#1c1a17; color:#fff; animation:popDrop .5s var(--e-out) both; }
.pop-bar[hidden]{ display:none; }
.pop-bar__t{ flex:1; min-width:0; height:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 0 0 46px; border:0; background:none; color:inherit; font:inherit; font-size:12px; cursor:pointer; }
.pop-bar__t span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-bar__t u{ flex:none; text-underline-offset:3px; text-decoration-thickness:1px; opacity:.8; }
.pop-bar__x{ flex:none; width:46px; height:100%; border:0; background:none; color:inherit; font-size:13px;
  opacity:.6; cursor:pointer; }
@keyframes popDrop{ from{ transform:translateY(-100%) } }

/* 뒤는 어둡게 덮지 않는다 — 살짝 흐리기만 한다. */
.pop-scrim{ position:fixed; inset:0; z-index:70; background:rgba(250,250,248,.18);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:popFade .45s ease both; }
.pop-scrim[hidden], .pop-card[hidden]{ display:none; }
/* 카드는 지면과 **같은 종이**다(body 와 같은 겹). 색으로는 지면과 갈리지 않으므로 옅은 그림자로 띄운다.
   ⚠ 그림자는 바깥 상자에, 티켓 홈(mask)은 안쪽 판에 준다 — 한 요소에 같이 주면 홈이 그림자까지 파낸다. */
.pop-card{ position:fixed; z-index:71; left:50%; top:50%; width:min(300px, calc(100vw - 56px));
  transform:translate(-50%,-50%); color:#1c1a17;
  /* 앞의 넷이 **테두리**다(사방 1px · 옅은 회색) — 카드가 지면과 같은 종이라 그림자만으로는 경계가 안 선다.
     ⚠ border 로 두르지 않는다. 티켓 홈(mask)이 테두리까지 파내 홈 둘레에는 선이 안 생긴다 — 그림자는 홈 모양을 따라간다. */
  filter:drop-shadow(1px 0 0 rgba(30,28,25,.11)) drop-shadow(-1px 0 0 rgba(30,28,25,.11))
         drop-shadow(0 1px 0 rgba(30,28,25,.11)) drop-shadow(0 -1px 0 rgba(30,28,25,.11))
         drop-shadow(0 16px 30px rgba(30,28,25,.16)) drop-shadow(0 1px 2px rgba(30,28,25,.10));
  animation:popRise .6s var(--e-out) both; }
/* 흰 겹을 지면(.225)보다 두껍게 얹어 결을 눌렀다 — 작은 카드에서는 같은 결도 거칠게 읽힌다. */
.pop-card__in{ max-height:calc(100svh - 48px); overflow:auto; --y:calc(100% - 56px);
  background:linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)),
             url(../bridge/paper.jpg) 0 0/384px 384px repeat, var(--bg);
  -webkit-mask:radial-gradient(circle 9px at 0 var(--y),#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 9px at 100% var(--y),#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 var(--y),#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 9px at 100% var(--y),#0000 98%,#000) right/51% 100% no-repeat; }
@keyframes popFade{ from{ opacity:0 } }
/* 닫힐 때 — 열릴 때의 거울상(조금 빠르게). JS 가 `.is-out` 을 붙였다가 끝나면 hidden 으로 바꾼다. */
.pop-scrim.is-out{ animation:popFadeOut .32s ease both; }
.pop-card.is-out{ animation:popSink .32s var(--e-out) both; }
@keyframes popFadeOut{ to{ opacity:0 } }
@keyframes popSink{ to{ opacity:0; transform:translate(-50%, calc(-50% + 10px)) scale(.985) } }
@keyframes popRise{ from{ opacity:0; transform:translate(-50%, calc(-50% + 12px)) scale(.985) } }
.pop-card__top{ padding:20px 24px 24px; }
.pop-card__row{ display:flex; justify-content:space-between; gap:12px; min-height:12px;
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:.12em; color:#6e6a64; }
.pop-card .tpv__spark{ margin:18px 0 6px -6px; }
.pop-card__en{ font-family:'Archive Garamond Pro','IBM Plex Mono',serif; font-size:29px; line-height:1.08; letter-spacing:-.02em; }
.pop-card__ko{ margin-top:14px; font-size:15px; font-weight:600; line-height:1.45; word-break:keep-all; }
.pop-card__tx{ margin-top:8px; font-size:12.5px; line-height:1.75; color:#4a4742; white-space:pre-line; word-break:keep-all; }
.pop-card__go{ display:block; margin-top:22px; padding:14px 0; text-align:center; background:#1c1a17; color:#fff;
  font-size:13px; text-decoration:none; }
.pop-card__bot{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  border-top:1px dashed #8d8a84; }
.pop-card__bot button{ min-height:44px; padding:0 8px; border:0; background:none; font:inherit; font-size:12px;
  color:#6e6a64; cursor:pointer; }
.pop-card__bot button:last-child{ margin-left:auto; color:#1c1a17; font-weight:500; }
/* 열면 포커스는 카드 자체가 받는다(외곽선 없음) — 버튼에 주면 검은 네모가 그려져 눌린 것처럼 보인다. */
.pop-card:focus{ outline:none; }
.pop-card__bot button:focus-visible{ outline:1px solid rgba(0,0,0,.22); outline-offset:-6px; }
/* 미리보기를 열면 [닫기]에 포커스가 간다 — 기본 외곽선이면 검은 테가 둘려 눌린 것처럼 보인다.
   옅은 선만 남긴다(지우지는 않는다 — 키보드로 온 사람에게는 보여야 한다). */
.tpv__close:focus, .tpv__pane:focus{ outline:none; }
.tpv__close:focus-visible, .tpv__make:focus-visible{ outline:1px solid rgba(0,0,0,.22); outline-offset:2px; }