/* ═══════════════════════════════════════════
   마이 스타 캘린더 (My Star Calendar) — style.css
   톤앤매너: 화이트 베이스 + 라임 포인트, 미니멀 에디토리얼
   테마: --accent 하나만 갈아끼우면 전체가 바뀌는 구조
   ═══════════════════════════════════════════ */

:root {
  --accent: #141414;
  --on-accent: #111111;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--bg));
  --accent-softer: color-mix(in srgb, var(--accent) 9%, var(--bg));
  --accent-deep: color-mix(in srgb, var(--accent) 75%, #000);

  --bg: #ffffff;
  --bg-soft: #f5f6f7;
  --card: #ffffff;
  --text: #141414;
  --muted: #8b8b8b;
  --line: #ececec;
  --line-strong: #141414;
  --shadow: 0 2px 14px rgba(0, 0, 0, .05);

  --c-comeback: #ff7aa2;
  --c-concert: #7a86ff;
  --c-ticket: #ff5c5c;
  --c-birthday: #ffb13d;
  --c-broadcast: #3dbdff;
  --c-release: #2ecc9a;
  --c-personal: #9b9b9b;

  --radius: 14px;
  --nav-h: 62px;
}

[data-dark="true"] {
  --bg: #131314;
  --bg-soft: #1a1a1c;
  --card: #1d1d1f;
  --text: #f2f2f0;
  --muted: #c6c6cc;
  --line: #2c2c2e;
  --line-strong: #f2f2ef;
  --shadow: 0 2px 14px rgba(0, 0, 0, .35);
  /* 다크모드에선 강조색을 '검정 쪽'이 아니라 '흰색 쪽'으로 섞어 더 밝게
     → 강조 글씨·아이콘이 어둡게 묻히지 않고 또렷하게 보임 */
  --accent-deep: color-mix(in srgb, var(--accent) 70%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--card));
  --accent-softer: color-mix(in srgb, var(--accent) 13%, var(--card));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 모바일에서 버튼·카드 등 탭 시 생기는 회색 네모 하이라이트 제거 (FAB가 사각형으로 보이던 문제).
   키보드 포커스 링(:focus-visible)은 아래에서 따로 유지하므로 접근성에는 영향 없음. */
* { -webkit-tap-highlight-color: transparent; }
button, a, .fab, [onclick], [role="button"] { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  letter-spacing: -0.01em;
  /* 테마 전환은 무전환 — 부분 페이드가 섬광처럼 보여서 제거 */
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); }
.hidden { display: none !important; }
img { max-width: 100%; display: block; }
/* 키보드 포커스만 또렷한 링 — 마우스·터치 클릭 후엔 표시 안 함 (표준 a11y) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* 라인 아이콘 공용: 글자 크기를 따라가는 인라인 SVG */
svg.li {
  width: 1em; height: 1em; flex: 0 0 auto;
  display: inline-block; vertical-align: -0.125em;
}
button svg.li, .btn svg.li { pointer-events: none; }

/* ───────── 공용 컴포넌트 ───────── */
.btn {
  border: none; border-radius: 10px;
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s, opacity .15s;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-dark { background: var(--line-strong); color: var(--bg); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-danger { background: transparent; border: 1px solid #ff5c5c; color: #ff5c5c; }
.btn-lg { width: 100%; padding: 15px; font-size: 15px; border-radius: 12px; margin-top: 18px; }
.btn-sm { padding: 8px 13px; font-size: 13px; }
.btn-lg.slim { margin-top: 10px; padding: 12px; font-size: 13.5px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.card-title {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.card-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); display: inline-block;
}
.card-title small { color: var(--muted); font-weight: 400; }
.card .field:last-child { margin-bottom: 0; }
.card > .row-field { min-height: 34px; }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 600;
  margin-bottom: 6px; color: var(--text);
}
.field label small { color: var(--muted); font-weight: 400; }
.field input[type="text"], .field input[type="url"], .field input[type="date"],
.field input[type="time"], .field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 80px; }
/* 년/월/일 커스텀 드롭다운 날짜 선택기 (펼친 목록 높이를 제한해 화면을 안 덮음) */
.date-sel { display: flex; gap: 8px; }
.dsel { position: relative; flex: 1; min-width: 0; }
.dsel.ds-y { flex: 1.45; }
.dsel-btn {
  width: 100%; padding: 11px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); color: var(--text); font-size: 14px; text-align: left;
}
.dsel-btn::after { content: "▾"; color: var(--muted); font-size: 11px; }
.dsel-btn.ph { color: var(--muted); }
.dsel-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
  max-height: 208px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2); padding: 5px;
}
.dsel-list button {
  display: block; width: 100%; padding: 9px 11px; text-align: left;
  border: none; background: transparent; color: var(--text); font-size: 14px; border-radius: 8px;
}
.dsel-list button:hover { background: var(--bg-soft); }
.dsel-list button.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
/* 농도 슬라이더 */
.veil-val { float: right; font-weight: 700; color: var(--accent-deep); font-size: 12px; }
.veil-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--bg-soft); border: none;
  outline: none; cursor: pointer; margin-top: 4px;
}
.veil-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: var(--shadow);
}
.veil-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
.row-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row-field label { margin: 0; }
input[type="color"] {
  width: 46px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: none; padding: 2px; cursor: pointer;
}

.hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

.badge-accent {
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
}
.chip-btn {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text);
}

.section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 10px;
}
.section-head h3 { font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.section-sub { font-size: 12px; color: var(--muted); }

.tab-row { display: flex; gap: 6px; margin-bottom: 16px; }
.tab {
  background: transparent; border: 1px solid var(--line); border-radius: 20px;
  padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.swatch-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  position: relative; transition: transform .12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: var(--line-strong); }
.swatch[title]:hover::after {
  content: attr(title); position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  background: var(--line-strong); color: var(--bg); font-size: 10px;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap; z-index: 5;
}

.switch {
  width: 44px; height: 25px; border-radius: 25px;
  border: 1px solid var(--line); background: var(--bg-soft);
  position: relative; transition: background-color .2s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--muted); transition: left .2s, background-color .2s;
}
.switch.dim, .mini-toggle.dim, .tab-row.dim { opacity: .45; }
.tab-row.dim { pointer-events: none; } /* 비활성화: 흐리게 + 클릭 차단 */
.field.dim { opacity: .4; }
.field.dim .veil-range { pointer-events: none; }
.veil-range:disabled { cursor: not-allowed; }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on .knob { left: 21px; background: var(--on-accent); }

/* ───────── 온보딩 ───────── */
:root { --app-h: 100svh; }
.onboarding {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg); overflow-y: auto;
}
.ob-inner {
  max-width: 420px; margin: 0 auto;
  /* 위는 화면 높이에 따라 여유 있게, 아래는 버튼이 가장자리에 붙지 않게 */
  padding: clamp(28px, 7vh, 72px) 24px 40px;
  box-sizing: border-box;
  /* 인앱 브라우저(네이버 등)에서 100vh가 툴바를 포함해 실제보다 커지는 문제 방지.
     JS가 --app-h를 실제 보이는 높이(px)로 채워주고, 미지원 시 svh→vh로 폴백. */
  min-height: 100vh;
  min-height: var(--app-h);
  display: flex; flex-direction: column; justify-content: center;
}
.ob-step { display: none; animation: fadeUp .35s ease; }
/* 활성 스텝: 내용은 위쪽 정렬, 주요 버튼만 적당히 띄움(과하게 벌어지지 않게 상한) */
.ob-step.active { display: flex; flex-direction: column; }
.ob-step.active > .btn-primary { margin-top: clamp(20px, 5vh, 44px); }
.ob-step.active > .btn-primary + .btn { margin-top: 8px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ob-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  color: var(--accent-deep); margin-bottom: 14px;
}
.ob-title { font-size: 32px; line-height: 1.3; font-weight: 800; margin-bottom: 16px; }
.ob-h2 { font-size: 23px; font-weight: 800; margin-bottom: 18px; }
.ob-desc { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.ob-photo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 4/5; max-width: 190px; max-height: 238px;
  margin: 0 auto 14px;
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-soft); cursor: pointer; overflow: hidden;
  text-align: center; color: var(--muted);
  font-size: 26px; line-height: 1.4;
}
.ob-photo small { font-size: 12px; }
.ob-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 낮은 화면(모바일)에서도 가운데 정렬을 유지하되 여백·요소만 압축해 한 화면에 들어오게.
   min-height + justify-content:center 조합이라 내용이 화면보다 길어지면 자동으로
   위→아래로 펼쳐지며 스크롤되므로 위가 잘리지 않음(예전 flex-start 강제 제거). */
@media (max-height: 760px) {
  .ob-inner { padding: 20px 24px 28px; gap: 0; }
  .ob-logo { margin-bottom: 18px; }
  .ob-title { font-size: 28px; margin-bottom: 12px; }
  .ob-desc { margin-bottom: 10px; }
  .ob-eyebrow { margin-bottom: 10px; }
  .ob-photo { max-width: 144px; max-height: 180px; margin-bottom: 12px; }
  .ob-h2 { margin-bottom: 12px; }
  .ob-step .field { margin-bottom: 10px; }
  .ob-step .hint { margin-bottom: 12px !important; }
}

/* ───────── 앱 레이아웃 ───────── */
.app { min-height: 100vh; min-height: 100dvh; }
.main {
  padding: 18px 18px calc(var(--nav-h) + 84px);
  max-width: 1080px; margin: 0 auto;
}
.page { display: none; animation: fadeUp .3s ease; }
.page.active { display: block; }
.page-head { margin: 6px 0 18px; }
.page-head h2 { font-size: 22px; font-weight: 800; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* 모바일 헤더 */
.mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 14px;
  position: sticky; top: 0; background: var(--bg); z-index: 20;
}
.mh-left { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mh-name { font-size: 17px; font-weight: 800; }
.mh-dark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
}
.mh-dark svg { width: 20px; height: 20px; }
.mh-dark .ico-sun { display: none; }
[data-dark="true"] .mh-dark { background: var(--card); border-color: var(--line); color: #ffd34d; }
[data-dark="true"] .mh-dark .ico-moon { display: none; }
[data-dark="true"] .mh-dark .ico-sun { display: inline; }
/* 모바일 헤더 우측 아이콘 버튼들 (공지사항·건의함·다크모드) */
.mh-actions { display: flex; align-items: center; gap: 6px; }
.mh-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--text);
  text-decoration: none; flex: 0 0 auto;
}
.mh-icon svg { width: 19px; height: 19px; }
.mh-icon .nt-dot { position: absolute; top: 6px; right: 7px; margin: 0; }
/* 모바일·태블릿(980px 미만): 스크롤바 숨김 — 터치 기기는 오버레이라 불필요하고,
   고정 스크롤바가 차지하던 폭이 사라져 모달 열 때 화면 밀림·간격 어긋남도 없어짐. 스크롤 자체는 유지됨. */
@media (max-width: 979.98px) {
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* 사이드바 (데스크탑) */
.sidebar { display: none; }

/* 하단 탭 (모바일) */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card); border-top: 1px solid var(--line);
  display: flex;
}
.bn-btn {
  flex: 1; background: none; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  position: relative;
}
.bn-btn .ico { font-size: 17px; line-height: 1; }
.bn-btn.active { color: var(--text); }
.bn-btn.active::before {
  content: ""; position: absolute; inset: 7px 6px;
  background: var(--accent-soft); border-radius: 10px; z-index: -1;
}

/* ───────── 홈: 카톡식 프로필 카드 ───────── */
.profile-card-main {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; margin-bottom: 8px;
}
.pc-cover {
  height: 132px; background: var(--accent-soft);
  background-size: cover; background-position: center;
}
.pc-row { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px 14px; }
.pc-avatar {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft); background-size: cover; background-position: center;
  border: 3px solid var(--card); margin-top: -32px;
}
.pc-info { flex: 1; min-width: 0; padding-top: 9px; }
.pc-go { color: var(--muted); font-size: 21px; padding-bottom: 12px; }
.hero-group { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent-deep); text-transform: uppercase; }
.hero-name { font-size: 21px; font-weight: 800; margin: 0 0 7px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-badges .badge-accent.alt { background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); }

/* ───────── 템플릿 피커 (미리보기 + 썸네일) ───────── */
.tpl-preview {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; background: var(--bg-soft); margin-bottom: 14px;
  min-height: 176px;
  display: flex; flex-direction: column; justify-content: center;
}
.tpl-preview .wf { width: 100%; }
.tpl-preview .wf-cover { height: 84px; }
.tpl-preview .wf-avatar { width: 44px; height: 44px; margin-top: -26px; }
.tpl-preview .wf-rect { width: 44px; height: 54px; }
.tpl-preview .wf-card { height: 44px; }
.tpl-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.tpl-thumb {
  flex: 1 1 calc(33.33% - 7px); min-width: 100px; max-width: 150px;
  background: none; border: none; padding: 0; text-align: center;
}
.tpl-thumb .tt-box {
  border: 2px solid var(--line); border-radius: 11px;
  padding: 9px; background: var(--card); transition: border-color .15s;
  height: 106px;
  display: flex; flex-direction: column; justify-content: center;
}
.tpl-thumb .tt-box .wf { width: 100%; }
.tpl-thumb.active .tt-box { border-color: var(--accent); }
.tpl-thumb .tt-name { font-size: 12px; font-weight: 700; margin-top: 6px; color: var(--muted); }
.tpl-thumb.active .tt-name { color: var(--accent-deep); }
.wf { display: flex; flex-direction: column; gap: 6px; }
.wf-cover { height: 34px; border-radius: 6px; background: var(--accent-soft); }
.wf-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); border: 2px solid var(--card);
  margin: -13px 0 0 9px;
}
.wf-rect { width: 22px; height: 28px; border-radius: 5px; background: var(--line); flex-shrink: 0; }
.wf-line { height: 6px; border-radius: 3px; background: var(--line); }
.wf-line.w60 { width: 60%; }
.wf-line.w40 { width: 40%; }
.wf-row { display: flex; gap: 7px; align-items: center; }
.wf-cards { display: flex; gap: 6px; margin-top: 2px; }
.wf-card { flex: 1; height: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }

/* 포스터 템플릿: 풀 커버 + 오버레이 */
[data-template="poster"] .profile-card-main { position: relative; border: none; }
[data-template="poster"] .pc-cover { height: 340px; }
[data-template="poster"] .pc-row {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 52px 18px 16px; align-items: flex-end;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
[data-template="poster"] .pc-avatar { display: none; }
[data-template="poster"] .pc-info { padding-top: 0; }
[data-template="poster"] .hero-name { color: #fff; font-size: 26px; }
[data-template="poster"] .hero-group { color: rgba(255, 255, 255, .85); }
[data-template="poster"] .hero-badges .badge-accent.alt { background: rgba(255, 255, 255, .22); color: #fff; border: none; backdrop-filter: blur(4px); }
[data-template="poster"] .pc-go { color: rgba(255, 255, 255, .85); padding-bottom: 6px; }

/* 폴라로이드 템플릿: 스크랩북 액자 */
[data-template="polaroid"] .profile-card-main {
  max-width: 430px; margin: 12px auto 16px;
  padding: 13px 13px 16px; border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  transform: rotate(-1.4deg);
  transition: transform .25s;
}
[data-template="polaroid"] .profile-card-main:hover { transform: rotate(0deg); }
[data-template="polaroid"] .pc-cover { height: 250px; border-radius: 3px; }
[data-template="polaroid"] .pc-row { padding: 13px 4px 0; align-items: center; }
[data-template="polaroid"] .pc-avatar { width: 48px; height: 48px; margin-top: 0; border-width: 2px; }
[data-template="polaroid"] .pc-info { padding-top: 0; }
[data-template="polaroid"] .hero-name { font-size: 19px; }

/* 미니멀 템플릿: 타이포그래피 온리 */
[data-template="minimal"] .profile-card-main {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1.5px solid var(--line-strong);
  padding: 4px 0 20px; overflow: visible;
}
[data-template="minimal"] .pc-cover, [data-template="minimal"] .pc-avatar { display: none; }
[data-template="minimal"] .pc-row { padding: 0; }
[data-template="minimal"] .pc-info { padding-top: 0; }
[data-template="minimal"] .hero-name { font-size: 34px; letter-spacing: -.02em; margin: 2px 0 10px; }

/* 클래식 템플릿: 예전 컴팩트 헤더 스타일 */
[data-template="classic"] .profile-card-main {
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px; overflow: visible;
}
[data-template="classic"] .pc-cover { display: none; }
[data-template="classic"] .pc-row { padding: 0; align-items: center; gap: 16px; }
[data-template="classic"] .pc-avatar {
  width: 92px; height: 110px; border-radius: 12px;
  border: none; margin-top: 0; box-shadow: var(--shadow);
  background-color: var(--accent-soft);
}
[data-template="classic"] .pc-info { padding-top: 0; }
[data-template="classic"] .hero-name { font-size: 26px; }

/* ───────── 프로필 상세: 커버 + 꾸미기 ───────── */
.back-btn {
  background: none; border: none; padding: 4px 2px;
  font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 10px;
}
.hero-wrap {
  position: relative; border-radius: 18px; overflow: hidden;
  width: 100%; aspect-ratio: 4/3;
  background: var(--accent-soft);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-deco-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.deco-on .hero-deco-layer { pointer-events: auto; }
.hero-sticker {
  position: absolute; font-size: 31px; line-height: 1;
  transform: translate(-50%, -50%);
  user-select: none; touch-action: none; cursor: grab;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}
.deco-on .hero-sticker { animation: wiggle 1.1s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
/* 앱과 통일된 라인아이콘 스티커 (흰색 + 그림자로 사진 위에서도 또렷) */
.hero-icon-sticker { font-size: 0; }
.hero-icon-sticker .li { width: 36px; height: 36px; color: #fff; stroke-width: 2; }
/* 배경 위 자유 텍스트(문구) */
.hero-deco-text {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 800; white-space: nowrap; line-height: 1.1; letter-spacing: -.01em;
  user-select: none; touch-action: none; cursor: grab;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .35);
}
.deco-on .hero-deco-text { animation: wiggle 1.1s ease-in-out infinite; }
.dt-w { color: #fff; }
.dt-pink { color: #f25c8f; }
.dt-purple { color: #9b6bff; }
.dt-mint { color: #1fc4a8; }
.dt-a { color: #fff; } /* 구버전 호환 */
.dt-b { color: #1f1f1f; text-shadow: 0 1px 5px rgba(255, 255, 255, .6), 0 0 2px rgba(255, 255, 255, .45); }
.dt-s { font-size: 16px; }
.dt-m { font-size: 22px; }
.dt-l { font-size: 30px; }
/* 텍스트 올리기 모달 */
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dt-chips button { padding: 7px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-soft); font-size: 12.5px; font-weight: 600; color: var(--text); }
.dt-chips button:active { transform: scale(.96); }
.dt-chips button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.dt-hint-mini { font-size: 11px; color: var(--muted); margin: -6px 0 12px; }
.dt-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 4px 0 7px; }
.dt-opts { display: flex; gap: 8px; margin-bottom: 14px; }
.dt-opts button { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 700; color: var(--text); }
.dt-opts button.on { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
/* 색상 줄 — .dt-opts와 분리해 색 배경이 안 가려지게 */
.dt-color-row { display: flex; gap: 12px; margin-bottom: 14px; }
.dt-c { width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 1px solid var(--line); cursor: pointer; }
.dt-cc-w { background: #fff; }
.dt-cc-b { background: #1f1f1f; border-color: #1f1f1f; }
.dt-cc-pink { background: #f25c8f; border-color: #f25c8f; }
.dt-cc-purple { background: #9b6bff; border-color: #9b6bff; }
.dt-cc-mint { background: #1fc4a8; border-color: #1fc4a8; }
.dt-c.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
/* 팔레트의 '글자' 버튼 */
.deco-text-btn { width: auto !important; padding: 0 12px; font-size: 13px !important; font-weight: 700; color: var(--accent-deep); white-space: nowrap; }
.hero-deco-btn { position: absolute; top: 12px; right: 54px; z-index: 4; }
.hero-pos-btn { position: absolute; top: 12px; right: 12px; left: auto; z-index: 4; }
.pos-on .hero-deco-btn { display: none; }
.deco-on .hero-pos-btn { display: none; }
.pos-on .hero-pos-btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pos-on { touch-action: none; }
.pos-on .hero-bg { cursor: grab; }
.pos-on .hero-bg:active { cursor: grabbing; }
.deco-on .hero-deco-btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.deco-palette {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 18px);
  z-index: 80;
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  width: min(440px, 92vw);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px;
  max-height: 150px; overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}
.deco-palette button {
  font-size: 21px; width: 37px; height: 37px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px;
}
.deco-ico-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.deco-ico-btn .li { width: 20px; height: 20px; }
.prof-id { text-align: center; margin-top: -48px; position: relative; z-index: 3; }
.prof-avatar {
  width: 94px; height: 94px; border-radius: 50%; margin: 0 auto 9px;
  background: var(--bg-soft); background-size: cover; background-position: center;
  border: 4px solid var(--bg); box-shadow: var(--shadow);
}
.prof-id h2 { font-size: 22px; font-weight: 800; }
.prof-id p { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 2px; }
.prof-id .hero-badges { justify-content: center; margin-top: 9px; }
.prof-actions { justify-content: center; margin: 18px 0 22px; }
.anniv-list { list-style: none; }
.anniv-list li {
  display: flex; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.anniv-list li:last-child { border-bottom: none; }
.anniv-list .al-v { font-weight: 700; font-variant-numeric: tabular-nums; }

.today-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 2px 2px 10px; scrollbar-width: none;
}
.today-scroll::-webkit-scrollbar { display: none; }
.today-card {
  flex: 0 0 auto; width: 168px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px;
  border-top: 4px solid var(--cat, var(--accent));
}
.today-card .tc-cat { font-size: 10.5px; font-weight: 800; color: var(--cat, var(--accent-deep)); letter-spacing: .04em; }
.today-card .tc-time { font-size: 12px; color: var(--muted); margin-top: 5px; }
.today-card .tc-title { font-size: 13.5px; font-weight: 700; margin-top: 2px; word-break: keep-all; }
.today-empty {
  flex: 1; text-align: center; color: var(--muted); font-size: 13px;
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 26px 14px;
  background: var(--card);
}

/* ───────── 홈 추가 섹션 ───────── */
.home-cheer { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font-size: 13px; color: var(--muted); }
.home-cheer b { color: var(--accent-deep); font-weight: 800; }
.home-cheer .li { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 6px; }
.hstat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.hstat .li { width: 20px; height: 20px; color: var(--accent-deep); }
.hstat b { font-size: 16px; font-weight: 800; line-height: 1.1; }
.hstat span { font-size: 11px; color: var(--muted); }

.dday-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dday-scroll::-webkit-scrollbar { display: none; }
.dday-card {
  flex: 0 0 auto; min-width: 116px; max-width: 180px; padding: 12px 14px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--cat, var(--accent)); display: flex; flex-direction: column; gap: 2px;
}
.dday-card .dd-ic .li { width: 16px; height: 16px; color: var(--cat, var(--accent-deep)); }
.dday-card b { font-size: 18px; font-weight: 800; color: var(--cat, var(--accent-deep)); }
.dday-card .dd-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dday-empty { font-size: 12.5px; color: var(--muted); padding: 14px 2px; }

.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 9px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
}
.wk-day.today { border-color: transparent; background: var(--accent); }
.wk-name { font-size: 10px; font-weight: 700; color: var(--muted); }
.wk-name.sun { color: var(--c-ticket); } .wk-name.sat { color: var(--c-concert); }
.wk-num { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.wk-dot.on { background: var(--accent); }
/* 오늘 칸: 강조색 채움 + 글자색은 모드에 맞춰 자동 대비(--on-accent) → 라이트=흰글씨, 다크=검은글씨 */
.wk-day.today .wk-num { color: var(--on-accent); }
.wk-day.today .wk-name,
.wk-day.today .wk-name.sun,
.wk-day.today .wk-name.sat { color: var(--on-accent); opacity: .82; }
.wk-day.today .wk-dot.on { background: var(--on-accent); }

.recent-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.recent-scroll::-webkit-scrollbar { display: none; }
.recent-card {
  flex: 0 0 auto; width: 84px; height: 120px; border-radius: 12px; overflow: hidden; position: relative;
  background-size: cover; background-position: center; background-color: var(--bg-soft); border: 1px solid var(--line);
}
.recent-card .rc-type { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; background: rgba(0,0,0,.5); color: #fff; padding: 1px 6px; border-radius: 6px; }
.recent-card.noimg { display: flex; align-items: center; justify-content: center; }
.recent-card .rc-noimg { font-size: 11px; color: var(--muted); padding: 6px; text-align: center; word-break: keep-all; }
.recent-empty { font-size: 12.5px; color: var(--muted); padding: 14px 2px; display: flex; align-items: center; gap: 6px; }
.recent-empty .li { width: 16px; height: 16px; }

.home-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; }

/* ───────── 홈 편집 (블록 숨기기·순서 이동) ───────── */
.home-tools { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.home-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 700;
}
.home-edit-btn .li { width: 14px; height: 14px; }
/* '완료'는 강조하되 부드럽게 (진한 검정 대신 연한 액센트) */
.home-editing .home-edit-btn { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.home-edit-hint { display: none; font-size: 12px; color: var(--muted); margin: 10px 0 4px; line-height: 1.5; }
.home-editing .home-edit-hint { display: block; }

.home-block { position: relative; }

/* ── 편집 모드: 각 블록을 테두리 대신 그림자로 '떠 있는 흰 카드'로 (위젯 편집 느낌) ── */
.home-editing .home-block {
  position: relative;
  background: var(--card); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 24px rgba(0, 0, 0, .07);
  padding: 20px 18px; margin-bottom: 16px;
  transition: box-shadow .2s ease, transform .12s ease;
}
/* 편집 영역을 살짝 내려 첫 블록의 상단 배지가 안내 문구를 가리지 않게 */
.home-editing #homeBlocks { margin-top: 20px; }
/* 안쪽 카드/헤더 평탄화 — 블록 자체가 하나의 카드가 되도록 (이중 테두리 제거) */
.home-editing .home-block > .card { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; }
.home-editing .home-block > :first-child { margin-top: 0; }
.home-editing .home-block .section-head { margin-top: 0; }

/* 손잡이(⠿) 좌상단 · 빼기(✕) 우상단 — 좌우 대칭 모서리 배지 (블록은 꽉 찬 너비 유지) */
.hb-grip, .hb-x {
  position: absolute; top: -11px; z-index: 6;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.hb-grip { left: -10px; color: var(--accent-deep); cursor: grab; touch-action: none; }
.hb-grip:active { cursor: grabbing; transform: scale(.9); }
.hb-grip .li { width: 15px; height: 15px; fill: currentColor; stroke: none; opacity: .85; }
.hb-x { right: -10px; color: var(--accent-deep); }
.hb-x .li { width: 14px; height: 14px; }
.hb-x:active { transform: scale(.88); color: var(--text); }
/* 1단/2단 너비 토글 — 현재 상태를 글자로 보여주는 부드러운 칩 (손잡이 옆) */
.hb-span {
  position: absolute; top: -12px; left: 22px; z-index: 6;
  height: 25px; padding: 0 11px; border-radius: 13px;
  display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--card); color: var(--accent-deep);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.hb-span.on {
  color: var(--on-accent);
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.hb-span:active { transform: scale(.94); }
/* 드래그 중: 더 높이 들어올린 카드 */
.home-block.hb-dragging { box-shadow: 0 24px 54px rgba(0, 0, 0, .22); }
.hb-ph {
  border-radius: 18px; margin-bottom: 16px; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* 숨긴 블록 트레이 */
.home-add-tray { margin: 4px 0 14px; }
.hat-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 9px; }
.hat-empty { font-size: 12px; color: var(--muted); line-height: 1.5; }
.hat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hat-chip {
  display: inline-flex; align-items: center;
  padding: 9px 15px; border-radius: 20px;
  border: 1px dashed var(--line-strong); background: transparent;
  color: var(--accent-deep); font-size: 12.5px; font-weight: 700;
}
.hat-chip:active { transform: scale(.96); background: var(--accent-soft); }

.clock {
  font-size: 34px; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; text-align: center; margin: 6px 0;
  cursor: pointer;
}
.ticket-next { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.ticket-next strong { color: var(--c-ticket); font-variant-numeric: tabular-nums; }
#ticketLinkBtn { width: 100%; }
.sb-open {
  display: flex; align-items: center; gap: 5px; margin: 0 auto 10px;
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.sb-open .li { width: 13px; height: 13px; }

/* ───────── 전체화면 스탠바이 시계 / 티켓팅 ───────── */
.standby {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px) 20px calc(env(safe-area-inset-bottom) + 14px);
}
.sb-top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.sb-wake { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.sb-close {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft);
  color: var(--text); display: flex; align-items: center; justify-content: center;
}
.sb-close .li { width: 18px; height: 18px; }
.sb-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.sb-tklabel { font-size: 17px; font-weight: 700; color: var(--c-ticket); letter-spacing: .01em; }
.sb-date { font-size: 15px; color: var(--muted); letter-spacing: .02em; }
.sb-clock { font-size: clamp(54px, 21vw, 132px); font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; line-height: 1; }
.sb-sub { font-size: 13px; color: var(--muted); }
.sb-tkbtn {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 26px; border-radius: 14px; font-size: 16px; font-weight: 800;
  background: var(--c-ticket); color: #fff;
}
.sb-tkbtn .li { width: 18px; height: 18px; }
/* 티켓팅 모드 (1시간 이내) */
.standby.ticketing .sb-clock { color: var(--c-ticket); }
/* 오픈 도달 — 점멸 강조 */
.standby.fire .sb-clock { animation: sbFlash .9s steps(1, end) infinite; }
@keyframes sbFlash { 50% { opacity: .22; } }
/* 보정 컨트롤 */
.sb-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sb-offset { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sb-off-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.sb-offset button {
  padding: 7px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sb-offset button:active { transform: scale(.95); }
.sb-off-val { min-width: 60px; text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-off-reset { color: var(--muted) !important; font-weight: 600 !important; }
.sb-hint { font-size: 11px; color: var(--muted); text-align: center; max-width: 320px; }

.stat-big { font-size: 27px; font-weight: 800; margin: 2px 0 10px; }
.spend-bar { display: flex; height: 9px; border-radius: 9px; overflow: hidden; background: var(--bg-soft); margin-bottom: 12px; }
.spend-bar span { height: 100%; }

/* 음악 위젯 */
.music-box { display: flex; flex-direction: column; gap: 10px; }
.music-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.music-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.music-spotify { border-radius: 12px; display: block; }
.music-bar { display: flex; align-items: center; gap: 8px; }
.music-plat { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: auto; }
.music-empty { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 6px 0 2px; }
.music-empty .li { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.up-list { list-style: none; }
.up-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.up-list li:last-child { border-bottom: none; }
.up-list .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.up-list .ud { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.up-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }

/* 멤버십 카드 */
.member-card {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  border-radius: 14px; padding: 18px; cursor: pointer;
  aspect-ratio: 1.7/1; max-width: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow);
}
.mc-top { display: flex; align-items: center; gap: 8px; }
.mc-logo { font-size: 19px; }
.mc-title { font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.mc-name { font-size: 19px; font-weight: 800; letter-spacing: .03em; }
.mc-foot { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; opacity: .75; letter-spacing: .06em; }
/* 멤버십 카드 디자인 프리셋 (카드·미리보기·프리셋 칩 공용) */
.mc-style-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--on-accent); }
.mc-style-midnight { background: linear-gradient(140deg, #2b2b35, #0c0c12); color: #fff; }
.mc-style-holo { background: linear-gradient(120deg, #a18cd1, #fbc2eb 35%, #8fd3f4 70%, #a6c1ee); color: #20203a; }
.mc-style-blossom { background: linear-gradient(135deg, #f78ca0, #f9748f 50%, #fe9a8b); color: #fff; }
.mc-style-ivory { background: linear-gradient(135deg, #fdfbf7, #ece4d6); color: #2a2620; }
.member-card.has-photo { color: #fff; }
/* 멤버십 편집 모달: 미리보기 + 디자인 프리셋 칩 */
.mc-preview-wrap { margin-bottom: 16px; }
.mc-preview-wrap .member-card { margin: 0 auto; cursor: default; }
.mc-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mc-preset {
  height: 38px; padding: 0 15px; border-radius: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  border: 1px solid rgba(0, 0, 0, .08); cursor: pointer;
}
.mc-preset.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); border-color: transparent; }

/* ───────── 캘린더 ───────── */
.cal-head {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 8px 0 14px; position: relative;
}
.cal-head.slim { margin: 4px 0 12px; }
.cal-title { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-head .cal-title { border-radius: 8px; padding: 2px 6px; }
.cal-head .cal-title:active { background: var(--bg-soft); }
/* '오늘' 바로가기 — 헤더 오른쪽 */
.cal-today {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  color: var(--text); font-size: 12.5px; font-weight: 700; padding: 6px 13px;
}
.cal-today:active { transform: translateY(-50%) scale(.94); }
.cal-title.sm { font-size: 16px; }
.cal-arrow {
  background: none; border: 1px solid var(--line); border-radius: 50%;
  width: 32px; height: 32px; font-size: 16px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.binder-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.f-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--card); border-radius: 20px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.f-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.f-chip.active { border-color: var(--line-strong); color: var(--text); }
/* 아카이브 사용자 추가 유형 칩 */
.f-chip.chip-add { border-style: dashed; color: var(--accent-deep); font-weight: 700; }
.f-chip.chip-custom { padding-right: 5px; }
.f-chip .chip-x {
  font-style: normal; font-size: 8px; line-height: 1;
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line);
}
.f-chip.active .chip-x { background: var(--line-strong); color: var(--bg); border-color: var(--line-strong); }

.cal-grid-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-align: center; padding: 6px 0; border-bottom: 1px solid var(--line-strong);
}
.cal-grid-head .sun { color: #ff5c5c; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 64px; padding: 5px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; cursor: pointer; position: relative;
  transition: background-color .15s;
}
.cal-cell:hover { background: var(--accent-softer); }
.cal-cell.other { color: var(--line); cursor: default; }
.cal-cell.today .num {
  background: var(--accent); color: var(--on-accent);
  border-radius: 50%; width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.cal-cell.selected { background: var(--accent-soft); border-radius: 10px; }
.cal-cell .num { font-variant-numeric: tabular-nums; }
.cal-cell .sticker { position: absolute; top: 3px; right: 4px; font-size: 13px; }
.cal-cell .dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.cal-cell .dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-cell .anniv { font-size: 9.5px; color: var(--c-birthday); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 2px; }

.day-panel { margin-top: 18px; border-top: 1.5px solid var(--line-strong); padding-top: 14px; }
.day-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.day-panel-head h3 { font-size: 15px; font-weight: 800; }
.day-panel-actions { display: flex; gap: 6px; }
.day-list { list-style: none; margin-top: 10px; }
.day-list li {
  display: flex; gap: 11px; padding: 11px 2px;
  border-bottom: 1px solid var(--line); align-items: flex-start;
}
.day-list .bar { width: 4px; border-radius: 4px; align-self: stretch; flex-shrink: 0; }
.day-list .dl-main { flex: 1; }
.day-list .dl-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.day-list .dl-title { font-size: 14px; font-weight: 700; }
.day-list .dl-sub { font-size: 12px; color: var(--muted); margin-top: 1px; word-break: break-all; }
.day-list .dl-link { font-size: 12px; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.day-list .dl-del { background: none; border: none; color: var(--muted); font-size: 13px; padding: 2px 5px; display: inline-flex; align-items: center; }
.day-empty { color: var(--muted); font-size: 13px; padding: 14px 2px; }
/* 캘린더↔아카이브 연동: 기록 표시 */
.cal-cell .dots i.rec { background: transparent; border: 1.6px solid var(--accent-deep); box-sizing: border-box; }
.cal-cell .dots i.rec.on { background: var(--accent-deep); }
.f-chip .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1.6px solid var(--accent-deep); box-sizing: border-box; }
.day-list .rec-bar { background: var(--accent-deep); }
.day-list .rec-bar.on { background: var(--accent-deep); opacity: .55; }
.day-list .day-rec { cursor: pointer; }
.day-list .day-rec:hover { background: var(--accent-softer); border-radius: 8px; }
.day-list .rec-cat { color: var(--accent-deep); display: inline-flex; align-items: center; gap: 4px; }
.day-list .rec-cat .li { width: 13px; height: 13px; }
.dl-rec-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; align-self: center; }
.day-list .day-add-rec { border-bottom: none; padding: 12px 0 2px; }
.day-list .day-add-rec .btn { width: 100%; }

/* ───────── 포카 바인더 ───────── */
/* 포카 바인더: 페이지 단위. 열 수는 화면 폭에 맞춰 JS가 채움(모바일 3열~PC 다열), 한 페이지가 한 화면에 들어오게 행 수 자동 */
.binder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* 페이지 넘김 바 */
.binder-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.bp-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-size: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.bp-arrow:disabled { opacity: .35; cursor: default; }
.bp-info { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bp-info b { color: var(--text); font-size: 16px; }
.bp-sep { margin: 0 6px; color: var(--line-strong); opacity: .4; }
.poca-slot {
  aspect-ratio: 5.5/8.5; border-radius: 9px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  position: relative; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.poca-slot img { width: 100%; height: 100%; object-fit: cover; }
.poca-slot[data-pid] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.poca-slot.poca-dragging {
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3); opacity: .97; cursor: grabbing;
  transition: none; z-index: 60;
}
.poca-ph {
  border: 1.6px dashed var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
  box-shadow: none !important;
}
.poca-slot .pc-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; padding: 7px 6px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: #fff; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 빈 포켓: 회색 채움/점선 없이 기본 흰 카드 톤 그대로 + 연한 + 배지만 (깔끔하게) */
.poca-slot.empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--card); box-shadow: none;
  border: 1px solid var(--line);
}
.poca-slot.empty .plus {
  font-size: 26px; line-height: 1; font-weight: 300;
  color: var(--muted); transition: color .15s, transform .12s;
}
.poca-slot.empty:hover .plus { color: var(--accent-deep); }
.poca-slot.empty:active .plus { transform: scale(.9); }
.poca-slot.noimg {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); font-size: 12px; font-weight: 700;
  text-align: center; padding: 8px;
}

/* ───────── 가계부 ───────── */
/* 가계부 인사이트 칩 */
.ledger-insight { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.li-chip {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px;
}
.li-chip.up { color: var(--c-ticket); border-color: color-mix(in srgb, var(--c-ticket) 35%, var(--line)); }
.li-chip.down { color: var(--c-release); border-color: color-mix(in srgb, var(--c-release) 35%, var(--line)); }
.li-chip.ok { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
/* 결제 수단 비중 */
.ledger-pay { margin-top: 10px; }
.lpay-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.lpay { font-size: 12px; color: var(--muted); font-weight: 600; }
.lpay b { color: var(--text); font-weight: 800; margin-left: 2px; }
.ledger-cats { display: flex; flex-direction: column; gap: 7px; }
.lc-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.lc-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lc-row .lc-name { width: 72px; flex-shrink: 0; font-weight: 600; }
.lc-row .lc-track { flex: 1; height: 7px; background: var(--bg-soft); border-radius: 7px; overflow: hidden; }
.lc-row .lc-fill { height: 100%; border-radius: 7px; }
.lc-row .lc-amt { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

.seg-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bar-chart { display: flex; align-items: flex-end; gap: 9px; height: 130px; padding-top: 8px; }
.bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bc-bar { width: 100%; max-width: 38px; background: var(--accent-soft); border-radius: 6px 6px 0 0; min-height: 3px; transition: height .4s ease; }
.bc-col.cur .bc-bar { background: var(--accent); }
/* 아직 오지 않은 달: 예정 표시로 흐리게 (당월 강조는 유지) */
.bc-col.future .bc-bar { opacity: .3; }
.bc-col.future .bc-label { opacity: .5; }
.bc-col.cur.future .bc-bar { opacity: 1; }
.bc-label { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.expense-list { list-style: none; }
.expense-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
}
.expense-list .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.expense-list .ex-main { flex: 1; min-width: 0; }
.expense-list .ex-title { font-size: 14px; font-weight: 700; }
.expense-list .ex-sub { font-size: 11.5px; color: var(--muted); }
.expense-list .ex-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expense-list .dl-del { background: none; border: none; color: var(--muted); }

/* ───────── 아카이브: 카드형(기본) / 피드형 전환 ───────── */
.arch-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.arch-top .tab-row { margin-bottom: 0; }
.arch-top .seg { margin-bottom: 0; }
#archViewSeg button { padding: 6px 9px; display: flex; align-items: center; }
#archViewSeg svg { width: 15px; height: 15px; display: block; }
.arch-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .arch-controls .filter-row { flex-basis: 100%; border-left: none; padding-left: 0; }
}
.mode-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.mode-tabs button {
  background: none; border: none; padding: 6px 10px;
  font-size: 13px; font-weight: 700; color: var(--muted); border-radius: 8px;
}
.mode-tabs button.active { color: var(--text); background: var(--accent-soft); }
.mode-tabs button .li { width: 14px; height: 14px; vertical-align: -2px; }
.cal-mode { margin-bottom: 10px; }
.arch-controls .filter-row {
  flex: 1; padding-bottom: 0;
  border-left: 1px solid var(--line); padding-left: 12px;
}
.diary-grid { display: grid; grid-template-columns: 1fr; gap: 13px; }
.diary-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
}
.diary-card .dc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 15px 0;
}
.diary-card .dc-date {
  font-size: 12px; font-weight: 700; color: var(--accent-deep);
  letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.diary-card .dc-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--bg-soft); margin-top: 10px;
}
.diary-card .dc-body { padding: 12px 15px 15px; }
.diary-card .dc-place { font-size: 12px; color: var(--muted); margin-top: 2px; }
.seg {
  display: inline-flex; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 3px; gap: 3px; margin-bottom: 12px;
}
.seg button {
  border: none; background: transparent; border-radius: 9px;
  padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--muted);
  transition: background-color .15s, color .15s;
}
.seg button.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.dc-type {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 12px; padding: 2px 9px; margin-right: 5px;
}
.diary-card .dc-title { font-size: 15.5px; font-weight: 800; }
.diary-card .dc-text {
  font-size: 13px; color: var(--muted); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 피드형 (인스타 스타일) */
.diary-grid.feed-view {
  display: flex; flex-direction: column; gap: 30px;
  max-width: 540px; margin: 6px auto 0;
}
.feed-view .diary-card { background: none; border: none; border-radius: 0; overflow: visible; }
.feed-view .diary-card + .diary-card { border-top: 1px solid var(--line); padding-top: 26px; }
.feed-view .diary-card .dc-head { padding: 0 2px; margin-bottom: 9px; }
.feed-view .diary-card .dc-date { font-size: 14px; font-weight: 800; color: var(--text); }
.feed-view .diary-card .dc-img {
  aspect-ratio: 4/5; border-radius: 16px; margin: 0 0 12px;
}
.feed-view .diary-card .dc-body { padding: 0 2px; }
.feed-view .diary-card.noimg .dc-body {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px;
}
.feed-view .diary-card .dc-title { font-size: 17px; }
.feed-view .diary-card .dc-place { font-size: 12.5px; }
.feed-view .diary-card .dc-text { font-size: 13.5px; -webkit-line-clamp: 2; }
.diary-empty, .binder-empty-note {
  grid-column: 1/-1; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.7;
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--card);
  /* 비어 있어도 화면을 채우고 메시지를 가운데로 (반응형) */
  min-height: clamp(260px, 56vh, 600px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 18px;
}

.link-add-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.link-add-row input {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); outline: none;
}
.link-add-row input:focus { border-color: var(--accent); }
.link-list { list-style: none; }
.link-list li {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 8px;
}
.link-list .lk-ico { flex-shrink: 0; display: flex; font-size: 17px; color: var(--muted); }
.link-list .lk-main { flex: 1; min-width: 0; }
.link-list .lk-label { font-size: 13.5px; font-weight: 700; }
.link-list .lk-url {
  font-size: 11.5px; color: var(--muted); text-decoration: none; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-list .dl-del { background: none; border: none; color: var(--muted); }
/* 링크 보관함 강화 */
.link-list .lk-label { display: flex; align-items: center; gap: 6px; }
.lk-plat {
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: var(--accent-deep); background: var(--accent-soft);
  border-radius: 5px; padding: 1px 6px; flex-shrink: 0;
}
.lk-read-btn {
  flex-shrink: 0; background: none; border: 1px solid var(--line);
  border-radius: 8px; width: 30px; height: 30px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.lk-read-btn.done { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.lk-read-btn .li { width: 16px; height: 16px; }
.link-list li.lk-read { opacity: .5; }
.link-list li.lk-read .lk-label { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.f-chip.lk-unread-chip .li { width: 13px; height: 13px; }

/* ───────── 스타일북: 위시리스트 그리드 ───────── */
.style-stats { font-size: 12px; color: var(--muted); margin: -6px 0 12px; font-weight: 600; }
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.st-card {
  position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.st-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.st-img {
  aspect-ratio: 1; background: var(--bg-soft);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.st-img svg.li { width: 30px; height: 30px; color: var(--muted); opacity: .55; }
.st-status {
  position: absolute; top: 10px; left: 10px;
  border: none; border-radius: 20px; padding: 5px 11px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.st-status.wish {
  background: rgba(255, 255, 255, .9); color: #141414;
  border: 1px solid rgba(0, 0, 0, .08); backdrop-filter: blur(3px);
}
.st-status.bought { background: var(--accent); color: var(--on-accent); }
.st-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  font-size: 11px; font-weight: 700; color: var(--accent-deep); text-decoration: none;
}
.st-link .li { width: 13px; height: 13px; }
.st-body { padding: 10px 12px 12px; }
.st-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-info { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.7;
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--card);
  min-height: clamp(260px, 56vh, 600px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 18px;
}

/* ───────── 설정 ───────── */
.bias-list { list-style: none; margin-bottom: 10px; }
.bias-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.bias-list .bl-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); background-size: cover; background-position: center;
  flex-shrink: 0; border: 2px solid transparent;
}
.bias-list li.current .bl-avatar { border-color: var(--accent); }
.bias-list .bl-main { flex: 1; }
.bias-list .bl-name { font-size: 14px; font-weight: 700; }
.bias-list .bl-sub { font-size: 11.5px; color: var(--muted); }
.bias-list .chip-btn { font-size: 11px; padding: 5px 10px; }

.more-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--text);
}
.more-row span { color: var(--muted); }
a.more-row { text-decoration: none; }

/* ───────── 공지사항 ───────── */
.nt-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #ff3b30; margin-left: 5px; vertical-align: middle; flex: 0 0 auto;
}
.nt-dot.hidden { display: none !important; }
.notice-list { display: flex; flex-direction: column; gap: 12px; }
.notice-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card);
}
.notice-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.notice-cat {
  font-size: 11px; font-weight: 800; color: #fff;
  padding: 2px 9px; border-radius: 999px; letter-spacing: .02em;
}
.notice-new {
  font-size: 10px; font-weight: 800; color: #ff3b30;
  border: 1px solid #ff3b30; border-radius: 999px; padding: 1px 6px; letter-spacing: .04em;
}
.notice-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.notice-title { font-size: 14.5px; font-weight: 800; margin-bottom: 5px; }
.notice-body { font-size: 13px; color: var(--muted); line-height: 1.6; white-space: pre-line; }
.notice-empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 20px 0; }

/* ───────── FAB ───────── */
.fab-wrap {
  position: fixed; right: 18px; bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--line-strong); color: var(--bg);
  border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  transition: transform .2s;
}
.fab svg { width: 26px; height: 26px; display: block; }
.fab.open { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); }
.fab-menu {
  display: none; flex-direction: column; gap: 7px; align-items: flex-end;
}
.fab-menu.open { display: flex; animation: fadeUp .2s ease; }
.fab-menu button {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--text);
  box-shadow: var(--shadow);
}

/* ───────── 모달 ───────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 120; /* 온보딩(100) 위에서도 동작 */
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--bg); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  padding: 18px 18px 22px;
  animation: slideUp .25s ease;
  scrollbar-width: none; /* 스크롤바 숨김(스크롤은 가능) */
}
.modal::-webkit-scrollbar { display: none; }
/* 모달 안 입력 간격을 촘촘하게 — 한 눈에 들어오게 (모든 모달 통일) */
.modal .field { margin-bottom: 10px; }
.modal .field label { margin-bottom: 4px; }
.modal .field input[type="text"], .modal .field input[type="url"], .modal .field input[type="date"],
.modal .field input[type="time"], .modal .field input[type="number"], .modal .field select, .modal .field textarea {
  padding: 9px 12px;
}
.modal .field textarea { min-height: 62px; }
.modal .btn-lg { margin-top: 12px; padding: 13px; }
.modal .field .seg { margin-bottom: 0; }
.modal .seg { margin-bottom: 10px; }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal.wide { max-width: 640px; }
.modal.wide .field { margin-bottom: 10px; }
.modal.wide .tab { padding: 6px 12px; font-size: 12.5px; }
.modal.wide .btn-lg { margin-top: 12px; padding: 13px; }
.modal-head h3 { font-size: 17px; font-weight: 800; }
.modal-x { background: none; border: none; font-size: 16px; color: var(--muted); padding: 4px 8px; }
.photo-pick {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--bg-soft); min-height: 90px; cursor: pointer;
  color: var(--muted); font-size: 13px; overflow: hidden; margin-bottom: 14px;
}
.photo-pick img { max-height: 200px; width: 100%; object-fit: cover; }
.sticker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sticker-grid button {
  font-size: 23px; padding: 9px 0; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 10px;
}
.sticker-grid button:hover { background: var(--accent-soft); }

/* ───────── 토스트 ───────── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 80px); z-index: 130;
  transform: translateX(-50%) translateY(16px);
  background: var(--line-strong); color: var(--bg);
  padding: 11px 19px; border-radius: 24px;
  font-size: 13px; font-weight: 600; z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════ 태블릿 ═══════ */
@media (min-width: 640px) {
  .home-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .home-grid .card { margin-bottom: 0; }
  .diary-grid:not(.feed-view) { grid-template-columns: 1fr 1fr; }
  .binder-grid { grid-template-columns: repeat(3, 1fr); }
  .link-add-row { flex-direction: row; }
  .link-add-row input[type="url"] { flex: 2; }
  .link-add-row input[type="text"] { flex: 1; }
  .cal-cell { min-height: 84px; }
  .hero-wrap { aspect-ratio: auto; height: clamp(250px, 36vw, 350px); }
  .pc-cover { height: 148px; }
  .style-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════ 데스크탑: 사이드바 ═══════ */
@media (min-width: 980px) {
  .bottom-nav, .mobile-head { display: none; }
  /* 앱 셸: 본문(.main)만 내부 스크롤 — 사이드바·타이틀바는 스크롤 흐름 밖 (절대 안 움직임) */
  body { overflow: hidden; }
  .app { display: flex; height: 100vh; height: 100dvh; min-height: 0; position: relative; }
  .main {
    overflow-y: auto; min-height: 0;
    scrollbar-width: thin; /* 화살표 없는 얇은 스크롤바 — 모서리 잘림 원천 차단 */
    scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent;
  }
  .sidebar {
    display: flex; flex-direction: column;
    width: 240px; flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    padding: 26px 18px;
    background: var(--bg);
  }
  .side-profile {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 18px; border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  .side-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent-soft); background-size: cover; background-position: center;
    flex-shrink: 0;
  }
  .side-name { font-size: 15px; font-weight: 800; }
  .side-dday {
    display: inline-block; font-size: 11px; font-weight: 700;
    background: var(--accent); color: var(--on-accent);
    border-radius: 12px; padding: 1px 9px; margin-top: 2px;
  }
  .bias-switch { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 0; }
  .bias-switch button {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent-soft); background-size: cover; background-position: center;
    border: 2px solid transparent; font-size: 12px; font-weight: 800; color: var(--text);
  }
  .bias-switch button.current { border-color: var(--accent); }
  .side-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; flex: 1; }
  .nav-btn {
    display: flex; align-items: center; gap: 11px;
    background: none; border: none; text-align: left;
    padding: 11px 13px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--muted);
    transition: background-color .15s, color .15s;
  }
  .nav-btn .ico { font-size: 15px; width: 18px; text-align: center; }
  .nav-btn:hover { background: var(--accent-softer); color: var(--text); }
  .nav-btn.active { background: var(--accent-soft); color: var(--text); font-weight: 700; }
  .side-foot { padding-top: 14px; border-top: 1px solid var(--line); }
  .mini-toggle {
    width: 100%; background: none; border: 1px solid var(--line); border-radius: 10px;
    padding: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted);
    transition: background-color .15s, color .15s, border-color .15s;
  }
  .mini-toggle:not(.dim):hover {
    background: var(--accent-softer);
    border-color: var(--line-strong);
    color: var(--text);
  }
  .mini-toggle.dim { cursor: default; }
  /* 사이드바 하단 아이콘 버튼들(공지사항·건의함) — 메뉴 영역 맨 아래, 왼쪽 정렬 */
  .side-tools {
    display: flex; gap: 8px;
    margin-top: auto;        /* 구분선 바로 위로 밀착 */
    margin-bottom: 12px; margin-left: 3px;
  }
  .side-tool {
    position: relative;
    width: 30px; height: 30px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--line);
    background: none; color: var(--muted);
    font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
  }
  .side-tool svg { width: 16px; height: 16px; }
  .side-tool:hover {
    background: var(--accent-softer); border-color: var(--line-strong); color: var(--text);
  }
  .side-tool .nt-dot {       /* 아이콘 버튼 위 빨간 점: 우상단 절대배치 */
    position: absolute; top: -2px; right: -2px; margin: 0;
  }
  .side-tool::after {        /* 호버 툴팁(버튼 위쪽) */
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%) scale(.96);
    background: var(--line-strong); color: var(--bg);
    padding: 6px 10px; border-radius: 8px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, transform .15s; z-index: 40;
    box-shadow: var(--shadow);
  }
  .side-tool:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
  .main { flex: 1; padding: 34px 40px 80px; max-width: none; }
  .page { max-width: 980px; }
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  /* 홈 블록: 데스크톱에서 2열 그리드(편집 모드 포함 — WYSIWYG). 1단/2단은 블록 클래스로 결정 */
  /* align-items:stretch → 같은 줄 두 카드의 높이를 맞춤(보기·편집 공통) */
  #page-home #homeBlocks {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
  }
  /* 1단(전체폭) 블록 + 전체폭 자리표시자 */
  #page-home #homeBlocks > .home-block.hb-full,
  #page-home #homeBlocks > .hb-ph.hb-full { grid-column: 1 / -1; }
  /* 보기(편집 아님)에서: 안쪽 카드가 칸 높이를 꽉 채우도록 */
  #page-home:not(.home-editing) #homeBlocks > .home-block > .card { height: 100%; box-sizing: border-box; }
  /* 반폭이 된 D-DAY는 옆 카드와 어울리게 카드 모양 부여 (편집 모드는 자체 카드 스타일) */
  #page-home:not(.home-editing) #homeBlocks > .home-block[data-block="dday"].hb-half {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px;
  }
  #page-home:not(.home-editing) #homeBlocks > .home-block[data-block="dday"].hb-half .section-head { margin: 0 0 12px; }
  /* 그리드 간격은 gap이 담당 → 내부 카드/헤더의 겹치는 여백 제거 */
  #page-home:not(.home-editing) #homeBlocks > .home-block > .card { margin-bottom: 0; }
  #page-home:not(.home-editing) #homeBlocks > .home-block .section-head { margin-top: 0; }
  /* 멤버십 카드는 칸 안에서 적당한 크기로 가운데 정렬(너무 커지지 않게) */
  #page-home #homeBlocks > .home-block[data-block="membership"] .member-card { max-width: 340px; margin: 0 auto; }
  /* 그리드에선 블록·자리표시자 간격을 gap이 담당 (이중 여백 방지) */
  #page-home.home-editing #homeBlocks > .home-block,
  #page-home #homeBlocks > .hb-ph { margin-bottom: 0; }
  /* 편집 모드: 카드 모서리 배지(손잡이·✕)가 겹치지 않게 열 간격 확대 */
  #page-home.home-editing #homeBlocks { gap: 22px 30px; }
  .hero-wrap { aspect-ratio: auto; height: 330px; }
  .pc-cover { height: 158px; }
  #page-profile { max-width: 760px; }
  .fab-wrap { bottom: 28px; right: 32px; }
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 20px; }
  .toast { bottom: 40px; }
  .binder-grid { grid-template-columns: repeat(3, 1fr); }
  .diary-grid:not(.feed-view) { grid-template-columns: repeat(3, 1fr); }
  .style-grid { grid-template-columns: repeat(4, 1fr); }
  #page-more { display: none !important; }
  /* 캘린더: 그리드 높이를 '화면 기준 고정값'으로 → 아래 패널이 커져도 위 그리드는 안 움직임
     (줄 높이는 1fr로 균등 분배. 패널이 길어지면 페이지 스크롤만 생김) */
  #page-calendar .cal-grid { height: calc(100dvh - 360px); min-height: 340px; grid-auto-rows: 1fr; }
  #page-calendar .cal-cell { min-height: 0; }
  #page-calendar .day-panel { margin-top: 12px; }
}


/* ───────── 로고 ───────── */
.ob-logo {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 22px; color: var(--text);
}
.logo-svg { width: 44px; height: 44px; display: block; }
.logo-svg.sm { width: 30px; height: 30px; }
.logo-word {
  font-family: var(--font-logo);
  font-size: 14px; font-weight: 400; letter-spacing: .12em;
  line-height: 1.5; color: var(--accent-deep);
}
.side-logo {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 18px; cursor: pointer; color: var(--text);
}
.side-logo .logo-word { font-size: 11px; line-height: 1.4; }

/* ───────── 미니홈피(레트로 창) 모드 ───────── */
.retro-bar { display: none; }

[data-retro="true"] body { background-color: var(--bg-soft); }

/* ── 배경 패턴: 미니홈피 창 벽지 + Y2K 모드 배경 (색은 --pat, 기본 accent-soft) ── */
[data-hasbg="true"][data-bg="dot"] body {
  background-image: radial-gradient(var(--pat, var(--accent-soft)) 2px, transparent 2.6px);
  background-size: 20px 20px;
}
[data-hasbg="true"][data-bg="check"] body {
  background-image:
    repeating-linear-gradient(0deg, var(--pat, var(--accent-soft)) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, var(--pat, var(--accent-soft)) 0 12px, transparent 12px 24px);
  background-size: auto;
}
[data-hasbg="true"][data-bg="grid"] body {
  background-image:
    linear-gradient(var(--pat, var(--accent-soft)) 1px, transparent 1px),
    linear-gradient(90deg, var(--pat, var(--accent-soft)) 1px, transparent 1px);
  background-size: 22px 22px;
}
[data-hasbg="true"][data-bg="stripe"] body {
  /* 도톰하지만 연한 사선 — 띠 8px, 농도 절반 */
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--pat, var(--accent-soft)) 50%, transparent) 14px 22px);
  background-size: auto;
}
[data-hasbg="true"][data-bg="zigzag"] body {
  /* 사선을 24px 타일로 잘라 만든 삼각 지그재그 */
  background-image: repeating-linear-gradient(-45deg, transparent 0 16px, var(--pat, var(--accent-soft)) 16px 32px);
  background-size: 24px 24px;
}
/* 별: 진짜 오각별 ★ — SVG 알파 마스크에 모드별 --pat 색을 입힘 (정적 레이어) */
[data-hasbg="true"][data-bg="star"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--pat, var(--accent-soft));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path d='M16 8l2.35 4.76 5.25.76-3.8 3.7.9 5.23L16 20l-4.7 2.45.9-5.23-3.8-3.7 5.25-.76Z'/><path transform='translate(30 32)' d='M16 8l2.35 4.76 5.25.76-3.8 3.7.9 5.23L16 20l-4.7 2.45.9-5.23-3.8-3.7 5.25-.76Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path d='M16 8l2.35 4.76 5.25.76-3.8 3.7.9 5.23L16 20l-4.7 2.45.9-5.23-3.8-3.7 5.25-.76Z'/><path transform='translate(30 32)' d='M16 8l2.35 4.76 5.25.76-3.8 3.7.9 5.23L16 20l-4.7 2.45.9-5.23-3.8-3.7 5.25-.76Z'/></svg>");
  -webkit-mask-size: 60px 64px; mask-size: 60px 64px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
/* 마스크형 패턴 공통 (별과 동일 방식 · 타일에 여백 줘서 적당한 간격) */
[data-hasbg="true"][data-bg="heart"] body::before,
[data-hasbg="true"][data-bg="sparkle"] body::before,
[data-hasbg="true"][data-bg="flower"] body::before,
[data-hasbg="true"][data-bg="clover"] body::before,
[data-hasbg="true"][data-bg="ribbon"] body::before,
[data-hasbg="true"][data-bg="cherry"] body::before,
[data-hasbg="true"][data-bg="apple"] body::before,
[data-hasbg="true"][data-bg="cloud"] body::before,
[data-hasbg="true"][data-bg="wave"] body::before,
[data-hasbg="true"][data-bg="diamond"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--pat, var(--accent-soft));
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  /* 별과 동일: 한 타일(60×64)에 큰 것 + 작은 것을 엇갈리게 → 흩뿌린 느낌 */
  -webkit-mask-size: 60px 64px; mask-size: 60px 64px;
}
[data-hasbg="true"][data-bg="heart"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/><path transform='translate(34 36)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/><path transform='translate(34 36)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/></svg>");
}
[data-hasbg="true"][data-bg="sparkle"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/><path transform='translate(34 36)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/><path transform='translate(34 36)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/></svg>");
}
[data-hasbg="true"][data-bg="flower"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(1 3)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g><g transform='translate(33 34)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(1 3)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g><g transform='translate(33 34)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g></svg>");
}
[data-hasbg="true"][data-bg="cloud"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 6)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/><path transform='translate(33 38)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 6)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/><path transform='translate(33 38)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/></svg>");
}
[data-hasbg="true"][data-bg="diamond"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/><path transform='translate(34 36)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/><path transform='translate(34 36)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/></svg>");
}
[data-hasbg="true"][data-bg="wave"] body::before {
  -webkit-mask-size: 48px 22px; mask-size: 48px 22px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='22' viewBox='0 0 48 22'><path d='M0 15 q6 -10 12 0 t12 0 t12 0 t12 0' fill='none' stroke='black' stroke-width='2.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='22' viewBox='0 0 48 22'><path d='M0 15 q6 -10 12 0 t12 0 t12 0 t12 0' fill='none' stroke='black' stroke-width='2.4'/></svg>");
}
[data-hasbg="true"][data-bg="clover"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 4)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g><g transform='translate(33 35)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 4)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g><g transform='translate(33 35)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g></svg>");
}
[data-hasbg="true"][data-bg="ribbon"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 6)'><path d='M12 10 C 6 3.5 0.5 4.5 1.8 10 C 0.5 15.5 6 16.5 12 10 Z'/><path d='M12 10 C 18 3.5 23.5 4.5 22.2 10 C 23.5 15.5 18 16.5 12 10 Z'/><circle cx='12' cy='10' r='2.4'/><path d='M10.3 12 L7.8 18 M13.7 12 L16.2 18' stroke='black' stroke-width='1.7' fill='none'/></g><g transform='translate(34 36)'><path d='M12 10 C 6 3.5 0.5 4.5 1.8 10 C 0.5 15.5 6 16.5 12 10 Z'/><path d='M12 10 C 18 3.5 23.5 4.5 22.2 10 C 23.5 15.5 18 16.5 12 10 Z'/><circle cx='12' cy='10' r='2.4'/><path d='M10.3 12 L7.8 18 M13.7 12 L16.2 18' stroke='black' stroke-width='1.7' fill='none'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 6)'><path d='M12 10 C 6 3.5 0.5 4.5 1.8 10 C 0.5 15.5 6 16.5 12 10 Z'/><path d='M12 10 C 18 3.5 23.5 4.5 22.2 10 C 23.5 15.5 18 16.5 12 10 Z'/><circle cx='12' cy='10' r='2.4'/><path d='M10.3 12 L7.8 18 M13.7 12 L16.2 18' stroke='black' stroke-width='1.7' fill='none'/></g><g transform='translate(34 36)'><path d='M12 10 C 6 3.5 0.5 4.5 1.8 10 C 0.5 15.5 6 16.5 12 10 Z'/><path d='M12 10 C 18 3.5 23.5 4.5 22.2 10 C 23.5 15.5 18 16.5 12 10 Z'/><circle cx='12' cy='10' r='2.4'/><path d='M10.3 12 L7.8 18 M13.7 12 L16.2 18' stroke='black' stroke-width='1.7' fill='none'/></g></svg>");
}
[data-hasbg="true"][data-bg="cherry"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g><g transform='translate(34 36)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g><g transform='translate(34 36)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g></svg>");
}
[data-hasbg="true"][data-bg="apple"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g><g transform='translate(34 36)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g><g transform='translate(34 36)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g></svg>");
}
/* -- pattern style scatter override (data-patstyle=scatter): 큰+작은 흩뿌림 복원. 리본은 항상 사선 -- */
[data-hasbg="true"][data-patstyle="scatter"][data-bg="star"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path d='M16 8l2.35 4.76 5.25.76-3.8 3.7.9 5.23L16 20l-4.7 2.45.9-5.23-3.8-3.7 5.25-.76Z'/><path d='M44 40l1.62 3.28 3.62.53-2.62 2.55.62 3.6L44 48.26l-3.24 1.7.62-3.6-2.62-2.55 3.62-.53Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path d='M16 8l2.35 4.76 5.25.76-3.8 3.7.9 5.23L16 20l-4.7 2.45.9-5.23-3.8-3.7 5.25-.76Z'/><path d='M44 40l1.62 3.28 3.62.53-2.62 2.55.62 3.6L44 48.26l-3.24 1.7.62-3.6-2.62-2.55 3.62-.53Z'/></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="heart"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/><path transform='translate(34 36) scale(0.6)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/><path transform='translate(34 36) scale(0.6)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="sparkle"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/><path transform='translate(34 36) scale(0.62)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/><path transform='translate(34 36) scale(0.62)' d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="flower"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(1 3)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g><g transform='translate(33 34) scale(0.6)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(1 3)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g><g transform='translate(33 34) scale(0.6)'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></g></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="clover"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 4)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g><g transform='translate(33 35) scale(0.6)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 4)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g><g transform='translate(33 35) scale(0.6)'><circle cx='12' cy='8' r='4.4'/><circle cx='12' cy='16' r='4.4'/><circle cx='8' cy='12' r='4.4'/><circle cx='16' cy='12' r='4.4'/></g></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="cherry"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g><g transform='translate(34 36) scale(0.6)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g><g transform='translate(34 36) scale(0.6)'><circle cx='7' cy='17' r='3.9'/><circle cx='16' cy='15' r='3.9'/><path d='M10.5 5 Q7 11 7 13.2 M10.5 5 Q15 9.5 16 11.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M10.5 5 q4 -2.5 7 -0.8 q-3 2.2 -7 0.8 Z'/></g></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="cloud"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 6)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/><path transform='translate(33 38) scale(0.6)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 6)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/><path transform='translate(33 38) scale(0.6)' d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="diamond"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/><path transform='translate(34 36) scale(0.6)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><path transform='translate(2 5)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/><path transform='translate(34 36) scale(0.6)' d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/></svg>");
}
[data-hasbg="true"][data-patstyle="scatter"][data-bg="apple"] body::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g><g transform='translate(34 36) scale(0.6)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='64' viewBox='0 0 60 64'><g transform='translate(2 5)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g><g transform='translate(34 36) scale(0.6)'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></g></svg>");
}
[data-hasbg="true"][data-bg="none"] body { background-image: none; }
/* 응원봉은 위 :not()으로 제외 — 암전 유지 */

/* ── 콘텐츠 ↔ 패턴 배경 사이의 불투명 막 (가독성용)
   콘텐츠 열 뒤에 '고정 레이어'로 깔아 페이지 길이·스크롤·반응형(모바일/태블릿/PC)과 무관하게 항상 동일한 크기·위치.
   헤더(z20)·하단 네비(z30)·사이드바가 위/아래/옆을 덮어 자연스럽게 맞물림. 농도 --veil(0~100%)는 설정 슬라이더로 조절.
   veil 0%면 투명 → 변화 없음. ── */
[data-hasbg="true"]:not([data-bg="none"]):not([data-retro="true"])[data-mode="none"] .app::before {
  content: "";
  position: fixed; z-index: -1; pointer-events: none;
  /* 화면 위~아래 끝까지 꽉 채움(헤더·하단 네비가 위/아래를 덮음). 모바일/태블릿 기본 */
  top: 0; bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg) var(--veil, 0%), transparent);
  border-radius: 0;
  /* 스크롤 시 재그리기 줄이려 별도 레이어로 분리 (보이는 건 동일) */
  transform: translateZ(0);
  will-change: transform;
}
@media (min-width: 980px) {
  /* 데스크톱: 콘텐츠 열(폭 980, 사이드바 옆 280~1260) 기준으로 좌우 같은 여백(40px씩)을 두고 막을 덮음.
     left 240 = 사이드바 끝(왼쪽 틈 제거), max-width 1060 = 콘텐츠980 + 좌우40 → 오른쪽도 동일 여백. */
  [data-hasbg="true"]:not([data-bg="none"]):not([data-retro="true"])[data-mode="none"] .app::before {
    left: 240px; right: 12px; max-width: 1060px;
    top: 0; bottom: 0;
  }
}
@media (min-width: 1360px) {
  /* '가운데 정렬'에선 사이드바가 중앙으로 밀리므로 막도 같이 이동 */
  [data-hasbg="true"]:not([data-bg="none"]):not([data-retro="true"])[data-mode="none"][data-align="center"] .app::before {
    left: calc((100vw - 1340px) / 2 + 240px);
  }
}

[data-retro="true"] .app {
  margin: 14px;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  overflow: clip;
  background: var(--bg);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .13);
  min-height: calc(100vh - 28px);
  min-height: calc(100dvh - 28px);
  flex-wrap: wrap;
}
[data-retro="true"] .retro-bar {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  height: 48px; /* 모든 스킨 동일 고정 — 아래 오프셋들의 기준 */
  padding: 9px 14px;
  background: var(--bg-soft);
  border-bottom: 2px solid var(--line-strong);
  position: sticky; top: 0; z-index: 60;
}
.tl {
  width: 13px; height: 13px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .18);
  transition: transform .12s;
  position: relative;
}
.tl:hover { transform: scale(1.18); }
/* 신호등: 올린 버튼에만 기호 표시 */
.tl::before {
  content: ""; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; line-height: 1;
  color: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .12s;
}
.tl-close::before { content: "✕"; }
.tl-min::before { content: "─"; font-size: 7px; }
.tl-max::before { content: "□"; font-size: 7.5px; }
.tl:hover::before { opacity: 1; }
.tl-close { background: #ff5f57; }
.tl-min { background: #febc2e; }
.tl-max { background: #28c840; }
.rb-url {
  flex: 1; text-align: center;
  font-size: 11.5px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 12px; margin: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rb-title { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) { .rb-title { display: none; } }

/* 초록불: 최대화 토글 */
[data-retro="true"][data-retro-max="true"] .app {
  margin: 0; border-radius: 0; box-shadow: none;
  border-width: 0 0 2px 0; min-height: 100vh; min-height: 100dvh;
}
/* 노란불: 창 접기 토글 */
[data-retro-min="true"] .app > *:not(.retro-bar):not(.mini-widget) { display: none !important; }
[data-retro-min="true"] .app { min-height: 0; }

/* 접기 상태: iOS풍 위젯 보드 */
.mini-widget { display: none; }
[data-retro-min="true"] .mini-widget {
  display: block; width: 100%;
  padding: 16px 18px 22px;
}
.wb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; max-width: 720px; }
.wb-head small { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; color: var(--muted); }
.widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; }
.wtile {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: 14px;
  aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .15s;
}
.wtile:hover { transform: translateY(-2px); }
.wtile small { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.wtile b { font-size: 21px; font-weight: 800; line-height: 1.1; color: var(--text); }
.wtile b.wt-mono { font-size: 16px; font-variant-numeric: tabular-nums; }
.wtile span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-empty { margin: auto 0; }
.wtile.w2 { grid-column: span 2; aspect-ratio: 2.08 / 1; }
.wt-profile { background-size: cover; background-position: center; background-color: var(--accent-soft); }
.wt-profile .wt-overlay {
  margin-top: auto; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.wt-profile .wt-overlay b { display: block; color: #fff; font-size: 17px; }
.wt-profile .wt-overlay small { color: rgba(255, 255, 255, .85); }
/* 편집 모드: iOS 지글 + 제거 배지 */
.wtile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.widget-grid.editing .wtile { animation: wjig .28s ease-in-out infinite alternate; touch-action: none; }
.widget-grid.editing .wtile:nth-child(even) { animation-delay: -.14s; }
@keyframes wjig { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
/* 드래그 중인 타일 + 놓일 자리 표시 */
.wtile.wt-dragging {
  animation: none !important; transition: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  opacity: .97; cursor: grabbing;
}
.wt-ph {
  border: 1.6px dashed var(--line-strong); border-radius: 22px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.wb-hint { font-size: 11px; color: var(--muted); margin-top: 10px; max-width: 720px; }
.wt-x {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--line-strong); color: var(--bg);
  font-size: 9px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.wb-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; max-width: 720px; }
@media (max-width: 640px) {
  .widget-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .widget-grid.editing .wtile { animation: none; } }


/* ── 미니홈피 창 스타일: 메신저 ── */
.rb-buddy { display: none; }
.rb-x { display: none; background: none; border: none; color: var(--muted); padding: 4px 6px; flex-shrink: 0; }
.rb-x:hover { color: var(--text); }
[data-retro-skin="msgr"] .retro-bar .tl { display: none; }
[data-retro="true"][data-retro-skin="msgr"] .rb-x { display: inline-flex; }
[data-retro="true"][data-retro-skin="msgr"] .retro-bar {
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}
[data-retro="true"][data-retro-skin="msgr"] .rb-url,
[data-retro="true"][data-retro-skin="msgr"] .rb-title { display: none; }
[data-retro="true"][data-retro-skin="msgr"] .rb-buddy {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0; margin: 0 8px 0 0;
}
.msgr-ava {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.msgr-info { min-width: 0; }
.msgr-name { display: block; font-size: 12px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-status { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.dot-on { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; flex-shrink: 0; }

/* ── 미니홈피 창 스타일: 폰 (상태바) ── */
.rb-phone { display: none; }
[data-retro-skin="phone"] .retro-bar .tl,
[data-retro-skin="phone"] .rb-url,
[data-retro-skin="phone"] .rb-title { display: none; }
[data-retro="true"][data-retro-skin="phone"] .rb-x { display: inline-flex; }
[data-retro="true"][data-retro-skin="phone"] .app { border-radius: 26px; }
[data-retro="true"][data-retro-skin="phone"] .retro-bar {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 8px 16px;
}
[data-retro="true"][data-retro-skin="phone"] .rb-phone {
  display: flex; align-items: center; justify-content: space-between;
  flex: 1; min-width: 0; gap: 10px;
}
.ph-time { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 아일랜드: 양옆 아이콘 너비와 무관하게 바 전체의 정중앙 (반응형 폭) */
[data-retro="true"][data-retro-skin="phone"] .ph-island {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(110px, 26vw); height: 16px; border-radius: 16px;
  background: var(--line-strong);
}
.ph-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ph-status svg.li { width: 14px; height: 14px; }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.ph-sig i { width: 2.5px; border-radius: 1px; background: currentColor; }
.ph-sig i:nth-child(1) { height: 4px; }
.ph-sig i:nth-child(2) { height: 6px; }
.ph-sig i:nth-child(3) { height: 8.5px; }
.ph-sig i:nth-child(4) { height: 11px; }
.ph-batt {
  width: 21px; height: 11px; border: 1.2px solid currentColor; border-radius: 3px;
  display: inline-flex; align-items: center; padding: 1.2px; position: relative;
}
.ph-batt::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 5px; border-radius: 0 1.5px 1.5px 0; background: currentColor; }
.ph-batt i { display: block; width: 72%; height: 100%; border-radius: 1px; background: currentColor; }

/* ── 미니홈피 창 스타일: 메모장 ── */
.rb-note { display: none; }
[data-retro-skin="note"] .retro-bar .tl,
[data-retro-skin="note"] .rb-url,
[data-retro-skin="note"] .rb-title { display: none; }
[data-retro="true"][data-retro-skin="note"] .rb-x { display: inline-flex; }
[data-retro="true"][data-retro-skin="note"] .app { border-radius: 6px; }
[data-retro="true"][data-retro-skin="note"] .retro-bar {
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  padding: 7px 12px;
}
[data-retro="true"][data-retro-skin="note"] .rb-note {
  display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 0;
}
.nt-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-menu { font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (max-width: 520px) { .nt-menu { display: none; } }

/* ── 미니홈피 창 스타일: 레트로 PC ── */
.rb-pc { display: none; }
[data-retro-skin="retropc"] .retro-bar .tl,
[data-retro-skin="retropc"] .rb-url,
[data-retro-skin="retropc"] .rb-title { display: none; }
[data-retro="true"][data-retro-skin="retropc"] .app { border-radius: 6px; }
[data-retro="true"][data-retro-skin="retropc"] .retro-bar {
  background: var(--accent); color: var(--on-accent);
  border-bottom: 2px solid var(--line-strong);
  padding: 7px 10px;
}
[data-retro="true"][data-retro-skin="retropc"] .rb-pc {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.pc-title { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-btns { margin-left: auto; display: flex; gap: 4px; }
.pc-btns button {
  width: 19px; height: 17px; border-radius: 3px;
  background: color-mix(in srgb, var(--on-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-accent) 45%, transparent);
  color: var(--on-accent); font-size: 9px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.pc-btns button:hover { background: color-mix(in srgb, var(--on-accent) 32%, transparent); }

/* 모바일: 미니홈피 타이틀바(sticky) 아래로 헤더 오프셋 */
[data-retro="true"] .mobile-head { top: 48px; }

.side-foot .mini-toggle + .mini-toggle { margin-top: 6px; }

/* ───────── 미니홈피 데스크탑: 창 내부 스크롤 셸 ─────────
   레트로 섹션의 sticky/wrap 기본값보다 뒤에 두어 확실히 덮음 */
@media (min-width: 980px) {
  [data-retro="true"] .app {
    flex-wrap: nowrap;
    padding-top: 48px;
    margin: 14px;
    height: calc(100vh - 30px); /* 위 14 + 아래 16 — +버튼(바닥 28px)이 창 안에 들어오는 높이 */
    min-height: 0; /* 기본 min-height(100vh-28)가 height를 이겨 여백이 무시되던 버그 */
  }
  [data-retro="true"] .retro-bar { position: absolute; top: 0; left: 0; right: 0; }
  [data-retro="true"][data-retro-max="true"] .app { height: 100vh; }
  [data-retro="true"][data-retro-min="true"] .app { height: auto; display: block; }
}

/* 직접 선택 컬러 칩 버튼 + 나만의 컬러 피커 */
.color-pick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.color-pick-btn i {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 1px solid rgba(0, 0, 0, .12);
}
/* 2D 색상판 */
.cp-sv {
  position: relative; height: 180px; border-radius: 14px;
  border: 1px solid var(--line); cursor: crosshair;
  touch-action: none; margin-bottom: 16px;
}
.cp-dot {
  position: absolute; width: 18px; height: 18px;
  border: 2.5px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%); pointer-events: none;
}
.cp-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.cp-chip { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cp-now { min-width: 0; }
.cp-now small { display: block; font-size: 10.5px; color: var(--muted); }
.cp-now b { font-size: 13px; font-variant-numeric: tabular-nums; }
input[type="range"].cp {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; border-radius: 8px;
  border: 1px solid var(--line); outline: none;
}
#cpH { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
input[type="range"].cp::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer;
}
input[type="range"].cp::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(0, 0, 0, .25); cursor: pointer;
}
#cpHex {
  flex: 1; text-align: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); outline: none; font-weight: 700;
}

/* 배경 패턴 칩 미리보기 견본 */
.bgp {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 4px; border: 1px solid var(--line);
  margin-right: 5px; vertical-align: -2.5px;
  background-color: var(--bg-soft);
}
.tab.active .bgp { border-color: color-mix(in srgb, var(--on-accent) 40%, transparent); }
.bgp-dot { background-image: radial-gradient(var(--accent-soft) 1.2px, transparent 1.5px); background-size: 5px 5px; }
.bgp-star {
  background-color: var(--bg-soft);
  background-image: none;
  position: relative;
}
.bgp-star::after {
  content: ""; position: absolute; inset: 0;
  background-color: var(--accent-soft);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l2.6 5.3 5.9.85-4.25 4.14 1 5.86L12 16.4l-5.25 2.75 1-5.86L3.5 9.15l5.9-.85Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l2.6 5.3 5.9.85-4.25 4.14 1 5.86L12 16.4l-5.25 2.75 1-5.86L3.5 9.15l5.9-.85Z'/></svg>");
  -webkit-mask-size: 10px 10px; mask-size: 10px 10px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.bgp-heart { background-color: var(--bg-soft); background-image: none; position: relative; }
.bgp-heart::after {
  content: ""; position: absolute; inset: 0;
  background-color: var(--accent-soft);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54Z'/></svg>");
  -webkit-mask-size: 9px 9px; mask-size: 9px 9px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* 새 패턴 칩 미리보기 (단일 모양 가운데) */
.bgp-sparkle, .bgp-flower, .bgp-cloud, .bgp-wave, .bgp-diamond, .bgp-clover, .bgp-ribbon, .bgp-cherry, .bgp-apple {
  background-color: var(--bg-soft); background-image: none; position: relative;
}
.bgp-sparkle::after, .bgp-flower::after, .bgp-cloud::after, .bgp-wave::after, .bgp-diamond::after, .bgp-clover::after, .bgp-ribbon::after, .bgp-cherry::after, .bgp-apple::after {
  content: ""; position: absolute; inset: 0; background-color: var(--accent-soft);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 10px 10px; mask-size: 10px 10px;
}
.bgp-sparkle::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l1.9 5.2 5.2 1.9-5.2 1.9L12 17.2l-1.9-5.2L4.9 10l5.2-1.9Z'/></svg>"); }
.bgp-flower::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='6.5' r='3.3'/><circle cx='17.6' cy='10.2' r='3.3'/><circle cx='15.4' cy='16.8' r='3.3'/><circle cx='8.6' cy='16.8' r='3.3'/><circle cx='6.4' cy='10.2' r='3.3'/><circle cx='12' cy='12' r='3.1'/></svg>"); }
.bgp-cloud::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 17.5a4 4 0 0 1 .4-8A5.6 5.6 0 0 1 17.2 8.6 3.9 3.9 0 0 1 17.6 17.5Z'/></svg>"); }
.bgp-diamond::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5 21.5 12 12 21.5 2.5 12Z'/></svg>"); }
.bgp-clover::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7' r='4'/><circle cx='12' cy='17' r='4'/><circle cx='7' cy='12' r='4'/><circle cx='17' cy='12' r='4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7' r='4'/><circle cx='12' cy='17' r='4'/><circle cx='7' cy='12' r='4'/><circle cx='17' cy='12' r='4'/></svg>"); }
.bgp-ribbon::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12 C 6 5.5 0.5 6.5 1.8 12 C 0.5 17.5 6 18.5 12 12 Z'/><path d='M12 12 C 18 5.5 23.5 6.5 22.2 12 C 23.5 17.5 18 18.5 12 12 Z'/><circle cx='12' cy='12' r='2.6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12 C 6 5.5 0.5 6.5 1.8 12 C 0.5 17.5 6 18.5 12 12 Z'/><path d='M12 12 C 18 5.5 23.5 6.5 22.2 12 C 23.5 17.5 18 18.5 12 12 Z'/><circle cx='12' cy='12' r='2.6'/></svg>"); }
.bgp-cherry::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='17' r='4'/><circle cx='16' cy='15' r='4'/><path d='M11 5 Q8 11 8 13 M11 5 Q15 9.5 16 11' fill='none' stroke='black' stroke-width='1.6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='17' r='4'/><circle cx='16' cy='15' r='4'/><path d='M11 5 Q8 11 8 13 M11 5 Q15 9.5 16 11' fill='none' stroke='black' stroke-width='1.6'/></svg>"); }
.bgp-apple::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7.6 C 10.9 5.7 8.4 5 6.8 6.4 C 4.9 8 5 11.6 6.6 14.8 C 7.6 16.8 9.3 18.5 11 18.8 C 11.6 18.9 12.4 18.9 13 18.8 C 14.7 18.5 16.4 16.8 17.4 14.8 C 19 11.6 19.1 8 17.2 6.4 C 15.6 5 13.1 5.7 12 7.6 Z'/><path d='M12 7.2 Q 12.2 4.2 13.8 3.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M13 4 q2.8 -1.6 4.3 0.3 q-2.6 1.8 -4.3 -0.3 Z'/></svg>"); }
.bgp-wave::after { -webkit-mask-size: 12px 6px; mask-size: 12px 6px; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='22' viewBox='0 0 48 22'><path d='M0 15 q6 -10 12 0 t12 0 t12 0 t12 0' fill='none' stroke='black' stroke-width='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='22' viewBox='0 0 48 22'><path d='M0 15 q6 -10 12 0 t12 0 t12 0 t12 0' fill='none' stroke='black' stroke-width='3'/></svg>"); }
.bgp-stripe { background-image: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--accent-soft) 50%, transparent) 3px 5.5px); }
.bgp-zigzag { background-image: repeating-linear-gradient(-45deg, transparent 0 2.5px, var(--accent-soft) 2.5px 5px); background-size: 5px 5px; }
.bgp-grid {
  background-image: linear-gradient(var(--accent-soft) 1px, transparent 1px), linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
  background-size: 5px 5px;
}
.bgp-check {
  background-image: repeating-linear-gradient(0deg, var(--accent-soft) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, var(--accent-soft) 0 2px, transparent 2px 4px);
}

/* ───────── 로고: 모드 장식·효과 (위치 불변) ─────────
   모드별 ::after 장식은 절대배치라 로고 자리가 절대 안 밀림 */
.logo-word { position: relative; }
.logo-word::after { position: absolute; left: calc(100% + 4px); bottom: -1px; }

/* 모드별 로고 모션 (전부 transform/filter — 합성 가능) */
[data-mode="y2k"] .logo-svg { animation: logoBeat 1.9s ease-in-out infinite; }
@keyframes logoBeat {
  0%, 50%, 100% { transform: scale(1); }
  12% { transform: scale(1.16); }
  24% { transform: scale(1); }
  36% { transform: scale(1.1); }
}
[data-mode="ballet"] .logo-svg { animation: logoSway 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes logoSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
[data-mode="dream"] .logo-svg { animation: logoFloat 3.2s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: .7; } }
[data-mode="y3k"] .logo-svg { animation: logoSpinY 5.5s ease-in-out infinite; }
@keyframes logoSpinY { 0%, 55% { transform: rotateY(0); } 85%, 100% { transform: rotateY(360deg); } }
[data-mode="glow"] .logo-svg { animation: logoGlow 2.2s ease-in-out infinite; }
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 70%, transparent)); }
  50% { filter: drop-shadow(0 0 10px var(--accent)); }
}

.al-dd { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--accent-deep); background: var(--accent-softer); border-radius: 10px; padding: 1px 7px; margin-left: 5px; }
.al-add { border-bottom: none !important; padding-top: 10px; }
.anniv-list .dl-del { background: none; border: none; color: var(--muted); padding: 2px 4px; }

/* 홈 커버 위치 조정 버튼 + 아이콘 전용 칩 */
.pc-cover { position: relative; overflow: hidden; }
.pc-cover .cz {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: center;
  transform-origin: center;
}
.hero-bg { transform-origin: center; }
.zoom-btns {
  position: absolute; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}
.pc-cover .zoom-btns, .hero-wrap .zoom-btns { top: 12px; left: 12px; }
.zoom-btns button {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.zoom-btns button:active { background: rgba(0, 0, 0, .65); }
.cover-pos-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .45); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.pc-cover.pos-on { touch-action: none; cursor: grab; }
.pc-cover.pos-on:active { cursor: grabbing; }
.pc-cover.pos-on .cover-pos-btn { background: var(--accent); color: var(--on-accent); }
.chip-btn.icon-only {
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #fff; border: none;
  backdrop-filter: blur(3px);
}

/* 아카이브 검색 + 다중 사진 */
.arch-search { margin-bottom: 12px; }
.arch-search input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft); outline: none; font-size: 13px;
}
.arch-search input:focus { border-color: var(--accent); }
.dc-imgwrap { position: relative; }
.dc-more {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; font-weight: 800; border-radius: 12px; padding: 2px 9px;
  backdrop-filter: blur(2px);
}
.photos-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pp-thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-x {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 9px;
}
.pp-add {
  width: 76px; height: 76px; border-radius: 10px;
  border: 1.5px dashed var(--line); background: var(--bg-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.pp-add small { font-size: 9.5px; }
/* 바인더 앨범 칩 */
#albumRow { margin-bottom: 12px; }
#albumRow:empty { display: none; }

/* ───────── 가계부: 예산 · 올해 통계 · 결산 ───────── */
.budget-row { margin: 4px 0 14px; }
.budget-track { height: 8px; border-radius: 8px; background: var(--bg-soft); overflow: hidden; margin-bottom: 7px; }
.budget-fill { display: block; height: 100%; border-radius: 8px; background: var(--accent); transition: width .3s; }
.budget-fill.over { background: #ff5c5c; }
.budget-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.budget-over { color: #ff5c5c; font-weight: 800; }
.budget-hint { font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.year-stats .ys-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.year-stats .ys-row:last-child { border-bottom: none; }
.year-stats .ys-row small { color: var(--muted); font-weight: 400; }
.yr-card {
  background: var(--accent); color: var(--on-accent);
  border-radius: 16px; padding: 20px; margin-bottom: 4px;
}
.yr-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; opacity: .7; margin-bottom: 8px; }
.yr-name { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.yr-name small { font-size: 12px; font-weight: 600; opacity: .75; margin-left: 6px; }
.yr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
.yr-grid small { display: block; font-size: 10.5px; opacity: .7; margin-bottom: 2px; }
.yr-grid b { font-size: 15.5px; font-weight: 800; }

/* ───────── 화면 꾸미기 팝업 ───────── */
.fp-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 520px) { .fp-grid { grid-template-columns: repeat(2, 1fr); } }
.fp-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 7px; cursor: pointer; transition: border-color .15s, transform .12s;
}
.fp-card:hover { transform: translateY(-2px); }
.fp-card.active { border-color: var(--accent); }
.fp-thumb {
  display: block; height: 46px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 5px 7px; overflow: hidden;
}
.fpt-bar {
  display: flex; align-items: center; gap: 3px;
  border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 2px;
}
.fpt-bar .d { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.fpt-bar .d.r { background: #ff5f57; }
.fpt-bar .d.y { background: #febc2e; }
.fpt-bar .d.g { background: #28c840; }
.fpt-url { flex: 1; height: 7px; border-radius: 5px; background: var(--card); border: 1px solid var(--line); margin-left: 3px; }
.fpt-ava {
  width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0;
  background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7px; margin-right: 2px;
}
.fpt-line { display: block; height: 6px; border-radius: 4px; background: var(--accent-soft); margin-top: 6px; }
.fpt-line.w60 { width: 62%; }
.fpt-line.w40 { width: 40%; }
.fp-name { display: block; font-size: 10.5px; font-weight: 700; margin-top: 5px; text-align: center; color: var(--text); }
.fp-thumb { position: relative; }
.fpt-bar.pc { background: var(--accent); border-bottom: none; border-radius: 3px; padding: 3px 4px; }
.fpt-bar.pc .sq { width: 6px; height: 6px; border-radius: 1px; background: color-mix(in srgb, var(--on-accent) 40%, transparent); margin-left: 2px; }
.fpt-bar.pc .sq:first-of-type { margin-left: auto; }
.fpt-bar.ph b { font-size: 7.5px; font-weight: 800; }
.fpt-bar.ph .bat { width: 11px; height: 6px; border: 1px solid var(--line-strong); border-radius: 2px; margin-left: auto; }
.fpt-bar.nt .x { margin-left: auto; font-size: 7px; color: var(--muted); font-style: normal; }

/* ───────── 화면 정렬 (넓은 PC 화면 전용) ─────────
   980~1359px(태블릿·작은 노트북)에선 여백이 없어 정렬이 어색하므로 미적용 */
@media (min-width: 1360px) {
  /* 가운데: 사이드바를 중앙 오프셋으로, 스크롤바는 화면 맨 오른쪽 유지 */
  /* 사이드바+콘텐츠를 한 덩어리로 중앙에 — 둘 사이 간격은 왼쪽 정렬과 동일 */
  [data-align="center"]:not([data-retro="true"]) .sidebar {
    margin-left: max(0px, calc((100vw - 1340px) / 2));
    border-left: 1px solid var(--line);
  }
  /* 미니홈피 창 정렬 */
  [data-retro="true"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .app {
    max-width: 1280px; margin: 24px; height: calc(100vh - 44px); /* 위 24 + 아래 20 */
  }
  [data-retro="true"][data-retro-min="true"] .app { max-width: 1280px; margin: 24px; }
  [data-retro="true"][data-align="center"]:not([data-retro-max="true"]) .app { margin: 24px auto; }
  [data-retro="true"][data-align="center"] .fab-wrap { right: max(32px, calc((100vw - 1280px) / 2 + 32px)); }
  [data-retro="true"][data-retro-max="true"] .app { max-width: none; height: 100vh; margin: 0; }
  [data-retro="true"][data-retro-max="true"] .fab-wrap { right: 32px; }
  /* 접기(노란불): 정렬용 min-height에 덮이지 않게 마지막에 재선언 */
  [data-retro="true"][data-retro-min="true"] .app { min-height: 0; }
}

/* ───────── SVG 아이콘 ───────── */
.ico svg { width: 19px; height: 19px; display: block; }
.bn-btn .ico svg { width: 21px; height: 21px; }
.fab-menu button svg, .mini-toggle svg {
  width: 15px; height: 15px; display: inline-block; vertical-align: -2.5px; margin-right: 3px;
}
.mh-dark svg { width: 19px; height: 19px; display: block; }
.mr-label { display: flex; align-items: center; gap: 9px; }
.mr-label svg { width: 17px; height: 17px; }

/* ═══════════ 감성 모드 4종 ═══════════ */
/* Y2K: 2000년대 싸이버 감성 */
[data-mode="y2k"] {
  --bg: #FFE3F3; --bg-soft: #FFD4EC; --card: #FFFFFF;
  --text: #221133; --muted: #A8639B; --line: #221133; --line-strong: #221133;
  --shadow: 4px 4px 0 rgba(34, 17, 51, .85);
  --radius: 6px;
  --pat: rgba(255, 255, 255, .92);
}
[data-mode="y2k"] .card, [data-mode="y2k"] .profile-card-main,
[data-mode="y2k"] .modal, [data-mode="y2k"] .member-card, [data-mode="y2k"] .today-card {
  border: 2px solid #221133;
  box-shadow: 4px 4px 0 #221133;
}
[data-mode="y2k"] .btn-primary, [data-mode="y2k"] .fab {
  border: 2px solid #221133; box-shadow: 3px 3px 0 #221133;
}
[data-mode="y2k"] .logo-word::after { content: " ☆"; }
[data-mode="y2k"] .hero-name::after, [data-mode="y2k"] .prof-id h2::after { content: " ♡"; color: var(--accent-deep); }
[data-mode="y2k"] .bottom-nav { border-top: 2px solid #221133; }
[data-mode="y2k"] .sidebar { border-right: 2px solid #221133; }

/* ── 밤의 Y2K: 다크 모드 + Y2K = 어두운 보라 + 네온 핑크 ── */
[data-dark="true"][data-mode="y2k"] {
  --bg: #1A1026; --bg-soft: #241636; --card: #2B1B40;
  --text: #FFE3F3; --muted: #C39BD2; --line: #FF7AC8; --line-strong: #FF7AC8;
  --shadow: 4px 4px 0 rgba(255, 122, 200, .3);
  --pat: rgba(255, 227, 243, .26);
}
[data-dark="true"][data-mode="y2k"] .card,
[data-dark="true"][data-mode="y2k"] .profile-card-main,
[data-dark="true"][data-mode="y2k"] .modal,
[data-dark="true"][data-mode="y2k"] .member-card,
[data-dark="true"][data-mode="y2k"] .today-card {
  border-color: #FF7AC8;
  box-shadow: 4px 4px 0 rgba(255, 122, 200, .4);
}
[data-dark="true"][data-mode="y2k"] .btn-primary,
[data-dark="true"][data-mode="y2k"] .fab {
  border-color: #FF7AC8; box-shadow: 3px 3px 0 rgba(255, 122, 200, .4);
}
[data-dark="true"][data-mode="y2k"] .bottom-nav { border-top-color: #FF7AC8; }
[data-dark="true"][data-mode="y2k"] .sidebar { border-right-color: #FF7AC8; }
[data-dark="true"][data-mode="y2k"] .hero-name::after,
[data-dark="true"][data-mode="y2k"] .prof-id h2::after { color: #FF7AC8; }

/* 발레코어: 아이보리 + 블러시 새틴 + 리본 ୨୧ */
[data-mode="ballet"] {
  --bg: #FBF5F2; --bg-soft: #F7EAE9; --card: #FFFEFD;
  --text: #4D3A40; --muted: #B391A0; --line: #EEDCE0; --line-strong: #C99FAF;
  --shadow: 0 6px 18px rgba(187, 140, 158, .16);
  --radius: 18px;
  --pat: rgba(201, 159, 175, .4);
}
[data-mode="ballet"] .hero-name,
[data-mode="ballet"] .page-head h2,
[data-mode="ballet"] .ob-title,
[data-mode="ballet"] .ob-h2,
[data-mode="ballet"] .cal-title {
  font-family: var(--font-serif);
  font-weight: 700; letter-spacing: .01em;
}
[data-mode="ballet"] .hero-name::after,
[data-mode="ballet"] .prof-id h2::after,
[data-mode="ballet"] .page-head h2::after {
  content: " ୨୧"; font-size: .68em; color: var(--line-strong);
}
[data-mode="ballet"] .logo-word::after { content: " ୨୧"; }
[data-mode="ballet"] .btn { border-radius: 999px; }
/* 새틴 버튼: 위가 살짝 밝은 광택 */
[data-mode="ballet"] .btn-primary, [data-mode="ballet"] .fab {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
}
[data-mode="ballet"] .card-title::before { border-radius: 50%; }
/* 레이스 액자: 안쪽 실선 + 바깥 스티치(점선) */
[data-mode="ballet"] .card, [data-mode="ballet"] .profile-card-main, [data-mode="ballet"] .member-card {
  border: 1px solid var(--line);
  outline: 1px dashed var(--line-strong);
  outline-offset: 3px;
}
/* 무대 조명: 상단에서 은은히 떨어지는 블러시 글로우 */
[data-mode="ballet"] .sky {
  display: block;
  background-image: radial-gradient(900px 420px at 50% -80px, rgba(222, 168, 184, .3), transparent 70%);
}
[data-mode="ballet"] .modal { outline: 1px dashed var(--line-strong); outline-offset: -7px; }
[data-mode="ballet"] .modal-head h3::after { content: " ୨୧"; font-size: .72em; color: var(--line-strong); }
[data-mode="ballet"] .btn-primary:hover, [data-mode="ballet"] .fab:hover {
  box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 42%, transparent);
}
[data-mode="ballet"] .switch.on { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
[data-mode="ballet"] .cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: 14px; }
[data-mode="ballet"] .tab.active { border-radius: 999px; box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
/* 발레 번 헤어처럼 — 아바타 리본 링 */
[data-mode="ballet"] .pc-avatar, [data-mode="ballet"] .side-avatar,
[data-mode="ballet"] .prof-avatar, [data-mode="ballet"] .bl-avatar {
  border: 2.5px solid var(--card);
  outline: 1.5px solid var(--line-strong);
  box-shadow: 0 5px 16px rgba(201, 159, 175, .45);
}
/* 새틴 멤버십 카드 */
[data-mode="ballet"] .member-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 60%, var(--accent-deep));
}
[data-mode="ballet"] .tab.active { box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-mode="ballet"] .section-head h3::before { content: "୨୧ "; color: var(--line-strong); font-size: .9em; }

/* 밤의 발레코어: 어두운 로즈 브라운 + 새틴 핑크 */
[data-dark="true"][data-mode="ballet"] {
  --bg: #211A1E; --bg-soft: #2A2127; --card: #2E242A;
  --text: #F4E8EC; --muted: #B391A0; --line: #41323A; --line-strong: #D8A8BC;
  --shadow: 0 6px 18px rgba(0, 0, 0, .4);
  --pat: rgba(216, 168, 188, .22);
}
/* 밤 무대: 조명은 은은하게, 글로우는 어둡게 */
[data-dark="true"][data-mode="ballet"] .sky {
  background-image: radial-gradient(900px 420px at 50% -80px, rgba(216, 168, 188, .12), transparent 70%);
}
[data-dark="true"][data-mode="ballet"] .pc-avatar, [data-dark="true"][data-mode="ballet"] .side-avatar,
[data-dark="true"][data-mode="ballet"] .prof-avatar, [data-dark="true"][data-mode="ballet"] .bl-avatar {
  box-shadow: 0 5px 16px rgba(0, 0, 0, .5);
}
/* 밤의 새틴 멤버십: 흰빛 대신 깊은 톤으로 */
[data-dark="true"][data-mode="ballet"] .member-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 68%, #2A2127), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000));
}
[data-dark="true"][data-mode="ballet"] .btn-primary, [data-dark="true"][data-mode="ballet"] .fab {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
}

/* 스타더스트: 별똥별이 떨어지는 밤하늘 */
[data-mode="stardust"] {
  --bg: #0E1126; --bg-soft: #161A38; --card: #1B2144;
  --text: #E8EAF8; --muted: #8B91B0; --line: #2A3055; --line-strong: #A8B2E8;
  --shadow: 0 5px 18px rgba(0, 0, 0, .45);
  --radius: 16px;
  --pat: rgba(168, 178, 232, .2);
}
/* 장식 레이어: 콘텐츠와 분리된 고정 합성층 (스크롤 리페인트 없음) */
.sky {
  display: none; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; transform: translateZ(0);
  contain: strict;
}
[data-mode="stardust"] .sky {
  display: block;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(232, 234, 248, .9) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 9%, rgba(232, 234, 248, .95) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 55% 30%, rgba(232, 234, 248, .7) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 90% 45%, rgba(232, 234, 248, .85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 60%, rgba(232, 234, 248, .65) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 68% 78%, rgba(232, 234, 248, .8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 86%, rgba(232, 234, 248, .6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 42% 8%, rgba(232, 234, 248, .75) 50%, transparent 51%),
    radial-gradient(800px 420px at 72% -80px, rgba(122, 132, 200, .2), transparent 70%);
}
/* 콘텐츠는 하늘 위 레이어로 */
:is([data-mode="stardust"], [data-mode="ballet"], [data-mode="dream"], [data-mode="jelly"]) .app,
:is([data-mode="stardust"], [data-mode="ballet"], [data-mode="dream"], [data-mode="jelly"]) .onboarding {
  position: relative; z-index: 1;
}
/* 별똥별 — 하늘 레이어 안에서만 (각자 합성층) */
[data-mode="stardust"] .sky i {
  position: absolute; width: 110px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 234, 248, .95));
  top: -4%; left: 72%; opacity: 0;
  transform: translate3d(0, 0, 0) rotate(141deg);
  animation: starFall 7.5s linear infinite;
  will-change: transform, opacity;
}
[data-mode="stardust"] .sky .s2 {
  top: -8%; left: 30%; width: 80px;
  animation-delay: 4.2s; animation-duration: 9.5s;
}
@keyframes starFall {
  0% { transform: translate3d(0, 0, 0) rotate(141deg); opacity: 0; }
  2% { opacity: .9; }
  13% { transform: translate3d(-300px, 240px, 0) rotate(141deg); opacity: 0; }
  100% { transform: translate3d(-300px, 240px, 0) rotate(141deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sky i, .logo-svg, .member-card::after { animation: none !important; }
}
[data-mode="stardust"] .hero-name::after,
[data-mode="stardust"] .prof-id h2::after { content: " ✦"; font-size: .7em; color: var(--line-strong); }
[data-mode="stardust"] .section-head h3::before { content: "✧ "; color: var(--line-strong); }
[data-mode="stardust"] .logo-svg { animation: twinkleStar 2.6s ease-in-out infinite alternate; }
@keyframes twinkleStar { from { opacity: 1; transform: scale(1); } to { opacity: .55; transform: scale(.88); } }
[data-mode="stardust"] .member-card {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(232, 234, 248, .9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 70% 60%, rgba(232, 234, 248, .8) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 85% 20%, rgba(232, 234, 248, .9) 50%, transparent 51%),
    linear-gradient(135deg, #232A55, #343D77 55%, #1A1F44);
  color: #E8EAF8; border: 1px solid #A8B2E8;
}
[data-mode="stardust"] .cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: 12px; }

/* 다크: 적막한 깊은 우주 — 훨씬 어둡고, 별도 드물고 흐리게 */
[data-dark="true"][data-mode="stardust"] {
  --bg: #07080F; --bg-soft: #0C0E1A; --card: #11142A;
  --text: #D8DBEE; --muted: #6F7592;
  --line: #1E2240; --line-strong: #8A93C8;
  --pat: rgba(138, 147, 200, .14);
}
[data-dark="true"][data-mode="stardust"] .sky {
  background-image:
    radial-gradient(1.5px 1.5px at 78% 9%, rgba(232, 234, 248, .5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 60%, rgba(232, 234, 248, .32) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(232, 234, 248, .4) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 60% 82%, rgba(232, 234, 248, .25) 50%, transparent 51%);
}
[data-dark="true"][data-mode="stardust"] .sky .s2 { display: none; } /* 별똥별 한 줄기만 */
[data-dark="true"][data-mode="stardust"] .sky .s1 {
  animation-duration: 13s;
  background: linear-gradient(90deg, transparent, rgba(232, 234, 248, .5));
}
[data-dark="true"][data-mode="stardust"] .member-card {
  background: linear-gradient(135deg, #141833, #1E2447 55%, #0E1126);
  border-color: #5A639A;
}

/* 드림: 오로라 + 유리 (글래스모피즘) */
[data-mode="dream"] {
  --bg: #F2EFFA; --bg-soft: rgba(255, 255, 255, .5); --card: rgba(255, 255, 255, .58);
  --text: #3A3550; --muted: #9089A8; --line: rgba(255, 255, 255, .75); --line-strong: #7A6FA8;
  --shadow: 0 8px 26px rgba(110, 95, 160, .16);
  --radius: 18px;
  --pat: rgba(122, 111, 168, .25);
}
[data-mode="dream"] .sky {
  display: block;
  background-image: linear-gradient(160deg, rgba(253, 219, 233, .55), rgba(214, 222, 255, .55) 35%, rgba(209, 245, 244, .55) 68%, rgba(240, 220, 250, .55));
}
[data-mode="dream"] .card, [data-mode="dream"] .modal {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
/* 리스트 아이템은 블러 대신 살짝 더 불투명한 유리로 (성능) */
[data-mode="dream"] .diary-card, [data-mode="dream"] .st-card,
[data-mode="dream"] .poca-slot, [data-mode="dream"] .link-list li {
  background-color: rgba(255, 255, 255, .82);
}
[data-dark="true"][data-mode="dream"] .diary-card, [data-dark="true"][data-mode="dream"] .st-card,
[data-dark="true"][data-mode="dream"] .poca-slot, [data-dark="true"][data-mode="dream"] .link-list li {
  background-color: rgba(38, 33, 66, .88);
}
[data-mode="dream"] .hero-name::after,
[data-mode="dream"] .prof-id h2::after { content: " ✧"; font-size: .7em; color: var(--line-strong); }
[data-mode="dream"] .member-card {
  background: linear-gradient(135deg, rgba(253, 219, 233, .85), rgba(214, 222, 255, .85) 50%, rgba(209, 245, 244, .85));
  color: #3A3550; border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
[data-mode="dream"] .cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: 14px; }

/* 밤의 드림: 트와일라잇 오로라 */
[data-dark="true"][data-mode="dream"] {
  --bg: #181527; --bg-soft: rgba(40, 35, 70, .55); --card: rgba(38, 33, 66, .55);
  --text: #ECEAF8; --muted: #9089A8; --line: rgba(255, 255, 255, .14); --line-strong: #A99EE0;
  --shadow: 0 8px 26px rgba(0, 0, 0, .45);
  --pat: rgba(169, 158, 224, .18);
}
[data-dark="true"][data-mode="dream"] .sky {
  background-image:
    radial-gradient(620px 320px at 82% -70px, rgba(169, 158, 224, .22), transparent 70%),
    linear-gradient(160deg, rgba(96, 56, 112, .6), rgba(46, 64, 132, .6) 38%, rgba(32, 96, 100, .55) 70%, rgba(84, 46, 118, .6));
}
/* 유리 카드 위 모서리에 달빛 한 줄 */
[data-dark="true"][data-mode="dream"] .card, [data-dark="true"][data-mode="dream"] .member-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow);
}
[data-dark="true"][data-mode="dream"] .member-card {
  background: linear-gradient(135deg, rgba(78, 48, 90, .8), rgba(40, 55, 110, .8) 50%, rgba(30, 80, 85, .8));
  color: #ECEAF8; border-color: rgba(255, 255, 255, .25);
}

/* 젤리: 투명 젤리 + 물방울 광택 */
[data-mode="jelly"] {
  --bg: #EAF6FB; --bg-soft: #DDF0F8; --card: #FFFFFF;
  --text: #1D3A4A; --muted: #7FA3B5; --line: #C9E4F0; --line-strong: #2E7FA8;
  --shadow: 0 6px 18px rgba(60, 140, 180, .16);
  --radius: 22px;
  --pat: rgba(46, 127, 168, .22);
}
[data-mode="jelly"] .btn { border-radius: 999px; }
[data-mode="jelly"] .btn-primary, [data-mode="jelly"] .fab, [data-mode="jelly"] .badge-accent {
  box-shadow:
    inset 0 4px 7px rgba(255, 255, 255, .55),
    inset 0 -4px 7px rgba(0, 0, 0, .14),
    0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-mode="jelly"] .btn:active, [data-mode="jelly"] .fab:active { transform: scale(.92); }
[data-mode="jelly"] .logo-svg { animation: jellyBounce 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes jellyBounce {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(.92) scaleX(1.06); }
  55% { transform: scaleY(1.05) scaleX(.97); }
  75% { transform: scaleY(.98) scaleX(1.02); }
}
[data-mode="jelly"] .member-card {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent));
  position: relative; overflow: hidden; border: none;
  border-radius: 24px;
  box-shadow:
    inset 0 6px 14px rgba(255, 255, 255, .35),
    inset 0 -10px 18px rgba(0, 0, 0, .16),
    0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* 유리 돔 하이라이트: 카드보다 크게 그려서 모서리가 안 보이게 */
[data-mode="jelly"] .member-card::after {
  content: ""; position: absolute; left: -18%; top: -45%; width: 140%; height: 85%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .32), transparent);
  pointer-events: none;
}
/* 카드·칩에도 젤리 윤기 */
[data-mode="jelly"] .card { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), var(--shadow); }
[data-mode="jelly"] .tab.active {
  box-shadow:
    inset 0 3px 5px rgba(255, 255, 255, .45),
    inset 0 -3px 5px rgba(0, 0, 0, .14);
}
[data-mode="jelly"] .switch.on .knob { box-shadow: inset 0 2px 3px rgba(255, 255, 255, .6); }
[data-mode="jelly"] .dc-type { box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5); }
[data-mode="jelly"] .btn-primary:hover, [data-mode="jelly"] .fab:hover { transform: scale(1.05); }
/* 물방울 추가 (하이라이트 링까지) */
[data-mode="jelly"] .sky {
  display: block;
  background-image:
    radial-gradient(140px 140px at 88% 12%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(36px 36px at 84% 9%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(90px 90px at 8% 75%, rgba(255, 255, 255, .4), transparent 70%),
    radial-gradient(26px 26px at 6% 72%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(60px 60px at 55% 95%, rgba(255, 255, 255, .3), transparent 70%);
}
[data-mode="jelly"] .cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--line-strong); border-radius: 16px; }

/* 밤의 젤리: 심해 */
[data-dark="true"][data-mode="jelly"] {
  --bg: #0E222D; --bg-soft: #143040; --card: #1A3A4D;
  --text: #E2F2F9; --muted: #7FA3B5; --line: #2A4D60; --line-strong: #6BC6EE;
  --shadow: 0 6px 18px rgba(0, 0, 0, .45);
  --pat: rgba(107, 198, 238, .18);
}
[data-dark="true"][data-mode="jelly"] .sky {
  background-image:
    radial-gradient(56px 56px at 88% 10%, rgba(107, 198, 238, .07), transparent 70%),
    radial-gradient(16px 16px at 85.5% 8%, rgba(107, 198, 238, .14), transparent 60%),
    radial-gradient(42px 42px at 7% 76%, rgba(107, 198, 238, .06), transparent 70%),
    radial-gradient(12px 12px at 5.5% 73.5%, rgba(107, 198, 238, .12), transparent 60%),
    radial-gradient(28px 28px at 55% 96%, rgba(107, 198, 238, .05), transparent 70%);
}

/* ───────── 창 배치: 바닥에 붙은 창 (dock) ───────── */
[data-retro="true"][data-retro-pos="dock"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .app {
  margin-bottom: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-width: 0;
  box-shadow: 8px 0 0 rgba(0, 0, 0, .13);
  min-height: calc(100vh - 14px);
  min-height: calc(100dvh - 14px);
}
@media (min-width: 980px) {
  [data-retro="true"][data-retro-pos="dock"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .app {
    height: calc(100vh - 14px);
  }
}
@media (min-width: 1360px) {
  [data-retro="true"][data-retro-pos="dock"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .app {
    height: calc(100vh - 24px);
  }
}
/* 모바일·태블릿: 하단 네비가 아래를 덮어 float↔dock 차이가 안 보이므로,
   dock은 화면에 꽉 차게(여백·테두리 없음) → float(14px 카드)와 또렷이 구분 */
@media (max-width: 979px) {
  [data-retro="true"][data-retro-pos="dock"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .app {
    margin: 0;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh; min-height: 100dvh;
  }
}

/* ───────── 떠 있는 창: 본문 스크롤바를 위아래 안쪽으로 짧게 (둥근 모서리에 안 닿게) ───────── */
@media (min-width: 980px) {
  [data-retro="true"][data-retro-pos="float"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .main {
    scrollbar-width: thin;
  }
  [data-retro="true"][data-retro-pos="float"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .main::-webkit-scrollbar {
    width: 8px;
  }
  [data-retro="true"][data-retro-pos="float"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .main::-webkit-scrollbar-track {
    margin: 18px 0; /* 위아래 18px 비워서 스크롤바를 짧게 */
    background: transparent;
  }
  [data-retro="true"][data-retro-pos="float"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .main::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 55%, transparent);
    border-radius: 8px;
  }
  [data-retro="true"][data-retro-pos="float"]:not([data-retro-max="true"]):not([data-retro-min="true"]) .main::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 78%, transparent);
  }
}