/* 코이소나타 웹 — 순수 CSS. 전처리기도 빌드도 없다.
   색·간격은 커스텀 속성 한 곳에서 정한다.
   디자인 토큰은 시안(Koi Sonata 디자인 시스템)을 따른다 — 벚꽃 핑크 + 네이비 잉크. */
:root {
  /* ── 디자인 B "Sakura Letter(恋文)" — 와시 종이 · 블러시 · 로즈 잉크 · 봉랍.
     기존 변수 이름(--brand/--fg/...)은 그대로 두고 값만 B 로 바꾼다 — 화면별 규칙이
     이 이름들을 쓰므로 여기서 한 번에 새 색으로 넘어간다. 모든 글자 조합은 WCAG AA. */
  --paper: #fbf6ef;          /* 페이지(와시) */
  --paper-2: #f5ebe2;
  --card: #fffdfa;           /* 편지지·카드 */
  --blush: #f8e6e4;
  --blush-2: #f2d2d6;
  --petal: #f4c6cf;
  --petal-2: #eaa6b6;
  --ink: #3b2830;            /* 플럼 브라운 잉크 12.7:1 */
  --rose: #b23a62;           /* 링크·CTA 5.3:1, 흰 글자 5.7:1 */
  --rose-deep: #8f2b4d;
  --wax: #a8344f;
  --gold: #c39a62;           /* 장식 전용 */
  --gold-ink: #8a6a3a;       /* 금액 글자 4.6:1 */
  --green: #2f7a55;
  --green-dot: #3fae78;
  --line-2: #e2c9c4;
  --plum: #3b2830;
  --plum-2: #5a3140;
  --on-plum: #fbf1ea;

  --bg: var(--card);         /* 표면(카드·패널) */
  --cream: var(--paper);     /* 페이지 바탕 */
  --bg-soft: #f7ece8;        /* 옅은 표면(태그·칩 배경) */
  --fg: var(--ink);
  --muted: #6e5660;          /* 6.2:1 */
  --line: #ecdcd5;
  --brand: var(--rose);
  --brand-dark: var(--rose-deep);
  --brand-soft: var(--blush-2);
  --brand-fg: #fff;
  --danger: #b3261e;
  --radius: 12px;            /* sm */
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px -8px rgba(120,60,70,.18);
  --shadow-md: 0 18px 40px -18px rgba(120,50,70,.30), 0 4px 12px -6px rgba(120,50,70,.12);
  --shadow-lg: 0 30px 60px -24px rgba(110,40,60,.38);
  --gap: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
  /* 사용자가 40대 이상 여성이다. 본문 17px, 의미 있는 글자는 15px 미만으로 내리지 않는다.
     16px 미만 입력칸은 iOS 가 포커스 때 화면을 확대하기도 한다. */
  --font: 17px/1.8 "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
          "Apple SD Gothic Neo", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Nanum Myeongjo", serif;
  --font-script: "Parisienne", "Noto Serif JP", cursive;   /* 로고 워드마크·아이브로 */
  --font-hand: "Klee One", "Noto Serif JP", cursive;       /* "그의 손글씨" */
  /* 와시 질감 — 인라인 SVG 노이즈. 파일 요청 없음 */
  --washi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .30  0 0 0 0 .30  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .4  0 0 0 0 .42  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");

  /* 시안 토큰 별칭 */
  --color-primary: var(--brand);
  --color-primary-dark: var(--brand-dark);
  --color-primary-light: #fbe6ea;
  --color-background: var(--cream);
  --color-surface: var(--card);
  --color-text: var(--fg);
  --color-text-secondary: var(--muted);
  --color-text-muted: #86707a;   /* 4.5:1 — 보조 글자 최저선 */
  --color-border: var(--line);
  --color-success: var(--green-dot);
  --color-overlay: rgba(59, 40, 48, .48);
  --app-max: 1180px;
}

* { box-sizing: border-box; }

/*
 * **이 한 줄이 없으면 `hidden` 이 듣지 않는다.**
 * 브라우저 기본 스타일의 `[hidden] { display: none }` 은 우선순위가 가장 낮아,
 * `.step { display: flex }` 처럼 클래스가 display 를 정하면 그쪽이 이긴다.
 * 실제로 가입 화면의 5단계가 **한 화면에 전부 펼쳐져 있었다** (2026-09-05 발견).
 * JS 는 `el.hidden = true` 로 숨기므로, 그 한 줄이 항상 통해야 한다.
 */
[hidden] { display: none !important; }
body {
  margin: 0; font: var(--font); letter-spacing: .02em; color: var(--fg);
  background-color: var(--paper);
  background-image:
    var(--washi), var(--fibre),
    radial-gradient(1200px 600px at 110% -10%, rgba(242,210,214,.55), transparent 60%),
    radial-gradient(900px 500px at -20% 30%, rgba(248,230,228,.7), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 10px; }
/* 스크립트 아이브로 ("Letters" 같은 작은 영문 필기체 머리글) */
.eyebrow { display: block; font-family: var(--font-script); font-size: 22px; line-height: 1; color: var(--rose); letter-spacing: 0; margin-bottom: 6px; }
/* 표제(로고·큰 제목)는 세리프로 — 시안의 "Koi Sonata" 우아한 인상 */
.auth__brand, .detail__name, .section-hero__title { font-family: var(--font-serif); }

/* width 를 고정한다(max-width 만 두면 안 됨). 데스크톱에서 body 가 세로 flex +
   align-items:center 라, width 가 없으면 .auth 가 **내용 폭에 맞춰 줄었다 늘었다** 한다
   — 가입 단계마다 내용 폭이 달라 화면이 커졌다 작아졌다 하고, hr 같은 요소도 짧게
   찌그러진다. min(420px,100%) 로 폭을 일정하게. */
.auth { width: min(420px, 100%); margin: 0 auto; padding: 48px var(--gap) 32px; }
/* 홈 복귀 링크. 가입/로그인은 게스트가 떠밀려 오기도 해서 나갈 길이 필요하다. */
.auth__home { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -16px 0 4px; color: var(--muted); text-decoration: none; font-size: 14px; }
.auth__home:hover { color: var(--brand-dark); }
/* 브랜드 워드마크 — 스크립트 "Koi Sonata"(라틴) 위, 세리프 앱이름 아래. 로그인/가입/찾기 공통. */
.auth__brand { font-size: 22px; color: var(--brand); text-align: center; margin: 0 0 28px; line-height: 1.2; }
.auth__brand::before {
  content: "Koi Sonata"; display: block;
  font-family: var(--font-script); font-size: 34px; line-height: 1; margin-bottom: 2px;
}
.auth__form { display: flex; flex-direction: column; gap: var(--gap); }
/* 가입·비밀번호 찾기로 가는 링크. 글자만 두면 높이가 21px 라 누르기 어렵다 */
.auth__links { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; }
.auth__links a { display: flex; align-items: center; min-height: 44px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 15px; font-weight: 500; color: var(--muted); }
.field__input {
  font: inherit; padding: 13px 16px; min-height: 52px; border: 0;
  border-radius: var(--radius); background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: box-shadow .38s var(--ease);
}
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 4px rgba(178, 58, 98, .12); }

.btn {
  position: relative; overflow: hidden; isolation: isolate;
  font: inherit; font-weight: 700; letter-spacing: .06em;
  padding: 14px 28px; border: 0; border-radius: var(--radius-pill);
  cursor: pointer; min-height: 52px;          /* 터치 목표 최소 크기 */
  transition: background .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
/* 로즈 CTA — 위에서 아래로 짙어지는 잉크 + 호버 시 빛이 한 번 스친다 */
.btn--primary {
  color: var(--brand-fg);
  background: linear-gradient(180deg, #bd4169, var(--rose) 55%, #a33459);
  box-shadow: 0 10px 24px -10px rgba(143,43,77,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease);
}
.btn--primary:hover { color: var(--brand-fg); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(143,43,77,.65); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

.alert {
  margin: 0; padding: 12px; border-radius: var(--radius);
  background: #fdecea; color: var(--danger); font-size: 14px;
}

/* ── 폼 메시지 ─────────────────────────────────── */
.msg { margin: 0; padding: 12px; border-radius: var(--radius); font-size: 14px; }
.msg.alert  { background: #fdecea; color: var(--danger); }
.msg.notice { background: #eef6ec; color: #2c7a3f; }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
.result { margin: 0; padding: 12px; background: #f6f6f6; border-radius: var(--radius); }

/* ── 탭 ────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs__item {
  flex: 1; text-align: center; padding: 12px; text-decoration: none;
  color: var(--muted); border-bottom: 2px solid transparent;
}
.tabs__item.is-on { color: var(--fg); border-bottom-color: var(--brand); font-weight: 600; }

/* ── 단계 표시 ─────────────────────────────────── */
.steps { display: flex; gap: 6px; list-style: none; margin: 0 0 24px; padding: 0; }
.steps__item {
  flex: 1; font-size: 12px; color: var(--color-text-muted); text-align: center;
  padding-top: 10px; border-top: 3px solid var(--color-border); border-radius: 3px;
}
.steps__item.is-on { color: var(--brand); border-top-color: var(--brand); font-weight: 700; }

/* 데스크톱: auth 화면(로그인/가입/찾기)을 크림 배경 위 카드로 */
@media (min-width: 600px) {
  .auth {
    width: min(440px, 100%);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 44px 40px 36px; margin-block: 48px;
  }
  .auth__home { margin-top: 0; }
}
.step { display: flex; flex-direction: column; gap: var(--gap); }
/* 약관 단계 구분선. flex 컬럼에서 기본 hr 은 폭이 찌그러져 점처럼 보인다 —
   전체 폭 얇은 선으로 명시한다. */
.auth hr { align-self: stretch; width: 100%; height: 0; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
/* 인증코드 입력 묶음. div 라 flex 가 아니면 안의 "확인" 버튼이 안 늘어나 작게
   찌그러진다(다른 버튼은 .step 직속이라 전체폭). .step 과 같은 세로 flex 로 맞춘다. */
[data-role="code-area"] { display: flex; flex-direction: column; gap: var(--gap); }

/* ── 체크박스 ──────────────────────────────────── */
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; flex: none; }   /* 터치 목표 */
/* 동의 한 줄 + 약관 본문 링크. 링크가 라벨 밖이라 빗맞아도 동의가 켜지지 않는다 */
.check-row { display: flex; align-items: center; gap: 8px; }
.check-row .check { flex: 1; min-width: 0; }
.check__doc {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin-right: -10px;
  color: var(--muted); text-decoration: none; font-size: 20px;
}

/* ── 사진 ──────────────────────────────────────── */
/* `minmax(0, 1fr)` 인 이유는 카드 목록과 같다 — `1fr` 은 내용 최소 너비 아래로
   줄지 않아 이름이 길면 판이 옆으로 넘친다 */
.photos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  list-style: none; margin: 0 0 var(--gap); padding: 0;
}
.photos__item { position: relative; aspect-ratio: 3 / 4; }
/* `display: block` 이 없으면 img 가 글줄에 앉아 아래 8px 이 남는다.
   그 틈으로 화살표 줄이 사진 밖으로 삐져나온다. */
.photos__item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); background: #eee; cursor: zoom-in;
}
/* 손가락으로 누른다. 사진 위를 좀 가리더라도 44px 를 준다 */
.photos__remove {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
/* 첫 장이 대표다. 표시가 없으면 순서를 바꾸는 일이 무엇을 바꾸는지 알 수 없다 */
.photos__cover {
  position: absolute; top: 4px; left: 4px; padding: 2px 6px;
  border-radius: 6px; background: var(--brand); color: var(--brand-fg);
  font-size: 11px; font-weight: 600;
}
/*
 * 끌어서 옮기지 않는다 — 화면 낭독기로는 조작할 수 없고, 모바일에서는 스크롤과
 * 잡아끌기가 섞여 자주 어긋난다. 화살표 둘이 느리지만 확실하다.
 */
.photos__move { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; }
.photos__arrow {
  flex: 1; min-height: 44px; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 18px; line-height: 1;
}
.photos__arrow:first-child { border-bottom-left-radius: var(--radius); }
.photos__arrow:last-child  { border-bottom-right-radius: var(--radius); }
.photos__arrow:disabled { opacity: .3; cursor: default; }
/* 추가와 저장. 저장이 주된 동작이라 넓게 잡는다 */
.photos__actions { display: flex; gap: 8px; margin-bottom: var(--gap); }
.photos__actions .btn { flex: 1; }
.photos__actions .btn--primary { flex: 2; }

.btn--ghost { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-sm); }
.btn--ghost:hover { color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px var(--rose), var(--shadow-sm); }
/* 보조 CTA — 편지지 바탕 + 로즈 잉크(통화 버튼 등) */
.btn--outline { background: var(--card); color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-sm); }
.btn--outline:hover { color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px var(--rose), var(--shadow-sm); transform: translateY(-1px); }

/* ── 모달 (무료 소진 가입 게이트 등) ── */
.modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--color-overlay);                 /* 과하지 않은 오버레이 */
  animation: modal-fade .18s ease;
}
.modal__box {
  width: 100%; max-width: 420px; background: var(--color-surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background-image: var(--washi);
  padding: 32px 28px; text-align: center; animation: modal-pop .2s ease;
}
.modal__title { margin: 0 0 10px; font-family: var(--font-serif); font-size: 20px; color: var(--color-text); }
.modal__desc { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--color-text-secondary); }
.modal__cta { width: 100%; }
.modal__close {
  display: block; width: 100%; margin-top: 8px; padding: 12px; min-height: 44px;
  border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 14px; cursor: pointer;
}
.modal__close:hover { color: var(--color-text-secondary); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal, .modal__box { animation: none; } }
/* 더 보기 — 목록 아래 가운데. 버튼은 기본이 인라인이라 그냥 두면 왼쪽에 붙는다. */
[data-role="more"] { display: block; margin: var(--gap) auto 0; }
select.field__input { appearance: none; background: #fff; }

/* ── 로그인 화면 레이아웃 ──────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px;
  min-height: 60px; padding: 8px var(--gap);
  background: rgba(251,246,239,.96);          /* 모바일은 블러 없이 — 블러 층은 탭바 하나만 */
  border-bottom: 1px solid rgba(226,201,196,.6);
}
/* 손가락으로 누르는 버튼이다. 글자 크기(24px)만으로는 목표가 너무 작다 */
.topbar__back {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -12px 0 -12px -10px;
  font-size: 24px; line-height: 1; text-decoration: none; color: var(--fg);
}
.topbar__title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: .08em; }

.app {
  padding: var(--gap);
  padding-left: max(var(--gap), env(safe-area-inset-left)); padding-right: max(var(--gap), env(safe-area-inset-right));
  padding-bottom: calc(96px + env(safe-area-inset-bottom));   /* 하단 탭바만큼 비운다 */
}

/* 하단 탭바 — 아이콘 + 16px 라벨, 현재 탭은 블러시 알약 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));   /* 홈 인디케이터 */
  background: rgba(255,253,250,.94); backdrop-filter: blur(16px) saturate(1.3);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -20px rgba(120,50,70,.35);
}
.tabbar__nav { display: grid; grid-template-columns: repeat(3, 1fr); flex: 1; max-width: 520px; margin: 0 auto; }
.tabbar__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 4px; border-radius: 18px;
  font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: .02em;
  text-decoration: none; color: var(--muted); transition: color .38s var(--ease), background .38s var(--ease);
}
.tabbar__item:hover { color: var(--rose-deep); }
.tabbar__item.is-on {
  color: var(--rose-deep); font-weight: 700;
  background: linear-gradient(180deg, #fbe6ea, #f6d5dc); box-shadow: inset 0 0 0 1px rgba(178,58,98,.14);
}
.tabbar__icon { display: block; width: 26px; height: 26px; flex: none; }
.tabbar__item.is-on .tabbar__icon { stroke-width: 1.9; }
@media (orientation: landscape) and (max-height: 500px) and (max-width: 599px) {
  .tabbar { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .tabbar__item { flex-direction: row; gap: 8px; min-height: 48px; }
}
.tabbar__item--desk { display: none; }        /* 캐스트는 데스크톱 전용 */
.tabbar__brand, .tabbar__actions { display: none; }   /* 로고·아이콘은 넓은 화면에서만 */

/* ── 목록 ──────────────────────────────────────── */
.chips {
  display: flex; gap: 8px; overflow-x: auto; margin-bottom: var(--gap); padding: 4px 2px;
  scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }
.chips__item {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2);
  font-size: 16px; font-weight: 500; text-decoration: none; color: var(--ink); white-space: nowrap;
  scroll-snap-align: start; transition: background .38s var(--ease), color .38s var(--ease), box-shadow .38s var(--ease);
}
.chips__item:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rose); }
.chips__item.is-on { background: var(--rose-deep); color: #fff; box-shadow: none; }

/*
 * `minmax(0, 1fr)` 이지 `1fr` 이 아니다. 그리드 항목의 `min-width` 기본값은
 * `auto` 라, 칸이 **내용의 최소 너비 아래로 줄지 않는다.** 카드 소개글이
 * `white-space: nowrap` 이라 그 최소 너비가 글자 전체 길이가 되고, 결과로
 * 한 칸이 넓어지면서 페이지가 가로로 넘친다 (실측: 390 화면에서 405px).
 * `overflow: hidden` 은 그려질 때만 자를 뿐 최소 너비를 줄이지 않는다.
 */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
/* 카드 = 테두리+라운드+옅은 그림자 박스. 이미지는 카드가 잘라내므로 자체 라운드 없음. */
.card {
  overflow: hidden; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card__link { display: block; text-decoration: none; color: inherit; }
.card__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--bg-soft); }
.card__photo--empty { background: var(--bg-soft); }
.card__body { padding: 14px; }
.card__name { margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 700; font-size: 16px; }
.card__name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__age { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
/* 카드 우하단 › 어포던스. 카드 전체가 링크라 장식이다. */
.card__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-border);
  color: var(--color-text-secondary); font-size: 18px; line-height: 1;
  transition: color .18s ease, border-color .18s ease;
}
/* 온라인: 초록 점 + 문구 */
.card__online { margin: 8px 0 0; font-size: 12px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; }
.card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex: none; }
/* 소개글(인용) 두 줄까지. minmax(0,1fr) 라 최소너비 0 이라 넘치지 않는다. */
.card__intro {
  margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 필터바 (칩 + 정렬 라벨) ── */
.filterbar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.filterbar .chips { flex: 1; margin-bottom: 0; }
.filterbar__sort { flex: none; font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; }

/* ── 섹션 헤딩 (人気のAI男性 + もっと見る) ── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 14px; scroll-margin-top: 88px; }
.section-head__title { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
.section-head__mark { color: var(--brand); font-size: 15px; }
.section-head__more { flex: none; font-size: 13px; color: var(--color-text-secondary); text-decoration: none; }
.section-head__more:hover { color: var(--brand); }

/* ── 홈 하단 브랜드/피처 섹션 ── */
.feature {
  margin: 32px calc(var(--gap) * -1) calc(var(--gap) * -1);   /* 모바일: 앱 좌우/하단 끝까지 */
  padding: 36px var(--gap) calc(40px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #fff6f8 0%, #fdeef2 100%);
  border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 24px;
}
.feature__brand { text-align: center; }
.feature__title { margin: 0; font-family: var(--font-serif); font-size: 22px; color: var(--color-text); }
.feature__wordmark { margin: 6px 0 0; font-family: var(--font-script); font-size: 26px; color: var(--brand); }
.feature__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.feature__item { display: flex; align-items: center; gap: 12px; }
.feature__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature__name { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.feature__desc { margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary); }

/* 태블릿 이상: 피처를 가로로, 카드 호버 시 › 강조 */
@media (min-width: 600px) {
  .card:hover .card__go { border-color: var(--brand); color: var(--brand); }
  .feature {
    flex-direction: row; align-items: center; gap: 48px;
    margin: 44px -32px -56px;                 /* 홈 .app 좌우/하단 패딩만큼 블리드 */
    padding: 40px 48px calc(40px + env(safe-area-inset-bottom));
  }
  .feature__brand { text-align: left; flex: none; }
  .feature__list { flex: 1; grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
/* 좁은 모바일: 정렬 라벨은 숨겨 칩 공간 확보 */
@media (max-width: 480px) {
  .filterbar__sort { display: none; }
}

/* ── 홈 히어로 ─────────────────────────────────────
 * 모바일: 이미지(위) + 문구 패널(아래). 넓은 화면: 이미지를 꽉 채우고 왼쪽에
 * 크림 그라데이션을 얹어 그 위에 문구를 올린다(시안). 사진은 시안 에셋을 잘라 씀. */
.hero {
  position: relative; background: var(--cream);
  margin: calc(var(--gap) * -1) calc(var(--gap) * -1) var(--gap);
}
.hero__img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: right 30%; }
.hero__panel { padding: 18px var(--gap) 6px; }
.hero__title { font-family: var(--font-serif); margin: 0 0 12px; font-size: 26px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; }
.hero__desc { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero__cta { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.badge { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 13px; vertical-align: middle; }
/* AI 고지 배지 — 규제 대응. 작아도 또렷하게: 흰 바탕 + 로즈 윤곽 */
.badge--ai {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; line-height: 1; color: var(--rose-deep);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(143,43,77,.4); flex: none;
}

/* ── 프로필 상세 ───────────────────────────────── */
.gallery { display: flex; gap: 8px; overflow-x: auto; margin: calc(var(--gap) * -1) calc(var(--gap) * -1) var(--gap); padding: 0 var(--gap); scroll-snap-type: x mandatory; }
.gallery__item { flex: none; width: 78%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); scroll-snap-align: center; cursor: zoom-in; }

.detail { display: flex; flex-direction: column; gap: var(--gap); }
.detail__name { margin: 0; font-size: 22px; }
.detail__age { color: var(--muted); font-weight: 400; font-size: 18px; }
.detail__intro { margin: 0; }
.notice-ai { margin: 0; padding: 10px 12px; background: #eef1f6; border-radius: var(--radius); font-size: 13px; color: #4a5568; }
.notice-ai--block { padding: 14px; }        /* 가입 화면 — 읽고 지나가야 하는 자리라 여백을 더 준다 */
.notice-ai__title { margin: 0 0 4px; font-size: 14px; color: #2d3748; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.actions { display: flex; flex-direction: column; gap: 8px; }
/* 신고·차단. 작게 두되 **누를 수는 있어야 한다** — 글자 높이는 21px 였다 */
.safety { display: flex; gap: 8px; justify-content: center; font-size: 13px; }
.safety > * { display: flex; align-items: center; min-height: 44px; padding: 0 8px; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-size: 13px; cursor: pointer; }

/* ── 폼 ────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--gap); }
.choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
textarea.field__input { resize: vertical; }

/* ── 대화 목록 (카드 그룹) ─────────────────────────── */
.rooms {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.room { border-bottom: 1px solid var(--color-border); }
.rooms .room:last-child { border-bottom: 0; }
.room__link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.room__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-soft); }
.room__body { flex: 1; min-width: 0; }
.room__name { margin: 0; font-weight: 700; }
.room__preview { margin: 3px 0 0; font-size: 14px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room__favor { flex: none; color: var(--brand); font-size: 14px; }
.room.is-active .room__link { background: var(--color-primary-light); }
.room__unread {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--brand); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}

/* ── 대화방 ────────────────────────────────────── */
.rate { margin: 0 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.talk { display: flex; flex-direction: column; }
.bubbles { list-style: none; margin: 0; padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 78%; align-self: flex-start; }
.bubble--mine { align-self: flex-end; text-align: right; }
.bubble__text {
  margin: 0; padding: 12px 17px; border-radius: 18px; border-bottom-left-radius: 6px;
  background: #f1f1f3; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; text-align: left;
}
.bubble--mine .bubble__text {
  background: var(--brand); color: #fff;
  border-bottom-left-radius: 18px; border-bottom-right-radius: 6px;
}
.bubble__text--other { font-style: italic; color: var(--muted); }
.bubble__audio { display: block; width: 240px; max-width: 100%; margin-top: 6px; }
.bubble__play {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 30px; min-height: 24px; margin-top: 4px; padding: 2px 10px; border: 0;
  border-radius: 999px; background: var(--brand); color: #fff; font: inherit;
  font-size: 12px; line-height: 1.6; cursor: pointer;
}
.bubble__play:disabled { cursor: default; }
/* 합성 중: ▶ 를 감추고 도는 스피너를 보여 준다 */
.bubble__play.is-loading { color: transparent; position: relative; opacity: 1; }
.bubble__play.is-loading::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: bubble-spin .7s linear infinite;
}
.bubble__play.is-error { background: var(--danger, #c0392b); }
@keyframes bubble-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bubble__play.is-loading::after { animation: none; } }
.bubble__time { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

.composer {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px;
  /* 하단 정렬 — 입력창이 여러 줄로 커져도 버튼은 아래에 붙고 크기가 유지된다.
     stretch(기본)면 둥근 버튼이 줄 높이만큼 늘어나 타원으로 깨진다. */
  align-items: flex-end;
  padding: 8px var(--gap) calc(8px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
}
.composer__input {
  flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 20px; resize: none; max-height: 120px;
}
.composer__send { flex: none; min-height: 44px; border: 0; border-radius: 20px; padding: 0 18px; background: var(--brand); color: #fff; font: inherit; cursor: pointer; }
/* 입력창 바로 위. 입력창이 fixed 라 오류도 같이 붙어 있어야 눈에 든다 */
.composer__error {
  position: fixed; left: var(--gap); right: var(--gap); z-index: 5;
  bottom: calc(64px + env(safe-area-inset-bottom));
}
/* 스탬프 서랍. 입력창 바로 위에 붙는다 */
.stamps {
  position: fixed; left: 0; right: 0; z-index: 5;
  bottom: calc(64px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto;
  padding: 12px var(--gap); background: #fff; border-top: 1px solid var(--line);
}
.stamps__item {
  border: 0; background: none; padding: 0; cursor: pointer;
  width: 72px; min-height: 72px;
}
.stamps__item img { width: 100%; height: auto; display: block; }
.composer__photo {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--bg-soft, #f2f2f4); color: var(--muted); font-size: 22px;
}
/*
 * 대화방에는 하단 네비가 없다. 입력창이 그 자리를 쓴다.
 * **탭바를 숨기지 않으면 입력창과 겹친다** — 둘 다 `position: fixed; bottom: 0`
 * 이라 보내기 버튼 위에 탭이 얹힌다 (2026-09-05 까지 그 상태였다).
 */
body.p-room .tabbar { display: none; }
body.p-room .app { padding-bottom: 72px; }

/*
 * 되돌릴 수 없는 일을 하기 전에 그 자리에서 한 번 더 묻는 칸.
 * 브라우저 `confirm()` 대신 쓴다 — 문구를 우리가 정할 수 있고 번역도 되며,
 * 무엇보다 화면을 멈춰 세우지 않는다.
 */
.confirm {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.confirm__text { margin: 0; font-size: 13px; color: var(--muted); }
/* 사진 위에 겹친다 — 어느 사진을 지우는지 보이지 않으면 물어본 의미가 없다 */
.photos__item .confirm {
  position: absolute; inset: 0; justify-content: center;
  background: rgba(255,255,255,.94); border: 0;
}
.confirm--block { margin-top: 8px; }

/* 스타일 선택 — 칩. 세로로 18개를 쌓으면 화면 하나를 다 먹는다 */
/* `.choices` 는 세로다. 칩은 가로로 흘러야 해서 방향을 되돌린다 */
.choices--wrap { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.choices--wrap legend { float: left; width: 100%; margin-bottom: 8px; }  /* legend 는 flex 항목이 되지 못한다 */
.choices--wrap legend .hint { margin-left: 6px; font-weight: 400; }
.chip { display: inline-flex; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 20px;
  font-size: 14px; cursor: pointer;
}
.chip input:checked + span { border-color: var(--brand); background: #fdf2f5; color: var(--brand); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: default; }

/* ── 코인 스토어 ──────────────────────────────── */
/* 잔액 — 핑크 강조 카드 */
.store__coin {
  margin: 0 0 16px; padding: 20px; text-align: center;
  background: linear-gradient(135deg, #fff, var(--color-primary-light));
  border: 1px solid var(--brand-soft); border-radius: var(--radius-lg);
  font-size: 20px; font-weight: 700; color: var(--brand-dark);
}
/* 패키지 — 카드 그리드 */
.store { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.store__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.store__amount { margin: 0; font-weight: 700; font-size: 16px; }
.store__bonus { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--color-success); }
.store__price { flex: none; font-weight: 700; color: var(--color-text); }
@media (min-width: 600px) { .store { grid-template-columns: repeat(2, 1fr); } }

/* 이전 대화 불러오기. 다 불러오면 버튼이 사라지고 이 줄도 자리를 안 차지한다 */
.older { margin: 0; text-align: center; }
.older__button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: 20px; background: #fff; font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer;
}
.older__button:disabled { opacity: .6; cursor: default; }

/* ── 사진·시크릿 사진 말풍선 ──────────────────── */
/*  잠긴 카드와 열린 사진의 폭을 맞춘다. 열 때 크기가 튀면 무엇이 바뀌었는지
    읽기 전에 화면이 먼저 움직인다. */
.photo, .secret { width: 176px; display: flex; flex-direction: column; gap: 6px; }
.bubble--mine .photo, .bubble--mine .secret { margin-left: auto; }
.photo__img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius); background: #eee; cursor: zoom-in; display: block;
}
.photo__card, .secret__card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 22px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #f7f7f9;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.photo__card--locked { border-style: dashed; cursor: default; }
.secret__card { border-color: var(--brand); background: #fdf2f5; cursor: default; }
.photo__icon { font-size: 24px; line-height: 1; }
.photo__label { font-size: 14px; font-weight: 600; }
.photo__hint { font-size: 12px; color: var(--muted); }
.photo__caption { margin: 0; font-size: 13px; color: var(--muted); text-align: left; }
.secret__confirm { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.btn--sm { padding: 8px 12px; min-height: 40px; font-size: 14px; border-radius: 8px; }
.btn--danger { background: var(--danger); color: #fff; }
/*
 * 높이를 미리 잡아 둔다. `height: auto` 로 두면 이미지가 늦게 오면서 페이지가
 * 길어지고, 방을 열 때 맨 아래로 보낸 스크롤이 **중간에 걸린다.**
 */
.bubble__emoticon { width: 120px; aspect-ratio: 1; object-fit: contain; display: block; }

/* 시스템 안내 한 줄 (시크릿 사진 열람 등). 말풍선이 아니라 가운데 정렬이다 */
.notice-line {
  align-self: center; max-width: 88%; padding: 6px 12px; border-radius: 12px;
  background: #f2f2f4; color: var(--muted); font-size: 12px; text-align: center;
}

/* ── 대화방 메뉴 ──────────────────────────────── */
.room-menu { position: relative; margin-left: auto; }
.room-menu__button {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0;
  border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer;
}
.room-menu__panel {
  position: absolute; top: 100%; right: 0; z-index: 30; width: 260px;
  margin-top: 4px; padding: 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  text-align: left;
}
.room-menu__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 8px; cursor: pointer; font-size: 14px;
}
.room-menu__row input { width: 20px; height: 20px; flex: none; }
.room-menu__panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.room-menu__nickname { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 8px; }
.room-menu__exit {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 8px;
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--danger); cursor: pointer;
}
.room-menu__warn { margin: 4px 8px 8px; font-size: 13px; color: var(--muted); }
.room-menu__panel .alert.is-ok { background: #eef7ee; color: #2f7a34; }

/* ── 사진 전체화면 ────────────────────────────── */
.viewer {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,.92);
}
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer__close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; font-size: 20px; cursor: pointer;
}
.viewer__timer {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 16px;
  margin: 0; padding: 4px 12px; border-radius: 12px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 14px; font-variant-numeric: tabular-nums;
}
/* 뒤 화면이 같이 스크롤되면 사진이 밀린다 */
body.is-viewing { overflow: hidden; }

/* 화면에는 안 보이고 낭독기에만 읽히는 글 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── 마이페이지 ────────────────────────────────── */
/* 내 정보 요약 — 카드 (아바타 · 이름 · 코인 · 충전) */
.me {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 20px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.me__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); flex: none; }
.me__info { flex: 1; min-width: 0; }
.me__name { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.me__coin { margin: 4px 0 0; color: var(--brand-dark); font-size: 15px; font-weight: 700; }
.me__charge { flex: none; text-decoration: none; }

/* 메뉴 — 카드 그룹 */
.menu {
  list-style: none; margin: 0 0 16px; padding: 0; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.menu__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; border-bottom: 1px solid var(--color-border);
  text-decoration: none; color: var(--color-text); min-height: 52px;
}
.menu li:last-child .menu__item { border-bottom: 0; }
.menu__arrow { color: var(--color-text-muted); }
.menu--sub .menu__item { color: var(--color-text-secondary); font-size: 14px; }
.company-info { margin: 20px 4px 0; font-size: 12px; line-height: 1.7; color: var(--color-text-muted); }
.logout { display: flex; margin-top: 4px; }
.logout .btn { flex: 1; }

/* ── 마이 하위 페이지 공통(nav-my) — 폼/목록을 카드로, 크림 위에 띄운다 ──
 * 12개 서브페이지가 공유하는 .form/.rooms 를 한 곳에서 카드화한다.
 * nav-my 범위라 대화목록(/chat)·신고 등 다른 섹션에는 영향이 없다. */
body.nav-my .form {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px;
}
body.nav-my .answer { background: var(--bg-soft); }
body.nav-my .section-title { font-family: var(--font-serif); color: var(--color-text); font-size: 16px; }
@media (min-width: 600px) {
  /* 데스크톱: 흰 컬럼 대신 크림 위에 카드가 뜨도록(홈과 동일한 결) */
  body.nav-my .app { background: transparent; border: 0; }
  body.nav-my .topbar { background: transparent; border-left: 0; border-right: 0; }

  /* 콘텐츠를 하나의 좁은 컬럼(640)으로 통일한다. 폼이 560 가운데 정렬이라
     hint·목록·버튼(전체 폭)과 좌우가 어긋나 깨져 보이던 것을 없앤다 —
     폼도 이 컬럼을 꽉 채우게 해서 모든 요소가 같은 폭·정렬로 선다. */
  body.nav-my .app, body.nav-my .topbar { max-width: 640px; }
  body.nav-my .form { max-width: none; margin-inline: 0; }

  /* 대화목록(/chat) — 방(p-room)은 제외. 크림 위 좁은 컬럼에 카드가 뜨도록 */
  body.nav-chat:not(.p-room) .app,
  body.nav-chat:not(.p-room) .topbar {
    background: transparent; border-left: 0; border-right: 0; max-width: 640px;
  }
}

.section-title { margin: 32px 0 8px; font-size: 15px; color: var(--muted); }
.answer { margin: 8px 0 0; padding: 10px; background: #f6f6f6; border-radius: var(--radius); font-size: 14px; }
.photos__status {
  position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
}


/* ── PC / 넓은 화면 — 중앙 정렬 + 상단 가로 네비 ────────────────
 *
 * 모바일(하단 탭바) 전용이던 셸을 넓은 화면에선 **화면 가운데 컬럼**으로 모으고,
 * 하단 탭을 좌측 사이드바가 아니라 **제목 아래 가로 네비(카테고리 버튼)**로 올린다.
 * 마크업은 그대로: body 를 세로 flex 로 만들고 order 로 [제목 → 네비 → 본문] 순서.
 * 대화방은 더 좁은 컬럼(--app-max 재정의)으로, 입력창도 그 폭에 맞춘다.
 */
@media (min-width: 600px) {
  :root { --app-max: 960px; }
  body.nav-home { --app-max: 1200px; }   /* 홈은 시안대로 넓게(5열) */

  body {
    display: flex; flex-direction: column; align-items: center;
    min-height: 100vh;
  }
  body.p-room { --app-max: 760px; }   /* 대화방은 읽기 좋은 좁은 컬럼 */

  /* 순서: 헤더(네비) → 제목바 → 본문 */
  .tabbar { order: 1; }
  .topbar { order: 2; }
  .app    { order: 3; flex: 1; }

  /* 제목바·본문은 가운데 컬럼 */
  .topbar, .app {
    width: 100%; max-width: var(--app-max);
    margin-left: auto; margin-right: auto;
    background: transparent;
  }
  .topbar { border-bottom: 0; }
  body.nav-home .topbar { display: none; }   /* 홈은 로고 헤더 하나로 충분 */
  body.nav-home .app { background: transparent; border: 0; }

  /* ── 시안형 상단 헤더 (풀폭 sticky, 내용은 app-max 로 가운데) ── */
  .tabbar {
    position: sticky; top: 0; z-index: 50;
    width: 100%; max-width: none; margin: 0; bottom: auto; left: auto; right: auto;
    display: flex; align-items: center; gap: 24px; height: 80px;
    padding: 0 max(24px, calc((100vw - 1180px) / 2));   /* 헤더 폭은 화면마다 같게 — 본문 폭(--app-max)을 따르면 로고가 페이지마다 움직인다 */
    background: rgba(251, 246, 239, .84); backdrop-filter: blur(14px) saturate(1.2);
    border: 0; border-bottom: 1px solid rgba(226, 201, 196, .6); box-shadow: none;
  }
  body.p-room .tabbar { display: flex; }   /* 방에서도 상단 헤더 유지 */

  /* 로고: 스크립트 워드마크 + 작은 서브타이틀 */
  .tabbar__brand {
    display: flex; flex-direction: column; justify-content: center; flex: none;
    gap: 1px; line-height: 1; text-decoration: none;
  }
  .tabbar__brand { gap: 4px; }
  .tabbar__brand-name { font-family: var(--font-script); font-size: 34px; color: var(--rose-deep); letter-spacing: 0; }
  .tabbar__brand-sub  { font-family: var(--font-serif); font-size: 11px; letter-spacing: .32em; color: var(--muted); padding-left: 12px; }

  /* 가운데 네비 */
  .tabbar__nav { flex: 1; display: flex; justify-content: center; gap: 6px; max-width: none; margin: 0; }
  .tabbar__item {
    flex: none; flex-direction: row; display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border-radius: var(--radius-pill); font-size: 17px;
    color: var(--muted);
  }
  .tabbar__item.is-on { color: var(--rose-deep); font-weight: 700; box-shadow: none; }
  .tabbar__item:hover { color: var(--ink); background: rgba(242,210,214,.35); }
  .tabbar__item.is-on:hover { background: linear-gradient(180deg, #fbe6ea, #f6d5dc); color: var(--rose-deep); }
  .tabbar__item--desk { display: inline-flex; }   /* 데스크톱에서 캐스트 노출 */
  .tabbar__icon { display: inline-block; width: 22px; height: 22px; }

  /* 우측 아이콘 (알림·아바타) */
  .tabbar__actions { display: flex; align-items: center; gap: 6px; flex: none; }
  .iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent;
    color: var(--color-text-secondary); cursor: pointer; text-decoration: none;
    transition: background .18s ease, color .18s ease;
  }
  .iconbtn svg { width: 22px; height: 22px; }
  .iconbtn:hover { background: rgba(242,210,214,.4); color: var(--rose-deep); }
  .iconbtn--avatar {
    background: radial-gradient(circle at 35% 30%, #fff, #f6d5dc); color: var(--rose-deep);
    box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(143,43,77,.5);
  }

  .app { padding: 28px 32px 56px; }
  body.nav-home .app { padding: 24px 32px 56px; }

  /* 브라우즈는 다열 그리드 */
  .cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

  /* 히어로 — 이미지를 꽉 채우고 왼쪽 크림 그라데이션 위에 문구를 올린다(시안).
     .app 패딩(24/32)만큼 음수 마진으로 컬럼 끝까지 블리드시킨다. */
  .hero {
    margin: -24px -32px 24px;
    min-height: 380px; display: flex; align-items: center; overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .hero__img { position: absolute; inset: 0; height: 100%; }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--cream) 6%, rgba(251, 248, 246, .74) 42%, rgba(251, 248, 246, 0) 76%);
  }
  .hero__panel { position: relative; z-index: 2; width: min(520px, 60%); padding: 44px 40px; }
  .hero__title { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 16px; }
  .hero__desc { font-size: 15px; max-width: 460px; }

  /* 안쪽 콘텐츠는 컬럼을 채운다(넓은 화면에서 붕 떠 보이지 않게).
     폼만 예외 — 입력칸이 화면 폭만큼 길면 오히려 쓰기 나쁘다. */
  .form { max-width: 560px; margin-inline: auto; }

  /* 대화방 입력창·서랍·오류를 같은 컬럼 폭·위치로 (fixed 유지, 가운데) */
  .composer, .stamps {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: var(--app-max);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  }
  .composer__error {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: calc(var(--app-max) - 64px);
  }
  body.p-room .app { padding-bottom: 84px; }

  /* 마우스 호버 — 카드 전체가 살짝 떠오른다(시안) */
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .menu__item:hover, .room__link:hover { background: var(--bg-soft, #f5f5f7); }
}

/* ── 프로필 상세 — 넓은 화면에서 사진(왼쪽) · 소개(오른쪽) 2단 ──────
 *
 * 모바일은 사진을 가로 스크롤 갤러리로 쌓아 두는데, 넓은 화면에선 옆으로 붕 뜬다.
 * 2단으로 갈라 사진은 왼쪽에 세로로 쌓고(스크롤하며 따라오도록 sticky), 소개·액션은
 * 오른쪽에 둔다. 컬럼이 좁아지면(태블릿) 다시 한 단으로 접힌다.
 */
@media (min-width: 900px) {
  body.p-profile .app {
    display: grid; grid-template-columns: minmax(0, 42%) 1fr;
    gap: 32px; align-items: start;
  }

  /* 사진 — 가로 스크롤을 풀어 세로로 쌓는다. 이쪽이 페이지를 따라 스크롤된다. */
  body.p-profile .gallery {
    flex-direction: column; overflow: visible;
    margin: 0; padding: 0; gap: 12px;
  }
  body.p-profile .gallery__item {
    width: 100%; scroll-snap-align: none;
  }

  /* 소개·대화·좋아요는 화면에 붙여 둔다 — 사진을 넘겨 봐도 버튼이 늘 보이게.
     소개가 화면보다 길면 그 안에서만 스크롤(버튼이 잘리지 않도록). */
  body.p-profile .detail {
    min-width: 0;
    position: sticky; top: 96px;                 /* 스티키 헤더(80) 아래 */
    max-height: calc(100vh - 116px); overflow-y: auto;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 28px;
  }
}

/* ── 프로필 상세 폴리시 (전 폭 공통) ── */
.detail__name { font-family: var(--font-serif); font-size: 26px; }
.detail__intro { font-size: 15px; line-height: 1.8; color: var(--color-text-secondary); }
.facts { gap: 10px 16px; }
.facts dt { color: var(--color-text-muted); }
.actions { gap: 10px; }
.actions__calls { display: flex; gap: 10px; }
.actions__calls .btn { flex: 1; }

/* ── 대화방 좌측 캐릭터 사이드바 (넓은 화면 전용) ──────────────────
 * 채팅 island/입력창은 그대로 두고, 여유 폭이 있을 때만 fixed 로 옆에 얹는다.
 * 대화 컬럼(p-room, --app-max:760)은 가운데 정렬이라, 그 왼쪽 여백에 배치한다. */
.room-side { display: none; }
.room-side__card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 22px; text-align: center;
}
.room-side__photo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--bg-soft); margin: 0 auto 12px; display: block;
}
.room-side__name {
  margin: 0 0 6px; font-family: var(--font-serif); font-size: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.room-side__online {
  margin: 0 0 18px; font-size: 13px; color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.room-side__actions { display: flex; flex-direction: column; gap: 8px; }
.room-side__profile {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 40px; color: var(--color-text-secondary); text-decoration: none; font-size: 14px;
}
.room-side__profile:hover { color: var(--brand); }

/* ── 대화방 인라인 2단 (넓은 화면) ──────────────────────────────
 * viewport 가 app-max(1080) 이상일 때만 켠다 — 그래야 아래 fixed 입력창의
 * 좌/폭 계산(app 이 정확히 app-max 로 가운데 정렬)이 들어맞는다. 그 아래에서는
 * 기존 단일 컬럼(사이드바 숨김) 그대로라 채팅이 어떤 폭에서도 깨지지 않는다. */
@media (min-width: 1080px) {
  body.p-room { --app-max: 1080px; --side-w: 300px; --side-gap: 24px; }

  body.p-room .app {
    display: grid; align-items: start;
    grid-template-columns: var(--side-w) minmax(0, 1fr); column-gap: var(--side-gap);
    padding-bottom: 96px;                 /* fixed 입력창 자리 */
  }
  body.p-room .room-side { display: block; position: sticky; top: 96px; }  /* 스티키 헤더 아래 */
  body.p-room .room-main { min-width: 0; }
  body.p-room .room-call { display: none; }   /* 통화는 사이드바 버튼으로 */

  /* fixed 입력창·스탬프·오류를 오른쪽 대화 컬럼에 정렬(위치만 이동, 동작 그대로) */
  body.p-room .composer,
  body.p-room .stamps {
    left: calc(50% - var(--app-max) / 2 + var(--side-w) + var(--side-gap));
    right: auto; transform: none; max-width: none;
    width: calc(var(--app-max) - var(--side-w) - var(--side-gap));
  }
  body.p-room .composer__error {
    left: calc(50% - var(--app-max) / 2 + var(--side-w) + var(--side-gap) + var(--gap));
    right: auto; transform: none; max-width: none;
    width: calc(var(--app-max) - var(--side-w) - var(--side-gap) - var(--gap) * 2);
  }
}

/* ── 통화 화면 (`body.p-call`) ─────────────────────────────────────
 *
 * 기존 음성통화(`www/html/asset/css/voice_common.css`)와 **같은 기능으로 읽혀야**
 * 한다. 그쪽에서 가져오는 것은 셋이다: 상대 사진이 화면을 꽉 채우고, 그 위에
 * `#060527 → #1F034E` 그라데이션이 덮이고, 아래에 원형 아바타 + 이름 + 원형
 * 컨트롤이 쌓인다. 나머지(색·간격·터치 크기)는 이 파일의 토큰을 따른다.
 *
 * 그림 파일은 가져오지 않았다. `www/html/` 은 API 호스트의 문서 루트라 wfront
 * 에서 그 경로가 서비스되지 않는다(파일 = URL). 로티 애니메이션 대신 CSS 펄스
 * 링을 쓰고, 아이콘은 마크업 안의 인라인 SVG 다 — 통화 한 화면 때문에 다른
 * 오리진의 스크립트를 끌어오지 않는다.
 */
body.p-call { background: #060527; color: #fff; }

/* 전화 화면은 헤더가 사진 위에 떠 있다. 흰 막대가 가로지르면 통화로 안 읽힌다 */
body.p-call .topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4;
  background: transparent; border-bottom: 0; backdrop-filter: none;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
body.p-call .topbar__back { color: #fff; }
body.p-call .tabbar { display: none; }         /* 대화방과 같은 이유 — 컨트롤과 겹친다 */
body.p-call .app { padding: 0; }
body.p-call .msg.alert { background: rgba(0,0,0,.45); color: #ffd9df; }

.call { position: fixed; inset: 0; overflow: hidden; }

/* 배경 사진. 없으면 그라데이션만 남는다 */
.call__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/*
 * Anam 아바타. **`hidden` 으로 감추지 않는다** — SDK 가 `getElementById` 로 찾은
 * 뒤 스트림을 붙이는데 `display:none` 이면 재생이 서지 않는다. 투명도로만 가른다.
 */
.call__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: #060527; opacity: 0; transition: opacity .4s ease;
}
.call.is-live .call__video { opacity: 1; }
.call.is-live .call__photo { opacity: 0; }

.call__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, transparent 25%, #060527 65%, #1F034E 100%);
}

.call__panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; max-width: 500px; margin: 0 auto; text-align: center;
  padding: 24px var(--gap) calc(28px + env(safe-area-inset-bottom));
}

/* AI 고지. 어두운 배경에서도 읽혀야 한다 — 이 줄은 장식이 아니라 법적 전제다 */
.notice-ai--call {
  width: 100%; background: rgba(255,255,255,.14); color: #f0eaff;
  font-size: 12px; line-height: 1.5;
}

.call__avatar {
  width: 72px; height: 72px; border-radius: 50%; border: 3px solid #d0b8ff;
  object-fit: cover; transition: box-shadow .2s ease;
}
.call__name { margin: 0; font-size: 18px; font-weight: 700; }
.call__state { margin: 0; min-height: 24px; color: #c285ff; font-size: 15px; }
.call__caption {
  margin: 0; max-width: 100%; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.92);
  /* 길게 말한 턴이 화면을 밀어 올려 버튼을 밖으로 내보내지 않게 한다 */
  max-height: 4.5em; overflow: hidden;
}
.call__rate { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); }
.call__hint { margin: 0; font-size: 12px; color: rgba(255,255,255,.55); }
.call__msg { width: 100%; }

.call__start { width: 100%; max-width: 320px; margin-top: 8px; }

/*
 * 통화 이용 동의. 시작 버튼이 서야 할 자리에 **대신** 선다 — 동의 전의 시작
 * 버튼은 눌러도 632 로만 죽어서, 나란히 두면 죽은 버튼을 먼저 누른다.
 *
 * 어두운 배경 위의 긴 글이라 두 가지를 따로 챙긴다:
 *  - 대비. 반투명 검정 판을 깔고 글자를 거의 흰색으로 올린다. 사진이 밝은
 *    사람에게는 판이 없으면 문장이 사진에 먹힌다.
 *  - 높이. 여섯 줄 + 버튼은 작은 화면에서 패널을 화면 밖으로 밀어낸다.
 *    **목록만** 스크롤시켜 동의 버튼이 항상 화면 안에 남게 한다 — 읽으려고
 *    스크롤했더니 버튼이 사라지는 것이 이 화면에서 가장 흔한 막다른 길이다.
 */
.call__terms {
  width: 100%; max-width: 420px; margin-top: 8px;
  padding: var(--gap); text-align: left;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
}
.call__terms-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #fff; }
.call__terms-list {
  margin: 0; padding-left: 1.1em; list-style: disc;
  max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.92);
}
.call__terms-list li + li { margin-top: 10px; }
/* 첫 줄은 AI 고지다. 규제 대응이자 이 사업이 합법일 수 있는 전제라 흐리게 두지 않는다 */
.call__terms-list li:first-child { color: #fff; font-weight: 700; }
.call__terms-msg { width: 100%; margin-top: 12px; }
.call__terms-agree { width: 100%; min-height: 48px; margin-top: 14px; }
.call__back {
  width: 100%; max-width: 320px; margin-top: 8px;
  background: rgba(255,255,255,.16); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}

.call__controls { display: flex; justify-content: center; gap: 40px; margin-top: 20px; }
.call__button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 56px; min-height: 80px; padding: 0;
  background: none; border: 0; color: #fff; font: inherit; font-size: 13px; cursor: pointer;
}
.call__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.13);
}
.call__button.is-on .call__icon { background: #fff; color: #060527; }
.call__button--end .call__icon { background: #ff3b3b; }

/*
 * 아바타 둘레가 천천히 뛴다. 로티(`voice/anim.json`)가 하던 자리다 — 통화가
 * 살아 있다는 것을 소리 말고도 알 수 있어야 한다. 애니메이션을 꺼 둔 사람에게는
 * 그냥 정지 원이다.
 */
@keyframes call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(208,184,255,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(208,184,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(208,184,255,0); }
}
@media (prefers-reduced-motion: no-preference) {
  .call__avatar { animation: call-pulse 2.4s ease-out infinite; }
}
.call.is-live .call__avatar { display: none; }   /* 얼굴이 나오면 작은 원은 군더더기다 */

/*
 * 대화방 헤더의 통화 버튼. 글자 없이 아이콘만이라 목표가 작아지기 쉽다 —
 * 방 메뉴(⋮)와 같은 44px 를 준다.
 */
.room-call {
  display: flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px;
  color: var(--brand); text-decoration: none;
}
.room-call:hover { background: var(--bg-soft, #f5f5f7); border-radius: 50%; }
/*
 * 제목이 남는 폭을 다 먹어야 통화 아이콘과 방 메뉴가 **오른쪽에 붙는다.**
 * (`.room-menu` 의 `margin-left:auto` 만으로는 아이콘이 제목 바로 뒤에 붙는다.)
 * 긴 별명은 줄바꿈 대신 말줄임 — 헤더가 두 줄이 되면 사진 목록이 밀려 내려간다.
 */
body.p-room .topbar__title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 넓은 화면 — 셸이 가운데 컬럼이 되지만, 통화만은 화면을 다 쓴다.
   전화기는 창 안의 카드가 아니라 화면 그 자체다. */
@media (min-width: 600px) {
  body.p-call { display: block; background: #060527; }
  body.p-call .topbar,
  body.p-call .app { max-width: none; border: 0; background: transparent; }
}

/* ── 입력 중 표시 (대화방) ─────────────────────────────────────────────
 * 메신저의 "..." 과 같은 자리. 말풍선 목록 바로 아래, 입력창 위에 둔다.
 * 목록 안에 넣으면 진짜 메시지처럼 보여서 스크롤·읽음 처리와 얽힌다.
 */
.typing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 8px 12px;
  color: var(--muted, #888);
  font-size: 13px;
}
.typing__dots { display: inline-flex; gap: 4px; }
.typing__dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand, #d9536f);
  opacity: .45;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
/* 셋이 같은 박자로 튀면 점이 아니라 한 덩어리로 읽힌다. 차례로 어긋나게 둔다. */
.typing__dots i:nth-child(2) { animation-delay: .18s; }
.typing__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

/* 움직임에 민감한 사용자에게는 튀지 않고 밝기만 바뀌게 한다 (OS 설정을 따른다). */
@media (prefers-reduced-motion: reduce) {
  .typing__dots i { animation: typing-fade 1.4s infinite ease-in-out; }
  @keyframes typing-fade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

/* ── 약관/개인정보 문서 페이지(p-doc) — 크림 위 읽기 카드 ────────────────
 * 긴 본문을 편하게 읽도록 폭을 좁히고, 카드 안에 담는다. 가입 동의에서
 * 새 탭으로도 열리므로 헤더/탭바 없이도 스스로 완결돼야 한다. */
.doc { max-width: 720px; margin: 0 auto; padding: 24px var(--gap) 64px; }
.doc__back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-secondary); text-decoration: none; font-size: 14px;
  margin-bottom: 16px;
}
.doc__back:hover { color: var(--color-text); }
.doc__body {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 32px 28px; color: var(--color-text); line-height: 1.75;
}
.doc__body h1 {
  font-family: var(--font-serif); font-size: 24px; font-weight: 700;
  margin: 0 0 20px; color: var(--color-text);
}
.doc__body h2 {
  font-family: var(--font-serif); font-size: 17px; font-weight: 700;
  margin: 28px 0 10px; color: var(--color-text);
}
.doc__body h3 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
.doc__body p { margin: 0 0 12px; font-size: 14.5px; }
.doc__body ul { margin: 0 0 12px; padding-left: 20px; }
.doc__body li { margin: 0 0 6px; font-size: 14.5px; }
.doc__body strong { font-weight: 700; color: var(--color-text); }
/* 준비 중 초안 배너 — 정식 시행 전임을 명확히 (법무 확정 전) */
.doc__draft {
  background: var(--bg-soft); border: 1px dashed var(--color-border);
  border-radius: var(--radius); padding: 12px 14px;
  color: var(--color-text-secondary); font-size: 13.5px;
}
.doc__meta {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--color-text-muted); font-size: 13px;
}
@media (max-width: 520px) {
  .doc { padding: 16px var(--gap) 48px; }
  .doc__body { padding: 24px 18px; border-radius: var(--radius-md); }
}

/* ════════════════════════════════════════════════════════════════════
 * 디자인 B "Sakura Letter" — 화면별 레이어. 위의 기존 규칙을 덮어쓴다.
 * 섹션마다 담당이 나뉜다: 각 섹션 안에서만 고친다.
 * ════════════════════════════════════════════════════════════════════ */

/* ── B: 공통 크롬 (헤더 코인칩·알림·탭 봉랍·푸터·읽기 설정·calm) ───────── */
/* 읽기 편의: 글자 크기. 본문·푸터만 키운다(탭바·헤더는 자리 고정). */
html[data-fs="l"] .app, html[data-fs="l"] .site-foot { zoom: 1.1; }
html[data-fs="xl"] .app, html[data-fs="xl"] .site-foot { zoom: 1.22; }
/* calm = 마이의 "アニメーションを控えめに" 또는 OS reduced-motion. 끝 상태만 보인다. */
html.calm *, html.calm *::before, html.calm *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
/* 모바일 홈 머리 — 제목 대신 워드마크(B). 글자는 그대로 남아 낭독기는 앱 이름을 읽는다 */
body.nav-home .topbar { justify-content: center; }
body.nav-home .topbar__title {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0; line-height: 1; letter-spacing: 0;
}
body.nav-home .topbar__title::before { content: "Koi Sonata"; font-family: var(--font-script); font-size: 30px; font-weight: 400; color: var(--rose-deep); }
body.nav-home .topbar__title::after { content: "恋のソナタ"; font-family: var(--font-serif); font-size: 11px; font-weight: 500; letter-spacing: .32em; padding-left: .32em; color: var(--muted); }

/* 봉랍 카운터 — 작은 크기(탭·헤더·알림). 본체는 대화 블록의 .wseal */
.wseal.wseal--sm { min-width: 24px; height: 24px; padding: 0 5px; }
.wseal.wseal--sm b { font-size: 13px; }
.wseal.wseal--sm::before { inset: 2px; border-radius: 10px; }
.wseal.wseal--sm .seal__h { border-radius: 12px; }

/* 탭바 — 대화 탭의 안읽음 봉랍, 현재 탭 알약이 이전 탭에서 미끄러져 온다(tabbar.js) */
.tabbar__nav { position: relative; }
.tabbar__seal { position: absolute; top: 2px; left: calc(50% + 6px); }
.tabbar__ind {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / 3); padding: 0 4px;
  pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform 620ms var(--ease);
}
.tabbar__ind::before {
  content: ""; display: block; height: 100%; border-radius: 18px;
  background: linear-gradient(180deg, #fbe6ea, #f6d5dc); box-shadow: inset 0 0 0 1px rgba(178,58,98,.14);
}
.tabbar__nav:has(.tabbar__ind) .tabbar__item.is-on { background: none; box-shadow: none; }
.tabbar__item > * { position: relative; }
.tabbar__item .tabbar__seal { position: absolute; }
.coinchip, .notif { display: none; }

/* 사이트 발 — 탭 화면 맨 아래. 브랜드 + AI 고지(규제 대응 문구, 흐리게 두지 않는다) */
.site-foot {
  text-align: center; padding: 8px var(--gap) calc(112px + env(safe-area-inset-bottom));
}
/* 발이 있으면 탭바 자리 비우기는 발이 맡는다 — .app 아래 여백이 두 번 생기지 않게 */
body:has(.site-foot) .app { padding-bottom: 32px; }
.site-foot__brand { margin: 0 0 12px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; gap: 6px; }
.site-foot__script { font-family: var(--font-script); font-size: 30px; color: var(--rose-deep); }
.site-foot__sub { font-family: var(--font-serif); font-size: 11px; letter-spacing: .32em; color: var(--muted); padding-left: .32em; }
.site-foot__note { max-width: 30em; margin: 0 auto; font-size: 15px; line-height: 1.8; color: var(--ink); text-wrap: balance; word-break: auto-phrase; }

/* 페이지 넘김 — 같은 오리진 화면 이동에 은은한 전환(지원 브라우저만). calm 이면 끈다. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-out .38s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.98); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
html.calm::view-transition-old(root), html.calm::view-transition-new(root) { animation: none; }
.tabbar { view-transition-name: tabbar; }   /* 탭바는 넘김에 휩쓸리지 않고 제자리 */

@media (min-width: 600px) {
  .tabbar__ind { display: none; }
  .tabbar__nav:has(.tabbar__ind) .tabbar__item.is-on { background: linear-gradient(180deg, #fbe6ea, #f6d5dc); }
  .tabbar__item .tabbar__seal { position: relative; top: auto; left: auto; margin-left: 2px; }
  .tabbar__actions { gap: 10px; }
  .coinchip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px;
    border-radius: var(--radius-pill); background: #fff8ef; box-shadow: inset 0 0 0 1px #efd9c7;
    font-size: 16px; font-weight: 700; color: var(--gold-ink); text-decoration: none; white-space: nowrap;
  }
  .coinchip:hover { color: var(--gold-ink); box-shadow: inset 0 0 0 1.5px var(--gold); }
  .coinchip svg { width: 20px; height: 20px; }
  .notif { display: block; position: relative; }
  .notif summary {
    list-style: none; position: relative; display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 16px; color: var(--ink); cursor: pointer;
  }
  .notif summary::-webkit-details-marker { display: none; }
  .notif summary svg { width: 22px; height: 22px; }
  .notif summary:hover, .notif[open] summary { background: rgba(242,210,214,.4); }
  .notif summary .notif__seal { position: absolute; left: 22px; top: 0; }
  body:has(.notif[open]) .push-pill { visibility: hidden; }   /* 열린 알림 위에 겹치지 않게 */
  .notif__panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 360px; padding: 10px;
    border-radius: var(--radius-md); background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-lg);
  }
  .notif[open] .notif__panel { animation: notif-up .35s var(--ease); }
  @keyframes notif-up { from { opacity: 0; transform: translateY(8px); } }
  .notif__title { margin: 6px 10px; font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
  .notif__empty { margin: 4px 10px 10px; font-size: 15px; color: var(--muted); }
  .notif__panel ul { margin: 0; padding: 0; list-style: none; }
  .notif__panel li a {
    display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 8px 10px; border-radius: 14px;
    font-size: 15px; line-height: 1.55; color: var(--ink); text-decoration: none;
  }
  .notif__panel li a:hover { background: #fdf1f2; color: var(--ink); }
  .notif__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--blush); }
  .notif__text { flex: 1; min-width: 0; }
  .notif__text .badge--ai { height: 20px; padding: 0 6px; font-size: 12px; margin-left: 4px; }
  .notif__all { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 48px; padding: 0 10px; font-size: 15px; font-weight: 500; text-decoration: none; }
  .iconbtn--avatar { overflow: hidden; font-family: var(--font-serif); font-size: 19px; }
  .iconbtn--avatar img { width: 100%; height: 100%; object-fit: cover; }
  .site-foot { order: 4; width: 100%; padding: 24px var(--gap) 48px; }
  body:has(.site-foot) .app { padding-bottom: 32px; }
}
/* ── /B: 공통 크롬 ── */

/* ── B: 홈·탐색 (main · profile · likes) ───────────────────────────── */
/* 이 블록이 파일 끝쪽이라 위의 옛 홈·프로필 규칙을 덮는다. 옛 규칙은 지우지 않고 여기서 이긴다. */

/* ── 홈: 인사 (정회원) ── */
.greet { padding: 6px 2px 4px; }
.greet__eyebrow { margin: 0 0 6px; }
.greet__title {
  margin: 0; font-family: var(--font-hand); font-weight: 600; font-size: 24px; line-height: 1.5;
  color: var(--rose-deep); letter-spacing: .02em; word-break: auto-phrase; text-wrap: balance;
}
.greet__sub { margin: 4px 0 0; color: var(--muted); font-size: 16px; word-break: auto-phrase; }

/* ── 홈: 히어로 (게스트) — 편지지 카드 ── */
.hero {
  margin: 4px 0 8px; border-radius: 24px; overflow: hidden;
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
.hero__img { height: 210px; }
.hero__panel { position: relative; padding: 20px 20px 24px; }
.hero__hand { margin: 0 0 4px; font-family: var(--font-hand); font-weight: 600; font-size: 19px; line-height: 1.5; color: var(--rose-deep); letter-spacing: .02em; }
.hero__title { font-size: 26px; line-height: 1.5; letter-spacing: .02em; word-break: auto-phrase; text-wrap: balance; }
.hero__desc { font-size: 16px; }
.hero__cta { min-height: 56px; }

/* ── 섹션 머리: 필기체 아이브로 + 세리프 제목 + 로즈 링크 ── */
.section-head { align-items: flex-end; margin: 32px 0 14px; }
.section-head .eyebrow { margin-bottom: 4px; }
.section-head__title { display: block; font-size: 23px; line-height: 1.45; letter-spacing: .04em; word-break: auto-phrase; overflow-wrap: anywhere; }
.section-head__more {
  display: inline-flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 4px;
  font-size: 16px; font-weight: 500; color: var(--rose); white-space: nowrap;
}
.section-head__more svg { width: 18px; height: 18px; transition: transform .38s var(--ease); }
.section-head__more:hover { color: var(--rose-deep); }
.section-head__more:hover svg { transform: translateX(4px); }
.filterbar { margin-bottom: 0; }
.filterbar__sort { font-size: 15px; color: var(--muted); }

/* ── 캐스트 카드 = 편지 한 장 (와시 · 둥근 액자 사진 · 손글씨 메모) ──
 * 높이를 한 줄 안에서 맞춘다(grid-auto-rows + foot margin-top:auto).
 * 기울기·들림은 개별 변환 속성(rotate/translate)으로 — 등장 애니메이션의 transform 과 겹치지 않게. */
.cards { grid-auto-rows: 1fr; gap: 14px; margin-top: 14px; }
.cards > .card {
  display: flex; border: 0; border-radius: var(--radius-md); overflow: hidden;
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
  transition: translate .6s var(--ease), rotate .6s var(--ease), box-shadow .6s var(--ease);
}
.cards > .card:hover { transform: none; }
.card__link { display: flex; flex-direction: column; width: 100%; border-radius: inherit; }
.card__link:focus-visible { outline-offset: -3px; }
.card__ph {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  margin: 8px 8px 0; border-radius: 14px; background: var(--blush);
}
.card__ph::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(transparent, rgba(59,40,48,.28)); pointer-events: none; }
.card__ph .card__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 22%; background: var(--blush);
  transition: transform 1.2s var(--ease);
}
.card:hover .card__photo, .card__link:focus-visible .card__photo { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; }
.card__name {
  justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; margin: 0;
  font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0;
}
.card__name-text { white-space: normal; overflow: visible; overflow-wrap: anywhere; letter-spacing: 0; }
.card__age { margin: 0; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); }
.card__intro {
  /* 세로 여백은 padding 이 아니라 같은 색 테두리로 — line-clamp 는 padding 안으로 셋째 줄이 비친다 */
  margin: 4px 0 0; padding: 0 12px; border-block: 8px solid var(--blush); border-radius: 4px 14px 14px 14px; background: var(--blush);
  font-family: var(--font-hand); font-size: 16px; line-height: 1.65; letter-spacing: .02em; color: var(--ink);
  min-height: calc(1.65em * 2 + 16px); max-height: calc(1.65em * 2 + 16px); line-break: strict;
}
.card__foot {
  margin-top: auto; padding-top: 8px; min-height: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
}
.card__online { margin: 0; gap: 6px; min-width: 0; font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.card__online .card__dot { width: 10px; height: 10px; background: #c7b7bb; }
.card__online.is-on { color: var(--green); }
.card__online.is-on .card__dot { background: var(--green-dot); box-shadow: 0 0 0 3px rgba(63,174,120,.18); }
.card__go {
  width: auto; height: auto; border: 0; border-radius: 0; margin-left: auto;
  gap: 2px; font-size: 16px; font-weight: 700; color: var(--rose); white-space: nowrap;
}
.card__go svg { width: 18px; height: 18px; transition: transform .38s var(--ease); }
.card:hover .card__go svg { transform: translateX(4px); }
.empty { margin: 24px 0; text-align: center; color: var(--muted); }
[data-role="more"] { margin-top: 28px; min-width: 240px; color: var(--rose-deep); scroll-margin-bottom: 120px; }

/* ── 밤편지 띠 (플럼 · 금빛 가는 선 · 편지 카드 셋) ──
 * 앱 컬럼을 벗어나 화면 끝까지 칠한다(margin calc(50% - 50vw)). 안쪽 여백을 같은 식으로 잡아
 * 글은 컬럼에 맞춘다. 아래 탭바 몫의 패딩만큼 아래로도 늘린다. html 이 overflow-x:clip 이다. */
.feature {
  --gold-soft: #e6cc9a;
  position: relative; isolation: isolate; overflow: hidden; display: block;
  /* 글자 크게(html[data-fs] → .app zoom)에서도 화면 폭에 맞게: vw 가 zoom 만큼 커지므로 그 배율로 나눈다 */
  margin: 48px calc(50% - 50vw / var(--fz, 1)) 0;
  padding: 52px calc(50vw / var(--fz, 1) - 50%) 44px;
  border: 0; color: var(--on-plum);
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(195,154,98,.18), transparent 70%),
    linear-gradient(170deg, var(--plum), var(--plum-2) 70%, #4a2a36);
}
.feature::before, .feature::after {
  content: ""; position: absolute; left: 16px; right: 16px; height: 1px; opacity: .6;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.feature::before { top: 18px; }
.feature::after { bottom: 18px; }
.feature__head { text-align: center; margin-bottom: 28px; }
.feature__eyebrow { color: var(--gold-soft); font-size: 26px; }
.feature__title {
  margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 6.4vw, 38px);
  line-height: 1.55; letter-spacing: .04em; color: var(--on-plum); word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance;
}
.feature__lead { margin: 12px auto 0; max-width: 30em; color: #eaddd8; font-size: 17px; word-break: auto-phrase; }
.feature__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin: 18px 0 0; padding: 0; list-style: none; font-size: 16px; color: var(--on-plum);
}
.feature__trust li { display: inline-flex; align-items: center; gap: 6px; }
.feature__trust svg { width: 20px; height: 20px; color: var(--gold-soft); flex: none; }
.feature__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.feature__item {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 22px 20px 20px; border-radius: 16px; color: var(--ink);
  background-color: var(--card); background-image: var(--washi);
  box-shadow: 0 24px 40px -20px rgba(0,0,0,.55);
}
.feature__text { min-width: 0; }
.feature__name { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.feature__desc { margin: 2px 0 0; font-size: 16px; color: var(--muted); }
.feature__art { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
/* 봉투 덮개 — JS 가 .rv 를 붙인 카드만 닫힌 채로 시작해 등장할 때 열린다. JS 가 없으면 처음부터 열려 있다. */
.feature__flap { position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 2; transform-origin: 50% 0; pointer-events: none; opacity: 0; transform: rotateX(180deg); }
.feature__flap::before { content: ""; position: absolute; inset: 0; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #f1cfd5, #f6dde1); clip-path: polygon(0 0, 100% 0, 50% 100%); }
html.rv-on .feature__item.rv .feature__flap { opacity: .9; transform: none; }
html.rv-on .feature__item.rv.in .feature__flap {
  opacity: 0; transform: rotateX(180deg);
  transition: transform .6s var(--ease) calc(var(--d, 0) * 120ms + 200ms), opacity .45s var(--ease) calc(var(--d, 0) * 120ms + 300ms);
}
.feature__note {
  display: block; width: 84px; height: 70px; padding: 10px; border-radius: 6px; color: var(--rose-deep); transform: rotate(-4deg);
  background: #fff repeating-linear-gradient(180deg, transparent 0 13px, rgba(178,58,98,.14) 13px 14px);
  box-shadow: 0 6px 12px -6px rgba(80,30,40,.35), inset 0 0 0 1px var(--line);
}
.feature__note svg { display: block; width: 100%; height: 100%; }
.feature__memo {
  display: grid; place-items: center; width: 88px; height: 64px; border-radius: 10px; color: var(--rose-deep); transform: rotate(3deg);
  background: linear-gradient(160deg, #fff, var(--blush)); box-shadow: 0 6px 12px -6px rgba(80,30,40,.35), inset 0 0 0 1px var(--line);
}
.feature__wave { display: flex; align-items: center; gap: 4px; height: 36px; }
.feature__wave i { width: 4px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.3); animation: hf-wave 1.8s ease-in-out infinite; }
.feature__wave i:nth-child(2) { animation-delay: .15s; }
.feature__wave i:nth-child(3) { animation-delay: .3s; }
.feature__wave i:nth-child(4) { animation-delay: .45s; }
.feature__wave i:nth-child(5) { animation-delay: .6s; }
.feature__wave.is-paused i { animation-play-state: paused; }
@keyframes hf-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(.95); } }
.feature__pola {
  position: relative; display: block; width: 76px; padding: 4px 4px 14px; background: #fff; transform: rotate(-3deg);
  box-shadow: 0 6px 12px -6px rgba(80,30,40,.4);
}
.feature__pola img, .feature__pola-empty { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; background: var(--blush); }
.feature__pola svg {
  position: absolute; left: 50%; top: 36%; width: 26px; height: 26px; margin: -13px; padding: 5px;
  border-radius: 50%; background: rgba(255,255,255,.9); color: var(--rose-deep);
}

html[data-fs="l"] :is(.feature, .petals) { --fz: 1.1; }
html[data-fs="xl"] :is(.feature, .petals) { --fz: 1.22; }

/* ── 홈 꽃잎 캔버스 — 본문 뒤, 페이지 바탕 위 (.app 안의 z-index:-1) ── */
body.nav-home .app { position: relative; z-index: 0; isolation: isolate; }
/* .app 안에 있어 글자 크게(zoom)면 같이 커진다 — 그 배율로 나눠 화면 크기에 맞춘다 */
.petals { position: fixed; left: 0; top: 0; width: calc(100vw / var(--fz, 1)); height: calc(100vh / var(--fz, 1)); z-index: -1; pointer-events: none; }

/* ── 스크롤 등장. 숨기는 클래스는 home-motion.js 만 붙인다 ── */
html.rv-on .rv { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
html.rv-on .rv:not(.in) { opacity: 0; transform: translateY(24px); }
html.rv-on .rv-fold {
  transform-origin: 50% 0;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), translate .6s var(--ease), rotate .6s var(--ease), box-shadow .6s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
html.rv-on .rv-fold:not(.in) { opacity: 0; transform: perspective(1000px) rotateX(-18deg) translateY(26px); }
/* 안전장치: 섬이 도중에 죽어 rv-ready 가 없으면 3초 뒤 모두 드러낸다 */
html.rv-on:not(.rv-ready) :is(.rv, .rv-fold) { animation: hf-failsafe 0s 3s forwards; }
@keyframes hf-failsafe { to { opacity: 1; transform: none; } }

/* ── 프로필 — 편지지 ── */
body.p-profile .gallery { padding-top: 8px; padding-bottom: 18px; margin-bottom: 4px; gap: 12px; scrollbar-width: none; }
body.p-profile .gallery::-webkit-scrollbar { display: none; }
body.p-profile .gallery__item { border-radius: 18px; background: var(--blush); box-shadow: var(--shadow-md); }
body.p-profile .gallery__item:only-child { width: 100%; }
body.p-profile .detail {
  gap: 18px; padding: 22px 18px 18px; border-radius: var(--radius-md);
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
body.p-profile .detail__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: 0;
}
body.p-profile .detail__nick { letter-spacing: 0; overflow-wrap: anywhere; }
body.p-profile .detail__age { font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 17px; font-weight: 500; color: var(--muted); }
/* AI 고지 — 법적 전제. 장식보다 먼저 읽혀야 한다: 잉크 글자 15px, 로즈 선, 옅은 블러시 */
body.p-profile .notice-ai {
  padding: 12px 14px 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.7; color: var(--ink);
  background: #fdf1f1; box-shadow: inset 0 0 0 1px var(--line-2); border-left: 4px solid var(--rose);
}
body.p-profile .detail__intro {
  padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--blush);
  font-family: var(--font-hand); font-size: 18px; line-height: 1.85; color: var(--ink); line-break: strict;
}
body.p-profile .facts { gap: 0 18px; font-size: 16px; }
body.p-profile .facts dt, body.p-profile .facts dd { padding: 10px 0; border-top: 1px dashed var(--line-2); }
body.p-profile .facts dt { font-size: 15px; color: var(--muted); }
body.p-profile .facts dd { color: var(--ink); overflow-wrap: anywhere; }
body.p-profile .actions .btn { min-height: 56px; }
body.p-profile .actions__calls .btn { min-width: 0; padding-inline: 12px; }
body.p-profile .safety { gap: 4px; margin-top: -4px; font-size: 15px; }
body.p-profile .safety > * { min-height: 48px; padding: 0 12px; }
body.p-profile .safety a, body.p-profile .safety .linkish { font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
body.p-profile .safety a:hover, body.p-profile .safety .linkish:hover { color: var(--rose-deep); }

@media (min-width: 600px) {
  .greet { padding-top: 20px; }
  .greet__title { font-size: 30px; }
  .greet__sub { font-size: 17px; }

  .hero {
    margin: 0 0 12px; min-height: 400px; border-radius: var(--radius-lg);
    background: var(--card); box-shadow: var(--shadow-md);
  }
  .hero__img { height: 100%; }
  .hero::before { background: linear-gradient(90deg, var(--paper) 8%, rgba(251,246,239,.8) 44%, rgba(251,246,239,0) 78%); }
  .hero__panel { width: min(560px, 62%); padding: 44px 48px; }
  .hero__hand { font-size: 22px; }
  .hero__title { font-size: clamp(30px, 3.4vw, 44px); }
  .hero__desc { font-size: 17px; }

  .section-head { margin-top: 44px; }
  .section-head__title { font-size: 27px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cards > .card:hover { translate: 0 -6px; box-shadow: var(--shadow-lg); }

  .feature {
    margin-top: 70px; margin-bottom: 0;
    padding-top: 84px; padding-bottom: 70px;
  }
  .feature::before, .feature::after { left: 40px; right: 40px; }
  .feature::before { top: 28px; }
  .feature::after { bottom: 28px; }
}
@media (min-width: 700px) {
  .feature__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature__item { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 34px 22px 26px; }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  /* 탁자 위에 놓인 편지 — 속삭임 정도의 기울기. 높이는 그대로 */
  .cards > .card:nth-child(4n+1) { rotate: -.5deg; }
  .cards > .card:nth-child(4n+3) { rotate: .5deg; }
  .cards > .card:hover { rotate: 0deg; }
}
@media (min-width: 900px) {
  body.p-profile .app { gap: 40px; }
  body.p-profile .gallery { padding: 0; }
  body.p-profile .gallery__item { border-radius: 20px; }
  body.p-profile .detail { padding: 32px 30px 24px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  body.p-profile .detail__name { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cards > .card, .card__ph .card__photo, .card__go svg, .section-head__more svg { transition: none; }
  .card:hover .card__photo, .card__link:focus-visible .card__photo { transform: none; }
  .feature__wave i { animation: none; transform: scaleY(.6); }
}
/* ── 홈 윗단 (정회원): 인사 · 오늘의 편지 | 이어서 대화 · 지금 온라인 ──
 * 휴대폰은 한 줄(인사 → 편지 → 이어서 → 온라인), 1024px 이상은 2단. */
.home-top__side .section-head { margin-top: 26px; }
.home-top__side > section:first-child .section-head { margin-top: 22px; }

/* 얼굴 아바타 — 목록 사진은 전신이라 위쪽 가운데를 확대해 얼굴 쪽을 보인다 */
.hav { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; }
.hav__f { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--blush); }
.hav__f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform: scale(1.8); transform-origin: 50% 6%; }
.hdot { position: absolute; z-index: 2; right: 1px; bottom: 1px; width: 15px; height: 15px; border-radius: 50%; background: var(--green-dot); border: 2.5px solid var(--card); }
.hdot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--green-dot); opacity: 0; animation: hm-breathe 2.8s cubic-bezier(.33,0,.2,1) 3; }
.hdot--lead::after { animation-iteration-count: infinite; }
.hdot.is-paused::after { animation-play-state: paused; }
@keyframes hm-breathe { 0%, 100% { transform: scale(.6); opacity: .45; } 50% { transform: scale(1.25); opacity: 0; } }
.hav--ring { padding: 3px; }
.hav--ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--petal-2), #f6dfb9, var(--rose), var(--petal-2)); }
.hav--ring .hav__f { inset: 4px; box-shadow: 0 0 0 3px var(--card); }
html.rv-on .rv .hav--ring::before { transform: rotate(-120deg); transition: transform 1.6s var(--ease) .2s; }
html.rv-on .rv.in .hav--ring::before { transform: none; }

/* ─ 오늘의 편지 ─ */
.today { position: relative; padding: 14px 0 6px; }
.today__meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.today__label { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; word-break: auto-phrase; overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.today__label time { font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.today__replay { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; font: inherit; font-size: 15px; color: var(--muted); white-space: nowrap; }
.today__replay:hover { color: var(--rose-deep); background: rgba(242,210,214,.35); }
.today__replay svg { width: 18px; height: 18px; }
.today__state { font-size: 15px; font-weight: 500; color: var(--gold-ink); }
.branch { position: absolute; z-index: 0; width: 150px; top: -34px; right: -12px; pointer-events: none; opacity: .9; transform: translateY(calc(var(--sy, 0) * -0.25px)); }
.tl { position: relative; z-index: 1; perspective: 1400px; }
.tl__sheet {
  position: relative; z-index: 1; padding: 18px; border-radius: 18px; overflow: hidden;
  background-color: var(--card); background-image: var(--washi), repeating-linear-gradient(180deg, transparent 0 35px, rgba(178,58,98,.08) 35px 36px);
  box-shadow: var(--shadow-md);
}
.tl__sheet::after {
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 160px; height: 160px; opacity: .12; pointer-events: none; background: var(--petal-2); transform: rotate(24deg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat;
}
.tl__to { margin: 0 0 6px; font-family: var(--font-hand); font-size: 19px; font-weight: 600; color: var(--rose-deep); }
.tl__msg { margin: 0; font-family: var(--font-hand); font-size: 18px; line-height: 1.95; color: var(--ink); overflow-wrap: anywhere; line-break: strict; }
.tl__pola { position: relative; z-index: 1; float: right; width: 84px; margin: 2px -2px 8px 12px; padding: 5px 5px 16px; background: #fff; transform: rotate(4deg); box-shadow: 0 8px 16px -8px rgba(80,30,40,.45); }
.tl__pola img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; }
.tl__pola::before { content: ""; position: absolute; left: 50%; top: -8px; width: 44px; height: 16px; margin-left: -22px; background: rgba(234,166,182,.55); transform: rotate(-6deg); }
.tl__sign { clear: both; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.tl__sign .hav { width: 44px; height: 44px; }
.tl__sign .hdot { width: 13px; height: 13px; }
.tl__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tl__who b { display: flex; align-items: center; gap: 6px; font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.tl__when { font-size: 15px; color: var(--muted); }
/* 서명 — 그의 이름을 Klee One 으로(Parisienne 에는 가나가 없다). 편지가 나오면 한 획씩 써진다 */
.tl__sig { margin-left: auto; height: 44px; max-width: 40%; flex: none; overflow: visible; }
.tl__sig text { font-family: var(--font-hand); font-weight: 600; font-size: 30px; fill: var(--rose-deep); stroke: var(--rose-deep); stroke-width: .5; }
.tl__cta { margin-top: 14px; display: flex; }
.tl__cta .btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-size: 17px; text-decoration: none; }
.tl__cta .btn svg { width: 20px; height: 20px; }

/* 봉투 — .tl--env(인라인 스크립트)일 때만. 없으면 편지는 처음부터 펼쳐져 있다 */
.tl__env { display: none; }
.tl--env .tl__env {
  display: block; position: absolute; inset: 0; z-index: 3; cursor: pointer;
  transition: transform .55s var(--ease) .85s, opacity .5s var(--ease) .9s, visibility 0s 1.45s;
}
.tl__body { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, #f7dde0, #efc6cd); box-shadow: var(--shadow-lg); }
.tl__body::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #f5d6da, #edc0c8); clip-path: polygon(0 100%, 50% 50%, 100% 100%); }
.tl__body::after { content: ""; position: absolute; inset: 0; background-image: var(--washi); }
.tl__flap { position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 2; transform-origin: 50% 0; transition: transform .6s var(--ease) .3s, opacity .45s var(--ease) .45s; }
.tl__flap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #e7b2bd, #ecc0c8); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 18px 18px 0 0; filter: drop-shadow(0 3px 3px rgba(0,0,0,.08)); }
.tl__seal { position: absolute; z-index: 3; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; color: #fbe2e8; isolation: isolate; }
.tl__seal .seal__h {
  position: absolute; inset: 0; border-radius: 50%; transition: transform .5s var(--ease), opacity .5s;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 6px 14px -4px rgba(125,34,57,.6), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 5px rgba(255,255,255,.25);
}
.tl__seal .seal__h--l { clip-path: polygon(0 0, 54% 0, 44% 40%, 56% 62%, 46% 100%, 0 100%); }
.tl__seal .seal__h--r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 56% 62%, 44% 40%); }
.tl__seal::before { content: ""; position: absolute; z-index: 1; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(255,230,236,.45); }
.tl__seal svg { position: relative; z-index: 2; width: 30px; height: 30px; }
.stamp-edge { --h: 6px; padding: var(--h); -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box; }
.tl__stamp { position: absolute; z-index: 3; right: 16px; top: 16px; width: 64px; height: 78px; background: #fffdf9; filter: drop-shadow(0 6px 8px rgba(110,40,60,.3)); transform: rotate(5deg); }
.tl__stamp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.tl__pm { position: absolute; z-index: 4; right: 54px; top: 40px; width: 64px; height: 64px; color: rgba(143,43,77,.5); transform: rotate(-14deg); }
.tl__addr { position: absolute; z-index: 3; left: 20px; bottom: 14px; margin: 0; font-family: var(--font-hand); font-weight: 600; font-size: 20px; line-height: 1.4; color: var(--rose-deep); }
.tl__addr small { display: block; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); }
.tl__hint { position: absolute; z-index: 3; right: 18px; bottom: 14px; font-size: 15px; font-weight: 500; color: var(--rose-deep); }
.tl--env .tl__sheet { transform: translateY(8px) scale(.985); transition: transform .8s var(--ease) .9s; }
/* 휴대폰: 봉한 동안은 편지를 낮은 봉투 높이로 접어 둔다(키 큰 빈 분홍 덩어리 대신). 열리면 펼쳐진다 */
@media (max-width: 1023px) {
  .tl--env .tl__sheet { max-height: 1400px; transition: transform .8s var(--ease) .9s, max-height .8s var(--ease) 1.25s; }
  .tl--env:not(.open) .tl__sheet { max-height: 212px; }
  .tl--env.done .tl__sheet { transition: none; }
}
.tl.open .tl__seal .seal__h--l { transform: translate(-10px, 4px) rotate(-30deg); opacity: 0; transition-delay: .1s; }
.tl.open .tl__seal .seal__h--r { transform: translate(10px, 4px) rotate(30deg); opacity: 0; transition-delay: .1s; }
.tl.open .tl__seal svg, .tl.open .tl__seal::before { opacity: 0; transition: opacity .25s .1s; }
.tl.open .tl__flap { transform: rotateX(180deg); opacity: 0; }
.tl.open .tl__env { transform: translateY(46px); opacity: 0; visibility: hidden; pointer-events: none; }
.tl.open .tl__sheet { transform: none; }
.tl.done .tl__env, .tl.done .tl__env * { transition: none !important; }
.tl--env .tl__sig text { fill-opacity: 0; stroke-dasharray: 320; stroke-dashoffset: 320; }
.tl--env.open .tl__sig text { transition: stroke-dashoffset 1.2s var(--ease) 1.2s, fill-opacity .6s 2.1s; stroke-dashoffset: 0; fill-opacity: 1; }
.tl--env.done .tl__sig text { transition: none; }
/* 안전장치: 섬이 못 떠서 rv-ready 가 없으면 3초 뒤 봉투를 치운다 */
html:not(.rv-ready) .tl--env .tl__env { animation: hm-unseal 0s 3s forwards; }
html:not(.rv-ready) .tl--env .tl__sheet { animation: hf-failsafe 0s 3s forwards; }
html:not(.rv-ready) .tl--env .tl__sig text { animation: hm-sigshow 0s 3s forwards; }
@keyframes hm-unseal { to { opacity: 0; visibility: hidden; } }
@keyframes hm-sigshow { to { fill-opacity: 1; stroke-dashoffset: 0; } }
@media (max-width: 1023px) { html:not(.rv-ready) .tl--env .tl__sheet { animation-name: hm-unfold; } }
@keyframes hm-unfold { to { max-height: none; transform: none; } }

/* ─ 이어서 대화 — 봉투 행 ─ */
.cont { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cont__item {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none; background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
.cont__item:hover { color: var(--ink); transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.cont__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: rgba(242,210,214,.45); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: var(--radius-md) var(--radius-md) 0 0; pointer-events: none; }
.cont__item .hav { width: 58px; height: 58px; }
.cont__item .cont__seal { position: absolute; z-index: 2; left: 6px; top: 6px; }
.cont__body { flex: 1; min-width: 0; }
.cont__top { display: flex; align-items: center; gap: 8px; }
.cont__top b { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont__top time { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--rose-deep); white-space: nowrap; }
.cont__msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 17px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.cont__msg svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; color: var(--rose); }
.cont__msg--none { font-family: var(--font-hand); font-size: 16px; color: var(--muted); }
html.rv-on .rv .cont__seal { opacity: 0; transform: scale(.6); }
html.rv-on .rv.in .cont__seal { animation: hm-sealpop .7s var(--ease) .45s both; }
@keyframes hm-sealpop { 0% { transform: scale(1.6) rotate(-10deg); opacity: 0; } 55% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ─ 지금 온라인 — 가로 띠 ─ */
.onl {
  display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; list-style: none;
  scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 16px; overscroll-behavior-x: contain;
}
.onl::-webkit-scrollbar { display: none; }
.onl li { flex: none; scroll-snap-align: start; }
.onl a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 84px; padding: 4px 2px 6px; border-radius: 16px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; }
.onl a:hover { color: var(--ink); background: rgba(242,210,214,.3); }
.onl .hav { width: 74px; height: 74px; transition: transform .38s var(--ease); }
.onl a:hover .hav { transform: translateY(-3px); }
.onl__n { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; letter-spacing: 0; }
.onl__n .badge--ai { height: 20px; padding: 0 6px; font-size: 12px; }
.onl__note { margin: 8px 0 0; font-size: 16px; color: var(--muted); }

/* ─ 캐스트: 사진 위 "オンライン" 알약 · 정렬 라벨 ─ */
.card__live {
  position: absolute; z-index: 2; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); background: rgba(255,253,250,.94);
  font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--green);
}
.card__live .card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-dot); }
.filterbar__sort { display: none; }
.loadmore { display: flex; justify-content: center; margin: 26px 0 8px; }
.loadmore [data-role="more"] { margin-top: 0; }
.btn--ghost { color: var(--rose-deep); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-sm); }
.btn--ghost:hover { color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px var(--rose), var(--shadow-sm); }

/* ─ 추천 한 명 — 우표 가장자리 사진 + 손글씨 소개 ─ */
.spot {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; margin-top: 30px; padding: 18px; border-radius: var(--radius-md);
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
.spot__ph { display: block; width: 112px; height: 140px; align-self: start; background: #fffdf9; transform: rotate(-2deg); filter: drop-shadow(0 8px 12px rgba(110,40,60,.22)); }
.spot__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.spot__tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: #fff4e3; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--gold-ink); }
.spot__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: 0; }
.spot__age { font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); }
.spot__txt { margin: 8px 0 0; font-family: var(--font-hand); font-size: 17px; line-height: 1.85; line-break: strict; overflow-wrap: anywhere; }
.spot__more { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 4px; font-size: 16px; font-weight: 500; color: var(--rose); text-decoration: none; }
.spot__more svg { width: 18px; height: 18px; transition: transform .38s var(--ease); }
.spot__more:hover svg { transform: translateX(4px); }

/* ─ 밤편지 띠 보강: 강조어 · 카드 한 줄 메모 · 폴라로이드 빛 ─ */
.feature__title em { font-style: normal; color: #f3c3cf; }
.feature__note-line { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--gold-ink); }
.feature__pola { overflow: hidden; }
.feature__pola::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-100%); animation: hm-sweep 6s 1s cubic-bezier(.33,0,.2,1) infinite; pointer-events: none; }
.feature__pola.is-paused::after { animation-play-state: paused; }
@keyframes hm-sweep { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

/* ─ 안심 넷 ─ */
.trust { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.trust li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius-md); background: rgba(255,253,250,.8); box-shadow: inset 0 0 0 1px var(--line); }
.trust svg { flex: none; width: 28px; height: 28px; margin-top: 2px; color: var(--rose); }
.trust b { display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 600; word-break: auto-phrase; overflow-wrap: anywhere; }
.trust span { display: block; font-size: 16px; color: var(--muted); line-break: strict; text-wrap: pretty; }

/* ─ 맺음 편지 ─ */
.closing {
  position: relative; margin: 44px 0 10px; padding: 36px 22px 34px; text-align: center; border-radius: var(--radius-lg); overflow: hidden;
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
.closing::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 7px; pointer-events: none; opacity: .7;
  background: repeating-linear-gradient(135deg, var(--petal-2) 0 14px, transparent 14px 24px, #d7b88a 24px 38px, transparent 38px 48px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.closing__seal {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; color: #fbe2e8;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 6px 14px -4px rgba(125,34,57,.6), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 5px rgba(255,255,255,.25);
}
.closing__seal::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(255,230,236,.45); }
.closing__seal svg { width: 30px; height: 30px; }
.closing h2 { margin: 0 0 8px; font-family: var(--font-serif); font-size: 25px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance; }
.closing p { margin: 0 auto 22px; max-width: 28em; color: var(--muted); word-break: auto-phrase; }
.closing .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; text-decoration: none; }
.closing .btn svg { width: 20px; height: 20px; }
.closing__sig { display: block; margin-top: 16px; font-family: var(--font-script); font-size: 26px; color: var(--rose-deep); }

@media (min-width: 700px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl__sheet { padding: 26px 30px 24px; }
  .tl__pola { width: 118px; margin-left: 20px; }
}
@media (min-width: 1024px) {
  .home-top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px; align-items: start; }
  .home-top__main .greet { padding-top: 10px; }
  .home-top .today { padding-top: 18px; }
  .home-top__side { padding-top: 0; }
  .home-top__side > section:first-child .section-head { margin-top: 18px; }
  .tl__pola { width: 138px; }
  .tl__msg { font-size: 20px; }
  .tl__addr { left: 30px; bottom: 28px; font-size: 24px; }
  .tl__stamp { width: 84px; height: 102px; right: 26px; top: 24px; }
  .tl__pm { right: 86px; top: 70px; width: 90px; height: 90px; }
  .tl__hint { right: 30px; bottom: 28px; }
  .tl__seal { top: 42%; }
  .branch { width: 170px; right: -24px; top: -46px; }
  .today__meta { padding-right: 120px; }
  .onl { flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0; }
  .filterbar__sort {
    display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: var(--radius-pill);
    font-size: 16px; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); white-space: nowrap;
  }
  .filterbar__sort svg { width: 20px; height: 20px; }
  .card__live { top: 8px; bottom: auto; }
  .spot { max-width: 880px; margin: 48px auto 0; }
  .loadmore { margin-top: 40px; }
  .closing { max-width: 780px; margin: 60px auto 20px; padding: 52px 40px; }
  .closing h2 { font-size: 30px; }
}

/* calm: 끝 상태만 — 봉투·서명 긋기·가지 시차·꽃잎 없음 (전역 calm 규칙이 시간은 0 으로 만든다) */
html.calm .tl__env { display: none !important; }
html.calm .tl .tl__sheet { transform: none; max-height: none !important; }
html.calm .tl .tl__sig text { fill-opacity: 1; stroke-dashoffset: 0; }
html.calm .branch { transform: none; }
html.calm .petals { display: none; }
html.calm .hdot::after, html.calm .feature__pola::after { animation: none; opacity: 0; }
html.calm .cont__seal { opacity: 1 !important; transform: none !important; animation: none !important; }
/* 글자 크게(l/xl) + 휴대폰: 좁아진 줄을 풀어 준다 — 서명은 접고, 밤편지 카드는 세로로 쌓는다 */
@media (max-width: 699px) {
  html[data-fs="xl"] .tl__sig { display: none; }
  html[data-fs="xl"] .feature__item, html[data-fs="l"] .feature__item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  html[data-fs="xl"] .spot { grid-template-columns: 1fr; }
}
.tl__who b { white-space: nowrap; }
/* ── /B: 홈·탐색 ── */

/* ── B: 대화 (chat 목록 · room · call) ─────────────────────────────── */
/* 우편함(/chat) · 대화방(/room) · 통화(/call). 위쪽 옛 규칙을 덮어쓴다.
   키프레임은 ks- 접두어 — 다른 섹션과 이름이 겹치지 않게. */

/* ─ 봉랍 카운터 (B `.wseal`) — 목록의 안읽음 수. 숫자는 흰 글자 ≈6:1 ─ */
.wseal { position: relative; display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 7px; flex: none; }
.wseal .seal__h {
  position: absolute; inset: 0; border-radius: 16px;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 3px 8px -3px rgba(125,34,57,.6), inset 0 -2px 4px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.25);
}
.wseal .seal__h--l { clip-path: polygon(0 0, 54% 0, 44% 40%, 56% 62%, 46% 100%, 0 100%); }
.wseal .seal__h--r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 56% 62%, 44% 40%); }
.wseal::before { content: ""; position: absolute; z-index: 1; inset: 3px; border-radius: 13px; border: 1px dashed rgba(255,230,236,.5); pointer-events: none; }
.wseal b { position: relative; z-index: 1; font-size: 15px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
@keyframes ks-sealpop { 0% { transform: scale(1.6) rotate(-10deg); opacity: 0; } 55% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* ─ /chat 머리: 우체통 + 세리프 제목 + 안읽음 한 줄. 문서 h1 은 topbar 에 두고 시각적으로만 숨긴다 ─ */
body.nav-chat:not(.p-room) .topbar {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); border: 0;
}
.chat-top { padding-top: 6px; }
.chat-head { display: flex; align-items: center; gap: 14px; margin: 0; }
.chat-head__text { min-width: 0; }
.chat-head__postbox { width: 52px; height: 64px; flex: none; overflow: visible; }
.chat-head__title { margin: 0; font-family: var(--font-serif); font-size: 27px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; color: var(--ink); }
.chat-head__sub {
  margin: 2px 0 0; font-family: var(--font-hand); font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--rose-deep);
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
@keyframes ks-posting { 0% { transform: translateY(-26px); opacity: 0; } 25% { opacity: 1; transform: translateY(-18px); } 70% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

/* 검색 + 세그먼트 필터 */
.chat-tools[hidden] { display: none; }
.chat-search { position: relative; display: block; margin: 16px 0 12px; }
.chat-search input {
  width: 100%; height: 56px; padding: 0 18px 0 52px; border: 0; border-radius: var(--radius-pill);
  font: inherit; font-size: 17px; color: var(--ink); background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-sm); transition: box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.chat-search input::placeholder { color: #806a73; }
.chat-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 5px rgba(178,58,98,.12); }
.chat-search svg {
  position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none;
  fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round;
}
.chat-seg {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px;
  border-radius: var(--radius-pill); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line);
}
.chat-seg button {
  position: relative; z-index: 1; min-height: 48px; padding: 0 6px; border: 0; background: none; border-radius: var(--radius-pill);
  font: inherit; font-size: 16px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.chat-seg button[aria-pressed="true"] { color: var(--rose-deep); font-weight: 700; }
.chat-seg button:focus-visible { outline: 3px solid var(--rose); outline-offset: -3px; }
.chat-seg button span { font-size: 15px; margin-left: 2px; }
.chat-seg__ind {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3);
  border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .52s var(--ease);
}

.chatcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 18px; }
.chatcols > * { min-width: 0; }
.chat-aside { display: none; }
/* 캡션 한 줄 — 봉한 편지가 무엇인지 */
.box-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--muted); letter-spacing: .04em; }
.box-label[hidden] { display: none; }
.box-label::after { content: ""; flex: 1 1 0; min-width: 12px; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* ─ 편지 카드 목록. 카드는 li — 안의 링크가 본문, 빠른 통화는 그 아래 형제 ─ */
.rooms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
.rooms .room {
  position: relative; border-bottom: 0; border-radius: 16px;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: 0 6px 18px -10px rgba(120,60,70,.28), inset 0 0 0 1px rgba(236,220,213,.95);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rooms .room[hidden] { display: none; }
.rooms .room:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(226,201,196,.95); }
.rooms .room__link {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border-radius: 16px; color: var(--ink); background: none; text-decoration: none;
}
.rooms .room__link:hover { color: var(--ink); background: none; }
.rooms .room__link:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
/* 안 읽음 = 봉한 편지. 위 덮개 + 옅은 블러시 */
.rooms .room.is-unread {
  background-color: #fff8f7; background-image: var(--washi), linear-gradient(180deg, #fbe9eb, var(--card) 70%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(178,58,98,.22);
}
.rooms .room.is-unread .room__link { padding-top: 28px; }
.rooms .room.is-active { box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--rose); }
.room__flap { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 38px; transform-origin: 50% 0; transition: transform .6s var(--ease), opacity .4s .25s; pointer-events: none; }
.room__flap::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #efc4cc, #f5d8dd);
  clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 1px rgba(120,40,60,.12));
}
.rooms .room.is-unread:hover .room__flap { transform: perspective(600px) rotateX(28deg); }
.rooms .room.is-opening .room__flap { transform: perspective(600px) rotateX(160deg); opacity: 0; }

.room__av { position: relative; z-index: 1; flex: none; width: 64px; height: 64px; border-radius: 50%; }
.room__av .room__photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: var(--blush); }
.room__av--on { padding: 3px; background: conic-gradient(var(--petal-2), #f6dfb9, var(--rose), var(--petal-2)); }
.room__av--on .room__photo { box-shadow: 0 0 0 2px var(--card); }
.room__dot { position: absolute; right: 0; bottom: 1px; width: 15px; height: 15px; border-radius: 50%; background: var(--green-dot); border: 2.5px solid var(--card); }

.rooms .room__body { position: relative; z-index: 1; display: block; flex: 1; min-width: 0; }
.room__top { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; line-height: 1.4; }
.rooms .room__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: 0; }
.room__age { flex: none; font-size: 15px; color: var(--muted); white-space: nowrap; }
.rooms .room__favor { flex: none; color: var(--gold-ink); font-size: 17px; line-height: 1; }
.room__time { flex: none; margin-left: auto; padding-left: 4px; font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.room.is-unread .room__time { color: var(--rose-deep); font-weight: 700; }
.rooms .room__preview {
  margin: 4px 0 0; font-size: 17px; line-height: 1.7; color: var(--muted);
  white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.room.is-unread .room__preview { color: var(--ink); }
.room__pico { width: 18px; height: 18px; margin-right: 4px; vertical-align: -3px; fill: none; stroke: var(--rose); stroke-width: 1.7; stroke-linejoin: round; }
.room__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 6px 0 0; }
.room__online { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 500; color: var(--green); }
.room__online i { width: 10px; height: 10px; border-radius: 50%; background: var(--green-dot); flex: none; }
.room__online--off { color: var(--muted); }
.room__online--off i { background: #c7b7bb; }
.room__seal { margin-left: auto; }
/* 읽은 편지: 펼친 봉투. 내 편지를 그가 읽었으면 "既読" */
.room__read { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 15px; color: var(--muted); white-space: nowrap; }
.room__read svg { width: 20px; height: 20px; fill: none; stroke: #b89aa3; stroke-width: 1.6; stroke-linejoin: round; }

/* 봉랍이 갈라진다: 두 쪽이 벌어지며 사라지고, 꽃잎 한 줌 */
.wseal .seal__h { transition: transform .5s var(--ease), opacity .5s; }
.wseal b { transition: opacity .25s; }
.wseal.is-crack .seal__h--l { transform: translate(-9px, 2px) rotate(-28deg); opacity: 0; }
.wseal.is-crack .seal__h--r { transform: translate(9px, 2px) rotate(28deg); opacity: 0; }
.wseal.is-crack b, .wseal.is-crack::before { opacity: 0; }
.seal-burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; pointer-events: none; z-index: 5; }
.seal-burst i { position: absolute; width: 10px; height: 10px; border-radius: 50% 0 50% 50%; background: var(--petal-2); animation: ks-bpetal .9s var(--ease) forwards; }
@keyframes ks-bpetal { from { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 1; } to { transform: rotate(var(--a)) translateY(-34px) scale(1); opacity: 0; } }
html.calm .seal-burst { display: none; }

/* 빠른 통화 — 첫 온라인 방(모바일), 처음 두 곳(데스크톱) */
.room__quick { display: none; position: relative; z-index: 2; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 16px; margin-top: -4px; }
.room--quick1 .room__quick { display: grid; }
.qbtn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 56px; padding: 6px 14px;
  line-height: 1.3; text-align: left; text-decoration: none; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; color: var(--rose-deep); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .2s, box-shadow .2s;
}
.qbtn:hover { color: var(--rose-deep); background: var(--blush); box-shadow: inset 0 0 0 1px var(--rose); }
.qbtn:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.qbtn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.qbtn span { min-width: 0; }
.qbtn small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); white-space: nowrap; }
@media (max-width: 379px) { .qbtn { gap: 6px; padding: 6px 10px; } .qbtn small { font-size: 14px; } }

/* 확인 시트 (dialog) */
.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 480px; max-height: none; border-radius: 24px 24px 0 0; background: var(--card); background-image: var(--washi); color: var(--ink); box-shadow: var(--shadow-lg); }
.sheet::backdrop { background: rgba(59,40,48,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet[open] { animation: ks-sheetup .45s var(--ease); }
@keyframes ks-sheetup { from { transform: translateY(40px); opacity: 0; } }
.sheet__in { padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); text-align: center; }
.sheet__av { display: block; width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: var(--blush); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--petal); }
.sheet__av[hidden] { display: none; }
.sheet h2 { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.5; word-break: auto-phrase; text-wrap: balance; }
.sheet__price { margin: 6px 0 18px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.sheet__btns { display: grid; gap: 10px; }
.sheet__btns .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; text-decoration: none; font-size: 17px; }
@media (min-width: 600px) { .sheet { margin: auto; border-radius: 24px; } }

/* 빈 우편함 · 검색 결과 없음 */
.chat-empty {
  text-align: center; padding: 28px 20px 26px; border-radius: var(--radius-lg);
  border: 2px dashed var(--line-2); background: rgba(255,253,250,.7);
}
.chat-empty[hidden] { display: none; }
.chat-empty__env { display: block; width: 120px; margin: 0 auto 10px; }
.chat-empty__title { margin: 0 0 4px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.chat-empty__body { margin: 0 auto 18px; max-width: 22em; font-size: 16px; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.chat-empty__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; }
@keyframes ks-floaty { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

/* ─ 데스크톱 옆칸 ─ */
.chat-free { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--radius-md); background: linear-gradient(120deg, #fff8ef, #fdeef0); box-shadow: inset 0 0 0 1px #efd9c7; font-size: 16px; line-height: 1.6; }
.chat-free svg { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-linejoin: round; }
.chat-free b { display: block; color: var(--rose-deep); font-size: 17px; }
.chat-free small { display: block; color: var(--muted); font-size: 15px; }
.chat-side { padding: 20px; border-radius: var(--radius-md); background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); }
.chat-side__title { margin: 0 0 12px; font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; }
.chat-side__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chat-side__list a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 4px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.chat-side__list a:hover { background: #fdf1f2; color: var(--ink); }
.chat-side__av { width: 54px; height: 54px; }
.chat-side__who { display: grid; min-width: 0; gap: 2px; }
.chat-side__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-side__name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.chat-side__none { margin: 0; font-size: 16px; color: var(--muted); }

@media (min-width: 600px) {
  body.nav-chat:not(.p-room) .app { max-width: 680px; }
}
@media (min-width: 1024px) {
  body.nav-chat:not(.p-room) .app { max-width: 1112px; }
  .chat-top { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; align-items: end; padding-top: 20px; }
  .chat-search { margin: 0 0 12px; }
  .chatcols { grid-template-columns: minmax(0, 680px) 360px; justify-content: space-between; gap: 40px; align-items: start; }
  .chat-aside { position: sticky; top: 100px; display: grid; gap: 18px; }
  .rooms .room__link { padding: 18px 20px; }
  .rooms .room.is-unread .room__link { padding-top: 28px; }
  .room__av { width: 70px; height: 70px; }
  .room--quick2 .room__quick { display: grid; }
  .room__quick { max-width: 480px; padding: 0 20px 18px 104px; }
}

/* ─ 대화방 머리: 얼굴 + 이름 + 접속 상태. topbar 를 격자로 — [‹][얼굴][이름/상태][통화][메뉴] ─ */
body.p-room .topbar {
  display: grid; grid-auto-flow: column; grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: center;
}
body.p-room .topbar > * { grid-row: 1 / 3; }
body.p-room .topbar__back { grid-column: 1; }
body.p-room .room-head { grid-column: 2; }
body.p-room .topbar__title { grid-column: 3; grid-row: 1; align-self: end; line-height: 1.35; font-size: 20px; }
body.p-room .room-head__presence { grid-column: 3; grid-row: 2; align-self: start; }
.room-head { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; }
.room-head__photo { display: block; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: var(--blush); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--petal); }
.room-head .room__dot { right: 2px; bottom: 2px; width: 13px; height: 13px; border-width: 2px; }
.room-head:focus-visible { outline: 3px solid var(--rose); outline-offset: 1px; }
.room-head__presence { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-head__presence i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-dot); flex: none; }
.room-head__presence--off { color: var(--muted); }
.room-head__presence--off i { background: #c7b7bb; }
.room-side__online.room-side__online--off { color: var(--muted); }
.room-side__online.room-side__online--off .card__dot { background: #c7b7bb; }

/* 날짜 구분선 (도쿄 기준, chat-bubble.js decorateRuns) */
.day-sep { align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.day-sep::before, .day-sep::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.day-sep::after { background: linear-gradient(270deg, transparent, var(--line-2)); }
.day-sep time { padding: 3px 14px; border-radius: var(--radius-pill); background: rgba(255,253,250,.9); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }

/* ─ 대화방 머리 ─ */
body.p-room .topbar__title { letter-spacing: .02em; }
.room-call { min-width: 48px; min-height: 48px; border-radius: 50%; color: var(--rose); }
.room-call:hover { color: var(--rose-deep); background: rgba(242,210,214,.45); }
.room-menu__button { min-width: 48px; min-height: 48px; border-radius: 50%; color: var(--ink); font-size: 24px; }
.room-menu__button:hover { background: rgba(242,210,214,.45); }
.room-menu__panel {
  width: min(300px, calc(100vw - 24px)); padding: 10px; border: 0; border-radius: 18px;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.room-menu__row { min-height: 48px; font-size: 16px; border-radius: 12px; }
.room-menu__row:hover { background: rgba(248,230,228,.6); }
.room-menu__row input { width: 22px; height: 22px; accent-color: var(--rose); }
.room-menu__panel hr { border-top-color: var(--line); }
.room-menu__exit { min-height: 48px; font-size: 16px; border-radius: 12px; }
.room-menu__warn { font-size: 15px; }
.room-menu__nickname .btn { min-height: 44px; border-radius: var(--radius-pill); background: var(--blush); color: var(--rose-deep); }
.room-menu__nickname .btn:hover { background: var(--blush-2); }
@media (max-width: 379px) {
  .composer { gap: 5px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .composer__photo { width: 44px; min-height: 44px; height: 44px; margin-bottom: 2px; }
  .composer__send { padding: 0 14px; }
}
.room-menu__panel .linkish { min-height: 44px; padding: 0 10px; font-size: 15px; }

/* AI 고지·요율 — 방 안에서는 읽히는 크기로 */
.room-main .notice-ai {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.6;
  background: rgba(248,230,228,.7); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(226,201,196,.8);
}
.rate { margin: 0 0 12px; font-size: 15px; color: var(--muted); }

.older__button {
  min-height: 48px; margin-bottom: 10px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 15px; color: var(--rose-deep);
}
.older__button:hover { box-shadow: inset 0 0 0 1.5px var(--rose); }

/* ─ 말풍선: 그 = 와시 편지지 · 나 = 블러시 ─ */
.bubble { max-width: min(80%, 560px); }
.bubble__text {
  padding: 12px 18px; border-radius: 20px 20px 20px 6px; font-size: 17px; line-height: 1.75; color: var(--ink);
  background-color: var(--card); background-image: var(--washi);
  box-shadow: 0 4px 14px -10px rgba(120,60,70,.35), inset 0 0 0 1px rgba(226,201,196,.9);
}
.bubble--mine .bubble__text {
  color: var(--ink); border-radius: 20px 20px 6px 20px;
  background: linear-gradient(180deg, #fbe6ea, var(--blush-2));
  box-shadow: 0 4px 14px -10px rgba(143,43,77,.4), inset 0 0 0 1px rgba(178,58,98,.18);
}
.bubble__text--other { color: var(--muted); }
.bubble__time { margin-top: 4px; padding: 0 6px; font-size: 15px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.bubble__play { min-width: 56px; min-height: 44px; margin-top: 6px; padding: 0 16px; font-size: 15px; background: var(--rose); }
.bubble__play:hover:not(:disabled) { background: var(--rose-deep); }
.bubble__emoticon { width: 128px; }

/* 묶음: 같은 사람이 잇따라 보낸 말풍선은 붙이고, 첫 장(is-lead)에만 그의 얼굴과 편지 꼬리 */
.bubbles { gap: 6px; }
.bubble.is-lead { margin-top: 8px; }
.bubble:not(.bubble--mine) { position: relative; padding-left: 46px; max-width: min(88%, 606px); }
.bubble.is-lead:not(.bubble--mine)::before {
  content: ""; position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--his-photo, none) 50% 25% / cover no-repeat, var(--blush);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--petal);
}
.bubble__text { position: relative; border-radius: 20px; }
.bubble--mine .bubble__text { border-radius: 20px; }
.bubble.is-lead:not(.bubble--mine) .bubble__text { border-top-left-radius: 4px; }
.bubble.is-lead:not(.bubble--mine) .bubble__text::before {
  content: ""; position: absolute; left: -7px; top: 0; width: 8px; height: 12px;
  background: var(--card); clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.bubble--mine.is-lead .bubble__text { border-top-right-radius: 4px; }
.bubble--mine.is-lead .bubble__text::before {
  content: ""; position: absolute; right: -7px; top: 0; width: 8px; height: 12px;
  background: #fbe6ea; clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 사진·시크릿 사진 카드 */
.photo, .secret { width: 208px; gap: 8px; }
.photo__img { border-radius: 16px; background: var(--blush); box-shadow: 0 6px 16px -10px rgba(120,60,70,.45); }
.photo__card, .secret__card {
  gap: 8px; padding: 22px 14px; border: 0; border-radius: 16px;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: 0 4px 14px -10px rgba(120,60,70,.35), inset 0 0 0 1px var(--line-2);
}
.photo__card:hover:not(.photo__card--locked) { box-shadow: 0 8px 20px -10px rgba(120,60,70,.45), inset 0 0 0 1.5px var(--rose); }
.photo__card--locked { box-shadow: none; border: 1.5px dashed var(--line-2); background-image: none; background-color: rgba(255,253,250,.7); }
.secret__card {
  background-image: var(--washi), linear-gradient(180deg, #fbe9eb, #fff8f7);
  box-shadow: 0 6px 16px -10px rgba(143,43,77,.45), inset 0 0 0 1.5px rgba(178,58,98,.35);
}
.photo__label { font-size: 16px; font-weight: 700; color: var(--ink); }
.photo__hint { font-size: 15px; line-height: 1.5; color: var(--muted); }
.photo__caption { font-size: 15px; line-height: 1.6; color: var(--muted); }
.secret__confirm { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.photo .linkish, .secret .linkish { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; font-size: 15px; }
.secret .btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; border-radius: var(--radius-pill); }

/* 통화 결과·열람 안내 — 가운데 한 줄 */
.notice-line {
  max-width: 92%; padding: 6px 16px; border-radius: var(--radius-pill);
  background: rgba(255,253,250,.85); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); font-size: 15px; line-height: 1.6;
}

/* 입력 중 — 그의 손글씨 한 줄 */
.typing { margin: 2px 0 0; padding: 6px 4px; font-family: var(--font-hand); font-size: 16px; font-weight: 600; color: var(--rose-deep); }
.typing__dots { align-items: center; gap: 5px; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--blush); }
.typing__dots i { background: var(--rose); }

/* ─ 입력창 ─ */
.composer {
  gap: 6px; padding: 8px var(--gap) calc(8px + env(safe-area-inset-bottom));
  padding-left: max(var(--gap), env(safe-area-inset-left)); padding-right: max(var(--gap), env(safe-area-inset-right));
  background-color: rgba(255,253,250,.97); background-image: var(--washi);
  border-top: 1px solid var(--line-2); box-shadow: 0 -10px 24px -20px rgba(120,50,70,.45);
}
.composer__input {
  min-width: 0; min-height: 48px; padding: 11px 14px; border: 0; border-radius: 24px; line-height: 1.5;
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.composer__input::placeholder { color: #806a73; }
.composer__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 4px rgba(178,58,98,.12); }
.composer__photo { width: 46px; min-height: 46px; height: 46px; margin-bottom: 1px; border: 0; padding: 0; background: var(--blush); color: var(--rose-deep); }
.composer__photo:hover { background: var(--blush-2); }
.composer__photo:focus-within { outline: 3px solid var(--rose); outline-offset: 2px; }
.composer__photo svg { width: 24px; height: 24px; }
.composer__send {
  min-height: 48px; padding: 0 16px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(180deg, #bd4169, var(--rose) 55%, #a33459);
  box-shadow: 0 8px 18px -10px rgba(143,43,77,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.composer__send:hover { background: var(--rose-deep); }
.composer__send:disabled { opacity: .6; cursor: default; }
.stamps, .composer__error { bottom: calc(72px + env(safe-area-inset-bottom)); }
.stamps {
  background-color: var(--card); background-image: var(--washi);
  border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 24px -18px rgba(120,50,70,.45);
}
.stamps__item { border-radius: 12px; }
.stamps__item:hover { background: rgba(248,230,228,.7); }
body.p-room .app { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) {
  body.p-room .app { padding-bottom: 96px; }
  .composer, .stamps { border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }
}
@media (min-width: 1080px) {
  body.p-room .app { padding-bottom: 104px; }
  /* 입력창을 대화 컬럼(.room-main)과 정확히 맞춘다 — .app 좌우 패딩(32px)만큼 안쪽으로 */
  body.p-room .composer,
  body.p-room .stamps {
    left: calc(50% - var(--app-max) / 2 + var(--side-w) + var(--side-gap) + 32px);
    width: calc(var(--app-max) - var(--side-w) - var(--side-gap) - 64px);
    border-radius: 20px 20px 0 0;
  }
  body.p-room .composer__error {
    left: calc(50% - var(--app-max) / 2 + var(--side-w) + var(--side-gap) + 32px);
    width: calc(var(--app-max) - var(--side-w) - var(--side-gap) - 64px);
  }
}

/* ─ 데스크톱 좌측 캐릭터 카드 ─ */
.room-side__card { background-color: var(--card); background-image: var(--washi); border: 0; box-shadow: var(--shadow-md), inset 0 0 0 1px var(--line); }
.room-side__photo { width: 104px; height: 104px; box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--petal), 0 10px 22px -10px rgba(120,50,70,.45); margin-bottom: 16px; }
.room-side__name { font-size: 21px; font-weight: 600; letter-spacing: 0; flex-wrap: wrap; }
.room-side__online { font-size: 15px; font-weight: 500; color: var(--green); }
.room-side__online .card__dot { width: 10px; height: 10px; background: var(--green-dot); }
.room-side__actions .btn { min-height: 48px; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.room-side__profile { min-height: 48px; font-size: 15px; }
.room-side__profile:hover { color: var(--rose-deep); }

/* ─ 통화 화면: 밤의 편지(플럼) ─ */
body.p-call { background: var(--plum); color: var(--on-plum); }
body.p-call .topbar { color: var(--on-plum); }
body.p-call .topbar__back { color: var(--on-plum); }
.call__video { background: var(--plum); }
.call__scrim { background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(90,49,64,.9) 60%, var(--plum) 100%); }
.notice-ai--call {
  padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.6; color: var(--on-plum);
  background: rgba(40,22,30,.62); box-shadow: inset 0 0 0 1px rgba(230,204,154,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.call__avatar { width: 80px; height: 80px; border: 3px solid #e6cc9a; }
.call__name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: .02em; color: var(--on-plum); }
.call__state { color: #e6cc9a; font-size: 16px; }
.call__caption { font-size: 16px; line-height: 1.6; color: var(--on-plum); }
.call__rate { font-size: 15px; color: rgba(251,241,234,.82); }
.call__hint { font-size: 15px; line-height: 1.6; color: rgba(251,241,234,.78); }
.call__terms { background: rgba(40,22,30,.62); border-color: rgba(230,204,154,.32); border-radius: 18px; }
.call__terms-title { font-family: var(--font-serif); font-size: 18px; color: var(--on-plum); }
.call__terms-list { font-size: 15px; color: rgba(251,241,234,.94); }
.call__terms-list li:first-child { color: #fff; }
.call__back { background: rgba(251,241,234,.16); color: var(--on-plum); min-height: 48px; }
.call__back:hover { color: #fff; background: rgba(251,241,234,.24); }
.call__button { font-size: 15px; color: var(--on-plum); }
.call__icon { width: 60px; height: 60px; background: rgba(251,241,234,.14); box-shadow: inset 0 0 0 1px rgba(230,204,154,.3); }
.call__button.is-on .call__icon { background: var(--on-plum); color: var(--plum); }
.call__button--end .call__icon { background: #d33a4a; box-shadow: 0 8px 20px -8px rgba(211,58,74,.7); }
@keyframes ks-call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(230,204,154,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(230,204,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,204,154,0); }
}
@media (min-width: 600px) { body.p-call { background: var(--plum); } }
/* 상대를 못 불러온 오류 줄이 떠 있는 헤더 밑에 깔리지 않게 */
body.p-call .app > .msg.alert { margin: 72px var(--gap) 0; }

/* ─ 움직임: calm 이 아닐 때만(head.php 가 OS reduced-motion 도 calm 으로 만든다).
     끝 상태가 곧 보이는 상태라 JS·애니메이션이 없어도 숨는 것이 없다 ─ */
html:not(.calm) .room__seal { animation: ks-sealpop .7s var(--ease) .25s both; }
html:not(.calm) .chatlist.is-live .room__seal { animation: none; }   /* 폴링으로 갈아끼울 때마다 다시 튀지 않게 */
html:not(.calm) .chat-head__letter { animation: ks-posting 1.4s var(--ease) .5s both; }
html:not(.calm) .chat-empty__env { animation: ks-floaty 6s ease-in-out 3; }
html:not(.calm) .bubble.is-new, html:not(.calm) .notice-line.is-new { animation: ks-rise .45s var(--ease) both; }
html:not(.calm) .call__avatar { animation: ks-call-pulse 2.4s ease-out infinite; }
@keyframes ks-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.calm .chat-head__letter { opacity: 0; }
html.calm .rooms .room, html.calm .room__flap, html.calm .chat-seg__ind { transition: none; }
html.calm .rooms .room:hover { transform: none; }
html.calm .rooms .room.is-unread:hover .room__flap { transform: none; }
/* ── /B: 대화 ── */

/* ── B: 마이·계정·인증·문서 (my/* · store · login · signup · find · report · terms) ── */
/* 범위: 마이(p-my)·마이 하위(p-acct — partials/my_head.php 가 붙인다)·스토어·신고(p-report)·
   인증(.auth)·문서(.doc)·모달·폼 메시지·푸시 알약. 위의 옛 규칙을 덮어쓴다. */

/* 선 아이콘 (마크업의 <svg class="ico">) */
.myprof .ico, .coincard .ico, .menu .ico, .logout .ico, .store-note .ico,
.alist .ico, .push-pill .ico, .answer__mark .ico, .comfort .ico {
  width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── 폼 메시지 · 힌트 (전 화면 공통 — 글자 바닥 15px) ── */
.msg, .alert { padding: 12px 16px; border-radius: var(--radius); font-size: 16px; line-height: 1.7; }
.msg.alert, .alert { background: #fbecec; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(179,38,30,.18); }
.msg.notice { background: #eaf4ee; color: var(--green); box-shadow: inset 0 0 0 1px rgba(47,122,85,.2); }
.hint { font-size: 15px; line-height: 1.7; color: var(--muted); }
.result {
  padding: 16px 18px; border-radius: var(--radius); font-size: 17px; line-height: 1.7;
  background: var(--blush); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
}
.empty { font-size: 16px; }

/* ── 입력 · 선택 (계정·인증 화면) ── */
.field { gap: 8px; }
.field__label { font-size: 16px; color: var(--ink); }
.field .hint { margin-top: -2px; }
.field__input { font-size: 17px; }                 /* iOS 확대 방지(≥16px) */
select.field__input {
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f2b4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9.5 6 6 6-6'/></svg>") no-repeat right 14px center / 20px;
  padding-right: 44px;
}
.choices legend.field__label, .choices--wrap legend {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--ink); margin-bottom: 6px; padding: 0;
}
.check { min-height: 48px; gap: 12px; padding: 8px 0; font-size: 17px; line-height: 1.6; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--rose); cursor: pointer; }
.choices .check + .check { border-top: 1px solid var(--line); }
.check__doc { min-width: 48px; min-height: 48px; color: var(--rose); font-size: 24px; border-radius: 12px; }
.check__doc:hover { background: var(--blush); color: var(--rose-deep); }
/* 스타일 칩 (프로필 편집) */
.chip span {
  min-height: 48px; padding: 0 16px; font-size: 16px; border: 0; border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background .38s var(--ease), color .38s var(--ease), box-shadow .38s var(--ease);
}
.chip input:checked + span { background: var(--rose-deep); color: #fff; box-shadow: none; font-weight: 700; }
.chip input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 3px; }
.choices--wrap legend .hint { font-family: var(--font); font-size: 15px; letter-spacing: .02em; }

/* 버튼 — 수식어 없는 .btn(인증코드 보내기 등)은 편지지 + 로즈 잉크 */
:is(.p-acct, .auth) .btn:not([class*="btn--"]) {
  background: var(--card); color: var(--rose-deep);
  box-shadow: inset 0 0 0 1.5px var(--rose), var(--shadow-sm);
}
:is(.p-acct, .auth) .btn:not([class*="btn--"]):hover { background: #fdf1f2; }
.btn--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn--danger { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--danger); color: #fff; }
.btn--danger:hover { background: #962019; color: #fff; }
.btn--sm { min-height: 48px; padding: 10px 18px; font-size: 16px; border-radius: var(--radius-pill); }

/* 되돌릴 수 없는 일 확인 칸 */
.confirm { gap: 10px; padding: 14px 16px; border: 0; border-radius: var(--radius); background: #fff7f6; box-shadow: inset 0 0 0 1.5px rgba(179,38,30,.28); }
.confirm__text { font-size: 16px; line-height: 1.7; color: var(--ink); }
.confirm .linkish { min-height: 48px; font-size: 16px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.photos__item .confirm { padding: 10px; background: rgba(255,253,250,.96); box-shadow: none; border-radius: 14px; }
.photos__item .confirm__text { font-size: 15px; line-height: 1.5; }
.photos__item .confirm .btn--sm { padding: 8px 10px; }

/* ── 마이 하위 공통 (p-acct) — 종이 위 편지지 카드 ── */
.p-acct .app { display: flex; flex-direction: column; gap: 18px; }
.p-acct .app > * { margin-top: 0; margin-bottom: 0; }
.p-acct .form, .p-acct [data-island="photos"] {
  background-color: var(--card); background-image: var(--washi);
  border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 22px 20px; gap: 18px;
}
.p-acct [data-island="photos"] { display: flex; flex-direction: column; gap: 16px; }
.p-acct [data-island="photos"] > * { margin: 0; }
.p-acct .form > .btn, .p-acct .form [data-role="code-area"] .btn { width: 100%; }
.p-acct .app > .btn { align-self: stretch; }
.p-acct .form .msg { margin: 0; }
.p-acct .app > .hint { padding: 0 4px; }
.section-title, body.nav-my .section-title {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 0 4px;
  font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
}
.section-title::before, .mgroup__title::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
}
/* 프로필 편집: 이름(바꿀 수 없음) */
.p-acct .form .me__name { font-family: var(--font-serif); font-size: 24px; font-weight: 600; letter-spacing: 0; }
.p-acct .form .me__name .detail__age { font-family: var(--font); font-size: 17px; margin-left: 6px; }
/* 프로필 편집 상단의 "사진 관리" 바로가기(목록 밖 단독 링크) */
.p-acct .app > .menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 18px;
  background: var(--card) var(--washi); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.p-acct .app > .menu__item .menu__arrow { font-size: 24px; color: var(--rose); }
/* 탈퇴 — 위험은 분명히: 경고 카드 + 붉은 테 버튼 */
[data-island="withdraw"] [data-role="ask"] { color: var(--danger); box-shadow: inset 0 0 0 1.5px rgba(179,38,30,.55), var(--shadow-sm); }
[data-island="withdraw"] [data-role="ask"]:hover { background: #fff5f4; color: #962019; }
.p-acct .app > .msg.alert { padding: 16px 18px; font-weight: 500; }

/* 목록(차단·세션·문의) — 편지지 한 장에 줄 */
.alist { list-style: none; margin: 0; padding: 6px; background: var(--card) var(--washi); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.alist__row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 12px; }
.alist__row + .alist__row { border-top: 1px solid var(--line); }
.alist__photo { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; background: var(--blush); box-shadow: 0 0 0 3px #fff, 0 6px 14px -8px rgba(143,43,77,.5); }
.alist__tile { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--blush); color: var(--rose-deep); }
.alist__body { flex: 1; min-width: 0; }
.alist__name { margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.5; overflow-wrap: anywhere; }
.alist__meta { margin: 2px 0 0; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.alist__row .btn { flex: none; min-height: 48px; padding: 10px 20px; font-size: 16px; }
/* 문의 — Q/A */
.alist--qa .alist__row { align-items: flex-start; padding: 16px 12px; }
.alist--qa .alist__name { font-family: var(--font); font-size: 17px; font-weight: 500; line-height: 1.7; }
.qa__q { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blush); color: var(--rose-deep); font-family: var(--font-serif); font-weight: 600; font-size: 17px; }
.qa__state { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin-left: 6px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; background: var(--bg-soft); color: var(--muted); }
.qa__state--done { background: #eaf4ee; color: var(--green); }
.answer, body.nav-my .answer {
  position: relative; margin: 12px 0 0; padding: 12px 14px 12px 44px; border-radius: 14px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--font-hand); font-size: 17px; line-height: 1.8; color: var(--ink);
}
.answer::before { content: "A"; position: absolute; left: 14px; top: 10px; font-family: var(--font-serif); font-weight: 600; color: var(--rose); }

/* ── 사진 관리 · 구매한 사진 · 가입 사진 ── */
.photos { gap: 12px; }
.photos__item img { border-radius: 14px; background: var(--blush); box-shadow: 0 0 0 3px #fff, 0 10px 20px -12px rgba(110,40,60,.45); }
.photos__cover {
  top: 8px; left: 8px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--rose-deep); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.6;
  box-shadow: 0 2px 6px rgba(59,40,48,.3);
}
/* 누르는 칸은 48px, 보이는 동그라미는 34px */
.photos__remove { top: 0; right: 0; width: 48px; height: 48px; background: none; font-size: 0; }
.photos__remove::before {
  content: "×"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(59,40,48,.7); color: #fff; font-size: 22px; line-height: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.photos__remove:hover::before { background: var(--danger); }
.photos__move { left: 6px; right: 6px; bottom: 6px; gap: 4px; }
.photos__arrow {
  min-height: 48px; border-radius: 12px; background: rgba(255,253,250,.94); color: var(--rose-deep);
  font-size: 26px; font-weight: 500; box-shadow: 0 2px 8px rgba(59,40,48,.25);
}
.photos__arrow:first-child, .photos__arrow:last-child { border-radius: 12px; }
.photos__arrow:hover:not(:disabled) { background: var(--rose); color: #fff; }
.photos__arrow:disabled { opacity: .35; }
.photos__actions { margin: 0; flex-wrap: wrap; }
.photos__actions .btn { min-width: 0; white-space: nowrap; }
/* 폰: 두 줄 격자(세 줄이면 한 장이 100px 이라 화살표·배지가 사진을 덮는다), 버튼은 한 줄씩 */
@media (max-width: 599px) {
  .p-acct .photos, .auth .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos__actions .btn, .photos__actions .btn--primary { flex: 1 1 100%; }
}
/* 구매한 사진 — 폴라로이드처럼 */
.photos[data-island="album"] .photos__item { padding: 6px 6px 18px; background: #fff; border-radius: 6px; box-shadow: 0 10px 22px -12px rgba(110,40,60,.45); aspect-ratio: auto; }
.photos[data-island="album"] .photos__item:nth-child(odd) { transform: rotate(-1.2deg); }
.photos[data-island="album"] .photos__item:nth-child(even) { transform: rotate(1deg); }
.photos[data-island="album"] .photos__item img { aspect-ratio: 3 / 4; height: auto; border-radius: 2px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .photos[data-island="album"] .photos__item { transform: none !important; } }

/* ── 마이페이지 (p-my) ── */
.mycols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.mycols__l, .mycols__r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; align-content: start; }
.myprof {
  position: relative; overflow: hidden; isolation: isolate; padding: 24px 20px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #f9d9e0, #fbe9dc, #f1d2e0, #ecdcf0, #fde3da, #f9d9e0) 0 50% / 300% 300%;
  animation: myprof-aurora 30s var(--ease) infinite alternate; box-shadow: var(--shadow-sm);
}
.myprof::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--washi), linear-gradient(180deg, rgba(255,253,250,.15), rgba(255,253,250,.4)); }
@keyframes myprof-aurora { to { background-position: 100% 50%; } }
.myprof__row { display: flex; align-items: center; gap: 18px; }
.myprof__av {
  width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #f6d3da 70%);
  box-shadow: 0 0 0 4px #fff, 0 10px 24px -10px rgba(143,43,77,.5);
  font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--rose-deep);
}
.myprof__av img { width: 100%; height: 100%; object-fit: cover; }
.myprof__text { min-width: 0; }
.myprof__name { margin: 0; font-family: var(--font-serif); font-size: 25px; font-weight: 600; letter-spacing: 0; line-height: 1.4; overflow-wrap: anywhere; }
.myprof__name small { font-size: 16px; font-weight: 500; margin-left: 2px; }
.myprof__mail { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.myprof__mail .ico { width: 18px; height: 18px; color: var(--green); }
.myprof__edit { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--rose-deep); text-decoration: none; }
.myprof__edit .ico { width: 18px; height: 18px; }
.myprof__edit:hover { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 4px; }

.coincard {
  position: relative; overflow: hidden; padding: 22px 20px 20px; border-radius: var(--radius-lg);
  background: var(--card) var(--washi); box-shadow: var(--shadow-md);
}
.coincard__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 500; color: var(--muted); }
.coincard__label .ico { color: var(--gold-ink); }
.coincard__amt { margin: 6px 0 2px; font-family: var(--font-serif); font-weight: 600; font-size: 46px; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.coincard__amt small { font-family: var(--font); font-size: 18px; font-weight: 500; margin-left: 8px; color: var(--muted); letter-spacing: .04em; }
/* 금빛이 한 번 스친다. 숫자는 처음부터 최종값(세지 않는다) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .coincard__num {
    background: linear-gradient(100deg, var(--ink) 40%, #b88a4a 46%, #e8c98f 50%, #b88a4a 54%, var(--ink) 60%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: coin-gild 1.6s var(--ease) .4s 1 both;
  }
}
@keyframes coin-gild { from { background-position: 100% 0; } to { background-position: 0 0; } }
.coincard__bonus { margin: 0; font-size: 15px; color: var(--gold-ink); }
.coincard__cta { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 16px; text-decoration: none; }
.coincard__note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink); }
.coincard__note .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--green); }

.mgroup { margin: 0; min-width: 0; }
.mgroup__title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 4px; font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.p-my .menu {
  margin: 0; padding: 6px; border: 0; border-radius: var(--radius-md);
  background: var(--card) var(--washi); box-shadow: var(--shadow-md);
}
.p-my .menu li + li { border-top: 1px solid var(--line); }
.p-my .menu__item {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: 60px; padding: 8px 10px 8px 12px;
  border: 0; border-radius: 14px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: background .38s var(--ease);
}
.p-my .menu__item:hover { background: #fdf1f2; color: var(--ink); }
.menu__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--blush); color: var(--rose-deep); transition: background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease); }
.p-my .menu__item:hover .menu__icon { background: var(--rose); color: #fff; transform: rotate(-6deg); }
.menu__label { flex: 1; min-width: 0; }
.menu__val { flex: none; font-size: 15px; color: var(--muted); }
.p-my .menu__arrow { flex: none; display: grid; place-items: center; color: #a8929a; transition: transform .38s var(--ease), color .38s var(--ease); }
.p-my .menu__arrow .ico { width: 20px; height: 20px; }
.p-my .menu__item:hover .menu__arrow { transform: translateX(3px); color: var(--rose); }
.p-my .menu--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.p-my .menu--quiet .menu__item { color: var(--muted); font-size: 16px; }
.p-my .menu--quiet .menu__icon { background: var(--paper-2); color: var(--muted); }
.p-my .menu--quiet .menu__item:hover .menu__icon { background: var(--muted); color: #fff; }
.p-my .logout { margin: 0; }
.p-my .logout .btn { width: 100%; }
.p-my .company-info { margin: 0; padding: 16px; border-radius: var(--radius); background: rgba(245,235,226,.75); font-size: 15px; line-height: 1.9; color: var(--muted); overflow-wrap: anywhere; }
/* 아바타 모서리의 벚꽃 · 이름 */
.myprof__avwrap { position: relative; flex: none; }
.myprof__bloom { position: absolute; right: -6px; bottom: -4px; width: 32px; height: 32px; pointer-events: none; }
/* 통계 세 칸 (360px 에서도 넘치지 않게 minmax(0,1fr), 이름은 줄바꿈 허용) */
.mystats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.mystats li { padding: 12px 4px; border-radius: 16px; background: rgba(255,253,250,.85); text-align: center; box-shadow: inset 0 0 0 1px rgba(226,201,196,.6); }
.mystats b { display: block; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--rose-deep); font-variant-numeric: tabular-nums; }
.mystats b small { font-size: 15px; margin-left: 2px; }
.mystats li > span[aria-hidden] { display: block; font-size: 15px; line-height: 1.4; color: var(--ink); word-break: auto-phrase; overflow-wrap: anywhere; }
/* 코인 카드 — 제목(h2)은 본문 글꼴, 모서리 벚꽃, 버튼 아이콘 */
.coincard__label { font-family: var(--font); letter-spacing: .02em; }
.coincard__deco { position: absolute; right: 16px; top: 14px; width: 60px; height: 60px; opacity: .9; pointer-events: none; }
.coincard__cta { gap: 8px; }
.coincard__cta .ico { width: 20px; height: 20px; }

/* 읽기 설정 */
.comfort { padding: 20px; border-radius: var(--radius-lg); background: var(--card) var(--washi); box-shadow: var(--shadow-md); }
.comfort[hidden] { display: none; }
.comfort h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.comfort h2 .ico { color: var(--rose); }
.comfort__lead { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.comfort__row { margin-top: 14px; }
.comfort__label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; color: var(--ink); }
.comfort__label small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); }
.comfort__row--season { padding-top: 12px; border-top: 1px solid var(--line); }
.fsopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fsopts button, .seasons button {
  min-height: 52px; border: 0; border-radius: 14px; cursor: pointer; background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); font: inherit; font-weight: 500; line-height: 1.1;
  transition: background .38s var(--ease), color .38s var(--ease);
}
.fsopts button:nth-child(1) { font-size: 16px; } .fsopts button:nth-child(2) { font-size: 19px; } .fsopts button:nth-child(3) { font-size: 22px; }
.seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seasons button { min-height: 52px; padding: 6px 8px; font-size: 16px; line-height: 1.3; }
:is(.fsopts, .seasons) button:hover { background: #fdf1f2; }
:is(.fsopts, .seasons) button[aria-pressed="true"] { background: var(--rose-deep); color: #fff; box-shadow: none; font-weight: 700; }
:is(.fsopts, .seasons) button:focus-visible, .switch:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
/* 스위치 (role="switch") */
.switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px;
  padding: 12px 4px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); border-radius: 0;
}
.switch__text { flex: 1; min-width: 0; }
.switch small { display: block; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.switch__v { flex: none; min-width: 2.5em; text-align: right; font-size: 15px; font-weight: 700; color: var(--rose-deep); }
.switch__t { position: relative; flex: none; width: 56px; height: 32px; border-radius: 16px; background: #cdb8be; box-shadow: inset 0 0 0 1.5px #9c8189; transition: background .38s var(--ease); }
.switch__t::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .38s var(--ease); }
.switch[aria-checked="true"] .switch__t { background: var(--rose-deep); box-shadow: none; }
.switch[aria-checked="true"] .switch__t::after { transform: translateX(24px); }
.switch:disabled { cursor: default; }
.switch:disabled .switch__t { opacity: .7; }

/* 섹션 머리 (필기체 아이브로 + 세리프 제목 + 로즈 링크) */
.mysec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mysec-head > div { min-width: 0; }
.mysec-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.45; letter-spacing: .04em; word-break: keep-all; color: var(--ink); }
.mysec-head p { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; word-break: auto-phrase; }
.mysec-head__more { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; padding: 0 4px; flex: none; font-size: 16px; font-weight: 500; color: var(--rose); white-space: nowrap; text-decoration: none; }
.mysec-head__more .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .38s var(--ease); }
.mysec-head__more:hover { color: var(--rose-deep); }
.mysec-head__more:hover .ico { transform: translateX(4px); }

/* 상대의 우표첩 — 와시테이프 · 우표 테두리 · 소인 */
.album {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; margin: 0; padding: 18px 14px 16px; list-style: none;
  border-radius: var(--radius-md); background: var(--card) var(--washi); box-shadow: var(--shadow-md);
}
.stampc { position: relative; min-width: 0; text-align: center; }
.stampc a { display: block; border-radius: 12px; color: var(--ink); text-decoration: none; }
.stampc a:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; }
.stampc__top { position: relative; display: block; }
.stampc__ph {
  --h: 6px; position: relative; display: block; width: 100%; aspect-ratio: 5 / 6; background: #fffdf9; padding: var(--h);
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box;
          mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box;
  filter: drop-shadow(0 6px 10px rgba(110,40,60,.2)); transition: transform .38s var(--ease);
}
.stampc__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; background: var(--blush); }
.stampc:nth-child(odd) .stampc__ph { transform: rotate(-2deg); }
.stampc:nth-child(even) .stampc__ph { transform: rotate(1.5deg); }
.stampc a:hover .stampc__ph { transform: rotate(0) translateY(-4px); }
.stampc__pm { position: absolute; z-index: 2; right: -12px; bottom: -14px; width: 58px; height: 58px; color: rgba(143,43,77,.62); transform: rotate(-16deg); pointer-events: none; }
.stampc .tape { position: absolute; z-index: 3; top: -4px; width: 36px; height: 14px; background: rgba(234,200,160,.6); pointer-events: none; }
.stampc .tape--a { left: -8px; transform: rotate(-38deg); }
.stampc .tape--b { right: -8px; transform: rotate(38deg); }
/* 붙이기: my-motion.js 가 화면 아래의 첩에만 is-armed 를 붙인다 */
.album.is-armed .tape { opacity: 0; transform: translateY(-10px) rotate(-38deg) scale(1.25); }
.album.is-armed .tape--b { transform: translateY(-10px) rotate(38deg) scale(1.25); }
.album.is-armed.in .tape { opacity: 1; transform: rotate(-38deg); transition: transform .5s var(--ease), opacity .3s; transition-delay: calc(var(--d, 0) * 110ms + 250ms); }
.album.is-armed.in .tape--b { transform: rotate(38deg); }
.stampc__star { position: absolute; z-index: 4; top: -10px; right: -6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-ink); color: #fff; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.stampc__name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.stampc__name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.stampc__name .badge--ai { height: 22px; padding: 0 6px; }
.stampc__date { display: block; margin-top: 2px; font-family: var(--font-hand); font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 959px) { .album > .stampc:nth-child(n+10) { display: none; } }   /* 폰은 세 줄(9장)까지 */

/* 메뉴 묶음 · 기타 */
.menus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.menus > * { min-width: 0; }
.quiet-note { margin: 8px 4px 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.p-my .mgroup .logout { margin-top: 18px; }
.p-my .company-info h2 { margin: 0 0 2px; font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.p-my .company-info p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .myprof { animation: none; }
  .coincard__num { animation: none; }
  .menu__icon, .p-my .menu__arrow { transition: none; }
}
@media (min-width: 960px) {
  body.p-my { --app-max: 1180px; }
  body.p-my .app, body.p-my .topbar { max-width: 1180px; }
  .mycols { grid-template-columns: 400px minmax(0, 1fr); gap: 40px; align-items: start; }
  .menus { grid-template-columns: 1fr 1fr; align-items: start; }
  .album { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 왼쪽 칸(프로필·코인·읽기 설정)이 화면에 다 들어올 때만 붙여 둔다 — 아니면 읽기 설정 아래가 끝까지 가려진다 */
@media (min-width: 960px) and (min-height: 1080px) { .mycols__l { position: sticky; top: 100px; } }
/* calm — 끝 상태만 */
html.calm .myprof, html.calm .coincard__num { animation: none; }
html.calm .album .tape { opacity: 1 !important; }

/* ── 코인 스토어 ── */
.p-store .coincard { text-align: left; }
.store-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--radius);
  background: var(--blush); color: var(--ink); font-size: 16px; line-height: 1.7; box-shadow: inset 0 0 0 1px var(--line-2);
}
.store-note .ico { margin-top: 3px; color: var(--rose-deep); }
.store-head { margin: 8px 0 0; padding: 0 4px; }
.store-head h2 { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.store, .p-store .store { margin: 0; gap: 14px; grid-template-columns: minmax(0, 1fr); }   /* 640 컬럼에 두 줄은 비좁다 */
.store__item {
  position: relative; gap: 14px; min-height: 88px; padding: 18px 20px; border: 0; border-radius: var(--radius-md);
  background: var(--card) var(--washi); box-shadow: var(--shadow-md);
}
.store__item > div { min-width: 0; }
.store__amount { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.store__tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--gold-ink); }
.store__bonus { margin: 4px 0 0; font-size: 15px; font-weight: 500; color: var(--gold-ink); }
.store__price { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--rose-deep); font-variant-numeric: tabular-nums; }

/* ── 인증 (로그인 · 가입 · 찾기) — 와시 위 가운데 편지지 ── */
.auth {
  width: min(440px, calc(100% - 24px)); margin: 16px auto 32px; padding: 20px 20px 28px;
  background: var(--card) var(--washi); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.auth { position: relative; margin-top: 36px; }
.auth::before {                                  /* 봉랍 한 점 — 편지를 여는 자리 */
  content: ""; position: absolute; left: 50%; top: -22px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8546f, var(--wax) 60%, var(--rose-deep));
  box-shadow: 0 0 0 4px var(--card), 0 8px 16px -8px rgba(143,43,77,.7); pointer-events: none;
}
.auth__home { display: inline-flex; min-height: 48px; margin: 0 0 4px -6px; padding: 0 6px; font-size: 16px; color: var(--muted); border-radius: 10px; }
.auth__brand { margin: 4px 0 26px; font-size: 17px; font-weight: 500; letter-spacing: .24em; color: var(--ink); }
.auth__brand::before { font-size: 46px; color: var(--rose); letter-spacing: 0; margin-bottom: 8px; font-weight: 400; }
.auth__brand::after { content: ""; display: block; width: 56px; height: 1px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.auth__form { gap: 18px; }
.auth__form > .btn, .auth .step > .btn, .auth [data-role="code-area"] > .btn, .auth [data-role="password-area"] > .btn { width: 100%; }
.auth__links { flex-wrap: wrap; justify-content: center; gap: 0 20px; margin-top: 4px; font-size: 16px; }
.auth__links a { min-height: 48px; color: var(--rose-deep); text-decoration: underline; text-decoration-color: rgba(178,58,98,.35); text-underline-offset: 5px; }
.auth > .auth__links { justify-content: center; margin-top: 16px; }
.auth [data-role="password-area"] { display: flex; flex-direction: column; gap: 18px; }
/* 찾기 — 알약형 세그먼트 탭 */
.tabs { gap: 4px; margin: 0 0 22px; padding: 4px; border: 0; border-radius: var(--radius-pill); background: var(--blush); }
.tabs__item {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border: 0;
  border-radius: var(--radius-pill); font-size: 16px; font-weight: 500; color: var(--muted); transition: background .38s var(--ease), color .38s var(--ease);
}
.tabs__item:hover { color: var(--rose-deep); }
.tabs__item.is-on { background: var(--card); color: var(--rose-deep); font-weight: 700; box-shadow: var(--shadow-sm); }
/* 가입 단계 — 번호 동그라미를 선으로 잇고, 지금 단계의 이름만 아래에 보인다
   (다섯 이름을 한 줄에 두면 360px 에서 15px 를 지킬 수 없다) */
.steps { counter-reset: step; position: relative; gap: 0; margin: 0 0 8px; padding: 0 0 34px; }
.steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 16px; height: 2px; background: var(--line-2); }
.steps__item {
  counter-increment: step; flex: 1; display: flex; justify-content: center;
  padding: 0; border: 0; font-size: 16px; color: var(--muted);
}
.steps__item::before {
  content: counter(step); position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted);
  font-family: var(--font-serif); font-size: 16px; font-weight: 600;
}
.steps__item.is-on { color: var(--rose-deep); border: 0; }
.steps__item.is-on::before { background: var(--rose-deep); color: #fff; box-shadow: 0 6px 14px -6px rgba(143,43,77,.7); }
/* 이름은 낭독기용으로 늘 남기고, 화면에는 지금 단계(마지막 is-on)의 것만 아래 줄에 */
.steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.steps__item.is-on:not(:has(+ .is-on)) .steps__label {
  left: 0; right: 0; bottom: 0; width: auto; height: auto; overflow: visible; clip-path: none;
  text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .06em; line-height: 1.6;
}
.auth .step { gap: 18px; }
.auth hr { margin: 0; border-top-color: var(--line-2); }
/* 전체 동의 — 한 장의 쪽지처럼 */
.check:has([data-role="agree-all"]) { padding: 10px 14px; border-radius: var(--radius); background: var(--blush); font-weight: 700; color: var(--ink); }
/* 가입 시 AI 고지 — 법적 고지. 눈에 띄게 둔다 */
.auth .notice-ai--block {
  position: relative; padding: 18px 18px 18px 20px; border-radius: var(--radius);
  background: #fff6f3; color: var(--ink); font-size: 16px; line-height: 1.8;
  box-shadow: inset 0 0 0 1.5px var(--petal-2);
}
.auth .notice-ai--block::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rose); }
.auth .notice-ai--block p { margin: 0; }
.auth .notice-ai__title { margin: 0 0 6px; font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--rose-deep); }
@media (min-width: 600px) {
  .auth { width: min(460px, 100%); margin-block: 48px; padding: 36px 40px 36px; }
}

/* ── 문서 (이용약관 · 개인정보) ── */
.doc__back { min-height: 48px; margin-bottom: 8px; font-size: 16px; color: var(--muted); }
.doc__back:hover { color: var(--rose-deep); }
.doc__body {
  border: 0; background: var(--card) var(--washi); box-shadow: var(--shadow-md); color: var(--ink); line-height: 1.9;
}
.doc__body h1 { font-size: 26px; font-weight: 600; letter-spacing: .04em; text-align: center; margin-bottom: 24px; }
.doc__body h1::before { content: "Koi Sonata"; display: block; font-family: var(--font-script); font-weight: 400; font-size: 26px; color: var(--rose); letter-spacing: 0; margin-bottom: 6px; }
.doc__body h1::after { content: ""; display: block; width: 56px; height: 1px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.doc__body h2 { font-size: 19px; font-weight: 600; letter-spacing: .02em; margin-top: 32px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.doc__body h3 { font-size: 17px; }
.doc__body p, .doc__body li { font-size: 16px; }
.doc__body strong { color: var(--rose-deep); }
.doc__draft { border: 0; background: #fbf3e4; box-shadow: inset 0 0 0 1px rgba(138,106,58,.35); color: #6b5220; font-size: 15px; }
.doc__meta { font-size: 15px; color: var(--muted); }

/* ── 모달 (무료 소진 가입 게이트) ── */
.modal { background: rgba(59,40,48,.5); }
.modal__box { position: relative; padding: 40px 26px 22px; background-color: var(--card); box-shadow: var(--shadow-lg); }
.modal__box::before {                            /* 봉랍 한 점 */
  content: ""; position: absolute; left: 50%; top: -22px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8546f, var(--wax) 60%, var(--rose-deep));
  box-shadow: 0 0 0 4px var(--card), 0 8px 16px -8px rgba(143,43,77,.7);
}
.modal__title { font-size: 22px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.modal__desc { font-size: 16px; line-height: 1.8; color: var(--ink); }
.modal__close { min-height: 48px; font-size: 16px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.modal__close:hover { color: var(--rose-deep); }

/* ── 웹 푸시 "通知をオンにする" 알약 (islands/push.js) ──
   모바일: 하단 탭바 바로 위, 닫기 가능. 데스크톱: 탭바가 위로 가므로 오른쪽 아래. */
.push-pill {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 2px; max-width: calc(100% - 24px); padding: 4px;
  border-radius: var(--radius-pill); background: rgba(255,253,250,.97); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-md);
  animation: push-pill-in .6s var(--ease) both;
}
.push-pill__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 12px; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--rose-deep); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.push-pill__go .ico { width: 20px; height: 20px; color: var(--rose); }
.push-pill__go:hover { background: #fdf1f2; }
.push-pill__x {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.push-pill__x:hover { background: var(--bg-soft); color: var(--ink); }
body.has-push-pill .app { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
body.p-room .push-pill, body.p-call .push-pill { display: none; }   /* 입력창·통화 컨트롤과 겹친다 */
@keyframes push-pill-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .push-pill { animation: none; } }
@media (min-width: 600px) {
  .push-pill { left: auto; right: 24px; bottom: 24px; transform: none; animation-name: push-pill-in-desk; }
  body.has-push-pill .app { padding-bottom: 96px; }
  @keyframes push-pill-in-desk { from { opacity: 0; transform: translateY(12px); } }
}

/* 빈 목록 안내 — 가운데 편지지 쪽지 */
.p-acct .app > .empty {
  margin: 0; padding: 28px 20px; text-align: center; border-radius: var(--radius-md);
  background: var(--card) var(--washi); box-shadow: var(--shadow-sm); color: var(--muted);
  font-family: var(--font-hand); font-size: 18px; line-height: 1.8;
}
/* 알림 설정 — 체크박스를 스위치 모양으로 (값·이름은 그대로, form-post 가 읽는다) */
.form[data-path="push_setting"] { gap: 0; }
.form[data-path="push_setting"] .check { justify-content: space-between; min-height: 60px; font-weight: 500; }
.form[data-path="push_setting"] .check + .check { border-top: 1px solid var(--line); }
.form[data-path="push_setting"] .check input {
  order: 2; flex: none; width: 56px; height: 32px; margin: 0; border-radius: 16px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: radial-gradient(circle 13px at 16px 50%, #fff 92%, transparent 100%), #cdb8be;
  box-shadow: inset 0 0 0 1.5px #9c8189; transition: background .38s var(--ease);   /* 테두리 3:1 이상 */
}
.form[data-path="push_setting"] .check input:checked {
  background: radial-gradient(circle 13px at 40px 50%, #fff 92%, transparent 100%), var(--rose-deep); box-shadow: none;
}
.form[data-path="push_setting"] .check input:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.form[data-path="push_setting"] .btn { margin-top: 18px; }

/* 신고 화면도 마이 하위와 같은 좁은 컬럼 */
@media (min-width: 600px) {
  body.p-report .app, body.p-report .topbar { max-width: 640px; }
}
/* ── /B: 마이·계정 ── */

/* ════ 디자인 B — chrome ════ */
/* 디자인 B — chrome 영역 (디자인 워크플로 작업 파일. 끝나면 app.css 로 합친다)
   시안 styles.css 의 .topbar/.tabbar/.foot/.btn/.notif/.coinchip 값을 그대로 옮긴다.
   브레이크포인트도 시안과 같다: 1023px 까지는 모바일 크롬(상단 제목 + 하단 탭바), 1024px 부터 데스크톱 헤더. */

/* ── 공통 프리미티브 ─────────────────────────────── */
body { font-size: var(--fs-body, 17px); line-height: 1.8; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 8px 30px; font-size: 18px; line-height: 1.5; text-decoration: none;
}
/* 선 아이콘 — 시안 .ico. 영역 파일이 크기만 따로 준다 (크기·선 없이 두면 검은 덩어리로 그려진다) */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico, .btn > svg { width: 20px; height: 20px; flex: none; }
.btn.btn--sm { min-height: 48px; padding: 6px 20px; font-size: 16px; letter-spacing: .04em; border-radius: var(--radius-pill, 999px); }
.btn--ghost { color: var(--rose-deep); }
.btn--ghost:hover { transform: translateY(-1px); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 상단 제목바 (모바일·태블릿) — 가운데 세리프 제목, 뒤로가기는 왼쪽 원형 ── */
.topbar { z-index: 40; }
body:not(.p-room):not(.p-call) .topbar {
  justify-content: center; min-height: 60px; padding: 8px 16px;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
body:not(.p-room):not(.p-call) .topbar:has(.topbar__back) { padding-left: 64px; padding-right: 64px; }
body:not(.p-room):not(.p-call):not(.nav-home) .topbar__title {
  font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.4; letter-spacing: .08em;
  text-align: center; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:not(.p-room):not(.p-call) .topbar__back {
  position: absolute; left: max(8px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; min-width: 0; min-height: 0; margin: 0;
  border-radius: 50%; color: var(--ink); text-decoration: none; transition: background .38s var(--ease), color .38s var(--ease);
}
body:not(.p-room):not(.p-call) .topbar__back:hover { background: rgba(242,210,214,.4); color: var(--rose-deep); }
.topbar__back svg { display: block; width: 24px; height: 24px; }
/* 홈 — 제목 대신 스크립트 워드마크 (app.css 의 ::before/::after). 줄 높이만 시안대로 */
body.nav-home .topbar__title { font-size: 0; line-height: 1; white-space: normal; overflow: visible; letter-spacing: 0; }
body.nav-home .topbar__title::before, body.nav-home .topbar__title::after { line-height: 1; }
/* 숨긴 제목 글자(font-size 0)도 플렉스 항목이라 gap 이 두 번 든다 — gap 대신 부제 위 4px 하나로 (시안 .brand gap 4px) */
body.nav-home .topbar__title { gap: 0; }
body.nav-home .topbar__title::after { margin-top: 4px; }
/* 글자 크게 — 탭 라벨처럼 제목도 한 단계씩 (시안 20px : 본문 17px 비율 유지) */
html[data-fs="l"] body:not(.p-room):not(.p-call):not(.nav-home) .topbar__title { font-size: 21px; }
html[data-fs="xl"] body:not(.p-room):not(.p-call):not(.nav-home) .topbar__title { font-size: 22px; }

/* /chat — 시안처럼 모바일에도 "チャット" 제목바를 보인다 (데스크톱은 아래에서 숨긴다) */
@media (max-width: 1023px) {
  body.nav-chat:not(.p-room) .topbar {
    position: sticky; top: 0; width: auto; height: auto; min-height: 60px; margin: 0; padding: 8px 16px;
    overflow: visible; clip-path: none; clip: auto; border-bottom: 1px solid rgba(226,201,196,.6);
    display: flex; align-items: center; justify-content: center;
  }
}

/* ── 하단 탭바 (모바일) — 시안 .tabbar/.tab 값 ── */
.tabbar__ind { padding: 0 8px; }
 /* 모바일 탭바만 — 아이콘 오른쪽 위에 얹는다. 데스크톱은 라벨 뒤 인라인(아래 ≥1024 블록) */
@media (max-width: 1023px) { .tabbar__item .tabbar__seal { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; } }
.tabbar__item:active .tabbar__icon { transform: scale(.9); }
.tabbar__icon { transition: transform .38s var(--ease); }
html[data-fs="l"] .tabbar__item { font-size: 17px; }
html[data-fs="xl"] .tabbar__item { font-size: 18px; }

/* ── 사이트 발 — 시안 .foot ── */
.site-foot { padding-top: 34px; text-align: center; word-break: auto-phrase; }
.site-foot__brand { margin: 0 0 10px; gap: 4px; }
.site-foot__script { font-size: 30px; line-height: 1; letter-spacing: 0; }
.site-foot__note { margin: 15px auto 0; font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 26em; }
/* 시안 .foot { margin-top:34px } — 본문 끝과 발 사이는 발의 34px 하나만 */
body:has(.site-foot) .app { padding-bottom: 0; }

/* ── 태블릿(600–1023) — 시안처럼 모바일 크롬을 유지한다. app.css 의 600px 데스크톱 헤더를 되돌린다 ── */
@media (min-width: 600px) and (max-width: 1023px) {
  .tabbar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 50; order: 5;
    width: auto; height: auto; display: flex; gap: 0; align-items: stretch;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,253,250,.94); backdrop-filter: blur(16px) saturate(1.3);
    border: 0; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(120,50,70,.35);
  }
  body.p-room .tabbar, body.p-call .tabbar { display: none; }
  .tabbar__brand, .tabbar__actions { display: none; }
  .tabbar__nav { display: grid; grid-template-columns: repeat(3, 1fr); flex: 1; gap: 0; max-width: 520px; margin: 0 auto; }
  .tabbar__item {
    display: flex; flex-direction: column; gap: 2px; min-height: 60px; padding: 4px; border-radius: 18px;
    font-size: 16px; line-height: 1.3;
  }
  .tabbar__item:hover { background: none; }
  .tabbar__icon { display: block; width: 26px; height: 26px; }
  .tabbar__ind { display: block; }
  .tabbar__nav:has(.tabbar__ind) .tabbar__item.is-on { background: none; }
  .tabbar__item .tabbar__seal { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; }

  body:not(.p-room):not(.p-call) .topbar {
    position: sticky; top: 0; max-width: none; margin: 0;
    background: rgba(251,246,239,.84); backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(226,201,196,.6);
  }
  body.nav-home .topbar { display: flex; }
  body.nav-my .topbar, body.nav-chat:not(.p-room) .topbar { max-width: none; background: rgba(251,246,239,.84); }
  .app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.site-foot) .app { padding-bottom: 0; }
  .site-foot { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* ── 데스크톱 헤더 (≥1024) — 시안 .topbar 데스크톱 값 ── */
@media (min-width: 1024px) {
  .tabbar { padding: 10px 40px; gap: 24px; justify-content: space-between; }
  .tabbar__brand { align-items: flex-start; gap: 4px; }
  .tabbar__brand-name { font-size: 34px; line-height: 1; }
  .tabbar__brand-sub { padding-left: .32em; }
  .tabbar__nav { position: absolute; left: 50%; transform: translateX(-50%); flex: none; gap: 6px; }
  .tabbar__actions { margin-left: auto; gap: 10px; }
  .tabbar__item .tabbar__seal { position: relative; top: auto; left: auto; margin-left: 2px; }
  .coinchip .ico, .coinchip svg { width: 20px; height: 20px; }
  .notif summary .notif__seal { left: 20px; top: 0; }
  .notif__panel { box-shadow: 0 18px 40px -18px rgba(120,50,70,.30), 0 4px 12px -6px rgba(120,50,70,.12); border-radius: 20px; }
  .notif__time { display: block; font-size: 15px; color: var(--muted); }
  .notif__text .badge--ai { vertical-align: 1px; }
  .iconbtn--avatar { width: 48px; height: 48px; }

  /* 탭 화면(뒤로가기 없는 제목바)은 시안처럼 제목바를 감춘다 — 문서 h1 은 낭독기용으로 남긴다 */
  body.nav-my .topbar:not(:has(.topbar__back)) {
    position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); border: 0;
  }
  /* 하위 화면 제목바 — 본문 컬럼 왼쪽에 [‹ 원형] + 세리프 제목 */
  body:not(.p-room):not(.p-call) .topbar:has(.topbar__back) {
    justify-content: flex-start; padding: 24px 32px 0 88px; min-height: 72px; position: relative; background: transparent; border: 0;
  }
  body:not(.p-room):not(.p-call) .topbar:has(.topbar__back) .topbar__back { left: 32px; top: calc(50% + 12px); }
  body:not(.p-room):not(.p-call) .topbar:has(.topbar__back) .topbar__title { text-align: left; font-size: 23px; letter-spacing: .04em; }

  .site-foot { padding: 34px 40px 48px; }
  .site-foot__script { font-size: 34px; }
  .site-foot__note { max-width: 36em; }
  body:has(.site-foot) .app { padding-bottom: 0; }
}
/* 1024–1199: 가운데 네비가 오른쪽 도구와 겹치지 않게 흐름 배치 + 알림은 아이콘만 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .tabbar__nav { position: static; transform: none; flex: 1; justify-content: center; }
  .tabbar__actions { margin-left: 0; }
  .tabbar__item { padding: 0 16px; }
  .notif .notif__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── 푸시 알약 — 떠 있지 않고 사이트 발 안(AI 고지 아래)에 한 번 놓인다. 편지지 카드 결 ──
   islands/push.js 가 .site-foot 에 넣는다. 발이 없는 화면(하위·대화방·통화)에는 띄우지 않는다 */
.site-foot .push-pill {
  position: static; left: auto; right: auto; bottom: auto; transform: none; z-index: auto;
  display: flex; width: fit-content; max-width: 100%; margin: 24px auto 0;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: inset 0 0 0 1px rgba(226,201,196,.7), 0 1px 2px rgba(120,50,70,.06), 0 8px 22px -14px rgba(120,50,70,.28);
  animation: chrome-pill-in .6s var(--ease) both;
}
.site-foot .push-pill__go { white-space: normal; text-align: left; }
@keyframes chrome-pill-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .site-foot .push-pill { animation: none; } }

/* ── 사이트 발 AI 고지 — 문장마다 한 줄(시안 .foot p.jp <br>) + 시안 text-wrap: balance ── */
.site-foot__note { text-wrap: balance; }
.site-foot__line { display: block; text-wrap: balance; }

/* ── 헤더 아바타 — 이니셜을 깔고 사진을 위에 얹는다. 사진이 늦게 와도 빈 분홍 원이 아니다 ── */
.iconbtn--avatar { position: relative; }
.iconbtn--avatar .iconbtn__initial { line-height: 1; color: var(--rose-deep); }
.iconbtn--avatar .iconbtn__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── 알림 팝오버 — 투명도 페이드 동안 아래 링크가 비쳐 겹쳐 읽히던 문제: 불투명 그대로 살짝 올라오기만 ── */
@media (min-width: 1024px) {
  .notif[open] .notif__panel { animation: chrome-notif-in .3s var(--ease); background-color: var(--card, #fffdfa); }
  @keyframes chrome-notif-in { from { transform: translateY(6px); } }
}
@media (prefers-reduced-motion: reduce) { .notif[open] .notif__panel { animation: none; } }

/* ════ 디자인 B — home ════ */
/* 한글 대화(계정 언어가 ko)도 편지 느낌이 나게 — Klee One·Noto Serif JP 에는 한글이 없다. unicode-range 서브셋이라 한글이 있을 때만 받는다. */
/* Gowun Batang(한글 손글씨 대체)은 head.php 의 구글 폰트 링크에서 받는다 — 파일 중간의 @import 는 브라우저가 무시한다 */
/* 디자인 B — home 영역 (디자인 워크플로 작업 파일. 끝나면 app.css 로 합친다)
 * 시안 b-sakura-letter/styles.css HOME(292–518) · 데스크톱(766–861) 값을 그대로 옮긴다.
 * app.css 뒤에 링크되므로 같은 우선순위면 여기가 이긴다. 홈(body.nav-home) 밖으로 새지 않게 범위를 건다. */

/* ── 컬럼: 시안 .wrap = 1180 − 좌우 40 (본문 1100) ── */
@media (min-width: 600px) { body.nav-home { --app-max: 1180px; } }
@media (min-width: 1024px) { body.nav-home .app { padding-left: 40px; padding-right: 40px; } }

/* ── 인사 ── */
body.nav-home .greet { padding: 0; }
body.nav-home .greet__title { font-size: 23px; line-height: 1.5; letter-spacing: .02em; text-wrap: pretty; }
body.nav-home .greet__sub { margin: 0; font-size: 16px; }
@media (min-width: 600px) {
  body.nav-home .greet__title { font-size: 23px; }
  body.nav-home .greet__sub { font-size: 16px; }
}
@media (min-width: 1024px) { body.nav-home .greet { padding-top: 10px; } }

/* ── 오늘의 편지: 상태 라벨(未開封/開封済み)은 늘 보인다. calm 에서는 다시 보기 없이 라벨만 ── */
body.nav-home .today__replay[hidden] { display: none; }
body.nav-home .today__replay:disabled { cursor: default; background: none; color: var(--muted); }
/* calm 에서도 시안처럼 ↻ + 開封済み (아이콘은 금빛 장식) */
body.nav-home .today__replay:disabled svg { color: var(--gold-ink); }
body.nav-home .tl__when { font-size: 15px; color: var(--muted); }

/* ── 섹션 머리 (시안 .section 36px · .sec-head 아래 16px) ── */
body.nav-home .section-head { margin: 36px 0 16px; }
/* 시안은 keep-all 이지만 CJK 에서 넘치면 글자 하나만 떨어진다 — 구절 단위로 접고, 자간을 .035em 로 반 픽셀 줄여 390 에서 시안처럼 한 줄 */
body.nav-home .section-head__title { letter-spacing: .035em; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance; }
body.nav-home .home-top__side > section:first-child .section-head { margin-top: 10px; }
@media (min-width: 1024px) {
  body.nav-home .section-head { margin-top: 48px; }
  body.nav-home .section-head__title { font-size: 27px; }
  body.nav-home .home-top__side > section:first-child .section-head { margin-top: 40px; }
  /* 옆 칼럼이 없으면(대화 없음) 편지를 가운데 한 칼럼으로 */
  body.nav-home .home-top:not(:has(.home-top__side)) { display: block; max-width: 700px; margin: 0 auto; }
}

/* ── 캐스트 ── */
body.nav-home .filterbar { gap: 12px; margin: 4px 0 6px; }
body.nav-home .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 700px) { body.nav-home .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { body.nav-home .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
/* 목록 사진은 전신 한 장뿐이다. 시안의 상반신 카드처럼 위쪽을 당겨 보이고, 호버하면 전신으로 물러난다
   (시안: 상반신 → 호버 시 전신 사진으로 교차). */
/* 확대·기준점은 사진마다 다르다(partials/photo_focus.php 가 style 에 --ps/--po 로 넣는다) — 얼굴이 액자 위 1/3 에 오게 */
body.nav-home .card__ph .card__photo { object-position: 50% 0; transform: scale(var(--ps, 1.6)); transform-origin: var(--po, 50% 8%); transition: transform 1.2s var(--ease); }
body.nav-home .card:hover .card__photo, body.nav-home .card__link:focus-visible .card__photo { transform: scale(1.02); }
body.nav-home .card__ph::after { background: linear-gradient(transparent, rgba(59,40,48,.3)); }
body.nav-home .card__name { font-size: 20px; }
body.nav-home .card__age { font-size: 15px; }
body.nav-home .card__foot { min-height: 32px; }

/* ── 추천 한 명 ── */
body.nav-home .spot__more { margin-top: 2px; }

/* ── 밤편지 띠 (시안 .feat) ── */
body.nav-home .feature__eyebrow { font-size: 22px; line-height: 1.3; }
body.nav-home .feature__title { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
body.nav-home .feature__lead { font-size: 18px; color: #e9d3d6; word-break: normal; line-break: strict; }
body.nav-home .feature__desc { font-size: 17px; }

/* ── 안심 · 맺음 ── */
body.nav-home .trust b { word-break: keep-all; }
body.nav-home .closing h2 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: wrap; }

/* 글자 크게(xl)에서 keep-all 이 넘치지 않게 — 세리프 제목은 구절 단위로 푼다 */
html[data-fs="xl"] body.nav-home :is(.section-head__title, .feature__title, .closing h2) { word-break: auto-phrase; }

/* 봉한 동안 편지지가 봉투 아래로 8px 비쳐 글자 끝이 보이지 않게 (시안은 빈 줄만 비친다) */
html.rv-ready body.nav-home .tl--env:not(.open) .tl__sheet { clip-path: inset(0 0 12px 0 round 18px); }   /* 섬이 못 뜬 안전장치(펼침)에서는 자르지 않는다 */

/* ── 한글 폴백 (인사·편지·이어서): 손글씨/명조 느낌을 지킨다 ── */
body.nav-home :is(.greet, .today, .cont-wrap) {
  --font-hand: "Klee One", "Gowun Batang", "Noto Serif JP", cursive;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Gowun Batang", serif;
  /* 한글 서체는 400 만 받는다 — 굵게 합성하면 시안의 가는 손글씨 인사보다 무거워진다 */
  font-synthesis-weight: none;
}

/* 서명: 시안은 Parisienne 40px 가는 획. 가타카나는 그 서체가 없어 손글씨체로 — 대신 가늘고 조금 작게 */
body.nav-home .tl__sig text { font-weight: 400; font-size: 28px; stroke-width: .25; }

/* 폴라로이드가 받는 이 줄 옆에서 시작한다(마크업 순서를 바꿨다) */
body.nav-home .tl__pola { margin-top: 4px; }

/* 섹션 머리: 제목과 링크가 한 줄에 안 들어가면(글자 크게·좁은 화면) 링크가 아래 줄로 — 제목을 글자 중간에서 자르지 않는다 */
body.nav-home .section-head { flex-wrap: wrap; row-gap: 4px; }
body.nav-home .section-head__more { margin-left: auto; }
html[data-fs="xl"] body.nav-home .tl__cta .btn { padding-inline: 14px; letter-spacing: 0; gap: 6px; }
/* 좁은 화면 + 글자 크게: "…書く" 의 마지막 글자만 떨어지지 않게 한 줄로 — 넘칠 폭이면 글자를 조금 줄인다(15px 아래로는 안 간다) */
@media (max-width: 420px) { html[data-fs="xl"] body.nav-home .tl__cta .btn { white-space: nowrap; font-size: max(15px, min(1em, 5.2vw)); } }

/* ── 캐스트 칩 (시안 .chips-row/.chip): 휴대폰은 화면 끝까지 가로 스크롤, 700 이상은 줄바꿈 ── */
body.nav-home .filterbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
body.nav-home .filterbar .chips { flex: 1; margin: 0 calc(-1 * var(--gap, 16px)); padding: 4px var(--gap, 16px); scroll-padding-inline: var(--gap, 16px); }
body.nav-home .filterbar .chips__item { font-size: 16px; font-weight: 500; }
@media (min-width: 700px) {
  body.nav-home .filterbar .chips { overflow: visible; flex-wrap: wrap; margin: 0; padding: 4px 0; }
}

/* 아바타·폴라로이드·우표·추천 사진도 같은 얼굴 맞춤 (전신 사진이 작은 인형처럼 보이지 않게) */
body.nav-home :is(.hav__f, .tl__pola, .tl__stamp, .spot__ph) img[style*="--ps"] { transform: scale(var(--ps)); transform-origin: var(--po); clip-path: var(--pc, none); }

/* 한두 줄짜리 짧은 편지: 폴라로이드 높이만큼 빈 괘선이 남지 않게 사진을 조금 작게, 서명 줄 쪽으로 살짝 걸친다 */
body.nav-home .tl--short .tl__pola { width: 76px; margin-bottom: -10px; }
@media (min-width: 700px) { body.nav-home .tl--short .tl__pola { width: 96px; margin-bottom: -4px; } }
@media (min-width: 1024px) { body.nav-home .tl--short .tl__pola { width: 110px; } }

/* 서명: 로마자로 옮긴 이름은 시안 그대로 Parisienne 40px 가는 획 (.sig) */
body.nav-home .tl__sig--latin text { font-family: var(--font-script); font-weight: 400; font-size: 40px; stroke-width: .6; }

/* 게스트 히어로: 가입(주) + 로그인(보조) 두 알약 */
body.nav-home .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
body.nav-home .hero__actions .btn { min-height: 56px; }
body.nav-home .hero__login { padding-inline: 26px; }
/* 글자 크게+휴대폰에서 app.css 는 서명을 접는다 — 로마자 서명은 짧아 들어가므로 되살린다(좁으면 40% 안에서 줄어든다) */
@media (max-width: 699px) { html[data-fs="xl"] body.nav-home .tl__sig--latin { display: block; } }

/* 직업 한 줄 (시안 .pc__job) — API 가 job 을 줄 때만 그려진다 */
body.nav-home .card__job { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 호버: 시안처럼 사진 1.05 확대(얼굴 맞춤 배율 위에) + 카드 들림(넓은 화면은 app.css 의 translate) */
body.nav-home .card:hover .card__photo, body.nav-home .card__link:focus-visible .card__photo { transform: scale(calc(var(--ps, 1.6) * 1.05)); }
@media (min-width: 1024px) {
  body.nav-home .cards > .card:hover, body.nav-home .cards > .card:focus-within { translate: 0 -6px; rotate: 0deg; box-shadow: var(--shadow-lg); }
}
/* 폴라로이드 마스킹 테이프: 확대된 사진(transform)이 위에 그려져 가려지지 않게, 윗변 가운데에 */
body.nav-home .tl__pola::before { z-index: 2; left: 50%; margin-left: -22px; }
html.calm body.nav-home .card .card__photo { transition: none; }
/* 봉투 우표·폴라로이드: 얼굴 맞춤으로 확대된 사진(clip-path 로 보이는 것만 자름)이 스크롤 폭을 넓히지 않게 — 봉한 편지에서 390 폭이 392 로 밀렸다 */
body.nav-home .tl__stamp { overflow: clip; }   /* 폴라로이드는 안 된다 — 윗변 밖 테이프(::before)가 잘린다 */
/* 열 때: 봉투가 미끄러지기 시작할 때(.85s)까지 아랫단 자르기를 유지한다 — 곧바로 풀면 접힌 편지의 버튼이 봉투 아래로 잠깐 비친다.
   열린 뒤에는 폴라로이드 테이프·그림자가 잘리지 않게 바깥으로 넉넉히 연다(같은 inset 모양이라 지연 전환이 된다) */
body.nav-home .tl--env .tl__sheet { clip-path: inset(-60px -60px -60px -60px); transition: transform .8s var(--ease) .9s, clip-path 0s .85s; }
@media (max-width: 1023px) { body.nav-home .tl--env .tl__sheet { transition: transform .8s var(--ease) .9s, max-height .8s var(--ease) 1.25s, clip-path 0s .85s; } }
body.nav-home .tl--env.done .tl__sheet { transition: none; }

/* ════ 디자인 B — chat ════ */
/* 디자인 B — chat 영역 (/chat 우편함). app.css 의 "B: 대화" 블록 위에 시안(b-sakura-letter chat.html) 값을 맞춘다. */

/* 모바일 머리: 시안처럼 가운데 제목 바를 보인다(app.css 가 /chat 에서 숨기던 것을 되돌린다). 데스크톱은 상단 헤더가 대신한다 */
@media (max-width: 1023px) {
  body.nav-chat:not(.p-room) .topbar {
    position: sticky; top: 0; width: auto; height: auto; min-height: 60px; margin: 0; padding: 8px var(--gap);
    overflow: visible; clip-path: none; border-bottom: 1px solid rgba(226,201,196,.6);
  }
}
@media (min-width: 1024px) {
  body.nav-chat:not(.p-room) .topbar {
    position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); border: 0;
  }
}

/* .app 위 여백(16px) + 6px = 시안 .chat-top 22px */
.chat-top { padding-top: 6px; }
.chat-head__postbox { width: 58px; height: 72px; }

/* 얼굴 크롭 — 시안 .av__f img 와 같은 식. --fx/--fy/--z 는 사진마다 PHP(wfrontFaceStyle)가 준다 */
.room__av { overflow: hidden; background: var(--blush); }
.room__av .room__photo {
  position: absolute; max-width: none; width: calc(var(--z, 1.6) * 100%); height: auto; aspect-ratio: 1; object-fit: cover;
  left: calc(50% - var(--fx, 50%) * var(--z, 1.6)); top: calc(50% - var(--fy, 32%) * var(--z, 1.6));
  border-radius: 0; transform: none;
}
.sheet__av { object-position: 50% 18%; }

/* 접속 상태 표시는 쓰지 않는다 — 남은 옛 마크업이 있어도 보이지 않게 */
.rooms .room__online, .rooms .room__dot, .chat-side .room__dot { display: none; }

/* 미리보기 + 읽음 표시(봉랍 / 봉투+既読·送信済み) 한 줄. 시안 .room__meta 줄의 왼쪽(접속 상태)은 쓰지 않으므로
   봉랍·봉투를 미리보기 마지막 줄 오른쪽에 붙여 빈 띠를 없앤다 */
/* 미리보기 폭이 9em(한 줄 ≈9자) 밑으로 줄면(360px·글자 크게) 봉투/봉랍은 시안처럼 다음 줄 오른쪽으로 내려간다 */
.room__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; margin-top: 4px; min-height: 32px; }
.rooms .room__row .room__preview { display: block; flex: 1 1 9em; min-width: 0; margin: 0; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; }
.room__ptext {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.rooms .room__row > .room__meta { flex: none; display: flex; align-items: center; min-height: 29px; margin: 0 0 0 auto; }
.rooms .room__meta:empty { display: none; }
.rooms .room__seal { margin: 0; }
.room__read { gap: 5px; line-height: 1; }
.rooms .room.is-unread .room__link { padding-top: 26px; }
.room__flap { height: 40px; }

/* 빠른 통화: 모바일 첫 AI 방(시안 .room__quick). 버튼이 붙은 카드는 본문 아래 여백을 줄여 시안 간격(≈8px)을 맞춘다 */
.rooms .room--quick1 .room__link { padding-bottom: 8px; }
.room__quick { padding: 0 16px 16px; margin-top: 6px; }

/* 빈 상태 CTA — 시안 btn--rose btn--sm */
.chat-empty__cta { padding: 0 20px; font-size: 16px; letter-spacing: .04em; }

/* 옆칸 카드 — 시안 .side-card.letter */
.chat-side { padding: 20px; border-radius: 20px; box-shadow: 0 18px 40px -18px rgba(120,50,70,.30), 0 4px 12px -6px rgba(120,50,70,.12); }
.chat-side__list { gap: 10px; }
.chat-side__av { width: 54px; height: 54px; }
.chat-side__name { flex-wrap: nowrap; }
.chat-side__name .room__age { font-size: 15px; }
.chat-side__line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.5; color: var(--muted); }
.chat-free { border-radius: 20px; }

@media (min-width: 1024px) {
  body.nav-chat:not(.p-room) .app { max-width: 1180px; padding-left: 40px; padding-right: 40px; }
  .chat-top { padding-top: 0; }   /* .app 위 28px ≈ 시안 26px */
  .rooms .room__link { padding: 18px 20px; }
  .rooms .room.is-unread .room__link { padding-top: 28px; }
  .room__quick { max-width: 560px; padding: 0 20px 18px 104px; }
  .rooms .room--quick2 .room__link { padding-bottom: 8px; }
}

/* 머리줄: 이름 묶음(이름·나이·AI·★)만 접히고 시각은 늘 첫 줄 오른쪽(시안 .room__time margin-left:auto). 이름은 "ジ‥" 로 잘리지 않는다 */
.room__top { flex-wrap: nowrap; align-items: flex-start; }
.room__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; flex: 1 1 auto; min-width: 0; }
.rooms .room__name { flex: 0 1 auto; max-width: 100%; }
.room__top .room__time { line-height: 1.8; }
@media (max-width: 599px) {
  html[data-fs="l"] .box-label::after, html[data-fs="xl"] .box-label::after { display: none; }   /* 두 줄로 접히면 선 조각만 남는다 */
}
@media (max-width: 599px) {
  html[data-fs="l"] .room__quick, html[data-fs="xl"] .room__quick { grid-template-columns: minmax(0, 1fr); }
  html[data-fs="xl"] .chat-seg button { font-size: 15px; padding: 0 2px; }
  html[data-fs="xl"] .chat-seg button span { font-size: 14px; }
}
.chat-empty__title { text-wrap: balance; word-break: auto-phrase; }

/* 빠른 통화: 두 버튼 모두 이름 + 둘째 줄(요금 / 영상은 "통화 화면에서") — 시안 .qbtn 두 줄 모양 */
.qbtn > span { min-width: 0; }
.qbtn { gap: 6px; padding: 6px 10px 6px 12px; }
.qbtn small { white-space: normal; text-wrap: balance; }   /* 좁으면 잘리지 않고 접힌다(두 버튼은 grid 로 같은 높이) */

/* 우편함 한 줄: 한 글자만 다음 줄로 떨어지지 않게 */
.chat-head__sub { text-wrap: balance; word-break: auto-phrase; }

/* 360px: 요금 줄은 한 줄로(시안 styles.css 와 같은 처리 — 379px 이하 14px) */
@media (max-width: 379px) {
  html:not([data-fs="l"]):not([data-fs="xl"]) .qbtn { gap: 5px; padding: 6px 10px 6px 10px; }
  html:not([data-fs="l"]):not([data-fs="xl"]) .qbtn small { white-space: nowrap; font-size: 14px; letter-spacing: -.01em; }
  html:not([data-fs="l"]):not([data-fs="xl"]) .qbtn svg { width: 18px; height: 18px; }
  .room__quick { gap: 6px; }
}

/* ════ 디자인 B — room ════ */
/* 디자인 B — room 영역 (대화방 + 통화). 시안 b-sakura-letter 의 편지 세트 언어로:
   편지지(와시) 말풍선 · 그의 손글씨(Klee One) · 날짜 소인 · 얼굴 링 · 봉투 플랩 · 우표 사진 · 로즈 필 버튼.
   접속 상태(온라인/오프라인) UI 는 없다(오너 결정) — 남은 옛 규칙도 여기서 끈다. */

body.p-room {
  --rm-ring: conic-gradient(var(--petal-2), #f6dfb9, var(--rose), var(--petal-2));
  --rm-sh1: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px -8px rgba(120,60,70,.18);
  --rm-sh2: 0 18px 40px -18px rgba(120,50,70,.30), 0 4px 12px -6px rgba(120,50,70,.12);
  --rm-ease: cubic-bezier(.2,.7,.2,1);
  --rm-petal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>");
}
.room__dot, .room-head__presence, .room-side__online { display: none !important; }

/* ───────── 머리: ‹ · 얼굴(링) · 이름 · AI · 통화 · ⋮ ───────── */
body.p-room .topbar {
  display: flex; align-items: center; gap: 6px; grid-template-columns: none; grid-template-rows: none;
  min-height: 64px; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(4px, env(safe-area-inset-left));
}
body.p-room .topbar > * { grid-row: auto; grid-column: auto; }
body.p-room .topbar__back { order: 0; display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; font-size: 30px; color: var(--ink); text-decoration: none; }
body.p-room .room-head { order: 1; flex: none; width: 50px; height: 50px; }
body.p-room .topbar__title {
  order: 2; flex: 0 1 auto; min-width: 0; margin: 0 0 0 4px; margin-right: auto;
  font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center;
}
body.p-room .topbar:has(.room-head__ai) .topbar__title { margin-right: 0; }
.room-head__ai { order: 3; margin-right: auto; margin-left: 2px; }
body.p-room .room-call { order: 4; display: inline-grid; place-items: center; width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; color: var(--rose); }
body.p-room .room-call svg { width: 23px; height: 23px; }
body.p-room .room-call:hover { color: var(--rose-deep); background: rgba(242,210,214,.45); }
body.p-room .room-menu { order: 5; margin-left: 0; }
body.p-room .room-menu__button { margin: 0; width: 48px; height: 48px; border-radius: 50%; }

/* 얼굴 링 — 시안 .av--ring (정적 그라데이션 링 + 종이색 틈) */
.room-head { position: relative; border-radius: 50%; }
.room-head::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rm-ring, conic-gradient(#eaa6b6, #f6dfb9, #b23a62, #eaa6b6)); }
.room-head__photo {
  position: absolute; inset: 4px; width: calc(100% - 8px) !important; height: calc(100% - 8px) !important; max-width: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%; background: var(--blush);
  box-shadow: 0 0 0 2.5px var(--card) !important;
}

/* ───────── 대화의 첫 장 (편지지 머리) ───────── */
.room-open {
  position: relative; margin: 14px 0 22px; padding: 30px 18px 18px; text-align: center;
  border-radius: 20px; background-color: var(--card); background-image: var(--washi);
  box-shadow: var(--rm-sh2), inset 0 0 0 1px rgba(236,220,213,.9);
}
.room-open::before { /* 봉투 플랩 가장자리 — 시안 .cont__item::before */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none;
  background: rgba(242,210,214,.55); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 20px 20px 0 0;
}
.room-open__who { display: flex; flex-direction: column; align-items: center; }
.room-open__av {
  position: relative; display: block; width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px;
  background: var(--rm-ring);
}
.room-open__av img {
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); max-width: none;
  border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: var(--blush);
  box-shadow: 0 0 0 3px var(--card);
}
.room-open__eyebrow { display: block; font-family: var(--font-script); font-size: 22px; line-height: 1; color: var(--rose); letter-spacing: 0; margin-bottom: 6px; }
.room-open__name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-family: var(--font-serif); font-size: 23px; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--ink); }
.room-main .room-open .notice-ai {
  position: relative; margin: 0; padding: 12px 14px 12px 42px; text-align: left;
  border-radius: 14px; font-size: 16px; line-height: 1.7; color: var(--ink);
  background: linear-gradient(120deg, #fdf0f1, #fbe6ea); box-shadow: inset 0 0 0 1px rgba(178,58,98,.2);
  line-break: strict; text-wrap: pretty;
}
.room-main .room-open .notice-ai::before { /* 꽃잎 표 */
  content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px;
  background: var(--rose); -webkit-mask: var(--rm-petal) center/contain no-repeat; mask: var(--rm-petal) center/contain no-repeat;
}
.room-open .rate {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0;
  font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--gold-ink);
}
.room-open .rate:not(:empty)::before { /* 동전 */
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px currentColor, inset 0 0 0 5px #fff8ef, inset 0 0 0 6.6px currentColor;
}
.room-open .rate:empty { display: none; }

/* ───────── 이전 대화 · 날짜 소인 ───────── */
.older { margin: 0 0 6px; }
.older__button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; margin: 0 0 8px;
  border: 0; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 500; letter-spacing: .04em;
  color: var(--rose-deep); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--rm-sh1);
}
.older__button:hover { box-shadow: inset 0 0 0 1.5px var(--rose), var(--rm-sh1); }

.day-sep { margin: 18px 0 8px; gap: 12px; font-size: 15px; color: var(--muted); }
.day-sep::before, .day-sep::after { height: 0; background: none; border-top: 1px dashed var(--line-2); }
.day-sep time {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 14px;
  font-family: var(--font-serif); font-weight: 500; letter-spacing: .04em; color: var(--rose-deep);
  border-radius: 999px; background-color: var(--paper-2); background-image: var(--washi);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.day-sep time::before {
  content: ""; width: 12px; height: 12px; flex: none; background: var(--petal-2);
  -webkit-mask: var(--rm-petal) center/contain no-repeat; mask: var(--rm-petal) center/contain no-repeat;
}

/* ───────── 말풍선 ───────── */
.bubbles { gap: 6px; padding-bottom: 16px; }
.bubble.is-lead { margin-top: 12px; }
.bubble:not(.bubble--mine) { padding-left: 52px; max-width: min(90%, 620px); }
/* 그의 얼굴 — 묶음 첫 장에만, 링 포함 */
.bubble.is-lead:not(.bubble--mine)::before {
  width: 44px; height: 44px; left: 0; top: -2px; padding: 2px; border: 2.5px solid transparent; box-sizing: border-box;
  background:
    var(--his-photo, none) 50% 22% / cover no-repeat content-box,
    linear-gradient(var(--blush), var(--blush)) content-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(#eaa6b6, #f6dfb9, #b23a62, #eaa6b6) border-box;
  box-shadow: 0 4px 10px -6px rgba(120,50,70,.45);
}
/* 그의 말 = 편지지 + 손글씨 */
.bubble__text {
  padding: 13px 18px 14px; border-radius: 18px;
  font-size: 17px; line-height: 1.8; letter-spacing: .02em; line-break: strict; overflow-wrap: anywhere;
}
/* 편지지: 와시 + 시안 .letter--lined 의 괘선(줄 높이에 맞춘다) — 괘선은 글줄 밑에만, 위아래 여백에는 긋지 않는다 */
.bubble:not(.bubble--mine) .bubble__text {
  --rm-lh: 34px;
  font-family: "Klee One", "Gowun Batang", "Noto Serif JP", "Noto Serif KR", serif; font-size: 18px; font-weight: 400; line-height: var(--rm-lh); color: var(--ink);
  padding-top: 12px; padding-bottom: 12px;
  background-color: var(--card);
  background-image: var(--washi), repeating-linear-gradient(180deg, transparent 0 calc(var(--rm-lh) - 1px), rgba(178,58,98,.1) calc(var(--rm-lh) - 1px) var(--rm-lh));
  background-repeat: repeat, no-repeat; background-position: 0 0, 0 12px; background-size: auto, 100% calc(100% - 24px);
  box-shadow: var(--rm-sh1), inset 0 0 0 1px rgba(236,220,213,.95);
}
/* 묶음 첫 장 = 편지의 첫 장: 봉투 플랩 빛(시안 .room.unread 의 플랩 색) + 마스킹 테이프 한 조각 */
.bubble.is-lead:not(.bubble--mine) .bubble__text {
  background-image: var(--washi), repeating-linear-gradient(180deg, transparent 0 calc(var(--rm-lh) - 1px), rgba(178,58,98,.1) calc(var(--rm-lh) - 1px) var(--rm-lh)), linear-gradient(180deg, #fbe9eb, rgba(255,253,250,0) 30px);
  background-repeat: repeat, no-repeat, no-repeat; background-position: 0 0, 0 12px, 0 0; background-size: auto, 100% calc(100% - 24px), 100% 100%;
}
.bubble.is-lead:not(.bubble--mine) .bubble__text::after {
  content: ""; position: absolute; right: 14px; top: -7px; width: 40px; height: 14px; pointer-events: none;
  background: rgba(234,200,160,.62); transform: rotate(6deg); box-shadow: 0 1px 1px rgba(120,80,40,.08);
}
.bubble.is-lead:not(.bubble--mine) .bubble__text--other::after { display: none; }
.bubble:not(.bubble--mine) .bubble__text--other { font-family: inherit; font-size: 16px; color: var(--muted); }
.bubble.is-lead:not(.bubble--mine) .bubble__text { border-top-left-radius: 5px; }
.bubble.is-lead:not(.bubble--mine) .bubble__text::before { display: none; }
/* 나의 말 = 블러시 편지지 */
.bubble--mine .bubble__text {
  color: var(--ink); background: var(--washi), linear-gradient(180deg, #fbe6ea, #f6d5dc);
  box-shadow: 0 6px 16px -10px rgba(143,43,77,.45), inset 0 0 0 1px rgba(178,58,98,.16);
}
.bubble--mine.is-lead .bubble__text { border-top-right-radius: 5px; }
.bubble--mine.is-lead .bubble__text::before { display: none; }
.bubble__time { margin-top: 3px; padding: 0 6px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.bubble__play {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; margin-top: 8px; padding: 0 18px;
  border: 0; border-radius: 999px; color: #fff; font-size: 16px;
  background: linear-gradient(180deg, #bd4169, var(--rose) 55%, #a33459); box-shadow: 0 8px 18px -10px rgba(143,43,77,.6);
}
.bubble__emoticon { width: 132px; filter: drop-shadow(0 6px 10px rgba(110,40,60,.18)); }

/* 사진 — 폴라로이드 한 장 */
.photo__img { border-radius: 4px; padding: 6px 6px 22px; background: #fff; box-shadow: 0 10px 22px -12px rgba(80,30,40,.5); }
.bubble:not(.bubble--mine) .photo__img { transform: rotate(-1.2deg); }
.bubble--mine .photo__img { transform: rotate(1deg); }
.photo__card, .secret__card { border-radius: 18px; padding: 22px 16px; }
.photo__card { cursor: pointer; }
.photo__icon { font-size: 26px; }
.photo__label { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.secret__card { position: relative; padding-top: 30px; }
.secret__card::before { /* 봉투 플랩 */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; pointer-events: none;
  background: linear-gradient(180deg, #efc4cc, #f5d8dd); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 18px 18px 0 0;
}
.secret .btn--sm, .secret .btn--primary { min-height: 48px; border-radius: 999px; font-size: 16px; color: #fff; background: linear-gradient(180deg, #bd4169, var(--rose) 55%, #a33459); }
.photo .linkish, .secret .linkish { min-height: 48px; font-size: 16px; }
.photo__hint, .photo__caption { font-size: 15px; }

/* 통화 결과 · 안내 한 줄 */
.notice-line {
  margin: 10px 0; padding: 8px 18px; font-size: 15px; line-height: 1.6; color: var(--muted);
  border-radius: 999px; background-color: var(--card); background-image: var(--washi); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* 입력 중 */
.typing { padding: 6px 4px 6px 52px; font-size: 16px; }

/* ───────── 입력창 — 시안 검색창 + 로즈 필 ───────── */
.composer {
  gap: 8px; align-items: flex-end;
  background: rgba(255,253,250,.96); background-image: none; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -20px rgba(120,50,70,.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
@media (max-width: 1079px) { .composer { gap: 6px; } }
.composer__input {
  flex: 1 1 auto; min-height: 52px; padding: 13px 16px; border-radius: 26px; font-size: 17px; line-height: 1.5;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--rm-sh1);
}
.composer__input::placeholder { color: #806a73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer__input:focus { box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 5px rgba(178,58,98,.12); }
.composer__photo { width: 48px; height: 48px; min-height: 48px; margin-bottom: 2px; border-radius: 50%; background: var(--blush); color: var(--rose-deep); }
.composer__photo:hover { background: var(--rose); color: #fff; }
.composer__send {
  min-height: 52px; padding: 0 18px; border-radius: 999px; font-size: 17px; white-space: nowrap; font-weight: 700; letter-spacing: .06em; color: #fff;
  background: linear-gradient(180deg, #bd4169, var(--rose) 55%, #a33459);
  box-shadow: 0 10px 24px -10px rgba(143,43,77,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.composer__send:hover { background: linear-gradient(180deg, #a93a5f, var(--rose-deep)); }
.stamps, .composer__error { bottom: calc(74px + env(safe-area-inset-bottom)); }
.stamps { background-color: var(--card); background-image: var(--washi); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(120,50,70,.35); }
.stamps__item { min-height: 72px; border-radius: 14px; }
body.p-room .app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (max-width: 379px) {
  .composer { gap: 6px; }
  .composer__photo { width: 48px; height: 48px; min-height: 48px; }
  .composer { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .composer__send { padding: 0 14px; }
  .composer__input { padding: 13px 12px; }
  body.p-room .topbar__title { font-size: 19px; }
  body.p-room .topbar { gap: 2px; }
}

/* ───────── 방 메뉴 — 시안 my.html .menu 행(아이콘 타일 · 이름 · 알약 토글 · 헤어라인) ───────── */
.room-menu__panel {
  width: min(360px, calc(100vw - 24px)); margin-top: 8px; padding: 6px; border: 0; border-radius: 20px;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: var(--rm-sh2), inset 0 0 0 1px rgba(236,220,213,.9);
}
.room-menu__row, .room-menu__exit {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 12px;
  border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--ink); transition: background .38s;
}
.room-menu__row:hover, .room-menu__exit:hover { background: #fdf1f2; }
.room-menu__row + .room-menu__row, .room-menu__nickname, .room-menu__exit, .room-menu__confirm { border-top: 1px solid var(--line); }
.room-menu__row:hover + .room-menu__row, .room-menu__row:hover + .room-menu__nickname { border-top-color: transparent; }
.room-menu__ic {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: var(--blush); color: var(--rose-deep); transition: background .38s, color .38s, transform .38s var(--rm-ease);
}
.room-menu__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room-menu__row:hover .room-menu__ic { background: var(--rose); color: #fff; transform: rotate(-6deg); }
.room-menu__lb { flex: 1; min-width: 0; }
/* 알약 토글 — 시안 .switch__t (체크박스 그대로, 모양만) */
.room-menu__row .room-menu__sw {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 56px; height: 32px; margin: 0;
  border-radius: 16px; background: #d9c7cb; cursor: pointer; transition: background .38s;
}
.room-menu__row .room-menu__sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .38s var(--rm-ease);
}
.room-menu__row .room-menu__sw:checked { background: var(--rose-deep); }
.room-menu__row .room-menu__sw:checked::after { transform: translateX(24px); }
.room-menu__sw:focus-visible { outline: 3px solid rgba(178,58,98,.35); outline-offset: 2px; }
.room-menu__nickname { display: grid; gap: 10px; padding: 12px 12px 14px; }
.room-menu__nickname .field { display: grid; gap: 10px; margin: 0; }
.room-menu__nlabel { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); }
.room-menu__nickname .field__input {
  min-height: 52px; padding: 0 16px; border: 0; border-radius: 26px; font-size: 17px; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--rm-sh1);
}
.room-menu__nickname .field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 5px rgba(178,58,98,.12); }
.room-menu__nickname .btn {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--rose-deep); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--rm-sh1);
}
.room-menu__nickname .btn:hover { box-shadow: inset 0 0 0 1.5px var(--rose), var(--rm-sh1); }
/* 나가기 — 시안 .menu--quiet: 조용한 행 */
.room-menu__exit { color: var(--muted); font-size: 16px; }
.room-menu__exit .room-menu__ic { background: var(--paper-2); color: var(--muted); }
.room-menu__exit:hover .room-menu__ic { background: var(--muted); color: #fff; }
.room-menu__arr { width: 20px; height: 20px; flex: none; margin-left: auto; fill: none; stroke: #a8929a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room-menu__confirm { padding: 12px; }
.room-menu__warn { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.room-menu__confirm .btn { min-height: 48px; border-radius: 999px; font-size: 16px; }
.room-menu__confirm .linkish { min-height: 48px; font-size: 16px; margin-left: 8px; }
.room-menu__panel .alert { margin: 6px; font-size: 15px; border-radius: 12px; }

/* ───────── 넓은 화면: 좌측 = 우표 카드, 우측 = 편지 ───────── */
.room-side__card {
  position: relative; padding: 30px 22px 22px; border-radius: 28px; text-align: center;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: var(--rm-sh2), inset 0 0 0 1px rgba(236,220,213,.9);
}
.room-side__stamp { position: relative; display: block; width: 150px; margin: 0 auto 18px; }
.room-side__ph {
  --h: 6px; display: block; background: #fffdf9; transform: rotate(-2deg);
  filter: drop-shadow(0 8px 12px rgba(110,40,60,.22));
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h)*2.6) calc(var(--h)*2.6) round, linear-gradient(#000,#000) content-box;
  mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h)*2.6) calc(var(--h)*2.6) round, linear-gradient(#000,#000) content-box;
  padding: var(--h);
}
.room-side__card .room-side__photo {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; margin: 0; border-radius: 0;
  object-fit: cover; object-position: 50% 25%; box-shadow: none; background: var(--blush);
}
.room-side__tape { position: absolute; z-index: 2; width: 44px; height: 16px; background: rgba(234,200,160,.6); pointer-events: none; }
.room-side__tape--a { left: -10px; top: -2px; transform: rotate(-38deg); }
.room-side__tape--b { right: -10px; top: -2px; transform: rotate(38deg); }
.room-side__eyebrow { display: block; font-family: var(--font-script); font-size: 22px; line-height: 1; color: var(--rose); letter-spacing: 0; margin-bottom: 6px; }
.room-side__name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-family: var(--font-serif); font-size: 23px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.room-side__actions { display: grid; gap: 10px; }
.room-side__call {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 18px;
  border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--rose-deep); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2), var(--rm-sh1);
  transition: background .38s, box-shadow .38s;
}
.room-side__call:hover { background: var(--blush); box-shadow: inset 0 0 0 1.5px var(--rose); }
.room-side__ico, .room-side__arr { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room-side__profile { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--rose); text-decoration: none; }
.room-side__profile:hover .room-side__arr { transform: translateX(3px); }
.room-side__arr { width: 18px; height: 18px; transition: transform .38s; }

@media (min-width: 1080px) {
  body.p-room .room-side { top: 100px; }
  .room-open { padding-top: 26px; margin-top: 20px; }
  .room-open__who { display: none; }
  .bubble:not(.bubble--mine) .bubble__text { font-size: 19px; }
  .composer { border-radius: 22px 22px 0 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .stamps, .composer__error { bottom: 76px; }
}

/* ───────── 통화 — 밤의 편지(플럼 밴드 + 금빛 헤어라인) ───────── */
body.p-call .call__photo { object-position: 50% 18%; }
body.p-call .call__scrim { background: linear-gradient(to bottom, rgba(59,40,48,.35) 0%, transparent 18%, transparent 30%, rgba(90,49,64,.85) 58%, #3b2830 100%); }
body.p-call .call__panel { gap: 10px; padding-top: 34px; }
body.p-call .call__panel::before { /* 금빛 헤어라인 — 시안 .feat::before */
  content: ""; position: absolute; left: 16px; right: 16px; top: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, #e6cc9a, transparent); opacity: .6;
}
body.p-call .notice-ai--call { font-size: 16px; line-height: 1.7; }
.call__eyebrow { display: block; margin-top: 4px; font-family: var(--font-script); font-size: 24px; line-height: 1; color: #e6cc9a; letter-spacing: 0; }
body.p-call .call__avatar { width: 84px; height: 84px; border: 0; box-shadow: 0 0 0 3px #3b2830, 0 0 0 5.5px #e6cc9a; }
body.p-call .call__name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-serif); font-size: 25px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: #fbf1ea; }
body.p-call .call__name .badge--ai { background: rgba(251,241,234,.96); color: #8f2b4d; box-shadow: none; }
body.p-call .call__state { font-family: var(--font-hand); font-weight: 600; font-size: 18px; color: #e6cc9a; }
body.p-call .call__rate { font-size: 15px; color: #e9d3d6; }
body.p-call .call__start, body.p-call .call__terms-agree {
  min-height: 56px; border: 0; border-radius: 999px; font-size: 18px; font-weight: 700; letter-spacing: .06em; color: #fff;
  background: linear-gradient(180deg, #bd4169, #b23a62 55%, #a33459);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
body.p-call .call__hint { color: #e9d3d6; }
body.p-call .call__terms { border-radius: 20px; background: rgba(40,22,30,.7); box-shadow: inset 0 0 0 1px rgba(230,204,154,.35); border: 0; }
body.p-call .call__terms-title { font-size: 19px; }
body.p-call .call__terms-list { font-size: 16px; }
body.p-call .call__button { font-size: 15px; min-height: 88px; }
body.p-call .call__icon { width: 64px; height: 64px; }
body.p-call .call__back { min-height: 52px; border-radius: 999px; font-size: 16px; }
@media (min-width: 700px) {
  body.p-call .call__panel { bottom: 32px; padding: 34px 32px 28px; border-radius: 28px; background: rgba(59,40,48,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(230,204,154,.25); }
  body.p-call .call__panel { left: 50%; right: auto; transform: translateX(-50%); }
  body.p-call .call__panel::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 12px; height: 1px; background: linear-gradient(90deg, transparent, #e6cc9a, transparent); opacity: .5; }
}

/* 넓은 화면의 통화: 사진은 밤 위에 놓인 폴라로이드(왼쪽), 편지 카드는 오른쪽 — 얼굴을 가리지 않는다 */
@media (min-width: 1024px) {
  body.p-call .call { background: radial-gradient(900px 600px at 30% 40%, #5a3140, #3b2830 70%); }
  body.p-call .call__photo {
    inset: auto; left: max(40px, 8vw); top: 96px; width: min(38vw, 460px); height: calc(100vh - 150px);
    padding: 12px 12px 48px; background: #fff; box-sizing: border-box; object-fit: cover; object-position: 50% 18%;
    transform: rotate(-2deg); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6);
  }
  body.p-call .call:not(.is-live) .call__scrim { background: none; }
  body.p-call .call__avatar { display: none; }   /* 폴라로이드가 이미 얼굴을 보여 준다 */
  body.p-call .call__panel { left: auto; right: max(40px, 8vw); top: 50%; bottom: auto; transform: translateY(-50%); width: min(44vw, 520px); max-width: none; }
}

/* 글자 크게: .app 이 zoom 되므로 입력창 버튼을 줄여 입력칸 폭을 지킨다(확대 후에도 48px 이상) */
html[data-fs="l"] .composer__photo { width: 44px; height: 44px; min-height: 44px; }
html[data-fs="xl"] .composer__photo { width: 40px; height: 40px; min-height: 40px; }
html[data-fs="xl"] .composer { gap: 4px; padding-left: 8px; padding-right: 8px; }
html[data-fs="xl"] .composer__send { padding: 0 12px; }
html[data-fs="xl"] .composer__input { padding: 13px 10px; }

/* ───────── round 2: 머리 불투명 · 데스크톱 방 머리 · 시각 한 번 · AI 배지 · 글자 크게 ───────── */
/* 시안 폰 .topbar: 거의 불투명한 종이 — 뒤의 말풍선 글자가 비치지 않게 */
body.p-room .topbar {
  background: rgba(251,246,239,.97); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(226,201,196,.6);
}
/* 같은 사람·같은 분의 말풍선은 시각을 마지막 장에만 (chat-bubble.js decorateRuns 의 is-cont) */
.bubble.is-cont .bubble__time { display: none; }
.bubble.is-cont + .bubble:not(.is-lead) { margin-top: -2px; }

/* AI 배지 — 법적 표시. 이 영역에서는 15px(시안 390 에서 읽히는 크기) */
body.p-room .badge--ai, body.p-call .badge--ai { height: 26px; padding: 0 9px; font-size: 15px; border-radius: 6px; }
body.p-call .call-head__ai { margin-left: 8px; background: rgba(251,241,234,.96); color: #8f2b4d; box-shadow: none; text-shadow: none; }
body.p-call .topbar { justify-content: flex-start; }

/* 데스크톱 헤더(탭바, sticky z50 · 80px) 아래에 방 머리를 둔다 — 겹쳐서 ⋮ 메뉴가 눌리지 않던 문제 */
@media (min-width: 1024px) {
  body.p-room .topbar {
    top: 80px; z-index: 45; min-height: 68px; padding: 8px 14px 8px 18px;
    background-color: rgba(255,253,250,.97); background-image: var(--washi);
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px;
    box-shadow: 0 14px 30px -24px rgba(120,50,70,.35);
  }
  body.p-room .topbar__back { display: none; }   /* 탭바의 チャット 가 같은 곳으로 간다 */
  body.p-room .room-head { width: 46px; height: 46px; }
  body.p-room .topbar__title { font-size: 21px; margin-left: 10px; }
  body.p-room .room-menu__panel { right: -6px; }
}
/* 2단(1080+): 방 머리는 오른쪽 대화 컬럼 위에만 — 가운데 정렬된 폭을 (좌측 카드 + 간격)/2 만큼 민다 */
@media (min-width: 1080px) {
  body.p-room .topbar {
    max-width: calc(var(--app-max) - var(--side-w) - var(--side-gap) - 64px);
    transform: translateX(calc((var(--side-w) + var(--side-gap)) / 2));
  }
  body.p-room .room-side { top: 100px; }
  body.p-room .room-call { display: none; }   /* 통화는 좌측 카드의 버튼으로 (같은 것이 둘이면 헷갈린다) */
}

/* 글자 크게: 머리는 .app zoom 밖이라 직접 키운다 */
html[data-fs="l"] body.p-room .topbar__title { font-size: 22px; }
html[data-fs="xl"] body.p-room .topbar__title { font-size: 23px; }
html[data-fs="xl"] body.p-room .room-head { width: 54px; height: 54px; }
/* 특대 + 좁은 폭: 입력칸 자리 안내가 잘리지 않게(15px × zoom 1.22 ≈ 18px) */
html[data-fs="xl"] .composer__input::placeholder { font-size: 15px; }

/* 메뉴 구분선 — 시안 .menu li + li 처럼 행 모서리(둥근 hover)와 떨어진 곧은 헤어라인 */
.room-menu__row, .room-menu__nickname, .room-menu__exit, .room-menu__confirm { position: relative; }
.room-menu__row + .room-menu__row, .room-menu__nickname, .room-menu__exit, .room-menu__confirm { border-top: 0; }
.room-menu__row + .room-menu__row::before, .room-menu__nickname::before, .room-menu__exit::before, .room-menu__confirm::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); pointer-events: none;
}

/* 특대 + 좁은 폭(≤379): 이름이 "ジ…" 로 잘리지 않게 머리 요소를 줄이고, 입력칸 안내는 한 줄에 들게 */
@media (max-width: 379px) {
  html[data-fs="xl"] body.p-room .topbar { gap: 0; padding-left: 2px; padding-right: 4px; }
  html[data-fs="xl"] body.p-room .topbar__back { min-width: 36px; font-size: 26px; }
  html[data-fs="xl"] body.p-room .room-head { width: 46px; height: 46px; }
  html[data-fs="xl"] body.p-room .topbar__title { font-size: 20px; margin-left: 6px; }
  html[data-fs="xl"] body.p-room .room-call, html[data-fs="xl"] body.p-room .room-menu__button { width: 44px; min-width: 44px; }
  html[data-fs="xl"] .composer__input::placeholder { font-size: 13px; }
}

/* ───────── round 3 ───────── */
/* 편지지 말풍선: 괘선은 뺀다 — 대체 글꼴(한글)이 줄 높이를 늘려 괘선이 글자와 어긋났다. 시안 .letter 카드처럼 와시 + 첫 장의 플랩 빛만 */
.bubble:not(.bubble--mine) .bubble__text {
  line-height: 1.85; padding-top: 13px; padding-bottom: 14px;
  background-image: var(--washi); background-repeat: repeat; background-position: 0 0; background-size: auto;
}
.bubble.is-lead:not(.bubble--mine) .bubble__text {
  background-image: var(--washi), linear-gradient(180deg, #fbe9eb, rgba(255,253,250,0) 30px);
  background-repeat: repeat, no-repeat; background-position: 0 0, 0 0; background-size: auto, 100% 100%;
}

/* 넓은 화면의 방 머리 = 시안 .topbar 처럼 컬럼 폭의 불투명한 종이 막대 + 헤어라인. 둥근 모서리 틈으로 말풍선이 비치지 않게 */
@media (min-width: 1024px) {
  body.p-room .topbar {
    border: 0; border-bottom: 1px solid rgba(226,201,196,.7); border-radius: 0;
    background-color: var(--paper); background-image: var(--washi);
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  body.p-room .topbar::after { /* 막대 아래로 스러지는 종이 — 밑으로 들어가는 말풍선이 뚝 잘려 보이지 않게 */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
    background: linear-gradient(180deg, var(--paper), rgba(251,246,239,0));
  }
  body.p-room .room-main { padding-top: 8px; }
}

/* 스탬프 서랍 — 시안 sec-head(스크립트 눈썹 + 명조 제목) + 닫기, 격자 아래 여백 */
.stamps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; align-content: start;
  max-height: min(310px, 46vh); padding: 0 16px 18px; border-radius: 22px 22px 0 0;
  background-color: var(--card); background-image: var(--washi);
  border-top: 1px solid var(--line-2); box-shadow: 0 -14px 30px -18px rgba(120,50,70,.4);
}
.stamps__head {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px;
  margin: 0 -16px; padding: 12px 8px 8px 20px; border-radius: 22px 22px 0 0;
  background-color: var(--card); background-image: var(--washi);
}
.stamps__head::before { /* 손잡이 */
  content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-2);
}
.stamps__eyebrow { grid-column: 1; font-family: var(--font-script); font-size: 20px; line-height: 1.1; color: var(--rose); letter-spacing: 0; margin-top: 6px; }
.stamps__title { grid-column: 1; margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; color: var(--ink); }
.stamps__close {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--rose-deep); background: var(--blush);
}
.stamps__close:hover { background: var(--rose); color: #fff; }
.stamps__close svg { width: 22px; height: 22px; }
.stamps__item { width: auto; justify-self: center; max-width: 84px; }
/* 서랍이 열리면 그만큼 아래 여백을 늘려 마지막 말풍선이 서랍 위에 보이게 */
body.p-room:has(.stamps:not([hidden])) .app { padding-bottom: calc(92px + min(310px, 46vh) + env(safe-area-inset-bottom)); }
@media (min-width: 1080px) { body.p-room:has(.stamps:not([hidden])) .app { padding-bottom: calc(104px + min(310px, 46vh)); } }

/* 통화: AI 고지는 대화방의 로즈 notice-ai 와 같은 밝은 카드(꽃잎 표) — 어두운 사진 위에서 가장 먼저 읽히게 */
body.p-call .notice-ai--call {
  position: relative; padding: 12px 14px 12px 42px; text-align: left; border-radius: 14px;
  font-size: 16px; line-height: 1.7; color: var(--ink); line-break: strict; text-wrap: pretty;
  background: linear-gradient(120deg, #fdf0f1, #fbe6ea); box-shadow: inset 0 0 0 1px rgba(178,58,98,.25), 0 10px 24px -14px rgba(0,0,0,.6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.p-call .notice-ai--call::before {
  content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px;
  background: var(--rose); -webkit-mask: var(--rm-petal) center/contain no-repeat; mask: var(--rm-petal) center/contain no-repeat;
}
body.p-call { --rm-petal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>"); }

/* 통화 폴라로이드의 테이프 — 넓은 화면에서만, 통화 중(영상)에는 숨긴다 */
.call__tape { display: none; }
@media (min-width: 1024px) {
  body.p-call .call__tape {
    display: block; position: absolute; z-index: 1; width: 96px; height: 28px; pointer-events: none;
    top: 84px; background: rgba(234,200,160,.72); box-shadow: 0 1px 2px rgba(60,30,20,.2);
  }
  body.p-call .call__tape--a { left: calc(max(40px, 8vw) - 26px); transform: rotate(-38deg); top: 100px; }
  body.p-call .call__tape--b { left: calc(max(40px, 8vw) + min(38vw, 460px) - 64px); transform: rotate(32deg); top: 82px; }
  body.p-call .call.is-live .call__tape { display: none; }
  /* 머리 = 시안 .topbar 처럼 밤색 막대 + 금빛 헤어라인 */
  body.p-call .topbar {
    min-height: 64px; padding: 8px 24px; background: rgba(59,40,48,.72); text-shadow: none;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(230,204,154,.35);
  }
  body.p-call .topbar__title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
}
/* 서랍 아래 끝: 스크롤로 이어지는 줄이 입력창에 뚝 잘리지 않고 종이 속으로 스러진다 */
.stamps { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
/* 넓은 화면: 앱 막대(반투명) 뒤로 비치는 말풍선을 가린다 — 방 머리 위쪽을 종이로 채운다(앱 막대 z 가 더 높아 막대는 그대로 보인다) */
@media (min-width: 1024px) {
  body.p-room .topbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 80px; background: var(--paper); pointer-events: none; }
}

/* ───────── round 4 ───────── */
/* 머리 아이콘 = 시안 .ico (선 아이콘, viewBox 24) — 전화·영상·메뉴 모두 같은 선 */
.room-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.room-ico--kebab { fill: currentColor; stroke: none; }
body.p-room .room-call svg.room-ico { width: 24px; height: 24px; }
body.p-room .room-menu__button {
  display: inline-grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--rose); font-size: 0; line-height: 0;
}
body.p-room .room-menu__button:hover, body.p-room .room-menu__button[aria-expanded="true"] { color: var(--rose-deep); background: rgba(242,210,214,.45); }

/* 답장 듣기 = 시안 .qbtn (흰 바탕 · 로즈 헤어라인 알약 · 아이콘 + 글) */
body.p-room .bubble__play {
  gap: 6px; min-width: 0; min-height: 48px; margin-top: 8px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px; background: #fff; color: var(--rose-deep);
  font-size: 15px; font-weight: 500; line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: background .38s, box-shadow .38s;
}
body.p-room .bubble__play:hover:not(:disabled) { background: var(--blush); box-shadow: inset 0 0 0 1px var(--rose); }
.bubble__play-ico { width: 18px; height: 18px; flex: none; fill: currentColor; }
body.p-room .bubble__play.is-loading::after { border-color: rgba(178,58,98,.25); border-top-color: var(--rose); }
body.p-room .bubble__play.is-error { background: var(--danger, #c0392b); color: #fff; box-shadow: none; }

/* 넓은 화면의 방 머리 = 시안의 흰 카드(헤어라인 · 20px 모서리 · 부드러운 그림자 · 와시) */
@media (min-width: 1024px) {
  body.p-room .topbar {
    top: 92px; border: 1px solid rgba(178,58,98,.16); border-radius: 20px;
    background-color: var(--card); background-image: var(--washi);
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 28px -18px rgba(120,50,70,.35);
  }
  body.p-room .topbar::after { display: none; }
  body.p-room .topbar::before { left: -1px; right: -1px; bottom: calc(100% + 1px); height: 92px; }
  body.p-room .room-main { padding-top: 12px; }
}
/* 시안 데스크톱 그리드(1280 에서 90–1190 = 1100px, 우측 카드 360 · 간격 40)에 맞춘다 */
@media (min-width: 1180px) {
  body.p-room { --app-max: 1164px; --side-w: 360px; --side-gap: 40px; }
}

/* 통화 · 특대 글자(폰): 편지 카드가 얼굴 위로 올라오지 않게 — 사진이 이미 얼굴이라 작은 원형 사진을 빼고, 판 아래를 짙게 */
@media (max-width: 699px) {
  html[data-fs="xl"] body.p-call .call:not(.is-live) .call__avatar { display: none; }
  html[data-fs="xl"] body.p-call .call__panel { gap: 6px; padding-top: 28px; }
  html[data-fs="xl"] body.p-call .call__scrim { background: linear-gradient(to bottom, rgba(59,40,48,.35) 0%, transparent 16%, transparent 24%, rgba(90,49,64,.9) 46%, #3b2830 72%); }
}

/* 특대 · 360: ‹ 가 화면 끝에 붙지 않게, 메뉴 글자는 본문처럼 키운다(머리는 .app zoom 밖) */
html[data-fs="l"] .room-menu__row, html[data-fs="l"] .room-menu__exit { font-size: 19px; }
html[data-fs="xl"] .room-menu__row, html[data-fs="xl"] .room-menu__exit { font-size: 20px; }
html[data-fs="l"] .room-menu__nlabel { font-size: 19px; }
html[data-fs="l"] .room-menu :is(.field__input, .btn, .room-menu__warn, .linkish) { font-size: 18px; }
html[data-fs="xl"] .room-menu__nlabel { font-size: 20px; }
html[data-fs="xl"] .room-menu :is(.field__input, .btn, .room-menu__warn, .linkish) { font-size: 19px; }
@media (max-width: 379px) {
  html[data-fs="xl"] body.p-room .topbar { padding-left: 6px; }
  html[data-fs="xl"] body.p-room .topbar__back { min-width: 40px; }
  html[data-fs="xl"] .room-head__ai { margin-left: 5px; }
  html[data-fs="xl"] .composer { gap: 3px; padding-left: 6px; padding-right: 6px; }
  html[data-fs="xl"] .composer__photo { width: 38px; height: 38px; min-height: 38px; }
  html[data-fs="xl"] .composer__send { padding: 0 10px; }
  html[data-fs="xl"] .composer__input { padding-left: 8px; padding-right: 6px; }
}
/* 머리 위 틈을 채우는 종이 = 몸의 배경 그대로(고정) — 띠처럼 보이지 않게. 고정 배경은 transform 안에서 풀리므로 여백으로 민다 */
@media (min-width: 1024px) {
  body.p-room .topbar::before {
    background-color: var(--paper);
    background-image: var(--washi), var(--fibre),
      radial-gradient(1200px 600px at 110% -10%, rgba(242,210,214,.55), transparent 60%),
      radial-gradient(900px 500px at -20% 30%, rgba(248,230,228,.7), transparent 60%);
    background-attachment: fixed;
  }
}
@media (min-width: 1080px) {
  body.p-room .topbar { transform: none; margin-left: auto; margin-right: calc((100% - var(--app-max)) / 2 + 32px); }
}

/* ════ 디자인 B — my ════ */
/* 디자인 B — my 영역 (디자인 워크플로 작업 파일. 끝나면 app.css 로 합친다)
 * 시안 styles.css MY 블록(625–750, 데스크톱 ≥1024)의 값을 그대로 옮긴다. app.css 의 예전 p-my 규칙 위에 덮는다. */

/* 칸 간격 — 시안 .mycols/.col-l/.col-r/.menus */
.p-my .mycols { gap: 22px; padding-top: 0; }   /* .app 이 이미 위 여백을 준다 — 시안과 같은 높이 */
.p-my .mycols__l { gap: 18px; }
.p-my .mycols__r { gap: 26px; }
.p-my .menus { gap: 26px; }

/* 프로필 카드 — 시안 .prof (그림자 없음, 26/20/22) */
.p-my .myprof { padding: 26px 20px 22px; border-radius: 28px; box-shadow: none; color: var(--ink); }
.p-my .myprof__row { gap: 16px; align-items: center; }
.p-my .myprof__av { width: 80px; height: 80px; font-size: 32px; }
/* 모서리 벚꽃 — 시안 .me svg (symbol 을 크기 없이 <use> → 오른쪽 아래 꽃잎만 걸친다) */
.p-my .myprof__bloom { right: -6px; bottom: -4px; width: 32px; height: 32px; overflow: hidden; }
.p-my .myprof__name { font-size: 25px; letter-spacing: .04em; line-height: 1.4; }
.p-my .myprof__name small { font-size: 16px; font-weight: 500; margin-left: 0; }
.p-my .myprof__mail { margin-top: 4px; }

/* 통계 — 시안 .stats */
.p-my .mystats { gap: 8px; margin-top: 20px; }
.p-my .mystats li { padding: 12px 4px; border-radius: 16px; }

/* 코인 카드 — 시안 .coin.letter */
.p-my .coincard { padding: 22px 20px 20px; border-radius: 28px; background: var(--card) var(--washi); box-shadow: var(--shadow-md); }
.p-my .coincard__amt { margin: 6px 0 2px; font-size: 44px; line-height: 1.2; }
.p-my .coincard__amt small { font-size: 18px; margin-left: 6px; letter-spacing: 0; }
.p-my .coincard__bonus { margin: 0 0 16px; }
.p-my .coincard__cta { margin-top: 0; }
.p-my .coincard__amt + .coincard__cta { margin-top: 16px; }   /* 보너스가 없을 때 */
.p-my .coincard__deco { right: 16px; top: 14px; width: 60px; height: 60px; opacity: .9; }

/* 읽기 설정 — 시안 .comfort (두 스위치가 한 줄 묶음 안에 위아래로) */
.p-my .comfort { padding: 20px; border-radius: 28px; }
.p-my .comfort__lead { margin: 0 0 14px; }
.p-my .comfort__row { margin-top: 14px; }
.p-my .comfort__row + .comfort__row { margin-top: 14px; }
.p-my .comfort .switch { min-height: 56px; padding: 8px 4px; }
.p-my .comfort .switch + .switch { margin-top: 0; }

/* 우표첩 — 시안 .album.letter */
.p-my .album { border-radius: 20px; padding: 18px 14px 16px; gap: 22px 16px; }
.p-my .stampc__name { gap: 6px; margin-top: 8px; }

/* 메뉴 — 시안 .mgroup h2 / .menu.letter */
.p-my .mgroup__title { margin: 6px 0 10px 4px; }
.p-my .menu { padding: 6px; border-radius: 20px; }
.p-my .menu__item { gap: 14px; min-height: 60px; padding: 8px 12px; font-size: 17px; }
.p-my .menu__val + .menu__arrow { margin-left: 4px; }
.p-my .menu--quiet { box-shadow: inset 0 0 0 1px var(--line); }

/* 사업자 정보 — 시안 .company */
.p-my .company-info { margin: 4px 0 10px; padding: 16px; border-radius: 12px; background: rgba(245,235,226,.7); line-height: 1.9; }

@media (min-width: 960px) { .p-my .mycols { gap: 40px; } }   /* app.css 의 두 칸 전환점과 같게 */
@media (min-width: 1024px) {
  /* 시안은 데스크톱에서 화면 제목 줄이 없다(상단 탭바가 대신한다). 제목 줄을 접되 h1 은 낭독기에 남긴다 */
  body.p-my .topbar { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* 헤더(80) + 32 = 시안 첫 카드 위치. .app 위 여백 28 을 빼고 4 */
  .p-my .mycols { padding-top: 4px; }
}

/* 특대 글자 · 폰: 우표 세 장이면 이름·AI 배지가 세 줄로 갈라진다 → 두 장씩 */
@media (max-width: 599px) {
  html[data-fs="xl"] .p-my .album { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 22px; }
}

/* 라운드 2 ---------------------------------------------------------------- */
/* 통계 이름표 — 낱말 사이(<wbr>)에서만 줄을 바꾼다. 특대 글자에서 "お話しし/た相手" 로 갈리던 것 */
.p-my .mystats li > .mystats__l { word-break: keep-all; overflow-wrap: anywhere; }
/* 프로필 편집 링크 — 한 덩어리로 (특대에서 "プロフィール編/集" 방지). 자리가 모자라면 아이콘 뒤에서 통째로 내린다 */
.p-my .myprof__edit span { white-space: nowrap; }
.p-my .myprof__text { min-width: 0; }

/* 스위치 — 시안 .switch__t: 꺼짐은 #d9c7cb 한 색, 켜짐은 진한 장미색.
 * OS 가 동작 줄이기면 켜진 채 잠기는데(disabled), 흐리게(.7) 하지 않고 시안처럼 또렷이 둔다 — 잠김은 설명 문구가 알린다 */
.p-my .comfort .switch__t { background: #d9c7cb; box-shadow: inset 0 0 0 1px rgba(156,129,137,.35); }
.p-my .comfort .switch[aria-checked="true"] .switch__t { background: var(--rose-deep); box-shadow: none; }
.p-my .comfort .switch:disabled .switch__t { opacity: 1; }

/* 메뉴 값 — 미확인 이메일은 더 옅게 (확인 완료는 기본 색) */
.p-my .menu__val--muted { color: var(--color-text-muted); }

/* 우표첩 — 빈칸 없이 줄을 채운다: 폰(3열) 6장 · 데스크톱(5열) 5장. 나머지는 "チャットへ" 로 */
@media (max-width: 959px) { .p-my .album > .stampc:nth-child(n+7) { display: none; } }
@media (min-width: 960px) { .p-my .album > .stampc:nth-child(n+6) { display: none; } }
/* 메뉴 줄 — 이름은 낱말 중간에서 갈리지 않게(특대에서 "メールアド/レス"), 모자라면 값 쪽이 줄어 접힌다 */
.p-my .menu__label { word-break: keep-all; overflow-wrap: anywhere; }
.p-my .menu__val { white-space: nowrap; }
/* 특대 · 폰: 이메일 줄의 확인 여부 값은 접는다 — 자리가 모자라 "メールアド/レス" 로 갈린다 (상태는 /my/email 에서 보인다) */
@media (max-width: 599px) { html[data-fs="xl"] .p-my .menu__val--opt { display: none; } }
/* 우표 소인 문구 — 낱말 중간("最近のお便/り")에서 갈리지 않게 */
.p-my .stampc__date { word-break: keep-all; overflow-wrap: anywhere; }

/* 라운드 3 ---------------------------------------------------------------- */
/* 스위치 이름 — 낱말 사이(<wbr>)에서만 줄을 바꾼다 (360 폭에서 "控え/めに" 로 갈리던 것) */
.p-my .switch__name { word-break: keep-all; overflow-wrap: anywhere; }
/* 데스크톱 칸 폭 — 시안 .wrap(1180, 좌우 40) 안쪽 1100 과 같게 */
@media (min-width: 1024px) { .p-my .mycols { max-width: 1100px; margin-inline: auto; } }
/* 특대 · 폰: 사진을 조금 줄여 이름·편집 링크 자리를 낸다(편집 링크가 카드 안쪽 여백에 닿던 것).
 * 통계 칸은 옆 여백을 줄여 "お気に入り" 를 한 줄로 */
@media (max-width: 599px) {
  html[data-fs="xl"] .p-my .myprof__av { width: 64px; height: 64px; font-size: 26px; }
  html[data-fs="xl"] .p-my .myprof__row { gap: 12px; }
  html[data-fs="xl"] .p-my .mystats { gap: 4px; }
  html[data-fs="xl"] .p-my .mystats li { padding-inline: 0; letter-spacing: 0; }
}
/* 360 폭: 우표 칸이 ~89px 라 네 글자 이름 + AI 배지가 두 줄로 갈린다 → 칸 사이·안쪽 여백과 이름 크기를 조금 줄인다 */
@media (max-width: 380px) {
  html:not([data-fs="xl"]) .p-my .album { padding-inline: 10px; column-gap: 10px; }
  html:not([data-fs="xl"]) .p-my .stampc__name { font-size: 16px; gap: 4px; }
  html:not([data-fs="xl"]) .p-my .stampc__name .badge--ai { padding: 0 5px; }
}
.p-my .company-info__note { margin: 0 0 6px; font-size: 15px; color: var(--muted); }

/* ════ 디자인 B — account ════ */
/* 디자인 B — account 영역 (디자인 워크플로 작업 파일. 끝나면 app.css 로 합친다)
 * 범위: 마이 하위(/my/*, index 제외) + 스토어. partials/my_head.php 가 body 에 .p-acct 를 붙인다.
 * 시안(b-sakura-letter/styles.css)의 MY 부품 값을 그대로 옮긴다:
 *   .sec-head → .ac-head · .letter → .ac-card · .menu/.mic → .ac-menu/.ac-mic · .switch → .ac-switch
 *   .fsopts → .ac-seg · .coin → .ac-coin · .prof → .ac-prof · .album/.stampc → .ac-album
 * 모든 규칙은 .p-acct 아래에만 둔다 — 다른 화면에 새지 않게. */

/* ── 레이아웃: 폰 한 줄, 1024+ 는 시안 .mycols (400px | 나머지) ───────────── */
.p-acct .app { gap: 22px; }
.p-acct .ac { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 4px; }
.p-acct .ac__l, .p-acct .ac__r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; align-content: start; }
.p-acct .ac__r { gap: 26px; }
.p-acct .ac__l > *, .p-acct .ac__r > * { min-width: 0; margin: 0; }

/* ── 섹션 머리 (시안 .sec-head) ── */
.p-acct .ac-head { margin: 0; }
.p-acct .ac-head .eyebrow { display: block; font-family: var(--font-script); font-size: 22px; line-height: 1; color: var(--rose); letter-spacing: 0; margin-bottom: 6px; }
.p-acct .ac-head__h { word-break: keep-all; margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.45; letter-spacing: .04em; color: var(--ink); text-wrap: balance; }
.p-acct .ac-head__lead { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; line-break: strict; text-wrap: pretty; }

/* 선 아이콘 */
.p-acct .ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── 편지지 카드 (시안 .letter + .comfort 치수) ── */
.p-acct .ac-card, .p-acct .form.ac-card, .p-acct [data-island="photos"].ac-card {
  position: relative; display: flex; flex-direction: column; gap: 16px; margin: 0;
  padding: 20px; border: 0; border-radius: var(--radius-lg);
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
.p-acct .ac-card__h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;
  font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; color: var(--ink);
}
.p-acct .ac-card__h > .ico { width: 24px; height: 24px; color: var(--rose); }
.p-acct .ac-card__note, .p-acct .ac-card__body { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); line-break: strict; }
.p-acct .ac-card__body { font-size: 16px; color: var(--ink); }
/* 잔잔한 카드(휴회·탈퇴) — 시안 .menu--quiet: 바탕 없이 선만 */
.p-acct .ac-card--quiet { background: rgba(255,253,250,.55); box-shadow: inset 0 0 0 1px var(--line); }

/* 카드 묶음 머리 (시안 .mgroup h2 — 꽃잎 표지) */
.p-acct .ac-group { display: grid; gap: 0; }
.p-acct .ac-group__h {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 10px 4px; padding: 0;
  font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
}
.p-acct .ac-group__h::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
}

/* 곁 안내 — 시안 .coin__note(방패 + 15px) 를 옅은 와시 쪽지(.company 결)에 */
.p-acct .ac-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  font-size: 15px; line-height: 1.7; color: var(--ink); line-break: strict; text-wrap: pretty;
}
.p-acct .ac-note .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--green); }
.p-acct .ac__l > .ac-note { padding: 14px 16px; border-radius: var(--radius); background: rgba(245,235,226,.7); }
.p-acct .ac-note--info .ico { color: var(--rose); }
.p-acct .ac__l > .ac-note--info { background: #fbe9ec; box-shadow: inset 0 0 0 1px rgba(178,58,98,.16); }

/* 아이콘 타일 (시안 .mic) */
.p-acct .ac-mic {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: var(--blush); color: var(--rose-deep);
  transition: background .38s, color .38s, transform .38s var(--ease);
}
.p-acct .ac-mic .ico { width: 22px; height: 22px; }
.p-acct .ac-mic--gold { background: #fbf0dc; color: var(--gold-ink); }

/* ── 메뉴/목록 (시안 .menu) — 편지지 한 장에 줄 ── */
.p-acct .ac-menu {
  margin: 0; padding: 6px; list-style: none; border-radius: var(--radius-md);
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
.p-acct .ac-menu > li + li { border-top: 1px solid var(--line); }
.p-acct .ac-menu > li.alist__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 12px; border-radius: 14px; }
.p-acct .ac-menu a {
  white-space: nowrap; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 12px;
  border-radius: 14px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .38s;
}
.p-acct .ac-menu a:hover { background: #fdf1f2; color: var(--ink); }
.p-acct .ac-menu a:hover .ac-mic { background: var(--rose); color: #fff; transform: rotate(-6deg); }
.p-acct .ac-menu__label { flex: 1; min-width: 0; white-space: normal; }
.p-acct .ac-menu__arr { margin-left: auto; display: grid; color: #a8929a; transition: transform .38s var(--ease); }
.p-acct .ac-menu__arr .ico { width: 20px; height: 20px; }
.p-acct .ac-menu a:hover .ac-menu__arr { transform: translateX(3px); color: var(--rose); }
.p-acct .alist__body { flex: 1; min-width: 0; }
.p-acct .alist__name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0;
  font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere;
}
.p-acct .alist__meta { margin: 2px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-acct .ac-menu .btn { flex: none; }

/* 얼굴 — 시안 .av--ring (장식 링, 접속 표시 아님) */
.p-acct .ac-av {
  position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--petal-2), #f6dfb9, var(--rose), var(--petal-2));
}
.p-acct .ac-av img, .p-acct .ac-av:empty::after {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  background: var(--blush); box-shadow: 0 0 0 3px var(--card);
}

/* AI 배지 — 시안 .ai (이름 옆 고지, 법무) */
.p-acct .badge--ai {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px;
  font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  color: var(--rose-deep); background: #fff; box-shadow: inset 0 0 0 1px rgba(143,43,77,.4); flex: none;
}

/* ── 입력 ── */
.p-acct .field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.p-acct .field__label { font-size: 16px; font-weight: 500; color: var(--ink); }
.p-acct .field__input {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 14px;
  font: inherit; font-size: 17px; line-height: 1.7; color: var(--ink);
  background-color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.p-acct textarea.field__input { resize: vertical; min-height: 104px; }
.p-acct select.field__input { background-color: var(--paper); padding-right: 44px; }
.p-acct .field__input:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 4px rgba(178,58,98,.12); }
.p-acct .msg { margin: 0; font-size: 16px; }
.p-acct .msg[hidden] { display: none; }

/* 버튼 — 시안 .btn / .btn--rose / .btn--ghost / .btn--sm */
.p-acct .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; border-radius: var(--radius-pill);
  font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-decoration: none;
}
.p-acct .btn .ico { width: 20px; height: 20px; }
.p-acct .btn--ghost { color: var(--rose-deep); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--shadow-sm); }
.p-acct .btn--ghost:hover { color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px var(--rose), var(--shadow-sm); transform: translateY(-1px); }
.p-acct .btn--sm { min-height: 48px; padding: 0 20px; font-size: 16px; letter-spacing: .04em; }
.p-acct .ac-card > .btn, .p-acct .ac-form__foot .btn, .p-acct .ac-code .btn { width: 100%; }

/* ── 프로필 편집 ── */
.p-acct .form.ac-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; }
.p-acct .ac-form__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.p-acct .ac-form__foot { display: grid; gap: 12px; }
/* 스타일 칩 묶음 — fieldset 은 카드지만 칩은 가로로 흐른다 */
.p-acct fieldset.ac-card.choices--wrap { flex-direction: row; flex-wrap: wrap; gap: 8px; min-inline-size: 0; }
.p-acct fieldset.ac-card.choices--wrap > legend.ac-card__h { float: left; width: 100%; margin: 0 0 8px; }
.p-acct .choices--wrap legend .hint { margin-left: 2px; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.p-acct .chip span {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 500; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer;
}
.p-acct .chip input:checked + span { background: var(--rose-deep); color: #fff; box-shadow: none; font-weight: 700; }

/* 프로필 카드 — 시안 .prof (블러시 오로라 + 와시) */
.p-acct .ac-prof {
  position: relative; overflow: hidden; isolation: isolate; padding: 26px 20px 22px; border-radius: var(--radius-lg); color: var(--ink);
  background: linear-gradient(120deg, #f9d9e0, #fbe9dc, #f1d2e0, #ecdcf0, #fde3da, #f9d9e0) 0 50% / 300% 300%;
  animation: ac-aurora 30s cubic-bezier(.33,0,.2,1) infinite alternate;
}
.p-acct .ac-prof::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--washi), linear-gradient(180deg, rgba(255,253,250,.15), rgba(255,253,250,.4)); }
@keyframes ac-aurora { to { background-position: 100% 50%; } }
.p-acct .ac-prof__row { display: flex; gap: 16px; align-items: center; }
.p-acct .ac-prof__av {
  position: relative; width: 80px; height: 80px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff, #f6d3da 70%);
  box-shadow: 0 0 0 4px #fff, 0 10px 24px -10px rgba(143,43,77,.5);
  font-family: var(--font-serif); font-size: 32px; font-weight: 600; color: var(--rose-deep);
}
.p-acct .ac-prof__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.p-acct .ac-prof__bl { position: absolute; right: -6px; bottom: -4px; width: 32px; height: 32px; }
.p-acct .ac-prof__text { min-width: 0; }
.p-acct .ac-prof__name { margin: 0; font-family: var(--font-serif); font-size: 25px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; overflow-wrap: anywhere; }
.p-acct .ac-prof__name small { font-size: 16px; font-weight: 500; }
.p-acct .ac-prof__age { margin: 2px 0 0; font-family: var(--font-hand); font-weight: 600; font-size: 17px; color: var(--rose-deep); }
.p-acct .ac-prof__edit { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--rose-deep); text-decoration: none; }
.p-acct .ac-prof__edit .ico { width: 18px; height: 18px; }
.p-acct .ac-prof__edit:hover { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 4px; }
.p-acct .ac-prof__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0 4px; list-style: none; }
.p-acct .ac-stamp { display: block; aspect-ratio: 5 / 6; background: #fffdf9; filter: drop-shadow(0 6px 10px rgba(110,40,60,.2)); }
.p-acct .ac-stamp img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.p-acct .ac-prof__strip li:nth-child(odd) .ac-stamp { transform: rotate(-2deg); }
.p-acct .ac-prof__strip li:nth-child(even) .ac-stamp { transform: rotate(1.5deg); }

/* ── 스위치 줄 (시안 .switch) ── */
.p-acct .ac-switches { gap: 0; padding-top: 8px; }
.p-acct .ac-switch {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 4px; cursor: pointer;
  font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ink);
}
.p-acct .ac-switch + .ac-switch { border-top: 1px solid var(--line); }
.p-acct .ac-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.p-acct .ac-switch__v { font-size: 15px; font-weight: 700; color: var(--rose-deep); min-width: 2.5em; text-align: right; }
.p-acct .ac-switch__v--off { color: var(--muted); }
.p-acct .ac-switch input:checked ~ .ac-switch__v--off, .p-acct .ac-switch input:not(:checked) ~ .ac-switch__v--on { display: none; }
.p-acct .ac-switch__t { position: relative; width: 56px; height: 32px; flex: none; border-radius: 16px; background: #d9c7cb; transition: background .38s; }
.p-acct .ac-switch__t::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .38s var(--ease);
}
.p-acct .ac-switch input:checked ~ .ac-switch__t { background: var(--rose-deep); }
.p-acct .ac-switch input:checked ~ .ac-switch__t::after { transform: translateX(24px); }
.p-acct .ac-switch input:focus-visible ~ .ac-switch__t { outline: 3px solid var(--rose); outline-offset: 3px; }
.p-acct .ac-switches > .msg { margin-top: 12px; }
.p-acct .ac-switches > .btn { margin-top: 18px; }

/* ── 고르기 칸 (시안 .fsopts) ── */
.p-acct .ac-seg-wrap { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.p-acct .ac-seg-wrap > legend { float: left; width: 100%; margin: 0 0 14px; }
.p-acct .ac-seg { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p-acct .ac-seg__opt { position: relative; display: block; }
.p-acct .ac-seg__opt--wide { grid-column: 1 / -1; }
.p-acct .ac-seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.p-acct .ac-seg__opt span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px; border-radius: 14px; cursor: pointer; text-align: center;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3;
  transition: background .38s, color .38s;
}
.p-acct .ac-seg__opt span:hover { background: #fdf1f2; }
.p-acct .ac-seg__opt input:checked + span { background: var(--rose-deep); color: #fff; box-shadow: none; font-weight: 700; }
.p-acct .ac-seg__opt input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 3px; }

/* ── 저장 버튼 + 결과 줄 (my/language — language-form 섬). 결과 줄 자리는 늘 잡혀 있어 문구가 생기고 사라져도 아무것도 밀리지 않는다 ── */
.p-acct .ac-save { display: grid; gap: 8px; }
.p-acct .ac-save > .btn { width: 100%; }
.p-acct .ac-save > .btn:disabled { cursor: progress; }
.p-acct .ac-status {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; margin: 0;
  font-size: 15px; line-height: 1.6; color: var(--muted); text-align: center; transition: opacity .6s var(--ease);
}
.p-acct .ac-status > .ico { display: none; width: 20px; height: 20px; }
.p-acct .ac-status.is-ok { color: var(--green); font-weight: 500; }
.p-acct .ac-status.is-ok > .ico:nth-of-type(1), .p-acct .ac-status.is-err > .ico:nth-of-type(2) { display: block; }
.p-acct .ac-status.is-err { color: var(--danger); font-weight: 500; }
.p-acct .ac-status.is-gone { opacity: 0; }
/* 표시 언어를 바꾼 뒤 갈아 끼운 부분 — 등장 애니메이션을 다시 돌리지 않는다 */
.p-acct .app[data-swapped] > *, .p-acct .app[data-swapped] .ac__l > *, .p-acct .app[data-swapped] .ac__r > * { animation: none !important; }

/* ── 사진 관리 — 우표(톱니 테) ── */
.p-acct .ac-photos .photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin: 0; padding: 12px 6px 0; list-style: none; }
.p-acct .ac-photos .photos__item { position: relative; aspect-ratio: auto; }
.p-acct .photos__ph { position: relative; display: block; width: 100%; aspect-ratio: 5 / 6; background: #fffdf9; filter: drop-shadow(0 6px 10px rgba(110,40,60,.2)); transition: transform .38s var(--ease); }
.p-acct .photos__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; border-radius: 0; box-shadow: none; background: var(--blush); cursor: zoom-in; }
.p-acct .ac-photos .photos__item:nth-child(odd) .photos__ph { transform: rotate(-2deg); }
.p-acct .ac-photos .photos__item:nth-child(even) .photos__ph { transform: rotate(1.5deg); }
/* 대표(첫 장) — 봉랍 모양 표지 */
.p-acct .photos__cover {
  position: absolute; z-index: 3; top: -10px; left: -6px; display: inline-grid; place-items: center; height: 32px; padding: 0 12px;
  border-radius: 16px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .04em;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 3px 8px -3px rgba(125,34,57,.6), inset 0 -2px 4px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.25);
  transform: rotate(-6deg);
}
.p-acct .photos__cover[hidden] { display: none; }
/* 지우기 — 누르는 칸 48px, 보이는 동그라미 32px */
.p-acct .photos__remove {
  position: absolute; z-index: 3; top: -14px; right: -12px; width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: none; font-size: 0; cursor: pointer;
}
.p-acct .photos__remove::before {
  content: "×"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--card); color: var(--rose-deep); font-size: 22px; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--line-2), 0 4px 10px -4px rgba(110,40,60,.45);
}
.p-acct .photos__remove:hover::before { background: var(--danger); color: #fff; box-shadow: none; }
.p-acct .photos__move { position: static; display: flex; gap: 8px; margin-top: 12px; }
.p-acct .photos__arrow {
  flex: 1; min-height: 48px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--card); color: var(--rose-deep); font-size: 24px; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.p-acct .photos__arrow:first-child, .p-acct .photos__arrow:last-child { border-radius: var(--radius-pill); }
.p-acct .photos__arrow:hover:not(:disabled) { background: var(--rose); color: #fff; box-shadow: none; }
.p-acct .photos__arrow:disabled { opacity: .35; cursor: default; }
.p-acct .ac-photos .photos__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.p-acct .ac-photos .photos__actions .btn { flex: 1 1 100%; min-width: 0; white-space: nowrap; }
.p-acct .ac-photos .photos__actions .btn[hidden] { display: none; }

/* ── 구매한 사진 — 시안 우표첩 (.album / .stampc) ── */
.p-acct .ac-album {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; margin: 0; padding: 18px 14px 16px; list-style: none;
  border-radius: var(--radius-md);
}
.p-acct .ac-album__item { position: relative; aspect-ratio: auto; text-align: center; }
.p-acct .ac-album__open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 12px; cursor: zoom-in; }
.p-acct .ac-album__item:nth-child(odd) .photos__ph { transform: rotate(-2deg); }
.p-acct .ac-album__item:nth-child(even) .photos__ph { transform: rotate(1.5deg); }
.p-acct .ac-album__open:hover .photos__ph { transform: rotate(0) translateY(-4px); }
.p-acct .ac-album__pm { position: absolute; z-index: 2; right: -12px; bottom: -14px; width: 58px; height: 58px; color: rgba(143,43,77,.62); transform: rotate(-16deg); pointer-events: none; }
.p-acct .ac-album__pm text { font-weight: 600; }
.p-acct .ac-album .tape { position: absolute; z-index: 3; top: -4px; width: 36px; height: 14px; background: rgba(234,200,160,.6); pointer-events: none; }
.p-acct .ac-album .tape--a { left: -8px; transform: rotate(-38deg); }
.p-acct .ac-album .tape--b { right: -8px; transform: rotate(38deg); }
.p-acct .ac-album__meta { display: block; margin-top: 10px; font-family: var(--font-hand); font-size: 15px; line-height: 1.4; color: var(--muted); }
.p-acct .ac-album__meta > * { display: block; }
.p-acct .ac-album .photos__item { padding: 0; background: none; border-radius: 0; box-shadow: none; transform: none; }
.p-acct .ac-album .photos__remove { position: static; margin: 0 auto; }
/* 지울지 묻는 칸 — 칸이 좁아(3열) 사진 위가 아니라 화면 아래 쪽지로 띄운다 */
.p-acct .ac-album .confirm {
  position: fixed; z-index: 60; left: 16px; right: 16px; top: 50%; bottom: auto; transform: translateY(-50%);
  max-width: 440px; margin: 0 auto; padding: 18px; border-radius: var(--radius-md); text-align: left;
  background: var(--card); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(179,38,30,.28);
}
.p-acct .ac-album .confirm[hidden] { display: none; }

/* ── 코인 카드 (시안 .coin) ── */
.p-acct .ac-coin {
  position: relative; overflow: hidden; margin: 0; padding: 22px 20px 20px; border-radius: var(--radius-lg);
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md);
}
.p-acct .ac-coin__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.p-acct .ac-coin__label .ico { color: var(--gold-ink); }
.p-acct .ac-coin__amt { margin: 6px 0 2px; font-family: var(--font-serif); font-weight: 600; font-size: 44px; line-height: 1.2; color: var(--ink); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.p-acct .ac-coin__num {
  background: linear-gradient(100deg, var(--ink) 40%, #b88a4a 47%, #e8c98f 50%, #b88a4a 53%, var(--ink) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ac-gild 1.6s cubic-bezier(.33,0,.2,1) .5s 1 both;
}
@keyframes ac-gild { from { background-position: 100% 0; } to { background-position: 0 0; } }
.p-acct .ac-coin__amt small { font-size: 18px; margin-left: 6px; color: var(--muted); font-weight: 500; }
.p-acct .ac-coin__bonus { margin: 0; font-size: 15px; color: var(--gold-ink); }
.p-acct .ac-coin .ac-note { margin-top: 14px; }
.p-acct .ac-coin__deco { position: absolute; right: 16px; top: 14px; width: 60px; opacity: .9; pointer-events: none; }

/* ── 스토어 패키지 — 메뉴 줄 ── */
.p-acct .store.ac-menu { display: block; margin: 0; }
.p-acct .store__item {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px; margin: 0;
  border: 0; border-radius: 14px; background: none; box-shadow: none;
}
.p-acct .store__body { flex: 1; min-width: 0; }
.p-acct .store__amount { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: var(--ink); }
.p-acct .store__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--gold-ink); color: #fff; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.p-acct .store__bonus { margin: 2px 0 0; font-size: 15px; font-weight: 500; color: var(--gold-ink); }
.p-acct .store__price { flex: none; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--rose-deep); font-variant-numeric: tabular-nums; }

/* ── 문의 — 봉랍 Q + 손글씨 답장 ── */
.p-acct .alist--qa > li.alist__row { align-items: flex-start; padding: 16px 12px; }
.p-acct .alist--qa .alist__name { display: block; margin-top: 4px; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.7; }
.p-acct .qa__q {
  position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: #fbe2e8;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 4px 10px -4px rgba(125,34,57,.6), inset 0 -2px 4px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.25);
}
.p-acct .qa__q::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(255,230,236,.5); }
.p-acct .alist--qa .alist__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.p-acct .qa__state { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 0 10px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; background: var(--paper-2); color: var(--muted); }
.p-acct .qa__state--done { background: #eaf4ee; color: var(--green); }
.p-acct .answer {
  position: relative; margin: 12px 0 0; padding: 12px 14px 12px 44px; border-radius: 14px;
  background: #fdf3f3; box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--font-hand); font-size: 17px; line-height: 1.8; color: var(--ink);
}
.p-acct .answer::before { content: "A"; position: absolute; left: 16px; top: 11px; font-family: var(--font-serif); font-weight: 600; color: var(--rose); }

/* ── 휴회·탈퇴 ── */
.p-acct .ac-warn { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-md); font-weight: 500; }
.p-acct .ac-warn .ico { width: 22px; height: 22px; margin-top: 3px; }
.p-acct .ac-radios { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; min-inline-size: 0; }
.p-acct .ac-radios > legend { float: left; width: 100%; margin: 0 0 8px; }
.p-acct .ac-radios .check { clear: both; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; font-size: 17px; line-height: 1.6; cursor: pointer; }
.p-acct .ac-radios .check + .check { border-top: 1px solid var(--line); }
.p-acct .ac-radios .check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--rose-deep); }
.p-acct [data-island="withdraw"] [data-role="ask"] { width: 100%; color: var(--danger); box-shadow: inset 0 0 0 1.5px rgba(179,38,30,.55), var(--shadow-sm); }
.p-acct [data-island="withdraw"] [data-role="ask"][hidden] { display: none; }
.p-acct .confirm { display: flex; flex-direction: column; gap: 10px; }
.p-acct .confirm .btn { width: 100%; }
.p-acct .confirm .linkish { min-height: 48px; font-size: 16px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }

/* ── 비었을 때 — 벚꽃 한 송이 + 한 줄 ── */
.p-acct .ac-empty { align-items: center; gap: 10px; padding: 34px 20px 30px; text-align: center; }
.p-acct .ac-empty__bl { width: 52px; height: 52px; }
.p-acct .ac-empty p { margin: 0; font-family: var(--font-hand); font-size: 17px; color: var(--muted); }

/* ── 등장 (시안 .rv: 24px 떠오름 + 80ms 차례). calm·reduced-motion 이면 없음 ── */
@keyframes ac-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.p-acct .app > *, .p-acct .ac__l > *, .p-acct .ac__r > * { animation: ac-rise .7s var(--ease) both; }
.p-acct .ac { animation: none; }
.p-acct .ac__l > :nth-child(2), .p-acct .ac__r > :nth-child(1) { animation-delay: 80ms; }
.p-acct .ac__l > :nth-child(3), .p-acct .ac__r > :nth-child(2) { animation-delay: 160ms; }
.p-acct .ac__r > :nth-child(n+3) { animation-delay: 240ms; }
.p-acct .app > .viewer, .p-acct .app > template { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .p-acct .app > *, .p-acct .ac__l > *, .p-acct .ac__r > *, .p-acct .ac-prof, .p-acct .ac-coin__num { animation: none !important; }
  .p-acct .ac-coin__num { background-position: 0 0; }
}
html.calm .p-acct .app > *, html.calm .p-acct .ac__l > *, html.calm .p-acct .ac__r > *, html.calm .p-acct .ac-prof, html.calm .p-acct .ac-coin__num { animation: none !important; }
html.calm .p-acct .ac-coin__num { background-position: 0 0; }

/* ── 태블릿 ── */
@media (min-width: 600px) {
  body.p-acct .app { max-width: 680px; }
  .p-acct .ac-photos .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-acct .ac-photos .photos__actions .btn { flex: 1 1 0; }
  .p-acct .ac-photos .photos__actions .btn--primary { flex: 2 1 0; }
  .p-acct .ac-album { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 데스크톱 — 시안 .mycols (400px | 나머지), 왼쪽은 따라 내려온다 ── */
@media (min-width: 1024px) {
  body.p-acct .app { max-width: 1180px; margin: 0 auto; padding: 8px 40px 64px; }
  body.p-acct .topbar { max-width: 1180px; margin: 0 auto; padding: 22px 40px 6px; min-height: 0; background: transparent; border: 0; position: static; }
  .p-acct .ac { grid-template-columns: 400px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 12px; }
  .p-acct .ac__l { position: sticky; top: 100px; }
  .p-acct .ac-head__h { font-size: 27px; }
  .p-acct .ac-photos .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-acct .ac-album { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .p-acct .ac-album .confirm { position: absolute; left: -14px; right: -14px; top: 0; bottom: auto; transform: none; padding: 12px; }
}

/* 알림 스위치 — 시안 .switch (아이콘 없음). 제목 · 값 · 스위치가 한 줄, 서버가 주는 설명은 그 아래 폭 전체 */
.p-acct .ac-switch {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t v s" "d d d";
  align-items: center; column-gap: 12px; row-gap: 2px; min-height: 56px; padding: 12px 4px;
}
.p-acct .ac-switch__title { grid-area: t; font-size: 17px; font-weight: 500; line-height: 1.6; word-break: auto-phrase; }
.p-acct .ac-switch__v { grid-area: v; }
.p-acct .ac-switch__t { grid-area: s; }
.p-acct .ac-switch__desc { grid-area: d; display: block; font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--muted); line-break: strict; text-wrap: pretty; }
.p-acct .ac-switch:has(input:disabled) { opacity: .6; cursor: progress; }
/* 좁은 폭·글자 특대: オン/オフ 글자는 빼고 스위치만 (상태는 스위치 색과 낭독기의 role=switch 가 전한다) */
.p-acct .ac-switches { padding: 8px 20px; }
.p-acct .ac-switch:first-of-type { border-top: 0; }
.p-acct .ac-empty .msg { font-family: inherit; color: var(--danger); }

/* 스토어 패키지 — 시안 메뉴 줄: 금빛 아이콘 타일 + (양 · 보너스 · 가격) 세로로 */
.p-acct .store__item { align-items: center; padding: 14px 12px; }
.p-acct .store__price { display: block; margin: 4px 0 0; font-size: 18px; }

/* 비었을 때의 길 안내 — 시안 .more-link */
.p-acct .ac-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 4px;
  font-size: 16px; font-weight: 500; color: var(--rose); white-space: nowrap; text-decoration: none;
}
.p-acct .ac-link .ico { width: 18px; height: 18px; transition: transform .38s var(--ease); }
.p-acct .ac-link:hover { color: var(--rose); }
.p-acct .ac-link:hover .ico { transform: translateX(4px); }

/* 로그인 기록 — 최근 3건 + 접힌 나머지 */
.p-acct .ac-sessions { display: grid; gap: 12px; }
.p-acct .ac-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: var(--blush); color: var(--rose-deep);
}
.p-acct .ac-more > summary { list-style: none; }
.p-acct .ac-more > summary::-webkit-details-marker { display: none; }
.p-acct .ac-more__sum {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 4px; cursor: pointer;
  font-size: 16px; font-weight: 500; color: var(--rose);
}
.p-acct .ac-more__sum .ico { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .38s var(--ease); }
.p-acct .ac-more[open] .ac-more__sum .ico { transform: rotate(-90deg); }
.p-acct .ac-more[open] > .ac-menu { margin-top: 8px; }

/* 사진 관리 — 시안 .stampc 의 마스킹테이프 두 장, 대표 봉랍은 아래 왼쪽, 지우기는 아래 오른쪽 */
.p-acct .photos__item .tape { position: absolute; z-index: 3; top: -4px; width: 36px; height: 14px; background: rgba(234,200,160,.6); pointer-events: none; }
.p-acct .photos__item .tape--a { left: -8px; transform: rotate(-38deg); }
.p-acct .photos__item .tape--b { right: -8px; transform: rotate(38deg); }
.p-acct .ac-photos .photos__cover { top: auto; bottom: 60px; left: -8px; }
.p-acct .ac-photos .photos__remove { top: auto; bottom: 50px; right: -14px; }
/* 순서 바꾸기 — 둥근 작은 단추 두 개 (시안 .ibtn 결) */
.p-acct .photos__move { justify-content: center; gap: 14px; margin-top: 12px; }
.p-acct .photos__arrow {
  flex: none; width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; font-family: var(--font-serif);
  background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.p-acct .photos__arrow:first-child, .p-acct .photos__arrow:last-child { border-radius: 50%; }
.p-acct .photos__arrow:disabled { opacity: .3; }

/* 데스크톱에서 머리 하나뿐인 화면(알림·기록·앨범·차단·휴회·문의)은 가운데 한 단 */
@media (min-width: 1024px) {
  .p-acct .ac:has(> .ac__l > .ac-head:only-child) { grid-template-columns: minmax(0, 760px); justify-content: center; gap: 26px; }
  .p-acct .ac:has(> .ac__l > .ac-head:only-child) > .ac__l { position: static; }
  .p-acct .ac-photos .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; padding: 16px 12px 0; }
}

/* 글자 특대 + 폰: 스위치 제목이 한 단어 안에서 꺾이지 않게 카드 안쪽을 조금 넓힌다 */
@media (max-width: 599px) {
  html[data-fs="xl"] .p-acct .ac-switches { padding: 8px 14px; }
  html[data-fs="xl"] .p-acct .ac-switch { padding-inline: 0; column-gap: 10px; }
  html[data-fs="xl"] .p-acct .ac-switch__title { font-size: 15px; letter-spacing: 0; }
  html[data-fs="xl"] .p-acct .ac-switch { column-gap: 8px; }
  html[data-fs="xl"] .p-acct .store__item { padding: 12px 8px; gap: 10px; }
}
.p-acct .store__bonus { word-break: auto-phrase; }
@media (max-width: 419px) { .p-acct .photos__move { gap: 6px; } html[data-fs="xl"] .p-acct .ac-photos .photos { column-gap: 26px; } }
/* 넓은 폭: 가격은 시안 메뉴 줄의 화살표 자리(오른쪽)로 */
@media (min-width: 600px) {
  .p-acct .store__item { position: relative; padding-right: 120px; }
  .p-acct .store__price { position: absolute; right: 20px; top: 50%; margin: 0; transform: translateY(-50%); font-size: 20px; }
}

/* ── 3차 ── */
/* 목록 줄 사이 선은 시안 .menu 처럼 곧은 한 줄 — 선을 진 줄은 모서리를 둥글리지 않는다 */
.p-acct .ac-menu > li.alist__row, .p-acct .ac-menu > li.store__item { border-radius: 0; }
/* 알림 스위치 — 값(オン/オフ)은 어느 폭에서나, 값·스위치는 줄 가운데(시안 .switch align-items:center) */
.p-acct .ac-switch { grid-template-areas: "t v s" "d v s"; }
.p-acct .ac-switch__v { display: block; align-self: center; }
.p-acct .ac-switch input:checked ~ .ac-switch__v--off, .p-acct .ac-switch input:not(:checked) ~ .ac-switch__v--on { display: none; }
.p-acct .ac-switch__t { align-self: center; }
.p-acct .ac-switch:not(:has(.ac-switch__desc)) .ac-switch__title { grid-row: 1 / -1; }
@media (max-width: 419px) { .p-acct .ac-switch { column-gap: 8px; } .p-acct .ac-switch__v { min-width: 0; } }
/* 곁 안내 — 시안 .coin__note 그대로: 상자 없이 방패 + 15px 글 */
.p-acct .ac__l > .ac-note:not(.ac-note--info) { padding: 0 4px; background: none; border-radius: 0; }
/* 코인 카드 끝의 장미 단추 — 결제 준비 중이라 눌리지 않는 모양 */
.p-acct .ac-coin__buy { width: 100%; margin-top: 18px; }
.p-acct .ac-coin__buy:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* 데스크톱 사진 — 시안 우표첩(1280 에 한 줄 5장)처럼 촘촘히 */
@media (min-width: 1024px) {
  .p-acct .ac-photos .photos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; padding: 16px 8px 0; }
  .p-acct .ac-photos .photos__move { gap: 6px; }
}
/* 글자 특대 + 폰: 제목은 한 줄 전체(단어 안에서 꺾이지 않게), 설명 · 값 · 스위치가 그 아래 줄 */
@media (max-width: 599px) {
  html[data-fs="xl"] .p-acct .ac-switch { grid-template-areas: "t t t" "d v s"; }
  html[data-fs="xl"] .p-acct .ac-switch__title { font-size: 17px; grid-row: auto; }
  html[data-fs="xl"] .p-acct .ac-switch:not(:has(.ac-switch__desc)) { grid-template-areas: "t v s"; }
}

/* ── 4차 ── */
/* 프로필 얼굴 — 사진이 어떤 비율이어도 동그라미 안에 (꽃 장식은 밖으로 나가야 해서 overflow 대신 절대 배치) */
.p-acct .ac-prof__av img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; }
/* 코인 카드 단추 — 준비 중: 흐리게 대신 블러시 바탕 + 짙은 장미 글자(AA), 언제나 한 줄 */
.p-acct .ac-coin__buy { white-space: nowrap; }
.p-acct .ac-coin__buy:disabled { opacity: 1; background: var(--blush); color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px rgba(178,58,98,.28); }
.p-acct .ac-coin__buy:disabled .ico { color: var(--rose-deep); }
.p-acct .ac-coin__soon { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--rose-deep); }
.p-acct .ac-coin__soon .ico { width: 20px; height: 20px; flex: none; margin-top: 3px; }
/* 패키지 양 + 표지는 한 줄 */
.p-acct .store__amount { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 419px) {
  html[data-fs="xl"] .p-acct .store__item .ac-mic { display: none; }
  html[data-fs="xl"] .p-acct .store__amount { font-size: 18px; gap: 8px; }
  html[data-fs="xl"] .p-acct .store__tag { padding: 0 8px; }
  /* 표시 언어 고르기 — 특대 글자에서도 한 줄 (좁으면 세로로 쌓는다) */
  html[data-fs="xl"] .p-acct .ac-seg { grid-template-columns: minmax(0, 1fr); }
}
.p-acct .ac-seg__opt span { white-space: nowrap; }
/* 사진 순서 단추 — 맨 끝이라 못 누를 때도 윤곽은 보이게 (시안 메뉴 줄 화살표 색을 옅게) */
.p-acct .photos__arrow:disabled { opacity: 1; color: rgba(143,43,77,.45); background: rgba(255,253,250,.6); box-shadow: 0 0 0 1.5px rgba(143,43,77,.3); }
/* 데스크톱 한 단 화면: 뒤로·제목 줄도 가운데 760px 단에 맞춘다 */
@media (min-width: 1024px) {
  body.p-acct:has(.ac > .ac__l > .ac-head:only-child) .topbar { max-width: 840px; }
}

/* ════ 디자인 B — discover ════ */
/* 디자인 B — discover 영역: 프로필(/profile · body.p-pf) · 신고(/report · body.p-report)
   (디자인 워크플로 작업 파일. 끝나면 app.css 로 합친다)
   시안 B "Sakura Letter" 의 부품을 그대로 옮겨 쓴다 — 캐스트 카드(.pc), 스포트라이트 편지(.spot),
   sec-head(스크립트 아이브로 + 세리프 h2), 메뉴 행 + 아이콘 타일(.menu/.mic), 우표 앨범(.stampc),
   로즈 알약 버튼(.btn--rose/.btn--ghost). 수치는 시안 styles.css 값. */

/* ───────── 공통 부품 ───────── */
.p-pf, .p-report { --pf-sh-1: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px -8px rgba(120,60,70,.18); }
.pf-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* sec-head — 스크립트 아이브로 + 세리프 h2 (시안 .sec-head) */
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pf-head h2 { margin: 0; word-break: keep-all; font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.45; letter-spacing: .04em; text-wrap: balance; color: var(--ink); }
.pf-head .eyebrow { margin-bottom: 6px; }
.pf-head p { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.pf-head__count { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: 16px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* 메뉴 그룹 머리 — 꽃잎 + 세리프 18px (시안 .mgroup h2) */
.pf-group { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px 4px; font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.pf-group::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat; }

/* 아이콘 타일 (시안 .mic) */
.pf-mic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--blush); color: var(--rose-deep);
  transition: background .38s, color .38s, transform .38s var(--ease); }

/* 등장 — 편지가 펼쳐지듯(rv-fold) · 아래에서 떠오르듯(rv). 첫 화면에 있는 것들이라 로드 시 한 번.
   JS 가 없어도, 애니메이션이 꺼져도(calm) 끝 상태가 기본값이다(animation 이 fill 로만 숨긴다). */
@keyframes pf-fold { from { opacity: 0; transform: perspective(1000px) rotateX(-18deg) translateY(26px); } }
@keyframes pf-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes pf-settle { from { transform: scale(1.06); } }
@keyframes pf-tape { from { opacity: 0; transform: translateY(-10px) rotate(var(--r)) scale(1.25); } }
.pf-rv { animation: pf-rise .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + 120ms); }
.pf-card.pf-rv { transform-origin: 50% 0; animation: pf-fold 1.1s var(--ease) both; }

/* ───────── 프로필 (/profile) ───────── */
.p-pf .app { padding-top: 12px; }
.pf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pf-main { display: grid; gap: 0; min-width: 0; }
.pf-sec { padding: 36px 0 8px; min-width: 0; }

/* 편지 카드 — 캐스트 카드(.pc)를 키운 것: 와시 카드 + 8px 안쪽 사진 + 본문 */
.pf-card { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
/* 사진 캐러셀 — 우표를 한 장씩 넘긴다. 넘기기는 브라우저 가로 스크롤(scroll-snap) 그대로 */
.pf-car { position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.pf-car__track { position: relative; display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pf-car__track::-webkit-scrollbar { display: none; }
.pf-car__slide { position: relative; flex: 0 0 100%; min-width: 0; padding: 12px 18px 12px; scroll-snap-align: center; scroll-snap-stop: always;
  filter: drop-shadow(0 8px 12px rgba(110,40,60,.22)); }
.pf-car__slide .pf-card__zoom { aspect-ratio: 4 / 5; transform: rotate(-1deg); }
.pf-car__slide:nth-child(even) .pf-card__zoom { transform: rotate(1deg); }
/* 와시 테이프 — 우표마다 한 줄, 사진과 같이 넘어간다 (시안 .polaroid::before) */
.pf-car__slide::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 6px; width: 64px; height: 20px; margin-left: -32px;
  background: rgba(234,166,182,.6); transform: rotate(-4deg); pointer-events: none; }
.pf-car__slide:has(.pf-card__zoom:focus-visible) { outline: 3px solid var(--rose); outline-offset: -4px; border-radius: 10px; }
/* 넘기기 줄 — ‹ 점·순번 › (48px 누를 자리) */
.pf-car__ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 14px 0; }
.pf-car__btn { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--rose-deep); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2), var(--pf-sh-1); transition: box-shadow .38s var(--ease), transform .38s var(--ease); }
.pf-car__btn:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 1.5px var(--rose), var(--pf-sh-1); transform: translateY(-1px); }
.pf-car__btn:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.pf-car__btn[aria-disabled="true"] { cursor: default; color: rgba(143,43,77,.35); box-shadow: inset 0 0 0 1.5px var(--line); }
.pf-car__mid { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pf-car__dots { display: flex; align-items: center; gap: 6px; height: 10px; }
.pf-car__dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line-2); transition: width .38s var(--ease), background .38s; }
.pf-car__dots i.is-on { width: 20px; background: var(--rose); }
.pf-car__count { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
/* 대표 사진 = 시안 .spot__ph · .stamp-edge — 절취선 우표 */
.pf-card__zoom { display: block; width: 100%; height: 100%; border: 0; background: #fffdf9; cursor: zoom-in;
  --h: 7px; padding: var(--h);
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box;
          mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box; }
.pf-card__zoom img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  animation: pf-settle 1.6s var(--ease) both; transition: transform 1.2s var(--ease); }
.pf-card__zoom:hover img { transform: scale(1.05); }
.pf-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 0; }
.pf-card > .pf-actions { padding: 0 18px 20px; }

.pf-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.pf-name__nick { letter-spacing: 0; overflow-wrap: anywhere; }
.pf-name__age { font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.pf-job { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
/* 손글씨 한마디 — 블러시 쪽지 (시안 .pc__note) */
.pf-note { position: relative; margin: 6px 0 0; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--blush);
  font-family: var(--font-hand); font-size: 18px; line-height: 1.75; color: var(--ink); line-break: strict; text-wrap: pretty; }

/* AI 고지 — 법적 전제. 장식보다 먼저 읽혀야 한다: 잉크 글자 15px, 로즈 선 */
.p-pf .pf-notice { position: relative; margin: 10px 0 0; padding: 12px 14px 12px 18px; border: 0; border-radius: 12px;
  font-size: 15px; line-height: 1.7; color: var(--ink); background: #fdf1f1; box-shadow: inset 0 0 0 1px var(--line-2); }
.p-pf .pf-notice::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--rose); }

/* CTA — 로즈 알약(56px) + 편지지 알약 두 개 */
.pf-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pf-actions .msg { margin: 0; }
.p-pf .pf-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px;
  font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; border-radius: 999px; }
.pf-calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.p-pf .pf-calls .pf-call { gap: 8px; padding: 0 10px; white-space: nowrap; }
.p-pf .pf-actions .pf-call { font-size: 16px; letter-spacing: .02em; color: var(--rose-deep); background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--pf-sh-1); }
.p-pf .pf-actions .pf-call:hover { color: var(--rose-deep); box-shadow: inset 0 0 0 1.5px var(--rose), var(--pf-sh-1); transform: translateY(-1px); }
/* 아이콘은 마스크 — busy() 가 textContent 를 갈아 끼워도 남는다 */
.pf-cta::before, .pf-call::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--pf-i) center/contain no-repeat; mask: var(--pf-i) center/contain no-repeat; }
.pf-cta { --pf-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 20 17h-9.5L6 20.5V17H4a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 4 5z'/><path d='M12 14s-3-1.8-3-3.8a1.6 1.6 0 0 1 3-.8 1.6 1.6 0 0 1 3 .8c0 2-3 3.8-3 3.8z'/></svg>"); }
.pf-call--voice { --pf-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h3l1.5 4.5-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/></svg>"); }
.pf-call--video { --pf-i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6.5' width='12.5' height='11' rx='2'/><path d='m15.5 10.5 5-3v9l-5-3z'/></svg>"); }
.pf-actions .btn:disabled::before { display: none; }

/* 그의 편지 — 줄 그은 편지지 + 손글씨 + 서명 (시안 .tl__sheet · .letter--lined) */
.pf-letter { position: relative; overflow: hidden; padding: 20px 18px 18px; border-radius: 18px;
  background-color: var(--card); box-shadow: var(--shadow-md);
  background-image: var(--washi), repeating-linear-gradient(180deg, transparent 0 35px, rgba(178,58,98,.1) 35px 36px);
  background-position: 0 0, 0 calc(var(--pf-lp, 20px) - 1px); --pf-lp: 20px; padding-top: var(--pf-lp); }
.pf-letter::after { /* 옅은 꽃잎 워터마크 */
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 160px; height: 160px; opacity: .12; pointer-events: none; transform: rotate(24deg); background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat; }
.pf-letter__msg { position: relative; z-index: 1; margin: 0; font-family: var(--font-hand); font-size: 18px; line-height: 36px; color: var(--ink); line-break: strict; text-wrap: pretty; }
.pf-letter__ps { position: relative; z-index: 1; margin: 0; font-family: var(--font-hand); font-size: 16px; line-height: 36px; color: var(--muted); line-break: strict; }
.pf-letter__ps-k { font-weight: 600; color: var(--rose-deep); }
.pf-sign { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.pf-av { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; padding: 3px; }
.pf-av::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--petal-2), #f6dfb9, var(--rose), var(--petal-2)); }
.pf-av img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--card); }
.pf-name.pf-name--sign { font-size: 17px; gap: 4px 6px; }
.pf-name--sign .pf-name__age { font-size: 15px; }

/* 프로필 행 — 메뉴 행 + 아이콘 타일 (시안 .menu) */
.pf-facts { margin: 0; padding: 6px; border-radius: 20px; background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
.pf-fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 60px; padding: 10px 12px; }
.pf-fact + .pf-fact { border-top: 1px solid var(--line); }
.pf-fact .pf-mic { grid-row: 1 / span 2; }
.pf-fact dt { font-size: 15px; line-height: 1.4; color: var(--muted); }
.pf-fact dd { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }

/* 우표 앨범 — 절취선 우표 + 마스킹 테이프 (시안 .album · .stampc · .stamp-edge) */
.pf-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; margin: 0; padding: 20px 14px 18px; list-style: none;
  border-radius: 20px; background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
.pf-stamp { position: relative; min-width: 0; }
.pf-stamp__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; }
.pf-stamp__ph { position: relative; display: block; width: 100%; aspect-ratio: 5 / 6; background: #fffdf9; filter: drop-shadow(0 6px 10px rgba(110,40,60,.2));
  transition: transform .38s var(--ease);
  --h: 6px; padding: var(--h);
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box;
          mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h) * 2.6) calc(var(--h) * 2.6) round, linear-gradient(#000, #000) content-box; }
.pf-stamp__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pf-stamp:nth-child(odd) .pf-stamp__ph { transform: rotate(-2deg); }
.pf-stamp:nth-child(even) .pf-stamp__ph { transform: rotate(1.5deg); }
.pf-stamp__btn:hover .pf-stamp__ph, .pf-stamp__btn:focus-visible .pf-stamp__ph { transform: rotate(0) translateY(-4px); }
.pf-tape { position: absolute; z-index: 3; top: -4px; width: 36px; height: 14px; background: rgba(234,200,160,.6); pointer-events: none;
  animation: pf-tape .5s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 500ms); }
.pf-tape--a { --r: -38deg; left: -8px; transform: rotate(-38deg); }
.pf-tape--b { --r: 38deg; right: -8px; transform: rotate(38deg); }
.pf-tape--b { animation-delay: calc(var(--d, 0) * 110ms + 580ms); }
/* 소인 — 시안 .stampc .pm (장식, KOI + 순번) */
.pf-pm { position: absolute; z-index: 2; right: -12px; bottom: -14px; width: 58px; height: 58px; color: rgba(143,43,77,.62); transform: rotate(-16deg); pointer-events: none; }

/* 안심 — 조용한 메뉴 (시안 .menu--quiet) */
.pf-quiet { margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.pf-quiet[hidden] { display: none; }
.pf-quiet li + li { border-top: 1px solid var(--line); }
.pf-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 12px; border: 0; border-radius: 14px; background: none; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--muted); text-align: left; text-decoration: none; transition: background .38s; }
.pf-row:hover { background: #fdf1f2; color: var(--muted); }
.pf-row .pf-mic { background: var(--paper-2); color: var(--muted); }
.pf-row:hover .pf-mic { background: var(--muted); color: #fff; transform: rotate(-6deg); }
.pf-arr { margin-left: auto; width: 20px; height: 20px; color: #a8929a; transition: transform .38s var(--ease); }
.pf-row:hover .pf-arr { transform: translateX(3px); color: var(--rose); }
.pf-quiet-note { margin: 8px 4px 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.p-pf .pf-confirm { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px; border: 0; border-radius: 20px; background: #fdf1f2; box-shadow: inset 0 0 0 1.5px rgba(143,43,77,.35); }
.p-pf .pf-confirm[hidden] { display: none; }
.pf-confirm .confirm__text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); }
.pf-confirm__btns { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pf-confirm .linkish { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 16px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.pf-safety [data-role="message"] { margin: 10px 0 0; }

/* 넓은 화면 — 편지 카드(왼쪽, 따라옴) | 편지·프로필·앨범(오른쪽) */
@media (min-width: 600px) {
  body.p-pf { --app-max: 1120px; }
  .pf-album { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; padding: 24px 22px 22px; }
  .pf-letter { --pf-lp: 26px; padding: 26px 30px 24px; }
}
/*
 * 넓은 화면 — 왼쪽: 사진 캐러셀 + 대화/통화 버튼 | 오른쪽: 이름·AI 배지·고지 → 편지·프로필·앨범·안심.
 * 편지 카드(.pf-card)는 풀어서(display: contents) 조각마다 칸을 준다 — DOM(읽는 순서·Tab 순서)은
 * 사진 → 이름·고지 → 버튼 그대로다. 왼쪽 둘은 따라오되(sticky) **안쪽 스크롤이 없다**:
 * 캐러셀 높이(--pf-car-h)를 창 높이에서 버튼 칸 높이를 빼서 정하므로 두 칸이 늘 창 안에 들어간다.
 * 버튼 칸은 알약 높이가 고정(56px)이라 높이를 미리 안다(--pf-act-h). 창이 너무 낮으면 따라오지 않는다.
 */
@media (min-width: 900px) {
  .p-pf .app { padding-top: 20px; }
  /* --pf-start: 처음 화면에서 캐러셀이 놓이는 높이(헤더 80 + 뒤로 줄 + 여백). 따라올 때(--pf-top)보다 낮으므로
     이것으로 재야 첫 화면에서도 버튼이 창 안에 든다 */
  .pf { --pf-top: 96px; --pf-start: 176px; --pf-gap: 14px; --pf-act-h: 154px;   /* 56 + 10 + 56 + 위아래 16 */
    --pf-car-h: clamp(300px, calc(100vh - var(--pf-start) - var(--pf-gap) - var(--pf-act-h) - 12px), 580px);
    grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 44px; row-gap: 0; align-items: start; }
  html[data-fs="xl"] .pf { --pf-act-h: 220px; }   /* 특대: 통화 알약이 세로로 — 56 × 3 + 20 + 32 */
  .pf-card { display: contents; }
  .pf-car, .pf-card > .pf-actions { grid-column: 1; grid-row: 1 / span 2; align-self: start; border-radius: 20px;
    background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
  /* 아래 여백 = 버튼 칸 자리. 따라오는 상자는 바깥 여백까지 칸 안에 머무르므로, 페이지 끝에서 둘이 같이 밀려 올라가 겹치지 않는다 */
  .pf-car { z-index: 1; height: var(--pf-car-h); margin-bottom: calc(var(--pf-gap) + var(--pf-act-h)); padding: 8px 0 12px; }
  .pf-car__track { flex: 1 1 auto; min-height: 0; }
  /* 우표는 세로 4:5 그대로 — 창이 낮으면 폭을 줄여 가운데 둔다 */
  .pf-car__slide { display: flex; justify-content: center; height: 100%; padding: 14px 22px 10px; }
  .pf-car__slide .pf-card__zoom { width: auto; max-width: 100%; height: 100%; }
  .pf-car__slide::before { top: 8px; }
  .pf-card > .pf-actions { z-index: 1; margin-top: calc(var(--pf-car-h) + var(--pf-gap)); padding: 16px; }
  .pf-card__body { grid-column: 2; grid-row: 1; gap: 8px; padding: 26px 30px 26px; border-radius: 20px;
    background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
  .pf-main { grid-column: 2; grid-row: 2; }
  .pf-name { font-size: 34px; }
  .pf-sec { padding-top: 40px; }
  .pf-head h2 { font-size: 27px; }
  .pf-letter__msg { font-size: 19px; }
  .pf-album { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 18px; }
}
/* 따라오기 — 캐러셀 최소 높이(300) + 버튼 칸이 창에 들어갈 때만. 안 들어가면 그냥 흐른다(잘리지 않는다) */
@media (min-width: 900px) and (min-height: 600px) {
  .pf-car { position: sticky; top: var(--pf-top); }
  .pf-card > .pf-actions { position: sticky; top: calc(var(--pf-top) + var(--pf-car-h) + var(--pf-gap)); }
}
@media (min-width: 900px) and (min-height: 600px) and (max-height: 659px) {
  html[data-fs="xl"] .pf-car, html[data-fs="xl"] .pf-card > .pf-actions { position: relative; top: auto; }
}
/* 글자 크게(특대)에서는 두 알약이 들어가지 않는다 — 세로로 */
html[data-fs="xl"] .pf-calls { grid-template-columns: 1fr; }
/* 사진이 없는 상대 — 이름이 카드 맨 위 */
.pf-card__body:first-child { padding-top: 20px; }
/* 앨범의 "지금 장" — 캐러셀·전체화면에서 보고 있는 우표 아래 로즈 줄 (장식이라 낭독하지 않는다) */
.pf-stamp.is-current::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 22px; height: 4px; margin-left: -11px; border-radius: 999px; background: var(--rose); }
.pf-stamp.is-current .pf-pm { color: var(--rose); }

/* ───────── 신고 (/report) ───────── */
@media (min-width: 600px) { body.p-report { --app-max: 680px; } }
.p-report .app { display: flex; flex-direction: column; gap: 0; padding-top: 12px; }
.rp { padding: 16px 0 8px; }
.rp-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.rp-form .msg { margin: 0; }
.rp-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.rp-set legend { padding: 0; }
.rp-opts { margin: 0; padding: 6px; list-style: none; border-radius: 20px; background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
.rp-opt { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 12px; border-radius: 14px; cursor: pointer; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--ink); transition: background .38s; }
.rp-opts li + li { border-top: 1px solid var(--line); }
.rp-opt:hover { background: #fdf1f2; }
.rp-opt input { appearance: none; -webkit-appearance: none; position: relative; width: 24px; height: 24px; flex: none; margin: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; transition: box-shadow .38s var(--ease); }
.rp-opt input::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--rose-deep); transform: scale(0); transition: transform .38s var(--ease); }
.rp-opt input:checked { box-shadow: inset 0 0 0 2px var(--rose-deep); }
.rp-opt input:checked::after { transform: none; }
.rp-opt:has(input:checked) { background: #fdf1f2; color: var(--rose-deep); }
.rp-opt input:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
/* 자세한 내용 — 줄 그은 편지지에 손글씨 */
.rp-field { display: flex; flex-direction: column; gap: 10px; }
.rp-text { width: 100%; min-height: 180px; padding: 0 18px 6px; border: 0; border-radius: 18px; resize: none; color: var(--ink);
  font-family: var(--font-hand); font-size: 18px; line-height: 36px;
  background-color: var(--card); background-image: var(--washi), repeating-linear-gradient(180deg, transparent 0 35px, rgba(178,58,98,.12) 35px 36px);
  background-attachment: local; box-shadow: var(--shadow-md), inset 0 0 0 1.5px var(--line-2); transition: box-shadow .38s var(--ease); }
.rp-text:focus { outline: none; box-shadow: var(--shadow-md), inset 0 0 0 2px var(--rose), 0 0 0 4px rgba(178,58,98,.12); }
/* 함께 차단 — 조용한 행 */
.rp-block { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px; border-radius: 20px; cursor: pointer; font-size: 17px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.rp-block input { appearance: none; -webkit-appearance: none; position: relative; width: 24px; height: 24px; flex: none; margin: 0; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; }
.rp-block input:checked { background: var(--rose-deep); box-shadow: none; }
.rp-block input:checked::after { content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.rp-block input:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.p-report .rp-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 30px; border-radius: 999px; font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.rp .pf-head { margin-bottom: 20px; }

.pf-letter-wrap { position: relative; }

/* 그의 편지 — 받는 사람 줄 + 테이프 붙인 폴라로이드 (시안 .tl .to · .polaroid) */
.pf-letter__to { position: relative; z-index: 1; margin: 0; font-family: var(--font-hand); font-size: 19px; font-weight: 600; line-height: 36px; color: var(--rose-deep); }
.pf-polaroid { float: right; position: relative; z-index: 2; width: 84px; margin: 4px -2px 8px 12px; padding: 5px 5px 18px; background: #fff; transform: rotate(4deg);
  box-shadow: 0 8px 16px -8px rgba(80,30,40,.45); }
.pf-polaroid::before { content: ""; position: absolute; left: 50%; top: -8px; width: 44px; height: 16px; margin-left: -22px; background: rgba(234,166,182,.55); transform: rotate(-6deg); pointer-events: none; }
.pf-polaroid__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pf-polaroid__btn::after { content: ""; position: absolute; inset: -8px; }   /* 48px 이상 누를 자리 */
.pf-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.pf-sign { clear: both; }
@media (min-width: 600px) { .pf-polaroid { width: 112px; margin-left: 18px; } }

/* 차단 확인 — 봉랍 빛 로즈 (시안 팔레트 안에서) */
.p-pf .pf-danger { min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--wax); color: #fff; font-weight: 700; }
.p-pf .pf-danger:hover { background: #7d2239; color: #fff; }

/* 사진 크게 보기 — 따뜻한 잉크 막 + 우표 액자 */
.p-pf .viewer { padding: 24px 16px; background: rgba(59,40,48,.95); }
.p-pf .viewer__img { max-width: min(100%, 720px); max-height: calc(100% - 40px); padding: 8px; border-radius: 6px; background: #fffdf9;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55); object-fit: contain; }
.p-pf .viewer__close { top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; background: rgba(255,253,249,.92); color: var(--rose-deep); font-size: 18px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); }
.p-pf .viewer__close:hover { background: #fff; }
/* 여러 장 — 이전·다음(56px 원) + 순번 (전체화면에서도 모든 사진을 넘겨 본다) */
.p-pf .viewer__nav { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--rose-deep); background: rgba(255,253,249,.92); box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); }
.p-pf .viewer__nav[hidden] { display: none; }
.p-pf .viewer__nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-pf .viewer__nav--prev { left: max(10px, env(safe-area-inset-left)); }
.p-pf .viewer__nav--next { right: max(10px, env(safe-area-inset-right)); }
.p-pf .viewer__nav:hover:not([aria-disabled="true"]) { background: #fff; }
.p-pf .viewer__nav[aria-disabled="true"] { opacity: .35; cursor: default; }
.p-pf .viewer__nav:focus-visible, .p-pf .viewer__close:focus-visible { outline: 3px solid #f6c9d6; outline-offset: 3px; }
.p-pf .viewer__count { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 16px; margin: 0; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,253,249,.92); color: var(--rose-deep); font-size: 15px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.p-pf .viewer__count[hidden] { display: none; }

/* 신고 — 손글씨 힌트 */
.rp-text::placeholder { color: var(--muted); opacity: 1; font-family: var(--font-hand); }

/* 알림 알약이 떠 있을 때 마지막 내용이 가리지 않게 */
body.p-pf.has-push-pill .pf, body.p-report.has-push-pill .rp { padding-bottom: 72px; }

/* 조용한 모드(calm) · 움직임 줄이기 — 끝 상태로 바로 */
@media (prefers-reduced-motion: reduce) {
  .p-pf .pf-rv, .p-report .pf-rv, .pf-card__zoom img, .pf-tape { animation: none !important; }
  .pf-car__dots i, .pf-car__btn, .pf-card__zoom img { transition: none; }
}
html.calm .pf-rv, html.calm .pf-card__zoom img, html.calm .pf-tape { animation: none !important; }

/* 서명 — 시안 .sig: 로마자 이름을 Parisienne 40px 가는 획으로. 로마자로 옮길 수 없는 이름은 손글씨체 가나(홈 편지와 같다). 장식 */
.pf-sig { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 40%; height: 44px; overflow: visible; }
.pf-sig text { font-family: var(--font-hand); font-weight: 400; font-size: 28px; fill: var(--rose-deep); stroke: var(--rose-deep); stroke-width: .25; }
.pf-sig--latin text { font-family: var(--font-script); font-size: 40px; stroke-width: .6; }
/* 편지 안의 답장 버튼 (시안 .tl__cta .btn--rose.btn--sm) — 위 카드의 대화 시작과 같은 동작 */
.pf-letter__cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.pf-letter__cta .msg { flex: 1 1 100%; margin: 0; }
.p-pf .pf-reply { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.p-pf .pf-reply::before { content: ""; order: 1; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/></svg>") center/contain no-repeat; }
.p-pf .pf-reply:disabled::before { display: none; }

/* 신고 대상 — 편지 서명 줄과 같은 모양의 와시 행 (아바타 + 명조 이름 + AI 배지) */
.rp-who { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0 0 20px; padding: 10px 16px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
.rp-who .pf-av { width: 48px; height: 48px; }
.rp-who .pf-name.pf-name--sign { font-size: 18px; }

/* 서명 줄 — 이름·나이·AI 배지는 한 줄로 (좁은 폭·특대에서도 배지가 떨어지지 않게) */
.pf-name.pf-name--sign { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.pf-name--sign .pf-name__nick { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-name--sign .badge { flex: none; }

/* 특대 글자 · 아주 좁은 폭 — 폴라로이드를 글 위로 올려 편지 한 줄의 폭을 지킨다(4줄 = 144px 로 괘선에 맞춘다) */
html[data-fs="xl"] .pf-polaroid { float: none; display: block; width: 120px; margin: 6px auto 5px; }
html[data-fs="xl"] .pf-sig { display: none; }

/* 없는 상대(탈퇴 등) — sec-head + 와시 편지 카드 + 로즈 알약 */
.pf-miss { padding-top: 24px; }
.pf-miss__card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px 22px; border-radius: 20px;
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--shadow-md); }
.pf-miss__card::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 150px; height: 150px; opacity: .12; pointer-events: none; transform: rotate(24deg); background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center/contain no-repeat; }
.pf-miss__msg { position: relative; z-index: 1; margin: 0; font-family: var(--font-hand); font-size: 18px; line-height: 1.95; color: var(--ink); }
.p-pf .pf-miss__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; font-size: 18px; text-decoration: none; }
@media (min-width: 600px) { .pf-miss { max-width: 640px; margin: 0 auto; } }
/* 답장 알약 — 좁은 폭·특대에서 화살표가 글자를 밀어 두 줄이 되지 않게 */
.p-pf .pf-reply { white-space: nowrap; }
html[data-fs="xl"] .p-pf .pf-reply { padding: 0 14px; letter-spacing: .02em; font-size: 15px; gap: 6px; }
/* 좁은 폭: 이름이 먼저, 서명(장식)이 줄어든다 */
.pf-sign > .pf-name--sign { flex: 0 0 auto; }
.pf-sign > .pf-sig { flex: 0 1 auto; min-width: 48px; }

/* ════ 디자인 B — auth ════ */
/* 디자인 B — auth 영역 (로그인·가입·찾기·약관 문서). 디자인 워크플로 작업 파일. 끝나면 app.css 로 합친다.
   시안 B 에 인증 화면은 없다 — 시안의 부품(상단바 워드마크 · closing 편지(항공우편 테두리 + 봉랍) ·
   sec-head(스크립트 아이브로 + 세리프 표제) · 메뉴 줄(아이콘 타일) · 발(AI 고지))로 짓는다.
   값은 시안 styles.css 에서 그대로 옮겼다. */

:is(.p-auth, .p-doc) {
  --ba-branch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 260 200'><defs><g id='p'><path d='M0 0C-3.2-3-3.6-7.6-1.4-10.4L0-9 1.4-10.4C3.6-7.6 3.2-3 0 0z' fill='%23f6cdd6' stroke='%23e7a1b3' stroke-width='.5'/></g><g id='b'><use href='%23p'/><use href='%23p' transform='rotate(72)'/><use href='%23p' transform='rotate(144)'/><use href='%23p' transform='rotate(216)'/><use href='%23p' transform='rotate(288)'/><circle r='2' fill='%23f2b7c4'/></g></defs><path d='M258 8C200 20 160 50 128 92S70 160 10 190' fill='none' stroke='%238a6358' stroke-width='3' stroke-linecap='round' opacity='.55'/><path d='M170 44c-6 20-2 38 8 52M120 104c14 6 30 6 44-2' fill='none' stroke='%238a6358' stroke-width='2' stroke-linecap='round' opacity='.45'/><use href='%23b' transform='translate(168 58) scale(1.5)'/><use href='%23b' transform='translate(186 96) scale(1.15)'/><use href='%23b' transform='translate(120 100) scale(1.3)'/><use href='%23b' transform='translate(161 101) scale(.9)'/><use href='%23b' transform='translate(79 143) scale(1.08)'/><use href='%23b' transform='translate(212 22) scale(1)'/></svg>");
  --ba-sh-1: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 18px -8px rgba(120,60,70,.18);
  --ba-sh-2: 0 18px 40px -18px rgba(120,50,70,.30), 0 4px 12px -6px rgba(120,50,70,.12);
  font-size: 17px; line-height: 1.8; color: var(--ink);
}
/* 옛 규칙(데스크톱 body flex 등) 무력화 */
body:is(.p-auth, .p-doc) { display: block; min-height: 100vh; padding: 0; }

.ba-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── 상단바 (시안 .topbar — 모바일은 가운데 워드마크) ── */
.ba-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 8px 16px;
  background: rgba(251,246,239,.96);
  border-bottom: 1px solid rgba(226,201,196,.6);
}
.ba-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; text-decoration: none; }
.ba-brand__script { font-family: var(--font-script); font-size: 30px; color: var(--rose-deep); letter-spacing: 0; }
.ba-brand__jp { font-family: var(--font-serif); font-size: 11px; letter-spacing: .32em; padding-left: .32em; color: var(--muted); }
.ba-back {
  position: absolute; left: max(8px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; min-width: 48px; padding: 0 10px;
  border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .38s var(--ease), background .38s var(--ease);
}
.ba-back .ba-ico { width: 22px; height: 22px; }
.ba-back:hover { color: var(--rose-deep); background: rgba(242,210,214,.35); }
/* 좁은 폰: 뒤로 글자를 숨기고 화살표만 (워드마크와 겹치지 않게) */
@media (max-width: 419px) {
  .ba-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ba-back { justify-content: center; padding: 0; }
}

/* ── 본문 ── */
.ba { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 44px 16px 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.ba::before {                                   /* 벚꽃 가지 (시안 .branch--a) — 편지 모서리에 걸친다 */
  content: ""; position: absolute; z-index: 2; top: 6px; right: 0; width: 132px; aspect-ratio: 260 / 200;
  background: var(--ba-branch) no-repeat center / contain; opacity: .9; pointer-events: none;
}

/* 편지지 (시안 .closing.letter — 항공우편 줄무늬 테두리 + 봉랍) */
.ba-card {
  position: relative; z-index: 1; isolation: isolate;
  padding: 36px 22px 30px; border-radius: 28px;
  background-color: var(--card); background-image: var(--washi);
  box-shadow: var(--ba-sh-2);
}
.ba-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 7px; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--petal-2) 0 14px, transparent 14px 24px, #d7b88a 24px 38px, transparent 38px 48px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .7;
}
.ba-seal {
  position: relative; isolation: isolate; display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; color: #fbe2e8;
}
.ba-seal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 6px 14px -4px rgba(125,34,57,.6), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 5px rgba(255,255,255,.25);
}
.ba-seal::before { content: ""; position: absolute; z-index: 1; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(255,230,236,.45); }
.ba-seal svg { position: relative; z-index: 2; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.ba-head { text-align: center; margin-bottom: 22px; }
.ba-head .eyebrow { font-size: 22px; margin-bottom: 8px; }
.ba-h { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 25px; line-height: 1.6; letter-spacing: .04em; color: var(--ink); word-break: keep-all; word-break: auto-phrase; text-wrap: balance; }
.ba-lead { margin: 8px auto 0; max-width: 28em; font-size: 17px; line-height: 1.8; color: var(--muted); line-break: strict; text-wrap: pretty; }
.ba-sig { display: block; margin-top: 18px; text-align: center; font-family: var(--font-script); font-size: 26px; line-height: 1.2; color: var(--rose-deep); }

/* ── 폼 ── */
.ba-form { display: flex; flex-direction: column; gap: 18px; }
.ba-form > *, .ba-form .step > * { margin: 0; }
.ba .field { display: flex; flex-direction: column; gap: 8px; }
.ba .field__label { font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: .02em; }
.ba .field__input {
  width: 100%; min-height: 56px; padding: 14px 18px; border: 0; border-radius: 14px;
  font: inherit; font-size: 17px; color: var(--ink); background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--ba-sh-1);
  transition: box-shadow .38s var(--ease);
}
.ba .field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rose), 0 0 0 4px rgba(178,58,98,.12); }
.ba .field__input[readonly] { background: var(--paper-2); color: var(--muted); }
.ba .field .hint { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.ba .hint { margin: 0; font-size: 16px; line-height: 1.8; color: var(--muted); }
.ba [data-role="code-area"], .ba [data-role="password-area"] { display: flex; flex-direction: column; gap: 18px; }
.ba [hidden] { display: none !important; }

/* 버튼 — 시안 .btn / .btn--rose / .btn--ghost */
.ba .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1.4;
}
.ba .btn .ba-ico { width: 22px; height: 22px; }
.ba .btn--primary::before {                    /* 시안의 → 화살표 (글자는 JS 가 바꿔도 남는다) */
  content: ""; order: 2; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/></svg>") center / contain no-repeat;
}
.ba .btn:not([class*="btn--"]), .ba .btn--ghost {
  color: var(--rose-deep); background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line-2), var(--ba-sh-1);
}
.ba .btn:not([class*="btn--"]):hover, .ba .btn--ghost:hover { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rose), var(--ba-sh-1); transform: translateY(-1px); }
.ba .btn--ghost { color: var(--muted); font-size: 17px; }
.ba .btn:disabled { opacity: .6; cursor: default; transform: none; }

/* 메시지 */
.ba .msg, .ba .alert { margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 16px; line-height: 1.7; }
.ba .alert, .ba .msg.alert { background: #fbecec; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(179,38,30,.18); }
.ba .msg.notice { background: #eaf4ee; color: var(--green); box-shadow: inset 0 0 0 1px rgba(47,122,85,.2); }
.ba .result {
  margin: 0; padding: 18px 20px; border-radius: 16px; text-align: center;
  font-family: var(--font-hand); font-size: 19px; font-weight: 600; line-height: 1.8; color: var(--rose-deep);
  background: var(--blush); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ── 찾기 — 세그먼트 탭 (시안 탭바 인디케이터) ── */
.ba-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 22px; padding: 5px;
  border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.ba-seg__item {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px;
  border-radius: 999px; font-size: 16px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .38s var(--ease), background .38s var(--ease);
}
.ba-seg__item:hover { color: var(--rose-deep); }
.ba-seg__item.is-on { color: var(--rose-deep); font-weight: 700; background: linear-gradient(180deg, #fbe6ea, #f6d5dc); box-shadow: inset 0 0 0 1px rgba(178,58,98,.14); }

/* ── 메뉴 줄 (시안 .menu + .mic 아이콘 타일) ── */
.ba-menu {
  position: relative; z-index: 1; margin: 22px 0 0; padding: 6px; list-style: none;
  border-radius: 20px; background-color: var(--card); background-image: var(--washi); box-shadow: var(--ba-sh-2);
}
.ba-menu li + li { border-top: 1px solid var(--line); }
.ba-menu a {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 12px; border-radius: 14px;
  font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .38s var(--ease);
}
.ba-menu a > span:not(.ba-mic) { min-width: 0; letter-spacing: 0; }
.ba-menu a:hover { background: #fdf1f2; color: var(--ink); }
.ba-mic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--blush); color: var(--rose-deep); transition: background .38s var(--ease), color .38s var(--ease), transform .38s var(--ease); }
.ba-mic .ba-ico { width: 22px; height: 22px; }
.ba-menu a:hover .ba-mic { background: var(--rose); color: #fff; transform: rotate(-6deg); }
.ba-arr { margin-left: auto; width: 20px; height: 20px; color: #a8929a; transition: transform .38s var(--ease); }
.ba-menu a:hover .ba-arr { transform: translateX(3px); color: var(--rose); }

/* ── 발 (시안 .foot — AI 고지) ── */
.ba-foot {
  position: relative; z-index: 1; max-width: 560px; margin: 34px auto 0; padding: 0 16px 40px;
  text-align: center; font-size: 15px; line-height: 1.8; color: var(--muted); word-break: auto-phrase; text-wrap: balance;
}
.ba-foot__script { display: block; margin-bottom: 8px; font-family: var(--font-script); font-size: 30px; line-height: 1; color: var(--rose-deep); }
.ba-foot p { margin: 0; }

/* ── 가입 ── */
/* 단계 — 봉랍 번호(지나온 단계는 봉랍, 남은 단계는 종이) + 점선 */
.ba .steps { position: relative; display: flex; gap: 0; margin: 0 0 2px; padding: 0; list-style: none; counter-reset: none; }
.ba .steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 0; border-top: 2px dashed var(--line-2); background: none; }
.ba .steps__item { position: relative; flex: 1; display: flex; justify-content: center; padding: 0; border: 0; color: var(--muted); }
.ba .steps__item::before { content: none; }
.ba .steps__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted);
  font-family: var(--font-serif); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ba .steps__item.is-on .steps__num {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #d0607e, var(--wax) 45%, #7d2239 100%);
  box-shadow: 0 3px 8px -3px rgba(125,34,57,.6), inset 0 -2px 4px rgba(0,0,0,.22), inset 0 2px 3px rgba(255,255,255,.25);
}
.ba .steps__item.is-on .steps__num::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dashed rgba(255,230,236,.5); }
.ba .steps__label, .ba .steps__item.is-on:not(:has(+ .is-on)) .steps__label { position: absolute; inset: auto; transform: none; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ba .step { display: flex; flex-direction: column; gap: 18px; }
.ba-step-h {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding-top: 18px; border-top: 1px dashed var(--line-2);
  font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; color: var(--ink);
}
.ba-step-h__n { font-family: var(--font-hand); font-size: 16px; font-weight: 600; letter-spacing: .04em; color: var(--rose); }
.ba-lead--step { margin: -8px 0 0; text-align: left; font-size: 16px; }

/* AI 고지 — 법적 고지. 편지 속 한 장의 쪽지처럼, 그러나 분명하게 */
.ba .notice-ai--block {
  position: relative; margin: 0; padding: 18px 20px 20px; border-radius: 20px;
  background: linear-gradient(180deg, #fdf0f1, var(--blush)); color: var(--ink);
  font-size: 17px; line-height: 1.85; box-shadow: inset 0 0 0 1.5px var(--petal-2);
}
.ba .notice-ai__title::before {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f2b4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5 5 6.3v5.2c0 4.3 3 7.6 7 9 4-1.4 7-4.7 7-9V6.3z'/><path d='m9 12 2.2 2.2L15.5 10'/></svg>") center / 24px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(143,43,77,.2);
}
.ba .notice-ai--block p { margin: 0; line-break: strict; text-wrap: pretty; }
.ba .notice-ai__title { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .04em; line-height: 1.6; color: var(--rose-deep); }

/* 동의 — 전체 동의(블러시 쪽지) + 개별 동의(메뉴 줄 카드) */
.ba .check { display: flex; align-items: center; gap: 14px; min-height: 60px; margin: 0; padding: 8px 12px; cursor: pointer; font-size: 17px; line-height: 1.6; color: var(--ink); }
.ba .check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; cursor: pointer;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.ba .check input:checked {
  background: var(--rose-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12.5 4 4 8-9'/></svg>") center / 18px no-repeat;
  box-shadow: none;
}
.ba .check input:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.ba .check.ba-all { padding: 10px 16px; border-radius: 16px; font-weight: 700; background: linear-gradient(180deg, #fbe6ea, #f6d5dc); box-shadow: inset 0 0 0 1px rgba(178,58,98,.14); }
.ba-consents { margin: 0; padding: 6px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ba-consents > * + * { border-top: 1px solid var(--line); }
.ba .check-row { display: flex; align-items: center; gap: 4px; }
.ba .check-row .check { flex: 1; min-width: 0; }
.ba .check__doc {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin: 0 4px 0 0; border-radius: 12px;
  color: var(--rose-deep); background: var(--blush); text-decoration: none; transition: background .38s var(--ease), color .38s var(--ease);
}
.ba .check__doc .ba-ico { width: 20px; height: 20px; }
.ba .check__doc:hover { background: var(--rose); color: #fff; }

/* 사진 — 우표(stamp-edge) + 마스킹테이프 */
.ba .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; margin: 0; padding: 10px 4px 0; list-style: none; }
.ba .photos:empty { display: none; }
.ba .photos__item { position: relative; aspect-ratio: 5 / 6; filter: drop-shadow(0 6px 10px rgba(110,40,60,.2)); }
.ba .photos__item:nth-child(odd) { transform: rotate(-2deg); }
.ba .photos__item:nth-child(even) { transform: rotate(1.5deg); }
.ba .photos__item img {
  --h: 6px; width: 100%; height: 100%; padding: var(--h); object-fit: cover; object-position: 50% 28%;
  border-radius: 0; background: #fffdf9; cursor: default;
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h)*2.6) calc(var(--h)*2.6) round, linear-gradient(#000,#000) content-box;
          mask: radial-gradient(circle at 50% 50%, #0000 calc(var(--h) - .5px), #000 var(--h)) 0 0 / calc(var(--h)*2.6) calc(var(--h)*2.6) round, linear-gradient(#000,#000) content-box;
}
.ba .photos__item::before { content: ""; position: absolute; z-index: 2; left: -8px; top: -4px; width: 36px; height: 14px; background: rgba(234,200,160,.6); transform: rotate(-38deg); pointer-events: none; }
.ba .photos__remove {
  position: absolute; z-index: 3; top: -12px; right: -12px; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; color: #fff; background: transparent;
}
.ba .photos__remove::before { content: ""; position: absolute; inset: 10px; z-index: -1; border-radius: 50%; background: rgba(59,40,48,.78); box-shadow: 0 0 0 2px #fff; }
.ba .btn.ba-pick { min-height: 64px; border-radius: 20px; color: var(--rose-deep); background: rgba(255,253,250,.6); box-shadow: inset 0 0 0 0 transparent; outline: 2px dashed var(--petal-2); outline-offset: -2px; font-size: 17px; }
.ba .btn.ba-pick:hover { outline-color: var(--rose); background: #fdf1f2; }
.ba [data-role="back"] { margin-top: -4px; }

/* ── 약관 · 개인정보 문서 (p-doc) ── */
.p-doc .doc { position: relative; max-width: 760px; margin: 0 auto; padding: 28px 16px 8px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.p-doc .doc::before { content: ""; position: absolute; z-index: 0; top: -14px; right: 0; width: 150px; aspect-ratio: 260 / 200; background: var(--ba-branch) no-repeat center / contain; opacity: .9; pointer-events: none; }
.p-doc .doc__body {
  position: relative; z-index: 1; margin: 0; padding: 30px 20px 26px; border: 0; border-radius: 28px;
  background-color: var(--card); background-image: var(--washi); box-shadow: var(--ba-sh-2);
  font-size: 17px; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; line-break: strict;
}
.p-doc .doc__body .eyebrow { text-align: center; font-size: 22px; margin-bottom: 8px; }
.p-doc .doc__body h1 {
  margin: 0 0 18px; text-align: center; font-family: var(--font-serif); font-size: 25px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; color: var(--ink);
}
.p-doc .doc__body h1::before { content: none; }
.p-doc .doc__body h1::after { content: ""; display: block; width: 56px; height: 1px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.p-doc .doc__body h2 {
  display: flex; align-items: flex-start; gap: 10px; margin: 34px 0 10px; padding: 0 0 8px; border: 0; border-bottom: 1px dashed var(--line-2);
  font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: .04em; color: var(--ink);
}
.p-doc .doc__body h2::before {
  content: ""; width: 14px; height: 14px; flex: none; margin-top: .5em; background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
}
.p-doc .doc__body h3 { margin: 20px 0 6px; font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
.p-doc .doc__body p, .p-doc .doc__body li { font-size: 17px; line-height: 1.9; }
.p-doc .doc__body p { margin: 0 0 12px; }
.p-doc .doc__body ul, .p-doc .doc__body ol { margin: 0 0 12px; padding-left: 1.3em; }
.p-doc .doc__body li { margin: 0 0 6px; }
.p-doc .doc__body li::marker { color: var(--petal-2); }
.p-doc .doc__body strong { font-weight: 700; color: var(--rose-deep); }
.p-doc .doc__body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.p-doc .doc__body th, .p-doc .doc__body td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.p-doc .doc__draft {
  margin: 0 0 20px; padding: 12px 16px; border: 0; border-radius: 14px; text-align: center;
  font-size: 15px; line-height: 1.7; color: #6b5220; background: #fff4d8; box-shadow: inset 0 0 0 1px rgba(138,106,58,.3);
}
.p-doc .doc__meta { margin: 26px 0 0; padding: 16px; border-radius: 12px; font-size: 15px; line-height: 1.9; color: var(--muted); background: rgba(245,235,226,.7); }
.doc__more { position: relative; z-index: 1; margin-top: 30px; }
.doc__more-h {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px 4px;
  font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink);
}
.doc__more-h::before {
  content: ""; width: 14px; height: 14px; flex: none; background: var(--petal-2);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1c3 3 5 6 5 10a5 5 0 0 1-10 0c0-4 2-7 5-10z'/></svg>") center / contain no-repeat;
}
.doc__more .ba-menu { margin: 0; }
.p-doc .ba-foot { max-width: 760px; }

/* ── 등장 모션 (시안 .rv-fold · .rv) — JS 없이 CSS 로 한 번. calm 이면 끝 상태 ── */
@keyframes ba-fold { from { opacity: 0; transform: perspective(1000px) rotateX(-18deg) translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ba-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ba-seal { 0% { transform: scale(1.6) rotate(-10deg); opacity: 0; } 55% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.ba-card, .p-doc .doc__body { transform-origin: 50% 0; animation: ba-fold 1.1s var(--ease) both; }
.ba-seal { animation: ba-seal .7s var(--ease) .45s both; }
.ba-menu, .doc__more { animation: ba-rise .7s var(--ease) .24s both; }
.ba .step:not([hidden]) { animation: ba-rise .6s var(--ease) both; }
html.calm :is(.ba-card, .ba-seal, .ba-menu, .doc__more, .p-doc .doc__body, .ba .step) { animation: none; }

/* ── 태블릿 · 데스크톱 ── */
@media (min-width: 700px) {
  .ba-card { padding: 44px 40px 36px; }
  .p-doc .doc__body { padding: 44px 48px 36px; }
}
@media (min-width: 1024px) {
  .ba-top { justify-content: space-between; min-height: 80px; padding: 10px 40px; backdrop-filter: blur(14px) saturate(1.2); background: rgba(251,246,239,.84); }
  .ba-brand { order: -1; align-items: flex-start; }
  .ba-brand__script { font-size: 34px; }
  .ba-back { position: static; transform: none; padding: 0 20px; font-size: 17px; }
  .ba { max-width: 600px; padding-top: 64px; }
  .ba::before { width: 220px; top: 4px; right: -150px; }
  .ba::after {                                  /* 왼쪽 아래에도 가지 하나 (시안 데스크톱의 여백 장식) */
    content: ""; position: absolute; z-index: 0; left: -170px; bottom: 60px; width: 200px; aspect-ratio: 260 / 200;
    background: var(--ba-branch) no-repeat center / contain; transform: scaleX(-1) rotate(12deg); opacity: .75; pointer-events: none;
  }
  .ba-h { font-size: 27px; }
  .p-doc .doc { padding-top: 48px; }
  .p-doc .doc::before { width: 220px; top: 10px; right: -170px; }
  .p-doc .doc__body h1 { font-size: 27px; }
}

/* 글자 크기(마이 → 読みやすさ): 앱 화면의 .app 처럼 본문·발을 확대 */
html[data-fs="l"] :is(.ba, .p-doc .doc, .ba-foot) { zoom: 1.1; }
html[data-fs="xl"] :is(.ba, .p-doc .doc, .ba-foot) { zoom: 1.22; }
.ba-seg__item { white-space: nowrap; }
/* 좁은 폰 + 큰 글자: 여백을 줄여 글자에 폭을 돌려준다 */
@media (max-width: 419px) {
  html[data-fs] .ba { padding-left: 10px; padding-right: 10px; }
  html[data-fs] .ba-card { padding: 30px 14px 24px; }
  html[data-fs] .ba .notice-ai--block { padding: 16px 14px; }
  html[data-fs] .ba .check { padding-left: 8px; padding-right: 8px; gap: 10px; }
  html[data-fs] .ba-seg__item { padding: 0 4px; }
  html[data-fs] .p-doc .doc { padding-left: 10px; padding-right: 10px; }
  html[data-fs] .p-doc .doc__body { padding: 26px 14px 22px; }
}
.ba-form { scroll-margin-top: 76px; }
@media (min-width: 1024px) { .ba-form { scroll-margin-top: 100px; } }
html[lang="en"] .ba-brand__jp { display: none; }

/* ── r2 ── */
/* 선택 상자 — 목록이 열린다는 로즈 셰브런 (시안 menu-row 화살표와 같은 선) */
.ba select.field__input {
  -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer; text-overflow: ellipsis;
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b23a62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 16px center / 20px 20px;
}
.ba select.field__input:disabled { cursor: default; background-color: var(--paper-2); }

/* 발 — 시안 .foot .brand (스크립트 + 자간 넓은 일본어 한 줄) */
.ba-foot__script { margin-bottom: 4px; }
.ba-foot__jp { display: block; margin-bottom: 10px; font-family: var(--font-serif); font-size: 11px; line-height: 1; letter-spacing: .32em; padding-left: .32em; color: var(--muted); }
html[lang="en"] .ba-foot__jp { display: none; }
html[lang="en"] .ba-foot__script { margin-bottom: 10px; }

/* 찾기 — 탭 아래 안내문은 가운데, 고아 글자 없이 */
.ba-form > .hint:first-child { text-align: center; word-break: auto-phrase; text-wrap: balance; }

/* 인증 코드 보내기 — 코드 칸이 열리기 전에는 이 카드의 주 행동이므로 로즈 알약 */
.ba :is(form, .step):has(> [data-role="code-area"][hidden]) > :is([data-role="send"], [data-role="send-code"]) {
  color: var(--brand-fg);
  background: linear-gradient(180deg, #bd4169, var(--rose) 55%, #a33459);
  box-shadow: 0 10px 24px -10px rgba(143,43,77,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.ba :is(form, .step):has(> [data-role="code-area"][hidden]) > :is([data-role="send"], [data-role="send-code"]):hover {
  transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(143,43,77,.65);
}

/* 약관 편지 — 인증 카드와 같은 항공우편 테두리 + 봉랍 */
.p-doc .doc__body { isolation: isolate; }
.p-doc .doc__body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 7px; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--petal-2) 0 14px, transparent 14px 24px, #d7b88a 24px 38px, transparent 38px 48px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .7;
}
.p-doc .doc__seal { margin: 6px auto 14px; }
.p-doc .doc::before { z-index: 2; }
.p-doc .doc__draft, .ba-menu a > span:not(.ba-mic) { word-break: auto-phrase; text-wrap: balance; }

/* ── r3 ── */
/* 워드마크 링크 — 탭 영역 48px */
.ba-brand { min-height: 48px; min-width: 48px; justify-content: center; padding: 4px 8px; border-radius: 14px; }

/* 벚꽃 가지 — 편지 테두리를 덮지 않고 편지 뒤에서 가지 끝만 여백으로 (시안 .branch 는 여백 장식) */
.ba::before { z-index: 0; top: -10px; right: 0; }
.p-doc .doc::before { z-index: 0; }

/* 생일 — 브라우저 기본 달력 표시를 편지 부품으로 */
.ba input[type="date"].field__input { position: relative; text-align: left; -webkit-appearance: none; appearance: none; }
.ba input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.ba input[type="date"]::-webkit-datetime-edit { padding: 0; color: var(--ink); }
.ba input[type="date"]:invalid::-webkit-datetime-edit, .ba input[type="date"]:not(:focus):placeholder-shown::-webkit-datetime-edit { color: var(--muted); }
.ba input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.ba input[type="date"]::-webkit-calendar-picker-indicator {
  width: 40px; height: 40px; margin: -8px -8px -8px 0; padding: 0; border-radius: 12px; cursor: pointer; opacity: 1;
  background: var(--blush) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f2b4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='5.5' width='16' height='14.5' rx='2.5'/><path d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/></svg>") center / 22px no-repeat;
}
.ba input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: #f6d5dc; }

/* 곁 칸 — 시안 sec-head + .trust */
.ba-side { position: relative; z-index: 1; margin-top: 40px; }
.ba-sechead { margin-bottom: 16px; }
.ba-sechead h2 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 23px; line-height: 1.45; letter-spacing: .04em; color: var(--ink); word-break: keep-all; word-break: auto-phrase; text-wrap: balance; }
.ba-trust { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ba-trust li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: rgba(255,253,250,.8); box-shadow: inset 0 0 0 1px var(--line); }
.ba-trust .ba-ico { width: 28px; height: 28px; margin-top: 2px; color: var(--rose); }
.ba-trust b { display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--ink); word-break: keep-all; word-break: auto-phrase; }
.ba-trust span { display: block; font-size: 16px; line-height: 1.75; color: var(--muted); line-break: strict; text-wrap: pretty; }
.ba-trust li { animation: ba-rise .7s var(--ease) calc(.3s + var(--d, 0) * .08s) both; }
html.calm .ba-trust li { animation: none; }
@media (max-width: 1023px) { .ba-side--desk { display: none; } }

/* 데스크톱 — 시안 .home-top / .mycols 처럼 두 칸: 편지(+메뉴) | 안심 섹션 */
@media (min-width: 1024px) {
  .ba {
    max-width: 1080px; padding-left: 40px; padding-right: 40px;
    display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); column-gap: 56px; align-items: start;
    grid-template-areas: "card side" "menu side";
  }
  .ba > .ba-card { grid-area: card; }
  .ba > .ba-menu { grid-area: menu; }
  .ba > .ba-side { grid-area: side; position: sticky; top: 110px; margin-top: 0; padding-top: 96px; }
  .ba-sechead h2 { font-size: 27px; }
  .ba::before { z-index: 0; width: 180px; top: 0; right: 0; left: auto; }
  .ba::after { left: -120px; }
  .ba-foot { max-width: 1080px; }

  .p-doc .doc {
    max-width: 1140px; padding-left: 40px; padding-right: 40px;
    display: grid; grid-template-columns: minmax(0, 740px) 320px; justify-content: center; column-gap: 44px; align-items: start;
  }
  .p-doc .doc::before { top: 6px; right: 40px; width: 180px; }
  .p-doc .doc__more { position: sticky; top: 110px; margin-top: 0; padding-top: 110px; }
  .p-doc .ba-foot { max-width: 1140px; }
}

/* 홈 — 그의 편지가 아직 없는 계정(大抵 첫 대화 직후): 왼쪽 칸이 인사말만 남아 텅 빈다.
   2단을 풀고, 続きから話す 를 인사말 아래 가로 3열로 편다. */
@media (min-width: 1024px) {
  body.nav-home .home-top:not(:has(.today)) { display: block; }
  body.nav-home .home-top:not(:has(.today)) .home-top__side > section:first-child .section-head { margin-top: 28px; }
  body.nav-home .home-top:not(:has(.today)) .cont { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* 대화방 — 내 말풍선·입력칸도 그의 편지와 같은 손글씨 서체로(2026-09-30 요청: "his font is better").
   같은 편지 세트의 글씨로 맞추되, 내 쪽은 괘선 없이 블러시 종이 그대로 둔다. 입력칸은 iOS 확대 방지로 16px 이상. */
.bubble--mine .bubble__text,
.composer__input {
  font-family: "Klee One", "Gowun Batang", "Noto Serif JP", serif;
  letter-spacing: .02em;
}
.bubble--mine .bubble__text { font-size: 18px; font-weight: 400; }
.composer__input { font-size: 18px; }
.composer__input::placeholder { font-family: "Klee One", "Gowun Batang", "Noto Serif JP", serif; }

/* ── 통화 중 배치 (`.call.is-calling`, call.js 가 시작·끝에 여닫는다) ─────────────────
 * 영상통화는 얼굴을 보려고 하는 것이다. 통화가 시작되면 큰 편지 카드(아바타·이름·안내)를 걷고,
 * 얼굴(영상/사진)을 화면 전체에 두고, 자막·상태·요금·버튼만 아래 그라데이션 위에 얹는다.
 * 넓은 화면에서도 폴라로이드·오른쪽 카드를 풀어 같은 배치로 — 얼굴은 잘리지 않게 contain. */
body.p-call .call.is-calling { background: #1e1016; }
body.p-call .call.is-calling .call__photo,
body.p-call .call.is-calling .call__video {
  inset: 0; left: 0; top: 0; width: 100%; height: 100%;
  padding: 0; background: transparent; transform: none; box-shadow: none;
  object-fit: cover; object-position: 50% 30%;
}
body.p-call .call.is-calling .call__tape,
body.p-call .call.is-calling .call__avatar,
body.p-call .call.is-calling .call__eyebrow,
body.p-call .call.is-calling .call__name,
body.p-call .call.is-calling .call__hint { display: none; }
body.p-call .call.is-calling .call__scrim {
  background: linear-gradient(to bottom, rgba(30,16,22,.45) 0%, transparent 16%, transparent 58%, rgba(30,16,22,.88) 100%);
}
body.p-call .call.is-calling .call__panel {
  position: absolute; left: 0; right: 0; top: auto; bottom: 0; transform: none;
  width: 100%; max-width: none; margin: 0; gap: 8px;
  padding: 0 var(--gap) calc(22px + env(safe-area-inset-bottom));
  background: none; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.p-call .call.is-calling .call__panel::before,
body.p-call .call.is-calling .call__panel::after { display: none; }
/* 자막 — 방금 오간 말. 두 줄까지, 얼굴 아래 */
body.p-call .call.is-calling .call__caption {
  max-width: min(640px, 100%); max-height: none; margin: 0;
  padding: 8px 16px; border-radius: 14px; background: rgba(30,16,22,.55);
  font-size: 17px; line-height: 1.6; color: #fbf1ea; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.p-call .call.is-calling .call__caption[hidden] { display: none; }
body.p-call .call.is-calling .call__state { font-size: 16px; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
body.p-call .call.is-calling .call__rate { font-size: 15px; margin: 0; color: rgba(251,241,234,.82); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* 알림은 잠깐 뜨는 토스트 (call.js 가 6초 뒤 닫는다) */
body.p-call .call.is-calling .call__msg {
  width: auto; max-width: min(560px, 100%); padding: 8px 18px; border-radius: 999px;
  font-size: 15px; line-height: 1.5; text-align: center;
  background: rgba(30,16,22,.78); color: #ffd9df; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
body.p-call .call.is-calling .call__controls { margin-top: 6px; gap: 48px; }
@media (min-width: 1024px) {
  /* 넓은 화면: 가로로 긴 화면에 cover 면 머리가 잘린다 — 얼굴 전체가 보이게 contain */
  body.p-call .call.is-calling .call__photo,
  body.p-call .call.is-calling .call__video { object-fit: contain; object-position: 50% 50%; top: 64px; height: calc(100% - 64px); }
  body.p-call .call.is-calling .call__panel { padding-bottom: 28px; }
}
/* 상태 줄은 밝은 영상 위에서도 읽히게 옅은 밤색 알약 위에 */
body.p-call .call.is-calling .call__state { padding: 2px 14px; border-radius: 999px; background: rgba(30,16,22,.5); color: #f0dcae; }