/* 未来の自分への手紙 */
:root {
  --accent: #8a3b52; --accent-soft: #f6e4ea; --accent-ink: #ffffff;
  --mt-env: #efe3c8; --mt-env-front: #e6d4ae; --mt-flap: #dcc79c; --mt-edge: #c4ab7a; --mt-paper: #fffdf7; --mt-line: #d7cdb8;
  --mt-wax-red: #b3262e; --mt-wax-navy: #2c3e7a; --mt-wax-gold: #c9971f; --mt-wax-hi: rgba(255, 255, 255, .45);
  --mt-shadow: rgba(40, 30, 20, .18); --mt-warn: #fff3d6; --mt-warn-line: #e0b04a; --mt-care: #e8f1fb; --mt-care-line: #6b9bd1;
  --mt-paper-bg: #fffcf3; --mt-ink: #3a3026;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #f08aa8; --accent-soft: #3a2230; --accent-ink: #1a1016; --mt-warn: #3a2f17; --mt-warn-line: #a07a2a; --mt-care: #1b2a3e; --mt-care-line: #4a78b0; --mt-paper-bg: #262234; --mt-ink: #eee8dc; --mt-shadow: rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] { --accent: #f08aa8; --accent-soft: #3a2230; --accent-ink: #1a1016; --mt-warn: #3a2f17; --mt-warn-line: #a07a2a; --mt-care: #1b2a3e; --mt-care-line: #4a78b0; --mt-paper-bg: #262234; --mt-ink: #eee8dc; --mt-shadow: rgba(0, 0, 0, .45); }

/* 封筒 */
.mt-env-wrap { max-width: 300px; margin: 0 auto; }
.mt-env-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mt-shadow { fill: var(--mt-shadow); }
.mt-env { fill: var(--mt-env); stroke: var(--mt-edge); stroke-width: 1.5; }
.mt-env-front { fill: var(--mt-env-front); stroke: var(--mt-edge); stroke-width: 1.5; }
.mt-flap { fill: var(--mt-flap); stroke: var(--mt-edge); stroke-width: 1.5; transform-box: view-box; transform-origin: 120px 40px; }
.mt-paper-r { fill: var(--mt-paper); stroke: var(--mt-line); }
.mt-paper-l { stroke: var(--mt-line); stroke-width: 2; }
.mt-paper { transform: translateY(28px); }
.is-closed .mt-paper { opacity: 0; }
.mt-wax { fill: var(--mt-wax-red); }
.seal-navy .mt-wax { fill: var(--mt-wax-navy); } .seal-gold .mt-wax { fill: var(--mt-wax-gold); }
.mt-wax-in { fill: none; stroke: var(--mt-wax-hi); stroke-width: 2; }
.mt-wax-mark { fill: var(--mt-wax-hi); }
.mt-seal { transform-box: view-box; transform-origin: 120px 100px; }
/* 開いた状態 */
.is-open .mt-flap, .is-opening .mt-flap { transform: scaleY(-1); }
.is-open .mt-paper, .is-opening .mt-paper { transform: translateY(-50px); }
.is-open .mt-seal, .is-opening .mt-seal { opacity: 0; }
.is-open .mt-flap, .is-opening .mt-flap { fill: var(--mt-env-front); }
/* 封をする演出：手紙が入る→フタが閉じる→封蝋が押される */
.is-sealing .mt-paper { animation: mt-in .9s ease-in-out .2s backwards; }
.is-sealing .mt-flap { animation: mt-close .6s ease-in-out 1.1s backwards; }
.is-sealing .mt-seal { animation: mt-stamp .5s cubic-bezier(.3, 1.6, .5, 1) 1.7s backwards; }
@keyframes mt-in { from { transform: translateY(-50px); } to { transform: translateY(28px); } }
@keyframes mt-close { from { transform: scaleY(-1); } to { transform: scaleY(1); } }
@keyframes mt-stamp { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 開封の演出 */
.is-opening .mt-seal { animation: mt-break .5s ease-in .2s backwards; }
.is-opening .mt-flap { animation: mt-openf .6s ease-in-out .6s backwards; }
.is-opening .mt-paper { animation: mt-out .9s ease-out 1.1s backwards; }
@keyframes mt-break { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.3) rotate(20deg); } }
@keyframes mt-openf { from { transform: scaleY(1); } to { transform: scaleY(-1); } }
@keyframes mt-out { from { transform: translateY(28px); } to { transform: translateY(-50px); } }
.mt-hero .mt-env-svg { animation: mt-float 4s ease-in-out infinite; }
@keyframes mt-float { 50% { transform: translateY(-6px); } }
.mt-stage { max-width: 320px; }
.mt-mini { width: 84px; flex: none; margin: 0; }

/* 注意・案内 */
.mt-warn { background: var(--mt-warn); border: 2px solid var(--mt-warn-line); border-radius: 14px; padding: 12px 14px; }
.mt-warn b { display: block; margin-bottom: 4px; }
.mt-warn p { margin: 0; color: var(--text); }
.mt-care { background: var(--mt-care); border: 1px solid var(--mt-care-line); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.mt-care p { color: var(--text); }
.mt-err { color: var(--bad); font-weight: 700; font-size: 14px; }

/* 書く */
.mt-dots { display: flex; gap: 5px; }
.mt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
.mt-dots i.done { background: var(--accent); opacity: .5; } .mt-dots i.cur { background: var(--accent); }
.mt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px; box-shadow: var(--shadow); text-align: center; }
.mt-card h2 { font-size: clamp(20px, 5.6vw, 24px); margin: 6px 0; }
.mt-card-n { font-weight: 900; color: var(--accent); letter-spacing: .1em; }
.mt-ta { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; line-height: 1.8; background: var(--mt-paper-bg); color: var(--mt-ink); resize: vertical; min-height: 110px; }
.mt-ta-l { min-height: 220px; }
.mt-ta-s { min-height: 80px; }
.mt-nav { display: flex; gap: 8px; }
.mt-paper-box { background: var(--mt-paper-bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.mt-paper-box .mt-ta { border: 0; padding: 4px 0; background: transparent; background-image: linear-gradient(transparent calc(1.8em - 1px), var(--line) 1px); background-size: 100% 1.8em; }
.mt-to { font-family: var(--font-serif); font-weight: 700; color: var(--mt-ink); }
.mt-periods { display: grid; gap: 8px; }
.mt-period { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; text-align: left; padding: 12px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.mt-period b { font-size: 18px; grid-row: span 2; align-self: center; min-width: 4.5em; }
.mt-period small { color: var(--text-sub); }
.mt-period.on { border-color: var(--accent); background: var(--accent-soft); }
.mt-sealpick { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mt-sealpick i { width: 30px; height: 30px; border-radius: 50%; display: block; background: var(--mt-wax-red); }
.mt-sealpick.seal-navy i { background: var(--mt-wax-navy); } .mt-sealpick.seal-gold i { background: var(--mt-wax-gold); }
.mt-sealpick.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 結果 */
.mt-date { font-family: var(--font-serif); font-size: clamp(30px, 9vw, 42px); font-weight: 900; color: var(--accent); line-height: 1.2; }
.mt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-two .mn-btn { font-size: 14px; }
.mt-bar { position: relative; background: var(--surface-2); border-radius: 8px; overflow: hidden; font-size: 14px; }
.mt-bar span { position: relative; z-index: 1; display: block; padding: 4px 10px; }
.mt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); }
.mt-bar.on span { font-weight: 700; color: var(--accent); }

/* 一覧・開封 */
.mt-item { display: flex; gap: 12px; align-items: flex-start; }
.mt-item.is-due { border-color: var(--accent); }
.mt-item .mn-btn { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.mt-due { border-color: var(--accent); color: var(--accent); }
.mt-letter { background: var(--mt-paper-bg); color: var(--mt-ink); border: 1px solid var(--line); border-radius: 14px; padding: 18px; font-family: var(--font-serif); }
.mt-ans { white-space: pre-wrap; font-size: 17px; margin: 2px 0 0; }
.mt-q { font-family: var(--font-serif); font-size: 18px; font-weight: 700; margin: 0; }
.mt-q-big { font-family: var(--font-serif); font-size: clamp(22px, 6vw, 28px); }
.mt-past { border-top: 1px solid var(--line); padding-top: 6px; }