app.css

/* 새 보드에만 있는 것: 로그인, 메시지 꾸밈, 폴드 펼침 2단. 규칙 변수만 씀 */
.login{max-width:420px;margin:0 auto;padding:var(--s6) 0}
.login h1{font-size:var(--t5);font-weight:800;letter-spacing:-.03em}
.login p{font-size:var(--t3);color:var(--sub);margin-top:var(--s2)}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.who button{height:calc(var(--hit) * 2);border-radius:var(--r);background:var(--card);box-shadow:var(--sh);font-size:var(--t4);font-weight:700}
.who button.on{background:var(--ac);color:var(--on-ac);box-shadow:none}
.pw{margin-top:var(--s5);display:grid;gap:var(--s3)}
.pw input{height:calc(var(--hit) + var(--s1));border-radius:var(--r);background:var(--card);box-shadow:var(--sh);padding:0 var(--s4);font-size:var(--t3)}
.pw .btn{height:calc(var(--hit) + var(--s1));font-size:var(--t3)}
.err{color:var(--red);font-size:var(--t2);font-weight:600}
/* 목록 미리보기는 한 줄만, 넘치면 … */
.row .tx > span.one,.row b.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t2);color:var(--sub)}
.msg.me .att{color:var(--on-ac)}
.reply{display:block;font-size:var(--t1);color:var(--sub);border-left:var(--bdw) solid var(--line);padding-left:var(--s2);margin-bottom:var(--s1)}
.me-row{display:flex;align-items:center;gap:var(--s2)}
.link-btn{color:var(--ac);font-weight:600;font-size:var(--t2);height:var(--hit);padding:0 var(--s2)}
.sheet .logs{margin-top:var(--s4);display:grid;gap:var(--s2);max-height:40vh;overflow:auto}
.sheet .logs .bub{box-shadow:none;background:var(--bg)}
.sheet textarea{width:100%;min-height:calc(var(--hit) * 2);border-radius:var(--r);background:var(--bg);padding:var(--s3);font:inherit;font-size:var(--t3);border:0;resize:vertical;margin-top:var(--s3)}
/* 폴드 펼침(720~1023): 오늘 화면 옆에 메신저 2단 */
@media (min-width:720px) and (max-width:1023px){
  .shell{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:var(--s4)}
  .side{display:block;position:sticky;top:var(--s4);align-self:start;margin-top:var(--s5)}
  .side .chat{max-height:calc(100vh - 300px);overflow:auto;padding:var(--s4)}
  .side .compose{position:static;margin-top:var(--s3)}
}
.tm{flex:none;font-size:var(--t2);color:var(--sub);font-variant-numeric:tabular-nums}
/* 메시지 묶음: 이어 쓴 말풍선은 간격 좁게, 날짜 줄 */
.msg.cont{margin-top:calc(var(--s1) - var(--s2))}
.day-line{align-self:center;font-size:var(--t1);color:var(--sub);background:var(--plan-bg);border-radius:var(--r);padding:var(--s1) var(--s3);margin:var(--s2) 0}
.msg{align-self:flex-start;align-items:flex-start}
.msg.me{align-self:flex-end;align-items:flex-end}
/* 설정 켜고 끄는 칸 (아이폰 스위치 모양) */
.toggle{flex:none;width:calc(var(--s6) + var(--s5) - var(--s1));height:var(--s6);border-radius:var(--s4);background:var(--line);position:relative;transition:background-color .2s ease-out}
.toggle::after{content:"";position:absolute;top:var(--s1);left:var(--s1);width:calc(var(--s5));height:calc(var(--s5));border-radius:var(--round);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s ease-out}
.toggle.on{background:var(--done)}
.toggle.on::after{transform:translateX(calc(var(--s5) - var(--s1)))}