/* ===== 1% 성장 도장판 =====
   색은 레퍼런스 앱의 '해조' 녹색을 잉크로 쓴다.
   뜻이 정해진 색은 화면 어디서나 같은 뜻으로 읽힌다:
     초록 = O(했어요) · 금색 = △(대체 행동) · 회색 = X(못 했어요) · 빨강 = '참 잘했어요' 큰 도장(축하 전용) */
:root{
  --paper:#eef3f0; --card:#ffffff; --ink:#14211d; --ink-soft:#3a4a45; --muted:#66746f;
  --line:#dde5e1; --line-mid:#c6d1cc;
  --seal:#14453a; --seal-soft:#e6efeb;
  --ok:#0a6e5c; --ok-bg:#e3f1ec;
  --alt:#8a6412; --alt-bg:#fbf1dc;
  --miss:#6f7a76; --miss-bg:#eef1f0;
  --cheer:#b8322a;
  --serif:"Gowun Batang","Nanum Myeongjo","AppleMyungjo",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    --paper:#0e1513; --card:#151f1c; --ink:#e4ece8; --ink-soft:#b8c6c0; --muted:#8c9a95;
    --line:#22302b; --line-mid:#34453f;
    --seal:#7fd0b2; --seal-soft:#1a2b25;
    --ok:#5cc29c; --ok-bg:#16302a;
    --alt:#e3b65e; --alt-bg:#2c2416;
    --miss:#909c98; --miss-bg:#1c2522;
    --cheer:#e2685d;
    color-scheme:dark;
  } }
:root[data-theme="dark"]{
    --paper:#0e1513; --card:#151f1c; --ink:#e4ece8; --ink-soft:#b8c6c0; --muted:#8c9a95;
    --line:#22302b; --line-mid:#34453f;
    --seal:#7fd0b2; --seal-soft:#1a2b25;
    --ok:#5cc29c; --ok-bg:#16302a;
    --alt:#e3b65e; --alt-bg:#2c2416;
    --miss:#909c98; --miss-bg:#1c2522;
    --cheer:#e2685d;
    color-scheme:dark;
  }
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{font-family:var(--sans); background:var(--paper); color:var(--ink); font-size:15px; line-height:1.45;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--ok); outline-offset:2px}
svg{display:block}

/* ----- 상단 줄 ----- */
.appbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px; background:var(--paper);
  max-width:560px; margin:0 auto}
.brand{font-family:var(--serif); font-weight:700; font-size:19px; color:var(--seal); margin-right:auto}
.sync{display:flex; align-items:center; gap:6px; border:0; background:none; padding:6px 4px; font-size:12.5px; color:var(--muted)}
.sync i{width:7px; height:7px; border-radius:50%; background:var(--line-mid)}
.sync[data-s="on"] i{background:var(--ok)}
.sync[data-s="saving"] i{background:var(--alt)}
.sync[data-s="auth"] i,.sync[data-s="offline"] i{background:var(--cheer)}
.who{border:1px solid var(--line-mid); background:var(--card); border-radius:20px; padding:6px 12px; font-weight:700; font-size:13.5px; color:var(--ink-soft)}

.view{max-width:560px; margin:0 auto; padding:4px 16px calc(96px + env(safe-area-inset-bottom,0px))}

/* ----- 날짜 머리 ----- */
.dayhead{display:flex; align-items:center; gap:8px; margin:6px 0 14px}
.dayhead .date{flex:1; min-width:0}
.dayhead h1{font-family:var(--serif); font-weight:700; font-size:26px; line-height:1.2; margin:0; letter-spacing:-.01em}
.dayhead p{margin:3px 0 0; color:var(--muted); font-size:13.5px}
.navbtn{width:40px; height:40px; border-radius:50%; border:1px solid var(--line-mid); background:var(--card); display:grid; place-items:center; color:var(--ink-soft); flex:0 0 auto}
.navbtn:disabled{opacity:.35; cursor:default}
.navbtn svg{width:18px; height:18px}
.linkbtn{border:0; background:none; padding:0 0 0 6px; color:var(--ok); font-weight:700; font-size:13.5px; text-decoration:underline; text-underline-offset:3px}

/* ----- 레벨 ----- */
.lvl{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:13px; color:var(--muted)}
.lvl b{font-family:var(--serif); font-size:15px; color:var(--seal)}
.bar{flex:1; height:6px; border-radius:6px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--ok); border-radius:6px; transition:width .4s ease}

/* ----- 습관 카드 ----- */
.habits{display:grid; gap:12px}
.habit{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px}
.habit[data-v="x"]{background:var(--miss-bg)}
.h-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding-right:74px}
.h-top h3{margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em}
.flow{font-size:12.5px; font-weight:700; color:var(--ok)}
.rest{font-size:11.5px; font-weight:600; color:var(--muted)}
.h-min{margin:4px 0 0; padding-right:74px; color:var(--ink-soft); font-size:14px}
.h-alt{margin:6px 0 0; color:var(--muted); font-size:13px}
.h-alt span{display:inline-block; font-weight:700; color:var(--alt); margin-right:4px}
.h-hint{margin:10px 0 0; padding:8px 10px; border-radius:10px; background:var(--alt-bg); color:var(--alt); font-size:13px; font-weight:600}

.marks{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px}
.mk{display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 4px 7px; border-radius:12px;
  border:1.5px solid var(--line-mid); background:var(--card); color:var(--ink-soft); transition:background .15s, border-color .15s, transform .08s}
.mk:active{transform:scale(.97)}
.mk b{font-family:var(--serif); font-size:20px; line-height:1.1}
.mk small{font-size:11.5px; font-weight:600}
.mk-o[aria-pressed="true"]{border-color:var(--ok); background:var(--ok-bg); color:var(--ok)}
.mk-a[aria-pressed="true"]{border-color:var(--alt); background:var(--alt-bg); color:var(--alt)}
.mk-x[aria-pressed="true"]{border-color:var(--miss); background:var(--miss-bg); color:var(--miss)}

/* ----- 도장 (이 앱의 얼굴) ----- */
.seal{position:absolute; top:10px; right:12px; width:64px; height:64px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2.5px solid currentColor; box-shadow:inset 0 0 0 3px var(--card), inset 0 0 0 4.5px currentColor;
  font-family:var(--serif); transform:rotate(-12deg); opacity:.88; filter:url(#ink); pointer-events:none}
.seal-o{color:var(--ok)}
.seal-a{color:var(--alt)}
.seal b{font-size:24px; line-height:1; font-weight:700}
.seal small{font-size:10px; margin-top:1px; font-weight:700}
.seal.press{animation:press .34s cubic-bezier(.2,.9,.3,1.25)}
@keyframes press{
  0%{transform:rotate(-12deg) scale(1.7); opacity:0}
  55%{transform:rotate(-12deg) scale(.92); opacity:1}
  100%{transform:rotate(-12deg) scale(1); opacity:.88}
}

/* ----- 다이어리 체크 ----- */
.sec{font-family:var(--serif); font-size:17px; font-weight:700; margin:26px 0 10px}
.sec small{font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--muted); margin-left:6px}
.diary{display:grid; gap:8px}
.drow{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--card)}
.drow .box{width:24px; height:24px; border-radius:7px; border:1.8px solid var(--line-mid); display:grid; place-items:center; flex:0 0 auto; color:transparent}
.drow .box svg{width:15px; height:15px}
.drow[aria-pressed="true"] .box{background:var(--ok); border-color:var(--ok); color:var(--card)}
.drow span{display:block; font-weight:700; font-size:14.5px}
.drow small{display:block; color:var(--muted); font-size:12.5px; margin-top:1px}

/* ----- 기록 ----- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 4px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 12px 10px}
.stat b{display:block; font-family:var(--serif); font-size:24px; line-height:1.1; color:var(--seal)}
.stat small{color:var(--muted); font-size:12px}
.heat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; overflow-x:auto}
.heat-grid{display:grid; grid-template-rows:repeat(7,1fr); grid-auto-flow:column; grid-auto-columns:minmax(16px,1fr); gap:4px; min-width:250px}
.heat-grid button{aspect-ratio:1; border:0; border-radius:4px; padding:0; background:var(--line)}
.heat-grid .l1{background:color-mix(in srgb,var(--ok) 32%,var(--card))}
.heat-grid .l2{background:color-mix(in srgb,var(--ok) 64%,var(--card))}
.heat-grid .l3{background:var(--ok)}
.heat-grid .pre,.heat-grid .fut{background:transparent; outline:1px dashed var(--line); outline-offset:-1px; cursor:default}
.heat-grid .now{box-shadow:0 0 0 2px var(--ink)}
.heat-legend{display:flex; align-items:center; gap:5px; margin-top:10px; font-size:12px; color:var(--muted)}
.heat-legend i{width:11px; height:11px; border-radius:3px; background:var(--line)}
.heat-legend i.l1{background:color-mix(in srgb,var(--ok) 32%,var(--card))}
.heat-legend i.l2{background:color-mix(in srgb,var(--ok) 64%,var(--card))}
.heat-legend i.l3{background:var(--ok)}
.hstat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-top:10px}
.hstat h3{margin:0 0 8px; font-size:15.5px; font-weight:800}
.hstat dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:13.5px}
.hstat dt{color:var(--muted)}
.hstat dd{margin:0; font-weight:700}
.strip{display:flex; gap:3px; margin-top:12px}
.strip i{flex:1; height:22px; border-radius:4px; background:var(--line)}
.strip i.o{background:var(--ok)}
.strip i.a{background:var(--alt)}
.strip i.x{background:var(--line-mid)}
.strip i.pre{background:transparent; outline:1px dashed var(--line); outline-offset:-1px}
.note{color:var(--muted); font-size:12.5px; margin:8px 2px 0}

/* ----- 설정 ----- */
.group{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:12px}
.group h3{margin:0 0 10px; font-size:15.5px; font-weight:800}
.ulist{display:grid; gap:6px}
.urow{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--paper); font-weight:700; text-align:left; width:100%}
.urow small{font-weight:600; color:var(--ok); font-size:12px}
.field{display:block; margin-top:10px}
.field > span{display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px; font-weight:600}
.field input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line-mid); background:var(--paper); font-size:15px}
.hedit{padding-top:12px; margin-top:12px; border-top:1px solid var(--line)}
.hedit:first-of-type{border-top:0; margin-top:0; padding-top:0}
.hedit b{font-size:13px; color:var(--seal)}
.row{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.btn{border:1px solid var(--line-mid); background:var(--card); border-radius:11px; padding:10px 14px; font-weight:700; font-size:14px; color:var(--ink-soft)}
.btn.primary{background:var(--seal); border-color:var(--seal); color:var(--card)}
.inline{display:flex; gap:8px; margin-top:10px}
.inline input{flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line-mid); background:var(--paper); font-size:15px}
.desc{color:var(--muted); font-size:13px; margin:0}

/* ----- 하단 탭 ----- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; gap:4px;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--card); border-top:1px solid var(--line)}
.tabbar button{flex:1; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:none;
  padding:6px 0; font-size:11.5px; font-weight:700; color:var(--muted); border-radius:10px}
.tabbar svg{width:23px; height:23px}
.tabbar button[aria-current="page"]{color:var(--seal)}

/* ----- 모달 ----- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(10,20,17,.45); display:flex; align-items:flex-end; justify-content:center}
.modal[hidden]{display:none}
.sheet{width:100%; max-width:560px; background:var(--card); border-radius:20px 20px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px)); max-height:85vh; overflow:auto}
.sheet h2{font-family:var(--serif); margin:0 0 6px; font-size:21px}
@media (min-width:600px){ .modal{align-items:center} .sheet{border-radius:20px} }

/* ----- 토스트 ----- */
.toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:50; transform:translate(-50%,12px);
  width:max-content; max-width:min(92vw,440px); padding:11px 16px; border-radius:14px; background:var(--ink); color:var(--card);
  box-shadow:0 6px 20px rgba(10,30,25,.22); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast b{display:block; font-size:14.5px}
.toast small{display:block; font-size:12.5px; opacity:.82; margin-top:1px}

/* ----- '참 잘했어요' 큰 도장: 하루 세 개를 다 채웠을 때와 레벨이 오를 때만 ----- */
.bigseal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; pointer-events:none; visibility:hidden}
.bigseal > div{width:208px; height:208px; border-radius:50%; color:var(--cheer); border:5px solid currentColor;
  box-shadow:inset 0 0 0 7px transparent, inset 0 0 0 10px currentColor;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:var(--serif); background:color-mix(in srgb,var(--card) 93%,transparent); filter:url(#ink); transform:rotate(-14deg)}
.bigseal b{font-size:36px; line-height:1.15; font-weight:700; padding:0 18px; white-space:pre-line}
.bigseal small{font-size:14px; font-weight:700; margin-top:6px}
.bigseal.go{visibility:visible; animation:bigpress 1.9s ease forwards}
@keyframes bigpress{
  0%{opacity:0; transform:scale(1.9)}
  14%{opacity:1; transform:scale(.94)}
  20%{transform:scale(1)}
  78%{opacity:1}
  100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .seal.press{animation:none}
  .bigseal.go{animation:fadeonly 1.6s ease forwards}
  @keyframes fadeonly{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
  .toast,.bar i{transition:none}
}

/* ===== 2차: 성장 탭 ===== */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.lvl .bar i{background:var(--seal)}
.stagechip{font-size:12px; font-weight:700; color:var(--seal); background:var(--seal-soft); border-radius:6px; padding:1px 6px}

/* 단계 올리기 제안: 오늘 화면 맨 위, 한 번에 하나만 */
.suggest{border:1.5px solid var(--seal); background:var(--seal-soft); border-radius:16px; padding:14px 16px; margin:0 0 14px}
.suggest p{margin:0; font-size:14.5px}
.suggest .suggest-next{margin-top:8px; padding:9px 11px; border-radius:10px; background:var(--card); color:var(--ink-soft); font-size:14px}
.suggest-next span,.stage-now span{display:inline-block; font-weight:800; color:var(--seal); margin-right:6px}
.suggest .row{margin-top:10px}

.stagebox{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:10px}
.stagehead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.stagehead h3{margin:0; font-size:15.5px; font-weight:800}
.pips{display:flex; gap:4px}
.pips i{width:22px; height:6px; border-radius:4px; background:var(--line)}
.pips i.on{background:var(--seal)}
.stage-now{margin:8px 0 0; font-size:14px; color:var(--ink-soft)}
.stage-cond{margin:4px 0 0; font-size:12.5px; color:var(--muted)}
.stagebox .row{margin-top:10px}

/* 배지: 얻은 것은 찍힌 도장, 아직인 것은 점선 윤곽 */
.bgroup{margin:14px 2px 8px; font-size:13px; font-weight:700; color:var(--muted)}
.badges{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.badge{display:flex; flex-direction:column; align-items:center; text-align:center}
.bseal{width:78px; height:78px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px dashed var(--line-mid); color:var(--muted); font-family:var(--serif); padding:6px}
.bseal b{font-size:13.5px; line-height:1.2; font-weight:700; word-break:keep-all}
.bseal small{font-size:10px; font-weight:700; margin-top:3px}
.badge.got .bseal{border:2.5px solid currentColor; color:var(--seal); box-shadow:inset 0 0 0 3px var(--card), inset 0 0 0 4.5px currentColor;
  transform:rotate(-8deg); filter:url(#ink)}
.badge p{margin:6px 0 0; font-size:11.5px; line-height:1.35; color:var(--muted); word-break:keep-all}
.badge:not(.got) .bseal b{opacity:.75}

.themes{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.tswatch{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 4px 8px; border-radius:14px; border:1.5px solid var(--line); background:var(--card)}
.tswatch .dot{width:30px; height:30px; border-radius:50%; margin-bottom:4px; background:var(--c)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tswatch .dot{background:var(--cd)} }
:root[data-theme="dark"] .tswatch .dot{background:var(--cd)}
.nw{white-space:nowrap}
.tswatch b{font-size:13px}
.tswatch small{font-size:11px; color:var(--muted); min-height:14px}
.tswatch.on{border-color:var(--seal)}
.tswatch.on small{color:var(--seal); font-weight:700}
.tswatch:disabled{cursor:default}
.tswatch:disabled .dot{opacity:.28}
.tswatch:disabled b{color:var(--muted)}
@media (max-width:360px){ .themes{grid-template-columns:repeat(3,1fr)} }

/* ===== 3차: 우리 탭 =====
   두 사람 카드는 같은 모양, 같은 크기다. 나란히 놓고 재는 숫자(합계·차이·순위)는 만들지 않는다.
   주간 칸: O 초록, △ 금색, 나머지(X·빈칸)는 같은 빈칸. 남에게 '못 한 날'을 따로 칠해 보이지 않는다. */
.tabbar button{min-width:0}
.ucard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:12px; scroll-margin-top:calc(64px + env(safe-area-inset-top,0px))}
.ucard.me{border-color:var(--line-mid)}
.uhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.uhead h3{margin:0; font-family:var(--serif); font-size:18px; font-weight:700}
.uhead h3 small{font-family:var(--sans); font-size:11.5px; font-weight:700; color:var(--seal); background:var(--seal-soft); border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:2px}
.lvchip{font-family:var(--serif); font-weight:700; font-size:14px; color:var(--seal)}
.uh{margin-top:12px}
.uh-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.uh-name{font-weight:700; font-size:14.5px; min-width:0; overflow-wrap:anywhere}
.uh-n{flex:0 0 auto; text-align:right; font-size:13px}
.uh-n b{font-size:14.5px}
.uh-n small{display:block; color:var(--muted); font-size:11.5px; font-weight:500}
.wk{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:6px}
.wk i{height:24px; border-radius:6px; background:var(--line); color:var(--muted); font-style:normal; font-size:11px; font-weight:700; display:grid; place-items:center}
.wk i.o{background:var(--ok); color:var(--card)}
.wk i.a{background:var(--alt); color:var(--card)}
.wk i.fut{background:transparent; outline:1px dashed var(--line); outline-offset:-1px; opacity:.8}
.ufoot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft)}
.ubadge{display:inline-flex; align-items:center; gap:6px}
.ubadge > span{color:var(--muted)}
.ubadge b{font-family:var(--serif); color:var(--seal); border:1.5px solid currentColor; border-radius:8px; padding:0 6px; transform:rotate(-3deg); display:inline-block}
.ubadge small{color:var(--muted); font-size:11.5px}

/* 응원: 정해진 다섯 개 중 하나를 누르면 끝. 글 칸은 없다 */
.cheers{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:14px}
.chbtn{display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 2px 6px; border-radius:12px; border:1.5px solid var(--line-mid); background:var(--card); transition:transform .08s, border-color .15s}
.chbtn span{font-size:22px; line-height:1.15}
.chbtn small{font-size:11px; font-weight:700; color:var(--ink-soft)}
.chbtn:active{transform:scale(.94)}
.chbtn:not(:disabled):hover{border-color:var(--cheer)}
.chbtn:disabled{cursor:default; opacity:.42}
.chleft{margin:6px 2px 0; font-size:12px; color:var(--muted); text-align:right}
.usnote h3{font-size:15px}
.usload{margin:0 2px 12px}

.clist{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:6px 14px}
.clist > .desc{padding:10px 0}
.crow{display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.ce{font-size:22px; width:30px; text-align:center; flex:0 0 auto}
.ct{flex:1; min-width:0; font-size:14px}
.ct small{display:block; color:var(--muted); font-size:12px}
.crow em{font-style:normal; font-size:11.5px; font-weight:800; color:var(--cheer); border:1.5px solid currentColor; border-radius:8px; padding:1px 6px; flex:0 0 auto}

/* 오늘 화면: 상대가 하루를 다 채웠을 때 한 줄. 비교 문구는 쓰지 않는다 */
.friendline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:9px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); font-size:13.5px; color:var(--ink-soft)}
.friendline i{width:9px; height:9px; border-radius:50%; background:var(--cheer); flex:0 0 auto}
.friendline span{flex:1; min-width:0}
.friendline .linkbtn{color:var(--cheer); padding:0}

/* 받은 응원 토스트: 축하 빨강은 축하에만 쓴다 */
.toast.cheer{background:var(--card); color:var(--ink); border:2px solid var(--cheer); box-shadow:0 8px 26px rgba(120,20,15,.22)}
.toast.cheer b{color:var(--cheer); font-size:15.5px}
.toast.cheer small{opacity:1; color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){ .chbtn{transition:none} }
.wk i.now{box-shadow:0 0 0 2px var(--ink-soft)}

/* ===== 4차: 리마인더 =====
   오늘 화면의 한 줄은 구조색(테마 색)으로만 칠한다. 빨강은 축하, 금색은 △ 전용이라 쓰지 않는다.
   '해야 한다'보다 '이만큼이면 된다'로 읽히게 가장 작은 버전을 굵게 보여 준다. */
.nudge{margin:0 0 12px; padding:10px 12px; border-radius:12px; background:var(--seal-soft); border:1px solid color-mix(in srgb,var(--seal) 22%,transparent);
  font-size:13.5px; line-height:1.5; color:var(--ink-soft)}
.nudge b{color:var(--seal)}
.nudge span{font-weight:700; color:var(--ink)}
.rtimes{display:grid; gap:6px; margin-top:12px}
.rtime{display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line)}
.rtime:first-child{border-top:0}
.rtime label{flex:1; font-size:14px; font-weight:700; min-width:0; overflow-wrap:anywhere}
.rtclear{flex:0 0 auto; border:0; background:none; padding:8px 2px; font-size:12.5px; font-weight:700; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.rtime input{flex:0 0 auto; width:8.2em; padding:8px 10px; border-radius:10px; border:1px solid var(--line-mid); background:var(--paper); font-size:15px; font-variant-numeric:tabular-nums}
.rtime input::-webkit-date-and-time-value{text-align:left}

/* ===== 5차: 신호, 흐름, 이유, 자동성, 졸업, 새 출발 =====
   새 색은 만들지 않는다. 신호·자동성·졸업은 구조색(테마 색), 이유 칩은 X와 같은 회색. 빨강·금색은 쓰지 않는다 */
.h-cue{margin:0 0 3px; padding-right:74px; font-size:12.5px; font-weight:700; color:var(--seal); letter-spacing:-.005em}
.soft{color:var(--muted); font-weight:500}

/* X 이유: 고르지 않아도 되는 작은 칩 */
.reasons{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px}
.reasons > span{font-size:12px; color:var(--muted); font-weight:600; margin-right:2px}
.rchip{border:1px solid var(--line-mid); background:var(--card); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:700; color:var(--ink-soft)}
.rchip[aria-pressed="true"]{border-color:var(--miss); background:var(--miss); color:var(--card)}

/* 자동성 체크: 1~7 한 줄 */
.autocheck{background:var(--card); border:1.5px solid var(--seal); border-radius:16px; padding:14px 16px; margin:12px 0 0}
.diary .autocheck{margin:0}
.autocheck h3{margin:0 0 2px; font-size:15.5px; font-weight:800; color:var(--seal)}
.ac-item{margin-top:14px}
.ac-item > p{margin:0 0 8px; font-family:var(--serif); font-size:15px; line-height:1.5; word-break:keep-all}
.ac-scale{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.acbtn{aspect-ratio:1; min-height:38px; border-radius:10px; border:1.5px solid var(--line-mid); background:var(--card); font-family:var(--serif); font-size:16px; font-weight:700; color:var(--ink-soft); padding:0}
.acbtn[aria-pressed="true"]{border-color:var(--seal); background:var(--seal); color:var(--card)}
.ac-ends{display:flex; justify-content:space-between; margin-top:4px; font-size:11.5px; color:var(--muted)}
.autocheck .row{margin-top:12px}
.autocheck .note{margin-top:10px}

/* 졸업 표시 */
.gradchip{font-family:var(--sans); font-size:11px; font-weight:800; color:var(--seal); border:1.5px solid currentColor; border-radius:6px; padding:0 5px; margin-left:6px; vertical-align:2px; display:inline-block}
.gweek{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; border:1px solid var(--line); background:var(--card)}
.gweek > span:first-child{flex:1; min-width:0}
.gweek b{display:block; font-size:14.5px}
.gweek small{display:block; font-size:12.5px; color:var(--muted)}
.gw-btns{display:flex; gap:6px; flex:0 0 auto}
.gw-btns .mk{width:48px; padding:6px 0}

/* 일요일 이유 요약 */
.reasonline{margin:2px 2px 0; font-size:13px; color:var(--ink-soft)}
.reasonline span{display:block; margin-top:3px; color:var(--seal); font-weight:600}

/* 새 출발 */
.fresh{border:1.5px solid var(--seal); background:var(--seal-soft); border-radius:16px; padding:14px 16px; margin:0 0 14px}
.fresh h3{margin:0 0 4px; font-family:var(--serif); font-size:17px; color:var(--seal)}
.fresh > p{margin:0; font-size:14px; color:var(--ink-soft)}
.fresh-h{margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--card)}
.fresh-h p{margin:0; font-size:14px}
.fresh-sub{margin-top:4px !important; color:var(--ink-soft)}
.fresh-sub span{font-weight:800; color:var(--seal); margin-right:6px}
.fresh .row{margin-top:10px}

/* 자동성 곡선 */
.curve-wrap{margin-top:14px}
.curve-t{margin:0 0 4px; font-size:13px; font-weight:700}
.curve-t small{font-weight:500; color:var(--muted); margin-left:6px}
.curve{width:100%; height:auto; max-width:420px}
.curve .cg{stroke:var(--line); stroke-width:1}
.curve .cgoal{stroke:var(--seal); stroke-width:1; stroke-dasharray:3 4; opacity:.55}
.curve .cl{fill:none; stroke:var(--seal); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.curve .cd{fill:var(--card); stroke:var(--seal); stroke-width:2.2}
.curve .ct{fill:var(--muted); font-size:10.5px; font-family:var(--sans)}
.curve .cv{fill:var(--seal); font-size:12px; font-weight:700; font-family:var(--sans)}
.curve-k{display:flex; align-items:center; gap:6px; margin:2px 0 0; font-size:11.5px; color:var(--muted)}
.curve-k i{width:16px; border-top:1.5px dashed var(--seal); opacity:.6}

.group h3 .cnt{font-weight:600; font-size:12.5px; color:var(--muted); margin-left:8px}
.desc.tip{margin:6px 0 14px; color:var(--ink-soft)}