/* 데일리·플레이 — 모바일 우선, 한 손 화면 */
body.lite { background: var(--celadon); padding-bottom: 76px }
body.lite.play { background: linear-gradient(180deg, #F7EFE0 0%, var(--celadon) 420px) }
.lite-wrap { max-width: 520px; margin: 0 auto; padding: 14px 16px 24px }
.lite-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; max-width: 520px; margin: 0 auto }
.lite-top .brand { font-size: 17px }
.lite-top .to-pro { font-size: 12.5px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: #fff }
.lite-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: 0 18px 40px -30px rgba(28, 39, 38, .4); margin-bottom: 14px }
.ph-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px }
.ph-top .who { font-weight: 700; font-size: 15px }
.ph-top .date { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3) }
.lite h4 { font-family: var(--f-display); font-size: 21px; letter-spacing: -.02em; margin: 4px 0 10px; line-height: 1.3 }
.light { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line) }
.light:last-child { border-bottom: 0 }
.light .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; font-family: var(--f-hanja) }
.dot.득 { background: var(--gold) } .dot.평 { background: #A9B5B0 } .dot.실 { background: var(--seal) }
.light .t { font-size: 14.5px; line-height: 1.4 }
.light .t small { display: block; color: var(--ink-3); font-size: 12.5px }
.light .why { font-size: 12px; color: var(--guard); background: none; border: 1px solid var(--guard-soft); border-radius: 999px; padding: 3px 9px; cursor: pointer }
.why-box { grid-column: 1 / -1; font-size: 13px; background: var(--guard-soft); border-radius: 10px; padding: 9px 11px; color: #1D4440 }
.why-box a { color: inherit; font-size: 12px }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px }
.week div { text-align: center; border-radius: 10px; padding: 6px 0 5px; font-size: 11px; background: #fff; border: 1px solid var(--line) }
.week div b { display: block; font-size: 15px; font-family: var(--f-mono) }
.week .득 { background: var(--gold); color: #fff; border-color: var(--gold) }
.week .실 { background: var(--seal-soft); color: #7A1820; border-color: #DFAAA4 }
.week .sel { outline: 2px solid var(--ink) }
.bigbtn { display: block; width: 100%; text-align: center; border: 0; border-radius: 14px; padding: 14px; font-weight: 700; background: var(--ink); color: var(--paper); font-size: 15px; margin-top: 8px; cursor: pointer; text-decoration: none }
.bigbtn.gold { background: var(--gold) }
.bigbtn.line { background: #fff; color: var(--ink); border: 1px solid var(--ink) }
.bigbtn[disabled] { opacity: .5 }
.tags { display: flex; flex-wrap: wrap; gap: 7px }
.tag { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; background: #fff; cursor: pointer; font: inherit }
.tag.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600 }
.choice { display: grid; gap: 7px }
.choice button { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14.5px; cursor: pointer }
.choice button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.choice.row { grid-template-columns: repeat(5, 1fr) } .choice.row button { text-align: center; font-size: 20px; padding: 10px 0 }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--white) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) }
.tabbar button { border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--ink-3); padding: 6px 0; cursor: pointer; display: grid; gap: 2px; justify-items: center; position: relative }
.tabbar button .ic { font-size: 18px; line-height: 1 }
.tabbar button[aria-current="page"] { color: var(--ink); font-weight: 700 }
.tabbar .badge { position: absolute; top: 2px; right: 22%; background: var(--seal); color: #fff; font-size: 10px; border-radius: 999px; padding: 0 5px; line-height: 15px }
.meter2 { height: 10px; background: #E4EAE6; border-radius: 5px; overflow: hidden; margin: 6px 0 }
.meter2 i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold)) }
.mrow { display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; margin-bottom: 5px }
.mrow .meter2 { margin: 0 }
.persona { border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line) }
.persona .img { aspect-ratio: 4 / 5; position: relative; display: grid; place-items: center; overflow: hidden; background: #EFE8DA }
.persona .img img, .persona .img svg { width: 100%; height: 100%; object-fit: cover; display: block }
.persona .img .gen { position: absolute; right: 10px; top: 10px; font-size: 10.5px; background: #fff; color: var(--ink); padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line) }
.persona .img .wm { position: absolute; left: 10px; bottom: 10px; font-size: 10.5px; background: rgba(28,39,38,.75); color: #fff; padding: 2px 7px; border-radius: 4px }
.persona .body { padding: 12px 14px }
.persona .name { font-family: var(--f-display); font-weight: 800; font-size: 20px }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.album button { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid var(--line); padding: 0; background: #fff; cursor: pointer }
.album img, .album svg { width: 100%; height: 100%; object-fit: cover; display: block }
.album span { position: absolute; left: 4px; bottom: 4px; font-size: 10.5px; background: rgba(255,255,255,.92); padding: 0 5px; border-radius: 3px; font-family: var(--f-mono) }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none } }
.onb h4 { margin-top: 2px }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60 }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0) }