/* ═══════════════════════════════════════════════════════════════════════════
   방명록 변형(Minimal · Chat · Ribbon, 그리고 08 의 Notes) — 고객이 고른 본문 꼴.
   마크업은 `_guestvariants.jspf`, 쓰기·삭제 동작은 `invitation-guest-variants.js`.
   전 템플릿(01~09)이 함께 쓴다. 기본형(notes)을 고르면 **템플릿 제 마크업**이 그려져
   이 파일은 쓰이지 않는다 — 08 만 예외로 여기 `.gbv--notes` 를 쓴다.

   ★ 템플릿마다 다르게 보이려면 **변수만** 덮는다(`.lilt-st` 와 같은 관례).
       --gbv-dot     강조(필기체 from · 캡스 라벨)
       --gbv-panel   말풍선·쪽지 면 색
       --gbv-ink     제목 글자색      --gbv-soft   보조 글자색
       --gbv-line    목록 구분선
       --gbv-body    본문 서체(한글 — 고객 선택을 따르려면 var(--ko))
       --gbv-label   캡스·날짜 서체   --gbv-script 필기체 자리 서체
       --gbv-btn     제출 버튼 알약(기본 = --gbv-ink)   --gbv-btn-ink 그 위 글자색
       --gbv-bubble  채팅 말풍선 종이(왼쪽)              --gbv-paper   작성 팝업 종이
       --gbv-bubble-ink / --gbv-panel-ink  그 말풍선 안 글자색(기본 = 지면 글자색)
                     ⚠ 면을 짙게 쓰면 **반드시 함께** 뒤집을 것 — 검은 글자가 그대로 남는다
       --gbv-card    흐르는 카드 면(기본 = 지면을 5% 눌러 만든 톤온톤)
   ⚠ 작성 팝업(`.gbv-modal`)은 지면 밖(body 끝)에 서므로 **`.gbv` 안이 아니다** —
     템플릿은 `.gbv, .gbv-modal{ … }` 로 **둘 다에** 변수를 준다. 한쪽만 주면 팝업만 08 색이 된다.
   ⚠ 기본값은 08 의 색·서체다 — 비워 두면 08 무드로 떨어진다.
   ═══════════════════════════════════════════════════════════════════════════ */
.gbv{
  --gbv-dot:var(--dot,#5d6b55); --gbv-dot-ink:var(--dot-ink,#fbfaf7);
  --gbv-panel:var(--panel,#e9e5da); --gbv-ink:#262522; --gbv-soft:#3d3b37;
  --gbv-line:rgba(38,37,34,.18);
  width:100%; margin-top:36px; color:var(--gbv-ink); font-family:var(--gbv-body,'IBM Plex Sans KR',sans-serif); text-align:left;
}
.gbv button,.gbv input,.gbv textarea,.gbv-modal button,.gbv-modal input,.gbv-modal textarea{ font:inherit; color:inherit; }
/*
 * 입력 칸의 글자 — **두 가지를 동시에** 지켜야 한다.
 *   ① 아이폰은 16px 보다 작은 칸에 포커스가 가면 지면을 **확대**하고 돌아오지 않는다
 *      (viewport 의 user-scalable=no 로는 못 막는다 — iOS 10 부터 무시된다).
 *   ② 그렇다고 16px 로 두면 청첩장 본문(12.5px)보다 커서 **입력칸만 툭 튀어 보인다.**
 *
 * 그래서 **포커스가 갈 때만 16px**, 평소에는 **본문과 같은 12.5px** 로 둔다. 확대는 포커스
 * 순간에 결정되므로 이것으로 막히고, 평소 보이는 placeholder 는 지면 글자와 같은 크기다.
 * ⚠ 이 짝(평소 12.5px / :focus 16px)을 깨지 말 것 — 한쪽만 고치면 확대가 돌아오거나 글자가 튄다.
 */
.gbv input,.gbv textarea,.gbv-modal input,.gbv-modal textarea{ font-size:calc(12.5px * var(--fs,1)); }
.gbv input:focus,.gbv textarea:focus,.gbv-modal input:focus,.gbv-modal textarea:focus{ font-size:calc(16px * var(--fs,1)); }
/* ⚠ **안내 글자는 커지지 않게 묶는다**(2026-09-28) — 포커스만 주고 아직 아무것도 치지 않았을 때,
   위 규칙 때문에 placeholder 가 12.5 → 16px 로 **눈앞에서 불쑥 커졌다.**
   아이폰의 확대 판정은 **칸의 font-size** 로만 하므로(placeholder 는 보지 않는다), 안내 글자만
   본문 크기로 되돌려도 ①은 그대로 지켜진다. 실제로 치는 글자는 16px 이다. */
.gbv input:focus::placeholder,.gbv textarea:focus::placeholder,
.gbv-modal input:focus::placeholder,.gbv-modal textarea:focus::placeholder{ font-size:calc(12.5px * var(--fs,1)); }
.gbv-empty{ padding:24px 0; border-top:1px solid var(--gbv-line); border-bottom:1px solid var(--gbv-line);
  text-align:center; color:var(--gbv-soft); font-size:calc(12px * var(--fs,1)); }
.gbv-empty[hidden]{ display:none; }
.gbv-del{ border:0; background:none; cursor:pointer; opacity:.35; }
.gbv-del[hidden]{ display:none; }

/* 글을 남길 때 받는 삭제 비밀번호 — 전 템플릿의 기존 폼과 같은 규칙이다.
   ⚠ 이 칸을 빼지 말 것: 없으면 하객이 제 글을 지울 길이 없다(브라우저에만 남는 난수로는
     기기를 바꾸는 순간 끝이다). 비워 두면 '남기기'가 잠긴다. */
.gbv-pwin{ min-width:0; height:30px; padding:0 2px; border:0; border-bottom:1px solid var(--gbv-line);
  outline:0; background:none; }
.gbv-min__ids{ margin-top:12px; padding-top:11px; border-top:1px solid var(--gbv-ids-line, rgba(38,37,34,.14));
  display:flex; align-items:baseline; gap:12px; }
.gbv-min__ids > *{ flex:1; min-width:0; }

/* 지우기 비밀번호 — ✕ 를 누른 글 **안**에 한 줄이 열린다(맞으면 지워지고, 틀리면 알린다).
   ⚠ 팝업으로 만들지 말 것 — 어느 글을 지우는지 알 수 없어진다. 글에 붙어 있어야 한다. */
.gbv-pw{ margin-top:9px; display:flex; align-items:center; gap:8px; }
.gbv-pw__in{ flex:1; min-width:0; height:32px; padding:0 2px; border:0; border-bottom:1px solid var(--gbv-line);
  outline:0; background:none; }
.gbv-pw__go{ flex:none; min-width:52px; height:32px; padding:0 13px; border:0; border-radius:999px;
  background:var(--gbv-btn,var(--gbv-ink)); color:var(--gbv-btn-ink,#fbfaf7)!important;
  font-size:calc(11px * var(--fs,1)); font-weight:500; cursor:pointer; }
.gbv-pw__go:disabled{ opacity:.5; cursor:default; }

/* 기존 08 · 겹쳐 붙인 종이 쪽지 */
.gbv--notes .notes{ margin-top:0; }
/* ⚠ 08 은 섹션이 `align-items:center` 라 예전에는 이 줄이 저절로 가운데 섰다. 조각으로
   옮기며 `.gbv`(폭 100%)가 한 겹 끼면서 왼쪽으로 밀렸다 — 가운데를 되돌린다. */
.gbv--notes .gb__nav{ margin-top:24px; justify-content:center; }
.gbv--notes .note__x[hidden]{ display:none; }

/* A · Minimal */
/* 입력 칸의 선·면은 변수다 — 기본은 밝은 지면용(어두운 글자·흰 반투명). 어두운 지면은 `--gbv-field-line` · `--gbv-field-bg` · `--gbv-bar-bg` · `--gbv-ids-line` 를 덮는다. */
.gbv-min__form{ padding:16px 18px 14px; border:1px solid var(--gbv-field-line, rgba(38,37,34,.22)); background:var(--gbv-field-bg, rgba(255,255,255,.5)); }
.gbv-min__form textarea{ width:100%; height:76px; padding:0; border:0; outline:0; resize:none; background:transparent;
  line-height:1.8; }
/* 이름·비밀번호가 윗줄(.gbv-min__ids)로 빠져, 여기는 글자수와 버튼만 남는다. */
.gbv-min__foot{ min-height:42px; margin-top:4px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; }
.gbv-min__name{ height:30px; padding:0; border:0; outline:0; background:none; font-weight:500; }
/* ⚠ 날짜·글자수는 **숫자뿐이라 본문 서체(--gbv-body)** 를 쓴다 — 캡스 라벨 서체는 라틴이고,
   그 옛숫자가 한글 옆에서 흔들려 보인다(2026-09-28 "숫자는 한글꼴로"). */
.gbv-count{ flex:none; font-family:var(--gbv-body,inherit); font-size:calc(9px * var(--fs,1)); letter-spacing:.04em; opacity:.45; font-variant-numeric:tabular-nums; }
/* ⚠ 선택자를 `.gbv`/`.gbv-modal` 로 한 겹 올려 못박는다 — 위(27줄)의 `.gbv button{ font:inherit }`
   가 명시도에서 이겨, 그냥 `.gbv-submit` 로 쓰면 **font-size 가 통째로 무시되고 본문 16px 을
   상속했다**(2026-09-29 "방명록 남기기 버튼 졸라 크다"의 정체). 한 겹을 내리지 말 것. */
.gbv .gbv-submit, .gbv-modal .gbv-submit{
  min-width:66px; height:30px; padding:0 14px; border:0; border-radius:999px;
  background:var(--gbv-btn,var(--gbv-ink)); color:var(--gbv-btn-ink,#fbfaf7)!important;
  font-size:calc(11.5px * var(--fs,1)); font-weight:500; line-height:1; cursor:pointer; }
.gbv-submit:disabled{ opacity:.5; cursor:default; }
.gbv-min__list{ margin-top:26px; border-bottom:1px solid var(--gbv-line); }
.gbv-min__row{ position:relative; padding:18px 44px 18px 0; border-top:1px solid var(--gbv-line); }
.gbv-min__head{ display:flex; align-items:baseline; gap:8px; }
.gbv-min__name-t{ font-size:calc(12.5px * var(--fs,1)); font-weight:500; }
.gbv-min__date{ font-family:var(--gbv-body,inherit); font-size:calc(9px * var(--fs,1)); opacity:.5; }
.gbv-min__msg{ margin:8px 0 0; font-size:calc(12.5px * var(--fs,1)); line-height:1.8; white-space:normal; overflow-wrap:anywhere; }
.gbv-min__row .gbv-del{ position:absolute; right:-10px; top:7px; width:44px; height:44px; }
.gbv-min__row.is-hidden{ display:none; }
/* ⚠ 앞에 .gbv 를 붙인다 — 한 단계면 위의 `.gbv button{ font:inherit }` 가 이겨 크기가 템플릿 body 를 물려받는다(01~05 는 16px). */
.gbv .gbv-more{ min-height:44px; margin:12px auto 0; padding:0 10px; border:0; background:none; display:block;
  font-size:calc(12px * var(--fs,1)); opacity:.7; cursor:pointer; }
.gbv-more[hidden]{ display:none; }

/* B · Chat */
/* ⚠ 대화창은 **제 높이 안에서** 스크롤한다 — 다른 유형은 접히거나(쪽지·미니멀의 더보기)
   가로로 흐르는데(리본) 채팅만 전부 펼쳐져 있어, 글이 쌓이면 청첩장이 끝없이 길어졌다.
   최신 글이 맨 아래라 처음 열 때·보낸 뒤에는 스크립트가 바닥으로 내린다.
   ⚠ 손가락으로 넘기는 기기에서는 `overscroll-behavior:contain` 을 빼지 말 것 — 대화창 끝에서
     더 밀면 지면이 함께 튀어 "방명록을 넘기다 페이지가 넘어간다". 반대로 마우스 휠에서는
     **가두지 않는다** — 지면을 읽어 내려가다 커서가 대화창에 얹히면 스크롤이 막혀 갑갑해진다. */
.gbv-chat{ display:flex; flex-direction:column; gap:14px;
  /* 높이는 2026-09-27 에 420 → 280px 로 줄였다("너무 길다"는 지적). 비율도 같이 줄인다. */
  max-height:min(37vh, 280px);
  max-height:min(37svh, 280px);   /* svh 를 모르는 브라우저는 윗줄로 떨어진다 */
  overflow-y:auto; padding:0 12px;   /* ⚠ 좌우 12px 은 말풍선 꼬리 자리다 — 줄이면 꼬리가 잘린다 */
  scrollbar-width:thin; scrollbar-color:var(--gbv-line) transparent; }
/* 위쪽이 살짝 흐려지며 끊긴다 — "더 있다"는 표시이자 대화창의 경계선 노릇을 한다.
   ⚠ 색이 아니라 **마스크**로 흐린다 — 템플릿마다 지면색이 달라 그러데이션 색을 못 박는다.
   ⚠ 스크롤할 게 있을 때만 건다(is-scrollable — JS 가 붙인다) — 글이 두어 개뿐인데
     첫 말풍선이 흐려지면 그냥 흐릿한 지면으로 보인다. */
.gbv-chat.is-scrollable{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 20px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 20px);
}
@media (hover:none){ .gbv-chat{ overscroll-behavior:contain; } }
.gbv-chat::-webkit-scrollbar{ width:3px; }
.gbv-chat::-webkit-scrollbar-thumb{ background:var(--gbv-line); border-radius:3px; }
.gbv-chat::-webkit-scrollbar-track{ background:transparent; }
.gbv-chat__entry{ display:flex; flex-direction:column; align-items:flex-start; }
.gbv-chat__entry:nth-child(even){ align-items:flex-end; }
/* 글쓴이는 **말풍선 바로 위**에 붙는다(카카오톡 짜임 · 2026-09-28) — 말풍선 왼쪽 선에 맞춘다. */
.gbv-chat__name{ margin-bottom:1px; padding:0 3px; font-size:calc(10.5px * var(--fs,1)); font-weight:500; opacity:.72; }
/* 말풍선과 그 옆 정보(일시·지우기)는 한 줄이다 — **아래끝을 맞춰** 시간이 말 밑동에 선다. */
.gbv-chat__row{ max-width:92%; display:flex; align-items:flex-end; gap:5px; }
.gbv-chat__entry:nth-child(even) .gbv-chat__row{ flex-direction:row-reverse; }
/* ⚠ 말풍선에는 **테두리가 없다**(2026-09-28 지시) — 대신 **면 색이 지면과 달라야** 한다.
   예전엔 테두리가 형태를 잡아 줬지만 카카오톡에는 없는 선이라 어색했다. 그래서 테두리를 걷고
   묻히던 네 템플릿(01·06·07·08)의 말풍선 색을 지면보다 한 단계 어둡게 내렸다.
   ⚠ **말풍선 색을 손댈 땐 check-bubble-contrast.js 를 돌릴 것** — 대비 1.08 밑으로 내려가면
     지면과 같은 색이 되어 말풍선이 사라진다(07 은 오른쪽이 실제로 1.000 이었다). */
.gbv-chat__bubble{ position:relative; min-width:0; padding:11px 16px; background:var(--gbv-bubble,#efeee9);
  color:var(--gbv-bubble-ink, inherit);
  border-radius:0 20px 20px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
/* 꼬리 — 말풍선 **왼쪽 위**에서 밖으로 뻗는다(2026-09-28 · 받은 카카오톡 그림 그대로).
   ⚠ 아래가 아니라 **위**다. 아래에 달았더니 "너무 이상하다"는 지적을 받았다.
   ⚠ **꼬리가 붙는 모서리는 곡률이 0 이다.** 조금이라도 둥글리면 그 곡선만큼 가장자리가
     안으로 들어가 꼬리와의 사이에 실금이 보인다. 나머지 세 곳은 크게 둥글다.
   ⚠ 삼각형이 두 겹이다 — 뒤에 테두리색, 앞에 면색. 말풍선 테두리가 꼬리에서 끊기면
     지면과 대비가 낮은 템플릿에서 꼬리만 떠 보인다.
   ⚠ 꼬리는 말풍선 밖으로 나가므로 대화창(.gbv-chat)에 그만큼 좌우 여백이 있어야 한다 —
     .gbv-chat 은 overflow-y:auto 라 가로도 함께 잘린다. 둘을 같이 볼 것. */
/* ⚠ 꼬리는 말풍선 안으로 **1px 물린다**(삼각형 밑변 8px 중 1px) — 딱 붙여 놓으면 둘 사이에
   머리카락 같은 실금이 보인다(2026-09-28 지적). 꼬리가 붙는 모서리의 곡률도 0 이라야 한다. */
.gbv-chat__bubble::after{
  content:''; position:absolute; left:-7px; top:0; width:0; height:0; border-style:solid;
  border-width:9px 0 0 8px; border-color:var(--gbv-bubble,#efeee9) transparent transparent transparent;
  pointer-events:none; }
/* ⚠ 본문 서식은 말풍선이 아니라 이 줄이 쥔다 — 이름·날짜가 말풍선 안으로 들어오면서
   말풍선에 걸린 `line-height`·`white-space` 가 그 줄까지 늘여 놓았었다. */
.gbv-chat__msg{ margin:0; font-size:calc(12.5px * var(--fs,1)); line-height:1.7; white-space:normal; overflow-wrap:anywhere; }
/* 오른쪽 말풍선은 좌우가 뒤집힌다 — 꼬리도 오른쪽 위로. */
.gbv-chat__entry:nth-child(even) .gbv-chat__bubble{ background:var(--gbv-panel); border-radius:20px 0 20px 20px;
  color:var(--gbv-panel-ink, inherit); }
.gbv-chat__entry:nth-child(even) .gbv-chat__bubble::after{ left:auto; right:-7px; border-width:9px 8px 0 0;
  border-top-color:var(--gbv-panel); }
/* 오른쪽 말풍선은 날짜·✕ 차례도 뒤집는다(✕ 가 다시 말풍선에서 먼 쪽 = 왼쪽). */
.gbv-chat__entry:nth-child(even) .gbv-chat__meta{ flex-direction:row; }
/* 말풍선 옆 — 작성일시와 지우기(✕)가 **한 줄**로 선다(2026-09-28 지시).
   ✕ 는 늘 말풍선에서 **먼 쪽**이다: 왼쪽 말풍선이면 날짜 오른쪽, 오른쪽 말풍선이면 날짜 왼쪽.
   말풍선 쪽에 붙이면 꼬리·모서리와 겹쳐 보인다.
   ⚠ 글자 아래선을 **말풍선 밑변에 맞춘다** — 그냥 두면 한 뼘 떠 보인다.
     줄 높이를 정하는 것은 날짜가 아니라 **✕ 과녁(28px)** 이다. 가운데 맞춤이라 8.5px 글자가
     그 한가운데에 서고, 그만큼 밑변 위로 뜬다. 음수 여백으로 그 차이를 내려 앉힌다(실측 -6px). */
.gbv-chat__meta{ flex:none; display:flex; flex-direction:row-reverse; align-items:center; gap:0;
  margin-bottom:-6px; }
.gbv-chat__date{ font-family:var(--gbv-body,inherit); font-size:calc(8.5px * var(--fs,1)); line-height:1;
  opacity:.5; white-space:nowrap; }
/* ⚠ 과녁은 28px 그대로 두고 **바깥 여백만 음수로** 당긴다 — 폭을 줄이면 손가락이 빗나간다. */
.gbv-chat__meta .gbv-del{ width:28px; height:28px; margin:0 -4px; padding:0; font-size:calc(10px * var(--fs,1)); line-height:1; }
.gbv-chat__form{ margin-top:28px; }
.gbv-chat__identity{ min-height:32px; padding:0 14px 7px; display:flex; align-items:baseline; gap:8px; }
.gbv-chat__identity em{ color:var(--gbv-dot); font-family:var(--gbv-script,'Pinyon Script',cursive); font-size:calc(15px * var(--fs,1)); font-style:normal; }
.gbv-chat__identity input{ flex:1; min-width:0; height:28px; padding:0; border:0; border-bottom:1px solid var(--gbv-field-line-soft, rgba(38,37,34,.18));
  outline:0; background:none; font-weight:500; }
.gbv-chat__identity input.gbv-pwin{ flex-grow:calc(1 + (var(--fs,1) - 1) * 4.7); }   /* 글자 크기 단계(크게)에서 「삭제 비밀번호」 안내 글이 한 줄에 들어가도록 단계에 따라서만 넓힌다(기본 --fs=1 이면 1 이라 예전과 같다) */
.gbv-inputbar{
  width:100%; min-height:44px; padding:5px 6px 5px 17px; border:1px solid var(--gbv-field-line-soft, rgb(38 37 34 / 18%));
  border-radius:999px; background:var(--gbv-bar-bg, rgb(255 255 255 / 31%)); display:flex; align-items:center; justify-content:space-between;
  gap:9px;
}
.gbv-inputbar textarea{ flex:1; min-width:0; height:28px; max-height:64px; padding:4px 0; border:0; outline:0; resize:none;
  overflow-y:auto; background:none; line-height:20px; }
.gbv-chat__send{ width:32px; height:32px; flex:none; padding:0; border:0; border-radius:50%; background:var(--gbv-dot);
  color:var(--gbv-dot-ink)!important; display:grid; place-items:center; font-size:calc(17px * var(--fs,1)); cursor:pointer; }
.gbv-chat__send:disabled{ opacity:.38; cursor:default; }
.gbv-chat__form .gbv-modal__err{ margin:7px 14px 0; }
.gbv-chat__entry.is-new{ animation:gbvRise .4s ease both; }
@keyframes gbvRise{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* C · Flow — 카드가 한 줄로 흘러간다(고객 화면의 이름은 '플로우'). */
.gbv--ribbon{
  width:min(100vw,430px); margin-left:calc(50% - min(50vw,215px)); margin-right:0;
/* ⚠ **align-self 를 빼지 말 것** — 지면 끝까지 눕히는 이 셈(width:100vw + 음수 margin)은
   부모가 블록일 때를 전제한다. 08·09 처럼 부모 섹션이 flex(align-items:center) 면 가운데
   맞춤이 음수 margin 을 한 번 더 먹어 띠가 **왼쪽으로 여백의 절반만큼 밀린다**(2026-09-28 실측:
   왼쪽 -28px / 오른쪽 -28px). flex-start 로 세워 두면 블록일 때와 셈이 같아진다. */
  align-self:flex-start;
}
.gbv-ribbon{ display:flex; flex-direction:column; gap:12px; }
/* ⚠ 저절로 흐르지만 **손으로도 밀 수 있다**(2026-09-27) — 읽고 싶은 카드를 붙잡을 수 있어야 한다.
   스크롤 컨테이너는 이 줄이고, 흐름은 안쪽 트랙의 transform 이라 서로 간섭하지 않는다. */
.gbv-ribbon__row{ overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; }
.gbv-ribbon__row::-webkit-scrollbar{ display:none; }
.gbv-ribbon__track{ display:flex; width:max-content; animation:gbvMq var(--gbv-speed,46s) linear infinite; }
/* 글이 적어 한 벌이 화면보다 좁을 때(JS 가 `is-still` 을 붙인다) — 흐르지 않고 그냥 선다.
   ⚠ 이때는 트랙이 한 벌뿐이라 -50% 로 흘리면 절반이 빈 자리다. 가운데로 모아 둔다. */
.gbv-ribbon__row.is-still{ overflow-x:hidden; }
.gbv-ribbon__row.is-still .gbv-ribbon__track{ animation:none; width:100%; justify-content:center; }
/* 손을 얹은 동안만 멈춘다 — 떼면 다시 흐른다.
   ⚠ **마우스가 있는 기기에서만** 멈춘다(2026-09-28) — 손가락으로 탭한 요소에는 아이폰이
     :hover 를 **눌어붙인 채로 둔다.** 그래서 ✕ 를 눌렀다 닫아도(JS 가 is-paused 를 떼어도)
     이 규칙이 이겨 띠가 영영 멈춰 있었다. 터치에서는 hover 로 멈추지 않는다. */
@media (hover:hover) and (pointer:fine){
  .gbv-ribbon__row:hover .gbv-ribbon__track,.gbv-ribbon__row:active .gbv-ribbon__track{ animation-play-state:paused; }
}
/* ⚠ 카드 면은 **지면을 아주 옅게 눌러** 만든다(2026-09-28) — 불투명한 흰 상자는 따뜻한
   종이 위에서 혼자 새하얗게 튀고("네모박스가 새하얘서 튐"), 그렇다고 흰색을 반투명으로
   덧씌우면 지면이 이미 흰 템플릿(07·08)에서는 아예 보이지 않는다(실측 대비 1.03).
   검정을 5% 만 깔면 지면이 밝든 어둡든 같은 무게다 — 안내 스와이프 카드와 같은 셈.
   말풍선(--gbv-bubble)은 글이 또렷해야 해서 불투명한 채로 둔다.
   템플릿이 제 색을 주고 싶으면 --gbv-card 를 덮는다. */
.gbv-ribbon__card{ flex:none; width:max-content; max-width:240px; margin-right:12px; padding:14px 18px; position:relative;
  border:1px solid var(--gbv-line); background:var(--gbv-card,rgba(0,0,0,.05)); }
/* 흐르는 카드의 지우기 — 비밀번호를 치는 동안에는 그 줄을 세운다(is-paused).
   ⚠ 같은 글이 두 벌 복제되어 흐른다 — 지울 때 같은 data-id 를 **전부** 걷어야 한다(JS 가 그렇게 한다). */
.gbv-ribbon__x{ position:absolute; right:3px; top:3px; width:26px; height:26px; padding:0; font-size:calc(10px * var(--fs,1)); line-height:1; }
.gbv-ribbon__row.is-paused .gbv-ribbon__track{ animation-play-state:paused; }
.gbv-ribbon__card .gbv-pw{ margin-top:10px; }
.gbv-ribbon__card .gbv-pw__in{ height:30px; }
.gbv-ribbon__card .gbv-pw__go{ min-width:44px; height:28px; padding:0 10px; font-size:calc(10px * var(--fs,1)); }
/* ⚠ ✕ 가 오른쪽 위 모서리에 얹히므로 **첫 줄 오른쪽을 비워 둔다** — 안 그러면 짧은 글의
   끝 글자가 ✕ 밑에 깔린다(2026-09-28 지적). 지우기가 없는 글은 이 여백이 남을 뿐이다. */
.gbv-ribbon__msg{ margin:0; padding-right:20px; font-size:calc(12px * var(--fs,1)); line-height:1.7;
  white-space:normal; overflow-wrap:anywhere; }
.gbv-ribbon__from{ margin-top:8px; display:flex; align-items:baseline; gap:6px; }
.gbv-ribbon__from em{ color:var(--gbv-dot); font-family:var(--gbv-script,'Pinyon Script',cursive); font-size:calc(14px * var(--fs,1)); font-style:normal; }
.gbv-ribbon__from b{ font-size:calc(11px * var(--fs,1)); font-weight:500; }
.gbv-ribbon__date{ margin-left:2px; font-family:var(--gbv-body,inherit); font-size:calc(8.5px * var(--fs,1)); opacity:.5; }
.gbv-ribbon__foot{ min-height:44px; margin-top:18px; display:flex; justify-content:center; align-items:center; gap:12px; }
.gbv-ribbon__count{ font-family:var(--gbv-body,inherit); font-size:calc(10px * var(--fs,1)); letter-spacing:.14em; opacity:.6; }
.gbv-ribbon__bar{ width:1px; height:12px; background:currentColor; opacity:.25; }
.gbv .gbv-ribbon__write{ min-height:40px; padding:0;   /* ⚠ .gbv 를 붙여야 12px 이 먹는다(위 .gbv-more 주석) */ border:0; border-bottom:1px solid currentColor; background:none;
  font-size:calc(12px * var(--fs,1)); cursor:pointer; }
/* 한 벌이 끝나고 다시 시작하기 전의 짧은 틈 — 없으면 마지막 글과 첫 글이 붙어 흐른다. */
.gbv-ribbon__gap{ flex:none; width:56px; }
@keyframes gbvMq{ to{ transform:translateX(-50%); } }

/* 기존 Notes/Ribbon 공통 작성 팝업 */
.gbv-modal{
  --gbv-dot:var(--dot,#5d6b55); --gbv-dot-ink:var(--dot-ink,#fbfaf7);
  --gbv-panel:var(--panel,#e9e5da); --gbv-ink:#262522; --gbv-soft:#3d3b37;
  position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center; padding:26px;
}
.gbv-modal.open{ display:flex; }
.gbv-modal__back{ position:absolute; inset:0; border:0; background:rgba(22,22,22,.38); opacity:0; transition:opacity .3s; }
.gbv-modal.open .gbv-modal__back{ opacity:1; }
.gbv-modal__paper{ position:relative; z-index:1; width:min(100%,378px); padding:34px 24px 24px; background:var(--gbv-paper,#f7f6f2);
  box-shadow:0 24px 44px -18px rgba(0,0,0,.45); transform:translateY(18px); opacity:0; transition:.35s ease; }
.gbv-modal.open .gbv-modal__paper{ transform:none; opacity:1; }
.gbv-modal__close{ position:absolute; right:5px; top:5px; width:44px; height:44px; border:0; background:none; font-size:22px; cursor:pointer; }
.gbv-modal__label{ color:var(--gbv-dot); font-family:var(--gbv-label,'Archivo',sans-serif); font-size:calc(9px * var(--fs,1)); font-weight:500; letter-spacing:.2em; }
.gbv-modal__title{ margin-top:5px; font-size:calc(15px * var(--fs,1)); font-weight:500; }
.gbv-modal textarea{ display:block; width:100%; height:140px; margin-top:14px; padding:0 2px; border:0; outline:0; resize:none;
  background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(43,42,39,.16) 27px 28px);
  line-height:28px; }
.gbv-modal__from{ margin-top:14px; display:flex; justify-content:flex-end; align-items:baseline; gap:8px; }
.gbv-modal__from + .gbv-modal__from{ margin-top:10px; }
.gbv-modal__from em{ font-family:var(--gbv-script,'Pinyon Script',cursive); font-size:calc(15px * var(--fs,1)); font-style:normal; }
.gbv-modal__from input{ width:130px; height:30px; padding:0 2px; border:0; border-bottom:1px solid rgba(43,42,39,.5);
  outline:0; background:none; font-weight:500; }
.gbv-modal__foot{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gbv-modal__err{ margin:0; color:#9a4a30; font-size:calc(11px * var(--fs,1)); }
@media (prefers-reduced-motion:reduce){
  .gbv-ribbon__row{ overflow-x:auto; scrollbar-width:none; }
  .gbv-ribbon__track{ animation:none; }
  .gbv-chat__entry.is-new,.gbv-modal__back,.gbv-modal__paper{ animation:none; transition:none; }
}

/* ── 이름은 길어도 카드·말풍선 밖으로 새지 않는다 ──
   2026-10-15 전수 점검: 띄어쓰기 없는 40자 이름이 채팅(말풍선 위)에서 +134px, 리본 카드에서 +237px 밖으로 샜다.
   글(.msg)에는 이미 overflow-wrap:anywhere 가 있었고 이름만 빠져 있었다(API 는 이름을 40자까지 받는다). */
.gbv-chat__entry{ min-width:0; }
.gbv-chat__name{ max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.gbv-ribbon__from{ min-width:0; flex-wrap:wrap; }
.gbv-ribbon__from b{ min-width:0; max-width:100%; overflow-wrap:anywhere; }
.gbv-min__head{ min-width:0; flex-wrap:wrap; }
.gbv-min__name-t{ min-width:0; max-width:100%; overflow-wrap:anywhere; }