/* 랜딩 3안이 함께 쓰는 것.
   ⛔ 앱(app.css)에 있는 것을 여기서 다시 칠하지 않는다.
      여기 있는 건 **앱에 없는 자리**(QR·고르는 띠)와,
      앱과 **쓰임이 다른 곳**(줄바꿈)뿐이다. */

/* ── 랜딩 글꼴 = 강원교육모두 (사장님 결정 2026-08-06) ────────────────
   앱은 제목만 고른 글꼴(--ff)이고 본문은 프리텐다드(--ffui)로 나뉘지만,
   **파는 페이지는 한 벌로 간다.** 사장님이 24벌을 다 넘겨 보고 고르신 것이다.
   ⛔ app.css 의 :root 를 고치면 **앱까지** 바뀐다. 여기서만 덮어쓴다.
   ⛔ 굵기가 300·700 두 벌뿐이라 사이를 범위로 이어 준다. 안 이어 주면
      600 짜리 본문이 300 면(가는 획)으로 떨어져 흐리게 보인다.
   출처 표기: 강원특별자치도교육청 (공공누리) — 아래 판매자 줄에 이미 적혀 있다. */
@font-face{ font-family:'lb-gwmodu'; src:url('/assets/fonts/gw-modu-300.woff2') format('woff2');
  font-weight:100 500; font-display:swap; }
@font-face{ font-family:'lb-gwmodu'; src:url('/assets/fonts/gw-modu-700.woff2') format('woff2');
  font-weight:600 900; font-display:swap; }
/* ⛔ 2026-08-14 사장님 지시로 **기본체(프리텐다드)** 로 되돌렸다.
   「글씨체를 다른 걸로, 기본체로」·「PC 하고 같은 체」 — 폰에서 보이는 둥근 글꼴이
   앱(PC)에서 보던 것과 달라 딴 서비스처럼 보였다. 파는 화면과 산 뒤의 화면은 같아야 한다.
   ⚠ 위 @font-face(강원교육모두)는 **지우지 않았다** — 글꼴 고르기 목록에서 여전히 쓴다.
   ⚠ 되돌리려면 이 두 줄만 'lb-gwmodu' 로 바꾸면 된다(2026-08-06 결정이 그것이었다). */
:root{
  --ff:'lb-pre';
  --ffui:'lb-pre';
}

/* ── 어느 안을 보고 있나 알려주는 띠 (고르실 때만 씁니다 · 진짜 페이지엔 없습니다) ── */
.pickbar{
  position:sticky;top:0;z-index:50;
  background:var(--ink);color:var(--bg);
  padding:9px 16px;font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pickbar b{font-weight:800;}
.pickbar a{
  margin-left:auto;background:var(--bg);color:var(--ink);
  padding:3px 12px;border-radius:999px;font-weight:800;font-size:14px;
}
.pickbar a + a{margin-left:6px;}
@media (max-width:520px){ .pickbar a{margin-left:0;} }

/* ── 설치 QR — 폰을 들어 바로 비추는 자리라 크게 둔다 ── */
/* ⛔ app.css 의 `.qrbox{width:150px;height:150px}` 를 반드시 풀어 준다.
      랜딩은 app.css 를 그대로 불러 쓰는데, 거기 .qrbox 는 앱 안의 **작은** QR 자리다.
      안 풀면 260px 짜리 QR 이 150px 칸에 눌려 깨져 보인다 (사장님 지적 2026-08-02). */
.qrbox{display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0 20px;
  width:auto;height:auto;}
.qrpaper{background:var(--paper);border:1px solid var(--line2);padding:20px;line-height:0;box-shadow:var(--sh);}
.qrpaper img{display:block;width:260px;height:260px;}
@media (max-width:420px){ .qrpaper{padding:14px;} .qrpaper img{width:210px;height:210px;} }
.qrcap{font-size:17px;font-weight:600;color:var(--sub);text-align:center;}
.qrcap b{color:var(--ink);font-weight:800;}

/* 판매자 한 줄 — 법으로 적어야 하는 것이라 빠짐없이 적되 눈에 안 걸리게 작게 둔다.
   ⛔ 전화번호를 강조하지 않는다 (사장님 지시 2026-08-02). 링크색도 주지 않는다. */
/* ⛔ 판매자 칸은 **흰 상자 밖**이라 글씨가 배경 그림 위에 바로 얹힌다
   (사장님 물음 2026-08-18 : 「배경하고 글이 겹칠 때 어떻게 보이게 할까」).
   웬디 러브처럼 사진에서 뜬 테마에서는 커튼 결·하트·봉투가 글자 사이로 지나가
   사업자등록번호가 안 읽혔다. 앱이 이미 쓰는 방법을 그대로 쓴다 :
   --onbg2(그림 위에 올릴 글씨색) + --onbgsh(글자 테두리 그림자). 둘 다 patterns.js 가
   배경 밝기를 보고 정해 준다. CSS 테마에는 없으니 옛 색으로 되돌아간다. */
.sellerline{
  margin:2px 0 0;font-size:14px;line-height:1.85;font-weight:600;
  color:var(--onbg2,var(--faint));text-shadow:var(--onbgsh,none);word-break:keep-all;
}
/* 맨 아래 저작권 한 줄도 같은 자리다 */
#문의 > .daynote{color:var(--onbg2,var(--faint));text-shadow:var(--onbgsh,none);}
.sellerline a{color:inherit;text-decoration:none;}

/* ── 온라인 문의창 ────────────────────────────────────────────
   ⛔ 메일 앱을 바로 여는 대신 **무엇에 대한 문의인지 고르고** 보내게 한다.
      그래야 사장님이 열어 보기 전에 급한 것(결제·환불)을 가려낼 수 있다. */
.askdim{
  position:fixed;inset:0;z-index:90;background:rgba(16,18,8,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
@media (min-width:720px){ .askdim{align-items:center;padding:24px;} }
.askbox{
  width:100%;max-width:560px;max-height:92vh;overflow:auto;
  background:var(--paper);border:1px solid var(--line2);box-shadow:var(--sh);
  padding:24px 20px 20px;
}
.askbox h3{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--ink);}
.askbox .fld{margin:16px 0 0;}
.askbox label{display:block;font-size:16px;font-weight:700;color:var(--sub);margin-bottom:7px;}
.askbox select, .askbox input, .askbox textarea{
  width:100%;box-sizing:border-box;background:var(--paper);color:var(--ink);
  border:1px solid var(--line2);padding:13px 12px;font:inherit;font-size:17px;font-weight:600;
}
.askbox textarea{min-height:130px;resize:vertical;line-height:1.7;}
.askbox select{appearance:none;background-image:none;}
.askrow{display:flex;gap:9px;margin-top:20px;}
.askrow .btn{flex:1;}

/* ── 약관·방침 페이지 ────────────────────────────────────────
   ⛔ 앱 CSS 를 그대로 불러 쓴다. 여기 있는 건 **앱에 없는 자리**(긴 법률 글)뿐이다.
   ⛔ 하이픈(—)을 화면 글에 쓰지 않는다 (사장님 지시 2026-08-02).
      법률 문서는 조항이 길어서 읽는 사람이 지친다. 그래서
      ① 조 제목을 크게 띄우고 ② 줄 간격을 앱보다 넓히고 ③ 표를 가로로 흘려 준다. */
/* ── 파는 화면 맨 아래 법정표기 (2026-08-25) ──────────────────
   ⛔ 조용해야 한다. 여기는 읽히는 자리가 아니라 **있어야 하는 자리**다.
   ⛔ 글씨를 더 키우지 말 것. 키우면 마지막 章의 말보다 무거워진다. */
.lfoot{margin:44px 2px 40px;padding-top:20px;border-top:1px solid var(--line2);
  font-size:14px;line-height:1.7;color:var(--onbg2,var(--sub));text-shadow:var(--onbgsh,none);}
.lfr{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:8px;font-weight:700;}
.lfoot a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.lfco{margin-top:10px;font-size:13px;font-weight:600;word-break:keep-all;opacity:.85;}

.legal{margin:20px 2px 40px;}
.legal h2{
  margin:38px 0 14px;font-size:23px;line-height:1.35;font-weight:800;letter-spacing:0;
  font-family:var(--ff),var(--ffui),var(--sys);
  color:var(--onbg,var(--ink));text-shadow:var(--onbgsh,none);
  padding-top:20px;border-top:1px solid var(--line2);
}
.legal h2:first-of-type{margin-top:16px;}
.legal h3{
  margin:24px 0 10px;font-size:19px;font-weight:800;
  color:var(--onbg,var(--ink));text-shadow:var(--onbgsh,none);
}
.legal p, .legal li{
  font-size:17px;line-height:1.85;font-weight:600;
  color:var(--onbg2,var(--sub));text-shadow:var(--onbgsh,none);word-break:keep-all;
}
.legal p{margin:0 0 12px;}
.legal b{color:var(--onbg,var(--ink));font-weight:800;}
.legal ol, .legal ul{margin:0 0 12px;padding-left:24px;}
.legal li{margin-bottom:8px;}
.legal li::marker{color:var(--pop);font-weight:800;}
.legal ul li{list-style:disc;}
.legal a{color:var(--onbg,var(--ink));font-weight:700;}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--line);color:var(--ink);
  padding:2px 6px;border-radius:3px;font-weight:700;
}

/* 표 — 폰에서 넘칠 수 있어 가로로만 흐르게 둔다. 몸통은 절대 가로로 안 흐른다. */
.legal .tw{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch;}
.legal table{border-collapse:collapse;width:100%;min-width:min(560px,100%);background:var(--paper);}
.legal th, .legal td{
  border:1px solid var(--line2);padding:11px 12px;text-align:left;
  font-size:16px;line-height:1.6;font-weight:600;color:var(--sub);word-break:keep-all;
}
.legal th{background:var(--line);color:var(--ink);font-weight:800;white-space:nowrap;}
.legal td b{color:var(--ink);}

/* 꼭 읽어야 하는 칸 — 조항 중에 「나중에 서로 곤란해지는」 것만 상자를 씌운다 */
.legal .warn{
  background:var(--paper);border:1px solid var(--line2);border-left:5px solid var(--pop);
  padding:16px 16px 6px;margin:0 0 18px;box-shadow:var(--sh);
}
.legal .warn p:last-child{margin-bottom:12px;}

/* 머리 — 어느 문서이고 언제부터인지 */
.legalhead{margin:6px 2px 4px;}
.legalhead .ch{
  display:inline-block;background:#101208;color:var(--acc);
  padding:7px 14px;font-size:15px;font-weight:800;letter-spacing:.02em;
  line-height:1.45;margin-bottom:12px;
}
.legalhead h1{
  margin:0 0 8px;font-size:28px;line-height:1.3;font-weight:800;
  font-family:var(--ff),var(--ffui),var(--sys);
  color:var(--onbg,var(--ink));text-shadow:var(--onbgsh,none);
}
.legalhead .when{font-size:16px;font-weight:700;color:var(--onbg2,var(--sub));text-shadow:var(--onbgsh,none);}

/* 차례 — 조가 열여섯 개라 없으면 찾을 수가 없다 */
.toc{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 6px;}
.toc a{
  background:var(--paper);border:1px solid var(--line2);color:var(--sub);
  padding:7px 12px;font-size:15px;font-weight:700;text-decoration:none;
}
.toc a:hover{border-color:var(--pop);color:var(--ink);}

/* 돌아가는 길 — 손님이 약관을 읽다가 길을 잃으면 안 된다 */
.legalback{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0 4px;}

@media (min-width:900px){
  .legalhead, .legal{
    position:relative; left:50%; transform:translateX(-50%);
    width:min(760px, calc(100vw / var(--z, 1.45) - 48px));
  }
  .legal h2{font-size:26px;}
  .legal p, .legal li{font-size:18px;}
}

/* ── 여러 줄로 읽는 목록 ────────────────────────────────
   ⛔ 앱의 .fixrow .nm 은 한 줄로 자른다(월세·보험처럼 이름이 짧은 자리라 그게 맞다).
      랜딩의 설명 목록은 문장이라 자르면 뜻이 사라진다.
      그래서 앱 CSS 는 그대로 두고, 이 목록에만 줄바꿈을 허락한다. */
.fixlist.readable .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.5;}
.fixlist.readable .nm em{margin-top:5px;line-height:1.6;word-break:keep-all;}
.fixlist.readable .fixrow{align-items:flex-start;padding:15px 0;}
.fixlist.readable .day{padding-top:2px;}

/* 얼리버드 — 정가에 줄을 긋고 지금 값을 옆에 둔다.
   ⛔ 서버가 안 되면 정가 그대로 남는다. 파는 페이지가 틀리는 방향은
      「싸게 적어 놓고 비싸게 받는 쪽」이 절대 아니어야 한다. */
.earlyline{display:inline-block;background:var(--acc2, #F2D24E);color:#101208;
  padding:7px 12px;font-size:15px;font-weight:700;margin:0 0 12px;}
.earlyline.hidden{display:none;}
[data-값] .was,[data-값숫자] .was{text-decoration:line-through;color:var(--faint,#8B8877);
  font-weight:600;margin-right:7px;}

/* ══ 구조화 (2026-08-06) ══════════════════════════════════════
   네이버 캠페인·피클플러스가 하는 방식 : 맨 위에 「무엇을 · 얼마에 · 지금 뭘 하면 되나」
   셋만 세우고, 상세는 아래에서 접었다 편다.
   ⛔ 이 페이지의 이야기는 그대로 둔다. 이야기를 걷어내면 이 페이지가 아니게 된다.
      새로 얹는 것은 **안 읽는 사람을 위한 길**이지 이야기를 대신하는 것이 아니다. */

/* ── 맨 위 한눈에 ───────────────────────────────────────── */
.glance{padding-top:22px;}
.glance .gtag{
  display:inline-block;background:#101208;color:var(--acc);
  padding:6px 13px;font-size:15px;font-weight:800;letter-spacing:.02em;margin-bottom:13px;
}
.glance .gh{
  margin:0 0 18px;font-size:27px;line-height:1.32;font-weight:800;letter-spacing:0;
  font-family:var(--ff),var(--ffui),var(--sys);word-break:keep-all;
}
/* 값과 체험기간 — 처음 온 사람이 제일 먼저 묻는 둘 */
.gsum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.gsum > div{background:var(--bg);border:1px solid var(--line2);padding:13px 14px;}
.gsum em{display:block;font-style:normal;font-size:14.5px;font-weight:700;color:var(--faint);}
/* 값은 이 페이지의 얼굴이라 **고른 글꼴을 따라간다** (앱의 .hero .big 과 같은 규칙).
   목록·표 안의 금액은 또렷해야 해서 프리텐다드 그대로 둔다. */
.gsum b{display:block;font-size:24px;font-weight:800;margin:3px 0 2px;line-height:1.15;
  font-family:var(--ff),var(--ffui),var(--sys);}
.gsum s{display:block;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--sub);
  word-break:keep-all;line-height:1.45;}
/* 값이 얼리버드로 바뀌면 두 줄이 된다 — 칸 높이가 흔들리지 않게 줄간격만 좁힌다 */
.gsum b .was{display:inline;font-size:17px;}

/* 세 걸음 — 「지금 뭘 하면 되나」에 답하는 자리 */
.gstep{list-style:none;margin:0 0 16px;padding:0;}
.gstep li{display:flex;align-items:flex-start;gap:12px;padding:11px 2px;}
.gstep li + li{border-top:1px solid var(--line);}
.gstep i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);
  font-style:normal;font-size:15px;font-weight:800;display:flex;align-items:center;
  justify-content:center;margin-top:1px;}
.gstep b{font-size:17.5px;font-weight:800;}
.gstep s{display:block;text-decoration:none;font-size:15.5px;font-weight:600;color:var(--sub);
  margin-top:3px;line-height:1.55;word-break:keep-all;}

/* 차례 — 안 읽는 사람이 원하는 칸으로 바로 가는 길 */
.gtoc{margin:16px 0 0;}

/* ── 뭘 대신 세어 주나 ──────────────────────────────────── */
.fnlist{margin-top:4px;}
.fnrow{display:flex;align-items:flex-start;gap:13px;padding:14px 0;}
.fnrow + .fnrow{border-top:1px solid var(--line);}
.fnno{flex:none;width:28px;height:28px;border:1.5px solid var(--line2);border-radius:50%;
  font-style:normal;font-size:15px;font-weight:800;color:var(--sub);
  display:flex;align-items:center;justify-content:center;margin-top:2px;}
.fnrow.new .fnno{border-color:var(--pop);color:var(--pop);}
.fnb b{display:block;font-size:18px;font-weight:800;line-height:1.4;
  font-family:var(--ff),var(--ffui),var(--sys);}
.fnb b .sticker{margin-left:7px;font-size:13px;padding:3px 8px;vertical-align:2px;}
.fnb em{display:block;font-style:normal;font-size:16px;font-weight:600;color:var(--sub);
  margin-top:5px;line-height:1.65;word-break:keep-all;}
.fnb em b{display:inline;font-size:inherit;color:var(--ink);}

/* ── 접었다 펴는 칸 (유의사항 · 자주 묻는 것) ──────────────
   ⛔ <details> 를 쓴다. 스크립트 없이 폰에서도 그대로 열리고,
      화면낭독기가 「접힘/펼침」을 읽어 준다. 직접 만든 접기는 그게 안 된다. */
.fold summary{
  display:flex;align-items:baseline;gap:10px;list-style:none;cursor:pointer;
  padding-bottom:12px;
}
.fold summary::-webkit-details-marker{display:none;}
.fold summary .t{font-size:20px;font-weight:800;font-family:var(--ff),var(--ffui),var(--sys);}
.fold summary .r{margin-left:auto;font-size:16px;font-weight:700;color:var(--faint);}
.fold summary::after{
  content:'펼치기';font-size:15px;font-weight:700;color:var(--faint);
  border:1px solid var(--line2);padding:4px 10px;flex:none;
}
.fold[open] summary::after{content:'접기';}

.qalist{margin-top:2px;}
.qa{border-top:1px solid var(--line);}
.qa:first-child{border-top:none;}
.qa summary{
  display:flex;align-items:flex-start;gap:10px;list-style:none;cursor:pointer;
  padding:15px 0;font-size:17.5px;font-weight:700;line-height:1.5;word-break:keep-all;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{content:'Q';flex:none;font-size:15px;font-weight:800;color:var(--pop);margin-top:2px;}
.qa summary::after{content:'＋';flex:none;margin-left:auto;font-size:19px;font-weight:700;color:var(--faint);}
.qa[open] summary::after{content:'－';}
.qa[open] summary{padding-bottom:6px;}
.qa em{display:block;font-style:normal;font-size:16px;font-weight:600;color:var(--sub);
  line-height:1.7;word-break:keep-all;padding:0 0 16px 24px;}
.qa em b{color:var(--ink);font-weight:800;}

@media (min-width:900px){
  .glance .gh{font-size:33px;}
  .gsum b{font-size:27px;}
}

/* ── 글꼴 고르개 (2026-08-06 · 2026-08-18 앱에 맞춰 걷어냄) ────────────
   ⛔ 여기 있던 것(금액 견본 .sam · 설명 줄 .bd/.hn · 좁은 폰 보정)을 **다 뺐다.**
      앱이 2026-08-17 에 「이름만 · 2열」로 바뀌었는데 파는 화면만 견본과 설명을
      달고 있었다. 앱의 .fontlist/.fnt (app.css)를 그대로 쓰면 두 화면이 같아진다.
   ⛔ 되살릴 일이 있으면 **앱을 먼저 바꾸고** 여기를 맞출 것. 순서가 반대면 또 어긋난다. */

/* ⛔ 글꼴 이름이 하얀 상자를 넘어갔다 (사장님 지적 2026-08-18).
   앱은 이름을 시스템 글씨로 찍는데 랜딩은 **그 글꼴로** 찍어서, 폭이 넓은 서체가
   두 칸 격자를 밀어냈다. 글씨를 줄이고 넘치면 줄여 앉힌다 — 칸은 안 벌어진다.
   ⛔ min-width:0 을 빼지 말 것. 격자 칸은 그게 없으면 안 줄어든다. */
.fontlist{min-width:0;}
.fnt{padding:13px 8px;min-width:0;overflow:hidden;}
.fnt .nm{font-size:16px;min-width:0;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:430px){ .fnt .nm{font-size:15px;} }

/* ── 버티기 · 직접 넣는 칸 : 랜딩은 입력칸이 아니라 **모양만** 보여준다 */
.hgi.hgme .mein{font-size:17px;font-weight:800;color:var(--faint);}

/* ── 폰 목업 · 겹쳐 세운 포트폴리오 배치 (2026-08-11 · 사장님 레퍼런스 두 장) ──────
   ⛔ **글꼴을 앱 것으로 되돌린다.** 랜딩은 :root 에서 --ff·--ffui 를 강원교육모두로 덮는데,
      그 글꼴은 굵기가 300·700 두 벌뿐이라 앱의 중간 굵기(500·600)가 전부 700 으로 떨어진다.
      그래서 폰 속이 통째로 굵어 보였다(사장님 지적 「무식하게 볼드처리하지마」).
   ⛔ **바탕은 라임(--bg)이다.** 앱은 html{background:var(--bg)} 이고 그 위에 흰 카드가 뜬다.
      흰 바탕에 맨몸으로 놓으면 앱과 딴판이 되고 「매력없다」가 된다(2026-08-11 지적).
   ⛔ zoom 을 쓴다(transform:scale 이 아니라). scale 은 자리 높이를 안 줄여 안에서 스크롤이 안 된다. */
/* ⛔ 바탕 회색을 뺐다 (사장님 지시 2026-08-18 : 「폰 목업 바탕에 회색 제거」).
   흰 카드 안에 회색 판이 하나 더 깔려 상자가 두 겹으로 보였다. */
.mock .stage{position:relative;display:flex;justify-content:center;align-items:flex-end;
  gap:0;margin:22px 0 16px;padding:26px 0 10px;}
.mock .phone{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;}
/* ⛔ **한 대만 세운다** (사장님 지시 2026-08-12 : 「모바일 목업 3개 만들지 말고 1개만」).
   여기 있던 .left/.right(기울여 뒤에 걸치던 두 대)는 걷어냈다. 되살릴 일이 있으면
   landing.js 의 목업칸()에 폰('left'…)·폰('right'…)을 다시 넣고 아래 두 줄을 되살리면 된다 :
     .mock .phone.left {transform:rotate(-7deg) translate(30px,26px) scale(.86);z-index:1}
     .mock .phone.right{transform:rotate( 7deg) translate(-30px,26px) scale(.86);z-index:1}
   ⛔ 다만 그때는 가운데가 좁아진다 — 그게 한 대로 줄인 까닭이다. */
.mock .phone.mid{z-index:3;animation:lbFloat 7s ease-in-out infinite;}
@keyframes lbFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.mock .phone figcaption{font-size:14px;font-weight:600;color:var(--sub);}

/* ⛔ 폰 껍데기만 둥글게 되살린다. app.css 1069 `.card * { border-radius:0 !important }` 가
      목업을 .card 안에 넣는 순간 폰까지 네모로 눌러 버린다.
   ⛔ 화면 **속**은 각진 채로 둔다 — app.css 1063 「라운드는 겹치지 않는다」가 앱의 규칙이다.
      다만 **.card 자체**는 앱에서 둥글다(--r-card). 그 하나만 되살린다. */
.mock .pbody{position:relative;background:#0d0f0a;border-radius:46px !important;padding:9px;
  box-shadow:0 30px 60px rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.16),
             inset 0 0 0 1.6px rgba(255,255,255,.14);}
.mock .pside{position:absolute;right:-2px;top:126px;width:3px;height:56px;border-radius:3px !important;background:#0d0f0a;}
.mock .pside2{position:absolute;left:-2px;top:104px;width:3px;height:34px;border-radius:3px !important;background:#0d0f0a;}
.mock .pglass{position:relative;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  border-radius:38px !important;background:var(--bg);
  width:calc(390px * .60);height:calc(760px * .60);scrollbar-width:none;}
.mock .pglass::-webkit-scrollbar{width:0;}
/* ── 폰 속에 진짜 앱을 띄운다 (사장님 지시 2026-08-19) ──────────────────────
   ⛔ iframe 은 390×760 그대로 두고 **줄여서** 앉힌다. iframe 자체를 234×456 으로
      만들면 앱이 「좁은 폰」인 줄 알고 다른 배치를 그린다 — 그러면 또 실물과 달라진다.
   ⛔ .live 라는 이름표로 가른다. :has() 는 쓰지 않는다(옛 폰에서 통째로 무시된다).
   ⛔ 안쪽 스크롤은 iframe 이 맡는다. 그래서 유리(.pglass)의 스크롤은 잠근다 —
      안 잠그면 손가락 한 번에 폰 껍데기와 앱이 같이 밀려 어지럽다.
   ⛔ 줄이는 비율은 **한 곳(--pz)에서만** 정한다. 옛 목업은 유리칸과 속화면이 저마다
      .60/.66 을 적어 두어서, 한쪽만 고치면 앱이 폰 밖으로 삐져나온다.
      .live 쪽 규칙은 아래 미디어쿼리들보다 힘이 세니(클래스 셋) 한 번만 적으면 된다. */
.mock{--pz:.60;}
@media (max-width:720px){ .mock{--pz:.66;} }
.mock .phone.live .pglass{overflow:hidden;
  width:calc(390px * var(--pz));height:calc(760px * var(--pz));}
.mock .plive{position:absolute;top:0;left:0;width:390px;height:760px;
  border:0;display:block;background:transparent;border-radius:0 !important;
  transform:scale(var(--pz));transform-origin:0 0;}
.mock .pisland{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:6;
  width:64px;height:19px;border-radius:99px !important;background:#0d0f0a;}
/* 앱의 진짜 모습 : 라임 위에 흰 카드가 뜬다 */
.mock .pscreen .card{border-radius:var(--r-card) !important;}
.mock .pscreen .bubble{border-radius:22px !important;}
.mock .pscreen .chip{border-radius:var(--r-chip) !important;}

.mock .pscreen{width:390px;zoom:.60;padding:13px 0 26px;
  --ff:'lb-free'; --ffui:'lb-pre';
  font-family:var(--ffui),var(--sys);}
.mock .pscreen .wrap{max-width:none;}

/* 상태바 — 시간과 아이콘 셋. 아일랜드 양옆으로 갈라 앉힌다 */
.mock .pstat{display:flex;align-items:center;justify-content:space-between;
  padding:0 22px 2px;font-size:14px;font-weight:600;color:var(--ink);}
.mock .pstat s{text-decoration:none;letter-spacing:.2px;}
.mock .pico{display:flex;align-items:center;gap:5px;color:var(--ink);}
.mock .pico svg{height:11px;width:auto;fill:currentColor;}

/* 적히는 자리 — amtbox 는 앱 것 그대로, input 대신 글자가 들어가는 것만 맞춘다 */
.mock .mockamt{min-height:52px;}
.mock .mockamt > b{flex:1;font-size:23px;font-weight:700;color:var(--ink);min-height:1.2em;}
.mock .mockamt > b#목업메모{font-size:16px;font-weight:500;}
.mock .mockamt.typing > b::after{content:'';display:inline-block;width:2px;height:20px;
  background:var(--ink);margin-left:2px;vertical-align:-3px;animation:lbCaret .9s steps(1,end) infinite;}
@keyframes lbCaret{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.mock .btn.primary{transition:transform .16s;}
.mock .btn.primary.press{transform:scale(.96);}
.mock .hm.total b{transition:color .3s;}
.mock .hm.total b.tick{color:var(--out);}

/* 좁은 화면 — 옆 두 대는 치우고 가운데만 남긴다. 셋을 욱여넣으면 다 작아져 아무것도 안 읽힌다 */
@media (max-width:720px){
  .mock .phone.left,.mock .phone.right{display:none;}
  .mock .stage{padding:20px 0 10px;}
  .mock .pglass{width:calc(390px * .66);height:calc(760px * .66);}
  .mock .pscreen{zoom:.66;}
}
@supports not (zoom:1){
  .mock .pglass{width:min(330px,84vw);height:640px;}
  .mock .pscreen{width:100%;zoom:normal;}
}
@media (prefers-reduced-motion: reduce){
  .mock .phone.mid{animation:none;}
  .mock .mockamt.typing > b::after{animation:none;}
}

/* ── 목업 「적기」 시트 : 진짜 앱과 같아 보이게 하는 최소한의 손질 (2026-08-18) ──
   ⛔ 여기서 색·모서리를 새로 정하지 말 것. 클래스가 앱과 같으니 app.css 가 이미 다 칠했다.
      이 블록은 「목업이라서 어쩔 수 없는 차이」만 메운다 :
        · 진짜는 <input> 인데 목업은 <b> 다(글자가 타이핑되는 시늉을 해야 해서)
        · 진짜는 화면을 덮는 시트인데 목업은 카드 안이라 제목 여백이 다르다 */
.mock .mocksheet > h2{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:2px 0 14px;}
.mock .mocksheet .seg{margin-bottom:2px;}
.mock .mocksheet .sheetact{display:flex;gap:10px;margin-top:16px;}
.mock .mocksheet .sheetact .btn{flex:1;}

/* ── 설치 도장 — 맨 아래에서 도는 동그라미 단추 ────────────────────
   사장님 지시 2026-08-21 : 「설치가 용이하도록 메인홈에 루멘양림처럼 맨하단에
   동그라미 돌아가는 버튼을 클릭하면 설치안내가 떠야대」.

   ⛔ **글자만 돈다. 가운데는 안 돈다.** 통째로 돌리면 「설치」가 거꾸로 서는 순간이
      생겨 안 읽힌다. 그래서 고리(.ring)와 가운데(.hub)를 두 겹으로 나눴다.
   ⛔ 글자 놓는 자리는 **스크립트가 잡는다**(landing.js 설치도장달기). 반지름을 CSS 로
      못박으면 화면 폭이 줄 때 글자가 원 밖으로 튄다.
   ⛔ 이 단추는 **장식이 아니라 단추**다. button 태그로 두고 aria-label 을 준다 —
      도는 글자는 스크린리더가 한 자씩 읽으면 소음이라 aria-hidden 으로 감춘다. */
.insstamp{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:34px 0 26px;
}
.insbtn{
  position:relative; width:188px; height:188px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line2); box-shadow:var(--sh);
  cursor:pointer; padding:0; color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.insbtn:hover{ transform:translateY(-2px); }
.insbtn:active{ transform:translateY(1px); }
.insbtn .ring{
  position:absolute; inset:0; border-radius:50%;
  animation:ins-spin 18s linear infinite;
}
.insbtn .ring span{
  position:absolute; left:50%; top:50%;
  font-size:15px; font-weight:800; letter-spacing:.02em;
  color:var(--pop); white-space:pre;
}
.insbtn .hub{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.insbtn .hub svg{ width:30px; height:30px; }
.insbtn .hub b{ font-size:24px; font-weight:800; letter-spacing:-.02em; }
.insbtn .hub em{ font-size:15px; font-weight:700; font-style:normal; color:var(--sub); }
@keyframes ins-spin{ to{ transform:rotate(360deg); } }
/* ⛔ 「움직임 줄이기」를 켜 두신 분에게는 안 돌린다. 멀미가 나는 분이 계시고,
      돌지 않아도 단추 구실은 그대로다. */
@media (prefers-reduced-motion:reduce){ .insbtn .ring{ animation:none; } }
.insstamp .cap{
  font-size:17px; font-weight:700; text-align:center;
  color:var(--onbg2,var(--sub)); text-shadow:var(--onbgsh,none);
}
.insstamp .cap b{ color:var(--onbg,var(--ink)); font-weight:800; }

/* 설치 안내창 — 문의창(.askbox)과 같은 껍데기를 쓴다.
   ⛔ 안에 든 QR 은 랜딩 본문의 260px 짜리가 아니라 **작은 것**이라 여기서 줄인다. */
.askbox .qrpaper img{ width:180px; height:180px; }
.askbox .qrbox{ margin:14px 0 16px; }
.insstep{ display:flex; gap:11px; align-items:flex-start; margin:0 0 11px; }
.insstep .insno{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--acc); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800;
}
.insstep .instx{ font-size:17px; font-weight:600; line-height:1.6; color:var(--sub); }
.insstep .instx b{ color:var(--ink); font-weight:800; }

/* ── PC 에서 폰 세 대 (사장님 지시 2026-08-28) ─────────────────────────
   ⛔ 좁은 화면에서는 **가운데 한 대만.** 셋을 욱여넣으면 다 작아져 아무것도 안 읽힌다
      (2026-08-12 에 한 대로 줄인 그 까닭 그대로다).
   ⛔ 옆 두 대는 기울이지 않는다. 옛 .left/.right 는 장식이었지만 이건 **읽는 화면**이다.
   ⛔ 글 칸(.wrap)이 520px 이라 세 대가 못 들어간다. 이 자리에서만 화면 끝까지 넓힌다. */
.mock .phone.side{display:none;}
@media (min-width:1100px){
  /* ⛔ **vw 를 그냥 쓰면 안 된다.** PC 에서 app.css 가 html{zoom:1.45} 를 걸어 두는데
     zoom 은 vw 를 보정하지 않아 100vw 가 1.45배로 부푼다(가로 스크롤이 생긴다).
     집 규칙대로 --z 로 나눈다 (app.css 1336줄 주석). */
  .mock .stage{width:calc(100vw / var(--z, 1));
    margin-left:calc(50% - (100vw / var(--z, 1)) / 2);
    padding:26px 18px 10px;gap:26px;align-items:flex-start;}
  .mock .phone.side{display:flex;}
  /* 셋이 나란히 서면 가운데만 떠다니는 것이 어지럽다 */
  .mock .phone.mid{animation:none;}
  .mock .phone figcaption{max-width:234px;line-height:1.45;}
}