/* 디자인 A: 포근한 크림·파스텔. 색은 캐릭터 그림(크림·민트·갈색)에서 가져왔다. */
:root {
  --bg: #FFF8EE; --card: #FFFDF9; --beige: #FBEFDD; --line: #F0E2CC;
  --ink: #5B4636; --muted: #9B8672;
  --primary: #D9685C; --primary-soft: #FBDDD7; --mint: #CFE6D6; --mint-d: #5E9E7E; --butter: #F7E3A8; --paw: #F2A7A0;
  --warn: #D9685C; --none: #E6D8C2;
  --hero: linear-gradient(135deg, #E3F1E7 0%, #FFF1DC 100%);
  --shadow: 0 6px 18px rgba(120, 85, 50, .10);
  --title: "Jua", -apple-system, "Apple SD Gothic Neo", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #2a2420; --card: #352d28; --beige: #3d342d; --line: #4a3f37; --ink: #f3e9dc; --muted: #b5a392;
          --primary: #ef8b80; --primary-soft: #4d3531; --mint: #3a4a40; --mint-d: #7fbf9c; --butter: #6b5b2e; --paw: #e79a92; --none: #4f443b;
          --hero: linear-gradient(135deg, #34443a 0%, #3d342d 100%); --shadow: 0 6px 18px rgba(0, 0, 0, .3); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: -apple-system, "Apple SD Gothic Neo", Pretendard, sans-serif;
       font-size: 16px; line-height: 1.5; padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
#app { max-width: 1180px; margin: 0 auto; padding: 8px 16px 110px; }
h1, h2, .title { font-family: var(--title); font-weight: 400; }
h1 { font-size: 24px; margin: 18px 0 8px; }
h2 { font-size: 19px; margin: 22px 0 8px; }
.muted { color: var(--muted); font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; margin: 12px 0; box-shadow: var(--shadow); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.btn { background: var(--primary); color: #fff; border: 0; border-radius: 14px; padding: 10px 18px; font-weight: 700; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.small { padding: 6px 12px; font-size: 14px; border-radius: 12px; }
.btn.danger { background: transparent; color: var(--warn); border: 1px solid var(--line); }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
textarea { min-height: 70px; }
label.f { display: block; margin: 10px 0 4px; font-size: 14px; color: var(--muted); }

/* 하단 탭: 떠 있는 알약 모양 */
.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 24px));
        background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); display: flex; padding: 4px; z-index: 5; }
.tabs button { flex: 1; background: none; border: 0; padding: 8px 4px 6px; color: var(--muted); font-size: 12px; position: relative; border-radius: 20px; }
.tabs button .ic { display: block; font-size: 22px; line-height: 1.2; }
.tabs button.on { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.badge { position: absolute; top: 2px; right: calc(50% - 24px); background: var(--primary); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; }

/* 홈 배치: 세로 화면은 위에서 아래로, 가로 화면은 달력 | (유우시 + 오늘 할 일) 2단 */
.home { display: grid; gap: 4px; grid-template-areas: "hero" "cal" "day"; }
.h-hero { grid-area: hero; } .h-cal { grid-area: cal; } .h-day { grid-area: day; }
@media (min-width: 900px) and (orientation: landscape) {
  .home { grid-template-columns: 1.35fr 1fr; grid-template-areas: "cal hero" "cal day"; gap: 8px 22px; align-items: start; }
  .h-hero { position: sticky; top: 8px; }
}

/* 히어로: 유우시 크게 + 말풍선 + 진행 바 */
.hero { display: flex; align-items: flex-end; gap: 6px; background: var(--hero); border-radius: 26px; padding: 14px 18px 14px 6px; margin: 12px 0 8px; min-height: 190px; box-shadow: var(--shadow); }
.hero .av { width: 190px; height: 230px; flex: none; margin: -46px -6px -14px 0; display: grid; place-items: end center; font-size: 70px; }
.hero .av img, .dachi .av img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.say { flex: 1; min-width: 0; padding-bottom: 6px; }
.bubble { background: var(--card); border-radius: 18px 18px 18px 6px; padding: 12px 14px; font-size: 16px; box-shadow: var(--shadow); }
.bubble b { color: var(--primary); font-family: var(--title); font-weight: 400; font-size: 17px; }
.prog { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.prog .bar { flex: 1; height: 12px; background: rgba(255, 255, 255, .7); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--paw), var(--primary)); border-radius: 8px; transition: width .5s ease; }
.prog span { font-family: var(--title); font-size: 15px; white-space: nowrap; }

/* 달력 카드 + 모서리에 앉은 다찌 */
.calcard { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 14px 14px 16px; margin-top: 84px; box-shadow: var(--shadow); }
.dachi { position: absolute; right: 18px; top: -98px; width: 112px; height: 112px; pointer-events: none; }
.dachi .av { display: block; width: 100%; height: 100%; font-size: 56px; }
.dachi.hop { animation: hop .6s ease 2; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-4deg); } 70% { transform: translateY(-4px) rotate(3deg); } }
.cal-head { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; flex-wrap: wrap; }
.cal-head .title { font-size: 21px; flex: 1; text-align: center; min-width: 130px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 6px 12px; color: var(--muted); }
.seg button.on { background: var(--primary); color: #fff; }
.pawcount { display: inline-flex; align-items: center; gap: 4px; font-family: var(--title); font-size: 15px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; padding: 3px 10px; }
.pawcount .paw { width: 16px; height: 16px; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dow { text-align: center; color: var(--muted); font-size: 13px; padding: 4px 0; }
.cell { background: var(--bg); border: 1px solid transparent; border-radius: 16px; min-height: 78px; padding: 6px 7px; text-align: left; position: relative; overflow: hidden; }
.cell.out { opacity: .38; }
.cell.sel { border-color: var(--primary); background: var(--primary-soft); }
.cell .n { font-size: 14px; font-weight: 600; display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; }
.cell.today .n { background: var(--primary); color: #fff; }
.cell .sun { color: #d46a6a; }
.dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--none); }
.dot.done { background: var(--mint-d); }
.cell .cnt { font-size: 11px; color: var(--muted); margin-top: 3px; }
.cell.some { background: color-mix(in srgb, var(--butter) 35%, var(--bg)); }
.stamp { position: absolute; right: 5px; bottom: 4px; width: 38px; height: 38px; color: var(--paw); opacity: .95; animation: stampin .35s ease both; }
.paw { width: 100%; height: 100%; fill: currentColor; display: block; }
@keyframes stampin { from { transform: scale(2) rotate(-20deg); opacity: 0; } to { opacity: .95; } }
.week { display: grid; gap: 8px; }
.wday { background: var(--bg); border-radius: 16px; padding: 10px 12px; }
.wday.today { outline: 2px solid var(--primary); }

/* 할 일 */
.task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.task:last-child { border-bottom: 0; }
.chk { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--mint-d); background: var(--card); flex: none; display: grid; place-items: center; color: #fff; padding: 0; font-size: 18px; }
.chk.done { background: var(--mint-d); animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.task .t { flex: 1; min-width: 0; }
.task.done .t { color: var(--muted); text-decoration: line-through; }
.tag { font-size: 12px; background: var(--beige); border-radius: 8px; padding: 1px 7px; color: var(--muted); }
.x { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 4px 8px; }
.daytitle { font-family: var(--title); font-size: 20px; margin: 2px 0 6px; }

/* 설정·계획 화면 */
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 5px 10px; font-size: 14px; }
.chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.item { border: 1px solid var(--line); border-radius: 16px; padding: 10px; margin: 8px 0; background: var(--bg); }
.msg { padding: 12px 14px; margin: 8px 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.msg.new { border-color: var(--primary); }
.msg .from { font-size: 13px; color: var(--primary); }
.login { max-width: 380px; margin: 14vh auto 0; }
.err { color: var(--warn); margin: 8px 0; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 14px; z-index: 9; font-size: 14px; }
.stat { display: flex; gap: 10px; }
.stat > div { flex: 1; background: var(--beige); border-radius: 18px; padding: 12px; text-align: center; }
.stat b { font-family: var(--title); font-weight: 400; font-size: 26px; display: block; }
.stamps { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.stamps button { background: var(--beige); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; font-size: 15px; }
@media (max-width: 560px) {
  .hero { min-height: 150px; } .hero .av { width: 130px; height: 170px; margin: -30px -6px -10px 0; }
  .cell { min-height: 60px; padding: 4px; } .cell .cnt { display: none; } .stamp { width: 28px; height: 28px; }
  .dachi { width: 84px; height: 84px; top: -72px; } .calcard { margin-top: 62px; }
}

/* 주 보기: 타임블록 (공부 시간대만 보여 준다. 색은 민트 한 계열 + 오늘만 코랄) */
.tb { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 0 4px; }
.tb-h { background: none; border: 0; border-radius: 14px; padding: 4px 0 6px; display: grid; justify-items: center; gap: 0; color: var(--muted); }
.tb-h .dw { font-size: 12px; } .tb-h .dw.sun { color: #d46a6a; }
.tb-h .dn { font-family: var(--title); font-size: 19px; color: var(--ink); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.tb-h.today .dn { background: var(--primary); color: #fff; }
.tb-h.sel { background: var(--primary-soft); }
.tb-h .ds { font-size: 11px; height: 16px; display: grid; place-items: center; }
.tb-h .ds .paw { width: 15px; height: 15px; color: var(--paw); }
.tb-free { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; min-height: 6px; }
.chipf { font-size: 11px; background: var(--beige); color: var(--muted); border-radius: 8px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipf.done { text-decoration: line-through; opacity: .6; }
.tb-axis { position: relative; font-size: 11px; color: var(--muted); }
.tb-axis span { position: absolute; right: 2px; transform: translateY(-7px); }
.tb-col { position: relative; border-radius: 14px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(78px - 1px), var(--line) calc(78px - 1px), var(--line) 78px); background-color: var(--bg); overflow: hidden; }
.tb-col.past { opacity: .72; }
.tb-col.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.band { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--mint) 38%, transparent); }
.fix { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--none) 0 6px, transparent 6px 12px); opacity: .55; display: block; }
.fix em { font-style: normal; font-size: 10px; color: var(--muted); padding: 2px 4px; display: block; }
.blk { position: absolute; border: 0; border-radius: 10px; background: var(--mint); color: var(--ink); text-align: left; padding: 3px 5px; overflow: hidden; font-size: 11px; line-height: 1.25; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.blk .bt { color: var(--muted); font-size: 10px; }
.blk .bn { font-weight: 600; overflow: hidden; }
.blk.tod { background: color-mix(in srgb, var(--primary-soft) 80%, var(--mint)); border-left: 4px solid var(--primary); }
.blk.done { background: var(--beige); opacity: .8; }
.blk.done .bn { font-weight: 400; }
.blk .bp { position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; color: var(--paw); }
.now { position: absolute; left: 0; right: 0; height: 2px; background: var(--primary); z-index: 2; }
.now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
@media (max-width: 560px) { .tb { grid-template-columns: 26px repeat(7, minmax(0, 1fr)); gap: 0 2px; } .blk .bt { display: none; } .tb-h .dn { width: 28px; height: 28px; font-size: 16px; } }

/* 할 일 줄: 시각 수정, ▶ 시작 */
input.tm { width: 128px; padding: 5px 6px; font-size: 14px; border-radius: 10px; flex: none; }
input.tm.empty { color: var(--muted); }
.play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 14px; flex: none; padding: 0 0 0 2px; }
.btn.start { margin-top: 12px; width: 100%; padding: 12px 18px; font-size: 17px; font-family: var(--title); font-weight: 400; box-shadow: 0 4px 12px rgba(217, 104, 92, .35); }

/* 집중(뽀모도로) 화면 */
#focus { position: fixed; inset: 0; z-index: 30; background: linear-gradient(180deg, #FFF8EE 0%, #E9F4EC 100%); display: flex; flex-direction: column; align-items: center; justify-content: center;
         padding: max(70px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
@media (prefers-color-scheme: dark) { #focus { background: linear-gradient(180deg, #2a2420 0%, #263029 100%); } }
.f-top { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.f-x { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 18px; color: var(--muted); }
.f-chip { background: var(--butter); border-radius: 12px; padding: 3px 12px; font-size: 14px; }
.f-title { font-family: var(--title); font-size: 30px; text-align: center; margin-top: 4px; }
.f-sub { color: var(--muted); margin-top: 2px; text-align: center; }
.f-ring { position: relative; width: min(66vw, 300px); aspect-ratio: 1; margin: 22px 0 8px; }
.f-ring svg { width: 100%; height: 100%; }
.f-ring .trk { fill: none; stroke: color-mix(in srgb, var(--mint) 55%, var(--card)); stroke-width: 22; }
.f-ring .arc { fill: none; stroke: var(--primary); stroke-width: 22; stroke-linecap: round; transition: stroke-dasharray .25s linear; }
.f-ring.break .arc { stroke: var(--mint-d); }
.f-center { position: absolute; inset: 15%; border-radius: 50%; background: var(--beige); display: grid; place-items: center; overflow: hidden; }
.f-center .av { width: 92%; height: 92%; display: grid; place-items: center; font-size: 60px; }
.f-center .av img { width: 100%; height: 100%; object-fit: contain; }
.f-time { font-family: var(--title); font-size: 56px; letter-spacing: 1px; line-height: 1.1; }
.f-ctl { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.f-ctl.col { flex-direction: column; width: min(100%, 360px); margin-top: 20px; }
.fbtn { border: 0; border-radius: 28px; padding: 14px 22px; font-size: 17px; font-weight: 700; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fbtn.pill { background: var(--ink); color: var(--bg); min-width: 160px; }
.fbtn.ok { background: var(--primary); color: #fff; border-color: var(--primary); }
.fbtn.ghost { background: transparent; box-shadow: none; }
.f-ctl.col .fbtn { width: 100%; }
.f-say { display: flex; align-items: flex-end; gap: 6px; margin-top: 24px; max-width: 480px; }
.f-say .av { width: 170px; height: 210px; flex: none; display: grid; place-items: end center; font-size: 70px; }
.f-say .av img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.f-say .bubble { margin-bottom: 40px; }
.f-yushi { position: fixed; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: 120px; height: 150px; pointer-events: none; opacity: .95; }
.f-yushi .av { width: 100%; height: 100%; display: grid; place-items: end center; font-size: 56px; }
.f-yushi .av img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
@media (max-width: 560px) { .f-yushi { display: none; } .f-time { font-size: 48px; } }

/* 기록 탭 */
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0; }
.stats3 > div { background: var(--beige); border-radius: 18px; padding: 12px 8px; text-align: center; font-size: 13px; color: var(--muted); }
.stats3 > div b { display: block; font-family: var(--title); font-weight: 400; font-size: 30px; color: var(--ink); line-height: 1.2; }
.stats3.big .st { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 10px 12px; text-align: center; box-shadow: var(--shadow); display: block; font-size: 13px; color: var(--muted); }
.st .si { font-size: 24px; } .st b { display: block; font-family: var(--title); font-weight: 400; font-size: 26px; color: var(--ink); line-height: 1.2; margin: 2px 0; }
.st .bar { height: 8px; background: var(--beige); border-radius: 6px; overflow: hidden; margin: 8px 6px 4px; } .st .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--paw), var(--primary)); border-radius: 6px; }
.st small { font-size: 12px; }
.journey { background: var(--hero); }
.jsvg { width: 100%; height: auto; display: block; overflow: visible; }
.jt { fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 16; }
.jd { fill: none; stroke: var(--primary); stroke-width: 10; stroke-linecap: round; }
.jw { fill: var(--card); stroke: var(--line); stroke-width: 4; } .jw.on { fill: var(--mint-d); stroke: var(--mint-d); }
.jp { stroke: var(--ink); stroke-width: 3; fill: none; } .jf { fill: var(--primary); }
.wk .title small { font-family: -apple-system, sans-serif; font-size: 13px; }
.wkm { background: var(--hero); margin-top: 10px; }
.wkm .av { width: 120px; height: 120px; margin: -14px -10px; } .wkm .av:last-child { width: 96px; height: 96px; margin: -6px -4px; }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 12px; }
.tcard { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; border: 1px solid var(--line); background: var(--beige); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; padding: 8px 6px; }
.tcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard:not(.got) img { filter: brightness(0) opacity(.12); }
.tcard .ph { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--title); font-size: 40px; color: var(--paw); } .tcard .ph .paw { width: 46px; height: 46px; }
.tcard.noimg .ph { display: grid; } .tcard.noimg img { display: none; }
.tcard b { position: relative; font-family: var(--title); font-weight: 400; font-size: 15px; background: color-mix(in srgb, var(--card) 85%, transparent); border-radius: 10px; padding: 2px 6px; }
.tcard small { position: relative; font-size: 11px; color: var(--muted); margin-top: 3px; }
.tcard.got { border-color: var(--paw); box-shadow: var(--shadow); }
.tcard.big { width: min(60vw, 260px); margin: 8px auto; animation: cardin .6s ease both; }
@keyframes cardin { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
#cardpop { position: fixed; inset: 0; z-index: 40; background: rgba(60, 40, 25, .55); display: grid; place-items: center; padding: 20px; }
.pop { background: var(--card); border-radius: 28px; padding: 22px 22px 20px; width: min(100%, 380px); text-align: center; box-shadow: var(--shadow); }
.pop-h { font-family: var(--title); font-size: 24px; color: var(--primary); } .pop-m { margin: 6px 0 14px; }
@media (max-width: 560px) { .stats3 > div b, .st b { font-size: 22px; } }

/* 말풍선 줄(주간 카드 등) 공통 */
.mascots { display: flex; align-items: center; gap: 8px; background: var(--hero); border-radius: 22px; padding: 8px 14px; min-height: 100px; }
.av { display: grid; place-items: center; font-size: 48px; flex: none; }
.av img { width: 100%; height: 100%; object-fit: contain; }
.wkm .av { width: 130px; height: 130px; margin: -6px -8px; } .wkm .av:last-child { width: 104px; height: 104px; }
.wkm .bubble { flex: 1; }

/* 같이 계획 짜기(대화) */
.chatlog { background: var(--beige); border-radius: 22px; padding: 12px; margin: 12px 0; max-height: 46vh; min-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cm { display: flex; gap: 6px; align-items: flex-end; }
.cm.me { justify-content: flex-end; }
.cm .av { width: 54px; height: 66px; flex: none; margin: 0 -4px -4px 0; font-size: 36px; }
.cm .bubble { max-width: 78%; font-size: 15px; border-radius: 16px 16px 16px 4px; }
.cm .bubble.mine { background: var(--primary); color: #fff; border-radius: 16px 16px 4px 16px; }
.typing { color: var(--muted); animation: blink 1.2s ease infinite; } @keyframes blink { 50% { opacity: .45; } }
.prop { background: var(--hero); }
.pday { margin-top: 10px; } .pday > b { font-family: var(--title); font-weight: 400; font-size: 17px; }
.pit { padding: 6px 0; border-bottom: 1px dashed var(--line); } .pit:last-child { border-bottom: 0; }
.tag.warn { background: var(--butter); }

/* 밀린 일 알림 카드 · 시트(진행 확인·재배치) */
.card.alert { background: color-mix(in srgb, var(--butter) 40%, var(--card)); border-color: var(--butter); }
#modal { position: fixed; inset: 0; z-index: 35; background: rgba(60, 40, 25, .5); display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--card); width: min(100%, 560px); max-height: 88vh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
@media (min-width: 700px) { #modal { align-items: center; } .sheet { border-radius: 26px; } }
.crow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.cbtn { display: flex; gap: 6px; }
.cbtn button { border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 7px 10px; font-size: 14px; }
.cbtn button.on.done { background: var(--mint-d); color: #fff; border-color: var(--mint-d); }
.cbtn button.on.partial { background: var(--butter); border-color: var(--butter); }
.cbtn button.on.miss { background: var(--primary-soft); border-color: var(--primary); }
.opt { display: block; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 8px 0; }
.opt b { display: block; font-family: var(--title); font-weight: 400; font-size: 17px; } .opt span { color: var(--muted); font-size: 14px; }
.review.hl { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* 계획 대화: 미리보기 */
.cwrap { display: grid; grid-template-columns: 1fr; grid-template-areas: "log" "prop" "form"; gap: 0 16px; }
.cwrap .chatlog { grid-area: log; } .cprop { grid-area: prop; } .cform { grid-area: form; margin-top: 8px; }
@media (min-width: 1000px) { .cwrap { grid-template-columns: minmax(300px, 4fr) 7fr; grid-template-areas: "log prop" "form prop"; align-items: start; } .cwrap .chatlog { max-height: 58vh; } .cprop { margin-top: 12px; } }
.pvwrap { overflow-x: auto; margin: 8px 0 4px; }
.blk.ghost { background: var(--primary-soft); border: 1.5px dashed var(--primary); box-shadow: none; }
.pvnote { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pvdot { width: 14px; height: 10px; border: 1.5px dashed var(--primary); border-radius: 4px; display: inline-block; background: var(--primary-soft); }
.plist { margin: 8px 0; } .plist summary { cursor: pointer; color: var(--muted); font-size: 14px; }

.cwrap { grid-template-areas: "left" "prop"; } .cleft { grid-area: left; } .cleft .cform { margin-top: 8px; }
@media (min-width: 1000px) { .cwrap { grid-template-areas: "left prop"; } .cleft { position: sticky; top: 8px; } .cwrap .chatlog { max-height: 52vh; } }