:root{
  --font-ui:'Pretendard','Pretendard Variable','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --font-hand:'Gowun Dodum','Pretendard','Apple SD Gothic Neo',sans-serif;
  --font-brand:'Jua','Pretendard',sans-serif;
  /* H1 라군 & 히비스커스 (팬톤 근사값) */
  --bg:#F0EEE9;--surface:#FFFFFF;
  --ink:#1D2B36;--sub:#6B7680;--faint:#A6A39C;--line:#E2DED6;
  --hero:#4DB6AC;--hero-ink:#0E3B37;
  --pray:#D8365F;--pray-soft:#FBEBEF;
  --devo:#00539C;--solid:#00539C;--soft:#E3F3F1;
  --dock-h:66px;
  font-family:var(--font-ui);color:var(--ink);background:var(--bg);font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;scroll-behavior:smooth}
body{font-size:14px;line-height:1.4;background:var(--bg)}
button,input,select,textarea{font:inherit;min-width:0;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--hero);outline-offset:2px}
.hand{font-family:var(--font-hand)}
.app{max-width:470px;min-height:100dvh;margin:auto;padding:0 16px calc(var(--dock-h) + 20px)}

/* 헤더: 브랜드 + 날짜 */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 0 6px;position:sticky;top:0;z-index:40;background:var(--bg)}
.brand{display:flex;align-items:center;gap:5px;white-space:nowrap}
.brand-name{font-family:var(--font-brand);font-size:23px;line-height:1;color:var(--hero-ink);letter-spacing:-.2px}
.brand-flower{font-size:19px;line-height:1}
.headright{display:flex;align-items:center;gap:6px;flex-shrink:0}
.zonechip{border:0;background:none;height:28px;padding:0 2px;font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.datecontrol{display:flex;align-items:center;height:28px}
.datecontrol>button{border:0;background:transparent;font-size:17px;width:24px;height:28px;padding:0;color:var(--sub)}
.datebox{position:relative;display:flex;align-items:center;justify-content:center;min-width:56px;height:28px}
.datebox span{font-size:13px;font-weight:800;white-space:nowrap}
.datebox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.datecontrol>.todaychip{white-space:nowrap;flex-shrink:0;border:0;background:var(--hero-ink);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:2px 8px;margin:0 2px;width:auto;height:auto}
.page-title{font-size:21px;font-weight:800;letter-spacing:-.8px;margin:6px 0 12px}

/* 섹션: 박스 없이 여백과 가는 선으로 구분 */
.card{background:none;border:0;border-radius:0;padding:0;margin:0 0 24px}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 6px;min-height:28px}
.sectionhead h2{margin:0;font-size:15px;font-weight:800;letter-spacing:-.4px}
.sectionhead .right{display:flex;align-items:center;gap:2px}
.mini-btn{border:0;background:none;border-radius:8px;min-width:30px;height:30px;padding:0 6px;font-size:15px;font-weight:700;color:var(--sub);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.mini-btn.on{color:var(--pray)}
.mini-btn.solid{background:var(--solid);color:#fff}
.small{font-size:12px;color:var(--sub)}
.micro{font-size:11px;color:var(--sub)}
.row{display:flex;align-items:center;gap:6px}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.pill{color:var(--hero-ink);font-size:12px;font-weight:700;white-space:nowrap}
.outline{border:1px solid var(--line);background:none;padding:6px 12px;border-radius:10px;font-weight:700;font-size:13px}
.solid{background:var(--solid);color:#fff;border:0;padding:8px 14px;border-radius:10px;font-weight:700;font-size:14px}
.field{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:8px 10px;outline:0}
.field:focus{border-color:var(--hero)}
.field::placeholder{color:var(--faint)}
textarea.field{resize:vertical;min-height:84px}
.label{font-size:12px;font-weight:700;margin:6px 0 4px;display:block;color:var(--sub)}
.hidden{display:none!important}
.dash{color:var(--faint)}
.miniicon{border:1px solid var(--line);border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:none;color:var(--faint);font-size:10px;padding:0;flex:0 0 18px}
.info-wrap{position:relative;display:inline-flex;align-items:center}
.iconbtn{border:0;background:none;border-radius:8px;min-width:30px;height:30px;font-size:14px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub)}
.iconbtn.on{background:var(--pray-soft);color:var(--pray)}
.meta-r{font-size:12px;color:var(--sub);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mchip{display:inline-block;border-radius:6px;padding:0 7px;font-size:12px;font-weight:700;line-height:20px;color:var(--ink);white-space:nowrap}

/* 오늘 */
.day-signature{display:flex;align-items:center;gap:6px;margin:0 0 12px}
.emoji-pick{font-size:20px;background:none;border:0;width:30px;height:32px;flex-shrink:0;padding:0;color:var(--faint)}
.headline-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--line)}
.headline-wrap:focus-within{border-bottom-color:var(--hero)}
#dayHeadline{flex:1;min-width:0;background:none;border:0;font-family:var(--font-hand);font-size:15px;padding:7px 2px;outline:0}
#dayHeadline.suggest::placeholder{color:#8F8B84}
.hero{position:relative;overflow:hidden;background:var(--hero);color:var(--hero-ink);padding:13px 15px 15px;border-radius:16px;box-shadow:0 8px 20px #4db6ac33}
.hero-line{display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
.hero-line+.hero-line{margin-top:5px}
.hero .lbl{font-size:12px;opacity:.7;flex-shrink:0}
.hero-title{font-size:18px;font-weight:800;letter-spacing:-.5px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hero-meta{font-size:12px;font-weight:600;flex-shrink:0}
.hero-next{font-size:13px;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.hero-left{font-size:12px;font-weight:700;flex-shrink:0}
.hero-progress{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#0E3B3714}
.hero-progress i{height:100%;background:var(--hero-ink);display:block;width:0;opacity:.5}
.pins{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pin{background:#F7EEC8;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin b{color:#B8901A;margin-right:3px}
.pin.done{text-decoration:line-through;color:var(--faint);background:#EEEAE0}
#page-today .hero+.pins+.card,#page-today .hero+.card{margin-top:22px}
#page-today .pins+.card{margin-top:22px}
.quicktask{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid var(--line);min-height:42px}
.quicktask:last-child{border:0}
.task-check{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;flex:0 0 44px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:50%}.task-check img{display:block;width:29px;height:29px;object-fit:contain}.task-check.completed img{width:30px;height:30px}.task-check:focus-visible{outline:2px solid var(--wave);outline-offset:1px}
.task-title{font-weight:600;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-title.done{text-decoration:line-through;color:var(--faint)}
.task-meta{font-size:11px;color:var(--sub);white-space:nowrap;flex-shrink:0}
.task-meta.overdue{color:var(--pray)}
.mini{border:0;background:var(--pray-soft);color:var(--pray);border-radius:999px;font-size:11px;font-weight:700;padding:0 8px;height:22px;flex-shrink:0}
.pinbtn{display:inline-grid;place-items:center;border:0;background:none;width:28px;height:30px;color:#CFCBC2;padding:0;flex-shrink:0}
.pinbtn img{display:block;width:24px;height:24px;object-fit:contain}

/* 타임라인: 계획 44% | 기록 56% */
.tl-card{padding:0}
.ck-strip{display:flex;gap:14px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.ck{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;height:24px;min-width:0}
.ck b{font-size:12px;color:var(--sub);font-weight:700}
.event-timeline{position:relative;margin-top:14px}
.timeline-hours{position:absolute;inset:0 auto 0 0;width:30px;pointer-events:none}
.timeline-hours div{position:absolute;left:0;transform:translateY(-7px);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.time-grid{position:absolute;inset:0 0 0 30px}
.time-grid span{position:absolute;left:0;right:0;border-top:1px solid #E6E2DA}
.lane-divider{position:absolute;top:0;bottom:0;border-left:1px dashed #D8D3C9;pointer-events:none}
.lane-head{position:absolute;top:-15px;font-size:10px;color:var(--faint);pointer-events:none}
.eventblock{position:absolute;z-index:3;border-radius:9px;padding:3px 8px;overflow:hidden;border-left:3px solid;cursor:pointer;isolation:isolate}
.eventblock .event-progress{position:absolute;z-index:-1;inset:0 auto 0 0;opacity:.22;pointer-events:none}
.eventblock .ebline{display:flex;align-items:center;gap:4px;min-width:0}
.eventblock .eventtitle{flex:1;min-width:0;font-size:12px;font-weight:800;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eventblock .eventtitle .t{font-weight:600;opacity:.75}
.eventblock .eventsub{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.eventblock .eb-r{display:flex;align-items:center;gap:3px;font-size:11px;flex-shrink:0}
.eventblock.short{display:flex;align-items:center;padding:0 8px}
.eventblock.short .ebline{width:100%}
.eventblock.short .eventtitle{font-size:11px;line-height:1.1}
.eventblock.past{opacity:.45}
.eventblock.blue{background:#DCE6F3;color:#2F5E97;border-color:#4F84C4}
.eventblock.orange{background:#F9E7E1;color:#9C4F35;border-color:#E2876B}
.eventblock.purple{background:#EEEBF4;color:#5E4E8A;border-color:#A99BC9}
.eventblock.coral{background:#FBEBEF;color:#A4486A;border-color:#E99AB0}
.eventblock.green{background:#F1F6DC;color:#5B6E1F;border-color:#B4C85A}
.eventblock.gray{background:#E6E5E3;color:#5E5A60;border-color:#8E8A8F}
.nowline{height:2px;background:var(--pray);position:absolute;left:26px;right:0;z-index:6;pointer-events:none;opacity:.8}
.nowline:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pray);position:absolute;left:0;top:-3px}
.rec{position:absolute;z-index:5;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;line-height:18px}
.rec .ph{color:var(--sub);font-weight:700;font-size:11px;flex-shrink:0}
.rec.memo{color:var(--sub);font-family:var(--font-hand)}
.rec.sess{font-weight:700}
.rec.sess.prayer{color:var(--pray)}
.rec.sess.devotion{color:var(--devo)}
.rec .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sess-bar{position:absolute;width:4px;border-radius:2px;z-index:4}
.sess-bar.prayer{background:var(--pray)}
.sess-bar.devotion{background:var(--devo)}

/* 밑줄 탭 (아침·점심·저녁 / 집중·묵상·기도 / 달력·이번 주·전체 흐름 / 일정·할 일) */
.phases,.kindseg,.viewseg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--line);margin:0 0 16px}
.phases button,.kindseg button,.viewseg button,.subtabs button{border:0;border-bottom:2px solid transparent;background:none;padding:0 4px;color:var(--faint);font-weight:700;font-size:13px;height:36px;margin-bottom:-1px}
.phases button.active,.kindseg button.active,.viewseg button.active,.subtabs button.active{color:var(--ink);border-bottom-color:var(--hero-ink)}
.subtabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin:0 0 16px}

/* 체크인 */
.mood-banner{display:flex;align-items:center;gap:8px;margin:0 0 8px;min-height:24px;font-size:13px}
.mood-banner .scores{color:var(--sub);font-size:12px}
.mood-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin:6px 2px 0}
.mood-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.mood{height:40px;border:0;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:-.3px}
.mood.selected{box-shadow:inset 0 0 0 2px var(--ink)}
.note-title{font-size:15px;font-weight:800;margin:0}
.lec-ref{font-size:12px;color:#2F5E97;margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#checkNote,#eventMemo{font-family:var(--font-hand);font-size:15px;line-height:1.55;margin-top:8px}
.check-state{font-size:13px;color:var(--faint);font-weight:700}
.check-state.ok{color:var(--hero-ink)}
.prayer-today{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prayer-today .t{flex:1;min-width:0;font-family:var(--font-hand);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 기도제목 */
.prayer-add{display:flex;gap:6px;margin-bottom:6px}
.prayer-add input{font-family:var(--font-hand);font-size:15px;padding:6px 10px;height:36px}
.prayer-add .mini-btn.solid{height:36px!important;min-width:36px;border-radius:10px}
.prayer-item{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding:4px 0;min-height:42px}
.prayer-item:last-child{border-bottom:0}
.prayer-title{flex:1;min-width:0;font-family:var(--font-hand);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prayer-item .buttons{display:flex;gap:0;flex-shrink:0}
.prayer-item.is-answered .prayer-title{color:var(--sub)}
details.answered summary,details.more summary{font-size:13px;font-weight:700;color:var(--pray);padding:8px 0 4px;cursor:pointer}
details.more summary{color:var(--solid)}

/* 기도 탭 */
.segment{display:flex;gap:4px;justify-content:center;align-items:center;margin:14px 0 0}
.segment button{border:0;background:none;border-radius:999px;padding:0 10px;height:30px;white-space:nowrap;color:var(--sub);font-size:13px;font-weight:700}
.segment button.active{background:var(--hero-ink);color:#fff}
.timer{font-variant-numeric:tabular-nums;text-align:center;letter-spacing:-3px;font-size:60px;font-weight:800;margin:10px 0 10px;line-height:1.1}
.timer-row{display:flex;gap:10px;justify-content:center;align-items:center}
.timer-row .solid{min-width:72px;height:44px;font-size:17px;border-radius:999px}
.timer-row .outline{border:0;color:var(--sub);font-size:15px;height:44px}
.record-item{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:4px 0;min-height:40px;font-size:14px}
.record-item:last-child{border-bottom:0}
.record-item .buttons{display:flex;gap:0;flex-shrink:0}

/* 일정 탭 */
.stack{display:grid;gap:8px}
.compactrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.weekdayselect{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.weekdayselect label{text-align:center;border-radius:8px;background:var(--surface);border:1px solid var(--line);padding:6px 0;font-size:12px;cursor:pointer}
.weekdayselect label:has(input:checked){background:var(--hero-ink);color:#fff;border-color:var(--hero-ink)}
.weekdayselect input{position:absolute;opacity:0;width:1px;height:1px}

/* 일정 목록 + 입력 시트 */
.mini-btn.add{color:var(--hero-ink);font-size:20px}
.record-item.tap{cursor:pointer}
.record-item .cat-bar{width:3px;align-self:stretch;border-radius:2px;margin:6px 0;flex-shrink:0}
.record-item .time{font-size:13px;font-weight:700;color:var(--sub);width:42px;flex-shrink:0;font-variant-numeric:tabular-nums}
.record-item .sub{display:block;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.form-sheet .top{margin-bottom:2px}
.title-input{width:100%;border:0;border-bottom:1px solid var(--line);background:none;font-size:19px;font-weight:800;letter-spacing:-.4px;padding:8px 2px 10px;outline:0}
.title-input:focus{border-bottom-color:var(--hero)}
.title-input::placeholder{color:var(--faint);font-weight:700}
.frow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.frow.col{flex-direction:column;align-items:stretch;gap:9px}
.flabel{font-size:13px;font-weight:700;color:var(--sub);flex-shrink:0}
.pair{display:flex;align-items:center;gap:6px}
.pair .sep{color:var(--faint)}
.pill-input{border:0;background:var(--surface);border-radius:10px;height:36px;padding:0 10px;font-size:14px;font-weight:600;color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
.pill-input:focus{box-shadow:inset 0 0 0 1.5px var(--hero)}
.pill-input::-webkit-calendar-picker-indicator{opacity:.35}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;background:var(--surface);border-radius:999px;padding:0 12px;height:32px;font-size:13px;font-weight:700;color:var(--sub);display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.chip.active{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hero-ink)}
.form-sheet .weekdayselect{display:flex;gap:6px;justify-content:space-between;margin-top:2px}
.form-sheet .weekdayselect label{width:36px;height:36px;border-radius:50%;border:0;background:var(--surface);display:flex;align-items:center;justify-content:center;padding:0;font-size:13px;font-weight:700;color:var(--sub)}
.form-sheet .weekdayselect label:has(input:checked){background:var(--hero-ink);color:#fff}
.solid.wide{width:100%;height:46px;border-radius:12px;margin-top:16px;font-size:15px}

/* 돌아보기 */
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.calendar-toolbar strong{font-size:14px}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.calendar .weekday{text-align:center;font-size:11px;font-weight:700;color:var(--faint);padding:2px 0 4px}
.calendar .weekday:nth-child(7){color:var(--pray)}
.daycell{min-height:60px;background:none;border:0;border-radius:10px;padding:4px 4px;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;text-align:left}
.daycell.dim{opacity:.35}
.daycell.active{box-shadow:inset 0 0 0 2px var(--ink)}
.daycell.dv .num{text-decoration:underline;text-decoration-color:var(--pray);text-decoration-thickness:2px;text-underline-offset:2px}
.daycell .top{display:flex;align-items:center;justify-content:space-between;gap:1px;min-height:15px}
.daycell .num{font-size:12px;font-weight:800}
.daycell .rb{font-size:10px;line-height:1}
.daycell .emoji{font-size:15px;line-height:17px;height:17px}
.daycell .caption{font-size:9px;line-height:11px;color:#4E5A63;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
.auto{opacity:.55}
.pixels{display:grid;grid-auto-flow:column;gap:3px}
.pix-day{font-size:9px;color:var(--faint);line-height:1;display:flex;align-items:center}
.px{border-radius:4px;background:#E6E2DA;border:0;padding:0;width:100%;height:100%}
.px.future,.px.out{background:transparent}
.px.dv{box-shadow:inset 0 -2px 0 var(--pray)}
.px.sel{box-shadow:inset 0 0 0 1.5px var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--sub);margin-top:10px}
.legend span{display:flex;align-items:center;gap:4px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.mini-date{border:1px solid var(--line);border-radius:8px;font-size:12px;padding:2px 6px;background:var(--surface);max-width:130px;height:28px}
.chart-legend{display:flex;gap:12px;font-size:12px;color:var(--sub);margin-bottom:4px}
.chart-legend span{display:flex;align-items:center;gap:4px}
.chart-legend i{width:12px;height:3px;border-radius:3px;display:inline-block}
.chart{width:100%;height:140px;display:block}
.chart text{font-size:10px;fill:var(--faint)}
.toggle{display:flex;gap:2px}
.toggle button{border:0;background:none;font-size:12px;font-weight:700;color:var(--faint);padding:0 8px;height:26px;border-radius:999px}
.toggle button.active{background:var(--hero-ink);color:#fff}
.inf-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px;min-height:38px}
.inf-row:last-child{border-bottom:0}
.inf-row b{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inf-row .n{font-size:11px;color:var(--faint);white-space:nowrap}
.up{color:#1F7A6F;font-weight:700;white-space:nowrap}
.down{color:var(--pray);font-weight:700;white-space:nowrap}
.flat{color:var(--sub);white-space:nowrap}
.stat-grid{display:flex;flex-wrap:wrap;gap:4px 16px;margin:2px 0 10px}
.stat{font-size:12px;color:var(--sub);white-space:nowrap}
.stat b{font-size:15px;color:var(--ink);font-weight:800;margin-right:3px}
.weekrow{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px;min-height:40px}
.weekrow:last-child{border:0}
.weekrow .d{font-weight:700;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.weekrow .h{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-hand);font-size:14px}

/* 시트·모달 */
.emoji-sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.emoji-heading{grid-column:1/-1;font-size:12px;font-weight:800;color:var(--sub);padding:8px 2px 2px}
.emoji-sheet button{background:none;border:0;border-radius:10px;min-height:46px;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;padding:3px 1px}
.emoji-sheet button span{font-size:20px}
.emoji-sheet button small{font-size:10px;color:var(--sub)}
.modal-under{position:fixed;inset:0;background:#0E3B3759;z-index:90;display:flex;align-items:end;justify-content:center}
.modal-under[hidden]{display:none}
.sheet{background:var(--bg);border-radius:20px 20px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));width:min(100%,470px);max-height:86dvh;overflow:auto}
.sheet .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.sheet .top strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.close{border:0;background:none;border-radius:8px;width:30px;height:30px;font-size:20px;padding:0;flex-shrink:0;color:var(--sub)}
.choice{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 2px;margin:0}
.choice:last-child{border-bottom:0}
.choice b{font-size:15px}
.choice small{font-size:12px;color:var(--sub);text-align:right}
.choice.danger b{color:var(--pray)}
.choice.active b{color:var(--hero-ink)}
.choice.active b:after{content:" ✓"}
.ov-box{border-top:1px solid var(--line);padding:10px 0 0;margin-top:10px}
.modal-actions{display:flex;gap:8px;margin-top:12px}

/* 하단: 오늘 기도 + 탭 */
.dock{position:fixed;z-index:50;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,470px);background:var(--bg);box-shadow:0 -6px 20px #1d2b360f}
.pstrip{display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--pray-soft);height:38px}
.pstrip[hidden]{display:none}
.pstrip .plabel{font-size:15px;flex-shrink:0}
.pstrip .ptitle{flex:1;min-width:0;border:0;background:none;text-align:left;font-family:var(--font-hand);font-size:15px;color:#5A1E33;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstrip .pbtn{border:0;background:none;color:var(--pray);border-radius:999px;font-size:14px;font-weight:700;width:30px;height:30px;padding:0;flex-shrink:0}
.pstrip .pbtn.on{background:var(--pray);color:#fff}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:2px}
.tabs button{height:46px;padding:2px 1px;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--faint);font-size:10px;font-weight:700}
.tabs .navico{font-size:18px;line-height:22px;filter:grayscale(1);opacity:.55}
.tabs button.active{color:var(--hero-ink)}
.tabs button.active .navico{filter:none;opacity:1}

.page{display:none}
.page.active{display:block}
.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 10px);transform:translateX(-50%);max-width:90%;background:var(--hero-ink);color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;z-index:100;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}
.toast.show{opacity:1}
.footer-note{color:var(--faint);font-size:11px;padding:4px;text-align:center;margin:0}

@media(min-width:471px){body{background:#E2DFD8}.app{background:var(--bg);box-shadow:0 4px 30px #1d2b361a}}
@media(max-width:375px){
  .app{padding-left:12px;padding-right:12px}
  .brand-name{font-size:20px}
  .brand-flower{font-size:16px}
  .datebox{min-width:50px}
  .zonechip{font-size:11px}
  .mood{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ═══════════════════════════════════════════════════════
   예라밍 Mobile · visual refresh (v6.3)
   Design: calm editorial / crisp interactive surfaces
   Gmarket Sans only on brand; all functional logic preserved.
   ═══════════════════════════════════════════════════════ */
:root {
  --font-brand:'Gmarket Sans', 'Pretendard', system-ui, sans-serif;
  --bg:#F7F8F5;
  --surface:#FFFFFF;
  --ink:#20332F;
  --sub:#6A7B75;
  --faint:#64776D;
  --line:#E4EAE4;
  --hero:#DFEFE8;
  --hero-ink:#1D6155;
  --pray:#C65F79;
  --pray-soft:#F9EDF0;
  --devo:#386FA8;
  --solid:#246C61;
  --soft:#E6F3EE;
  --radius-s:10px;
  --radius-m:14px;
}
html, body{background:var(--bg);scrollbar-color:#D7E4DE transparent}
body{font-family:var(--font-ui);font-size:14px;line-height:1.45;-webkit-tap-highlight-color:transparent}
.app{padding:0 14px calc(var(--dock-h) + 34px);max-width:470px}
/* header: cohesive single row and anchored date */
.pagehead{
  padding:5px 0 6px;margin-bottom:5px;
  border-bottom:1px solid var(--line);
  background:rgba(247,248,245,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.brand{gap:6px}
.brand-name{font-family:var(--font-brand);font-size:21px;font-weight:700;letter-spacing:-.75px;line-height:1.15;color:#1E584D;font-synthesis:weight}
.brand-flower{font-size:15px;filter:saturate(.76);transform:translateY(-1px)}
.headright{gap:3px}
.zonechip{font-size:11px;font-weight:600;color:var(--sub);height:35px;padding:0 2px;letter-spacing:-.2px}
.datecontrol{height:36px;gap:1px}
.datecontrol>button{width:26px;height:36px;border-radius:9px;font-size:20px;color:var(--sub)}
.datecontrol>button:active,.mini-btn:active{background:var(--soft)}
.datebox{height:36px;min-width:59px}
.datebox span{font-size:13px;font-weight:700;color:var(--ink)}
.datecontrol>.todaychip{background:var(--hero-ink);font-size:11px;padding:5px 7px;border-radius:8px;color:white}
.page-title{position:absolute;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;overflow:hidden;margin:-1px;padding:0;border:0}
/* section rhythm: clean whitespace, thin hierarchy */
.card{margin:0 0 6px;padding:0;border:0;border-radius:0;background:transparent}
.sectionhead{min-height:31px;margin:0 0 7px;gap:9px}
.sectionhead h2{font-size:15px;letter-spacing:-.25px;font-weight:700;color:var(--ink)}
.sectionhead .right{gap:2px}
.label{font-size:12px;font-weight:600;color:var(--sub);margin:8px 0 4px}
.small{font-size:12px;color:var(--sub)}
.micro{font-size:11px;line-height:1.5}
.mini-btn{min-width:36px;height:36px;padding:0 8px;border-radius:10px;font-size:16px;color:var(--hero-ink);font-weight:650}
.mini-btn.add{font-size:24px}
.iconbtn{min-width:38px;height:40px;color:#9CADA4;font-size:19px}
.miniicon{width:22px;height:22px;flex:0 0 22px;border-radius:50%;color:#778D83;border-color:#CEDBD3;font-weight:700;font-size:11px}
.field{background:#fff;border-color:#DDE6DF;border-radius:12px;padding:11px 12px;font-size:14px}
.field:focus{border-color:var(--solid);box-shadow:0 0 0 2px #307f7130}
.outline{border-color:#D2DED6;border-radius:11px;background:#fff;font-weight:650}
.solid{background:var(--solid);border-radius:11px;font-weight:700;box-shadow:none}
.solid:active{filter:brightness(.94)}
/* today: a small journaling strip plus hero */
.day-signature{background:#fff;border:1px solid var(--line);border-radius:11px;padding:0 6px;margin:0 0 5px;gap:4px;min-height:36px}
.emoji-pick{font-size:20px;width:33px;height:38px;color:var(--solid)}
.headline-wrap{border-bottom:0}
.headline-wrap:focus-within{border-bottom:0}
#dayHeadline{font-size:14px;line-height:1.35;padding:7px 2px;color:var(--ink)}
#dayHeadline::placeholder{color:var(--faint)}
.hero{background:linear-gradient(119deg,#DDEFE8,#E9F5EE);border:1px solid #BADCCE;color:var(--hero-ink);padding:9px 12px 10px;border-radius:13px;box-shadow:none}
.hero-line{gap:7px;min-width:0}
.hero-line+.hero-line{margin-top:7px;padding-top:7px;border-top:1px solid #B8D9CE}
.hero .lbl{color:#5B877A;font-size:11px;opacity:1;font-weight:700;min-width:27px}
.hero-title{font-size:17px;line-height:1.25;font-weight:800;letter-spacing:-.45px}
.hero-meta{font-size:11px;font-weight:700;color:#416E62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-next{font-size:12px;font-weight:550;color:#477066}
.hero-left{font-size:11px;color:#5B8478}
.hero-progress{height:3px;background:#A8CFC4}
.hero-progress i{background:#3A8E7D;opacity:1}
.pins{gap:4px;margin:8px 0 0}
.pin{background:#FFF4DA;color:#74521E;font-weight:600;border-radius:9px;padding:4px 8px}
.pin b{color:#B88435}
#page-today .hero+.pins+.card,#page-today .hero+.card,#page-today .pins+.card{margin-top:15px}
.quicktask{padding:4px 0;min-height:42px;gap:7px}
.task-title{font-size:13px;font-weight:650}
.task-meta{font-size:11px}
.task-check{width:44px;height:44px;min-width:44px}
.pinbtn{min-width:28px;height:38px}
/* timeline in focused outline: two lanes with more useful text */
.tl-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 10px 12px;box-shadow:0 2px 9px #244d4006}
.tl-card .sectionhead{margin:0 0 8px}
.ck-strip{gap:4px;flex-wrap:nowrap;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 5px;padding:2px 3px;background:#F4F8F5;border:1px solid #E8EEE8;border-radius:10px}
.ck{height:34px;justify-content:center;gap:4px;border-radius:8px;padding:0 3px;min-width:0;overflow:hidden}
.ck.is-done{background:#fff}
.ck b{font-size:11px;color:var(--sub);font-weight:650}
.ck .mchip{font-size:10px;line-height:20px;padding:0 4px}
.event-timeline{margin-top:10px}
.time-grid span{border-color:#E9EEEA}
.timeline-hours div{font-size:10px;color:#93A29A}
.lane-divider{border-left-color:#E6ECE7}
.lane-head{top:-18px;font-size:11px;font-weight:700;color:#778B80;letter-spacing:0}
.eventblock{border-left-width:3px;border-radius:8px;padding:4px 6px;box-shadow:none}
.eventblock .eventtitle{font-size:12px;font-weight:700;line-height:1.25}
.eventblock:not(.short) .eventtitle .t{display:block;font-size:10px;font-weight:550;opacity:.82;letter-spacing:-.15px;margin-top:2px}
.eventblock .eventsub{font-size:10px;color:inherit;opacity:.78;margin-top:2px}
.eventblock .eb-r{position:absolute;right:3px;top:2px;font-size:10px;gap:2px}
.eventblock .eb-r .mchip{font-size:9px;line-height:16px;padding:0 3px}
.eventblock:not(.short) .ebline{padding-right:0}
.eventblock .eventtitle{padding-right:0}
.eventblock:not(.short):has(.eb-r) .eventtitle{padding-right:27px}
.eventblock.short{padding:0 5px;min-height:16px}
.eventblock.short .eventtitle{font-size:10px}
.eventblock.short .eventtitle .t{display:none}
.eventblock.short .eb-r{display:none}
.eventblock.past{opacity:.5}
.eventblock.blue{background:#E5EEF9;color:#355F91;border-color:#628EC2}
.eventblock.orange{background:#FCEEE8;color:#96563B;border-color:#DFA180}
.eventblock.purple{background:#F1EEF8;color:#68548B;border-color:#A497CA}
.eventblock.coral{background:#FDECF1;color:#A14D67;border-color:#D996AA}
.eventblock.green{background:#EFF5D9;color:#506523;border-color:#AAC269}
.eventblock.gray{background:#EDF0EF;color:#667771;border-color:#9BA9A2}
.nowline{height:1.5px;background:#CE6579;opacity:.74;z-index:2}
.nowline:before{background:#CE6579;width:7px;height:7px;top:-3px}
.rec{font-size:10px;line-height:16px;gap:2px;color:var(--sub)}
.rec .ph{font-size:10px}
.rec .mchip{font-size:10px;line-height:16px;padding:0 4px}
/* standardized small segmented navigation */
.phases,.kindseg,.viewseg,.subtabs{border:1px solid #E2EAE3;background:#EFF4F0;border-radius:12px;padding:3px;gap:3px;margin:0 0 15px}
.phases,.kindseg,.viewseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.subtabs{display:flex}
.phases button,.kindseg button,.viewseg button,.subtabs button{border:0;border-radius:9px;background:transparent;height:36px;padding:0 7px;margin:0;color:#64796C;font-size:12px;font-weight:650;white-space:nowrap}
.phases button.active,.kindseg button.active,.viewseg button.active,.subtabs button.active{color:var(--hero-ink);background:white;box-shadow:0 1px 4px #23463812;border:0}
.subtabs button{flex:1}
/* feelings as elegant chips, not heavy emoji */
.mood-banner{min-height:32px;margin:0 0 10px;gap:8px;font-weight:650}
.mood-banner .scores{font-size:11px}
.mood-grid{gap:4px}
.mood{height:43px;min-height:43px;border-radius:10px;border:1px solid rgba(31,61,52,.055);font-size:12px;font-weight:650;letter-spacing:-.3px;transition:box-shadow .12s,transform .12s}
.mood.selected{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px #fff;transform:translateY(-1px)}
.mood-axis{color:#82978B;margin:8px 1px 0;font-size:11px}
.note-title{font-size:15px;font-weight:700}
#checkNote,#eventMemo{font-family:var(--font-hand);font-size:14px;line-height:1.65;background:white;border:1px solid #DCE6DF;border-radius:12px;margin-top:7px}
#checkNote{min-height:118px}
.check-state{font-size:11px}
.lecture-ref{font-size:11px}
/* focus/timer */
#page-focus>.card:first-child{background:#fff;border:1px solid var(--line);border-radius:17px;padding:13px 12px 18px}
#page-focus .kindseg{margin-bottom:11px}
.segment{gap:4px;margin:12px 0 0;flex-wrap:nowrap}
.segment button{height:35px;padding:0 9px;border-radius:9px;background:#F2F5F2;font-size:12px}
.segment button.active{background:#E0F0EA;color:#206F5E;box-shadow:inset 0 0 0 1px #A8CDBE}
.timer{font-size:65px;letter-spacing:-2px;margin:13px 0 15px;color:var(--ink)}
.timer-row .solid{border-radius:14px;min-width:96px;height:46px;font-size:17px}
.timer-row .outline{font-size:13px}
.record-item{min-height:46px;padding:5px 0;font-size:13px;gap:8px}
/* schedule lists: white surface, clear affordances, no bulk form */
#page-schedule .record-item.tap{background:#fff;margin:0;border-bottom:1px solid #ECF0EA;padding:7px 9px;min-height:53px}
#page-schedule .record-item.tap:first-child{border-radius:12px 12px 0 0}
#page-schedule .record-item.tap:last-child{border-radius:0 0 12px 12px;border-bottom:0}
#page-schedule .record-item .time{width:44px;font-size:12px;color:#658174}
#page-schedule .record-item .sub{font-size:10px;color:#96A49B}
#page-schedule .record-item .cat-bar{width:3px;margin:5px 0;border-radius:3px}
#page-schedule .record-item .grow.ellip{font-size:13px}
/* bottom sheets: grouped rows and visible primary action */
.modal-under{background:#162F2A80;align-items:end;overscroll-behavior:contain}
.sheet{max-height:86dvh;padding:13px 15px calc(20px + env(safe-area-inset-bottom));background:#FBFCFA;border-radius:22px 22px 0 0;box-shadow:0 -8px 45px #102A2221;overscroll-behavior:contain}
.sheet .top{margin-bottom:6px;min-height:39px}
.sheet .top strong{font-size:17px;font-weight:800}
.close{width:38px;height:38px;border-radius:11px;font-size:22px}
.title-input{font-size:19px;font-weight:700;border-color:#CAD9D0;padding:11px 4px}
.frow{padding:10px 1px;min-height:52px;border-color:#E5EBE5;gap:8px}
.frow.col{gap:7px}
.flabel{font-size:12px;font-weight:650;color:var(--sub)}
.pill-input{background:#fff;border:1px solid #DDE7DE;border-radius:9px;height:40px;padding:0 9px;font-size:13px;font-weight:600;min-width:0}
.pair{gap:3px;min-width:0}
.pair .sep{font-size:12px}
.chips{gap:5px}
.chip{height:35px;border-radius:9px;background:white;border:1px solid #E0E8E1;padding:0 9px;font-size:12px;font-weight:650;color:#64756D}
.chip.active{background:#DDEFE7;color:#195D4D;box-shadow:inset 0 0 0 1px #6CAA96;border-color:#6CAA96}
.form-sheet .weekdayselect label{width:36px;height:36px;background:#fff;border:1px solid #E0E8E2}
.form-sheet .weekdayselect label:has(input:checked){background:var(--solid);color:#fff;border-color:var(--solid)}
.solid.wide{position:sticky;bottom:-1px;z-index:3;width:100%;height:47px;border-radius:12px;margin-top:12px;box-shadow:0 -9px 13px #FBFCFAE8}
/* records analytics: minimal editorial */
.calendar-toolbar{margin:0 0 9px;min-height:37px}
.calendar-toolbar strong{font-size:15px;font-weight:700}
.calendar{gap:3px}
.daycell{border-radius:8px;min-height:62px;border:1px solid #E6ECE6;background:#fff;padding:4px}
.daycell.dim{opacity:.48;background:transparent}
.daycell.active{box-shadow:inset 0 0 0 1.5px var(--solid)}
.daycell .caption{font-size:9px;line-height:11px}
.daycell .num{font-size:11px}
.daycell .emoji{font-size:14px}
.stat-grid{gap:8px;margin:5px 0 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{background:#fff;border:1px solid #E5ECE6;border-radius:10px;padding:9px 8px;white-space:normal;font-size:11px}
.stat b{font-size:17px;color:var(--hero-ink)}
.weekrow{min-height:42px}
.chart{height:152px;background:#fff;border:1px solid #E6ECE6;border-radius:12px;padding:6px}
.inf-row{min-height:40px}
#page-records>.card{margin-bottom:18px}
#page-records>.card:not([hidden]):last-child{padding-bottom:10px}
/* bottom dock: cohesive iconography, safe-area and thumb target */
.dock{width:calc(100% - 16px);max-width:454px;bottom:8px;border:1px solid #DBE5DD;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 8px 32px #223D3424;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tabs{padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:2px}
.tabs button{height:51px;color:#5A7064;border-radius:12px;gap:3px;font-size:10px;font-weight:650}
.tabs button.active{background:#E6F2ED;color:#1B6A58}
.tabs .navico{display:flex;align-items:center;justify-content:center;width:22px;height:22px;line-height:1;filter:none;opacity:1}
.tabs .navico svg{display:block;width:21px;height:21px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.tabs button.active .navico{opacity:1}
.pstrip{background:#FCF0F3;border-bottom:1px solid #F1DCE3;padding:0 9px;height:38px}
.pstrip .plabel{font-size:14px}
.pstrip .ptitle{font-size:13px;font-family:var(--font-ui);font-weight:650}
.pstrip .pbtn{width:34px;height:34px;font-size:16px}
.footer-note{font-size:10px;margin:0;padding:4px}
.toast{background:#1A5148;border-radius:12px;white-space:normal;text-align:center;max-width:90%}
/* mobile geometry */
@media(max-width:375px){
 .app{padding-left:11px;padding-right:11px}
 .brand-name{font-size:19px}
 .brand-flower{font-size:14px}
 .datebox{min-width:49px}
 .zonechip{font-size:10px}
 .mood{font-size:11px}
 .pill-input{font-size:12px;padding:0 6px}
 .sheet{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){.mood{transition:none}}


/* v6.4: three-perspective mobile UX / visual / accessibility audit */
:root{
 --bg:#F9FAF7;--ink:#1D332D;--sub:#526A5F;--faint:#687E73;--line:#DCE5DD;
 --hero:#E0F0E9;--hero-ink:#185F50;--solid:#176D5C;--pray:#B34967;
}
.app{padding-bottom:calc(var(--dock-h) + 23px)}
.pagehead{padding:12px 0 11px;margin-bottom:11px;background:rgba(249,250,247,.98)}
.brand-name{font-family:'Gmarket Sans',var(--font-ui);font-weight:700;font-size:21px;letter-spacing:-.85px;color:#175A4B}
.brand-flower{font-size:15px}
.sectionhead h2{font-size:15px;font-weight:700;color:var(--ink)}
/* Visually compact, but usable touch regions, particularly on Android */
.zonechip{min-height:40px}
.datecontrol{height:42px}
.datecontrol>button{height:42px;min-width:36px;width:36px}
.datebox{height:42px;min-width:62px}
.datecontrol>.todaychip{min-height:32px}
.mini-btn{min-height:42px;min-width:42px;height:42px}
.iconbtn{min-width:42px;height:44px;font-size:18px}
.close{width:44px;height:44px}
.miniicon{width:28px;height:28px;flex-basis:28px;font-size:12px}
button:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--solid);outline-offset:2px}
/* Improve hierarchy: fewer neighboring outlines, more legible labels */
.day-signature{min-height:44px;border-color:#E1E8E1;background:#fff}
.hero{background:#E2F1E9;border:1px solid #BDD9CC;box-shadow:none;color:#205E51}
.hero .lbl{color:#417A69;opacity:1}
.hero-meta{color:#365E52}
.hero-next,.hero-left{color:#47685B}
.sectionhead{margin-bottom:6px}
.card{margin-bottom:16px}
.tl-card{box-shadow:none;border-color:#DCE6DD;background:#fff;padding:10px 8px 12px}
.ck-strip{border:0;background:#F0F5F0;margin-bottom:14px;padding:4px 3px}
.ck{height:39px}
.ck b{font-size:12px;color:#526A5E}
.ck .mchip{font-size:11px}
.timeline-hours div{color:#647B6D;font-size:10px}
.lane-head{color:#526A5E;font-size:11px}
.eventblock{outline-offset:1px}
.eventblock .eventtitle{font-weight:700;font-size:12px}
.eventblock:not(.short) .eventtitle .t{font-size:11px;opacity:.9}
.eventblock .eventsub{font-size:10.5px;opacity:.9}
.eventblock.past{opacity:.58}
.rec{font-size:11px;line-height:17px}
.rec .ph{font-size:10.5px}
.rec .tx{font-size:11px}
/* Reduce competing decoration; make mood grid highly readable */
.phases button,.kindseg button,.viewseg button,.subtabs button{height:43px;font-size:13px}
.phases,.kindseg,.viewseg,.subtabs{background:#EDF3EE;border-color:#DFE9E0}
.mood-grid{gap:4px}
.mood{height:46px;min-height:46px;border-radius:8px;font-size:13px;letter-spacing:-.25px;font-weight:650}
.mood.selected{box-shadow:inset 0 0 0 2.5px #1A5249,0 0 0 2px white;transform:none}
.mood-banner{min-height:36px;margin-bottom:8px}
.mood-axis{color:#506F61;font-size:12px}
#checkNote,#eventMemo{font-size:15px;line-height:1.58}
/* Focus: clear target and action hierarchy */
.session-purpose{font-size:12px;font-weight:700;color:var(--sub);display:block;margin:0 1px 5px}
#page-focus>.card:first-child{padding:14px 12px 17px}
#page-focus #focusTarget{height:45px;font-size:14px}
.segment{gap:3px;flex-wrap:wrap}
.segment button{min-height:42px;height:42px;padding:0 10px;font-size:12px}
.segment .info-wrap .miniicon{min-width:38px;min-height:38px}
.timer{margin:13px 0 12px}
.timer-row .solid{min-width:112px;height:48px}
.prayer-item{gap:5px;min-height:49px;padding:3px 0}
.prayer-title{font-size:15px}
.prayer-item .meta-r{font-size:11px}
.prayer-item .buttons{gap:1px}
.prayer-add .mini-btn.solid{min-width:44px!important;height:44px!important}
.prayer-add input{height:44px}
/* Schedule edit: fit common workflow, avoid mixed weight and rounded chips */
#page-schedule .record-item.tap{min-height:53px}
#page-schedule .record-item .time{color:#3B6655;font-size:12px}
#page-schedule .record-item .sub{color:#596F62;font-size:11px}
.form-sheet .top{min-height:45px}
.frow{padding:9px 1px;min-height:56px}
.flabel{font-size:13px;font-weight:600;color:#4A6055}
.pill-input{height:44px;font-size:14px}
.chip{height:40px;min-height:40px;font-size:12px}
.form-sheet .weekdayselect label{width:39px;height:41px}
.solid.wide{height:51px;font-size:15px}
.sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom));max-height:calc(100dvh - 24px)}
.modal-under:has(.sheet){z-index:90}
/* Make records genuinely scannable; fewer tiny, low-contrast glyphs */
.calendar .weekday{font-size:11px;color:#526A5F}
.daycell{min-height:68px;border-color:#DDE6DD}
.daycell .num{font-size:12px}
.daycell .caption{font-size:10px;line-height:12px;color:#465B50}
.weekrow .h{font-family:var(--font-ui);font-size:13px}
.chart{height:157px}
.stat{font-size:12px}
/* Bottom bar: fixed controls never cover the final content */
.dock{bottom:0;width:min(100%,470px);max-width:470px;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -5px 22px #254c3720}
.tabs{padding:4px 7px calc(6px + env(safe-area-inset-bottom))}
.tabs button{height:54px;font-size:11px}
.pstrip{height:42px}
.pstrip .pbtn{width:42px;height:42px}
@media(max-width:375px){
 .brand-name{font-size:19px}
 .datecontrol>button{width:32px;min-width:32px}
 .datebox{min-width:52px}
 .zonechip{font-size:11px}
 .mood{font-size:12px}
 .form-sheet .weekdayselect label{width:36px}
 .segment button{padding:0 7px}
}


/* v6.5 – proportional visual size and touch geometry, user-reviewed */
:root{--ui-text:15px;--ui-min:13px}
body{font-size:15px;line-height:1.45}
/* Stronger visible controls, not merely invisible padding */
.pagehead{padding-top:10px;padding-bottom:10px}
.brand-name{font-size:22px;line-height:1.25}
.brand-flower{font-size:17px}
.zonechip{font-size:13px;min-height:44px}
.datecontrol{height:46px}
.datecontrol>button{height:46px;min-width:40px;width:40px;font-size:25px;font-weight:600}
.datebox{height:46px;min-width:65px}
.datebox span{font-size:14px}
.datecontrol>.todaychip{min-height:36px;font-size:12px}
.sectionhead h2{font-size:16px}
.label,.flabel,.session-purpose{font-size:14px}
.small{font-size:13px}.micro{font-size:12px}
.pill{font-size:13px}
/* 44x44 controls: symbols visibly 21–24px */
.mini-btn{min-height:44px;height:44px;min-width:44px;font-size:20px;line-height:1}
.mini-btn.add{font-size:27px}
.iconbtn{height:46px;min-width:46px;font-size:22px;line-height:1}
.close{height:46px;width:46px;font-size:26px}
.miniicon{height:44px;width:44px;flex-basis:44px;font-size:17px}
.emoji-pick{width:44px;height:44px;font-size:23px}
#dayHeadline{font-size:16px}
.hero .lbl{font-size:13px}
.hero-title{font-size:18px}
.hero-meta{font-size:12px}
.hero-next{font-size:14px}
.hero-left{font-size:12px}
.quicktask{min-height:54px;gap:8px}
.task-check{width:44px;height:44px;min-width:44px;flex:0 0 44px}
.task-title{font-size:15px;font-weight:650}
.task-meta{font-size:12px}
.pinbtn{min-width:44px;height:44px}
.pinbtn img{width:27px;height:27px}
.pin{font-size:13px}
/* Timeline remains proportional; detail stays accessible in a sheet */
.ck{height:44px;min-height:44px}
.ck b{font-size:13px}
.ck .mchip{font-size:12px;line-height:23px}
.lane-head{font-size:12px}
.timeline-hours div{font-size:11.5px}
.eventblock{padding:4px 6px}
.eventblock .eventtitle{font-size:13px;line-height:1.35}
.eventblock:not(.short) .eventtitle .t{font-size:11.5px}
.eventblock.short .eventtitle{font-size:12px}
.eventblock .eventsub{font-size:11.5px}
.rec{font-size:12px;line-height:19px}
.rec .tx{font-size:12px}
.rec .ph{font-size:12px}
/* Emotions: 25 equally-sized readable labels; whole cell is hit target */
.phases button,.kindseg button,.viewseg button,.subtabs button{min-height:48px;height:48px;font-size:15px}
.mood-grid{gap:5px}
.mood{height:49px;min-height:49px;font-size:14px;letter-spacing:-.2px;font-weight:650}
.mood-banner{font-size:15px}
.mood-banner .scores{font-size:13px}
.mood-axis{font-size:13px}
.note-title{font-size:16px}
#checkNote,#eventMemo{font-size:16px}
.check-state{font-size:14px}
.prayer-today{min-height:50px}
.prayer-today .t,.prayer-title{font-size:16px}
/* Focus and prayers: visible labels scale with their control */
#page-focus #focusTarget{min-height:48px;height:48px;font-size:15px}
.segment button{min-height:45px;height:45px;font-size:14px;padding:0 11px}
.segment .info-wrap .miniicon{min-width:44px;min-height:44px}
.timer-row .solid{height:53px;min-width:112px;font-size:22px}
.timer-row .outline{height:48px;font-size:16px}
.prayer-add input{height:48px;font-size:16px}
.prayer-add .mini-btn.solid{height:48px!important;min-width:48px!important;font-size:23px}
.prayer-item{min-height:56px}
.prayer-item .meta-r{font-size:12px}
.record-item{min-height:47px;font-size:14px}
/* New event/task sheets: robust information hierarchy, readable input */
#page-schedule .record-item.tap{min-height:58px}
#page-schedule .record-item .time{font-size:13px}
#page-schedule .record-item .sub{font-size:12px}
.frow{padding:9px 1px;min-height:61px}
.title-input{font-size:20px}
.pill-input{min-height:46px;height:46px;font-size:15px}
.chip{min-height:45px;height:45px;font-size:15px}
.form-sheet .weekdayselect label{height:44px;width:42px;font-size:14px}
.solid.wide{height:53px;font-size:16px}
.sheet .top strong{font-size:17px}
.choice{min-height:56px}
.choice b{font-size:16px}
.choice small{font-size:13px}
/* Review remains dense but text is readable */
.calendar .weekday{font-size:12px}
.daycell{min-height:72px}
.daycell .num{font-size:13px}
.daycell .caption{font-size:10.5px;line-height:12.5px}
.weekrow{min-height:47px;font-size:14px}
.weekrow .h{font-size:14px}
.stat{font-size:13px}
.stat b{font-size:16px}
.chart-legend{font-size:13px}
.toggle button{height:40px;min-width:43px;font-size:14px}
/* Bottom: icon and label size increase together with hit area */
.tabs{gap:3px;padding:4px 7px calc(6px + env(safe-area-inset-bottom))}
.tabs button{min-height:66px;height:66px;font-size:13px;font-weight:700;gap:4px}
.tabs .navico{width:27px;height:27px}
.tabs .navico svg{width:25px;height:25px;stroke-width:1.9}
.pstrip{height:48px}
.pstrip .plabel{font-size:22px}
.pstrip .ptitle{font-size:16px}
.pstrip .pbtn{height:45px;width:45px;font-size:22px}
/* Auto-sized bottom spacing is controlled by syncDock; no overlay on content */
@media(max-width:375px){
 .app{padding-left:11px;padding-right:11px}
 .brand-name{font-size:19.5px}
 .brand-flower{font-size:15px}
 .zonechip{font-size:11.5px}
 .datecontrol>button{min-width:32px;width:32px;font-size:22px}
 .datebox{min-width:53px}
 .datebox span{font-size:13px}
 .mini-btn{min-width:42px;height:44px}
 .mood{font-size:13px;height:48px;min-height:48px}
 .form-sheet .weekdayselect label{width:37px;height:44px}
 .segment button{font-size:13px;padding:0 8px}
 .tabs .navico svg{width:24px;height:24px}
}

/* v6.6: 기록 열은 최대 네 줄까지 표시. 시간축의 높이/위치는 그대로 유지. */
.rec{height:auto;align-items:flex-start;white-space:normal;overflow:hidden;text-overflow:clip;min-height:19px}
.rec.memo{display:flex;align-items:flex-start;gap:4px;line-height:18px}
.rec.memo .memo-symbol{flex:0 0 13px;font-size:13px;line-height:18px;color:#466F60}
.rec .tx.preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere;word-break:break-word;text-overflow:ellipsis;line-height:18px;flex:1;min-width:0}
.rec.rck{display:block;line-height:18px}
.rec.rck .rck-head{display:flex;gap:4px;align-items:center;white-space:nowrap;min-width:0}
.rec.rck .rck-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;white-space:pre-line;overflow-wrap:anywhere;word-break:break-word;line-height:18px;color:#52645F}
.rec.rck .mchip{max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.rec.sess{align-items:center;white-space:nowrap;height:19px}
.rec[data-open-record]{cursor:pointer;border-radius:5px}
.rec[data-open-record]:focus-visible{outline:2px solid var(--hero-ink);outline-offset:2px}


/* v6.7: 4 primary tabs, management opened from Today */
.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.manage-btn{background:transparent;border:1px solid #CACDC8;border-radius:10px;padding:0 10px;min-width:48px;min-height:44px;height:44px;color:var(--hero-ink);font-size:14px;font-weight:750;white-space:nowrap}
.manage-btn:focus-visible,.manage-back:focus-visible{outline:2px solid var(--hero-ink);outline-offset:2px}
.manage-head{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:-4px 0 6px}
.manage-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px 0 2px;border:0;background:transparent;color:var(--hero-ink);font-size:16px;font-weight:750}
.manage-caption{font-size:12px;color:var(--sub)}
#page-today .tl-card .sectionhead .right{gap:1px}
#page-today .tl-card .sectionhead .miniicon{width:40px;height:44px;flex-basis:40px}
/* Right-hand timeline writing: approximately 90% compact letter pitch */
.rec.memo .tx.preview,.rec.rck .rck-body{font-size:11.2px;letter-spacing:-.08em;line-height:18px;font-weight:450}
.rec.memo .memo-symbol{font-size:12px}
@media(max-width:375px){
  #page-today .tl-card .sectionhead h2{font-size:15px}
  #page-today .tl-card .sectionhead .miniicon{width:34px;flex-basis:34px}
  #page-today .tl-card .sectionhead .mini-btn{min-width:40px;padding:0 3px}
  #page-today .tl-card .sectionhead .manage-btn{padding:0 7px;min-width:45px}
  .manage-btn{font-size:13px}
}


/* Compact check-in: keep text and touch targets independent. */
#moodGrid{gap:4px}
#moodGrid .mood{height:40px;min-height:40px;font-size:12px;padding:0 2px}
#moodCard{padding:12px}
#moodCard .mood-banner{margin:4px 0 8px;font-size:13px}
#moodCard .mood-axis{margin-top:5px}
#checkNote,#eventMemo,#lectureNote{font-family:var(--font-hand);font-size:10pt;line-height:1.6;letter-spacing:0}
#lectureNote{margin-top:8px;min-height:110px}
#generalNoteCard,#lectureNoteCard,.lecture-link{scroll-margin-top:85px}
.phases button small{display:block;font-size:10px;font-weight:500;line-height:14px}
.lecture-links{display:grid;gap:5px}
.lecture-link{display:block;width:100%;padding:8px 10px;min-height:44px;text-align:left;white-space:pre-line;border:1px solid #DCE6DF;background:#F3F7F5;border-radius:9px;font-size:12px;line-height:1.5}
.record-time{display:block;color:#647B6D;font-size:10px;line-height:14px;font-variant-numeric:tabular-nums}
.rec.rck.pending{border:1px dashed #C6D8CE;padding:3px 5px;background:#F7FAF8}
.rec.rck.pending .rck-head{font-size:11px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.emoji-sheet button{min-height:44px;height:44px;padding:2px}.emoji-sheet button span{font-size:25px}

#emojiModal .sheet>.row{position:sticky;bottom:0;background:var(--surface);padding-top:8px;padding-bottom:8px}#useCustomEmoji{font-size:12px;white-space:nowrap;min-width:64px}

/* Lagoon, sand and hibiscus: compact journal theme */
:root{--bg:#F6F1E7;--ink:#243330;--solid:#146C65;--hero-ink:#146C65;--hero:#DCEFE8;--soft:#DCEFE8;--line:#DDDCD2;--pray:#A83F5D;--pray-soft:#FBECEF;--font-brand:var(--font-ui)}
.pagehead{background:rgba(246,241,231,.97)}
.brand-name{font-family:var(--font-ui);color:var(--solid)}
.hero{background:var(--hero);border-color:#BED8CE;color:var(--solid)}
.brand-flower{color:#D95D7B}
#checkNote,#eventMemo,#lectureNote,.prayer-title,.prayer-today .t,.prayer-add input,.rec.memo{font-family:var(--font-ui)}
.week-lecture{display:flex;align-items:center;gap:10px;margin:0 0 13px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:#fffdf8}
.week-lecture .summary{flex:1;min-width:0}.week-lecture small{display:block;color:var(--sub);font-size:11px}.week-lecture strong{display:block;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.lecture-action{display:flex;gap:6px;margin-top:9px}.lecture-action input{min-width:0;flex:1;font-size:13px}.lecture-action button{white-space:nowrap;font-size:12px}
.lecture-task-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.lecture-task-links button{font-size:12px;min-height:36px;color:var(--solid);background:var(--soft);border-radius:8px;padding:6px 9px}
/* Review calendar: one header row, three readable memo lines */
.daycell{height:72px;padding:4px 3px}
.daycell .top{justify-content:flex-start;gap:2px;min-height:18px;flex-shrink:0;margin-bottom:2px}
.daycell .emoji{margin-left:auto;font-size:14px;line-height:18px;height:18px;flex-shrink:0}
.daycell .rb{font-size:9px;flex-shrink:0}
.daycell .caption{-webkit-line-clamp:3;font-family:var(--font-ui);font-size:10.5px;line-height:12.5px;color:#465B50}
/* Softer lemon canvas and a quiet weekly lecture control */
:root{--bg:#FFFBE8;--line:#E4E4D6}
.pagehead{background:rgba(255,251,232,.97)}
.week-lecture{gap:6px;padding:7px 10px;background:#FFFEF8}
.week-lecture small{font-size:10px;line-height:14px}
.week-lecture strong{font-size:12px;line-height:17px;font-weight:600}
.week-lecture .week-edit{min-width:32px;width:32px;min-height:32px;height:32px;font-size:18px;padding:0;border:0;background:transparent;flex-shrink:0}
/* Quiet dividers and compact empty states */
.calendar{column-gap:3px;row-gap:0}
.daycell{margin-top:3px;border:0;border-top:1px solid var(--line);border-radius:3px}
.daycell.empty{background:transparent;border-radius:0}
.daycell.active{box-shadow:inset 0 0 0 1.5px var(--solid);border-radius:5px}
#viewSeg{margin-bottom:12px;padding:2px}
#viewSeg button{min-height:38px;height:38px}
#viewCal .calendar-toolbar{min-height:35px;margin-bottom:7px}
#viewCal .calendar-toolbar .mini-btn{min-height:35px;height:35px}
#viewCal .calendar-toolbar .miniicon{height:28px;min-height:28px;width:28px;min-width:28px}
.week-lecture{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:6px 2px 7px}
.eventblock .eventtitle .t,.eventblock:not(.short) .eventtitle .t,.eventblock .eventsub{font-weight:400;opacity:1}
.lane-divider{border-left-style:solid;border-left-color:#E4E8E4}
.chart-empty{font-size:12px;line-height:1.5;color:var(--sub);margin:4px 0 8px}

/* Cardless journal: typography, alignment and selective color carry hierarchy. */
:root{--bg:#FAF7F2;--line:#DEDCD5;--dock-h:76px}
html,body{background:var(--bg)}
.pagehead{background:var(--bg);border:0;box-shadow:none;padding:16px 0 10px;position:sticky}
.pagehead .brand{min-width:0;max-width:48%;gap:4px}.brand-name{border:0;background:none;padding:0;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px;cursor:text}
.headright{flex-shrink:0}.brand-flower{display:none}
.island-mark{width:30px;height:29px;flex-shrink:0;pointer-events:none}
.card,.tl-card,#moodCard,#page-focus>.card:first-child{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-bottom:20px}
.day-signature{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-bottom:12px}
.headline-wrap:focus-within{box-shadow:0 1px var(--solid)}
.hero{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 12px;color:var(--ink)}
.hero-title{font-size:20px}.hero .lbl{color:var(--solid);font-size:11px;min-width:27px}.hero-line+.hero-line{border:0;margin-top:5px;padding-top:0}
.hero-next{font-size:12px}.hero-meta,.hero-left{font-size:11px;font-weight:400}.hero-progress{background:#E7E5DC;border-radius:0;margin-top:7px;height:2px}
.week-lecture{background:none;border:0;border-radius:0;padding:0;margin:0 0 16px;box-shadow:none}
.sectionhead{margin-bottom:6px}.sectionhead h2{font-size:15px;letter-spacing:-.2px}
.manage-btn,.miniicon,.outline{border:0;background:none;box-shadow:none;border-radius:0}.manage-btn{font-size:12px;font-weight:600}.miniicon{font-size:13px}
.ck-strip{background:none;border:0;border-radius:0;padding:0;margin-bottom:10px}.ck,.ck.is-done{background:none;border-radius:0}.ck.is-done::after{content:'✓';color:var(--solid);font-size:11px}
.ck .mchip{background:none!important;padding:0}.ck b{font-size:12px}
.eventblock.blue,.eventblock.orange,.eventblock.purple,.eventblock.coral,.eventblock.green,.eventblock.gray{background:none;border-radius:0;border-left-width:2px;box-shadow:none}
.eventblock.is-current{background:#E6F0EA}.event-progress{display:none}.eventblock .eventtitle{font-size:12px}.eventblock .eventtitle .t{font-size:10.5px!important}.eventblock.past{opacity:.75}
.time-grid span{border-color:#E9E5DE}.lane-divider{display:none}
.rec.rck,.rec.rck.pending{background:none;border:0;box-shadow:none;border-radius:0;padding:0 2px}.rec.rck.pending .rck-head{color:var(--solid)}
.rec .mchip,.pin{background:none!important;border:0;border-radius:0;padding:0 3px}
.quicktask{min-height:46px}.quicktask+.quicktask{border-top:1px solid #E8E4DC}.task-check{width:44px;height:44px;min-width:44px}.task-title{font-size:14px}.task-meta{font-size:11px}
.phases,.kindseg,.viewseg,.subtabs,#viewSeg{background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:8px;margin-bottom:16px}
.phases button,.kindseg button,.viewseg button,.subtabs button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--sub);font-size:13px}
.phases button.active,.kindseg button.active,.viewseg button.active,.subtabs button.active{background:none;border:0;border-bottom:2px solid var(--solid);box-shadow:none;color:var(--solid)}
#moodGrid .mood{border:0;border-radius:3px;box-shadow:none}.mood.selected{outline:2px solid var(--solid);outline-offset:1px;box-shadow:none}.mood.selected::after{content:' ✓';font-size:10px}
.lecture-link{border:0;border-radius:0;background:none;padding:6px 0;min-height:44px;color:var(--ink)}.lecture-link::after{content:' ›';color:var(--solid)}.lecture-link+.lecture-link{border-top:1px solid #E8E4DC}
#checkNote,#eventMemo,#lectureNote{border:0;border-radius:0;box-shadow:none;background:#F0EEE8;padding:10px;font-size:10pt}
#checkNote:focus,#eventMemo:focus,#lectureNote:focus{outline:2px solid var(--solid);outline-offset:2px}
.lecture-action .field,.prayer-add .field{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.lecture-action .solid,.prayer-add .solid{background:none;color:var(--solid)}
.lecture-task-links button{background:none;border-radius:0;padding:4px 0;text-align:left}
#focusTarget{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}.segment button,.segment button.active,.toggle button,.toggle button.active{border:0;border-radius:0;box-shadow:none;background:none;color:var(--sub)}.segment button.active,.toggle button.active{color:var(--solid);text-decoration:underline;text-underline-offset:6px;font-weight:750}
.timer{font-weight:500}.timer-row .solid{border-radius:50%;height:54px;min-width:54px;width:54px;padding:0;font-size:19px}
.chart,.stat,.prayer-today{background:none;border:0;border-radius:0;box-shadow:none}.daycell{border:0;background:none;border-radius:0}.daycell.active{box-shadow:none}.daycell.active .num{color:var(--solid);text-decoration:underline;text-underline-offset:3px}
.dock{width:min(100%,470px);max-width:470px;bottom:0;border:0;border-radius:0;background:var(--bg);box-shadow:none;backdrop-filter:none;overflow:visible}
.tabs{background:none;padding-top:6px}.tabs button,.tabs button.active{background:none;border-radius:0}.tabs button{min-height:58px;height:58px;font-size:11px;color:#65756D}.tabs button.active{color:var(--solid)}.tabs button.active .navico{transform:translateY(-2px)}
.shore-art{display:block;width:100%;height:10px;pointer-events:none}.pstrip{border:0;border-radius:0;background:#EEEAE2}
.session-note-row{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 0;color:var(--ink)}
.session-note-row small{display:block;font-size:11px;color:var(--sub);margin-bottom:5px}.session-note-row p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}
.journal-controls{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}.journal-controls button{border:0;background:none;padding:8px 4px;font-size:13px}.journal-controls button.active{color:var(--solid);text-decoration:underline;text-underline-offset:5px}
#sessionMemo{width:100%;min-height:180px;border:0;border-radius:0;background:#F0EEE8;font-size:14px;line-height:1.65}.note-status{font-size:11px;color:var(--sub);margin:6px 0}
@media(max-width:375px){.brand-name{font-size:17px}.island-mark{width:24px}.pagehead .brand{max-width:43%}}

/* A 선택안 · 필요한 면은 남기고, 나머지는 색과 간격으로 묶습니다. */
@font-face{font-family:'Gmarket Sans';src:url('./assets/fonts/gmarket-inline-1.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gmarket Sans';src:url('./assets/fonts/gmarket-inline-2.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
:root{--bg:#FAF7F2;--surface:#FFFFFF;--ink:#243330;--sub:#68766F;--faint:#8A928C;--line:#E6E1D8;--solid:#286657;--hero-ink:#286657;--soft:#E6F1EB;--font-brand:'Gmarket Sans',var(--font-ui);--dock-h:76px}
html,body{background:var(--bg)}
.pagehead{background:rgba(250,247,242,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand-name{font-family:var(--font-brand);font-weight:700;letter-spacing:-.5px;color:#20584A;font-synthesis:none}
/* 브랜드 타이틀과 오늘 기록은 한 덩어리로 보이도록 부드러운 면을 씁니다. */
.day-signature{background:#FFF;border:1px solid #EEE9E1;border-radius:12px;padding:2px 8px;box-shadow:none}
.hero{background:#E7F1EB;border:0;border-radius:13px;box-shadow:none;padding:12px 13px 14px;color:#24483D}
.hero .lbl{color:#4A7162}.hero-title{color:#23483E}
.hero-line+.hero-line{border-top:1px solid #CDDFD4;padding-top:7px;margin-top:7px}
.hero-progress{position:relative;height:4px;background:#C8DCCF;border-radius:99px;margin-top:9px;overflow:hidden}
.hero-progress i{background:#286657;border-radius:99px}
/* 주간 강의는 메타데이터 한 줄, 여백으로 묶고 편집은 작은 기호로 유지 */
.week-lecture{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:7px 2px;margin-bottom:15px}
/* 일정 카드는 파스텔 표면과 색 띠, 현재 일정은 흰 글자와 시간 진행바로 강조 */
.eventblock{border-radius:8px;border-left-width:3px;padding:4px 7px;box-shadow:none}
.eventblock.blue{background:#E7EEF6;color:#36577B;border-color:#6C8FB9}
.eventblock.orange{background:#F7E9E2;color:#79503F;border-color:#D38A69}
.eventblock.purple{background:#EFEAF4;color:#594D70;border-color:#9581B6}
.eventblock.coral{background:#F7E9EB;color:#7E4A5B;border-color:#D58A9B}
.eventblock.green{background:#EDF1DF;color:#566039;border-color:#9AAA5A}
.eventblock.gray{background:#ECEAE6;color:#585A57;border-color:#8A8B85}
.eventblock.is-current{background:#245B4E!important;color:#FFF!important;border-color:#174437!important;opacity:1!important;padding-bottom:8px}
.eventblock.is-current .eventtitle,.eventblock.is-current .eventtitle .t,.eventblock.is-current .eventsub,.eventblock.is-current .eb-r{color:#FFF!important;opacity:1!important}
.eventblock.is-current .event-progress{display:block;z-index:1;inset:auto auto 4px 7px;height:3px;background:#FFF!important;opacity:.92;border-radius:99px}
.eventblock.is-current::after{content:"";position:absolute;z-index:0;left:7px;right:7px;bottom:4px;height:3px;border-radius:99px;background:#FFFFFF55;pointer-events:none}
.eventblock.is-current .ebline,.eventblock.is-current .eventsub{position:relative;z-index:2}
.eventblock.is-current .eventtitle .t{padding-right:2px}
.eventblock.past{opacity:.72}
/* 기록 열은 기록된 메모에만 약한 바탕을 둬 계획과 혼동되지 않게 합니다. */
.rec.rck{padding:3px 5px;color:#33463F}
.rec.rck:has(.rck-body){background:#F0EEE8;border-radius:7px;padding:5px 6px}
.rec.rck .rck-head{gap:5px}.rec.rck .rck-body{display:block;white-space:pre-wrap;overflow:hidden;max-height:4.5em;line-height:1.45;margin-top:2px;color:#46574F}
.rec.rck.pending{padding:0 2px}.rec.rck.pending:has(.rck-body){background:#F0EEE8;padding:5px 6px}
.rec.memo{background:#F0EEE8;border-radius:7px;padding:3px 6px;color:#46574F}
/* 하루의 섹션은 박스 대신 얇은 구분선과 간격으로 연결합니다. */
.page>.card+.card{border-top:1px solid #E9E4DC;padding-top:12px}
#page-today>.card+.card{border-top:0;padding-top:0}
#page-today .tl-card{border:0;background:transparent;padding:0;box-shadow:none}
.ck-strip{background:#F0EEE8;border:0;border-radius:9px;padding:4px 5px}
.ck,.ck.is-done{border-radius:6px}.ck.is-done{color:#286657}
/* 입력 필드는 흐린 색 면으로만 표시하고, 포커스에서 선명한 링을 줍니다. */
#checkNote,#eventMemo,#lectureNote,#sessionMemo{background:#F0EEE8;border:0;border-radius:10px;padding:10px 11px;line-height:1.55}
#checkNote:focus,#eventMemo:focus,#lectureNote:focus,#sessionMemo:focus{outline:2px solid #78A895;outline-offset:1px}
/* 집중/묵상/기도 컨트롤만 하나의 부드러운 면으로 묶습니다. */
#page-focus>.card:first-child{background:#E8F1EB;border-radius:15px;padding:13px 12px 12px;border:0;box-shadow:none}
#focusTarget{background:#FFF;border:0;border-radius:9px;padding:9px 10px}
#focusDurations{margin-top:7px}.timer{font-size:56px;color:#24483D}
#page-focus .timer-row .solid{background:#286657;color:#FFF;border-radius:50%;box-shadow:none}
/* 달력은 주간 가로 구분선만, 차트는 플롯 영역만 흰색으로 둡니다. */
.daycell{border:0;border-top:1px solid #E8E2D8;background:transparent;border-radius:0}
.daycell.active{box-shadow:inset 0 0 0 1.5px #286657;border-radius:5px}
.chart{background:#FFF;border:0;border-radius:10px;padding:6px}
.chart-legend{margin-top:3px}
/* 아래 메뉴는 한 면으로 정리하고 얇은 해안선을 남깁니다. */
.dock{background:var(--bg);border:0;box-shadow:none}
.shore-art{height:12px}.shore-art path:first-child{fill:#E7EFE8}.shore-art path:last-child{stroke:#94B8AA}
.pstrip{background:#E7EFE8}
.session-note-row{padding:11px 2px;border-bottom:1px solid #E6E1D8}
@media(max-width:375px){.brand-name{font-size:17px}.eventblock.is-current{padding-bottom:7px}}
/* 현재 일정: 짙은 라군 바탕과 흰 글자, 하단 진행률 */
.hero{background:#245B4E;color:#FFF;border:0;border-radius:13px;padding:12px 13px 14px;box-shadow:none}
.hero .lbl,.hero-title,.hero-meta,.hero-next,.hero-left{color:#FFF}
.hero .lbl{opacity:.76}.hero-title{font-size:18px;letter-spacing:-.35px}
.hero-line+.hero-line{border-top:1px solid #FFFFFF35}
.hero-progress{height:4px;background:#FFFFFF45;border-radius:99px;margin-top:9px;overflow:hidden}
.hero-progress i{background:#F7E3AA;opacity:1;border-radius:99px}


/* Mural palette: warm off-white + sky, lagoon, palm and hibiscus accents. */
:root{--bg:#FAF7F2;--ink:#1F3A2C;--sub:#536A5A;--faint:#7E8C80;--line:#E6E1D8;--solid:#1F3A2C;--hero-ink:#1F3A2C;--soft:#DCE9F2;--sun:#F5CB45;--mustard:#D69A22;--sky:#DCE9F2;--wave:#6A98C6;--leaf:#4A8359;--deep:#1F3A2C;--hibiscus:#E67A3C}
html,body{background:#FAF7F2}
.pagehead{background:rgba(250,247,242,.96)}
.brand-name{font-family:var(--font-brand);font-weight:700;color:var(--deep);text-shadow:.5px .5px 0 rgba(214,154,34,.55)}
.sectionhead h2,.page-title,.task-title,.note-title,.calendar-toolbar strong{color:var(--deep)}
/* 현재 상태는 하늘색 면, 딥 그린 글자와 파도색 진행률로 구분합니다. */
.hero{background:var(--sky);color:var(--deep);border:0;border-radius:13px;box-shadow:none}
.hero .lbl,.hero-title,.hero-meta,.hero-next,.hero-left{color:var(--deep);opacity:1}
.hero-line+.hero-line{border-top:1px solid #6A98C633}
.hero-progress{background:#6A98C644}
.hero-progress i{background:var(--wave);opacity:1}
/* 진행 중인 타임라인 일정은 흰 글자를 유지하고, 진행률을 햇살 노랑으로 표시합니다. */
.eventblock.orange{background:#F5EEDC;color:#62553A;border-color:#C5A85C}
.eventblock.is-current{background:var(--deep)!important;color:#FFF!important;border-color:#14291E!important;opacity:1!important}
.eventblock.is-current .eventtitle,.eventblock.is-current .eventtitle .t,.eventblock.is-current .eventsub,.eventblock.is-current .eb-r{color:#FFF!important}
.eventblock.is-current .event-progress{background:var(--sun)!important;opacity:1}
.eventblock.is-current::after{background:#D69A2266}
/* 잎사귀와 파도는 삽화에만, 노랑은 상태와 체크·꽃술에 제한합니다. */
.shore-art{height:12px}
.shore-art path:first-child{fill:var(--sky)}.shore-art path:last-child{stroke:var(--wave)}
.task-check{appearance:none;-webkit-appearance:none}.task-check:focus-visible{outline:2px solid var(--wave);outline-offset:1px}
.pinbtn.on img{width:29px;height:29px;filter:drop-shadow(0 1px 1px #C42F5D30)}
#moodGrid .mood.selected{outline:2px solid var(--hibiscus);outline-offset:1px}
#moodGrid .mood.selected::after{color:var(--hibiscus)}
.daycell.active{box-shadow:inset 0 0 0 1.5px var(--deep)}
#page-focus .timer-row .solid{background:var(--deep)}
@media(prefers-reduced-motion:reduce){.hero-progress i{transition:none}}




/* 승인안: 선택적 면, 시간대 메모, 접근 가능한 최소 동작 영역 */
.time-note-slot{border:0;border-radius:3px;text-align:left;padding:2px 5px;color:#1F3A2C;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.slot-label{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:12px;font-weight:650}.slot-preview{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:15px}
.time-note-editor{display:block;margin:12px 0}.time-note-editor strong{display:block;font-size:12px;margin-bottom:5px}.time-note-editor textarea{font-size:13.3px;background:#f0f3ef}
.time-record{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 0;white-space:normal;line-height:1.5;color:#1F3A2C}
.time-record .rck-body,.time-record .preview{display:block;white-space:pre-wrap}.focus-alarm{padding:10px;background:#F5CB45;color:#1F3A2C;border-radius:6px;font-size:12px}.focus-alarm[hidden]{display:none}
.journal-search{margin:10px 0}.journal-search label{font-size:11px}.week-edit{min-width:44px;min-height:44px}.session-note-row{border-radius:0;box-shadow:none}.session-note-row p{line-height:1.6}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #6A98C6;outline-offset:2px}
#sessionActions{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}#sessionActions button{white-space:normal}


@media(min-width:900px){#timeNotesModal{justify-content:flex-end;align-items:stretch;background:#1f3a2c18}#timeNotesModal .sheet{width:410px;max-width:44vw;max-height:100dvh;margin:0;border-radius:0;overflow:auto}}

#jumpTimelineNow{font-size:11px;min-width:44px;min-height:36px;height:36px;padding:0 4px}#page-today>.card{margin-bottom:14px}#page-today .week-lecture{margin-bottom:10px}

.compact-note{justify-content:center;gap:0;padding:0 4px}.compact-note .slot-label{font-size:9px;line-height:11px}.compact-note .slot-preview{display:none}.time-note-slot:not(.compact-note) .slot-preview{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.time-note-slot:not(.compact-note){gap:3px}#eventCheckinArea h3{font-size:13px}#eventCheckinArea textarea{background:#f5f4ed}

.compact-note .slot-preview{display:block;white-space:nowrap;font-size:10px;line-height:12px;overflow:hidden;text-overflow:ellipsis}.time-note-slot{justify-content:flex-start;padding:3px 5px}.compact-note{padding:0 4px;justify-content:center}


.brand-name{color:#315F8A!important;text-shadow:none!important}
.timeline-hours{font-family:'Gmarket Sans',ui-monospace,monospace!important;font-weight:500;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:9px;letter-spacing:-.4px;color:#536E82}
.time-note-slot.checkin-note{color:#173C57;font-weight:650}
#recordPreview{position:fixed;z-index:150;bottom:calc(var(--dock-h,76px) + 8px);left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),430px);background:#DCE9F2;color:#1F3F58;border-radius:14px;padding:10px 14px;box-shadow:0 5px 26px #19394d25;max-height:35dvh;overflow:auto}
#recordPreview[hidden]{display:none}#recordPreviewHeading{font-size:13px}#recordPreviewMood{font-size:12px;margin:2px 0 8px}#recordPreviewText{font-size:13px;white-space:pre-wrap;line-height:1.6}#recordPreview .mini-btn{font-size:12px;min-height:36px}
#recordEditModal .sheet{background:#FFF1DD}#recordEditModal textarea,#recordEditModal select{background:#FFFAF1}#recordEditModal .label{font-size:12px;margin:10px 0 5px}#recordEditModal textarea{font-size:13.3px;line-height:1.6}


.checkin-note{flex-direction:row;align-items:flex-start;gap:5px!important}.checkin-sticker{display:inline-flex;flex:0 0 auto;align-items:center;padding:1px 5px;border-radius:3px 3px 3px 0;background:#315F8A;color:#fff;font-size:9px;font-weight:650;line-height:14px;white-space:nowrap;transform:rotate(-1deg)}.checkin-note .slot-preview{flex:1;min-width:0}.compact-note.checkin-note{align-items:center}#dayHeadline{font-size:13.3333px;line-height:1.35;height:40px;min-height:40px;max-height:40px;overflow:hidden;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;padding:4px 2px;font-family:var(--font-hand)}

.checkin-sticker{background:#94543F;color:#fff}.time-note-slot.checkin-note{color:#633826}.pagehead{padding-bottom:5px;margin-bottom:5.5px}


.hero.is-active{background:#244C68;color:#fff}.hero.is-active .lbl,.hero.is-active .hero-title,.hero.is-active .hero-meta,.hero.is-active .hero-next,.hero.is-active .hero-left{color:#fff}.hero.is-active .hero-progress{background:#ffffff38}.hero.is-active #heroBar{background:#F5CB45}
.time-note-slot.record-current{background:#244C68!important;color:#fff!important}.record-current .checkin-sticker,.record-current .wrap-sticker{background:#ffffff25;color:white}
.time-note-slot.wrap-note{background:#B7C8DA!important;color:#233E58}.wrap-sticker{display:inline-block;align-self:flex-start;font-size:9px;font-weight:650;line-height:15px;padding:1px 5px;background:#536E8B;color:#fff;border-radius:3px}
.time-note-slot.wrap-note.record-current{background:#244C68!important;color:#fff}
.brand-name{position:relative;padding-bottom:5px}.brand-name:after{content:'';position:absolute;left:0;bottom:0;width:72px;height:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='5' viewBox='0 0 72 5'%3E%3Cpath d='M0 2.5Q9 -1 18 2.5T36 2.5T54 2.5T72 2.5' fill='none' stroke='%236A98C6' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
#dayHeadline{height:40px;min-height:40px;max-height:40px;padding:2px;line-height:1.35}.day-signature{padding:0 5px;min-height:40px;margin-top:0;margin-bottom:5px;border-radius:10px}.pagehead{padding-bottom:3px;margin-bottom:3px}.emoji-pick{min-height:36px;height:36px;font-size:21px}.journal-controls{display:flex;flex-wrap:wrap;gap:4px}



.brand-name:after{display:none}.pagehead .brand{position:relative;padding-bottom:5px;overflow:visible}.brand-name{padding-bottom:0}.pagehead .brand:after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q12 0 25 3T50 3T75 3T100 3T125 3T150 3T175 3T200 3' fill='none' stroke='%236A98C6' stroke-width='1.4'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;pointer-events:none}
.phases{display:grid;grid-template-columns:repeat(4,1fr)}.phases button{font-size:20px;min-height:40px}.checkin-sticker{font-size:13px;line-height:16px;padding:1px 4px}.wrap-note .checkin-sticker{background:#536E8B}#previewManageDay{font-size:10px!important}#recordPreview .row.between>div{display:flex;align-items:center;gap:1px}


.ck-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.ck.is-done:after{content:none}.ck{gap:3px}

.checkin-inline{display:inline;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;font-size:13px;line-height:inherit;vertical-align:baseline}.checkin-note{gap:0!important}


#storageNote,#storageNote2,#jumpCalendar,.tl-card .info-wrap{display:none!important}
.pagehead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;padding:10px 0 5px;align-items:center}#pageheadExtra{grid-column:1/-1}#weekLecture{margin:3px 0 5px;padding:0;border:0}.week-lecture small{display:none}.week-lecture strong{font-size:11px}.datebox{min-width:112px}.datebox span{font-size:11px}.headright{gap:2px}.zonechip{font-size:10px}.pagehead .brand{max-width:100%}.brand-name{font-size:18px}.island-mark{width:24px}
.pinned-summary{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:36px;font-size:12px}.pinned-summary .task-check{width:44px;height:44px;flex:0 0 44px}.pinned-label{padding:3px 2px;color:#60746A;font-size:10px;font-weight:700}.pinned-list{display:grid;gap:0}.pinned-item{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 1px}.pinned-item+.pinned-item{border-top:1px solid #E2E9E1}.pinned-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-fold{align-self:flex-start;border:0;background:transparent;color:#315F8A;font-size:11px;min-height:36px;padding:0 7px}
#todayTaskCard[hidden]{display:none}#todayTaskCard{margin-top:5px;margin-bottom:12px}.day-signature{margin-top:4px;margin-bottom:8px}.sectionhead .manage-btn{font-size:22px;min-width:44px;min-height:44px}.sectionhead .add{min-width:44px;min-height:44px}.ck-strip{margin-bottom:14px}.ck{min-height:44px}
.eventblock{font-size:11px;line-height:1.3}.eventblock .eventtitle{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.eventblock .eventtitle .t{font-size:9px;display:block}.eventblock.past{opacity:.48}.time-note-slot{font-size:12px;z-index:5}.slot-preview{font-size:12px!important;line-height:1.45!important}.eventblock.is-current{background:#0C447C!important;color:#fff!important;z-index:4;border:0;padding:5px 8px 10px}.eventblock.is-current .eventtitle{font-size:15px;color:white}.eventblock.is-current .eventtitle .t{font-size:10px;color:white}.eventblock.is-current .event-progress{background:#F5CB45!important;height:3px}.time-note-slot.record-current{background:transparent!important;color:#fff!important}.nowline{z-index:6}.short-preview{background:#EAF0F4;padding:10px;color:#244C68;font-size:12px;margin:6px 0}.now-fab{position:fixed;z-index:70;bottom:calc(var(--dock-h,72px) + 12px);right:max(16px,calc((100vw - 450px)/2));padding:10px 14px;border:0;border-radius:30px;background:#0C447C;color:#fff;box-shadow:0 2px 12px #12354f30;min-height:44px;font-size:12px}.now-fab.hidden{display:none}
#prayerStrip{position:static;margin:18px 0 5px;border-top:1px solid #d7e2e7;padding:12px 0;background:transparent;box-shadow:none}#prayerStrip[hidden]{display:none}.brand{overflow:hidden}.pagehead{z-index:40}



/* 1pt = 1.333 CSS px. The previous hour labels were 11.5px. */
.timeline-hours div{font-size:10.1667px;color:#536575;letter-spacing:-.25px}
.eventblock,.eventblock.short{padding:4px 6px;border-radius:4px}
.eventblock .eventtitle,.eventblock.short .eventtitle{font-size:11.5px;font-weight:700;line-height:1.35}
.eventblock .eventtitle .t,.eventblock:not(.short) .eventtitle .t{font-size:9px!important;font-weight:400;line-height:1.4;margin-top:3px}
.eventblock.is-current .eventtitle{font-size:13px}
.eventblock.past{opacity:1}
.eventblock.blue{color:#294D73}.eventblock.orange{color:#625034}.eventblock.purple{color:#514167}.eventblock.coral{color:#743D50}.eventblock.green{color:#485326}.eventblock.gray{color:#4D514D}
.time-note-slot,.time-note-slot.compact-note{padding:4px 7px;border-radius:4px;color:#294454;font-weight:400}
.slot-preview{font-size:10.5px!important;line-height:1.5!important;font-weight:400}
.time-note-slot.checkin-note{color:#633826;font-weight:400}.time-note-slot.wrap-note{color:#233E58}
.eventblock.is-current .t,.time-note-slot.record-current{color:#fff!important}
.lane-head{padding-left:6px}.tl-card{padding-top:10px!important;padding-bottom:10px!important}

/* ========== PHASE 1 · home / timeline / check-in (2026-10) ========== */
/* Quiet text-only summary. Unlike old hero this is not a colored card. */
#page-today #hero{display:block!important;background:transparent!important;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:7px 2px 10px;margin:3px 0 14px;color:var(--ink)!important;overflow:visible}
#page-today #hero .hero-line{display:flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap;margin:0;padding:0;border:0}
#page-today #hero .hero-line+.hero-line{margin-top:5px}
#page-today #hero .lbl{display:inline-block;min-width:24px;color:#4C675D!important;opacity:1;font-size:11px;font-weight:700;flex-shrink:0}
#page-today #hero .hero-title{font-size:14px;line-height:1.45;font-weight:750;color:#243B35!important;max-width:100%;text-overflow:ellipsis;min-width:0}
#page-today #hero .hero-next{font-size:12px;color:#596F65!important;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#page-today #hero .hero-meta,#page-today #hero .hero-left,#page-today #hero .hero-progress{display:none!important}
#page-today .event-timeline .lane-head{font-size:11px;color:#526761;font-weight:700}
/* No 100%-width highlight: the record lane must remain usable. */
#page-today .eventblock.is-current{background:#E4ECF6!important;color:#18466B!important;border-left:3px solid #245F8C!important;padding:4px 6px 7px;box-shadow:inset 0 0 0 1px #A6C3DB}
#page-today .eventblock.is-current .eventtitle,#page-today .eventblock.is-current .eventtitle .t{color:#18466B!important}
#page-today .eventblock .eventtitle{font-size:12px;padding-right:0!important;line-height:1.4;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;text-overflow:ellipsis}
#page-today .eventblock .eventtitle .t{display:block;font-size:10px!important;line-height:1.35;margin-top:2px}
#page-today .eventblock.short .eventtitle{font-size:10.5px;display:block;white-space:nowrap;text-overflow:ellipsis}
#page-today .eventblock.short .eventtitle .t{display:none}
#page-today .eventblock .eb-r{display:none}
#page-today .eventblock.past{opacity:.78}
/* Empty record slots are quiet but still interactive. Written slots show a small tinted wash. */
#page-today .time-note-slot{padding:5px 7px;align-items:flex-start;text-align:left;min-width:0}
#page-today .time-note-slot.is-empty{background:transparent!important;border:0;border-bottom:1px dotted #CBD8D1;border-radius:0;color:#64776A!important}
#page-today .time-note-slot.is-empty .empty-record-label{font-size:12px;line-height:1.5;opacity:.48;user-select:none}
#page-today .time-note-slot.is-empty:focus-visible{outline:2px solid #286657;outline-offset:-2px;background:#EFF4F0!important}
#page-today .time-note-slot.is-written{border:0;background:#EAF1ED!important;color:#2F4942!important;border-radius:4px}
#page-today .time-note-slot.checkin-note.is-written{background:#F8EDE3!important;color:#694635!important}
#page-today .time-note-slot.wrap-note.is-written{background:#E4EAF1!important;color:#263F5D!important}
#page-today .time-note-slot.record-current.is-written{box-shadow:inset 0 0 0 1.5px #5189B1}
#page-today .time-note-slot .slot-preview{display:-webkit-box!important;-webkit-box-orient:vertical;white-space:pre-wrap!important;word-break:break-word;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden;line-height:1.45!important;font-size:11.5px!important;letter-spacing:-.015em;font-weight:450;-webkit-line-clamp:4;line-clamp:4}
#page-today .time-note-slot.checkin-note .slot-preview{display:-webkit-box!important}
/* Prevent accidental unreadable white text from a previously active slot rule. */
#page-today .time-note-slot.record-current{color:#2F4942!important}
/* Record field first, mood field second: stable order when picking emotions. */
#page-checkin .phases{gap:4px;margin:3px 0 16px}
#page-checkin .phases button{height:58px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:21px;border-radius:9px;padding:3px 1px}
#page-checkin .phases button small{font-size:11px;font-weight:700;line-height:1.15;color:inherit}
#page-checkin #generalNoteCard{margin-bottom:20px}
#page-checkin #generalNoteCard #checkNote{min-height:132px;font-size:14px;line-height:1.6;padding:12px 11px}
#page-checkin #moodCard{margin-bottom:20px}
#page-checkin #moodCard .mood-banner{margin:2px 0 9px;color:#546B5F;font-size:12px}
#page-checkin #moodCard.is-collapsed #moodGrid,#page-checkin #moodCard.is-collapsed .mood-axis{display:none}
#page-checkin .mood-change{border:0;background:none;color:#286657;font-weight:700;padding:0 7px;font-size:12px;min-width:44px;min-height:38px}
#page-checkin #moodGrid .mood{min-height:44px;height:44px;font-size:12px}
@media(max-width:375px){#page-today .time-note-slot{padding:4px 5px}#page-today .time-note-slot .slot-preview{font-size:11px!important}#page-checkin .phases button{height:54px;min-height:54px}}



#page-records .day-review{padding:13px 0 12px;margin:11px 0 22px;border-top:2px solid #BFCFC5;border-bottom:1px solid #DDE6E0}
#page-records .day-review .sectionhead{margin-bottom:13px;align-items:center}
#page-records .day-review-action{border:0;background:none;color:#1B6E5C;font-size:12px;font-weight:700;padding:10px 4px;min-height:42px}
.day-review-head{display:grid;gap:4px;margin-bottom:10px}
.day-review-primary{display:flex;gap:7px;align-items:flex-start;min-width:0}
.day-review-emoji{font-size:19px;flex:0 0 auto;line-height:1.5}
.day-review-headline{font-family:var(--font-hand);white-space:pre-line;font-size:15px;line-height:1.5;color:#223C35;overflow-wrap:anywhere}
.day-review-mood{font-size:11px;color:#557367}
.day-review-list{display:grid;gap:0}
.day-review-entry{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #E3EAE4;padding:12px 0;min-height:62px;cursor:pointer}
.day-review-entry:focus-visible{outline:2px solid #1D6A56;outline-offset:2px;border-radius:4px}
.day-review-entry-head{display:flex;gap:8px;align-items:baseline;min-width:0;flex-wrap:wrap}
.day-review-entry-time{flex:0 0 40px;color:#4F6B60;font-size:11px;font-variant-numeric:tabular-nums}
.day-review-entry-title{font-size:13px;line-height:1.45;color:#243B33;font-weight:700}
.day-review-entry-mood{font-size:11px;color:#6B695E}
.day-review-entry-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;word-break:break-word;padding:4px 0 0 48px;font-family:var(--font-hand);font-size:13px;color:#485D54;line-height:1.6}
.day-review-entry-empty{display:block;padding:3px 0 0 48px;font-size:11px;color:#718078}
.day-review-foot,.day-review-empty{font-size:12px;color:#68786E;line-height:1.55;margin:11px 0 0}
.active-session-banner{display:block;border:0;border-left:3px solid #2A7968;background:#E6F2EA;color:#255B4F;width:100%;text-align:left;padding:9px 12px;margin:0 0 10px;border-radius:5px;font-size:12px;font-weight:700;min-height:40px}
.active-session-banner[hidden]{display:none!important}
#page-focus .focus-resume-hint{margin:3px 0 8px;font-size:12px;color:#1F6054;text-align:center;background:#E8F3EE;padding:8px 4px;border-radius:9px}
#page-records .score-disclaimer{font-size:11px;color:#566B62;margin:4px 0 7px;line-height:1.5}
#page-records .manage-btn,#page-focus .manage-btn{font-size:12px!important;line-height:1.2;min-height:40px;color:#1C6956;padding:0 5px;letter-spacing:0}
@media(max-width:375px){.day-review-entry-text,.day-review-entry-empty{padding-left:0}.day-review-entry-time{flex-basis:36px}}


/* PHASE 3: one source for shared colors, interaction states and type treatment. */
:root{
 --p3-ink:#263D37;
 --p3-sub:#445B51;
 --p3-muted:#52655B;
 --p3-line:#CBD9CE;
 --p3-focus:#176D5C;
 --p3-surface:#FFFEFA;
 --sub:var(--p3-sub);
 --faint:var(--p3-muted);
 --line:var(--p3-line);
 --font-brand:'Gmarket Sans','Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;
}
/* Brand typography: Gmarket Sans requested for the logo, not for dense body text. */
.pagehead .brand{max-width:100%;overflow:visible}
.brand-name{font-family:var(--font-brand)!important;font-weight:700;font-synthesis:weight;letter-spacing:-.7px}
/* UI hierarchy: distinguish section labels from secondary actions. */
.sectionhead h2{font-size:15px;font-weight:750;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.sectionhead .manage-btn,#page-records .manage-btn,#page-focus .manage-btn{
 font-size:13px!important;font-weight:700;letter-spacing:-.1px;line-height:1.25;
 padding:0 9px;min-height:44px;min-width:44px;max-width:100%;white-space:nowrap
}
.manage-caption,.small,.meta-r,.check-state{color:var(--p3-sub)}
.micro,.week-lecture small,.day-review-entry-empty,.day-review-mood{color:var(--p3-muted)}
/* Put visibility first: all standard foreground text stays on readable surfaces. */
#page-records .day-review,.day-signature,.week-lecture{color:var(--p3-ink)}
#page-today .time-note-slot.is-empty{color:var(--p3-sub)!important}
#page-today .time-note-slot.is-empty .empty-record-label{opacity:1;font-size:13px;color:#53675C}
#page-today .time-note-slot.is-written .slot-preview{color:#273F37}
#page-today .time-note-slot.checkin-note.is-written .slot-preview{color:#67412D}
#page-today .time-note-slot.wrap-note.is-written .slot-preview{color:#25405C}
/* Button dimensions and keyboard focus. Some cells are layout-constrained; keep their entire available area interactive. */
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
 outline:2px solid var(--p3-focus);outline-offset:2px
}
button,.choice,.daycell,.eventblock,[role="button"]{-webkit-tap-highlight-color:transparent}
#page-records .day-review-action{min-height:44px;color:var(--p3-focus);font-size:13px}
#page-records .day-review-entry-time,#page-records .day-review-entry-text{color:var(--p3-sub)}
#page-checkin .mood-change{min-height:44px;font-size:13px;color:var(--p3-focus)}
#page-checkin .phases button small{font-size:11px}
/* Mobile wrapping; distinguish the plan title, meta and action text. */
#page-today .eventblock .eventtitle{font-size:12px;font-weight:750;line-height:1.35}
#page-today .eventblock .eventtitle .t{font-size:10px!important;color:inherit;font-weight:500}
#page-today .event-timeline .lane-head{color:var(--p3-sub)}
#page-today .time-note-slot .slot-preview{font-size:11.5px!important;line-height:1.5!important}
/* Forms remain independent from the status bar and keyboard. */
.modal-under[hidden]{display:none!important}
.modal-under{overscroll-behavior:contain}
.modal-under .sheet{background:var(--p3-surface);scrollbar-gutter:stable;overscroll-behavior:contain}
.modal-under .sheet .top{position:relative}
.field::placeholder,.title-input::placeholder{color:#64766D;opacity:1}
/* Clarify the date scope of recurring edits. */
.event-scope-help{font-size:12px;line-height:1.55;color:var(--p3-sub);padding:9px 12px;margin:10px 0 3px;
 background:#EFF4EF;border-left:3px solid #4A8574;border-radius:4px}
.event-scope-help[hidden]{display:none}
/* Keep inline recording feedback observable, never just a fleeting toast. */
#toast{max-width:min(92vw,420px);overflow-wrap:anywhere}
@media(max-width:440px){
 /* Visiting a different date reveals Today chip: date controls move below the complete brand. */
 .pagehead:has(#todayChip:not(.hidden)) .brand{grid-column:1/-1;justify-self:start;max-width:100%}
 .pagehead:has(#todayChip:not(.hidden)) .headright{grid-column:1/-1;justify-self:end}
 .pagehead:has(#todayChip:not(.hidden)) #pageheadExtra{grid-column:1/-1}
}
@media(max-width:375px){
 .sectionhead h2{font-size:14px}
 .sectionhead .manage-btn{font-size:12px!important;padding:0 7px}
 .brand-name{font-size:19px}
 #page-today .time-note-slot .slot-preview{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* === USER-FIRST UX PASS: clarity over competing controls === */
/* Two rows protect long brand names and keep date navigation on one line. */
.pagehead{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:2px;
 padding:8px 0 9px;margin-bottom:9px;align-items:center}
.pagehead .brand{grid-column:1;grid-row:1;min-width:0;max-width:100%;overflow:visible;align-self:center}
.pagehead .brand-name{font-size:19px!important;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;flex-shrink:0}
.pagehead .headright{display:contents}
.pagehead .zonechip{grid-column:2;grid-row:1;justify-self:end;min-width:48px;min-height:36px;font-size:12px}
.pagehead .datecontrol{grid-column:1 / -1;grid-row:2;justify-self:end;gap:3px;height:36px}
.pagehead .datecontrol>button{height:36px;min-width:40px;width:40px}
.pagehead .datebox{min-width:152px;height:36px}
.pagehead .datebox span{font-size:13px}
.pagehead .datecontrol>.todaychip{height:34px;min-height:34px}
/* home-only contextual information, never sticky above other tabs */
#pageheadExtra{display:flex;flex-direction:column;gap:2px;padding:0;margin:0 0 8px}
#pageheadExtra #weekLecture[hidden]{display:none!important}
#page-today #weekLecture{display:flex;justify-content:space-between;align-items:center;gap:5px;
 margin:0;padding:3px 0;color:#3A554B;border-bottom:1px solid #E1E7E0}
#page-today #weekLecture .summary{display:flex;flex-direction:row;align-items:baseline;min-width:0;gap:8px}
#page-today #weekLecture .summary small{display:inline;color:#60746A;font-size:11px;white-space:nowrap}
#page-today #weekLecture .summary strong{font-size:12px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#page-today #weekLecture .week-edit{width:auto!important;min-width:108px!important;max-width:none!important;min-height:38px;padding:0 5px;font-size:12px;white-space:nowrap;flex:0 0 auto;justify-content:flex-end}
#page-today #weekLecture .summary{flex:1 1 auto;overflow:hidden}
#page-today .pinned-summary{min-height:38px;padding:2px 1px}
#page-today .pinned-summary .pinned-item{min-height:38px}
#page-today .pinned-summary .pinned-title{font-size:13px}
#page-today .pinned-summary .task-fold{min-height:42px;padding:0 7px;font-size:13px;font-weight:700}
#page-today .tl-card{padding:10px 8px 12px}
#page-today .tl-card .sectionhead{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
#page-today .tl-card .sectionhead .right{gap:3px}
#page-today .tl-card .sectionhead .right button{white-space:nowrap}
#page-today .eventblock[role=button],#page-today .time-note-slot{touch-action:manipulation}
#page-today .home-checkins{padding:10px 10px 11px}
#page-today .home-checkin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#page-today .home-checkin{display:flex;min-width:0;min-height:58px;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px;border:1px solid #D8E3DA;border-radius:10px;background:#fff;color:#315C4A}
#page-today .home-checkin b{font-size:11px;line-height:1.15;white-space:nowrap}
#page-today .home-checkin small{font-size:10px;color:#68786E;font-variant-numeric:tabular-nums;white-space:nowrap}
#page-today .home-checkin.is-done{background:#EDF5EF;border-color:#A9C6B2}
#page-today .home-checkin.is-current{box-shadow:inset 0 0 0 1px #315F8A}
#page-records .day-review-entry-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:stretch;border-bottom:1px solid #E3EAE4}
#page-records .day-review-entry-row .day-review-entry{border:0}
.day-review-delete{align-self:center;justify-self:end;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#8A5142;font-size:16px}
.day-review-delete:focus-visible{outline:2px solid #8A5142;outline-offset:1px}
@media(max-width:375px){#page-today .home-checkin-grid{gap:4px}#page-today .home-checkin{min-height:54px}#page-today .home-checkin b{font-size:10px}}
#page-today .time-note-slot.is-empty .empty-record-label{font-size:13px;font-weight:700}
/* Event list: visible interaction hint; destructive actions live behind a deliberate menu. */
#page-schedule .edit-chevron{font-size:23px;color:#55796D;display:inline-flex;align-items:center;justify-content:center;width:26px}
#page-schedule .record-item.tap{cursor:pointer}
#page-schedule .record-item.tap:active{background:#EEF3EF}
#page-checkin .check-state{font-size:12px;white-space:nowrap;color:#476F5D}
#page-checkin .note-title{font-size:16px}
#page-checkin .mood-banner{font-size:13px}
#choiceModal .choice{min-height:59px;gap:10px;align-items:flex-start}
#choiceModal .choice b{font-size:15px;line-height:1.4}
#choiceModal .choice small{font-size:12px;line-height:1.4;white-space:normal;max-width:55%}
@media (max-width:375px){
 .pagehead .brand-name{font-size:18px!important}
 .pagehead .datebox{min-width:125px}
 #page-today #weekLecture .summary strong{max-width:112px}
 #page-today .sectionhead .manage-btn{font-size:12px!important;padding:0 7px}
}
@media(min-width:471px){.pagehead{max-width:100%}}


/* Prevent decor waves and long custom names from introducing horizontal scroll. */
html,body{overflow-x:clip}
.dock .shore-art{overflow:hidden}
.pagehead .brand-name{max-width:min(245px,calc(100vw - 105px));overflow:hidden;text-overflow:ellipsis}

/* === NIGHT REVIEW, 12-HOUR LOCAL TIME, AND WAVE PRAYER DOCK === */
.pagehead .zonechip{min-width:79px;padding:0 5px;white-space:nowrap;font-size:13px;font-weight:750;
 color:#245C55;letter-spacing:-.2px;touch-action:manipulation;border-radius:8px}
.pagehead .zonechip:focus-visible{outline:2px solid var(--solid);outline-offset:2px}
.pagehead .zonechip:active{background:#E3EEE6}
#page-today .ck-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
#page-today .endday{margin:18px 1px 22px;padding:16px 2px 0;border-top:1px solid #C9D8D1;background:none}
.endday-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:11px}
.endday-head h2{margin:3px 0 0;font-size:17px;line-height:1.35;color:#25443A;font-weight:750}
.endday-eyebrow{display:block;color:#698277;font-size:11px;font-weight:600;letter-spacing:.1px}
.endday-mood{background:none;border:0;padding:6px 0;min-height:40px;color:#286B5C;font-size:12px;font-weight:650;white-space:nowrap}
.endday-note{display:block;width:100%;min-height:124px;padding:12px 13px;border-radius:10px;border:1px solid #D7E2DA;
 background:#FFF;line-height:1.65;font:400 14px/1.65 var(--font-ui);color:var(--ink);resize:vertical}
.endday-note:focus{outline:2px solid #568F82;outline-offset:1px}
.endday-note::placeholder{color:#66796F}
.endday-foot{font-size:11px;line-height:1.55;color:#65786C;margin:7px 0 0}
/* Small prayer whisper above the tabs, always attached to the tide line */
#dock{overflow:hidden}
#dock .shore-art{height:9px;width:100%;display:block}
#dock #prayerStrip{display:flex;position:relative;align-items:center;gap:6px;margin:0;padding:0 8px;
 height:37px;min-height:37px;background:#F1F5F0;border:0;border-bottom:1px solid #E2E9DF;box-shadow:none}
#dock #prayerStrip[hidden]{display:none!important}
#dock #prayerStrip .plabel{font-size:14px;flex:0 0 19px;text-align:center;line-height:1}
#dock #prayerStrip .ptitle{font:500 12px/1.35 var(--font-ui);color:#4E655F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#dock #prayerStrip .pbtn{width:34px;height:34px;min-width:34px;padding:0;font-size:15px;color:#286D62;background:none}
#dock #prayerStrip .pbtn.on{background:#D6E8E0;border-radius:9px;color:#155A4A}
#dock #prayerStrip .pbtn:focus-visible{outline:2px solid var(--solid);outline-offset:1px}
#dock .tabs{padding-top:3px}
@media(max-width:375px){.pagehead .zonechip{font-size:12px;min-width:78px}.endday-head h2{font-size:16px}.endday-mood{font-size:11px}}

/* PWA header v5 · time → today/yesterday/tomorrow → short date → navigation */
.pagehead{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:4px!important;padding:9px 0 10px!important}
.pagehead .brand{grid-column:1!important;grid-row:1!important;min-width:0;justify-self:start!important}
.pagehead .headright{display:flex!important;grid-column:1!important;grid-row:2!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;width:100%;min-width:0}
.pagehead .zonechip{grid-column:auto!important;grid-row:auto!important;display:inline-flex;align-items:center;justify-content:flex-start;flex:0 0 auto;min-width:77px!important;min-height:40px!important;padding:0 3px 0 0!important;font-size:13px!important;letter-spacing:-.3px!important;text-align:left}
.pagehead .datecontrol{grid-column:auto!important;grid-row:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:2px!important;min-width:0;height:42px!important;flex:0 1 auto}
.pagehead .relative-day{font-size:12px;font-weight:750;color:#26665A;white-space:nowrap;min-width:26px;text-align:center;flex:0 0 auto}
.pagehead .relative-day.is-empty{visibility:hidden;min-width:0;width:0;margin:0}
.pagehead .datebox{display:flex!important;align-items:center;justify-content:center;min-width:78px!important;width:auto!important;height:38px!important;padding:0 4px;border-radius:7px}
.pagehead .datebox span{font-size:13px!important;font-weight:750!important;white-space:nowrap;color:#254D42}
.pagehead .datecontrol>button:not(.todaychip){height:40px!important;width:27px!important;min-width:27px!important;padding:0!important;font-size:21px!important;color:#526F65}
.pagehead .datecontrol>.todaychip{min-height:28px!important;height:28px!important;margin:0 0 0 2px!important;padding:0 5px!important;font-size:10.5px!important;white-space:nowrap}
.pagehead .datecontrol>.todaychip.hidden{display:none!important}
@media(max-width:375px){
 .pagehead .zonechip{font-size:12px!important;min-width:73px!important}
 .pagehead .datecontrol{gap:0!important}
 .pagehead .relative-day{font-size:11px;min-width:24px}
 .pagehead .datebox{min-width:73px!important;padding:0 2px}
 .pagehead .datebox span{font-size:12px!important}
 .pagehead .datecontrol>button:not(.todaychip){min-width:25px!important;width:25px!important}
 .pagehead .datecontrol>.todaychip{font-size:10px!important;padding:0 3px!important}
}