/* 夜の記録 — 泣きたい夜もある（端末内保存の日記アプリ） */

:root {
  --bg: #0b0d16;
  --surface: #141726;
  --surface-2: #1b1f30;
  --line: #2a2d3a;
  --text: #e9e9ed;
  --muted: #9397ab;
  --muted-2: #b2b6ca;
  --accent: #9188c4;
  --accent-soft: #d2cefd;
  --mincho: "Shippori Mincho", serif;
  --sans: "Zen Kaku Gothic New", sans-serif;
  --n0: #0a0b14; /* 漆黒 */
  --n1: #182544; /* 紺青 */
  --n2: #264a82; /* 瑠璃紺 */
  --n3: #4664ae; /* 群青 */
  --n4: #5e5aa0; /* 桔梗色 */
  --n5: #9188c4; /* 藤色 */
  --n6: #e6c9c0; /* 東雲色 */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #161a2e 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.7;
  min-height: 100dvh;
}
button { font-family: inherit; cursor: pointer; }

.app {
  max-width: 560px; margin: 0 auto; min-height: 100dvh;
  padding: 0 20px calc(88px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}

/* header */
.app-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: calc(20px + env(safe-area-inset-top)) 4px 20px;
}
.app-brand { font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .2em; color: var(--text); text-decoration: none; }
.app-sub { font-size: 11px; letter-spacing: .28em; color: var(--accent-soft); margin-left: auto; }

/* views */
.view { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* record */
.record-inner { padding: 8px 4px; }
.today-label { font-size: 12px; letter-spacing: .18em; color: var(--muted); margin-bottom: 14px; }
.ask { font-family: var(--mincho); font-weight: 500; font-size: 25px; line-height: 1.7; letter-spacing: .06em; margin-bottom: 30px; }

.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.swatch {
  aspect-ratio: 1 / 1.5; border-radius: 12px; border: 1px solid rgba(255,255,255,.06);
  position: relative; transition: transform .18s ease, box-shadow .18s ease, outline-color .18s;
  outline: 2px solid transparent; outline-offset: 3px;
}
.swatch:hover { transform: translateY(-3px); }
.swatch.is-active { outline-color: var(--accent-soft); transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.swatch-name {
  text-align: center; font-family: var(--mincho); font-size: 18px; letter-spacing: .16em;
  margin-top: 20px; min-height: 1.6em; color: var(--muted-2); transition: color .3s;
}
.swatch-name .ruby { font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-left: .4em; }
.swatch-desc { text-align: center; font-size: 13px; letter-spacing: .06em; color: var(--muted); margin-top: 8px; min-height: 1.2em; }

.record-rest { margin-top: 34px; animation: fade .5s ease both; }
.block { margin-bottom: 30px; }
.block-label { font-size: 13px; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 14px; }
.block-label .opt { color: var(--muted); font-size: 11px; }

.phrase-cards { display: flex; flex-direction: column; gap: 10px; }
.phrase-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; color: var(--muted-2); font-family: var(--mincho); font-size: 14px; line-height: 2;
  letter-spacing: .04em; transition: border-color .2s, background .2s, color .2s; white-space: pre-line;
}
.phrase-card:hover { border-color: var(--accent); }
.phrase-card.is-active { border-color: var(--accent); background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }

.text-link {
  background: none; border: none; color: var(--muted); font-size: 12px; letter-spacing: .1em;
  padding: 10px 4px 0; margin-right: 16px;
}
.text-link:hover { color: var(--accent-soft); }

.memo {
  width: 100%; background: var(--surface); color: var(--text); font-family: var(--sans); font-size: 14px;
  line-height: 1.9; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; resize: vertical;
}
.memo::placeholder { color: var(--muted); }
.memo:focus-visible { outline: none; border-color: var(--accent); }

.save-btn {
  width: 100%; margin-top: 6px; padding: 15px; border-radius: 14px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-soft);
  font-family: var(--mincho); font-size: 15px; letter-spacing: .14em; transition: background .2s;
}
.save-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.save-btn:disabled { opacity: .4; cursor: default; }
.saved-note { text-align: center; font-family: var(--mincho); font-size: 13px; letter-spacing: .1em; color: var(--accent-soft); margin-top: 16px; }

/* calendar */
.cal-head { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 4px 0 20px; }
.cal-title { font-family: var(--mincho); font-weight: 500; font-size: 19px; letter-spacing: .12em; min-width: 9em; text-align: center; }
.cal-nav { background: none; border: none; color: var(--muted-2); font-size: 26px; line-height: 1; padding: 4px 12px; border-radius: 8px; }
.cal-nav:hover { color: var(--accent-soft); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 7px; }
.cal-dow span { text-align: center; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal-cell { aspect-ratio: 1; border-radius: 9px; position: relative; border: 1px solid transparent; }
.cal-cell.empty { background: transparent; }
.cal-cell.blank { visibility: hidden; }
.cal-cell.has { cursor: pointer; transition: transform .15s; }
.cal-cell.has:hover { transform: scale(1.06); }
.cal-cell.no-entry { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.05); }
.cal-cell .d { position: absolute; top: 4px; left: 6px; font-size: 9px; color: rgba(255,255,255,.4); }
.cal-cell.light .d { color: rgba(0,0,0,.4); }
.cal-cell.today { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.cal-empty, .words-empty { text-align: center; font-family: var(--mincho); font-size: 14px; line-height: 2; color: var(--muted); margin-top: 40px; }
.cal-cell.no-entry.recordable { cursor: pointer; }
.cal-cell.no-entry.recordable:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.cal-hint { text-align: center; font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-top: 18px; }

/* wave */
.wave-block { margin-top: 34px; }
.wave-label { font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.wave { width: 100%; }
.wave svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.wave-axis { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .1em; color: var(--muted); margin-top: 6px; }

/* words */
.words-title { font-family: var(--mincho); font-weight: 500; font-size: 21px; letter-spacing: .12em; padding-top: 4px; }
.words-sub { font-size: 12px; letter-spacing: .06em; color: var(--muted); margin: 8px 0 24px; }
.words-list { display: flex; flex-direction: column; gap: 12px; }
.word-item { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.word-swatch { width: 8px; border-radius: 999px; flex: none; }
.word-body { min-width: 0; }
.word-date { font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.word-phrase { font-family: var(--mincho); font-size: 14px; line-height: 1.9; letter-spacing: .04em; color: var(--text); white-space: pre-line; }
.word-memo { font-size: 12px; color: var(--muted-2); margin-top: 8px; line-height: 1.8; white-space: pre-line; }

/* detail sheet */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(6,7,12,.66); display: grid; place-items: end center; z-index: 40; animation: fade .25s ease; }
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 560px; background: var(--surface); border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line); padding: 26px 24px calc(28px + env(safe-area-inset-bottom));
  animation: rise .3s ease both;
}
@keyframes rise { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-color { height: 76px; border-radius: 14px; margin-bottom: 18px; }
.sheet-date { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.sheet-colorname { font-family: var(--mincho); font-size: 20px; letter-spacing: .14em; margin: 4px 0 16px; }
.sheet-colorname .ruby { font-size: 12px; color: var(--muted); margin-left: .5em; }
.sheet-phrase { font-family: var(--mincho); font-size: 15px; line-height: 2.1; letter-spacing: .05em; color: var(--accent-soft); border-left: 2px solid var(--accent); padding-left: 14px; margin-bottom: 14px; white-space: pre-line; }
.sheet-memo { font-size: 13px; line-height: 1.9; color: var(--muted-2); white-space: pre-line; margin-bottom: 14px; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-edit, .sheet-close { flex: 1; padding: 13px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted-2); font-size: 14px; letter-spacing: .1em; }
.sheet-edit { border-color: var(--accent); color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sheet-edit:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sheet-close:hover { border-color: var(--accent); color: var(--accent-soft); }

/* tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.tab {
  flex: 1; max-width: 150px; background: none; border: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; letter-spacing: .12em; padding: 8px 4px; border-radius: 12px; transition: color .2s;
}
.tab .tab-i { font-size: 17px; line-height: 1; }
.tab.is-active { color: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }