/* v0.3 공통 컴포넌트 — 정밀판·데일리·플레이 */
.mock-banner { background: var(--ink); color: var(--paper); font-size: 13px; text-align: center; padding: 7px 16px }
.mock-banner b { color: var(--gold-2) }
.mock-banner a { color: var(--paper) }

.vswitch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); margin-left: auto }
.vswitch a { padding: 6px 14px; border-radius: 999px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2) }
.vswitch a[aria-current="page"] { background: var(--ink); color: var(--paper) }
@media (max-width: 640px) { .vswitch a { padding: 5px 9px; font-size: 12.5px } }

.screen-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 56px 0 14px }
.screen-title h2 { margin: 0 }
.screen-title .req { font-family: var(--f-mono); font-size: 12px; color: var(--guard); background: var(--guard-soft); padding: 2px 8px; border-radius: 4px }
.note { font-size: 13px; color: var(--ink-3); margin: 6px 0 0 }

/* 근거 등급 */
.grade { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 4px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; border: 1px solid currentColor; line-height: 1 }
.grade.A { color: var(--guard) } .grade.B { color: var(--gold) } .grade.C { color: var(--seal) }

/* 정밀판 앱 셸 */
.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start }
.side { position: sticky; top: 76px; display: grid; gap: 2px }
.side a { padding: 9px 12px; border-radius: var(--r); text-decoration: none; font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between }
.side a:hover { background: var(--paper) }
.side a[aria-current="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--seal) }
.side .sep { height: 1px; background: var(--line); margin: 8px 0 }
@media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr) } .side { position: static; display: flex; overflow-x: auto; gap: 4px } .side a { white-space: nowrap } .side .sep { display: none } }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr) } }

/* 관심사 띠 */
.interest-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.interest { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 4px }
.interest .k { font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between }
.interest .sig { font-family: var(--f-display); font-weight: 800; font-size: 22px }
.interest .sig.득 { color: var(--gold) } .interest .sig.실 { color: var(--seal) } .interest .sig.평 { color: var(--ink-3) }
.interest .d { font-size: 12.5px; color: var(--ink-2) }
@media (max-width: 900px) { .interest-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* 일지 */
.q { border-top: 1px solid var(--line); padding: 14px 0 }
.q:first-of-type { border-top: 0 }
.q .qh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px }
.q .qh b { font-weight: 600 }
.q .pred { font-size: 12px; font-family: var(--f-mono); color: var(--ink-3) }
.opts { display: flex; flex-wrap: wrap; gap: 6px }
.opt { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 8px 12px; font-size: 14px; cursor: pointer; min-height: 40px }
.opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper) }
.opt .m { font-family: var(--f-mono); font-size: 11px; opacity: .65; margin-left: 4px }
.lock { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--guard); background: var(--guard-soft); border-radius: 4px; padding: 2px 8px }

.stat-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px 70px; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line) }
.stat-row .bar-bg { height: 8px; background: #E4EAE6; border-radius: 4px; position: relative; overflow: hidden }
.stat-row .bar-bg i { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 4px }
.stat-row .bar-bg s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.stat-row .mono { text-align: right }
.stat-head { font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line) }

/* 달력 창 */
.wincal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.wincal .dow { font-size: 11.5px; color: var(--ink-3); text-align: center; padding-bottom: 2px }
.wc { border-radius: 5px; min-height: 58px; padding: 5px 6px; font-size: 12px; background: #fff; border: 1px solid var(--line); display: grid; align-content: space-between }
.wc .n { font-family: var(--f-mono); font-size: 12px }
.wc .gz { font-family: var(--f-hanja); font-size: 12px; color: var(--ink-3) }
.wc .v { font-family: var(--f-mono); font-size: 11px }
.wc.st2 { background: var(--gold); color: #fff; border-color: var(--gold) } .wc.st2 .gz { color: #fff }
.wc.st { background: var(--gold-soft); border-color: #DCC583 }
.wc.guard { box-shadow: inset 0 0 0 2px var(--gold) }
.wc.sh { background: var(--seal-soft); border-color: #DFAAA4 }
.wc.sh2 { background: var(--seal); color: #fff; border-color: var(--seal) } .wc.sh2 .gz { color: #fff }
.wc.blank { background: transparent; border-color: transparent }
.wc.today { outline: 2px solid var(--ink); outline-offset: 1px }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 10px }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px }

.alloc { display: grid; gap: 6px }
.alloc-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 13.5px }
.alloc-row .track { height: 22px; background: #E4EAE6; border-radius: 4px; overflow: hidden; display: flex }
.alloc-row .track i { background: var(--gold); display: block }
.alloc-row .track i.lt { background: var(--gold-soft) }
.alloc-row .mono { text-align: right }

.hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.hr { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 10px }
.hr .t { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3) }
.hr .h { font-family: var(--f-hanja); font-weight: 900; font-size: 20px }
.hr .v { font-family: var(--f-mono); font-size: 13px }
.hr.good { border-color: var(--gold); background: var(--gold-soft) }
.hr.bad { border-color: #DFAAA4; background: var(--seal-soft) }
@media (max-width: 640px) { .hours { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

.evid { font-size: 13px; border-collapse: collapse; width: 100% }
.evid td, .evid th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top }
.evid th { font-size: 12px; color: var(--ink-3); font-weight: 500 }
.evid .mono { white-space: nowrap }

/* 지도 부채꼴 */
.map-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px }
.cands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.cand { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13px; background: #fff }
.cand.top { background: var(--gold-soft); border-color: #DCC583; font-weight: 600 }
.cand.avoid { background: var(--seal-soft); border-color: #DFAAA4; text-decoration: line-through; text-decoration-color: var(--seal) }

.range-bar { position: relative; height: 46px; margin: 18px 0 8px }
.range-bar .axis { position: absolute; left: 0; right: 0; top: 20px; height: 6px; background: #E4EAE6; border-radius: 3px }
.range-bar .band { position: absolute; top: 16px; height: 14px; background: var(--gold); border-radius: 4px }
.range-bar .cur { position: absolute; top: 8px; width: 2px; height: 30px; background: var(--ink) }
.range-bar .lab { position: absolute; top: -10px; font-size: 12px; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-mono) }
.range-bar .tick { position: absolute; top: 32px; font-size: 11px; color: var(--ink-3); transform: translateX(-50%); font-family: var(--f-mono) }

.grade.H { color: var(--ink-2); border-style: dashed }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
@media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .grid4 { grid-template-columns: minmax(0, 1fr) } }
.pc { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; margin-bottom: 9px }
.pc .lb { font-size: 12px; color: var(--ink-3); margin-bottom: 3px }
.pc p { margin: 0; font-size: 14px }
.meter2 { height: 10px; background: #E4EAE6; border-radius: 5px; overflow: hidden }
.meter2 i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)) }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 6px 10px; font-size: 13.5px; margin-top: 8px; align-items: center }
.kv dt { color: var(--ink-3) } .kv dd { margin: 0 }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 4px; border: 1px solid rgba(0,0,0,.1) }
.view-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px }
.view-head h2 { margin: 0 }
.lockcard { opacity: .6; filter: grayscale(.5) }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px }
.q .opts .opt:disabled { opacity: .4 }
.wc { cursor: pointer; font: inherit; text-align: left; color: inherit }
.wc[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px }
.wc.off { background: transparent; color: var(--ink-3) }
.status { font-family: var(--f-mono); font-size: 12px }
.status.active { color: var(--guard) } .status.wait, .status.hidden { color: var(--ink-3) } .status.off { color: var(--seal) }
.map-svg { width: 100%; height: auto; display: block }
.field .row { display: flex; gap: 8px; flex-wrap: wrap }
.field .row > * { flex: 1 1 140px }
.ai-note { font-size: 12.5px; color: var(--ink-3) }
/* 정밀판 상단 메뉴: 항목이 많아 좁은 화면에서 가로 스크롤 */
.top .nav { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; min-width: 0 }
.top .nav::-webkit-scrollbar { display: none }
.top .nav a, .top .nav button { white-space: nowrap }
.top .wrap { min-width: 0 }
/* 계정 버튼 · 로그인 창 */
.acct { margin-left: 6px; display: inline-flex }
.acct-btn { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px 4px 4px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 13px; max-width: 190px }
.acct-btn.login { padding: 7px 14px; background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600 }
.acct-ava { width: 24px; height: 24px; border-radius: 50%; background: var(--seal); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none }
.acct-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@media (max-width: 720px) { .acct-mail { display: none } .acct-btn { padding: 3px } }
.auth-dlg { border: 0; border-radius: 16px; padding: 0; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 30px 80px -30px rgba(28,39,38,.6); background: var(--white); color: var(--ink) }
.auth-dlg::backdrop { background: rgba(28,39,38,.45) }
.auth-box { padding: 22px; display: grid; gap: 10px; position: relative }
.auth-box h3 { margin: 0 }
.auth-box .btn { width: 100% }
.auth-box .or { text-align: center; font-size: 12px; color: var(--ink-3) }
.auth-x { position: absolute; right: 12px; top: 12px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink-3) }
.auth-links { font-size: 13px; margin: 0; text-align: center }
.auth-links a { color: var(--guard) }
/* 신상 입력 — 크게, 누르기 쉽게 */
.bf { display: grid; gap: 22px }
.bf-row { display: grid; gap: 10px }
.bf-lab { font-weight: 700; font-size: 16px }
.bf-lab small, .bf-help { font-weight: 400; font-size: 13px; color: var(--ink-3) }
.bf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px }
.bf-seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) }
.bf-seg button, .bf-sijin button, .bf-btn { min-height: 52px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; padding: 10px 12px; color: var(--ink) }
.bf-seg.small button { min-height: 44px; font-size: 14.5px }
.bf-seg button[aria-pressed="true"], .bf-sijin button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.bf-seg button:hover, .bf-sijin button:hover { border-color: var(--ink-2) }
.bf-date { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px }
.bf-select, .bf-input { min-height: 56px; font-size: 18px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; width: 100%; font-family: inherit; color: var(--ink) }
.bf-select.wide { font-size: 16px; min-height: 52px }
.bf-sijin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.bf-sijin button { display: grid; gap: 2px; text-align: center; padding: 8px 4px }
.bf-sijin button b { font-size: 15px } .bf-sijin button span { font-size: 12px; font-weight: 400; color: inherit; opacity: .75; font-family: var(--f-mono) }
@media (max-width: 520px) { .bf-sijin { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.bf-unknown { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px }
.bf-unknown p { margin: 0 0 8px; font-size: 14.5px }
.bf-btns { display: flex; gap: 8px; flex-wrap: wrap }
.bf-btns .bf-btn { flex: 1 1 160px }
.bf-btn.ink { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.bf-btn.gold { background: var(--gold); color: #fff; border-color: var(--gold) }
.bf-btn.big { min-height: 58px; font-size: 17px }
.bf-btn[disabled] { opacity: .6 }
.bf-adv summary { cursor: pointer; font-size: 13.5px; color: var(--ink-3) }
.bf-adv .bf-select { margin-top: 8px }
.bf-dlg { max-width: 640px }
.bf-guess { gap: 14px; max-height: 86vh; overflow: auto }
.bf-q { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px }
.bf-folk { display: grid; gap: 6px; margin-top: 4px } .bf-folk > span { font-size: 14px }
.bf-ev { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; font-size: 14px; background: var(--paper); border-radius: 8px; padding: 6px 10px }
.bf-ev button { border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--ink-3) }
.bf-evadd { display: grid; grid-template-columns: 150px 1fr auto; gap: 6px }
@media (max-width: 560px) { .bf-evadd { grid-template-columns: 1fr } }
.bf-result { display: grid; gap: 8px; background: var(--gold-soft); border-radius: 12px; padding: 12px }
.bf-pick { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; text-align: left; min-height: 52px; border: 1.5px solid #DCC583; background: #fff; border-radius: 10px; padding: 8px 12px; font: inherit; cursor: pointer }
.bf-pick .bf-bar { position: absolute; inset: 0 auto 0 0; background: var(--gold-soft); z-index: 0 }
.bf-pick b, .bf-pick span:not(.bf-bar) { position: relative; z-index: 1 }
/* 일지 확장 */
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px }
.ev-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer; min-height: 38px }
.ev-chips button[aria-pressed="true"].pos { background: var(--gold); color: #fff; border-color: var(--gold) }
.ev-chips button[aria-pressed="true"].neg { background: var(--seal); color: #fff; border-color: var(--seal) }
.ev-group { font-size: 12px; color: var(--ink-3); margin: 8px 0 4px }
.purpose { background: var(--guard-soft); border: 1px solid #B6CFC8; border-radius: 10px; padding: 14px 16px; font-size: 14px; margin-bottom: 16px }
.purpose ol { margin: 6px 0 0; padding-left: 18px }
/* 휴대폰: 대화창·입력 폭이 화면을 넘지 않게 */
.auth-dlg { width: min(640px, calc(100vw - 24px)); max-width: none; box-sizing: border-box }
.bf, .bf-guess, .bf-q, .bf-row { grid-template-columns: minmax(0, 1fr); min-width: 0 }
.bf-guess > *, .bf-q > *, .bf > * { min-width: 0 }
.bf-evadd > * { min-width: 0 }
.bf-input[type="month"], .bf-input[type="date"] { min-width: 0 }
.top .brand { white-space: nowrap; flex: none }
.bf-seg.wrap { display: flex; flex-wrap: wrap } .bf-seg.wrap button { flex: 1 1 130px; min-width: 0 }

.bf-warn { margin: 0; background: var(--seal-soft); border: 1px solid #DFAAA4; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: #7A1820 }