/* Hallmark · checked · Easy Saju · job: 생일을 넣고 내 한국 기운(목화토금수) 하나를 도트 그림으로 바로 본다 */
/* Hallmark · waive 39b · button.cell (pixel chart card, 3:4 grid), button.five-btn, button.dm-part and button.badge (pixel picture plus its name, tapped to read it) are picture tiles, not text controls · their height follows the artwork */
/* Hallmark · waive 38iii · .brand-ko/.brand-ro are the two-line wordmark (이지사주 over EASY SAJU), the theme signature, shown once in the hero · second line is a second size */
/* Easy Saju 도트판(2026-11-15): 남색 밤 배경 + 4px 격자. 둥근 모서리 없음, 계단식 픽셀 테두리. 그림은 /px/*.png (image-rendering: pixelated). */
:root {
  --night: #151a28; --night-2: #20283c; --night-3: #2b3550; --line: #5a6690;
  --paper: #f3ead2; --paper-ink: #1c1a17; --paper-muted: #574d42; --paper-2: #e6d9b8;
  --text: #f1ecdf; --muted: #bdb7a8; --gold: #f2c14e; --gold-hi: #ffd774; --gold-lo: #8f6a14; --red: #a82e25; --err: #ff9a8f;
  --wood: #2a6e4e; --fire: #b3352a; --earth: #c69a34; --metal: #dcd8cc; --water: #284a8a;
  --wood-hi: #5cc28d; --fire-hi: #ff6a4d; --earth-hi: #e8bd55; --metal-hi: #f3f1ea; --water-hi: #6f9bf0;
  --on-dark: #fbf8f0; --on-light: #1c1a17; --off-bg: #8a826c; --shadow: #0b0e16; --scrim: rgb(8 10 16 / .78);
  --px: "Fredoka", "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
  --ko: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
  --kr-display: "Song Myung", "Gowun Dodum", serif;
  --u: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--night); color: var(--text); font: 500 18px/1.5 var(--px); min-height: 100dvh; -webkit-text-size-adjust: 100%; word-break: keep-all; }
main { max-width: 480px; margin: 0 auto; padding: 16px 16px 48px; }
.screen { display: none; }
.screen.on { display: block; }
h1, h2 { font-family: var(--px); font-weight: 700; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.h { font-size: 32px; margin: 8px 0 20px; }
.h2 { font-size: 22px; margin: 32px 0 12px; }
a { color: var(--gold); }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
b { font-weight: 700; }

/* 도트는 그림에만. 글자는 일반 글꼴 */
.px, .hodu-say img { image-rendering: pixelated; }
.el-img { display: block; flex: none; }
.ko { display: block; font-family: var(--ko); font-weight: 400; line-height: 1.1; }
.ko.pk-m { font-size: 34px; }
.ko.pk-l { font-size: 64px; }

/* 1. 첫 화면 */
#s-intro { text-align: center; }
.brand { display: grid; justify-items: center; gap: 8px; margin: 40px 0 16px; }
.brand-ko { font-family: var(--kr-display); font-weight: 400; font-size: 64px; line-height: 1; color: var(--gold); }
.brand-ro { font-size: 22px; line-height: 1; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; }
/* 색동: 오방색 다섯 줄 = 다섯 기운 */
.saekdong { display: grid; grid-template-columns: repeat(5, 24px); justify-content: center; margin: 0 0 28px; }
.saekdong i { height: 8px; }
.saekdong .wood { background: var(--water-hi); } .saekdong .fire { background: var(--fire-hi); } .saekdong .earth { background: var(--earth-hi); } .saekdong .metal { background: var(--metal-hi); } .saekdong .water { background: var(--night-3); box-shadow: inset 0 0 0 2px var(--metal); }
/* 한글 + 로마자 병기 */
.kr { display: block; margin-bottom: 4px; font-family: var(--px); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.kr b { font-family: var(--kr-display); font-weight: 400; font-size: 1.45em; color: var(--gold); margin-right: 4px; letter-spacing: 0; }
.title .kr { margin-bottom: 8px; }
.title { font-family: var(--px); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 0 0 32px; text-wrap: balance; }
.five { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.five-btn { display: grid; justify-items: center; gap: 4px; width: 100%; min-height: 88px; padding: 4px 0; background: none; border: 0; color: var(--text); font-size: 15px; transition: transform .1s steps(2); }
.five-btn span { line-height: 1.2; }
.five-btn span b { font-family: var(--kr-display); font-weight: 400; font-size: 20px; color: var(--gold); display: block; }
.five-btn .en { color: var(--muted); font-size: 13px; }
.five-btn:hover .en { color: var(--gold); }
.five-btn:active { transform: translateY(var(--u)); }
.five-btn img { width: 56px; height: 56px; }

/* 버튼 */
.cta { display: block; width: calc(100% - 8px); margin: 12px auto 20px; min-height: 52px; border: 0; background: var(--gold); color: var(--on-light); font: 700 20px var(--px);
  box-shadow: 0 -4px 0 0 var(--gold-lo), 0 4px 0 0 var(--gold-lo), -4px 0 0 0 var(--gold-lo), 4px 0 0 0 var(--gold-lo), 0 8px 0 0 var(--shadow); transition: transform .1s steps(2), background-color .1s steps(2); }
.cta:hover { background: var(--gold-hi); }
.cta:active { transform: translateY(var(--u)); }
.cta:disabled { background: var(--off-bg); cursor: wait; }
.back { background: none; border: 0; color: var(--muted); padding: 12px 0; min-height: 44px; font-size: 16px; }
.back::before { content: "< "; }
.back:hover { color: var(--text); }
.back:active { color: var(--gold); }

/* 소개·FAQ */
.about { margin-top: 48px; padding: 20px 16px 8px; background: var(--night-2); text-align: left; }
.about h2 { font-size: 22px; }
.about p { color: var(--muted); margin: 0 0 12px; }
details + details { box-shadow: 0 -4px 0 0 var(--night-3); }
summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; }
summary:hover { color: var(--gold); }

/* 2. 폼 */
form { display: grid; gap: 20px; }
label { display: grid; gap: 8px; font-weight: 700; }
.opt { color: var(--muted); font-weight: 500; font-size: 15px; }
input { font: 500 18px var(--px); padding: 12px; min-height: 52px; margin: 4px; border: 0; background: var(--night-2); color: var(--text); color-scheme: dark;
  box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
input:focus-visible { outline: 0; box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold); }
.err { color: var(--err); min-height: 28px; margin: 0; }

/* 3. 결과: 내 기운 */
.hero-el { display: grid; justify-items: center; text-align: center; padding-top: 8px; }
.hero-el .el-img { width: 192px; height: 192px; }
.you-are { margin: 12px 0 0; color: var(--muted); font-size: 18px; }
.big { margin: 0; font: 700 56px/1.05 var(--px); color: var(--gold); }
.ko-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; color: var(--text); font-size: 22px; }
.like { margin: 8px 0 0; color: var(--muted); }

.hodu-say { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; margin: 32px 0 8px; }
.hodu-say img { width: 64px; height: 64px; }
.bubble { position: relative; margin: 4px; padding: 12px 16px; background: var(--paper); color: var(--paper-ink); font-size: 17px;
  box-shadow: 0 -4px 0 0 var(--paper), 0 4px 0 0 var(--paper), -4px 0 0 0 var(--paper), 4px 0 0 0 var(--paper); }
.bubble::before { content: ""; position: absolute; left: -16px; top: 16px; width: 12px; height: 12px; background: var(--paper); }

/* 다섯 기운 막대 */
.mix { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mix-btn { display: grid; grid-template-columns: 40px 64px minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 8px 4px 4px; background: var(--night-2); border: 0; color: var(--text); text-align: left; transition: background-color .1s steps(2); }
.mix-btn:hover { background: var(--night-3); }
.mix-btn:active { transform: translateY(2px); }
.mix-btn img { width: 40px; height: 40px; }
.mix-btn .nm { font-size: 16px; }
.mix-btn b { text-align: right; font-size: 20px; }
.mix-btn.zero { color: var(--muted); }
.bar { display: block; height: 12px; background: var(--night); position: relative; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: currentColor; }
.bar.wood { color: var(--wood-hi); } .bar.fire { color: var(--fire-hi); } .bar.earth { color: var(--earth-hi); } .bar.metal { color: var(--metal-hi); } .bar.water { color: var(--water-hi); }

/* 카드 판 */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; padding-top: 8px; }
.col { display: grid; gap: 12px; align-content: start; }
.lbl { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.cell { --b: var(--shadow); position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; aspect-ratio: 3 / 4; min-height: 100px; padding: 4px 0; margin: 4px; border: 0; color: var(--on-dark);
  box-shadow: 0 -4px 0 0 var(--b), 0 4px 0 0 var(--b), -4px 0 0 0 var(--b), 4px 0 0 0 var(--b); transition: transform .1s steps(2); }
.cell:hover { --b: var(--gold-hi); }
.cell:active { transform: translateY(var(--u)); }
.cell .ro { font-size: 15px; font-weight: 700; }
.cell .mini { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 0 4px; background: var(--shadow); color: var(--on-dark); }
.cell.wood { background: var(--wood); }
.cell.fire { background: var(--fire); }
.cell.earth { background: var(--earth); color: var(--on-light); }
.cell.metal { background: var(--metal); color: var(--on-light); }
.cell.water { background: var(--water); }
.cell.you { --b: var(--gold); }
.cell .me { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--on-light); font-size: 13px; font-weight: 700; padding: 0 8px; line-height: 20px; }
.cell.none { --b: var(--night-3); background: transparent; color: var(--muted); font-size: 32px; }
.hint { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.tip { color: var(--muted); text-align: center; margin: 16px 0 24px; font-size: 15px; }

/* 다음 할 일 */
.next { display: grid; gap: 16px; padding: 4px; }
.tile { --b: var(--line); display: grid; gap: 4px; text-align: left; padding: 16px; min-height: 48px; background: var(--night-2); border: 0; color: var(--text);
  box-shadow: 0 -4px 0 0 var(--b), 0 4px 0 0 var(--b), -4px 0 0 0 var(--b), 4px 0 0 0 var(--b); transition: transform .1s steps(2); }
.tile:hover { --b: var(--gold); }
.tile:active { transform: translateY(var(--u)); }
.tile > b { font-size: 20px; color: var(--gold); }
.tile > span:not(.kr) { color: var(--muted); font-size: 15px; }
.cta span, .tile.ghost span, .t-top span { font-family: var(--kr-display); font-weight: 400; }
.tile.ghost { display: block; background: none; text-align: center; font-weight: 700; }

/* 설명 시트 */
.sheet { position: fixed; inset: 0; background: var(--scrim); display: grid; align-items: end; z-index: 10; }
.sheet[hidden] { display: none; }
.sheet-in { position: relative; width: 100%; max-width: 480px; margin: 0 auto; max-height: 86dvh; overflow-y: auto; padding: 24px 20px 32px; background: var(--paper); color: var(--paper-ink); }
.x { position: absolute; right: 12px; top: 12px; min-height: 44px; padding: 4px 12px; background: var(--paper-2); border: 0; color: var(--paper-ink); }
.x:hover { background: var(--gold); }
.x:active { background: var(--gold-hi); }
.sh-top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; padding-right: 80px; }
.sh-el { width: 112px; height: 112px; flex: none; }
.sh-el img { width: 112px; height: 112px; }
.sh-card { width: 96px; height: 120px; flex: none; display: grid; place-items: center; color: var(--on-dark); }
.sh-card.wood { background: var(--wood); color: var(--on-dark); } .sh-card.fire { background: var(--fire); color: var(--on-dark); } .sh-card.earth { background: var(--earth); color: var(--on-light); }
.sh-card.metal { background: var(--metal); color: var(--on-light); } .sh-card.water { background: var(--water); color: var(--on-dark); }
.sh-title { margin: 0; font: 700 26px/1.15 var(--px); text-transform: capitalize; }
.sh-sub { margin: 4px 0 0; color: var(--paper-muted); font-size: 16px; }
.sheet p { margin: 0 0 12px; }
.sh-img { color: var(--paper-muted); }
.sh-box { background: var(--paper-2); padding: 12px; }
.g-name { font-weight: 700; font-size: 19px; color: var(--red); margin-top: 16px !important; }

/* 4. 명찰 */
.nametag { margin: 12px 4px 0; padding-bottom: 20px; background: var(--paper); color: var(--paper-ink); text-align: center;
  box-shadow: 0 -4px 0 0 var(--paper), 0 4px 0 0 var(--paper), -4px 0 0 0 var(--paper), 4px 0 0 0 var(--paper); }
.nametag p { margin: 0; }
.t-top { background: var(--red); color: var(--paper); font-weight: 700; font-size: 20px; padding: 12px; margin-bottom: 20px !important; }
.t-ko { font: 900 76px/1.1 "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.t-ro { font-size: 26px; font-weight: 700; margin-top: 4px !important; }
.t-mean { color: var(--paper-muted); margin-top: 8px !important; padding: 0 16px; }
.t-sound { margin-top: 16px !important; padding: 12px 16px 0; border-top: 4px dashed var(--paper-2); }
.why { color: var(--muted); text-align: center; margin: 20px 0; }

/* 5. 스타 목록 */
.stars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.stars li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px 40px; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; background: var(--night-2); }
.stars li.loading { display: block; color: var(--muted); padding: 16px; }
.ph { width: 56px; height: 56px; overflow: hidden; background: var(--line); display: grid; place-items: center; }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ph i { font-style: normal; font-weight: 700; font-size: 22px; }
.who { display: grid; min-width: 0; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { color: var(--muted); font-size: 14px; }
.dm { display: grid; justify-items: center; gap: 4px; }
.dm img { width: 28px; height: 28px; }
.dm small { font-size: 12px; color: var(--muted); }
.pt { font-weight: 700; font-size: 22px; text-align: right; color: var(--gold); }
.credits { color: var(--muted); font-size: 12px; margin-top: 24px; word-break: break-word; }
.credits a { color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 8px 16px; background: var(--paper); color: var(--paper-ink); opacity: 0; pointer-events: none; transition: opacity .2s steps(2); }
.toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 일간 풀이: 위 글자 + 기운 */
.dm { background: var(--night-2); padding: 16px; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: start; gap: 8px; }
.dm-part { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 8px 4px; min-height: 48px; background: none; border: 0; color: var(--text); transition: transform .1s steps(2); }
.dm-part:hover b { color: var(--gold); }
.dm-part:active { transform: translateY(var(--u)); }
.dm-part b { font-size: 20px; }
.dm-part small { color: var(--muted); font-size: 14px; line-height: 1.3; }
.dm-part .el-img { width: 80px; height: 80px; margin: 12px 0; }
.dm-card { width: 80px; min-height: 104px; margin: 0 0 4px; pointer-events: none; }
.dm-plus { align-self: center; text-align: center; font-size: 28px; font-weight: 700; color: var(--gold); margin-top: -40px; }
.dm-sum { margin: 12px 0 0; font-size: 19px; font-weight: 700; text-align: center; }
.dm-sum span { color: var(--gold); margin-right: 4px; }
.dm-pillar { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.dm-pillar b { color: var(--text); }

/* 숨은 뱃지 */
.badges-h span { color: var(--muted); font-size: 16px; font-weight: 500; margin-left: 8px; }
.badges { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.badge { display: grid; justify-items: center; gap: 4px; width: 100%; min-height: 104px; padding: 8px 4px; background: var(--night-2); border: 0; color: var(--muted); font-size: 14px; line-height: 1.2; transition: background-color .1s steps(2); }
.badge:hover { background: var(--night-3); }
.badge:active { transform: translateY(2px); }
.badge.on { color: var(--gold); font-weight: 700; box-shadow: inset 0 0 0 4px var(--gold-lo); }
.badge img { width: 64px; height: 64px; }
.badge-img.off { filter: grayscale(1) brightness(.35); }
.sh-el .badge-img { width: 112px; height: 112px; }

/* 숨은 천간 */
.hid { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.hid li { display: grid; grid-template-columns: 32px 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; background: var(--paper-2); }
.hid small { color: var(--paper-muted); }
.ko.pk-s { font-size: 28px; }

/* 나라·언어 고르기 */
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 32px 0 8px; font-size: 14px; }
.langs a { color: var(--muted); text-decoration: none; padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.langs a:hover { color: var(--gold); }
.langs a[aria-current] { color: var(--gold); font-weight: 700; }

/* 일본어·중국어·태국어·크메르어는 띄어쓰기 없이 줄을 바꾼다(keep-all 은 한국어·라틴 문자용) */
html[lang^="ja"] body, html[lang^="zh"] body { word-break: normal; line-break: strict; }
html[lang^="th"] body, html[lang^="km"] body { word-break: normal; overflow-wrap: anywhere; }
.cell .me { white-space: nowrap; }

/* 섹션 안내 한 줄 */
.sec-intro { margin: -4px 0 16px; color: var(--muted); font-size: 16px; }

/* 오행 상성 오각형 */
.cycle { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto 16px; }
.cycle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cycle line { stroke-width: 3; }
.cycle .gen { stroke: var(--gold-lo); }
.cycle .ctl { stroke: var(--fire); stroke-dasharray: 6 5; opacity: .55; }
.cycle .gen.hi { stroke: var(--gold); }
.cycle .ctl.hi { stroke: var(--fire-hi); opacity: 1; }
.cycle .mg { fill: var(--gold); }
.cycle .mc { fill: var(--fire-hi); }
.node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 0; width: 76px; min-height: 48px; padding: 0; background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.node img { width: 56px; height: 56px; background: var(--night); }
.node.me { color: var(--gold); }
.node.me img { box-shadow: 0 0 0 4px var(--gold); }
.node:hover span { color: var(--gold); }

/* 내 기준 관계 네 칸 */
.rel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rel button { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; min-height: 48px; padding: 12px 8px; background: var(--night-2); border: 0; color: var(--text); text-align: left; }
.rel button:hover { background: var(--night-3); }
.rel img { width: 48px; height: 48px; }
.rel small { display: block; font-size: 13px; font-weight: 700; }
.rel .gen small { color: var(--gold); }
.rel .ctl small { color: var(--fire-hi); }
.rel b { display: block; font-size: 18px; }
.rel em { display: block; font-style: normal; color: var(--muted); font-size: 13px; line-height: 1.3; margin-top: 4px; }

/* 뱃지 이름 + 능력치 */
.badge .bn { font-size: 13px; }
.badge .bs { font-size: 12px; color: var(--muted); font-weight: 500; }
.badge.on .bs { color: var(--gold-hi); }
.badge:not(.on) .bn { color: var(--muted); }
.stat { display: inline-block; margin: 0 0 8px; padding: 4px 12px; background: var(--gold); color: var(--on-light); font-weight: 700; }

/* 스타 궁합: 관계 표시 */
.rtag { display: inline-block; margin-top: 4px; padding: 0 8px; font-style: normal; font-size: 12px; font-weight: 700; line-height: 20px; width: max-content; }
.rtag.gen { background: var(--gold); color: var(--on-light); }
.rtag.ctl { background: var(--fire); color: var(--on-dark); }
.rtag.same { background: var(--metal); color: var(--on-light); }

/* 결과 카드 묶음(2026-11-15): 다섯 장을 한 장씩 친구에게 보낼 수 있게 액자로 나눈다 */
.me-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.send-top { min-height: 44px; padding: 8px 16px; border: 0; background: var(--gold); color: var(--on-light); font-weight: 700; }
.send-top:hover { background: var(--gold-hi); }
.send-top span, .deck-n .kr b { font-family: var(--kr-display); font-weight: 400; }
.deck { margin: 24px 4px; padding: 20px 16px 16px; background: var(--night-2); scroll-margin-top: 16px;
  box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
.deck.hl { box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold); }
.deck-n { line-height: 1.3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.deck-n > span:first-child { color: var(--gold); font-size: 15px; }
.deck-n #badge-count { color: var(--muted); font-size: 15px; font-weight: 500; }
.deck .hodu-say { margin-top: 24px; }
.h3 { font-size: 18px; margin: 28px 0 8px; }
.deck-share { display: block; width: 100%; min-height: 44px; margin-top: 20px; padding: 8px; border: 0; background: var(--night-3); color: var(--gold); font-weight: 700; }
.deck-share:hover { background: var(--line); color: var(--on-dark); }
.friend .deck-share { display: none; }
.send-box { margin: 32px 4px 24px; padding: 20px 16px 8px; text-align: center; background: var(--night-3); }
.send-h { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--gold); text-wrap: balance; }
.friend-bar { margin: 8px 4px 0; padding: 16px; background: var(--paper); color: var(--paper-ink); }
.friend-bar p { margin: 0 0 4px; }
.friend-bar .cta { margin-bottom: 4px; }
.match { box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold); }
.mt-h { margin: 0 0 12px; text-align: center; font-size: 22px; font-weight: 700; }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.mt-side { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; text-align: center; min-width: 0; }
.mt-side small { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.mt-side b { color: var(--gold); font-size: 20px; }
.mt-row .rtag { max-width: 120px; margin: 0; padding: 4px 8px; text-align: center; white-space: normal; font-size: 14px; line-height: 1.3; }
.mt-why { margin: 12px 0 0; color: var(--text); }

/* 생년월일: 연도 입력 + 월·일 고르기 */
.bday { border: 0; margin: 0; padding: 0; min-width: 0; }
.bday legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.bday-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.bday[data-order="dmy"] .bd, .bday[data-order="mdy"] .bm { order: -2; }
.bday[data-order="dmy"] .bm, .bday[data-order="mdy"] .bd { order: -1; }
.bday[data-order="dmy"] .bday-row, .bday[data-order="mdy"] .bday-row { grid-template-columns: 1fr 1fr 1.2fr; }
.bday label { display: block; min-width: 0; }
.bday input, .bday select { width: calc(100% - 8px); }
select { font: 500 18px var(--px); padding: 12px; min-height: 52px; margin: 4px; border: 0; background: var(--night-2); color: var(--text); color-scheme: dark;
  box-shadow: 0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line); }
select:focus-visible { outline: 0; box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 광고 자리: 채워지지 않으면 공간을 남기지 않는다 */
.ad { margin: 28px 0; }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.legal { text-align: center; margin-top: 16px; font-size: 13px; }
.legal a { color: var(--muted); }