/* 짝공 체험 목업 v2 전용 (실제 앱 styles.css 위에 얹는다) */
/* 스터디 다이어리: 종이의 줄과 기존 정원의 여섯 색 */
.diary-tabs { position: sticky; top: 0; z-index: 2; background: var(--paper, #fbf8f2); padding: 4px; }
.diary-tabs button { min-width: 0; min-height: 42px; }
.diary-paper { padding: 16px 12px; border: 1px solid #e6e1d6; border-radius: 18px; background: #fffcf6; }
.diary-paper .field { margin: 0; }
.diary-paper .input { width: 100%; box-sizing: border-box; }
.diary-paper textarea { resize: vertical; min-height: 90px; }
.diary-paper .row .label { font-size: 11px; }
.diary-todo { display: flex; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e6e1d6; overflow-wrap: anywhere; }
.diary-todo input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; }
.diary-todo .chip { max-width: 90px; overflow-wrap: anywhere; white-space: normal; }
.diary-checked { text-decoration: line-through; color: var(--muted); }
.diary-timetable { border: 1px solid #dddcd1; border-radius: 10px; overflow: hidden; }
.diary-hour { display: grid; grid-template-columns: 38px repeat(6, minmax(0, 1fr)); min-height: 24px; }
.diary-hour > span { color: var(--muted); font-size: 10px; padding: 4px 3px; text-align: center; border-bottom: 1px solid #e6e1d6; }
.diary-cell { position: relative; min-height: 24px; border-left: 1px solid #e6e1d6; border-bottom: 1px solid #e6e1d6; }
.diary-hour:last-child > * { border-bottom: 0; }
.diary-ink { position: absolute; top: 2px; bottom: 2px; background: var(--subject); opacity: .85; border-radius: 2px; }
.diary-ink.manual { background-image: repeating-linear-gradient(135deg, transparent 0 3px, #ffffffa8 3px 5px); }
.diary-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ink-2); }
.diary-legend span { display: inline-flex; align-items: center; gap: 4px; }
.diary-legend i { width: 10px; height: 10px; border-radius: 3px; }
.diary-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 0; border-block: 1px solid #e6e1d6; }
.diary-total b { font-size: 23px; color: var(--teal); }
.diary-total span { font-size: 12px; color: var(--muted); }
.diary-stars { display: flex; gap: 4px; }
.diary-stars button { width: 44px; height: 44px; font-size: 30px; color: #d9d3c5; background: transparent; border: 0; cursor: pointer; }
.diary-stars button.on { color: #b58b34; }
.diary-stamp { align-self: start; padding: 7px 12px; border: 2px solid #8fb54a; border-radius: 12px; color: #5f7a2d; font-weight: 800; transform: rotate(-3deg); }
.diary-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.diary-calendar > .label { padding: 8px 0; }
.diary-calday { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 76px; gap: 3px; padding: 7px 1px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font-size: 12px; }
.diary-calday small { font-size: 10px; }
.diary-calday.level-1 { background: #eef7f1; }
.diary-calday.level-2 { background: #d8eee4; }
.diary-calday.level-3 { background: #bde1d4; }
.diary-calmark { font-size: 17px; }
.diary-subject-bar { margin-top: 5px; height: 9px; background: #f0ede5; border-radius: 6px; overflow: hidden; }
.diary-subject-bar i { display: block; height: 100%; border-radius: inherit; }
.diary-chart { display: grid; align-items: end; gap: 3px; min-height: 115px; }
.diary-chart.hours { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.diary-chart.weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.diary-chart > div { text-align: center; min-width: 0; }
.diary-bar-track { height: 90px; display: flex; align-items: end; }
.diary-bar-track i { display: block; width: 100%; background: #83c6b4; border-radius: 4px 4px 0 0; }
.diary-chart small { display: block; font-size: 8px; margin-top: 6px; color: var(--muted); }
.diary-chart.weekdays small { font-size: 11px; }
.diary-pot { width: 70px; height: 90px; flex: none; }
.diary-home { text-align: left; justify-self: start; font-size: 13px; line-height: 1.6; }
.diary-timelapse { position: relative; min-height: 220px; margin-top: 12px; padding: 14px; background: #eaf3df; border-radius: 16px; overflow: hidden; }
.diary-timelapse > .av { display: block; width: 130px; height: 130px; margin: auto; animation: diary-breathe 2s ease-in-out infinite; }
.diary-sprouts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.diary-sprouts span { display: inline-block; font-size: 25px; transform-origin: bottom; animation: diary-sprout .8s ease-out both; }
@keyframes diary-sprout { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes diary-breathe { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .diary-timelapse > .av, .diary-sprouts span { animation: none; } }
.tabbar { grid-template-columns: repeat(4, 1fr); }
.tab { position: relative; }
.tab .dot { position: absolute; top: 2px; left: calc(50% + 14px); width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.time-card { padding: 22px 18px; border: 1px solid #d9ecea; background: #f3f8f7; }
.time-card .my-char { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 16px; }
.quick-now { width: auto; justify-self: center; height: 42px; padding: 0 20px; font-size: 14px; }
.free-demo summary { cursor: pointer; text-align: center; color: var(--muted); font-size: 13px; padding: 8px; }
.coach { flex: none; max-height: 38%; overflow-y: auto; margin: 12px 12px 4px; padding: 10px 14px 14px; border: 1px solid #9ac9c4; border-radius: 18px 18px 18px 4px; background: #e7f3f2; box-shadow: var(--shadow); color: var(--ink); font-size: 14px; z-index: 10; }
.coach .iconbtn { width: 30px; height: 30px; }
.coach p { margin: 4px 0 10px; line-height: 1.5; }
.coach .btn { height: 40px; font-size: 14px; }
.panel { max-height: min(844px, calc(100dvh - 64px)); overflow-y: auto; }
.panel > .pbtn { justify-content: space-between; }
@media (max-width: 760px) { .panel { max-height: 82dvh; } }
.seats.s3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seats.s3 .seat { border-radius: 14px; }
.seats.s3 .meta { padding: 5px 7px 7px; gap: 3px; }
.seats.s3 .who { font-size: 12px; }
.seats.s3 .chip { font-size: 10.5px; padding: 2px 6px; }
.seats.s3 .flag { font-size: 10px; padding: 2px 6px; top: 5px; left: 5px; }
.seat .goalline { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seat .res { font-size: 11.5px; font-weight: 700; }
.seat .res.done { color: var(--green); } .seat .res.partial { color: var(--amber); }
.summary { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-2); }
.clockcard { display: grid; gap: 8px; text-align: center; }
.clockcard .big { font-size: 46px; font-weight: 900; letter-spacing: -1px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05; }
.rounds { display: flex; gap: 6px; justify-content: center; }
.rounds i { width: 34px; height: 7px; border-radius: 4px; background: #e6e1d6; }
.rounds i.done { background: #9fd3cd; } .rounds i.on { background: var(--teal); }
.dots { display: flex; gap: 6px; align-items: center; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: #e6e1d6; }
.dots i.on { background: var(--teal); } .dots i.today { outline: 2px solid var(--teal-2); outline-offset: 1px; }
.gauge { height: 10px; border-radius: 6px; background: #ece7dc; overflow: hidden; }
.gauge i { display: block; height: 100%; background: linear-gradient(90deg, #8fd6cf, #1f8a80); border-radius: 6px; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid #e2ded5; background: var(--card); font-size: 21px; font-weight: 700; color: var(--ink); }
.stepper button[disabled] { opacity: .35; }
.stepper b { min-width: 64px; text-align: center; font-size: 18px; color: var(--ink); }
.tagm { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #e7f3f2; color: var(--teal); font-weight: 700; }
.tagm.age { background: #f3eee4; color: var(--ink-2); }
.search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid #e2ded5; border-radius: 14px; padding: 0 12px; height: 46px; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); min-width: 0; }
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: none; }
.tables { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.tables .tb { flex: none; background: var(--card); border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow); display: grid; gap: 5px; justify-items: center; font-size: 11px; color: var(--muted); }
.lounge { background: #f3f8f7; border: 1px solid #d9ecea; }
.timepick { display: grid; gap: 10px; }
.timepick button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); text-align: left; width: 100%; border: 2px solid transparent; }
.timepick button[aria-pressed="true"] { border-color: var(--teal); }
.timepick .tt { font-size: 22px; font-weight: 900; color: var(--ink); min-width: 74px; font-variant-numeric: tabular-nums; }
.results { display: grid; gap: 8px; }
.results .r { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; }
.vclock { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.rsvp { display: flex; align-items: center; gap: 10px; }
/* 7명 이상 방: 내 자리는 맨 위에 크게 (가로) */
.seats.s3 .seat.me { grid-column: 1 / -1; display: grid; grid-template-columns: 42% 1fr; align-items: center; }
.seats.s3 .seat.me .meta { padding: 8px 12px; }
.seats.s3 .seat.me .who { font-size: 14px; }
/* 내 공부 예약 */
.planrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.planrow:first-of-type { border-top: 0; }
.planrow .pt { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; }
.planrow .pt > b { font-size: 17px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 50px; }
.planrow .grow { display: grid; gap: 1px; min-width: 0; }
.planrow .t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.card .link { white-space: nowrap; flex: none; }
.planrow .s { font-size: 12px; color: var(--muted); font-weight: 500; }
.planrow button.chip { border: 0; cursor: pointer; }
.tt-big { font-size: 24px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.daysel { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
.daysel button { height: 40px; border-radius: 12px; border: 1.5px solid #e2ded5; background: var(--card); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.daysel button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: #fff; }
.opt { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #e2ded5; background: var(--card); width: 100%; }
.opt[aria-pressed="true"] { border-color: var(--teal); background: #e7f3f2; }
/* 폰 알림 (잠금화면·상단 알림 흉내) */
.notif { position: absolute; left: 14px; right: 14px; top: 16px; z-index: 60; background: rgba(255, 255, 255, .97); border-radius: 20px; box-shadow: 0 12px 34px rgba(15, 45, 52, .28); padding: 10px 12px 12px; display: grid; gap: 8px; animation: notif-in .35s cubic-bezier(.2, .9, .3, 1.2); backdrop-filter: blur(8px); }
@keyframes notif-in { from { transform: translateY(-130%); opacity: 0; } to { transform: none; opacity: 1; } }
.notif .nh { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.notif .nh .iconbtn { width: 28px; height: 28px; }
.notif .nicon { width: 20px; height: 20px; border-radius: 6px; background: #e3f1f1 center / cover; flex: none; }
.notif .nbody { display: grid; gap: 2px; text-align: left; padding: 0 2px; }
.notif .nbody b { font-size: 15.5px; color: var(--ink); }
.notif .nbody span { font-size: 13px; color: var(--ink-2); }
.notif .nbtns { display: flex; gap: 6px; }
.notif .nbtns button { flex: 1; height: 38px; border-radius: 12px; background: var(--gray-bg); font-size: 13px; font-weight: 700; color: var(--ink); }
.notif .nbtns button:first-child { background: var(--teal); color: #fff; }
@media (prefers-reduced-motion: reduce) { .notif { animation: none; } }
/* 씨앗 */
.seedchip { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 10px; border-radius: 999px; background: #eef7ea; color: #2f6b3a; font-size: 13px; }
.seedchip b { font-weight: 800; }
.seedcard { background: linear-gradient(160deg, #f3faef, #fff); }
.seedbig { font-size: 32px; font-weight: 900; color: var(--ink); line-height: 1.15; }
.shopitem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.shopitem:first-child { border-top: 0; }
.shopitem .em { font-size: 24px; width: 34px; text-align: center; flex: none; }
.shopitem .grow { display: grid; gap: 1px; }
.shopitem button.chip { border: 0; cursor: pointer; flex: none; }
.garden { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #f4fbef, #e7f3dc); min-height: 52px; align-items: flex-end; }
.garden .gp { font-size: 22px; line-height: 1; }
.garden .gp.dim { opacity: .55; font-size: 18px; }
.garden .gp.deco { font-size: 26px; }
.garden-scene { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; flex: none; border-radius: 18px; overflow: hidden; isolation: isolate; background: #f5eddb; }
.garden-background { display: block; width: 100%; height: 100%; object-fit: contain; }
.garden-sprite, .garden-today { position: absolute; height: auto; aspect-ratio: 1; transform: translate(-50%, -95.3125%); pointer-events: none; }
.garden-today img { display: block; width: 100%; height: auto; }
.garden-before { position: absolute; inset: 0; }
[data-garden-sleeping] { opacity: .4; }
.art-panel { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 14px; }
.collection-art { display: flex; flex: 0 0 52px; width: 52px; align-items: center; justify-content: center; }
.collection-art img, .shopitem .em img { display: block; width: 100%; height: auto; }
.collection-art.locked { opacity: .3; filter: grayscale(1); }
.diary-sprouts img { width: 32px; height: 32px; }
.garden-water { display: none; position: absolute; left: 40%; top: -55%; font-size: clamp(14px, 5vw, 24px); }
.growth-milestone .art-panel { max-height: 76px; transition: max-height .3s ease; }
.growth-milestone.is-expanded .art-panel { max-height: 230px; }
.growth-milestone { justify-items: center; text-align: center; }
.garden-scene.garden-mini { width: min(160px, 100%); height: auto; margin-inline: auto; }
.garden-home { display: grid; gap: 6px; width: 100%; padding: 0; background: transparent; text-align: left; border: 0; border-radius: 18px; }
.garden-home:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.garden-legend { font-size: 11px; text-align: center; }
.garden-totals { flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--ink-2); }
.village-milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.village-milestones span, .day-unlocks span, .season-grid span { min-width: 0; padding: 6px 7px; border-radius: 9px; background: #f3f4ef; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.village-milestones [data-unlocked="true"], .day-unlocks [data-unlocked="true"], .season-grid [data-filled="true"] { background: #e7f3e2; color: #2f6b3a; font-weight: 700; }
.day-unlocks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day-unlocks span { padding: 6px 2px; text-align: center; font-size: 10px; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.collection-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 12px 10px; }
.collection-item > div { min-width: 0; overflow-wrap: anywhere; }
.collection-item .label { margin-top: 3px; font-size: 11px; }

.collection-item.found { background: linear-gradient(145deg, #f2f9e9, #fff); }
.season-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.room-garden, .friend-garden { min-width: 0; background: linear-gradient(160deg, #f3faef, #fff); }
.room-garden-plants { width: 100%; min-width: 0; }
.plus-offer { display: grid; justify-items: start; gap: 7px; width: 100%; text-align: left; cursor: pointer; }
.plus-offer > b { font-size: 16px; }
.plus-offer .label { line-height: 1.45; }
.plus-table { display: grid; gap: 8px; }
.plus-row { min-width: 0; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.plus-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.plus-options > div { min-width: 0; padding: 9px; border-radius: 11px; background: #f6f7f3; }
.plus-options > div:last-child { background: #eef7f5; }
.plus-options p { margin: 4px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.plus-intro { background: linear-gradient(145deg, #f2f9e9, #f1f8fa); }
.plus-pricing { border: 1px solid #d9ece8; }
.timelapse-preview { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; border-radius: 14px; background: linear-gradient(90deg, #eef7e6, #fff9e9); font-size: 26px; }
.timelapse-preview img { display: block; width: 17%; height: auto; min-width: 0; }
.weekly-newspaper { display: grid; gap: 10px; background: linear-gradient(150deg, #fff9e8, #f0f8ef); }
.news-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.news-stats > span { display: grid; gap: 3px; min-width: 0; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.8); font-size: 12px; color: var(--ink-2); }
.news-stats strong { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.monthly-summary { display: grid; gap: 9px; }
.friend-garden { display: grid; gap: 11px; padding: 16px; }
.friend-garden p { margin: 0; color: var(--ink-2); }
.milestone-share { overflow: hidden; }
.milestone-share .em { font-size: 34px; }
.milestone-share > b { color: var(--teal); font-size: 20px; }
.ritual-growth { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: linear-gradient(150deg, #fff8e8, #eef8ed); animation: ritual-grow 5s ease-out both; }
.ritual-growth > b { font-size: 17px; }
.ritual-growth.skipped { animation: none; }
.village-celebration { display: grid; align-items: center; gap: 8px; padding: 10px; border-radius: 13px; background: rgba(255,255,255,.8); }
.village-celebration > span { grid-row: span 2; font-size: 27px; }
.ritual-skip { justify-self: end; }
@keyframes ritual-grow { 0% { transform: scale(.96); opacity: .65; } 15% { transform: scale(1); opacity: 1; } 90% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ritual-growth { animation: none; } }
.session-garden-header { position: relative; margin: 8px 16px 12px; flex: none; }
.session-garden-header .garden-scene { width: 96px; height: auto; margin: 8px auto; }
.desk .session-garden-header { width: 100%; margin: 0; }
.session-garden-header > .desk-top { padding: 8px; text-align: center; }
.session-garden-header > .topbar, .session-garden-header > .desk-top { color: #0f3d47; }
.ritual-visual { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 10px; }
.ritual-visual > * { min-width: 0; }
.ritual-visual:has(.growth-milestone.is-expanded) { grid-template-columns: minmax(0, 1fr); }
.ritual-visual:has(.growth-milestone.is-expanded) .ritual-garden { width: 96px; }
.ritual-visual .ritual-growth { padding: 10px; }
.ritual-visual .ritual-growth > b { font-size: 15px; }
.ritual-garden { width: min(144px, 100%); margin: 0 auto; padding: 0; }
.sharecard .sc-garden { width: 100%; min-width: 0; letter-spacing: normal; }
#garden-decorations { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .garden-growing .garden-water { display: block; animation: garden-water .4s ease-in both; }
  .garden-growing .garden-before { animation: garden-before .4s step-end both; }
  .garden-growing .garden-current { transform-origin: center bottom; animation: garden-grow .6s .4s ease-out both; }
  .garden-butterfly { animation: garden-float 4s ease-in-out infinite; }
}
@keyframes garden-grow { 0% { opacity: 0; transform: scale(.65); } 45% { opacity: 1; transform: translateY(-8%) scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes garden-water { from { opacity: 1; transform: translateY(-20px); } to { opacity: 0; transform: translateY(20px); } }
@keyframes garden-before { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .garden-before, .garden-water { display: none; } .growth-milestone .art-panel { transition: none; } }
@keyframes garden-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.banner.seedok { background: #eef7ea; color: #2f6b3a; justify-content: center; margin-top: 8px; }
.opt.bundle { display: flex; justify-content: space-between; align-items: center; }
.seat .prop { position: absolute; z-index: 2; right: 8px; top: 6px; font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
/* 쉬는 시간 채팅 */
.tagm.chat { background: #e7f3f2; color: var(--teal); }
.tagm.chat-off { background: var(--gray-bg); color: var(--gray); }
.chat-fab { position: absolute; right: 20px; bottom: 102px; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 4px; width: 56px; height: 56px; border: 1px solid #a5dacf; border-radius: 50%; background: #bde9dc; color: var(--teal); box-shadow: 0 5px 16px rgba(14, 81, 96, .18); font-size: 22px; cursor: pointer; }
.chat-fab.locked { background: var(--gray-bg); color: var(--gray); border-color: #d2d9dc; box-shadow: 0 4px 12px rgba(30, 44, 48, .1); }
.chat-fab.room-chat { bottom: calc(240px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.chat-unread { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--bg); border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; }
.chat-countdown { position: absolute; right: 0; top: calc(100% + 5px); padding: 3px 7px; border-radius: 7px; background: var(--gray-bg); color: var(--ink-2); white-space: nowrap; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .chat-fab.chat-pulse { animation: chat-open-pulse .65s ease-out; } }
@keyframes chat-open-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.13); } }
.chat .msgs { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.chat .msg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.chat .msg .link { font-size: 11.5px; color: var(--muted); font-weight: 500; flex: none; }
.chat .msg.me { justify-content: flex-end; }
.chat .msg.me span { background: #e7f3f2; padding: 6px 10px; border-radius: 12px 12px 2px 12px; }
.chatin { display: flex; gap: 8px; }
.chatin .input { flex: 1; min-width: 0; height: 44px; }
.chatin .btn { width: auto; height: 44px; padding: 0 16px; font-size: 14.5px; }
.chat-sheet { display: grid; gap: 14px; min-width: 0; }
.chat-sheet h3 { padding-right: 20px; }
.chat-sheet .msgs { min-height: 0; max-height: min(340px, 40dvh); overscroll-behavior: contain; }
.chat-sheet .msg { align-items: flex-start; }
.chat-sheet .msg > span { min-width: 0; overflow-wrap: anywhere; }
.chat-hide { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.chat-hide input { width: 18px; height: 18px; accent-color: var(--teal); }
.expression-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 4px 0; }
.expression-row .chip { min-height: 36px; cursor: pointer; }
.seat-expression { position: absolute; z-index: 5; left: 50%; top: 4px; transform: translateX(-50%); width: max-content; pointer-events: none; }
.expression-bubble { display: inline-block; padding: 5px 9px; border: 1px solid #d9ecea; border-radius: 12px 12px 12px 2px; background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(14,81,96,.14); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* 카메라: 켜면 📷 표시, 얼굴 위치를 따라 기울고, 사람이 없으면 캐릭터가 사라진다 */
.pic .empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity .6s; pointer-events: none; }
.pic.gone img.base, .pic.gone img.body, .pic.gone .fx { opacity: 0; transition: opacity .6s; }
.pic.gone .empty { opacity: 1; }
.pic .cambadge { position: absolute; right: 6px; bottom: 6px; z-index: 2; font-size: 11px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 1px 6px; }
.pic.me-pic.cam img.base, .pic.me-pic.cam img.body { scale: 1.12; translate: var(--fx, 0) var(--fy, 0); rotate: var(--fr, 0deg); transition: translate .3s ease, rotate .3s ease, opacity .6s; }
.chip.cam { background: #eef3fb; color: #3577c4; }
.camcompare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.camcompare div { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: var(--gray-bg); font-size: 12.5px; color: var(--ink-2); }
.camcompare b { color: var(--ink); font-size: 13.5px; }
/* 로그인 */
.authbtn { justify-content: center; gap: 10px; border: 1.5px solid transparent; }
.authbtn.kakao { background: #fee500; color: #191600; }
.authbtn.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.authbtn.apple { background: #000; color: #fff; }
.authic { display: inline-grid; place-items: center; width: 22px; height: 22px; font-weight: 900; font-size: 15px; }
.authic.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.authic.sm.kakao { background: #fee500; color: #191600; }
.authic.sm.google { background: #fff; border: 1px solid #dadce0; color: #4285f4; }
.authic.sm.apple { background: #000; color: #fff; }
.authbtn.google .authic { color: #4285f4; }
@media (prefers-reduced-motion: reduce) { .pic.me-pic.cam img.base, .pic.me-pic.cam img.body { transition: opacity .6s; } }
/* 다이얼 타이머 (60분 눈금, 남은 시간만큼 색 칸) */
.dial { --on: #ff5a2c; --glow: rgba(255, 90, 44, .35); width: min(280px, 78%); margin: 6px auto 0; padding: 12px; border-radius: 34px; background: linear-gradient(160deg, #ffffff, #eeeae2); box-shadow: 0 10px 28px rgba(40, 30, 10, .16), inset 0 -3px 0 rgba(0,0,0,.05); cursor: pointer; }
.dial.c-mint { --on: #23c4ae; --glow: rgba(35, 196, 174, .35); }
.dial.c-violet { --on: #8b6cff; --glow: rgba(139, 108, 255, .35); }
.dial.break { --on: #f2b632; --glow: rgba(242, 182, 50, .35); }
.dial.before { --on: #6f8fb8; --glow: rgba(111, 143, 184, .3); }
.dial-screen { position: relative; aspect-ratio: 1; border-radius: 24px; background: radial-gradient(circle at 50% 40%, #1d1f22, #0d0e10); overflow: hidden; }
.dial-ring { position: absolute; inset: 4%; width: 92%; height: 92%; }
.dial-ring .sg { fill: #26282c; transition: fill .4s, opacity .4s; }
.dial-ring .sg.on, .dial-ring .sg[style] { fill: var(--on); filter: drop-shadow(0 0 2px var(--glow)); }
.dial-ring .lb { fill: #d9d9d9; font: 600 9.5px 'Share Tech Mono', ui-monospace, monospace; text-anchor: middle; dominant-baseline: central; }
.dial-mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none; }
.dial-ms { display: flex; gap: 14px; font: 9px 'Share Tech Mono', monospace; color: #bdbdbd; align-items: center; }
.dial-ms b { font-size: 8px; color: #fff; }
.dial-digits { font: 400 clamp(34px, 11vw, 46px) 'Share Tech Mono', ui-monospace, monospace; color: #f4f4f4; letter-spacing: 1px; text-shadow: 0 0 10px rgba(255,255,255,.25); line-height: 1; font-variant-numeric: tabular-nums; }
.dial-sub { font-size: 11px; color: #a9a9a9; font-weight: 600; margin-top: 2px; }
.dial-snd { position: absolute; right: 8%; top: 7%; font-size: 14px; opacity: .85; pointer-events: auto; }
.dial-opts { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dot-c { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #ddd6c9; }
.dot-c.c-orange { background: #ff5a2c; } .dot-c.c-mint { background: #23c4ae; } .dot-c.c-violet { background: #8b6cff; }
.dot-c[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
/* 탁상 모드: 폰을 세워 두고 다이얼만 크게 */
.view.desk { background: #f3efe6; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px 16px; min-height: 100%; cursor: pointer; }
.desk-top { font-weight: 800; color: var(--ink-2); font-size: 15px; }
.dial.big { width: min(360px, 92%); }
.dial.big .dial-digits { font-size: clamp(44px, 15vw, 64px); }
.desk-goal { font-size: 15px; font-weight: 700; color: var(--ink); text-align: center; }
.desk-with { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.desk-hint { font-size: 12px; color: var(--muted); }
/* 시작 전 인원은 신청과 접속을 나눠 보여 준다 */
.waiting-summary { border-color: #d9ecea; background: #fffdf8; }
.waiting-summary .btn-row { flex-wrap: wrap; }
.regular-buddy { border-color: #d9ecea; background: #f3f8f7; }
.study-neighbors { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink-2); font-size: 12px; }
.study-neighbors.alone { justify-content: center; text-align: center; }
.neighbor-icons { display: flex; align-items: center; gap: 4px; }
.neighbor-icon { position: relative; display: inline-flex; width: 28px; height: 28px; flex: none; }
.neighbor-icon .av { width: 28px; height: 28px; }
.status-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border: 2px solid var(--card); border-radius: 50%; }
.status-dot.focus { background: #48a878; }
.status-dot.break { background: #e3ad38; }
.status-dot.away { background: #91979b; }
.view:has(> .start-countdown) { position: relative; }
.view:has(> .start-countdown) [data-clock] { visibility: hidden !important; }
.start-countdown { position: absolute; z-index: 20; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(251, 248, 242, .98); backdrop-filter: blur(8px); color: var(--ink); pointer-events: none; }
.start-countdown > .countdown-number { position: relative; z-index: 1; font: 800 clamp(72px, 24vw, 112px) 'Share Tech Mono', ui-monospace, monospace; line-height: 1; font-variant-numeric: tabular-nums; color: var(--teal); }
.countdown-seats { display: flex; align-items: center; justify-content: center; gap: 8px; }
.countdown-seat { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 52px; padding: 7px 10px 6px; border: 1px solid #d9d6ce; border-radius: 14px; background: #f2efe8; opacity: .48; transform: translateY(0); transition: opacity .35s, transform .35s, border-color .35s, background-color .35s; }
.countdown-seat .av { width: 30px; height: 30px; filter: grayscale(.7); }
.countdown-lamp { width: 8px; height: 8px; border-radius: 50%; background: #a7a49d; box-shadow: 0 0 0 2px #e3dfd6; }
.start-countdown.urgent .countdown-seat { border-color: #d2a44c; background: #fffaf0; opacity: .9; transform: translateY(3px); }
.start-countdown.urgent .countdown-seat .av { filter: grayscale(0); }
.start-countdown.urgent .countdown-lamp { background: #f0bd4f; box-shadow: 0 0 9px 3px rgba(240, 189, 79, .45); }
.start-countdown > small { position: relative; z-index: 1; font-size: 18px; }
.start-countdown.urgent > span { font-size: clamp(96px, 31vw, 140px); color: var(--coral); }
.start-countdown.urgent > .countdown-number { font-size: clamp(96px, 31vw, 140px); color: var(--coral); }
.time-card .my-char { display: block; background-color: #f6f3ec; border-radius: 16px; flex: none; }
.av.crew-result { width: 160px; height: 160px; border-radius: 24px; margin: 0 auto; }
.av.crew-share { width: 40px; height: 40px; border-radius: 10px; }
.pic .mascot { position: absolute; z-index: 2; left: 12%; bottom: -7%; width: 76%; aspect-ratio: 1; background-repeat: no-repeat; pointer-events: none; }
.pic[data-st="focus"] .mascot { animation: breathe 3.6s ease-in-out infinite; }
.pic[data-st="ready"] .mascot { animation: sway 5s ease-in-out infinite; }
.pic[data-st="break"] .mascot { animation: breathe 5.5s ease-in-out infinite; }
.pic[data-st="offline"] .mascot, .pic[data-st="checking"] .mascot { filter: saturate(.45) brightness(1.05); }
.together-break .pic[data-st="break"] .mascot, .together-break .pic.me-pic .mascot { animation: stretch 1.4s ease-in-out 2; transform-origin: 50% 90%; }
.ritual-saved { margin-top: 10px; text-align: center; font-size: 20px; font-weight: 800; color: var(--teal); background: #e7f3f2; }
.ritual-notices { display: grid; gap: 8px; margin-top: 10px; text-align: left; }
.ritual-notice-more { padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ritual-notice-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--teal); }
.ritual-notice-more .stack { margin-top: 8px; }
.seat.sit-start { animation: seat-start .58s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--sit-order) * 150ms); }
@keyframes seat-start { 0% { transform: translateY(-8px); filter: brightness(.88); } 58% { transform: translateY(2px); box-shadow: 0 0 0 4px #79c8b8; } 100% { transform: translateY(0); box-shadow: 0 0 0 2px #79c8b8; } }
@media (prefers-reduced-motion: reduce) { .seat.sit-start { animation: none; box-shadow: 0 0 0 2px #79c8b8; } }
/* 첫 사용: 몇 시에 공부해요? */
.whengrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whengrid button { display: grid; gap: 3px; text-align: left; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); border: 2px solid transparent; }
.whengrid button b { font-size: 17px; color: var(--ink); }
.whengrid button span { font-size: 12px; color: var(--muted); }
.whengrid button.now { grid-column: 1 / -1; background: #e7f3f2; border-color: var(--teal); }
.whengrid.sm button { padding: 10px 12px; box-shadow: none; border: 1.5px solid var(--line); }
.whengrid.sm button b { font-size: 15px; }
/* 홈: 작은 버튼 넷 */
.quickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quickgrid button { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-weight: 700; font-size: 14px; color: var(--ink); text-align: left; }
.quickgrid button svg { color: var(--teal); flex: none; }
/* 작심삼일러 장치 */
.banner.celebrate { background: linear-gradient(90deg, #fff1d6, #ffe4ef); color: #7a4b00; justify-content: center; font-weight: 700; margin-top: 8px; animation: pop .5s ease; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
/* 응원 스티커 */
.results .r { flex-wrap: wrap; }
.stk { display: flex; gap: 4px; margin-left: auto; }
.stkb { width: 32px; height: 32px; border-radius: 10px; background: var(--gray-bg); font-size: 16px; display: grid; place-items: center; }
.stkb.on { background: #e7f3f2; box-shadow: 0 0 0 2px var(--teal) inset; }
/* 정원 카드 */
.sharecard { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; border-radius: 22px; background: linear-gradient(170deg, #f4fbef 0%, #fffaf0 60%, #fff 100%); box-shadow: inset 0 0 0 1px #e6ecd9; text-align: center; }
.sharecard .sc-top { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .5px; }
.sharecard .sc-name { font-size: 20px; font-weight: 900; color: var(--ink); }
.sharecard .sc-big { font-size: 15px; color: var(--ink-2); }
.sharecard .sc-big b { font-size: 34px; color: var(--teal); margin: 0 2px; }
.sharecard .sc-garden { font-size: 22px; letter-spacing: 2px; }
.sharecard .sc-sub { font-size: 12.5px; color: var(--muted); }
.sharecard .sc-foot { font-size: 12px; color: var(--ink-2); font-weight: 700; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .banner.celebrate { animation: none; } }
/* ───── 살아 있는 캐릭터: 눈 깜빡임·두리번, 공부 중 손동작 ───── */
.av { position: relative; overflow: hidden; }
.av .aeye { position: absolute; transform: translate(-50%, -50%); }
.av .aeye b { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--bc); scale: 1 0; transform-origin: 50% 0; animation: lid 5.2s var(--d) infinite; }
@keyframes lid { 0%, 92%, 100% { scale: 1 0; } 95% { scale: 1 1.05; } }
.pic .face, .pic .act { position: absolute; inset: 0; pointer-events: none; transform-origin: 55% 60%; }
.pic[data-st="focus"] .face { animation: breathe 3.6s ease-in-out infinite; }
.pic[data-st="ready"] .face { animation: sway 5s ease-in-out infinite; }
.pic[data-st="break"] .face { animation: breathe 5.5s ease-in-out infinite; }
.together-break .pic .face { animation: stretch 1.4s ease-in-out 2; }
.pic .face .eye { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bc); box-shadow: 0 0 2px 1.5px var(--bc); display: grid; place-items: center; }
.pic .face .eye b { display: block; width: 56%; height: 74%; border-radius: 50%; background: #161616; animation: blink 4.6s var(--d) infinite, look 9s ease-in-out var(--d) infinite; }
.pic[data-st="focus"] .face .eye b { animation: blink 4.6s var(--d) infinite, lookdown 7s ease-in-out var(--d) infinite; }
.pic[data-st="offline"] .face .eye b, .pic[data-st="skip"] .face .eye b { scale: 1 .14; translate: 0 22%; animation: none; }
.pic[data-st="done"] .face .eye b { animation: blink 3.2s var(--d) infinite; }
@keyframes blink { 0%, 91%, 100% { scale: 1 1; } 94% { scale: 1 .08; } 97% { scale: 1 1; } }
@keyframes look { 0%, 28%, 100% { translate: 0 0; } 36%, 50% { translate: -22% -4%; } 60%, 76% { translate: 22% -4%; } 84% { translate: 0 0; } }
@keyframes lookdown { 0%, 100% { translate: 0 16%; } 45% { translate: 10% 22%; } 70% { translate: -6% 18%; } }
.pic.gone .face, .pic.gone .act { opacity: 0; transition: opacity .6s; }
.pic.me-pic.cam .face, .pic.me-pic.cam .act { scale: 1.12; translate: var(--fx, 0) var(--fy, 0); rotate: var(--fr, 0deg); transition: translate .3s ease, rotate .3s ease, opacity .6s; }
/* 하는 일은 공부 중일 때만 */
.pic .act > * { position: absolute; opacity: 0; transition: opacity .5s; }
.pic[data-st="focus"] .act > * { opacity: 1; }
.pic .act img { inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
/* 민트: 연필로 필기 */
.act-write .hand { clip-path: inset(57% 51% 14% 35%); transform-origin: 41% 84%; animation: scrib 1s ease-in-out infinite; }
@keyframes scrib { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(.8%, -.5%) rotate(-3deg); } 50% { transform: translate(1.8%, 0) rotate(1.5deg); } 75% { transform: translate(.9%, .5%) rotate(-2deg); } }
.act-write .scribble { left: 63%; top: 76%; width: 23%; height: 10%; overflow: visible; }
.act-write .scribble path { fill: none; stroke: #5d6168; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 7.5s linear infinite; }
.act-write .scribble path:nth-child(2) { animation-delay: 2.2s; }
.act-write .scribble path:nth-child(3) { animation-delay: 4.4s; }
@keyframes draw { 0% { stroke-dashoffset: 40; opacity: 1; } 28% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* 라벤더: 책장 넘기기 */
.act-read { perspective: 260px; }
.act-read .page { left: 51.5%; top: 58.5%; width: 24%; height: 4.5%; background: linear-gradient(#fffdf6, #efe7d3); border-radius: 1px 7px 0 0; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .12); transform-origin: 0 100%; animation: flip 5.5s ease-in-out var(--d) infinite; }
.act-read .page.p2 { animation-delay: calc(var(--d) - 2.75s); }
.pic:not([data-st="focus"]) .act * { animation: none !important; opacity: 0 !important; }
@keyframes flip { 0%, 40% { transform: rotateY(0); opacity: 0; } 46% { opacity: 1; } 78% { transform: rotateY(-178deg); opacity: 1; } 86%, 100% { transform: rotateY(-180deg); opacity: 0; } }
/* 코랄: 머그 한 모금과 김 */
.act-sip .mug { clip-path: inset(60% 40% 6% 37%); transform-origin: 48% 95%; animation: sip 6.5s ease-in-out var(--d) infinite; }
@keyframes sip { 0%, 64%, 100% { transform: translate(0, 0) rotate(0); } 72%, 82% { transform: translate(0, -4%) rotate(-5deg); } }
.act-sip .steam { left: 45%; top: 53%; width: 10%; height: 9%; }
.act-sip .steam i { position: absolute; bottom: 0; width: 2px; height: 60%; border-radius: 3px; background: rgba(255, 255, 255, .9); animation: steam 2.6s ease-out infinite; }
@keyframes steam { 0% { transform: translateY(30%) scaleY(.5); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-60%) scaleY(1); opacity: 0; } }
.act-sip .steam i:nth-child(1) { left: 20%; } .act-sip .steam i:nth-child(2) { left: 48%; animation-delay: .9s; } .act-sip .steam i:nth-child(3) { left: 76%; animation-delay: 1.8s; }
/* 새싹: 노트북 타자 */
.act-type .typing { left: 64%; top: 76%; display: flex; gap: 2.5px; padding: 3px 5px; background: rgba(255, 255, 255, .95); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.act-type .typing i { width: 4px; height: 4px; border-radius: 50%; background: #7a8a5a; animation: tap 1.1s ease-in-out infinite; }
.act-type .typing i:nth-child(2) { animation-delay: .15s; } .act-type .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tap { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.act-type .glow { left: 28%; top: 38%; width: 48%; height: 42%; background: radial-gradient(rgba(200, 235, 255, .45), transparent 70%); animation: glow 2.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .pic .face, .pic .face *, .pic .act *, .av .aeye b { animation: none !important; } }

/* D057: 대화 상태, D059: 잠금 화면 미리 보기 */
.tagm.chat, .tagm.chat-off { font-size: 10px; line-height: 1.35; white-space: normal; }
.quiet-room-note { color: var(--muted); padding: 12px; text-align: center; }
.lock-entry { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--ink); text-align: left; }
.lock-entry-icon { color: var(--teal); flex: none; }
.lock-entry .grow { min-width: 0; }
.lock-entry small { display: block; margin-top: 3px; color: var(--muted); }
.lock-checklist { padding: 4px 14px; }
.lock-setting { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.lock-setting:last-child { border-bottom: 0; }
.lock-setting .grow { display: grid; gap: 3px; min-width: 0; }
.lock-setting small { color: var(--muted); }
.lock-setting .link { flex: none; }
.lock-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e7f3e9; color: var(--green); font-weight: 900; }
.lock-phone { display: grid; align-content: start; gap: 4px; min-height: 280px; padding: 22px 18px; overflow: hidden; border: 6px solid #26333c; border-radius: 34px; color: #fff; text-align: center; background: linear-gradient(155deg, #637d92, #203947 72%); box-shadow: 0 12px 26px rgba(15, 45, 52, .2); }
.lock-phone.android { border-color: #75838b; border-radius: 22px; background: linear-gradient(155deg, #546a78, #17242d 72%); }
.lock-phone-date { font-size: 13px; opacity: .88; }
.lock-phone-clock { margin: 2px 0 14px; font-size: 52px; line-height: 1; font-weight: 300; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.lock-widget { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 22px; background: rgba(245, 249, 250, .18); text-align: left; backdrop-filter: blur(10px); }
.lock-phone.android .lock-widget { border: 0; border-radius: 12px; background: rgba(20, 31, 40, .82); }
.lock-widget-head, .lock-widget-time { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lock-widget-head b { font-size: 14px; }
.lock-widget-head span, .lock-widget-time span { font-size: 11px; opacity: .82; }
.lock-widget-time b { font-size: 22px; font-variant-numeric: tabular-nums; }
.lock-widget-status { font-size: 13px; font-weight: 700; }
.lock-widget-neighbors { font-size: 12px; opacity: .9; }
.lock-preview-devices { display: flex; flex-wrap: wrap; gap: 8px; }
.lock-preview-note { margin: 0; }
.lock-ready { justify-content: center; }
@media (max-width: 380px) { .lock-phone { min-height: 260px; padding: 18px 14px; } .lock-phone-clock { font-size: 46px; } }