/* =====================================================================
   홈 인트로 — 종이·녹청·황토, 질문과 자료의 짝
   겉모습은 C안(종이·짙은 녹청·황토 · 종이 지도와 골목 그림), 짜임과 글은 E안(손님 질문 한 줄 → 그 답이 되는 자료 한 장 · 주 단추 하나).
   대상: index.html 비회원 첫 화면 section.guest-premium-hero 한 곳(회원 첫 화면 #intro 는 그대로).
   ★ 공유 :root(--kmp-*, visual-refresh.css)는 바꾸지 않는다 — 이 구역에만 --intro-* 를 얹는다(교체가 아니라 확장).
     종이·짙은 녹청·황토는 인트로에만 적용한다.
     공유 색 변수는 바꾸지 않고 아래 --intro-* 값만 이 구역에 사용한다.
   ★ PC(900px 이상)와 휴대폰은 따로 짠 구성이다 — 휴대폰을 늘리거나 PC 를 줄인 것이 아니다.
     PC = 왼쪽 글·주 단추 / 오른쪽 녹청 쐐기 위 종이 지도 판(질문 짝 셋이 판에 꽂힌 쪽지). 첫 화면 큰 그림은 이 판 하나.
     휴대폰 = 글 → 골목 그림(창) → 그림의 점선 길이 이어지는 질문 짝 셋 → 녹청 띠 위 황토 주 단추(엄지 자리).
   ★ 그림은 시안의 인라인 SVG(필터)를 이미지로 구웠다(intro-v2-*). 지도 표시(핀)만 인라인 SVG(필터 없음) — 한 번 떨어지고 멈춘다.
   ★ 시안의 조절판(Playground)은 넣지 않는다(시안 전용).
   ===================================================================== */

/* ---------- 비회원 화면 틀 — 옛 가운데 흰 카드(680px)를 풀고 종이 바탕 전체 폭으로 ---------- */
body.viewer-guest { background: #f6f2e9; }
/* 머리 두 벌 정리: 공용 메뉴(customer-navigation.js)는 그대로 두고, 옛 브랜드·로그인 줄은 비회원에게 숨긴다.
   브랜드는 첫 화면 글 칸 안으로, 로그인은 버튼 아래 한 줄(.gi-login)로 옮겼다. */
body.viewer-guest .app > .topbar { display: none; }
body.viewer-guest .main {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.viewer-guest .tool-panel {
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- 이 구역 변수 — 1안 그림 픽셀 실측 색(C 토큰 표의 계산된 hex) ---------- */
.guest-premium-hero {
  --intro-paper: #f6f2e9;      /* 첫 화면·바닥 */
  --intro-paper-2: #e7dfcf;    /* 받는 방법 구간 */
  --intro-card: #fbf9f4;       /* 쪽지·받는 방법 상자 */
  --intro-map: #f9f2df;        /* 지도 판 바탕(그림이 늦게 떠도 같은 색) */
  --intro-ink: #16302c;        /* 글자·선 — 종이 위 12.59:1 */
  --intro-muted: #3e534e;      /* 보조 글 — 종이 위 7.36:1 · 짙은 종이 위 6.21:1 */
  --intro-green: #163635;      /* 주 단추·색면·끝 구간 */
  --intro-green-deep: #112a29;
  --intro-on-dark: #fbf5e6;    /* 녹청 위 글자 11.97:1 */
  --intro-on-dark-2: #dbdacd;  /* 녹청 위 보조 글 */
  --intro-ochre: #d99c43;      /* 면·띠·휴대폰 주 단추 바탕(그 위 잉크 글자 5.88:1). 글자색으로 쓰지 않는다(종이 위 2.14:1) */
  --intro-ochre-d: #93753b;    /* 제목 마침표만 */
  --intro-clay: #b85c36;       /* 핀·길·초점 선(종이 위 4.07:1 · 흰 선 옆 4.55:1) */
  --intro-line: #bcc0b8;       /* 점선·장식 테두리 */
  --intro-pad: 16px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  margin: 0;
  color: var(--intro-ink);
  background: var(--intro-paper);
  font-family: var(--kmp-font);
  font-size: 16px;
  line-height: 1.62;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
/* 종이 결 — 구간 바탕과 글자 사이에 깐다(글자 위에 얼룩이 앉지 않게 · F 시안). 데이터 주소라 외부 요청이 없다 */
.gi-hero, .gi-how, .gi-end, .gi-foot { position: relative; isolation: isolate; }
.gi-hero::before, .gi-how::before, .gi-end::before, .gi-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'240'%20height%3D'240'%3E%3Cfilter%20id%3D'n'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20seed%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.42%20%200%200%200%200%20.34%20%200%200%200%200%20.22%20%200%200%200%20.55%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  opacity: .25;
}
/* 초기화는 :where 로 무게를 낮춘다 — 아래 칸 규칙(.gi-*)이 늘 이긴다 */
.guest-premium-hero :where(h1, h2, h3, p, ol, ul) { margin: 0; }
.guest-premium-hero :where(ol, ul) { padding: 0; list-style: none; }
.guest-premium-hero :is(a, button):focus-visible { outline: 3px solid var(--intro-ink); outline-offset: 3px; }
.gi-wrap { width: min(1200px, calc(100% - 2 * var(--intro-pad))); margin-inline: auto; }

/* ---------- 단추 ---------- */
.gi-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin: 0;
  padding: 0 26px;
  border: 2px solid var(--intro-ink);
  border-radius: 12px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.gi-btn svg, .gi-door-arrow svg, .gi-chev svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gi-btn svg { width: 20px; height: 20px; }
.gi-btn--main {
  border-color: var(--intro-green);
  background: var(--intro-green);
  color: var(--intro-on-dark);
  box-shadow: 0 3px 0 rgba(22, 48, 44, .5);
}
.gi-btn--main:hover { transform: translateY(-1px); }
.gi-btn--main:active { transform: translateY(2px); box-shadow: none; }
.gi-btn--sub { background: transparent; color: var(--intro-ink); }

/* ═════════ ① 첫 화면 — 휴대폰(기본) ═════════
   보이는 순서: 브랜드·제목·출처 한 줄 → 골목 그림(창) → 점선 길이 이어지는 질문 짝 셋 → 녹청 띠 위 주 단추(엄지 자리).
   글(DOM) 순서는 글 → 단추 → 판(PC 에서 보이는 순서) — 휴대폰은 order 로 판을 단추 띠 위에 놓는다. */
.gi-hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--kmp-tabbar-h, 60px));
  min-height: calc(100svh - var(--kmp-tabbar-h, 60px) - env(safe-area-inset-bottom, 0px));
}
.gi-wedge, .gi-sheet, .gi-clip, .gi-route { display: none; }
.gi-hero-text { order: 0; position: relative; z-index: 3; padding: 6px var(--intro-pad) 0; }
.gi-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--intro-ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.gi-brand svg { display: block; width: 32px; height: 32px; flex: none; }
.guest-premium-hero .gi-title {
  margin-top: 2px;
  color: var(--intro-ink);
  font-size: clamp(28px, 8.2vw, 44px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.gi-dot { color: var(--intro-ochre-d); }
.gi-lead { margin-top: 6px; color: var(--intro-muted); font-size: 16px; line-height: 1.5; text-wrap: pretty; }

.gi-board-col { order: 1; position: relative; display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 4px; container: gi-col / inline-size; }
.gi-board { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; }
/* 골목 그림 창 — 구운 골목(1170×1242 = 그림 0 56 390 414)에서 가운데 띠(y 112~312)만 보인다.
   창 높이는 폭이 정하는 높이(390:200)를 넘지 않게 — 넘으면 양옆이 잘려 오른쪽 핀이 반쪽이 된다. 위·아래는 종이로 흐린다 */
.gi-alley {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: min(300px, 51.2vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 68%, transparent 100%);
}
/* 그림은 칸 안 상자의 배경으로 — 짝 칸이 접힐 때(창 → 골목 전체) 상자 왼쪽 위는 그대로라 화면 밀림(CLS)으로 세지 않는다.
   창: 폭에 맞춰 깔고 그림 y 112 를 칸 맨 위에(위로 폭의 14.359% = (112 − 56) ÷ 390) */
.gi-alley-art {
  position: absolute;
  inset: 0;
  background: url("/assets/renewal/intro-v2-alley.png") 0 -14.359vw / 100% auto no-repeat;
  background-image: image-set(url("/assets/renewal/intro-v2-alley.webp") type("image/webp"), url("/assets/renewal/intro-v2-alley.png") type("image/png"));
  background-position: 0 calc(-14.359cqw);
}
.gi-marks { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.gi-marks--full { display: none; }
/* 장식 지도 표시는 아래의 눌리는 질문 짝 핀보다 옅게 둔다. */
.gi-marks--win { opacity: .7; }
.gi-pairs-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; }
/* 판매 확인 전 — 자리만 잡고 안 보인다(눌리지도 읽히지도 않음). 접힘(none)이면 칸을 없앤다.
   결제 과정 글도 판매 중이 확인됐을 때만 보인다. */
.gi-hero[data-shelf="pending"] .gi-pairs-wrap,
.gi-hero:not([data-shelf="ready"]) .gi-cta-note,
.gi-hero[data-shelf="pending"] ~ .gi-how { visibility: hidden; }
.gi-hero[data-shelf="none"] .gi-pairs-wrap,
.gi-hero[data-shelf="none"] ~ .gi-how { display: none; }
/* 골목 길 → 등뼈: 그림 아래로 빠져나온 점선이 왼쪽으로 꺾여 질문 짝의 핀을 잇는다 */
.gi-link {
  position: absolute;
  left: calc(var(--intro-pad) + 17px);
  top: -46px;
  display: block;
  width: calc(53% - var(--intro-pad) - 17px);
  height: 48px;
  overflow: visible;
}
.gi-link path { fill: none; stroke: var(--intro-clay); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .1 12; vector-effect: non-scaling-stroke; }
.gi-pairs { position: relative; display: grid; gap: 8px; padding: 0 var(--intro-pad) 12px calc(var(--intro-pad) + 46px); }
/* 등뼈 점선 — 맨 위(골목 길이 꺾여 들어오는 곳)에서 첫 핀까지, 그리고 핀에서 다음 핀까지만(마지막 핀 아래 꼬리 없음) */
.gi-pairs::before,
.gi-pair:not(.is-last)::after {
  content: "";
  position: absolute;
  width: 6px;
  pointer-events: none;
  background: radial-gradient(circle at 3px 3px, var(--intro-clay) 2.3px, transparent 2.8px) 0 0 / 6px 12px repeat-y;
}
.gi-pairs::before { left: calc(var(--intro-pad) + 14px); top: 0; height: 27px; }
.gi-pair { position: relative; }
.gi-pair[hidden] { display: none; }
.gi-pair:not(.is-last)::after { left: -32px; top: 27px; height: calc(100% + 8px); }
/* 짝 하나 = 쪽지 하나 = 링크 하나(쪽지 전체가 눌림) */
.gi-pair-link {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 9px 44px 9px 14px;
  border: 2px solid var(--intro-ink);
  border-radius: 14px;
  background: var(--intro-card);
  color: var(--intro-ink);
  text-decoration: none;
  transition: transform .15s ease;
}
.gi-pair-link:hover { transform: translateY(-2px); }
/* 초점 — 쪽지 둘레에 흰 선을 한 겹 두르고 그 밖에 벽돌색 선(지도·종이 어느 위에서도 보이게) */
.guest-premium-hero .gi-pair-link:focus-visible { outline: 3px solid var(--intro-ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
/* 핀 — 번호 없이 같은 모양(세 자료는 순서가 아니라 고르는 것) */
.gi-pinb {
  position: absolute;
  left: -49px;
  top: 9px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--intro-ink);
  border-radius: 50% 50% 50% 0;
  background: var(--intro-clay);
  transform: rotate(-45deg);
}
.gi-pinb::after { content: ""; width: 11px; height: 11px; border: 2px solid var(--intro-ink); border-radius: 50%; background: var(--intro-on-dark); }
.gi-hero[data-shelf="ready"] .gi-pinb { animation: giPinbDrop .8s cubic-bezier(.2, .8, .3, 1.25) both; animation-delay: var(--d, .15s); }
.gi-pair[data-slot="2"] .gi-pinb { --d: .35s; }
.gi-pair[data-slot="3"] .gi-pinb { --d: .55s; }
@keyframes giPinbDrop { from { translate: 0 -18px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.gi-pair-q { display: block; font-size: 18.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; text-wrap: pretty; }
.gi-pair-a { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--intro-green); }
.gi-pair-arrow { display: block; flex: none; width: 24px; height: 12px; }
.gi-pair-arrow path { fill: none; stroke: var(--intro-clay); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gi-pair-arrow .gi-dots { stroke-dasharray: .1 5.2; }
.gi-pair-name { display: block; font-size: 16.5px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.gi-tag, .gi-pair-sub { display: none; }
.gi-chev {
  position: absolute;
  right: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border: 2px solid var(--intro-ink);
  border-radius: 50%;
  color: var(--intro-ink);
}
.gi-chev svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* 녹청 띠 위 주 단추(엄지 자리) */
.gi-hero-cta {
  order: 2;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  margin-top: auto;
  padding: 30px var(--intro-pad) 18px;
  background: var(--intro-green);
  color: var(--intro-on-dark);
  clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%);
}
.gi-hero-cta :is(a, button):focus-visible { outline-color: #fff; }
.gi-hero-cta .gi-btn--main {
  grid-column: 1 / -1;
  grid-row: 1;
  border-color: var(--intro-ochre);
  background: var(--intro-ochre);
  color: var(--intro-ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .32);
}
.gi-hero-cta .gi-btn--sub {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--intro-on-dark);
  border-radius: 0;
  color: var(--intro-on-dark);
  font-size: 17px;
}
/* 받는 방식 한 줄은 PC 첫 화면에서만(휴대폰은 바로 아래 '받는 방법' 구간이 같은 말을 한다) */
.gi-cta-note { display: none; }
.gi-login { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 4px; color: var(--intro-on-dark-2); font-size: 16px; }
.gi-login a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--intro-on-dark);
  font-weight: 800;
  text-underline-offset: 4px;
}

/* 지도 표시(핀) — 한 번 떨어지고 멈춘다(무한 반복 없음) */
.gi-pin { animation: giPinDrop .8s cubic-bezier(.2, .8, .3, 1.25) both; animation-delay: var(--d, 0s); }
@keyframes giPinDrop { from { transform: translateY(-22px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 키가 작은 휴대폰 — 핵심 문장·질문 짝·주 단추를 첫 화면에 남기려고 골목 그림을 접는다 */
@media (max-width: 899px) and (max-height: 740px) {
  .gi-alley, .gi-link, .gi-pairs::before { display: none; }
  .gi-board-col { margin-top: 12px; }
}
/* 키 680 이하 — 녹청 띠·짝 사이를 조금 줄여 「동네 고르기 · 로그인」 줄이 아래 고정 메뉴에 가리지 않게(360×640 실측 8px 가림 → 0) */
@media (max-width: 899px) and (max-height: 680px) {
  .gi-pairs { gap: 6px; padding-bottom: 6px; }
  .gi-pair:not(.is-last)::after { height: calc(100% + 6px); }
  .gi-hero-cta { padding-top: 26px; padding-bottom: 8px; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .gi-lead { display: none; }
  .guest-premium-hero .gi-title { font-size: clamp(26px, 7.8vw, 32px); }
  .gi-board-col { margin-top: 10px; }
  .gi-pairs { gap: 6px; padding-bottom: 8px; }
  .gi-pair-link { min-height: 50px; padding-block: 6px; }
  .gi-pinb { top: 6px; }
  .gi-pair:not(.is-last)::after { top: 24px; height: calc(100% + 6px); }
  .gi-pair-q { font-size: 17px; }
  .gi-pair-a { margin-top: 1px; }
  .gi-hero-cta { padding: 24px var(--intro-pad) 6px; clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%); }
  .gi-hero-cta .gi-btn--main { min-height: 50px; }
  .gi-hero-cta .gi-btn--sub, .gi-login { margin-top: 2px; }
}
@media (max-width: 359px) { .gi-login-q { display: none; } }
/* 가로로 눕힌 휴대폰 — 짧은 화면의 배치를 별도로 정한다. */
@media (max-width: 899px) and (max-height: 480px) {
  .gi-hero { min-height: 0; }
  .gi-hero-cta { order: 1; margin-top: 10px; }
  .gi-board-col { order: 2; margin-top: 16px; }
}

/* 태블릿 세로(600~899) — 휴대폰 짜임 그대로, 글 칸만 가운데 680 폭으로 · 첫 화면 높이를 억지로 채우지 않음(빈 칸 방지) */
@media (min-width: 600px) and (max-width: 899px) {
  .gi-how .gi-wrap, .gi-end .gi-wrap, .gi-foot .gi-wrap { width: min(680px, calc(100% - 32px)); }
  .gi-hero { min-height: auto; }
  .gi-alley { flex: none; height: min(34vw, 260px); max-height: none; }
  .gi-hero-cta { margin-top: 22px; }
  .gi-hero-text, .gi-hero-cta { padding-inline: max(var(--intro-pad), calc((100% - 680px) / 2)); }
  .gi-pairs { padding-right: max(var(--intro-pad), calc((100% - 680px) / 2)); padding-left: calc(max(var(--intro-pad), calc((100% - 680px) / 2)) + 46px); }
  .gi-pairs::before { left: calc(max(var(--intro-pad), calc((100% - 680px) / 2)) + 14px); }
  .gi-link { left: calc(max(var(--intro-pad), calc((100% - 680px) / 2)) + 17px); width: calc(51% - max(var(--intro-pad), calc((100% - 680px) / 2)) - 17px); }
}

/* 질문 짝 칸이 접히면(판매 확인 실패·전부 닫힘) 휴대폰 첫 화면은 C 첫 화면 그대로 — 골목 그림 전체가 남은 높이를 채운다.
   그림 칸이 그림 비율(1170:1242)보다 납작해 윗부분이 3% 넘게 잘릴 때만 윗가장자리를 종이로 흐리고, 잘리는 핀은 통째로 숨긴다
   (핀 머리 위끝: 가운데 14.6% · 오른쪽 26.0%) */
@media (max-width: 899px) {
  .gi-hero[data-shelf="none"] .gi-alley {
    display: block;
    flex: 1 1 0;
    min-height: 176px;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
    container: gi-art / size;
  }
  .gi-hero[data-shelf="none"] .gi-alley-art { background-size: cover; background-position: 50% 100%; }
  .gi-hero[data-shelf="none"] .gi-marks--win { display: none; }
  .gi-hero[data-shelf="none"] .gi-marks--full { display: block; }
  @container gi-art (min-aspect-ratio: 9712 / 10000) {
    .gi-alley-art {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 6%, #000 16%);
      mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 6%, #000 16%);
    }
  }
  @container gi-art (min-aspect-ratio: 10995 / 10000) { .gi-marks--full .gi-mk--mid { display: none; } }
  @container gi-art (min-aspect-ratio: 12679 / 10000) { .gi-marks--full .gi-mk--low { display: none; } }
  @container gi-art (max-aspect-ratio: 3 / 4) { .gi-marks--full .gi-mk--low { display: none; } }
}
@media (min-width: 600px) and (max-width: 899px) {
  .gi-hero[data-shelf="none"] { min-height: calc(100svh - var(--kmp-topbar-h, 58px) - 4px); }
  .gi-hero[data-shelf="none"] .gi-alley { height: auto; }
}
@media (min-width: 600px) and (max-width: 767px) {
  .gi-hero[data-shelf="none"] { min-height: calc(100svh - var(--kmp-tabbar-h, 60px) - env(safe-area-inset-bottom, 0px)); }
}
/* 칸 크기 질의를 모르는 옛 브라우저 — 접힌 상태의 그림 칸 전체(핀 포함) 윗가장자리를 흐린다 */
@supports not (container-type: size) {
  @media (max-width: 899px) {
    .gi-hero[data-shelf="none"] .gi-alley {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
    }
  }
}

/* ═════════ ① 첫 화면 — PC(900px 이상) ═════════
   왼쪽 = 브랜드 · 제목 · 출처 한 줄 · 주 단추 하나(+보조) · 받는 방식 한 줄 · 로그인.
   오른쪽 = 핵심 그래픽 하나 — 녹청 쐐기 위 종이 지도 판. 질문 짝 셋이 판에 꽂힌 쪽지이고, 점선 길이 핀 사이를 잇는다.
   지도 판은 640:740 비율을 지키며 첫 화면 높이 안에 들어오게 줄어든다(키 낮은 PC 에서도 셋째 쪽지가 첫 화면 안). */
@media (min-width: 900px) {
  .guest-premium-hero {
    --intro-pad: 32px;
    --intro-edge: max(32px, calc((100vw - 1200px) / 2));
    font-size: 18px;
  }
  .gi-hero {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
    grid-template-rows: .8fr auto auto 1.2fr;
    column-gap: clamp(40px, 4.6vw, 76px);
    min-height: max(660px, calc(100vh - var(--kmp-topbar-h, 58px) - 4px));
    min-height: max(660px, calc(100svh - var(--kmp-topbar-h, 58px) - 4px));
    padding: clamp(18px, 3vh, 36px) var(--intro-edge) clamp(22px, 3.6vh, 42px);
  }
  /* 오른쪽 녹청 색면 + 황토 띠(1안) — C 구현과 같은 그림 */
  .gi-wedge {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: min(52%, 900px);
    height: 86%;
    background: url("/assets/renewal/intro-v2-wedge.png") 0 0 / 100% 100% no-repeat;
  }
  .gi-hero-text { grid-column: 1; grid-row: 2; padding: 0; }
  .gi-brand { font-size: 21px; }
  .gi-brand svg { width: 36px; height: 36px; }
  .guest-premium-hero .gi-title {
    margin-top: clamp(12px, 2.4vh, 26px);
    font-size: clamp(40px, min(4.15vw, 7.2vh), 56px);
    line-height: 1.13;
  }
  .gi-lead { margin-top: clamp(10px, 1.8vh, 18px); font-size: clamp(18px, min(1.45vw, 2.5vh), 21px); }
  .gi-hero-cta {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin: 0;
    padding: clamp(20px, 3.4vh, 34px) 0 0;
    background: none;
    color: inherit;
    clip-path: none;
  }
  .gi-hero-cta :is(a, button):focus-visible { outline-color: var(--intro-clay); }
  .gi-hero-cta .gi-btn--main {
    min-height: 58px;
    padding: 0 30px;
    border-color: var(--intro-green);
    background: var(--intro-green);
    color: var(--intro-on-dark);
    font-size: 19px;
    box-shadow: 0 3px 0 rgba(22, 48, 44, .5);
  }
  .gi-hero-cta .gi-btn--sub {
    min-height: 58px;
    margin: 0;
    padding: 0 26px;
    border: 2px solid var(--intro-ink);
    border-radius: 12px;
    background: rgba(246, 242, 233, .55);
    color: var(--intro-ink);
    font-size: 18px;
  }
  .gi-cta-note { display: block; flex-basis: 100%; max-width: 28em; margin-top: 2px; color: var(--intro-muted); font-size: 16.5px; line-height: 1.45; }
  .gi-cta-note b { color: var(--intro-ink); }
  .gi-login { flex-basis: 100%; margin: -4px 0 0; color: var(--intro-muted); }
  .gi-login a { color: var(--intro-ink); }

  /* 지도 판 칸 — 칸 크기 질의(cq)로 판을 640:740 비율 그대로 칸 안에 맞춘다(넓으면 폭, 낮으면 높이에 맞춤) */
  .gi-board-col { order: 0; grid-column: 2; grid-row: 1 / -1; display: block; margin: 0; }
  .gi-board {
    flex: none;
    width: 100%;
    aspect-ratio: 640 / 740;
    padding: clamp(30px, 4.6vh, 46px) 4px clamp(26px, 4vh, 42px) 0;
  }
  .gi-alley, .gi-link { display: none; }
  .gi-sheet {
    display: block;
    position: absolute;
    inset: 0 0 0 -8px;
    z-index: 0;
    overflow: hidden;
    border: 2px solid var(--intro-ink);
    border-radius: 6px;
    background: var(--intro-map) url("/assets/renewal/intro-v2-board.jpg") 50% 50% / cover no-repeat;
    background-image: image-set(url("/assets/renewal/intro-v2-board.webp") type("image/webp"), url("/assets/renewal/intro-v2-board.jpg") type("image/jpeg"));
    box-shadow: 0 18px 30px -8px rgba(20, 36, 30, .34);
    transform: rotate(1.4deg);
  }
  .gi-clip {
    display: block;
    position: absolute;
    top: -18px;
    left: 50%;
    z-index: 3;
    width: 62px;
    height: 67.5px;
    margin-left: -31px;
    background: url("/assets/renewal/intro-v2-clip.png") 0 0 / 100% 100% no-repeat;
  }
  .gi-route { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .gi-route path { fill: none; stroke: var(--intro-clay); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .1 12.5; }
  .gi-pairs-wrap { flex: 1 1 auto; min-height: 0; }
  .gi-pairs { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(12px, 2.2vh, 24px); padding: 0; }
  .gi-hero[data-count="1"] .gi-pairs, .gi-hero[data-count="2"] .gi-pairs { justify-content: space-evenly; }
  .gi-pairs::before, .gi-pair:not(.is-last)::after { display: none; }
  /* 쪽지 셋 — 엇갈려 꽂되, 둘째 쪽지도 판 오른쪽 가장자리와 넉넉히 떨어지게(폭 72% · 들임 5/17/10%) */
  .gi-pair { width: 72%; margin-left: var(--off, 0); }
  .gi-pair[data-slot="1"] { --off: 5%; }
  .gi-pair[data-slot="2"] { --off: 17%; }
  .gi-pair[data-slot="3"] { --off: 10%; }
  .gi-pair-link {
    padding: clamp(12px, 1.8vh, 18px) 18px clamp(12px, 1.8vh, 18px) 30px;
    box-shadow: 0 3px 0 rgba(22, 48, 44, .42);
  }
  .gi-pair-link:hover { transform: translateY(-3px); }
  .gi-pinb { left: -23px; top: -21px; width: 42px; height: 42px; }
  .gi-pinb::after { width: 13px; height: 13px; }
  .gi-pair-q { font-size: clamp(20px, min(1.75vw, 3.1vh), 25px); line-height: 1.24; }
  .gi-pair-a {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    margin-top: clamp(8px, 1.3vh, 12px);
    padding-top: clamp(8px, 1.3vh, 12px);
    border-top: 2px dashed var(--intro-line);
    color: var(--intro-ink);
  }
  .gi-tag {
    display: block;
    padding: 2px 10px;
    border: 1.5px solid var(--intro-line);
    border-radius: 999px;
    background: var(--intro-paper-2);
    color: var(--intro-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
  }
  .gi-pair-name { font-size: clamp(18px, min(1.5vw, 2.5vh), 23px); }
  /* 쪽지 전체가 링크이며 보조 화살표는 주 단추와 구분한다. */
  .gi-chev { position: static; grid-column: 4; justify-self: end; width: 30px; height: 30px; margin: 0; }
  .gi-pair-sub { grid-column: 1 / -1; margin-top: 4px; color: var(--intro-muted); font-size: clamp(16px, 1.15vw, 17px); line-height: 1.5; text-wrap: pretty; }
}
/* 지도 판을 칸 크기에 맞춤(칸 크기 질의를 아는 브라우저). 판이 넉넉할 때만 한 줄 소개를 보인다
   — 판 폭 505 · 높이 585 이상(1100×700 · 1280×720 · 1366×768 은 보임, 1024×768 · 900×700 은 접음 — 렌더로 쪽지 셋이 판 안에 드는 것 확인) */
@supports (container-type: size) {
  @media (min-width: 900px) {
    .gi-board-col { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; container: gi-board / size; }
    .gi-board { width: min(100cqw, 86.486cqh); height: min(100cqh, 115.625cqw); aspect-ratio: auto; }
    .gi-pair-sub { display: none; }
    @container gi-board (min-width: 505px) and (min-height: 585px) {
      .gi-pair-sub { display: block; }
    }
    /* 좁은 판(폭 470 이하 — PC 900~1000px) — 꼬리표를 접고 쪽지를 넓혀 이름이 세 줄로 꺾이지 않게 */
    @container gi-board (max-width: 470px) {
      .gi-tag { display: none; }
      .gi-pair { width: 80%; }
      .gi-pair[data-slot="1"] { --off: 4%; }
      .gi-pair[data-slot="2"] { --off: 10%; }
      .gi-pair[data-slot="3"] { --off: 7%; }
    }
  }
}
/* PC 900~1079px — 주 단추와 보조 단추가 한 줄에 들게 안쪽 여백만 줄인다 */
@media (min-width: 900px) and (max-width: 1079px) {
  .gi-hero-cta .gi-btn--main { padding: 0 22px; }
  .gi-hero-cta .gi-btn--sub { padding: 0 18px; }
}
@supports not (container-type: size) {
  @media (min-width: 900px) {
    .gi-board-col { align-self: center; }
    .gi-pair-sub { display: block; }
  }
  @media (min-width: 900px) and (max-height: 760px) {
    .gi-pair-sub { display: none; }
  }
  @media (min-width: 900px) and (max-width: 1000px) {
    .gi-tag, .gi-pair-sub { display: none; }
    .gi-pair { width: 80%; }
    .gi-pair[data-slot="1"] { --off: 4%; }
    .gi-pair[data-slot="2"] { --off: 10%; }
    .gi-pair[data-slot="3"] { --off: 7%; }
  }
}

/* ═════════ ② 받는 방법 — E 의 세 걸음 글 · C 의 범례 상자. PC 는 맨 끝에 골목 파노라마(첫 화면에서 옮겨 옴) ═════════ */
.gi-how { margin-top: 6px; padding: 56px 0; background: var(--intro-paper-2); }
.gi-edge { position: absolute; left: 0; right: 0; top: -23px; display: block; width: 100%; height: 24px; pointer-events: none; }
.guest-premium-hero .gi-h2 {
  color: var(--intro-ink);
  font-size: clamp(26px, 6.6vw, 44px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.gi-legend {
  position: relative;
  margin-top: 24px;
  padding: 24px 18px 20px;
  border: 2px solid var(--intro-ink);
  border-radius: 14px;
  background: var(--intro-card);
}
.gi-legend::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed var(--intro-line);
  border-radius: 9px;
  pointer-events: none;
}
.gi-steps { position: relative; display: grid; gap: 18px; }
.gi-steps li, .gi-refund { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.gi-legend strong { display: block; color: var(--intro-ink); font-size: 18px; line-height: 1.4; letter-spacing: -.02em; }
.gi-legend p { margin-top: 2px; color: var(--intro-muted); font-size: 16px; line-height: 1.5; }
.gi-refund { margin-top: 18px; padding-top: 18px; border-top: 2px dashed var(--intro-line); }
.gi-ico { display: block; flex: none; width: 46px; height: 46px; }
.gi-street { display: none; }

/* ═════════ ③ 끝 — 마무리 한 줄과 주 단추 하나, 그 아래 조용한 입구 둘(E 마무리 글 · C 녹청 띠와 선 그림) ═════════ */
.gi-end { overflow: hidden; padding: 52px 0 0; background: var(--intro-green); color: var(--intro-on-dark); }
.gi-end :is(a, button):focus-visible { outline-color: #fff; }
.gi-end .gi-h2 { color: var(--intro-on-dark); }
.gi-end-lead { margin-top: 10px; max-width: 30em; color: var(--intro-on-dark-2); font-size: 16px; }
.guest-premium-hero .guest-gates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: none;
  margin: 24px 0 0;
  text-align: left;
}
.gi-btn--end {
  width: 100%;
  border-color: var(--intro-ochre);
  background: var(--intro-ochre);
  color: var(--intro-ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .32);
}
.gi-door {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  min-height: 76px;
  padding: 14px 16px;
  border: 2px solid var(--intro-on-dark);
  border-radius: 14px;
  color: var(--intro-on-dark);
  text-decoration: none;
}
.gi-door-t { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.gi-door-s { grid-column: 1; color: var(--intro-on-dark-2); font-size: 16px; line-height: 1.45; }
.gi-door-arrow {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: transform .15s ease;
}
.gi-door-arrow svg { width: 20px; height: 20px; }
.gi-door:hover .gi-door-arrow { transform: translateX(4px); }
.gi-signal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1.5px dashed rgba(251, 245, 230, .45);
}
.gi-signal-art {
  display: block;
  width: 64px;
  height: 48px;
  border: 2px solid var(--intro-on-dark);
  border-radius: 10px;
  background: var(--intro-paper);
  object-fit: cover;
  object-position: 22% 62%;
}
.gi-signal-copy strong { display: block; color: var(--intro-on-dark); font-size: 17px; font-weight: 800; line-height: 1.35; }
.gi-signal-copy span { display: block; margin-top: 2px; color: var(--intro-on-dark-2); font-size: 15.5px; line-height: 1.45; }
.gi-signal-btn {
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 2px solid var(--intro-on-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--intro-on-dark);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.gi-signal-btn:hover { background: rgba(251, 245, 230, .1); }
.gi-sky { display: block; width: 100%; height: auto; margin-top: 30px; opacity: .55; }

/* ---------- 바닥 — 출처 · 법정 링크 · 공유 · 사업자 고지 ---------- */
.gi-foot { padding: 26px 0 30px; background: var(--intro-paper); color: var(--intro-muted); font-size: 15px; }
.gi-source { color: var(--intro-muted); font-size: 15px; }
.guest-premium-hero .guest-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 18px;
  margin-top: 6px;
  color: var(--intro-ink);
  font-size: 15px;
}
.guest-premium-hero .guest-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--intro-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.guest-premium-hero .guest-share-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 18px; margin-top: 2px; }
.guest-premium-hero .guest-share-btn,
.guest-premium-hero .guest-youtube-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--intro-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.guest-premium-hero .guest-biz-info {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1.5px dashed var(--intro-line);
  text-align: left;
}
.guest-premium-hero .guest-biz-info span { color: var(--intro-muted); font-size: 13.5px; line-height: 1.6; }
.guest-premium-hero .guest-biz-info .address-unit { color: inherit; font-size: inherit; }

/* ---------- ②·③·바닥 — PC ---------- */
@media (min-width: 900px) {
  .gi-how { padding: 80px 0 0; }
  .guest-premium-hero .gi-h2 { font-size: clamp(34px, 3.3vw, 48px); }
  .gi-legend { margin-top: 36px; padding: 32px 30px 26px; }
  .gi-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .gi-refund { margin-top: 24px; padding-top: 22px; }
  .gi-street { display: block; position: relative; height: clamp(240px, 25vw, 380px); margin-top: 34px; }
  .gi-street img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

  .gi-end { padding-top: 72px; }
  .gi-end-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .gi-end-lead { font-size: 19px; }
  .guest-premium-hero .guest-gates { margin-top: 6px; }
  .gi-btn--end { min-height: 58px; font-size: 19px; }
  .gi-door-t { font-size: 24px; }
  .gi-door-s { font-size: 17px; }
  .gi-foot { font-size: 15px; }
}

/* 동작 줄이기 — 핀 떨어짐·쪽지 들림·화살표 이동을 끈다 */
/* 인증 대기 중에는 비회원 레이아웃 자리만 예약한다. 회원 확정 뒤에는 적용하지 않는다. */
body.viewer-pending .app > .topbar { display: none; }
body.viewer-pending .main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
body.viewer-pending .tool-panel { overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body.viewer-pending .guest-premium-hero { display: block !important; visibility: hidden; }
body.viewer-pending #homeSupport, body.viewer-pending #noticeBox { visibility: hidden; }
.gi-detail-label { display: block; margin-top: 3px; color: var(--intro-muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
:is(body.viewer-pending, body.viewer-guest) #homeSupport { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
:is(body.viewer-pending, body.viewer-guest) #noticeBox { width: min(1200px, calc(100% - 32px)); margin: 8px auto 12px; }
:is(body.viewer-pending, body.viewer-guest) #noticeTitle { padding-block: 6px; }
body.viewer-guest #homeSupport a, body.viewer-guest #noticeBox { color: #16302c; border-color: #bcc0b8; background: #fbf9f4; }
body.viewer-guest .customer-navigation ~ .app { margin-top: 0; }
.guest-premium-hero :is(a, button) { scroll-margin-block: 84px; }
@media (min-width: 768px) {
  body.viewer-pending, body.viewer-guest { padding-top: var(--kmp-topbar-h, 58px) !important; }
}
@media (max-width: 899px) {
  .gi-hero { min-height: calc(100svh - var(--kmp-tabbar-h, 60px) - 116px); }
  .gi-alley { max-height: 108px; }
  body.viewer-guest #noticeBox { scroll-margin-top: 40px; }
  .gi-pair-link { padding-right: 10px; }
  .gi-chev { display: none; }
  .gi-detail-label { display: inline; margin: 0 0 0 auto; font-size: 12px; white-space: nowrap; }
  .gi-hero-cta { padding-top: 24px; }
}
@media (max-width: 899px) and (max-height: 740px) {
  .gi-hero-text { padding-top: 8px; }
  .gi-brand { min-height: 36px; }
  .guest-premium-hero .gi-title { margin-top: 6px; font-size: clamp(26px, 7.4vw, 32px); }
  .gi-lead { margin-top: 6px; font-size: 14px; }
  .gi-board-col { margin-top: 6px; }
  .gi-pair-link { padding-block: 6px; }
  .gi-pair-q { font-size: 16px; }
  .gi-pair-name { font-size: 15px; }
  .gi-hero-cta { padding-top: 22px; padding-bottom: 4px; }
  .gi-hero-cta .gi-btn--main { min-height: 46px; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .gi-hero-text { padding-top: 4px; }
  .gi-brand { min-height: 28px; }
  .gi-brand svg { width: 28px; height: 28px; }
  .guest-premium-hero .gi-title { font-size: 22px; }
  .gi-lead { font-size: 13px; }
  .gi-pairs { gap: 4px; }
  .gi-pair-link { padding-block: 4px; }
  .gi-pair-q { font-size: 15px; }
  .gi-hero-cta { padding-top: 14px; }
}
@media (max-width: 899px) and (max-height: 480px) {
  .gi-hero-cta { order: 2; }
  .gi-board-col { order: 1; }
}
@media (min-width: 900px) {
  .gi-hero { min-height: max(510px, calc(100svh - var(--kmp-topbar-h, 58px) - 126px)); }
  :is(body.viewer-pending, body.viewer-guest) #homeSupport, :is(body.viewer-pending, body.viewer-guest) #noticeBox { width: min(1200px, calc(100% - 64px)); }
  .gi-detail-label { grid-column: 1 / -1; text-align: right; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .gi-tag, .gi-pair-sub { display: none; }
  .gi-pair-link { padding: 10px 14px 10px 24px; }
  .gi-pair-q { font-size: clamp(18px, 1.75vw, 22px); }
  .gi-pair-a { column-gap: 6px; margin-top: 6px; padding-top: 6px; }
  .gi-pair-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.viewer-guest) { scroll-behavior: auto; }
  .gi-pin, .gi-hero[data-shelf="ready"] .gi-pinb { animation: none; }
  .guest-premium-hero *,
  .guest-premium-hero *::before,
  .guest-premium-hero *::after { transition: none !important; }
  .gi-pair-link:hover, .gi-btn--main:hover, .gi-door:hover .gi-door-arrow { transform: none; }
}