/* =========================================================
   未来のわたしから — style.css
   紙 / 私信 / 余白 / 呼吸
========================================================= */

:root{
  --paper:      #F4F1EA;
  --paper-deep: #EDE9DF;
  --ink:        #22211F;
  --indigo:     #243047;
  --bengara:    #A55448;   /* くすんだ赤 */
  --gold:       #B59A68;
  --mist:       #8E877D;
  --line:       #D9D2C7;

  --serif: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:  "Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;

  --dur: 600ms;
  --ease: cubic-bezier(.25,.46,.3,1);
  --maxw: 34rem;
}

/* ---------- 時間帯：紙そのものが呼吸する ---------- */
body[data-phase="morning"]{
  --paper:#F7F4EC; --paper-deep:#F0ECE1;
}
body[data-phase="noon"]{
  --paper:#F4F1EA; --paper-deep:#EDE9DF;
}
body[data-phase="night"]{
  --paper:#232733; --paper-deep:#1D212C;
  --ink:#EAE6DB; --mist:#9A948A; --line:#3A3F4D;
  --indigo:#C9D2E4; --gold:#C4AC7E;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* 安全弁：hidden属性は、いかなるdisplay指定よりも常に優先する。
   （.care-sheetや.bottom-navのdisplay:flexがhiddenを上書きして
     初期表示されてしまう事故を、CSSの層で確実に防ぐ） */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--paper);
  transition: background-color 1.2s ease, color 1.2s ease;
  min-height:100dvh;
  padding-bottom: calc(4.4rem + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

.serif{ font-family:var(--serif); letter-spacing:.06em; }

button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea{ font-family:inherit; color:inherit; }

#app{
  max-width:var(--maxw);
  margin:0 auto;
  padding: calc(1.2rem + env(safe-area-inset-top)) 1.4rem 2rem;
}

.screen{ animation: screenIn var(--dur) var(--ease); }
@keyframes screenIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   共通部品
========================================================= */

.btn{
  display:block;
  width:100%;
  padding:.95rem 1rem;
  font-size:.94rem;
  letter-spacing:.2em;
  text-indent:.2em;
  text-align:center;
  border-radius:2px;
  transition: opacity .25s ease, transform .15s ease, background-color .3s ease;
}
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.35; pointer-events:none; }

.btn-primary{
  background:var(--indigo);
  color:var(--paper);
  border:1px solid var(--indigo);
}
body[data-phase="night"] .btn-primary{ color:#1D212C; }

.btn-ghost{
  border:1px solid var(--line);
  color:var(--ink);
  background:transparent;
}
.btn-danger{
  border:1px solid var(--line);
  color:var(--bengara);
  background:transparent;
}

.link-quiet{
  font-size:.85rem;
  letter-spacing:.1em;
  color:var(--mist);
  padding:.6rem .2rem;
  transition:color .3s ease;
}
.link-quiet:hover{ color:var(--ink); }

.row-actions{
  display:flex; flex-direction:column; gap:.7rem;
  margin-top:1.8rem;
}

.back{
  font-size:1.1rem;
  color:var(--mist);
  padding:.4rem .8rem .4rem 0;
}

.sub-head{
  display:flex; align-items:baseline; gap:.4rem;
  margin-bottom:1.9rem;
}
.sub-title{
  font-size:1.22rem;
  font-weight:500;
  letter-spacing:.22em;
}

.pane-lead{
  font-size:.9rem;
  color:var(--mist);
  margin-bottom:2rem;
  line-height:2.2;
  letter-spacing:.05em;
}

/* ---------- 入力：便箋の罫 ---------- */
.field{ display:block; margin-bottom:1.6rem; }
.field-label{
  display:block;
  font-size:.75rem;
  letter-spacing:.16em;
  color:var(--mist);
  margin-bottom:.5rem;
}

.input-line{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:.5rem .1rem;
  font-size:1.02rem;
  line-height:1.9;
  transition:border-color .3s ease;
}
.input-line:focus{ outline:none; border-bottom-color:var(--gold); }
.input-line::placeholder,
.input-paper::placeholder{ color:var(--mist); opacity:.65; }

.input-paper{
  width:100%;
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.9rem 1rem;
  font-size:1rem;
  line-height:2.1;
  resize:none;
  transition:border-color .3s ease;
}
.input-paper:focus{ outline:none; border-color:var(--gold); }

/* =========================================================
   便箋（このアプリの署名要素）
========================================================= */
.letter{
  position:relative;
  background:var(--paper-deep);
  /* 紙の繊維：ごく薄い縦の綾を重ねる */
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,0) 40%);
  background-size: 3px 100%, 100% 100%;
  border:1px solid var(--line);
  border-radius:2px;
  padding:1.9rem 1.5rem 1.6rem 1.9rem;
  margin-bottom:.4rem;
  overflow:hidden;
}
body[data-phase="night"] .letter{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,0) 40%);
}
/* 弁柄の罫（和便箋のひとすじ） */
.letter::before{
  content:"";
  position:absolute;
  top:1.1rem; bottom:1.1rem; left:.95rem;
  width:1px;
  background:var(--bengara);
  opacity:.45;
}
/* 折り目 */
.letter::after{
  content:"";
  position:absolute;
  left:0; right:0; top:33%;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(0,0,0,.05), transparent);
  pointer-events:none;
}
body[data-phase="night"] .letter::after{
  background:linear-gradient(to right, transparent, rgba(255,255,255,.06), transparent);
}

/* 封印（朱点）：カード右上に小さく */
.letter-seal{
  position:absolute;
  top:1.4rem; right:1.4rem;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--bengara);
  opacity:.8;
}

.letter-from{
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--gold);
  margin-bottom:1.15rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
  margin-right:1.6rem;
}
.letter-body{
  font-size:1.05rem;
  line-height:2.35;
  letter-spacing:.07em;
}
.letter-body p{ margin-bottom:1.2em; }
.letter-body p:last-child{ margin-bottom:0; }
.letter-body em{
  font-style:normal;
  color:var(--bengara);
}
.letter-sign{
  margin-top:1.7rem;
  text-align:right;
  font-size:.84rem;
  color:var(--mist);
  letter-spacing:.16em;
}

.letter-compact .letter-body{ font-size:1.02rem; line-height:2.3; }

.letter-full{ padding-bottom:2.2rem; }

/* 一行ずつの静かな出現 */
.reveal p{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal p.shown{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal p{ opacity:1; transform:none; }
}

/* =========================================================
   オンボーディング
========================================================= */
.onb{ padding-top:13vh; }
.onb-seal{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--bengara);
  margin:0 auto 2.8rem;
  opacity:.85;
}
.onb-title{
  font-size:1.76rem;
  font-weight:500;
  line-height:2.05;
  text-align:center;
  letter-spacing:.14em;
  margin-bottom:2.4rem;
}
.onb-lead{
  font-size:.88rem;
  color:var(--mist);
  text-align:center;
  line-height:2.3;
  letter-spacing:.06em;
  margin-bottom:3.2rem;
}
.onb-eyebrow{
  font-size:.72rem;
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:1.2rem;
}
.onb-q{
  font-size:1.3rem;
  font-weight:500;
  line-height:2;
  margin-bottom:2rem;
}
.onb-hint{
  font-size:.78rem;
  color:var(--mist);
  margin:.9rem 0 2.4rem;
}
.onb .input-line{ font-size:1.15rem; }
.onb-step{ animation:screenIn var(--dur) var(--ease); }

.value-grid{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:.4rem;
}
.value-chip{
  font-family:var(--serif);
  font-size:.92rem;
  letter-spacing:.1em;
  padding:.5rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--mist);
  transition:all .3s ease;
}
.value-chip.is-on{
  border-color:var(--gold);
  color:var(--ink);
  background:var(--paper-deep);
}

/* =========================================================
   ホーム
========================================================= */
.home-head{ margin:1.1rem 0 2.1rem; }
.home-date{
  font-size:1.34rem;
  letter-spacing:.24em;
  margin-bottom:.45rem;
}
.home-greet{
  font-family:var(--serif);
  font-size:.86rem;
  color:var(--mist);
  letter-spacing:.1em;
  line-height:2.1;
}

.daily-letter{
  cursor:pointer;
  margin-bottom:.55rem;
  animation:letterArrive .9s var(--ease) both;
}
@keyframes letterArrive{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.daily-letter:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.daily-letter:active{ transform:translateY(1px); }

.daily-hint{
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--mist);
  opacity:.75;
  text-align:right;
  margin-bottom:2.2rem;
}

.phase-list{ display:flex; flex-direction:column; }
.phase-item{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.2rem .2rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  transition:opacity .3s ease;
}
.phase-item:first-child{ border-top:1px solid var(--line); }
.phase-item:active{ opacity:.6; }
.phase-time{
  font-family:var(--serif);
  font-size:1.08rem;
  color:var(--indigo);
  letter-spacing:.1em;
  width:1.4em;
}
.phase-label{
  flex:1;
  font-size:1rem;
  letter-spacing:.08em;
  line-height:1.9;
}
.phase-state{
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--mist);
}
.phase-state.done{ color:var(--bengara); }
.phase-item.is-now .phase-time{ color:var(--bengara); }

.home-foot{ margin-top:2.2rem; text-align:right; }

/* =========================================================
   朝：軸選び ／ 昼：気分
========================================================= */
.axis-grid, .mood-list{
  display:flex; flex-direction:column;
}
.axis-item, .mood-item{
  font-family:var(--serif);
  font-size:1.04rem;
  letter-spacing:.1em;
  text-align:left;
  padding:1.05rem .3rem;
  border-bottom:1px solid var(--line);
  transition:color .3s ease, padding-left .3s ease;
}
.axis-item:first-child, .mood-item:first-child{ border-top:1px solid var(--line); }
.axis-item:active{ color:var(--bengara); }
/* 朝の選択肢は、一行ずつ静かに現れる */
.axis-item{ animation:screenIn .7s var(--ease) both; }
.axis-item:nth-child(1){ animation-delay:.05s }
.axis-item:nth-child(2){ animation-delay:.13s }
.axis-item:nth-child(3){ animation-delay:.21s }
.axis-item:nth-child(4){ animation-delay:.29s }
.axis-item:nth-child(5){ animation-delay:.37s }
.axis-item:nth-child(6){ animation-delay:.45s }
.axis-item:nth-child(7){ animation-delay:.53s }

.rite-line{
  margin-top:1.6rem;
  font-size:.82rem;
  letter-spacing:.14em;
  color:var(--mist);
  text-align:center;
}

.mood-item.is-on{
  color:var(--bengara);
  padding-left:.9rem;
}
.mood-list{ margin-bottom:.6rem; }

/* 気分を選んだ瞬間の、未来からの小さな相槌 */
.mood-echo{
  min-height:2.2rem;
  font-size:.88rem;
  letter-spacing:.1em;
  color:var(--gold);
  text-align:right;
  margin-bottom:1rem;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.mood-echo.is-on{ opacity:1; transform:none; }

#noon-send{ margin-top:.4rem; }

/* 夜：封をしている間 */
.sealing{
  padding:4.5rem 0;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  animation:screenIn .5s var(--ease);
}
.sealing-seal{
  position:static;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bengara);
  opacity:.85;
}
.sealing-text{
  font-size:.95rem;
  letter-spacing:.3em;
  color:var(--mist);
}
.sealing-dots{ padding:0; }

/* =========================================================
   未来の自分を選ぶ
========================================================= */
.self-list{ display:flex; flex-direction:column; gap:1rem; margin-top:.4rem; }
.self-item{
  position:relative;
  text-align:left;
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-radius:2px;
  padding:1.2rem 1.3rem 1.1rem 1.6rem;
  transition:border-color .3s ease;
  overflow:hidden;
}
.self-item::before{
  content:"";
  position:absolute; top:.9rem; bottom:.9rem; left:.8rem;
  width:1px; background:var(--gold); opacity:.5;
}
.self-item:active{ border-color:var(--gold); }
.self-name{
  font-family:var(--serif);
  font-size:1.1rem;
  letter-spacing:.16em;
  margin-bottom:.2rem;
}
.self-desc{
  font-size:.78rem;
  color:var(--mist);
  letter-spacing:.06em;
}
.self-dist{
  position:absolute; top:1.1rem; right:1.2rem;
  font-size:.68rem; letter-spacing:.2em; color:var(--gold);
}

/* 手紙の宛先選択 */
.write-to{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.write-to .value-chip.is-on{ border-color:var(--bengara); }

/* =========================================================
   対話：往復書簡
========================================================= */
.sub-head-chat{ align-items:flex-start; }
.chat-with{ flex:1; }
.chat-sub{ font-size:.72rem; color:var(--mist); letter-spacing:.1em; }

.dialogue{
  min-height:40vh;
  padding-bottom:7rem;
}

.d-entry{ margin-bottom:2.2rem; animation:screenIn .7s var(--ease); }

/* 自分の言葉：小さく、右に、短い下線 */
.d-me{
  margin-left:22%;
  text-align:right;
}
.d-me .d-text{
  font-family:var(--serif);
  font-size:.95rem;
  line-height:2.1;
  letter-spacing:.05em;
  display:inline-block;
  text-align:left;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.d-me .d-meta{
  font-size:.65rem; color:var(--mist);
  letter-spacing:.14em; margin-top:.4rem;
}

/* 未来の言葉：便箋の段落として */
.d-you{ margin-right:8%; position:relative; padding-left:1.1rem; }
.d-you::before{
  content:"";
  position:absolute; left:0; top:.4rem; bottom:.3rem;
  width:1px; background:var(--bengara); opacity:.4;
}
.d-you .d-text{
  font-family:var(--serif);
  font-size:1rem;
  line-height:2.25;
  letter-spacing:.06em;
}
.d-you .d-text p{ margin-bottom:.9em; }
.d-you .d-text p:last-child{ margin-bottom:0; }
.d-you .d-text em{ font-style:normal; color:var(--bengara); }
.d-you .d-meta{
  font-size:.65rem; color:var(--gold);
  letter-spacing:.18em; margin-bottom:.6rem;
}

/* 「したためている」印 */
.d-writing{
  display:flex; gap:.45rem; padding:.6rem 0 0 1.1rem;
}
.d-writing i{
  width:5px; height:5px; border-radius:50%;
  background:var(--mist); opacity:.4;
  animation:breathe 1.6s ease-in-out infinite;
}
.d-writing i:nth-child(2){ animation-delay:.25s; }
.d-writing i:nth-child(3){ animation-delay:.5s; }
@keyframes breathe{
  0%,100%{ opacity:.25; transform:none; }
  50%{ opacity:.8; transform:translateY(-2px); }
}

.chat-input-bar{
  position:fixed;
  left:0; right:0;
  bottom:calc(3.6rem + env(safe-area-inset-bottom));
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:.7rem 1.2rem;
  display:flex; gap:.7rem; align-items:flex-end;
  transition:background-color 1.2s ease;
}
.chat-input-bar .input-paper{ flex:1; max-height:7rem; }
.send{
  font-size:.82rem;
  letter-spacing:.16em;
  color:var(--indigo);
  padding:.8rem .3rem;
  white-space:nowrap;
}
.send:disabled{ opacity:.35; }

/* =========================================================
   記録
========================================================= */
.hist-tabs{
  display:flex; gap:1.6rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.4rem;
}
.hist-tab{
  font-size:.85rem;
  letter-spacing:.16em;
  padding:.6rem .1rem;
  color:var(--mist);
  border-bottom:1px solid transparent;
  margin-bottom:-1px;
  transition:color .3s ease;
}
.hist-tab.is-on{
  color:var(--ink);
  border-bottom-color:var(--bengara);
}

.hist-list{ display:flex; flex-direction:column; }
.hist-item{
  text-align:left;
  padding:1.1rem .2rem;
  border-bottom:1px solid var(--line);
}
.hist-date{
  font-size:.68rem; letter-spacing:.18em;
  color:var(--gold); margin-bottom:.3rem;
}
.hist-excerpt{
  font-family:var(--serif);
  font-size:.95rem; line-height:2;
  letter-spacing:.05em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hist-empty{
  padding:3rem 0; text-align:center;
  color:var(--mist); font-size:.85rem; letter-spacing:.1em;
  line-height:2.2;
}

/* =========================================================
   共有カード
========================================================= */
.share-pick{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.6rem; }
.share-opt{
  font-family:var(--serif);
  text-align:left;
  font-size:.92rem;
  line-height:2;
  padding:.8rem 1rem;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--mist);
  transition:all .3s ease;
}
.share-opt.is-on{
  border-color:var(--gold);
  color:var(--ink);
  background:var(--paper-deep);
}
.share-preview{
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:.6rem;
}
#share-canvas{ display:block; width:100%; height:auto; }

/* =========================================================
   設定・ヘルプ
========================================================= */
.settings-sep{ height:1px; background:var(--line); margin:2rem 0; }
.settings-note{
  font-size:.8rem; color:var(--mist); line-height:2; margin-bottom:1rem;
}
.help-pane p{ margin-bottom:1.4em; font-size:.97rem; line-height:2.3; }
.help-note{ color:var(--mist); font-size:.88rem; }

/* =========================================================
   下部ナビ
========================================================= */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--paper);
  border-top:1px solid var(--line);
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  transition:background-color 1.2s ease;
  z-index:10;
}
.bn-item{
  position:relative;
  flex:1;
  padding:1rem 0 .95rem;
  font-size:.76rem;
  letter-spacing:.24em;
  text-indent:.24em; /* 字間ぶんの中央補正 */
  color:var(--mist);
  transition:color .3s ease;
}
/* 現在地：上端に細い弁柄のしるし */
.bn-item::after{
  content:"";
  position:absolute;
  top:-1px; left:50%;
  width:0; height:2px;
  background:var(--bengara);
  transform:translateX(-50%);
  transition:width .35s var(--ease);
}
.bn-item.is-on{ color:var(--ink); }
.bn-item.is-on::after{ width:2.4rem; }

/* =========================================================
   やわらかな案内
========================================================= */
.care-sheet{
  position:fixed; inset:0;
  background:rgba(34,33,31,.45);
  display:flex; align-items:flex-end;
  z-index:50;
  animation:fadeIn .4s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.care-inner{
  background:var(--paper);
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  border-radius:6px 6px 0 0;
  padding:2rem 1.6rem calc(2rem + env(safe-area-inset-bottom));
  animation:sheetUp .5s var(--ease);
}
@keyframes sheetUp{ from{ transform:translateY(30px); opacity:0 } to{ transform:none; opacity:1 } }
.care-title{
  font-size:1.2rem; letter-spacing:.16em; margin-bottom:1rem;
}
.care-body{
  font-size:.9rem; color:var(--mist); line-height:2.1; margin-bottom:1rem;
}
.care-list{
  list-style:none;
  margin-bottom:1.4rem;
}
.care-list li{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:2;
  padding:.45rem 0 .45rem 1rem;
  position:relative;
}
.care-list li::before{
  content:"";
  position:absolute; left:0; top:1.05em;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold);
}

/* =========================================================
   小さな画面への配慮
========================================================= */
@media (max-width:360px){
  body{ font-size:14px; }
  .onb-title{ font-size:1.5rem; }
}