.messenger-page {
  position:absolute;inset:0;z-index:20;overflow:hidden;
  display:flex;flex-direction:column;color:var(--ds-text);background:var(--ds-bg);
  --messenger-card:rgba(174,174,174,.08);
  --messenger-divider:rgba(186,186,186,.12);
  font-size:14px;
}
.messenger-page[hidden],.messenger-page [hidden],.messenger-edge[hidden]{display:none}
.messenger-page[data-theme=realism]{--messenger-card:#f5f5f5;--messenger-divider:rgba(81,81,81,.08)}
.messenger-page::before{content:"";position:absolute;inset:0 0 auto;height:220px;background:radial-gradient(ellipse at 100% 0,var(--ds-glow),transparent 75%);pointer-events:none}
.mypage{z-index:21}
.messenger-header{position:relative;display:flex;align-items:center;justify-content:space-between;flex:none;padding:62px 20px 18px;gap:12px}
.messenger-header h2{font-size:19px;letter-spacing:-.025em;font-weight:700;margin:0}
.messenger-page button,.messenger-page input,.messenger-page select{font:inherit;color:inherit}
.messenger-page button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.messenger-page button:focus-visible,.messenger-page input:focus-visible,.messenger-page select:focus-visible,.messenger-page summary:focus-visible{outline:2px solid var(--ds-focus);outline-offset:3px}
.messenger-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--messenger-card)}
.messenger-page svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.messenger-profile{background:var(--ds-interactive-gradient);color:var(--ds-on-accent)}
[data-theme=subculture] .messenger-profile{color:#ffffff;box-shadow:0 3px 15px #5e5e5e30}
.messenger-header-spacer{width:44px}
.messenger-body{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 35px;scrollbar-width:none}
.messenger-intro{margin:0 0 20px;color:var(--ds-muted);font-size:13px}
.messenger-search{display:flex;align-items:center;gap:10px;background:var(--messenger-card);border-radius:12px;padding:0 14px;min-height:46px;margin-bottom:14px;color:var(--ds-muted)}
.messenger-search svg{width:18px;height:18px}
.messenger-search input{width:100%;min-width:0;border:0;outline:0;background:none;padding:12px 0;color:var(--ds-text)}
.messenger-search input::placeholder{color:var(--ds-muted)}
.messenger-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:12px;background:transparent;padding:14px 4px;min-height:86px;transition:background var(--ds-duration-fast)}
.messenger-row:hover{background:var(--messenger-card)}
.messenger-row img{width:54px;height:54px;object-fit:cover;object-position:50% 25%;border-radius:50%;flex:none;background:var(--ds-surface)}
.messenger-row-copy{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.messenger-row-copy strong{font-size:15px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.messenger-row-copy>span{font-size:12px;line-height:1.5;color:var(--ds-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.messenger-row-tail{display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:var(--ds-muted);font-size:10px;flex:none}
.messenger-row-tail svg{width:17px;height:17px;opacity:.6}
.messenger-empty{padding:36px 0;text-align:center;color:var(--ds-muted)}
.messenger-edge{position:absolute;right:0;top:64px;bottom:30px;width:18px;z-index:22;border:0;padding:0;background:none;touch-action:none;cursor:ew-resize;color:#ffffff}
.messenger-edge span{position:absolute;width:3px;height:38px;right:4px;top:23%;border-radius:4px;background:rgba(221,221,221,.65);box-shadow:0 1px 6px #00000044;transition:height var(--ds-duration-fast),background var(--ds-duration-fast)}
.messenger-edge:hover span,.messenger-edge:focus-visible span{height:52px;background:#ebebeb}
.messenger-edge:focus-visible{outline:2px solid #bebebe;outline-offset:-3px}
.mypage-body{padding-top:16px}
.my-profile{padding:20px;background:var(--messenger-card);border-radius:16px}
.my-profile-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.my-profile h3{font-size:24px;line-height:1.25;margin:0 0 7px;letter-spacing:-.035em;overflow-wrap:anywhere}
.my-profile-heading p{margin:0;color:var(--ds-muted);font-size:12px}
.my-avatar{width:60px;height:60px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--ds-interactive-gradient);color:var(--ds-on-accent)}
[data-theme=subculture] .my-avatar{color:#ffffff}
.my-avatar svg{width:28px;height:28px}
.my-count{color:var(--ds-muted);font-size:12px;margin:20px 0 16px}
.my-edit-button{background:var(--ds-bg);border:0;border-radius:8px;width:100%;min-height:40px}
.my-edit{margin-top:16px;display:grid;gap:10px}
.my-edit input{width:100%;padding:12px;border:0;border-radius:8px;background:var(--ds-bg)}
.my-edit>div{display:flex;gap:8px}
.my-edit button{flex:1;min-height:40px;border:0;border-radius:8px;background:var(--ds-accent);color:var(--ds-on-accent)}
.my-credits{margin:16px 0;padding:18px 20px;background:var(--messenger-card);border-radius:16px}
.my-credits>span{color:var(--ds-muted);font-size:12px}
.my-credits strong{display:block;font-size:28px;margin:7px 0}
.my-credits small{font-size:13px;font-weight:500}
.my-credits p{font-size:12px;color:var(--ds-muted);margin:0}
.my-conversations{display:flex;align-items:center;gap:12px;width:100%;padding:18px 16px;border:0;border-radius:14px;background:var(--ds-interactive-gradient);color:var(--ds-on-accent)!important;text-align:left}
[data-theme=subculture] .my-conversations{color:#ffffff!important;background:linear-gradient(115deg,#2e2e2e,#5e5e5e)}
.my-conversations span{flex:1;display:grid;gap:6px}
.my-conversations small{font-size:11px;opacity:.9}
.my-section-title{font-size:12px;color:var(--ds-muted);font-weight:500;margin:28px 0 10px}
.my-setting{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;min-height:58px;border-bottom:1px solid var(--messenger-divider)}
.my-setting small{display:block;font-size:11px;color:var(--ds-muted);margin-top:6px}
.my-setting input[role=switch]{appearance:none;width:40px;height:24px;flex:none;background:var(--ds-muted);border-radius:20px;position:relative;cursor:pointer;margin:0}
.my-setting input[role=switch]::after{content:"";width:18px;height:18px;position:absolute;top:3px;left:3px;background:var(--ds-bg);border-radius:50%;transition:transform var(--ds-duration-fast)}
.my-setting input:checked{background:var(--ds-accent)}
.my-setting input:checked::after{transform:translateX(16px)}
.my-setting select{max-width:150px;border:0;border-radius:8px;background:var(--ds-surface);padding:10px}
.my-help summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:48px;list-style:none}
.my-help summary::-webkit-details-marker{display:none}
.my-help p{line-height:1.8;font-size:12px;color:var(--ds-muted)}
.my-help[open] svg{rotate:90deg}
.my-feedback{min-height:20px;font-size:12px;color:var(--ds-muted)}
@media(prefers-reduced-motion:reduce){.messenger-page *,.messenger-edge *{transition:none!important}}
/* Keep the hardware cutout above every in-phone page. */
.screen > .island { z-index: 30; }
.my-adult { margin-top:16px; padding:0 20px; background:var(--messenger-card); border-radius:16px; }
.my-adult .my-setting { border:0; min-height:80px; }

.mypage { touch-action:pan-y; }

/* Full-height edge, with a pass-through gap around the version arrow. */
.messenger-edge {
  width:24px; top:0; bottom:0;
  clip-path:polygon(0 0,100% 0,100% calc(50% - 48px),0 calc(50% - 48px),0 calc(50% + 48px),100% calc(50% + 48px),100% 100%,0 100%);
}
.messenger-page { touch-action:pan-y; }
.messenger-row img { -webkit-user-drag:none; user-select:none; }

.messenger-page[data-theme="realism"] {
  --messenger-card:#eeeeee;
  --messenger-divider:rgba(0,0,0,.09);
}
.messenger-page[data-theme="realism"] .my-setting input[role="switch"] { background:#bcbcbc; }
.messenger-page[data-theme="realism"] .my-setting input[role="switch"]:checked { background:#d2d2d2; }

.messenger-page { user-select:none; -webkit-user-select:none; }
.messenger-page input { user-select:text; -webkit-user-select:text; }

/* ── 플랜 업그레이드 ─────────────────────────────────────────
   가장자리를 도는 빛은 conic 스팟을 1px 링으로 마스킹해 각도만 돌린다. */
@property --edge-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }

.my-upgrade {
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:space-between;
  width:100%; margin:0 0 20px; padding:15px 16px; border:0; border-radius:14px;
  background:var(--ds-accent); color:var(--ds-on-accent);
  font-size:14px; font-weight:650; text-align:left;
}
.my-upgrade-go { display:flex; color:currentColor; opacity:.65; }
.my-upgrade-go svg { width:18px; height:18px; }
.my-upgrade::before {
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--edge-angle),
    transparent 0 58%, rgba(255,255,255,.5) 74%, #ffffff 82%, rgba(255,255,255,.5) 90%, transparent 96%);
  -webkit-mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
          mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:upgrade-edge 3.6s linear infinite;
}
/* 링 바깥으로 옅게 번지는 빛 */
.my-upgrade::after {
  content:""; position:absolute; inset:-3px; z-index:-1; border-radius:inherit; pointer-events:none;
  background:var(--ds-accent); filter:blur(10px); opacity:.4;
}
@keyframes upgrade-edge { from { --edge-angle:0deg } to { --edge-angle:360deg } }
@supports not (background:conic-gradient(from 0deg,red,blue)) {
  .my-upgrade::before { background:none; box-shadow:0 0 0 1px var(--ds-accent) inset; animation:none; }
}
@media(prefers-reduced-motion:reduce) {
  .my-upgrade::before { animation:none; background:none; box-shadow:0 0 0 1px var(--ds-accent) inset; }
}

.plans { z-index:26; }
.plans-body { display:flex; flex-direction:column; gap:12px; }
.plans-intro { margin:0; font-size:12px; color:var(--ds-muted); }
.plan { padding:16px; border:1px solid var(--messenger-divider); border-radius:16px; background:var(--messenger-card); }
/* 가격은 왼쪽, 혜택은 오른쪽. 카드가 낮아져 세 상품이 한눈에 들어온다. */
.plan-head { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; }
.plan-meta { min-width:0; }
.plan h3 { margin:0; font-size:14px; font-weight:700; letter-spacing:.02em; }
.plan-price { margin:6px 0 0; display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
.plan-price strong { font-size:23px; font-weight:750; letter-spacing:-.03em; }
.plan-price small { font-size:11px; color:var(--ds-muted); }
.plan-year { margin:3px 0 0; font-size:11px; color:var(--ds-muted); white-space:nowrap; }
.plan-perks { margin:2px 0 0; padding:0 0 0 15px; font-size:12.5px; line-height:1.85; }
.plan-perks li::marker { color:var(--ds-muted); font-size:9px; }
.plan-select {
  width:100%; margin:14px 0 0; min-height:42px; border:0; border-radius:999px;
  background:var(--ds-accent); color:var(--ds-on-accent); font-size:13px; font-weight:700;
}
.plan-select:hover { filter:brightness(1.05); }
.plan-select:active { transform:translateY(1px); }
.plans-note { margin:4px 0 8px; font-size:12px; line-height:1.6; color:var(--ds-muted); }

/* ── 팝업 표면 통일 ───────────────────────────────────────────
   해금 알림 · 퀘스트 알림 · 결제 카드가 서로 다른 재질이었다.
   유리 + 외곽 그라디언트 테두리 하나로 맞춘다. 이 파일이 셋 중
   마지막에 로드되므로 여기서 각자의 배경·테두리를 덮는다. */
.unlock-announcement,
.quest-announcement-card,
.plan {
  /* position은 각자 유지한다. 여기서 relative로 덮으면 해금 알림의
     absolute 배치가 풀려 카드가 화면 밖으로 밀린다. */
  isolation:isolate;
  border:0; border-radius:22px;
  background:
    linear-gradient(150deg, rgba(145,145,145,.24), rgba(25,25,25,.66) 58%),
    rgba(22,22,22,.68);
  color:#f4f4f4;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 18px 44px rgba(7,7,7,.42);
}
/* 외곽 그라디언트 테두리 */
.unlock-announcement::before,
.quest-announcement-card::before,
.plan::before {
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(150deg,
    rgba(215,215,215,.9) 0%, rgba(135,135,135,.3) 40%,
    rgba(255,255,255,.08) 68%, rgba(182,182,182,.66) 100%);
  -webkit-mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
          mask:linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* 바깥으로 번지는 빛 */
.unlock-announcement::after,
.quest-announcement-card::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 26px 2px rgba(124,124,124,.4);
}

/* 해금 알림만 명암을 뒤집는다: 면은 밝게, 닫기 버튼은 어둡게.
   재질(유리 + 외곽 그라디언트 + 외곽 빛)은 나머지 둘과 동일하게 유지. */
.unlock-announcement {
  /* 알파 합이 .85쯤 되어 사실상 불투명했다. 면을 얇게 깔고 블러·채도로 유리를 만든다. */
  background:
    linear-gradient(150deg, rgba(255,255,255,.42), rgba(221,221,221,.18) 58%),
    rgba(242,242,242,.26);
  color:#252525;
  backdrop-filter:blur(26px) saturate(170%);
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 14px 34px rgba(33,33,33,.2);
}
.unlock-announcement::before {
  padding:1.6px;
  background:linear-gradient(148deg,
    #ffffff 0%, rgba(160,160,160,.85) 26%, rgba(255,255,255,.9) 48%,
    rgba(121,121,121,.6) 72%, rgba(255,255,255,.95) 100%);
}
.unlock-picture { background:#d2d2d2; }
.unlock-caption { color:#252525; }

/* 결제 카드: 시트 배경과 거의 분간되지 않을 만큼 낮춘다. 외곽 빛 없음,
   버튼은 색 없이 테두리만. */
.plan {
  position:relative;
  background:
    linear-gradient(150deg, rgba(117,117,117,.10), rgba(15,15,15,.42) 62%),
    rgba(18,18,18,.5);
  box-shadow:0 8px 20px rgba(5,5,5,.22);
}
.plan::before {
  background:linear-gradient(150deg,
    rgba(189,189,189,.42) 0%, rgba(110,110,110,.16) 45%,
    rgba(255,255,255,.05) 72%, rgba(148,148,148,.32) 100%);
}
.plan-select {
  background:transparent; border:1px solid rgba(223,223,223,.32); color:#e3e3e3;
}
.plan-select:hover { filter:none; background:rgba(255,255,255,.08); }
.plan h3 { color:#e6e6e6; }
.plan-price small,.plan-year,.plan-perks li::marker { color:#a5a5a5; }

/* Premium만 도드라지게: 면은 더 어둡게, 테두리는 빛나게, 버튼은 밝게. */
.plan[data-tier="Premium"] {
  background:
    radial-gradient(118% 80% at 5% -6%, rgba(91,91,91,.85), rgba(75,75,75,.4) 36%, transparent 66%),
    linear-gradient(150deg, rgba(93,93,93,.18), rgba(11,11,11,.82) 58%),
    rgba(13,13,13,.82);
  box-shadow:0 14px 32px rgba(5,5,5,.4);
}
.plan[data-tier="Premium"]::before {
  background:linear-gradient(150deg,
    rgba(227,227,227,.95) 0%, rgba(133,133,133,.55) 40%,
    rgba(255,255,255,.14) 70%, rgba(179,179,179,.85) 100%);
}
.plan[data-tier="Premium"]::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 30px 3px rgba(118,118,118,.5);
}
.plan[data-tier="Premium"] .plan-select {
  background:#ededed; border-color:transparent; color:#212121;
}
.plan[data-tier="Premium"] .plan-select:hover { background:#ffffff; }

@media(prefers-reduced-transparency:reduce) {
  .quest-announcement-card { background:#222222; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .unlock-announcement { background:#ebebeb; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .plan { background:#191919; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@supports not (backdrop-filter:blur(1px)) {
  .quest-announcement-card { background:#222222; }
  .unlock-announcement { background:#ebebeb; }
  .plan { background:#191919; }
}

/* 실사에서는 결제 카드가 보라 유리 그대로라 혼자 떠 보였다.
   구조는 같게 두고 색만 크림-레몬 계열로 바꾼다. */
[data-theme="realism"] .plan {
  background:
    linear-gradient(150deg, rgba(191,191,191,.16), rgba(249,249,249,.5) 62%),
    rgba(251,251,251,.6);
  color:#2b2b2b;
  box-shadow:0 8px 20px rgba(73,73,73,.1);
}
[data-theme="realism"] .plan::before {
  background:linear-gradient(150deg,
    rgba(133,133,133,.34) 0%, rgba(188,188,188,.14) 45%,
    rgba(255,255,255,.55) 72%, rgba(159,159,159,.3) 100%);
}
[data-theme="realism"] .plan h3 { color:#2b2b2b; }
[data-theme="realism"] .plan-price small,
[data-theme="realism"] .plan-year,
[data-theme="realism"] .plan-perks li::marker { color:#626262; }
[data-theme="realism"] .plan-select { border-color:rgba(43,43,43,.26); color:#2b2b2b; }
[data-theme="realism"] .plan-select:hover { background:rgba(43,43,43,.06); }

/* Premium은 밝은 시트 위에서 레몬 면 + 어두운 버튼으로 도드라지게. */
[data-theme="realism"] .plan[data-tier="Premium"] {
  background:
    linear-gradient(150deg, rgba(228,228,228,.62), rgba(247,247,247,.72) 58%),
    rgba(249,249,249,.8);
  box-shadow:0 14px 32px rgba(99,99,99,.16);
}
[data-theme="realism"] .plan[data-tier="Premium"]::before {
  background:linear-gradient(150deg,
    rgba(251,251,251,.95) 0%, rgba(196,196,196,.62) 40%,
    rgba(255,255,255,.5) 70%, rgba(185,185,185,.85) 100%);
}
[data-theme="realism"] .plan[data-tier="Premium"]::after {
  box-shadow:0 0 30px 3px rgba(196,196,196,.5);
}
[data-theme="realism"] .plan[data-tier="Premium"] .plan-select {
  background:#2b2b2b; border-color:transparent; color:#f7f7f7;
}
[data-theme="realism"] .plan[data-tier="Premium"] .plan-select:hover { background:#3a3a3a; }
@media(prefers-reduced-transparency:reduce) {
  [data-theme="realism"] .plan { background:#f4f4f4; backdrop-filter:none; -webkit-backdrop-filter:none; }
  [data-theme="realism"] .plan[data-tier="Premium"] { background:#f5f5f5; }
}
@supports not (backdrop-filter:blur(1px)) {
  [data-theme="realism"] .plan { background:#f4f4f4; }
  [data-theme="realism"] .plan[data-tier="Premium"] { background:#f5f5f5; }
}

/* 실사 결제 카드: 카드 밑에 깔리던 블러(backdrop-filter)와 그림자를 없앤다.
   면이 불투명해지므로 배경도 단색으로 고정한다. Premium 외곽 빛은 유지. */
[data-theme="realism"] .plan {
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:#fafafa;
  box-shadow:none;
}
[data-theme="realism"] .plan[data-tier="Premium"] {
  background:#f8f8f8;
  box-shadow:none;
}

/* .messenger-page button{color:inherit}가 특이도로 이겨서 버튼 글씨가
   면 색이 아니라 본문 색을 따라갔다. 서브컬처에서는 밝은 면에 밝은 글씨가 된다. */
.messenger-page .my-upgrade { color:var(--ds-on-accent); }

/* 퀘스트 알림만 더 밝게. 위의 공용 유리 규칙이 dock-features.css보다 나중에
   로드되므로, 이 팝업의 강조는 여기서 덮어야 실제로 적용된다.
   ⚠ /퀘스트팝업 · /퍼스널용기팝업 · /퍼스널휴식팝업 세 개가 함께 바뀐다. */
.quest-announcement-card {
  border: 1px solid rgba(227,227,227,.46);
  background:
    radial-gradient(120% 72% at 50% 113%, rgba(167,167,167,.92), rgba(112,112,112,.55) 40%, transparent 76%),
    linear-gradient(160deg, rgba(167,167,167,.22), transparent 58%),
    rgba(23,23,23,.74);
  box-shadow:
    0 0 52px -8px rgba(126,126,126,.65),
    0 16px 40px rgba(7,7,7,.4),
    inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}
.quest-announcement-card::before {
  background: linear-gradient(150deg,
    rgba(239,239,239,.95) 0%, rgba(156,156,156,.5) 40%,
    rgba(255,255,255,.16) 70%, rgba(200,200,200,.85) 100%);
}
@media(prefers-reduced-transparency:reduce) {
  .quest-announcement-card { background:#272727; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@supports not (backdrop-filter:blur(1px)) { .quest-announcement-card { background:#272727; } }

/* 분기점 리플레이 변형: 외곽선을 따라 넓게 번지는 보라 + 푸른 구간 한 자락. */
.branch-variant .quest-announcement-card {
  border: 1px solid rgba(217,217,217,.5);
  background:
    radial-gradient(120% 72% at 50% 113%, rgba(145,145,145,.92), rgba(106,106,106,.55) 40%, transparent 76%),
    linear-gradient(160deg, rgba(163,163,163,.22), transparent 58%),
    rgba(23,23,23,.76);
  box-shadow:
    0 0 92px -10px rgba(114,114,114,.75),
    0 0 46px -6px rgba(123,123,123,.5),
    0 16px 40px rgba(7,7,7,.42),
    inset 0 1px 0 rgba(255,255,255,.24);
}
.branch-variant .quest-announcement-card::before {
  background: linear-gradient(150deg,
    rgba(238,238,238,.95) 0%, rgba(143,143,143,.62) 28%,
    rgba(148,148,148,.7) 52%, rgba(255,255,255,.18) 74%, rgba(177,177,177,.9) 100%);
}
@media(prefers-reduced-transparency:reduce) {
  .branch-variant .quest-announcement-card { background:#242424; }
}
@supports not (backdrop-filter:blur(1px)) { .branch-variant .quest-announcement-card { background:#242424; } }

/* 분기점 팝업 장식: 얇은 프레임 + 모서리 브래킷 + 옅은 패턴.
   기본 팝업에는 숨겨두고 branch-variant에서만 켠다. */
.quest-ornament { display: none; }
.branch-variant .quest-ornament {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* 면에 깔리는 사선 패턴 */
.branch-variant .quest-ornament::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .025;
  background: repeating-linear-gradient(45deg, #ffffff 0 1px, transparent 1px 9px);
}
.branch-variant .quest-frame {
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
}
.branch-variant .quest-frame rect {
  fill: none; stroke: rgba(211,211,211,.32); stroke-width: 1;
}
/* 등장 시 테두리가 스스로 그려진다. pathLength=1이라 크기와 무관하다. */
.branch-variant .quest-ornament.draw .quest-frame rect {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: quest-frame-draw 620ms 80ms ease-out forwards;
}
@keyframes quest-frame-draw { to { stroke-dashoffset: 0; } }


@media(prefers-reduced-motion:reduce) {
  .branch-variant .quest-frame rect { animation: none !important; stroke-dashoffset: 0; }
}