/* 무료 결과지 공유 카드 「본캐 판정서」 — 9:16 스토리 한 장.
   월화담 한지 위에 먹글씨·주칠 낙관. 오행 색은 막대·형광펜·궁합표에만 조금 쓴다.
   모든 내부 치수는 카드 너비(cqw)를 따라서, 화면 크기와 저장 이미지가 같은 비율로 나온다. */
.profile-share-dialog { width: min(calc(100vw - 24px), calc((100dvh - 180px) * 9 / 16), 405px); max-width: none; max-height: calc(100dvh - 16px); padding: 0; overflow: visible; border: 0; background: transparent; }
.profile-share-dialog::backdrop { background: rgba(37,34,30,.8); backdrop-filter: blur(8px); }
.profile-share-shell { position: relative; display: grid; justify-items: stretch; gap: 10px; container-type: inline-size; }
.profile-share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 본문의 차분한 말투에서 짓궂은 카드로 넘어간다는 주월이의 한마디 — 카드 밖이라 저장 이미지에는 들어가지 않는다 */
.profile-share-head p { display: flex; align-items: center; gap: 9px; margin: 0; color: #f3e9d8; font: 600 13px/1.45 var(--serif); letter-spacing: -.02em; }
.profile-share-head img { flex: none; width: 34px; height: 34px; border: 1px solid #d9b77a; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.profile-share-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff50; border-radius: 50%; color: #fff; background: #ffffff12; font: 400 26px/1 var(--sans); cursor: pointer; }
.profile-share-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.profile-share-action { height: 46px; padding: 0 12px; border: 1px solid #d9ccb5; border-radius: 10px; color: #4a3a2c; background: #faf6ed; font: 700 14px/1.3 var(--sans); cursor: pointer; }
.profile-share-action.is-primary { border-color: transparent; color: #fbf4e6; background: #6e2c24; }
.profile-share-action:hover { filter: brightness(1.06); }
.profile-share-action:disabled { opacity: .6; cursor: progress; }
.profile-share-close:focus-visible, .profile-share-action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.profile-share-note { min-height: 1.4em; margin: 0; color: #efe6d6; font: 500 12.5px/1.4 var(--sans); text-align: center; }

.bc-card {
  --acc: #8e918c; --acc-soft: #e4e2dc;
  --ink: #2a241f; --ink-soft: #6b6054; --line: #d8c9ae; --red: #b3392b; --wine: #6e2c24; --gold: #a88452;
  position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 2.2cqw;
  width: 100%; aspect-ratio: 9 / 16; padding: 5.2cqw 6.6cqw 4.6cqw; overflow: hidden;
  color: var(--ink); font-family: var(--sans); text-align: left; word-break: keep-all;
  background: #f4ede2 url(/images/bg/paper.webp) center / cover no-repeat;
  border-radius: 2cqw; box-shadow: 0 24px 70px #0000004d;
}
/* 오행 색 — 사이트의 --wood … --water 와 같은 결 */
.bc-card[data-element="木"] { --acc: #4f8a68; --acc-soft: #d6e6da; }
.bc-card[data-element="火"] { --acc: #c75c45; --acc-soft: #f3d8cf; }
.bc-card[data-element="土"] { --acc: #b08a4c; --acc-soft: #efe1c4; }
.bc-card[data-element="金"] { --acc: #7e827d; --acc-soft: #e2e2dc; }
.bc-card[data-element="水"] { --acc: #416985; --acc-soft: #d5e1ea; }
.bc-card *, .bc-card *::before, .bc-card *::after { box-sizing: border-box; min-width: 0; }
/* 옛 책 표지의 두 줄 테두리 */
.bc-card::before, .bc-card::after { position: absolute; inset: 2.4cqw; border: 1px solid #b89f7a; content: ''; pointer-events: none; }
.bc-card::after { inset: 3.2cqw; border-color: #cdb998; border-width: .5px; }

/* 머리 */
.bc-top { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid var(--line); }
.bc-logo { display: block; width: 15cqw; height: auto; margin: -1.6cqw 0; }
.bc-serial { display: flex; gap: .8cqw; }
.bc-pillar { display: grid; justify-items: center; gap: .6cqw; padding: .7cqw 1.3cqw .8cqw; border-radius: .8cqw; color: var(--ink); }
.bc-pillar small { color: var(--ink-soft); font: 600 1.9cqw/1 var(--sans); }
.bc-pillar b { font: 700 4.3cqw/1 var(--serif); letter-spacing: .02em; white-space: nowrap; }
.bc-pillar.is-day { color: #fbf3e4; background: var(--wine); box-shadow: 0 .5cqw 1.2cqw #6e2c2433; }
.bc-pillar.is-day small { color: #e8cfb8; }
.bc-pillar.is-empty b { color: #a89a88; font: 600 2.6cqw/1.65 var(--sans); }

/* 본캐 — 오른쪽 위 둥근 달창에 일간 그림, 그 위에 주칠 낙관 */
.bc-hero { position: relative; z-index: 0; display: grid; justify-items: start; gap: 1.5cqw; padding-top: .4cqw; }
.bc-window { position: absolute; top: -.4cqw; right: -.6cqw; width: 24cqw; height: 24cqw; margin: 0; }
.bc-window img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .5cqw #f7f0e3, 0 0 0 .8cqw var(--gold), 0 1.4cqw 3cqw #5a3f2438; }
.bc-seal { position: absolute; bottom: -1.6cqw; left: -3.2cqw; display: grid; place-items: center; width: 9.6cqw; height: 9.6cqw; border: .5cqw solid var(--red); border-radius: 1cqw;
  color: var(--red); background: #f6ecdcde; font: 900 3.1cqw/1.05 var(--serif); padding-top: .3cqw; transform: rotate(-8deg); }
.bc-owner { margin: 0; padding: 1.3cqw 2.4cqw .8cqw; border: 1px solid #c9a79a; border-radius: 99cqw; color: var(--wine); background: #fbf5ecb3; font: 700 2.6cqw/1.2 var(--sans); letter-spacing: -.01em; }
.bc-title { position: relative; z-index: 0; display: grid; gap: .6cqw; margin: .2cqw 0 .8cqw; letter-spacing: -.05em; }
.bc-title-setup { max-width: 62cqw; color: var(--ink-soft); font: 600 4.6cqw/1.3 var(--serif); }
.bc-title-punch { position: relative; justify-self: start; color: #1d1814; font: 900 10.4cqw/1.08 var(--serif); letter-spacing: -.06em; }
.bc-title-punch.is-long { max-width: 64cqw; font-size: 8.4cqw; }
/* 붓으로 그은 듯한 밑칠 */
.bc-title-punch::after { position: absolute; z-index: -1; left: -1cqw; right: -1.4cqw; bottom: .6cqw; height: 3.6cqw; border-radius: 3cqw 1cqw 4cqw 1cqw; content: ''; background: var(--acc-soft); transform: rotate(-.8deg); }
.bc-split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; overflow: hidden; border: 1px solid #b89f7a; border-radius: 1.6cqw; }
.bc-split p { display: flex; align-items: center; gap: 1.8cqw; margin: 0; padding: 2.1cqw 2.4cqw; background: #fbf6ecd9; }
.bc-split p + p { color: #fbf3e4; background: var(--wine); }
.bc-split small { display: grid; flex: none; width: 5cqw; height: 5cqw; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 900 2.7cqw/1 var(--serif); opacity: .9; padding-top: .35cqw; }
.bc-split strong { font: 800 3.1cqw/1.25 var(--sans); letter-spacing: -.035em; }

/* 구역 머리 — 一 二 三 */
.bc-block h3 { display: flex; align-items: center; gap: 1.8cqw; margin: 0 0 1.25cqw; color: var(--ink); font: 700 3.5cqw/1.2 var(--serif); letter-spacing: -.04em; }
.bc-block h3 span { display: grid; flex: none; width: 5.6cqw; height: 5.6cqw; place-items: center; border-radius: 50%; color: #fbf3e4; background: var(--wine); box-shadow: 0 0 0 .4cqw #fbf6ec, 0 0 0 .7cqw var(--gold); font: 900 3.3cqw/1 var(--serif); padding-top: .3cqw; }
.bc-block h3::after { flex: 1; height: 1px; content: ''; background: linear-gradient(90deg, var(--line), transparent); }

/* 一 체감 스펙 */
.bc-spec ul { display: grid; gap: .95cqw; margin: 0; padding: 0; list-style: none; }
.bc-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2cqw; row-gap: .6cqw; align-items: baseline; --bar: #8e918c; }
.bc-stat.is-wood { --bar: #4f8a68; } .bc-stat.is-fire { --bar: #c75c45; } .bc-stat.is-earth { --bar: #b59054; }
.bc-stat.is-metal { --bar: #8e918c; } .bc-stat.is-water { --bar: #416985; }
.bc-stat p { display: flex; align-items: baseline; gap: 1.8cqw; margin: 0; overflow: hidden; white-space: nowrap; }
.bc-stat b { flex: none; color: var(--ink); font: 700 2.85cqw/1.3 var(--sans); letter-spacing: -.03em; }
.bc-stat-copy { overflow: hidden; color: var(--ink-soft); font: 500 2.6cqw/1.3 var(--sans); letter-spacing: -.03em; text-overflow: ellipsis; }
.bc-stat strong { color: var(--ink-soft); font: 800 2.6cqw/1.3 var(--sans); white-space: nowrap; }
.bc-stat i { grid-column: 1 / -1; grid-row: 2; display: block; height: 1.1cqw; overflow: hidden; border-radius: 1cqw; background: #e3d8c5; }
.bc-stat i::after { display: block; width: var(--fill); height: 100%; border-radius: inherit; content: ''; background: var(--bar); }
.bc-stat.is-max b, .bc-stat.is-max strong { color: var(--bar); }
.bc-stat.is-max .bc-stat-copy { color: var(--ink); font-weight: 650; }
.bc-stat.is-zero strong { color: var(--red); }
.bc-stat.is-zero .bc-stat-copy { color: var(--red); font-weight: 650; }
.bc-stat.is-zero i { background: repeating-linear-gradient(135deg, #b3392b40 0 .6cqw, transparent .6cqw 1.4cqw); }

/* 二 팩폭 — 서책에 끼워 둔 쪽지 */
.bc-roast ol { display: grid; gap: 1.1cqw; margin: 0; padding: 0; list-style: none; counter-reset: roast; }
.bc-roast li { position: relative; padding: 1.4cqw 2.6cqw 1.4cqw 8cqw; border: 1px solid #dccdb3; border-radius: 1.2cqw; color: var(--ink); background: #fffcf5;
  font: 600 3cqw/1.38 var(--sans); letter-spacing: -.04em; counter-increment: roast; box-shadow: 0 .6cqw 1.4cqw #6b50301f; }
.bc-roast li:nth-child(odd) { transform: rotate(-.7deg); }
.bc-roast li:nth-child(even) { transform: rotate(.6deg); margin-inline: .8cqw -.4cqw; }
.bc-roast li::before { position: absolute; top: 50%; left: 2.2cqw; display: grid; width: 4.4cqw; height: 4.4cqw; place-items: center; border-radius: 50%;
  color: #fbf3e4; background: var(--wine); font: 800 2.1cqw/1 var(--sans); padding-top: .3cqw; content: counter(roast, decimal-leading-zero); transform: translateY(-50%); }
.bc-roast mark { padding: 0 .4cqw; color: inherit; font-weight: 850; background: linear-gradient(transparent 50%, var(--acc-soft) 50%); }

/* 三 궁합 */
.bc-match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.bc-ticket { display: grid; align-content: start; gap: .7cqw; padding: 1.9cqw 2.4cqw; border-radius: 1.4cqw; }
.bc-ticket.is-mate { border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: var(--acc-soft); }
.bc-ticket.is-rival { border: 1px dashed #b89f7a; background: #fbf6ecb3; }
.bc-ticket small { color: var(--ink-soft); font: 800 2.2cqw/1.2 var(--sans); letter-spacing: .04em; }
.bc-ticket.is-rival small { color: var(--red); }
.bc-ticket strong { display: flex; align-items: center; gap: 1.4cqw; font: 800 3.05cqw/1.25 var(--sans); letter-spacing: -.04em; white-space: nowrap; }
.bc-ticket-gan { display: grid; flex: none; width: 5.2cqw; height: 5.2cqw; place-items: center; border-radius: 1cqw; color: #fbf3e4; background: var(--acc); font: 900 3cqw/1 var(--serif); }
.bc-ticket.is-rival .bc-ticket-gan { background: var(--red); }
.bc-ticket p { margin: 0; color: var(--ink-soft); font: 500 2.4cqw/1.35 var(--sans); letter-spacing: -.03em; }
.bc-manual { display: flex; align-items: baseline; gap: 1.6cqw; margin: 1.6cqw 0 0; color: var(--ink); font: 500 2.6cqw/1.45 var(--sans); letter-spacing: -.035em; }
.bc-manual b { flex: none; padding: .7cqw 1.3cqw; border: 1px solid var(--red); border-radius: .8cqw; color: var(--red); font: 800 2.1cqw/1 var(--sans); }

/* 발 — 책 띠지. 카드 폭을 꽉 채운 자줏빛 띠 위에 주월이의 질문과 주소 */
.bc-foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 2.6cqw; margin: auto -6.6cqw -4.6cqw; padding: 2.8cqw 6.6cqw 3.2cqw;
  color: #fbf3e4; background: linear-gradient(100deg, #5e231c, var(--wine) 45%, #7c3329);
  box-shadow: inset 0 .5cqw 0 #00000026, inset 0 1.1cqw 0 -.5cqw #c9a36a, 0 -1cqw 2.4cqw #4a1d1626; }
/* 띠지 위의 금박 두 줄 */
.bc-foot::before { position: absolute; inset: 1.3cqw 2.4cqw auto; height: 0; border-top: 1px solid #d9b77a99; content: ''; }
.bc-foot::after { position: absolute; inset: auto 2.4cqw 1.3cqw; height: 0; border-top: 1px solid #d9b77a66; content: ''; }
.bc-juwol { flex: none; width: 11cqw; height: 11cqw; border: .5cqw solid #d9b77a; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #fff; }
.bc-foot p { display: grid; flex: 1; gap: .9cqw; margin: 0; }
.bc-foot strong { color: #fff6e6; font: 900 4.8cqw/1.05 var(--serif); letter-spacing: -.05em; }
.bc-foot p span { color: #e8cfb8; font: 500 2.4cqw/1.2 var(--sans); letter-spacing: -.02em; }
.bc-domain { display: grid; justify-items: end; gap: .9cqw; white-space: nowrap; }
.bc-domain small { color: #d9b77a; font: 700 2.3cqw/1 var(--serif); letter-spacing: .5em; margin-right: -.5em; }
.bc-domain span { padding: 1.2cqw 2.2cqw; border: 1px solid #d9b77a; border-radius: .6cqw; color: #f3dca8; font: 700 2.9cqw/1 var(--serif); letter-spacing: .06em;
  background: #00000022; }

/* Sharing controls stay large enough to use beside the illustrated card. */
.profile-share-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: none; }
.profile-share-dialog::-webkit-scrollbar { display: none; }
.profile-share-close { width: 44px; height: 44px; }
.profile-share-action { min-height: 48px; height: auto; padding: 12px; border-radius: var(--ui-control-radius); font-weight: 600; }
.profile-share-action.is-primary { background: var(--ui-action); }
.profile-share-action.is-primary:hover { background: var(--ui-action-hover); }
@media(max-height:600px){.profile-share-dialog{width:min(82vw,300px)}.profile-share-head p{font-size:12px}}