* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root {
  --bg: #14161f;
  --card: #1d2030;
  --ink: #edeff8;
  --ink-2: #8b91a7;
  --line: #2c3047;
  --accent: #8f7bff;
  --accent-soft: #2c2752;
  --green: #3ecf8e;
  --red: #ff5d6c;
  --red-soft: #3a2230;
  --fill: #272b3f;
  --radius: 18px;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  /* 감정색 (달력 히트맵) */
  --emo-party: #b7791f;
  --emo-loved: #c2417c;
  --emo-happy: #2f9e6e;
  --emo-meh: #5b667e;
  --emo-shy: #8b5cc9;
  --emo-bittersweet: #2f89a8;
  --emo-annoyed: #c65a2e;
  --emo-sad: #4763c9;
  --emo-note: #3a3f58;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro KR", "Apple SD Gothic Neo",
    "Pretendard", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink);
  max-width: 560px; margin: 0 auto; padding: 16px 16px 48px;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
header { display: flex; align-items: baseline; gap: 10px; padding: 14px 4px 18px; }
header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
#who { margin-left: auto; font-size: 13px; color: var(--ink-2); }
button {
  font-family: inherit; font-size: 15px; cursor: pointer;
  border: 1px solid var(--line); background: var(--fill); color: var(--ink);
  border-radius: 12px; padding: 7px 14px; transition: background 0.15s, transform 0.05s;
}
button:active { transform: scale(0.97); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { border-color: transparent; background: var(--red-soft); color: var(--red); }

#familyTabs { display: flex; gap: 8px; padding: 0 2px 14px; flex-wrap: wrap; }
#familyTabs button { border-radius: 999px; background: var(--fill); border-color: transparent;
  color: var(--ink-2); font-weight: 500; padding: 7px 16px; }
#familyTabs button.on { background: var(--accent); color: #fff; }

main { background: var(--card); border: none; border-radius: var(--radius);
  padding: 18px 16px 16px; box-shadow: var(--shadow); }
#calHead { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 0 2px; }
#calHead h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
#calHead button { border: none; background: var(--fill); color: var(--accent);
  border-radius: 999px; width: 34px; height: 34px; padding: 0; font-size: 13px; }
#calGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-2);
  padding-bottom: 4px; }
.dow:first-child { color: #ff7b8b; }
.cell { position: relative; aspect-ratio: 1; border: none; border-radius: 12px;
  background: rgba(32, 35, 51, 0.55); cursor: pointer; overflow: hidden; transition: filter 0.15s, background 0.15s; }
.cell:hover { background: var(--fill); }
.cell.empty { background: transparent; cursor: default; }
.cell.empty:hover { background: transparent; }
.cell.future { opacity: 0.32; cursor: default; }
.cell.future:hover { background: rgba(32, 35, 51, 0.55); }
.cell.today { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
/* 감정색 히트맵 — app.js가 data-emo="{이모지 키}"를 붙여줌 */
.cell[data-emo="party"] { background: var(--emo-party); }
.cell[data-emo="loved"] { background: var(--emo-loved); }
.cell[data-emo="happy"] { background: var(--emo-happy); }
.cell[data-emo="meh"] { background: var(--emo-meh); }
.cell[data-emo="shy"] { background: var(--emo-shy); }
.cell[data-emo="bittersweet"] { background: var(--emo-bittersweet); }
.cell[data-emo="annoyed"] { background: var(--emo-annoyed); }
.cell[data-emo="sad"] { background: var(--emo-sad); }
.cell[data-emo="note"] { background: var(--emo-note); }
.cell[data-emo]:hover { filter: brightness(1.15); }
.cell[data-emo] .dnum { color: rgba(255, 255, 255, 0.78); }
.dnum { position: absolute; top: 4px; left: 6px; font-size: 11px; font-weight: 600;
  color: var(--ink-2); }
.cell.today .dnum { color: var(--accent); }
.cell[data-emo].today { box-shadow: inset 0 0 0 2px var(--accent); }
.demoji { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 22px; padding-top: 8px; }
.dphoto { position: absolute; right: 3px; bottom: 2px; font-size: 10px; }
#todayBtn { display: block; width: 100%; margin-top: 16px; padding: 14px; font-size: 17px;
  font-weight: 600; background: var(--accent); border: none; color: #fff; border-radius: 12px; }
#todayBtn:hover { background: #9f8dff; }

#modal { position: fixed; inset: 0; background: rgba(5, 6, 12, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px; overflow-y: auto; z-index: 10; }
#modalCard { background: var(--card); border-radius: var(--radius); padding: 20px;
  width: 100%; max-width: 460px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.vhead { display: flex; align-items: center; margin-bottom: 4px; }
.vhead h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.vhead .x { margin-left: auto; border: none; background: var(--fill); border-radius: 999px;
  width: 30px; height: 30px; padding: 0; font-size: 13px; color: var(--ink-2); }
.vemoji { font-size: 48px; text-align: center; margin: 14px 0; }
.vemoji span { font-size: 16px; margin-left: 10px; color: var(--ink-2); font-weight: 500; }
.vwords, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { border-radius: 999px; font-size: 14px; padding: 6px 14px; background: var(--fill);
  border: none; color: var(--ink); font-weight: 500; }
.chip.on { background: var(--accent); color: #fff; }
.vhabits { list-style: none; margin: 10px 0; color: var(--ink); font-size: 15px; }
.vhabits li { padding: 3px 0; }
.vstress { margin: 10px 0; font-size: 15px; color: var(--ink-2); }
.vphoto { width: 100%; border-radius: 14px; margin: 10px 0; display: block; }
.vbody { white-space: pre-wrap; background: var(--fill); border: none;
  border-radius: 12px; padding: 14px; margin: 10px 0; font-size: 15px; line-height: 1.55; }
.btns { display: flex; gap: 10px; margin-top: 16px; }
.btns button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 500; }

.flabel { margin: 18px 0 8px; color: var(--ink-2); font-weight: 600; font-size: 13px; }
.emojiPick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.emojiPick button { font-size: 26px; padding: 10px 0; background: var(--fill); border: none;
  border-radius: 12px; }
.emojiPick button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.habit { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.habit span { flex: 1; font-size: 15px; }
.yn { background: var(--fill); border: none; border-radius: 999px; font-size: 13px;
  font-weight: 600; color: var(--ink-2); padding: 6px 14px; }
.yn.on { background: var(--green); color: #0c2b1d; }
.yn.onno { background: var(--red); color: #fff; }
#fStress { display: flex; gap: 8px; flex-wrap: wrap; }
.bolt { background: var(--fill); border: none; border-radius: 10px; font-size: 14px;
  padding: 8px 12px; color: var(--ink-2); }
.bolt.on { background: #3a3220; color: var(--ink); box-shadow: inset 0 0 0 2px #ffc94d; }
textarea { width: 100%; font-family: inherit; font-size: 15px; line-height: 1.55;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: var(--bg); resize: vertical; color: var(--ink); }
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea::placeholder { color: var(--ink-2); }
#fPhotoZone img { width: 100%; border-radius: 14px; margin-bottom: 8px; display: block; }

#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(237, 239, 248, 0.96); -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); color: #14161f; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; z-index: 20; box-shadow: var(--shadow); }
.err { padding: 48px 16px; text-align: center; font-size: 17px; color: var(--ink-2); }