/* ---------- 색과 기본값 (윤하 성장노트와 같은 따뜻한 톤) ---------- */
:root{
  --bg:      #F5F3EE;
  --card:    #FFFFFF;
  --ink:     #2E2A26;
  --ink-soft:#6E675E;
  --green:   #4E9C82;   /* ✋ 가능 */
  --green-d: #3B7A66;
  --green-l: #E7F1EC;
  --sos:     #D9644F;   /* 🆘 도움 필요 */
  --sos-l:   #FBE9E4;
  --line:    #E4DFD5;
  --radius:  14px;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Noto Sans KR", "맑은 고딕", sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); line-height:1.5; }
.wrap{ max-width:520px; margin:0 auto; padding:16px 16px 40px; }
button, input{ font:inherit; }

header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
header h1{ font-size:20px; margin:0; }
header h1 a{ color:inherit; text-decoration:none; }

.demo{ background:#FFF4D6; border:1px solid #F0DFA8; border-radius:10px;
       padding:8px 12px; font-size:13px; margin-bottom:12px; }

.view{ display:none; }
.view.active{ display:block; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
       padding:16px; margin-bottom:12px; }
.card h2{ font-size:17px; margin:0 0 4px; }
.hint{ color:var(--ink-soft); font-size:13px; margin:0 0 12px; }

label{ display:block; font-size:14px; margin:10px 0 4px; }
input[type=text], input[type=password]{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
input:focus{ outline:2px solid var(--green-l); border-color:var(--green); }

.btn{ display:inline-block; border:none; border-radius:10px; padding:11px 16px; cursor:pointer;
      background:var(--green); color:#fff; font-weight:600; }
.btn:active{ background:var(--green-d); }
.btn.full{ width:100%; margin-top:14px; }
.btn.ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); font-weight:400; }
.btn.small{ padding:6px 10px; font-size:13px; }
.btn.sos{ background:var(--sos); }
.btn:disabled{ opacity:.45; cursor:default; }

.error{ color:var(--sos); font-size:13px; min-height:1.2em; margin:8px 0 0; }

/* 최근 방 목록 */
.rooms{ list-style:none; margin:0; padding:0; }
.rooms li{ display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:10px 0; }
.rooms li:first-child{ border-top:none; }
.rooms a{ flex:1; color:var(--ink); text-decoration:none; font-weight:600; overflow-wrap:anywhere; }
.rooms .x{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:18px; }

/* 방 상단 */
.room-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.room-head h2{ overflow-wrap:anywhere; }
.me{ font-size:13px; color:var(--ink-soft); }
.me button{ background:none; border:none; color:var(--green-d); cursor:pointer; padding:0; font-size:13px; text-decoration:underline; }

/* 달력 */
.month-nav{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 8px; }
.month-nav strong{ font-size:17px; }
.month-nav button{ background:none; border:1px solid var(--line); border-radius:8px; width:36px; height:32px; cursor:pointer; }
.grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.dow{ text-align:center; font-size:12px; color:var(--ink-soft); padding:2px 0; }
.dow.sun{ color:var(--sos); }
.day{ min-height:62px; border:1px solid var(--line); border-radius:10px; background:#fff;
      padding:4px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:2px; }
.day.blank{ visibility:hidden; }
.day .n{ font-size:13px; }
.day.today{ border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
.day.past{ opacity:.45; }
.day.has-sos{ background:var(--sos-l); }
.badge{ font-size:11px; border-radius:6px; padding:0 4px; width:fit-content; white-space:nowrap; }
.badge.sos{ background:var(--sos); color:#fff; }
.badge.can{ background:var(--green-l); color:var(--green-d); }
.legend{ font-size:12px; color:var(--ink-soft); margin-top:8px; }

/* 날짜를 누르면 아래에서 올라오는 창 */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:10; }
.backdrop.open{ display:block; }
.sheet{ position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; background:var(--card);
        border-radius:18px 18px 0 0; padding:18px 16px 24px; max-height:85vh; overflow:auto;
        transform:translateY(100%); transition:transform .2s; z-index:11; }
.sheet.open{ transform:translateY(0); }
.sheet h3{ margin:0 0 10px; font-size:17px; }
.marks{ list-style:none; padding:0; margin:0 0 12px; }
.marks li{ border-radius:10px; padding:8px 10px; margin-bottom:6px; display:flex; gap:8px; align-items:flex-start; }
.marks li.sos{ background:var(--sos-l); }
.marks li.can{ background:var(--green-l); }
.marks .body{ flex:1; overflow-wrap:anywhere; }
.marks .sub{ font-size:13px; color:var(--ink-soft); white-space:pre-wrap; }
.marks .del{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:13px; }
.empty{ color:var(--ink-soft); font-size:14px; margin:0 0 12px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.two .btn{ width:100%; }
.form{ display:none; margin-top:6px; }
.form.open{ display:block; }

.toast{ position:fixed; left:50%; top:16px; transform:translateX(-50%); background:var(--ink); color:#fff;
        padding:10px 14px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none;
        transition:opacity .2s; z-index:20; max-width:calc(100% - 32px); text-align:center; }
.toast.show{ opacity:1; }

@media (max-width:380px){
  .day{ min-height:54px; padding:3px; }
  .badge{ font-size:10px; padding:0 3px; }
}