/*
Theme Name: よるのこころトレ
Theme URI: https://kokotore-demo.hiyori-office.com
Description: 恋愛の心のトレーニングルーム「よるのこころトレ」の会員制サイト用テーマ
Version: 0.8.0
Text Domain: yoru-kokotore
*/
      :root {
        --bg: #f3f0fa;
        --bg-deep: #e9e2f6;
        --ink: #2c2547;
        --ink-soft: #5d5478;
        --ink-faint: #8a81a3;
        --card: #ffffff;
        --card-line: #ddd3ef;
        --violet: #6a55a3;
        --violet-deep: #463a75;
        --pink: #d96b9e;
        --pink-soft: #fbe9f2;
        --gold: #c98f2d;
        --gold-soft: #faf0da;
        --night: #221c42;
        --night-ink: #efeaff;
        --night-soft: #bdb2dd;
        --shadow: 0 10px 30px rgba(70, 58, 117, 0.12);
        --radius: 18px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #16122b;
          --bg-deep: #100d20;
          --ink: #ede9fa;
          --ink-soft: #bdb2dd;
          --ink-faint: #8f85b3;
          --card: #211b3f;
          --card-line: #3a3163;
          --violet: #a48fd8;
          --violet-deep: #c9bcf0;
          --pink: #eda3c6;
          --pink-soft: #3a2440;
          --gold: #eec27a;
          --gold-soft: #38301c;
          --night: #0d0a1c;
          --night-ink: #efeaff;
          --night-soft: #bdb2dd;
          --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
        font-size: 16px;
        line-height: 1.85;
        -webkit-font-smoothing: antialiased;
      }
      img { max-width: 100%; display: block; }
      .wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
      .mincho { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }

      /* ---------- hero ---------- */
      .hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #171233 0%, #241b4d 55%, #3a2a63 100%);
        color: var(--night-ink);
        padding: 56px 0 0;
      }
      .hero .stars { position: absolute; inset: 0; pointer-events: none; }
      .hero-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 20px; text-align: center; }
      .hero .brand {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 13px; letter-spacing: 0.22em; color: var(--night-soft);
        border: 1px solid rgba(189, 178, 221, 0.4); border-radius: 999px; padding: 4px 14px 4px 10px;
      }
      .hero h1 {
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
        font-size: clamp(34px, 8.5vw, 52px);
        font-weight: 700; line-height: 1.3; margin: 22px 0 6px; letter-spacing: 0.04em;
      }
      .hero h1 .kari { font-size: 0.45em; color: var(--night-soft); letter-spacing: 0.1em; white-space: nowrap; }
      .hero .subtitle {
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
        font-size: clamp(16px, 4.4vw, 20px); line-height: 1.9; color: #e6defc; margin: 14px auto 0; max-width: 560px;
      }
      .promises {
        display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 26px 0 0; padding: 0; list-style: none;
      }
      .promises li {
        font-size: 13.5px; background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(189, 178, 221, 0.35); border-radius: 999px; padding: 6px 14px; color: #e9e3fd;
      }
      .hero-cta { margin: 28px 0 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
      .btn {
        display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px;
        border-radius: 999px; padding: 14px 30px; border: none; cursor: pointer; line-height: 1.5;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      .btn:active { transform: scale(0.98); }
      .btn-pink { background: linear-gradient(135deg, #ef8fb9, #d96b9e); color: #fff; box-shadow: 0 8px 22px rgba(217, 107, 158, 0.4); }
      .btn-ghost { background: transparent; color: var(--night-ink); border: 1px solid rgba(239, 234, 255, 0.55); }
      .hero .cta-note { font-size: 12.5px; color: var(--night-soft); margin: 0; }
      .hero-img { position: relative; max-width: 760px; margin: 0 auto; padding: 0 20px; }
      .hero-img img { border-radius: 20px 20px 0 0; width: 100%; height: auto; }

      /* ---------- sections ---------- */
      section { padding: 58px 0 6px; }
      .kicker {
        text-align: center; font-size: 12.5px; letter-spacing: 0.28em; color: var(--pink); font-weight: 700; margin: 0 0 10px;
      }
      h2 {
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; text-align: center;
        font-size: clamp(23px, 6vw, 30px); line-height: 1.5; margin: 0 0 14px; font-weight: 700;
      }
      .lead { text-align: center; color: var(--ink-soft); max-width: 560px; margin: 0 auto 30px; font-size: 15.5px; }

      .worry-list { display: grid; gap: 14px; }
      @media (min-width: 640px) { .worry-list { grid-template-columns: repeat(3, 1fr); } }
      .worry {
        background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
        padding: 22px 20px; box-shadow: var(--shadow);
      }
      .worry .moon { color: var(--violet); margin-bottom: 8px; }
      .worry h3 { font-size: 16.5px; margin: 0 0 8px; line-height: 1.6; }
      .worry p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
      .worry-after { text-align: center; margin: 26px auto 0; max-width: 540px; color: var(--ink-soft); font-size: 15px; }
      .worry-after strong { color: var(--ink); }

      /* cycle */
      .cycle { display: grid; gap: 12px; counter-reset: wk; }
      @media (min-width: 640px) { .cycle { grid-template-columns: 1fr 1fr; } }
      .week {
        background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
        padding: 20px 22px; box-shadow: var(--shadow); position: relative;
      }
      .week .wk {
        display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
        color: var(--violet-deep); background: var(--bg-deep); border-radius: 6px; padding: 2px 10px; margin-bottom: 8px;
      }
      .week h3 { margin: 0 0 6px; font-size: 17.5px; }
      .week p { margin: 0; font-size: 14px; color: var(--ink-soft); }
      .daily {
        margin-top: 14px; background: var(--night); color: var(--night-ink); border-radius: var(--radius);
        padding: 24px 24px 20px; display: flex; gap: 18px; align-items: flex-start;
      }
      .daily .big { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 40px; line-height: 1; color: var(--gold); white-space: nowrap; }
      .daily h3 { margin: 0 0 6px; font-size: 17px; color: #fff; }
      .daily p { margin: 0; font-size: 14px; color: var(--night-soft); }

      /* member features */
      .features { display: grid; gap: 14px; }
      @media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
      .feature {
        background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
        padding: 22px; box-shadow: var(--shadow);
      }
      .feature .ic {
        width: 42px; height: 42px; border-radius: 12px; background: var(--pink-soft); color: var(--pink);
        display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
      }
      .feature h3 { margin: 0 0 8px; font-size: 16.5px; }
      .feature p { margin: 0; font-size: 14px; color: var(--ink-soft); }
      .feature.emergency { grid-column: 1 / -1; background: linear-gradient(135deg, #241b4d, #3a2a63); border: none; color: var(--night-ink); }
      .feature.emergency .ic { background: rgba(238, 194, 122, 0.18); color: var(--gold); }
      .feature.emergency h3 { color: #fff; }
      .feature.emergency p { color: var(--night-soft); }

      /* emergency demo */
      .demo {
        margin-top: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(189, 178, 221, 0.35);
        border-radius: 14px; padding: 18px;
      }
      .demo .demo-title { font-size: 13px; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; margin: 0 0 10px; }
      .demo-step { display: none; }
      .demo-step.on { display: block; }
      .demo-step .s-num { font-size: 12px; color: var(--night-soft); letter-spacing: 0.1em; }
      .demo-step p { color: #f2edff; font-size: 15.5px; margin: 4px 0 0; }
      .demo-progress { height: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 99px; overflow: hidden; margin: 14px 0; }
      .demo-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ef8fb9, #eec27a); transition: width 0.4s linear; }
      .demo-btn {
        background: #eec27a; color: #3a2c10; border: none; font-weight: 700; font-size: 14.5px;
        border-radius: 999px; padding: 10px 22px; cursor: pointer;
      }
      .demo-btn:disabled { opacity: 0.55; cursor: default; }

      /* night consultation room (AI demo) */
      .consult-card {
        background: linear-gradient(160deg, #241b4d, #32245e 70%, #3a2a63);
        color: var(--night-ink); border-radius: 24px; padding: 26px 22px 22px;
        box-shadow: var(--shadow); overflow: hidden;
      }
      @media (min-width: 640px) { .consult-card { padding: 32px 30px 26px; } }
      .consult-notice {
        background: rgba(238, 194, 122, 0.12); border: 1px solid rgba(238, 194, 122, 0.45);
        border-radius: 12px; padding: 12px 16px; font-size: 13px; line-height: 1.8; color: #f3e9d2; margin: 0 0 18px;
      }
      .consult-notice strong { color: var(--gold); }
      .consult-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
      .consult-avatar {
        width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
        background: rgba(238, 194, 122, 0.18); color: var(--gold);
        display: flex; align-items: center; justify-content: center;
        border: 1px solid rgba(238, 194, 122, 0.5);
      }
      .consult-head .c-name { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.4; margin: 0; }
      .consult-head .c-role { font-size: 12.5px; color: var(--night-soft); margin: 0; line-height: 1.5; }
      .consult-head .c-online { margin-left: auto; font-size: 12px; color: #a8e6b0; white-space: nowrap; }
      .consult-head .c-online::before { content: "●"; font-size: 9px; margin-right: 5px; vertical-align: 2px; }
      .chat-log {
        background: rgba(13, 10, 28, 0.45); border: 1px solid rgba(189, 178, 221, 0.25);
        border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px;
        max-height: 520px; overflow-y: auto; overscroll-behavior: contain;
      }
      .msg { display: flex; gap: 8px; max-width: 92%; }
      @media (min-width: 640px) { .msg { max-width: 85%; } }
      .msg.ai { align-self: flex-start; }
      .msg.user { align-self: flex-end; flex-direction: row-reverse; }
      .msg .m-avatar {
        width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
        background: rgba(238, 194, 122, 0.18); color: var(--gold);
        display: flex; align-items: center; justify-content: center;
      }
      .bubble { border-radius: 16px; padding: 12px 15px; font-size: 14.5px; line-height: 1.85; overflow-wrap: anywhere; }
      .msg.ai .bubble { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(189, 178, 221, 0.3); border-top-left-radius: 4px; color: #f2edff; }
      .msg.user .bubble { background: linear-gradient(135deg, #ef8fb9, #d96b9e); color: #fff; border-top-right-radius: 4px; }
      .bubble p { margin: 0 0 10px; }
      .bubble p:last-child { margin-bottom: 0; }
      .bubble .sort {
        background: rgba(13, 10, 28, 0.35); border-radius: 10px; padding: 10px 13px; margin: 0 0 10px; font-size: 13.5px;
      }
      .bubble .sort p { margin: 0 0 4px; }
      .bubble .sort p:last-child { margin-bottom: 0; }
      .bubble .sort .s-label { color: var(--gold); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; }
      .bubble .one-step {
        border: 1px solid rgba(238, 194, 122, 0.55); border-radius: 10px; padding: 10px 13px; margin: 0 0 10px; font-size: 14px;
      }
      .bubble .one-step .o-label { display: block; color: var(--gold); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; margin-bottom: 3px; }
      .bubble a.work-link { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
      .bubble .typing-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
      .bubble .typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--night-soft); animation: tybounce 1.1s infinite; }
      .bubble .typing-dots i:nth-child(2) { animation-delay: 0.18s; }
      .bubble .typing-dots i:nth-child(3) { animation-delay: 0.36s; }
      @keyframes tybounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
      @media (prefers-reduced-motion: reduce) { .bubble .typing-dots i { animation: none; } }
      .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
      .chips .chips-label { width: 100%; font-size: 12.5px; color: var(--night-soft); margin: 0 0 2px; letter-spacing: 0.06em; }
      .chip {
        background: rgba(255, 255, 255, 0.07); color: #efeaff; border: 1px solid rgba(189, 178, 221, 0.55);
        border-radius: 999px; padding: 9px 16px; font-size: 14px; cursor: pointer; font-family: inherit; line-height: 1.5;
      }
      .chip:active { background: rgba(238, 194, 122, 0.25); }
      .chip:disabled, .consult-send:disabled { opacity: 0.5; cursor: default; }
      .consult-form { display: flex; gap: 8px; align-items: flex-end; }
      .consult-form textarea {
        flex: 1; min-width: 0; resize: vertical; min-height: 52px; max-height: 140px;
        background: rgba(13, 10, 28, 0.55); border: 1px solid rgba(189, 178, 221, 0.45); border-radius: 14px;
        color: #fff; font-family: inherit; font-size: 15px; line-height: 1.7; padding: 12px 14px;
      }
      .consult-form textarea::placeholder { color: #9a8fc4; }
      .consult-form textarea:focus { outline: 2px solid rgba(238, 194, 122, 0.7); outline-offset: 1px; }
      .consult-send {
        background: #eec27a; color: #3a2c10; border: none; font-weight: 700; font-size: 15px; font-family: inherit;
        border-radius: 14px; padding: 13px 20px; cursor: pointer; white-space: nowrap; line-height: 1.5;
      }
      .consult-privacy { font-size: 12.5px; color: var(--night-soft); margin: 10px 0 0; line-height: 1.7; }
      .crisis-panel {
        display: none; margin-top: 14px; background: #fdf6ec; color: #4a3421;
        border: 1.5px solid #d9a441; border-radius: 16px; padding: 20px;
      }
      .crisis-panel.on { display: block; }
      .crisis-panel h3 { margin: 0 0 8px; font-size: 16.5px; color: #6b4a12; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
      .crisis-panel p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.85; }
      .crisis-panel p:last-child { margin-bottom: 0; }
      .crisis-panel ul { margin: 0 0 10px; padding-left: 20px; font-size: 14.5px; }
      .crisis-panel .emergency-num { font-weight: 700; font-size: 16px; }

      /* freebie */
      .freebie {
        background: var(--card); border: 1px solid var(--card-line); border-radius: 22px; box-shadow: var(--shadow);
        overflow: hidden; display: grid;
      }
      @media (min-width: 640px) { .freebie { grid-template-columns: 1fr 1fr; } }
      .freebie img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
      .freebie-body { padding: 28px 26px; }
      .freebie-body .free-tag {
        display: inline-block; background: var(--gold-soft); color: var(--gold); font-weight: 700; font-size: 12.5px;
        border-radius: 6px; padding: 2px 10px; letter-spacing: 0.08em; margin-bottom: 10px;
      }
      .freebie-body h3 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 21px; margin: 0 0 10px; line-height: 1.6; }
      .freebie-body p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 18px; }
      .freebie-body ul { margin: 0 0 20px; padding: 0; list-style: none; font-size: 14.5px; }
      .freebie-body ul li { padding-left: 22px; position: relative; margin-bottom: 6px; }
      .freebie-body ul li::before { content: "✦"; position: absolute; left: 2px; color: var(--pink); font-size: 12px; top: 3px; }
      .btn-navy { background: var(--violet-deep); color: #fff; box-shadow: var(--shadow); }
      @media (prefers-color-scheme: dark) { .btn-navy { background: var(--violet); color: #171233; } }
      .form-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }

      /* pricing */
      .plans { display: grid; gap: 16px; }
      @media (min-width: 640px) { .plans { grid-template-columns: 1fr 1fr; align-items: stretch; } }
      .plan {
        background: var(--card); border: 1px solid var(--card-line); border-radius: 22px;
        padding: 28px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column;
      }
      .plan.main { border: 2px solid var(--pink); position: relative; }
      .plan .badge {
        position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
        background: var(--pink); color: #fff; font-size: 12.5px; font-weight: 700;
        border-radius: 999px; padding: 3px 16px; white-space: nowrap;
      }
      .plan h3 { margin: 0 0 4px; font-size: 17px; text-align: center; }
      .plan .price { text-align: center; margin: 10px 0 2px; }
      .plan .price .num { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 40px; font-weight: 700; }
      .plan .price .unit { font-size: 14px; color: var(--ink-soft); }
      .plan .was { text-align: center; font-size: 13.5px; color: var(--ink-faint); margin: 0 0 6px; }
      .plan .was s { text-decoration-thickness: 1px; }
      .plan .per { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
      .plan ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 14.5px; }
      .plan ul li { padding-left: 24px; position: relative; margin-bottom: 8px; }
      .plan ul li::before { content: "✓"; position: absolute; left: 2px; color: var(--pink); font-weight: 700; }
      .plan .btn { text-align: center; margin-top: auto; }
      .plan-note {
        margin-top: 18px; background: var(--bg-deep); border-radius: 14px; padding: 18px 20px; font-size: 13.5px; color: var(--ink-soft);
      }
      .plan-note p { margin: 0 0 8px; }
      .plan-note p:last-child { margin-bottom: 0; }
      .plan-note strong { color: var(--ink); }

      /* single item */
      .single {
        background: var(--card); border: 1px dashed var(--violet); border-radius: 22px; padding: 26px;
        display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
      }
      .single h3 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 19px; margin: 0 0 6px; }
      .single p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 460px; }
      .single .s-price { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 26px; font-weight: 700; white-space: nowrap; }
      .single .s-price small { font-size: 13px; color: var(--ink-soft); font-family: inherit; }
      .btn-outline { background: transparent; border: 1.5px solid var(--violet); color: var(--violet-deep); }
      @media (prefers-color-scheme: dark) { .btn-outline { color: var(--violet); } }

      /* values */
      .values { background: var(--night); color: var(--night-ink); border-radius: 24px; padding: 32px 26px; }
      .values h3 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 20px; margin: 0 0 16px; color: #fff; text-align: center; }
      .values ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
      .values li { font-size: 14.5px; color: var(--night-soft); padding-left: 26px; position: relative; line-height: 1.8; }
      .values li::before { content: "☾"; position: absolute; left: 2px; color: var(--gold); }
      .values li strong { color: #fff; }
      .hotline { margin-top: 20px; border-top: 1px solid rgba(189, 178, 221, 0.3); padding-top: 16px; font-size: 13.5px; color: var(--night-soft); }
      .hotline strong { color: #fff; }

      /* faq */
      .faq { display: grid; gap: 10px; }
      .faq details {
        background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 4px 20px;
      }
      .faq summary {
        cursor: pointer; font-weight: 700; font-size: 15.5px; padding: 14px 0; list-style: none;
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
      }
      .faq summary::-webkit-details-marker { display: none; }
      .faq summary::after { content: "＋"; color: var(--pink); font-weight: 700; flex-shrink: 0; }
      .faq details[open ] summary::after { content: "－"; }
      .faq details p { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); }

      /* final cta */
      .final {
        margin-top: 58px; background: linear-gradient(160deg, #241b4d, #3a2a63); color: var(--night-ink);
        border-radius: 24px; padding: 40px 26px; text-align: center;
      }
      .final h2 { color: #fff; margin-bottom: 10px; }
      .final p { color: var(--night-soft); max-width: 480px; margin: 0 auto 24px; font-size: 15px; }

      footer { padding: 44px 0 54px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }
      footer .f-brand { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 15px; color: var(--ink-soft); letter-spacing: 0.08em; }
      footer p { margin: 6px 0; }

      /* ---------- member area ---------- */
      .member-view { padding-bottom: 10px; }
      .mv-topbar {
        display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
        padding: 18px 0 4px;
      }
      .mv-topbar .mv-brand { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.06em; }
      .mv-back {
        background: transparent; border: 1.5px solid var(--violet); color: var(--violet-deep);
        border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      @media (prefers-color-scheme: dark) { .mv-back { color: var(--violet); } }
      .mv-demo-note {
        background: var(--gold-soft); color: var(--ink-soft); border: 1px dashed var(--gold);
        border-radius: 12px; padding: 12px 16px; font-size: 13px; line-height: 1.8; margin: 12px 0 0;
      }
      .mv-demo-note strong { color: var(--ink); }
      .mv-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
      .mv-nav button {
        background: var(--card); border: 1px solid var(--card-line); color: var(--ink-soft);
        border-radius: 999px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; font-family: inherit;
      }
      .dash {
        margin-top: 20px; background: linear-gradient(160deg, #241b4d, #3a2a63); color: var(--night-ink);
        border-radius: 24px; padding: 28px 24px; box-shadow: var(--shadow);
      }
      .dash .d-greet { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px; line-height: 1.6; }
      .dash .d-sub { color: var(--night-soft); font-size: 14.5px; margin: 0 0 18px; }
      .dash-grid { display: grid; gap: 12px; }
      @media (min-width: 640px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
      .dash-box { background: rgba(255,255,255,0.07); border: 1px solid rgba(189,178,221,0.35); border-radius: 14px; padding: 16px 18px; }
      .dash-box .b-label { font-size: 12px; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; margin: 0 0 6px; }
      .dash-box .b-main { font-size: 16.5px; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.6; }
      .dash-box p { font-size: 13.5px; color: var(--night-soft); margin: 0; }
      .dash-progress { height: 8px; background: rgba(255,255,255,0.15); border-radius: 99px; overflow: hidden; margin: 10px 0 6px; }
      .dash-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ef8fb9, #eec27a); transition: width 0.4s ease; }
      .dash-always { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
      .dash-always button {
        background: rgba(238,194,122,0.16); border: 1px solid rgba(238,194,122,0.55); color: #f3e9d2;
        border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      .today-work { margin-top: 12px; background: rgba(13,10,28,0.4); border-radius: 14px; padding: 16px 18px; }
      .today-work .b-label { font-size: 12px; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; margin: 0 0 8px; }
      .today-work p { font-size: 14.5px; color: #f2edff; margin: 0 0 8px; }
      .today-work p:last-of-type { margin-bottom: 12px; }
      .done-btn {
        background: #eec27a; color: #3a2c10; border: none; font-weight: 700; font-size: 14px;
        border-radius: 999px; padding: 9px 20px; cursor: pointer; font-family: inherit;
      }
      .done-btn.done { background: rgba(168,230,176,0.25); color: #a8e6b0; border: 1px solid rgba(168,230,176,0.6); }
      .mv-section { padding-top: 44px; }
      .mv-section h2 { text-align: left; }
      .mv-section .lead { text-align: left; margin: 0 0 22px; max-width: none; }
      .mv-section .kicker { text-align: left; }
      .day-list, .prog-list, .lib-grid, .col-grid { display: grid; gap: 12px; }
      @media (min-width: 640px) { .lib-grid, .col-grid { grid-template-columns: 1fr 1fr; } }
      .tcard {
        background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
        padding: 20px 22px; box-shadow: var(--shadow); position: relative;
      }
      .tcard .t-head { display: flex; align-items: flex-start; gap: 10px; }
      .tcard .t-tag {
        display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap;
        color: var(--violet-deep); background: var(--bg-deep); border-radius: 6px; padding: 2px 10px; margin-top: 3px;
      }
      .tcard h3 { margin: 0; font-size: 16.5px; line-height: 1.6; flex: 1; }
      .tcard .t-desc { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }
      .tcard .lock-note {
        display: none; margin-top: 12px; font-size: 13.5px; color: var(--ink-soft);
        background: var(--bg); border: 1px dashed var(--card-line); border-radius: 10px; padding: 10px 14px;
      }
      .tcard.locked { opacity: 0.75; }
      .tcard.locked .lock-note { display: block; }
      .tcard.locked .t-body, .tcard.locked .expand-btn, .tcard.locked .check-btn { display: none; }
      .expand-btn {
        margin-top: 12px; background: transparent; border: 1.5px solid var(--violet); color: var(--violet-deep);
        border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      @media (prefers-color-scheme: dark) { .expand-btn { color: var(--violet); } }
      .t-body { display: none; margin-top: 14px; border-top: 1px solid var(--card-line); padding-top: 14px; }
      .t-body.open { display: block; }
      .t-body .b-sec { margin: 0 0 12px; }
      .t-body .b-sec:last-child { margin-bottom: 0; }
      .t-body .b-sec .s-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--pink); margin-bottom: 3px; }
      .t-body .b-sec p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
      .t-body .b-sec.work { background: var(--pink-soft); border-radius: 10px; padding: 12px 14px; }
      .t-body .b-sec.work p { color: var(--ink); }
      .check-btn {
        margin-top: 12px; margin-left: 8px; background: var(--bg); border: 1.5px solid var(--card-line); color: var(--ink-soft);
        border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      .check-btn.done { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); }
      .theme-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; flex-wrap: wrap; }
      .theme-head:first-of-type { margin-top: 4px; }
      .theme-head .th-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #fff; background: var(--violet); border-radius: 6px; padding: 3px 10px; }
      .theme-head h3 { margin: 0; font-size: 18px; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
      .theme-head .th-round { font-size: 12.5px; color: var(--ink-faint); }
      .more-read { margin: 12px 0 4px; font-size: 13.5px; color: var(--ink-soft); }
      .more-read button { background: none; border: none; color: var(--pink); font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13.5px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
      .filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
      .filter-btn {
        border: 1.5px solid var(--card-line); background: var(--card); color: var(--ink-soft);
        border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      }
      .filter-btn.on { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
      @media (prefers-color-scheme: dark) { .filter-btn.on { background: var(--violet); border-color: var(--violet); color: #171233; } }
      .lib-cat { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; border-radius: 6px; padding: 2px 9px; margin-bottom: 8px; }
      .lib-cat.know { background: var(--bg-deep); color: var(--violet-deep); }
      .lib-cat.do { background: var(--pink-soft); color: var(--pink); }
      .lib-cat.rest { background: var(--gold-soft); color: var(--gold); }
      .lib-cat.col { background: var(--gold-soft); color: var(--gold); }
      .open-badge { font-size: 12px; font-weight: 700; color: #3d7a44; }
      @media (prefers-color-scheme: dark) { .open-badge { color: #a8e6b0; } }
      /* self check */
      .sc-list { display: grid; gap: 12px; }
      .sc-item { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
      .sc-item .sc-q { font-size: 15px; font-weight: 700; margin: 0 0 10px; line-height: 1.7; }
      .sc-item .sc-q .sc-num { color: var(--pink); margin-right: 6px; }
      .sc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
      .sc-opt {
        border: 1.5px solid var(--card-line); background: var(--bg); color: var(--ink-soft);
        border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; font-family: inherit;
      }
      .sc-opt.on { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; font-weight: 700; }
      @media (prefers-color-scheme: dark) { .sc-opt.on { background: var(--violet); border-color: var(--violet); color: #171233; } }
      .sc-result { display: none; margin-top: 16px; background: var(--night); color: var(--night-ink); border-radius: 18px; padding: 24px; }
      .sc-result.on { display: block; }
      .sc-result .r-score { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 20px; color: #fff; margin: 0 0 8px; }
      .sc-result p { color: var(--night-soft); font-size: 14.5px; margin: 0; }
      .sc-progress-note { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 0; text-align: center; }

      /* ---------- tab panes & bottom tab bar (member only) ---------- */
      .tab-pane[hidden] { display: none; }
      .tab-pane > .mv-section:first-child { padding-top: 28px; }
      .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--card); border-top: 1px solid var(--card-line);
        box-shadow: 0 -8px 26px rgba(70, 58, 117, 0.16);
        padding-bottom: env(safe-area-inset-bottom);
      }
      .tabbar[hidden] { display: none; }
      .tabbar-in { display: flex; max-width: 760px; margin: 0 auto; }
      .tabbar button {
        flex: 1 1 0; min-width: 0; background: none; border: none; cursor: pointer; font-family: inherit;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 9px 2px 8px; color: var(--ink-faint); font-size: 11px; line-height: 1.3; font-weight: 500;
      }
      .tabbar button .tb-ic { width: 40px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
      .tabbar button .tb-label { white-space: nowrap; }
      .tabbar button.on { color: var(--violet-deep); font-weight: 700; }
      .tabbar button.on .tb-ic { background: var(--bg-deep); }
      .tabbar button.tb-emg.on { color: var(--pink); }
      .tabbar button.tb-emg.on .tb-ic { background: var(--pink-soft); }
      @media (prefers-color-scheme: dark) {
        .tabbar button.on { color: var(--violet); }
        .tabbar button.tb-emg.on { color: var(--pink); }
      }
      body.in-member { padding-bottom: 96px; }
      body.in-member #toast { bottom: 104px; }

      /* ---------- profile setup & diary (member demo) ---------- */
      .profile-card {
        margin-top: 20px; background: var(--card); border: 1.5px solid var(--pink);
        border-radius: 20px; padding: 22px; box-shadow: var(--shadow);
      }
      .pf-title { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 20px; margin: 0 0 8px; }
      .pf-lead { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 6px; }
      .pf-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); margin: 14px 0 6px; }
      .pf-input {
        width: 100%; border: 1.5px solid var(--card-line); background: var(--bg); color: var(--ink);
        border-radius: 12px; padding: 11px 14px; font-size: 15px; font-family: inherit; line-height: 1.6;
      }
      .pf-input:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
      .pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
      .pf-chip {
        border: 1.5px solid var(--card-line); background: var(--bg); color: var(--ink-soft);
        border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; font-family: inherit;
      }
      .pf-chip.on { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; font-weight: 700; }
      @media (prefers-color-scheme: dark) { .pf-chip.on { background: var(--violet); border-color: var(--violet); color: #171233; } }
      .pf-form.off { display: none; }
      .pf-summary { display: none; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg); border: 1px dashed var(--card-line); border-radius: 12px; padding: 12px 16px; margin-top: 12px; }
      .pf-summary.on { display: flex; }
      .pf-summary p { margin: 0; font-size: 14.5px; font-weight: 700; }
      .pf-note { font-size: 12.5px; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.7; }
      .diary-card {
        margin-top: 16px; background: var(--card); border: 1px solid var(--card-line);
        border-radius: 20px; padding: 22px; box-shadow: var(--shadow);
      }
      .mood-row { display: flex; flex-wrap: wrap; gap: 6px; }
      .mood-btn {
        flex: 1 1 30%; border: 1.5px solid var(--card-line); background: var(--bg); color: var(--ink-soft);
        border-radius: 12px; padding: 9px 6px; font-size: 13px; cursor: pointer; font-family: inherit; line-height: 1.45;
      }
      .mood-btn.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); font-weight: 700; }
      .diary-work-btn { flex: none; width: 100%; }
      .diary-list { margin-top: 18px; }
      .diary-empty { font-size: 13.5px; color: var(--ink-faint); margin: 0; }
      .diary-entry { border-top: 1px dashed var(--card-line); padding: 12px 0 2px; font-size: 14px; }
      .diary-entry p { margin: 0 0 4px; }
      .diary-entry .de-head { font-weight: 700; color: var(--violet-deep); }
      @media (prefers-color-scheme: dark) { .diary-entry .de-head { color: var(--violet); } }

      /* ---------- みんなのひとこと（会員同士の応援コーナー・デモ） ---------- */
      .community-card {
        margin-top: 16px; border-radius: 20px; padding: 22px; box-shadow: var(--shadow);
        background:
          linear-gradient(var(--card), var(--card)) padding-box,
          linear-gradient(150deg, rgba(217, 107, 158, 0.45), rgba(106, 85, 163, 0.3) 45%, rgba(201, 143, 45, 0.45)) border-box;
        border: 1px solid transparent;
      }
      .mh-rules {
        background: var(--bg); border: 1px dashed var(--card-line); border-radius: 14px;
        padding: 14px 16px; margin: 14px 0 18px;
      }
      .mh-rules .mh-rules-title { font-size: 13px; font-weight: 700; color: var(--violet-deep); margin: 0 0 6px; letter-spacing: 0.04em; }
      @media (prefers-color-scheme: dark) { .mh-rules .mh-rules-title { color: var(--violet); } }
      .mh-rules ul { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-soft); line-height: 1.8; }
      .mh-rules ul li { padding-left: 20px; position: relative; margin-bottom: 2px; }
      .mh-rules ul li::before { content: "✦"; position: absolute; left: 2px; color: var(--pink); font-size: 11px; top: 2px; }
      .mh-rules ul li strong { color: var(--ink); }
      .mh-feed { display: grid; gap: 10px; }
      .mh-post { background: var(--bg); border: 1px solid var(--card-line); border-radius: 16px; padding: 14px 16px 12px; }
      .mh-post.mine { border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 4px 14px rgba(217, 107, 158, 0.18); }
      .mh-mine-badge {
        display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap;
        color: #fff; background: linear-gradient(135deg, #ef8fb9, #d96b9e);
        border-radius: 999px; padding: 2px 10px; box-shadow: 0 2px 8px rgba(217, 107, 158, 0.35);
      }
      .mh-mybox {
        background: linear-gradient(150deg, var(--pink-soft), var(--gold-soft)); border: 1.5px solid var(--pink);
        border-radius: 16px; padding: 16px 18px; margin: 0 0 16px;
      }
      .mh-mybox-title { font-size: 13.5px; font-weight: 700; color: var(--pink); margin: 0 0 6px; letter-spacing: 0.04em; }
      .mh-mybox-empty { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.8; }
      .mh-mybox-text { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; line-height: 1.8; overflow-wrap: anywhere; }
      .mh-mybox-count { font-size: 14px; margin: 0 0 4px; }
      .mh-mybox-count strong { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 24px; color: var(--pink); vertical-align: -2px; margin: 0 2px; }
      .mh-mybox-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.75; }
      .mh-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
      .mh-avatar {
        width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
        background: linear-gradient(140deg, #241b4d, #6a55a3); color: #eec27a;
        display: flex; align-items: center; justify-content: center;
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14px; border: 1.5px solid rgba(238,194,122,0.55);
      }
      .mh-name { font-weight: 700; font-size: 14.5px; line-height: 1.5; }
      .mh-time { font-size: 12px; color: var(--ink-faint); margin-left: auto; white-space: nowrap; }
      .mh-type { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; border-radius: 6px; padding: 2px 9px; margin-top: 8px; }
      .mh-type.did { background: var(--pink-soft); color: var(--pink); }
      .mh-type.feel { background: var(--bg-deep); color: var(--violet-deep); }
      .mh-type.work { background: var(--gold-soft); color: var(--gold); }
      @media (prefers-color-scheme: dark) { .mh-type.feel { color: var(--violet); } }
      .mh-text { font-size: 14.5px; line-height: 1.8; margin: 6px 0 10px; overflow-wrap: anywhere; }
      .mh-actions { display: flex; align-items: center; gap: 8px; }
      .cheer-btn {
        display: inline-flex; align-items: center; gap: 6px; font-family: inherit; cursor: pointer;
        border: 1.5px solid var(--card-line); background: var(--card); color: var(--ink-soft);
        border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; line-height: 1.5;
      }
      .cheer-btn svg { flex-shrink: 0; }
      .cheer-btn.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); box-shadow: 0 3px 10px rgba(217, 107, 158, 0.25); }
      .cheer-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
      .mh-report {
        margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink-faint);
        width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0;
      }
      .mh-report:disabled { color: var(--gold); cursor: default; }
      .mh-form { margin-top: 18px; border-top: 1px dashed var(--card-line); padding-top: 16px; }
      .mh-types { display: flex; flex-wrap: wrap; gap: 8px; }
      .mh-count { font-size: 12px; color: var(--ink-faint); text-align: right; margin: 4px 0 0; }
      .mh-done {
        display: none; margin-top: 18px; background: linear-gradient(135deg, #241b4d, #3a2a63); color: var(--night-ink);
        border-radius: 16px; padding: 18px 20px; text-align: center;
      }
      .mh-done.on { display: block; }
      .mh-done .mh-done-main { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 4px; }
      .mh-done p { font-size: 13px; color: var(--night-soft); margin: 0; }
      .mh-form.off { display: none; }

      /* ---------- member emergency blocks ---------- */
      .emg-card {
        background: linear-gradient(135deg, #241b4d, #3a2a63); color: var(--night-ink);
        border-radius: 20px; padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px;
      }
      .emg-card h3 { color: #fff; margin: 0 0 8px; font-size: 18px; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; line-height: 1.6; }
      .emg-card > p { color: var(--night-soft); font-size: 14.5px; margin: 0; }
      .emg-card .demo { margin-top: 14px; }

      #toast {
        position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
        background: var(--night); color: var(--night-ink); font-size: 14px; border-radius: 999px;
        padding: 12px 22px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); z-index: 50; max-width: calc(100vw - 40px); text-align: center;
      }
      #toast.show { opacity: 1; transform: translate(-50%, 0); }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .btn { transition: none; }
      }

      /* ---------- signup flow (demo) ---------- */
      .flow-steps { display: flex; gap: 6px; list-style: none; margin: 18px 0 0; padding: 0; }
      .flow-steps li { flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; color: var(--ink-faint); font-weight: 700; line-height: 1.35; }
      .flow-steps .fs-num {
        display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 auto 5px;
        border-radius: 50%; border: 1.5px solid var(--card-line); background: var(--card); color: var(--ink-soft); font-size: 13px;
      }
      .flow-steps li.on { color: var(--violet-deep); }
      .flow-steps li.on .fs-num { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; box-shadow: 0 4px 12px rgba(70, 58, 117, 0.35); }
      .flow-steps li.done { color: var(--ink-soft); }
      .flow-steps li.done .fs-num { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); }
      @media (prefers-color-scheme: dark) {
        .flow-steps li.on { color: var(--violet); }
        .flow-steps li.on .fs-num { background: var(--violet); border-color: var(--violet); color: #171233; }
      }
      .flow-auto-note { font-size: 13px; color: var(--ink-soft); background: var(--bg-deep); border-radius: 12px; padding: 12px 16px; margin: 14px 0 0; line-height: 1.85; }
      .flow-auto-note strong { color: var(--ink); }
      .flow-pane[hidden] { display: none; }
      .flow-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: 24px 22px; box-shadow: var(--shadow); margin-top: 16px; }
      .flow-card h3 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 20px; margin: 0 0 8px; line-height: 1.5; }
      .flow-plan {
        display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
        background: var(--bg); color: var(--ink); border: 1.5px solid var(--card-line); border-radius: 16px;
        padding: 16px 18px; margin: 0 0 10px;
      }
      .flow-plan .fp-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
      .flow-plan .fp-name { font-weight: 700; font-size: 16px; }
      .flow-plan .fp-price { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 22px; font-weight: 700; white-space: nowrap; }
      .flow-plan .fp-price small { font-size: 12px; font-family: inherit; color: var(--ink-soft); font-weight: 400; }
      .flow-plan .fp-sub { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.7; }
      .flow-plan.on { border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 0 0 1px var(--pink); }
      .auto-badge {
        display: inline-block; vertical-align: 2px; font-size: 11.5px; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif;
        background: var(--gold-soft); color: var(--gold); border-radius: 6px; padding: 2px 9px; letter-spacing: 0.06em; margin-left: 6px;
      }
      .pay-summary { background: var(--bg); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 18px; margin-bottom: 4px; }
      .pay-summary .ps-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font-weight: 700; flex-wrap: wrap; }
      .pay-summary .ps-line strong { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 22px; }
      .pay-summary .ps-line small { font-size: 12px; font-family: inherit; color: var(--ink-soft); font-weight: 400; }
      .pay-summary .ps-note { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
      .pay-2col { display: flex; gap: 10px; }
      .pay-2col > div { flex: 1 1 0; min-width: 0; }
      .mail-card { margin-top: 16px; background: var(--card); border: 1.5px dashed var(--gold); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); }
      .mail-card .mail-tag { font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; margin: 0 0 10px; }
      .mail-card .mail-from { font-size: 13px; color: var(--ink-faint); margin: 0; }
      .mail-card .mail-subject { font-weight: 700; font-size: 15.5px; margin: 2px 0 10px; line-height: 1.6; }
      .mail-card .mail-body p { font-size: 14px; color: var(--ink-soft); margin: 0 0 8px; }
      .mail-card .mail-body p:last-child { margin-bottom: 0; }
      .flow-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; gap: 10px; }
      .flow-nav .expand-btn { margin-top: 0; }

      /* ---------- ログイン導線・ログイン画面 ---------- */
      .hero-auth { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 10px; position: relative; z-index: 3; }
      .hero-auth-btn {
        background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(239, 234, 255, 0.55); color: var(--night-ink);
        border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; line-height: 1.5;
      }
      .hero-auth-btn:active { background: rgba(238, 194, 122, 0.25); }
      .login-error {
        background: var(--pink-soft); border: 1px dashed var(--pink); color: var(--ink);
        border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.8; margin: 14px 0 0;
      }
      .login-error[hidden] { display: none; }
      .stores-pay-box { text-align: center; padding: 8px 0 2px; }
      .stores-pay-box .btn { width: 100%; max-width: 420px; }
      .stores-done-link {
        background: none; border: none; color: var(--pink); font-weight: 700; cursor: pointer; font-family: inherit;
        font-size: 14px; padding: 6px; text-decoration: underline; text-underline-offset: 3px;
      }

      /* ============================================================
         装飾レイヤー：夜空モチーフ（星・月・オーロラ・光）
         本文のコントラストと余白は変えず、装飾だけで華やかさを足す
         ============================================================ */

      /* ---------- ヒーロー：オーロラ＋大きな月＋瞬く星＋流れ星 ---------- */
      .hero {
        background:
          radial-gradient(58% 42% at 12% -4%, rgba(217, 107, 158, 0.38), transparent 62%),
          radial-gradient(46% 34% at 88% 4%, rgba(238, 194, 122, 0.26), transparent 62%),
          radial-gradient(72% 52% at 50% -12%, rgba(122, 95, 190, 0.55), transparent 65%),
          linear-gradient(180deg, #171233 0%, #241b4d 55%, #3a2a63 100%);
      }
      .hero::after {
        content: ""; position: absolute; top: 30px; right: max(4vw, 16px); z-index: 1;
        width: 76px; height: 76px; border-radius: 50%;
        background: radial-gradient(circle at 38% 34%, #fdf3cf, #f3d98b 58%, #eec27a);
        box-shadow: 0 0 38px 12px rgba(238, 194, 122, 0.38), inset -14px -9px 0 rgba(201, 143, 45, 0.28);
        pointer-events: none;
      }
      @media (max-width: 480px) { .hero::after { width: 52px; height: 52px; top: 20px; } }
      .hero-inner, .hero-img { z-index: 2; }
      .hero .stars span { animation: twinkle 2.8s ease-in-out infinite alternate; }
      .hero .stars span:nth-child(3n) { animation-delay: 0.7s; animation-duration: 3.4s; }
      .hero .stars span:nth-child(4n) { animation-delay: 1.3s; animation-duration: 2.3s; }
      .hero .stars span:nth-child(5n) { animation-delay: 0.4s; animation-duration: 3.9s; }
      @keyframes twinkle { from { opacity: 0.15; transform: scale(0.7); } to { opacity: 1; transform: scale(1.25); } }
      .hero .stars::after {
        content: ""; position: absolute; top: 12%; left: 78%; width: 110px; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
        transform: rotate(-32deg); transform-origin: left center; opacity: 0;
        animation: shooting 8s ease-in-out 2.5s infinite; pointer-events: none;
      }
      @keyframes shooting {
        0%, 68% { opacity: 0; transform: rotate(-32deg) translateX(0); }
        74% { opacity: 1; }
        86%, 100% { opacity: 0; transform: rotate(-32deg) translateX(-230px); }
      }
      .hero h1 { text-shadow: 0 0 26px rgba(238, 194, 122, 0.35), 0 2px 14px rgba(0, 0, 0, 0.35); }
      .hero .brand {
        border-color: rgba(238, 194, 122, 0.55);
        box-shadow: 0 0 18px rgba(238, 194, 122, 0.22), inset 0 0 12px rgba(238, 194, 122, 0.08);
      }
      .promises li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
      .promises li::before { content: "✦ "; color: var(--gold); font-size: 11px; }
      .hero-img img {
        border: 1px solid rgba(238, 194, 122, 0.55); border-bottom: none;
        box-shadow: 0 -8px 44px rgba(238, 194, 122, 0.22), 0 0 0 6px rgba(255, 255, 255, 0.05);
      }

      /* ---------- 見出しの装飾：星のライン＋グラデーションの下線 ---------- */
      #salesView .kicker { display: flex; align-items: center; justify-content: center; gap: 12px; }
      #salesView .kicker::before, #salesView .kicker::after {
        content: ""; width: 36px; height: 1px; flex-shrink: 0;
      }
      #salesView .kicker::before { background: linear-gradient(90deg, transparent, var(--pink)); }
      #salesView .kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }
      #salesView section > h2::after, .final h2::after, .mv-section h2::after {
        content: ""; display: block; width: 72px; height: 10px; margin: 12px auto 0;
        background:
          radial-gradient(circle at 50% 50%, var(--gold) 0 3px, transparent 4.5px),
          linear-gradient(90deg, transparent, var(--pink) 22%, var(--violet) 50%, var(--gold) 78%, transparent);
        background-size: 100% 100%, 100% 2px;
        background-position: center, center;
        background-repeat: no-repeat;
      }
      .mv-section h2::after { margin: 12px 0 0; }

      /* ---------- 紺色ブロック共通：星空レイヤー＋オーロラの差し色 ---------- */
      .daily, .feature.emergency, .consult-card, .dash, .emg-card, .values, .sc-result, .final {
        background-image:
          radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.4px),
          radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2.1px),
          radial-gradient(circle at 38% 28%, rgba(238, 194, 122, 0.85) 0 1.3px, transparent 2.5px),
          radial-gradient(circle at 57% 80%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2.1px),
          radial-gradient(circle at 71% 14%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.5px),
          radial-gradient(circle at 84% 56%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2.1px),
          radial-gradient(circle at 93% 26%, rgba(238, 194, 122, 0.75) 0 1.2px, transparent 2.3px);
      }
      .daily { background-color: var(--night); }
      .values { background-color: var(--night); }
      .sc-result { background-color: var(--night); }
      .feature.emergency {
        background-image:
          radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.4px),
          radial-gradient(circle at 38% 28%, rgba(238, 194, 122, 0.85) 0 1.3px, transparent 2.5px),
          radial-gradient(circle at 71% 14%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.5px),
          radial-gradient(circle at 93% 26%, rgba(238, 194, 122, 0.75) 0 1.2px, transparent 2.3px),
          radial-gradient(70% 90% at 100% 0%, rgba(217, 107, 158, 0.28), transparent 60%),
          linear-gradient(135deg, #241b4d, #3a2a63);
      }
      .consult-card {
        position: relative;
        background-image:
          radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.4px),
          radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2.1px),
          radial-gradient(circle at 38% 28%, rgba(238, 194, 122, 0.85) 0 1.3px, transparent 2.5px),
          radial-gradient(circle at 57% 80%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2.1px),
          radial-gradient(circle at 71% 14%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.5px),
          radial-gradient(circle at 84% 56%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2.1px),
          radial-gradient(circle at 93% 26%, rgba(238, 194, 122, 0.75) 0 1.2px, transparent 2.3px),
          radial-gradient(65% 42% at 12% 0%, rgba(217, 107, 158, 0.3), transparent 65%),
          radial-gradient(55% 38% at 90% 0%, rgba(238, 194, 122, 0.22), transparent 65%),
          linear-gradient(160deg, #241b4d, #32245e 70%, #3a2a63);
      }
      .dash {
        background-image:
          radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.4px),
          radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2.1px),
          radial-gradient(circle at 38% 28%, rgba(238, 194, 122, 0.85) 0 1.3px, transparent 2.5px),
          radial-gradient(circle at 57% 80%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2.1px),
          radial-gradient(circle at 71% 14%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.5px),
          radial-gradient(circle at 84% 56%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2.1px),
          radial-gradient(circle at 93% 26%, rgba(238, 194, 122, 0.75) 0 1.2px, transparent 2.3px),
          radial-gradient(60% 46% at 88% 0%, rgba(217, 107, 158, 0.26), transparent 62%),
          linear-gradient(160deg, #241b4d, #3a2a63);
      }
      .emg-card {
        background-image:
          radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.4px),
          radial-gradient(circle at 38% 28%, rgba(238, 194, 122, 0.85) 0 1.3px, transparent 2.5px),
          radial-gradient(circle at 71% 14%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.5px),
          radial-gradient(circle at 93% 26%, rgba(238, 194, 122, 0.75) 0 1.2px, transparent 2.3px),
          radial-gradient(70% 90% at 0% 0%, rgba(217, 107, 158, 0.24), transparent 60%),
          linear-gradient(135deg, #241b4d, #3a2a63);
      }
      .final {
        background-image:
          radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.4px),
          radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2.1px),
          radial-gradient(circle at 38% 28%, rgba(238, 194, 122, 0.85) 0 1.3px, transparent 2.5px),
          radial-gradient(circle at 57% 80%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2.1px),
          radial-gradient(circle at 71% 14%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.5px),
          radial-gradient(circle at 84% 56%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2.1px),
          radial-gradient(circle at 93% 26%, rgba(238, 194, 122, 0.75) 0 1.2px, transparent 2.3px),
          radial-gradient(60% 60% at 50% 0%, rgba(217, 107, 158, 0.25), transparent 65%),
          linear-gradient(160deg, #241b4d, #3a2a63);
      }
      /* 紺ブロック内の小パネルをガラス風に */
      .dash-box, .today-work, .demo {
        background-color: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(189, 178, 221, 0.22);
        backdrop-filter: blur(3px);
      }
      .demo { border-color: rgba(238, 194, 122, 0.4); }
      .consult-avatar, .msg .m-avatar {
        box-shadow: 0 0 14px rgba(238, 194, 122, 0.45), inset 0 0 8px rgba(238, 194, 122, 0.25);
      }

      /* ---------- カード：淡いグラデーションの縁取りと光 ---------- */
      .worry, .week, .feature, .tcard, .diary-card, .sc-item {
        background:
          linear-gradient(var(--card), var(--card)) padding-box,
          linear-gradient(150deg, rgba(217, 107, 158, 0.45), rgba(106, 85, 163, 0.3) 45%, rgba(201, 143, 45, 0.45)) border-box;
        border: 1px solid transparent;
      }
      .freebie {
        background:
          linear-gradient(var(--card), var(--card)) padding-box,
          linear-gradient(150deg, rgba(217, 107, 158, 0.55), rgba(106, 85, 163, 0.35) 45%, rgba(201, 143, 45, 0.55)) border-box;
        border: 1px solid transparent;
      }
      .feature.emergency { border: none; }
      .plan.main { border: 2px solid var(--pink); }
      .worry .moon {
        width: 44px; height: 44px; border-radius: 14px;
        background: linear-gradient(135deg, var(--pink-soft), var(--gold-soft));
        box-shadow: inset 0 0 0 1px rgba(217, 107, 158, 0.25), 0 4px 10px rgba(70, 58, 117, 0.1);
        display: flex; align-items: center; justify-content: center;
      }
      .week .wk {
        background: linear-gradient(135deg, var(--bg-deep), var(--pink-soft));
        box-shadow: inset 0 0 0 1px rgba(106, 85, 163, 0.22);
      }
      .theme-head .th-tag { background: linear-gradient(135deg, var(--violet), #8a5f9e); box-shadow: 0 3px 8px rgba(106, 85, 163, 0.35); }
      .feature .ic {
        background: linear-gradient(135deg, var(--pink-soft), var(--gold-soft));
        box-shadow: inset 0 0 0 1px rgba(217, 107, 158, 0.3), 0 4px 10px rgba(70, 58, 117, 0.1);
      }
      .feature.emergency .ic { background: rgba(238, 194, 122, 0.18); }
      .plan.main { box-shadow: 0 14px 36px rgba(217, 107, 158, 0.22), var(--shadow); }
      .plan .badge {
        background: linear-gradient(135deg, #ef8fb9, #d96b9e 60%, #c98f2d);
        box-shadow: 0 4px 12px rgba(217, 107, 158, 0.4);
      }
      .freebie-body .free-tag { background: linear-gradient(135deg, var(--gold-soft), var(--pink-soft)); box-shadow: inset 0 0 0 1px rgba(201, 143, 45, 0.35); }
      .profile-card { box-shadow: 0 12px 30px rgba(217, 107, 158, 0.16), var(--shadow); }

      /* ---------- ボタン：グラデーション＋光沢＋グロー ---------- */
      .btn-pink {
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 46%),
          linear-gradient(135deg, #f2a0c4, #d96b9e 55%, #c2537f);
        box-shadow: 0 10px 26px rgba(217, 107, 158, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.55);
      }
      .btn-navy {
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
          linear-gradient(135deg, #5d4c9e, #463a75 60%, #372b5e);
        box-shadow: 0 10px 24px rgba(70, 58, 117, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }
      .btn-ghost { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
      .demo-btn, .consult-send, .done-btn {
        background-image:
          linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 46%),
          linear-gradient(135deg, #f6d488, #eec27a 55%, #dfa94e);
        box-shadow: 0 6px 18px rgba(238, 194, 122, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
      }
      .done-btn.done {
        background-image: none;
        box-shadow: none;
      }
      .chip { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
      .pf-chip.on, .sc-opt.on, .filter-btn.on {
        background-image: linear-gradient(135deg, #5d4c9e, #463a75);
        box-shadow: 0 4px 12px rgba(70, 58, 117, 0.3);
      }

      /* ---------- 進捗バー：グラデーション＋流れる光＋グロー ---------- */
      .demo-progress i, .dash-progress i {
        background-image:
          linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%),
          linear-gradient(90deg, #ef8fb9, #eec27a);
        background-size: 220% 100%, 100% 100%;
        box-shadow: 0 0 12px rgba(238, 194, 122, 0.6);
        animation: barshine 2.8s linear infinite;
      }
      @keyframes barshine { from { background-position: 130% 0, 0 0; } to { background-position: -130% 0, 0 0; } }

      /* ---------- 会員タブバー：グラデーションの上ライン＋光るアクティブ ---------- */
      .tabbar {
        background-color: var(--card);
        background-image: linear-gradient(90deg, var(--pink), var(--violet) 50%, var(--gold));
        background-size: 100% 2px;
        background-repeat: no-repeat;
        background-position: top center;
      }
      .tabbar button.on .tb-ic {
        background: linear-gradient(135deg, rgba(217, 107, 158, 0.2), rgba(106, 85, 163, 0.26));
        box-shadow: inset 0 0 0 1px rgba(106, 85, 163, 0.35), 0 2px 8px rgba(106, 85, 163, 0.22);
      }
      .tabbar button.tb-emg.on .tb-ic {
        background: linear-gradient(135deg, rgba(217, 107, 158, 0.32), rgba(238, 194, 122, 0.3));
        box-shadow: inset 0 0 0 1px rgba(217, 107, 158, 0.45), 0 2px 8px rgba(217, 107, 158, 0.3);
      }
      .mv-demo-note { background-image: linear-gradient(135deg, var(--gold-soft), var(--pink-soft)); }
      #toast { background-image: linear-gradient(135deg, #2c2358, #463a75); border: 1px solid rgba(238, 194, 122, 0.45); }

      @media (prefers-color-scheme: dark) {
        .btn-navy {
          background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 46%),
            linear-gradient(135deg, #5d4c9e, #463a75 60%, #372b5e);
          color: #fff;
        }
        .pf-chip.on, .sc-opt.on, .filter-btn.on {
          background-image: linear-gradient(135deg, #b7a6e8, #a48fd8);
          color: #171233;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero .stars span, .hero .stars::after, .demo-progress i, .dash-progress i { animation: none; }
        .hero .stars::after { display: none; }
      }
      /* ---------- ページ遷移演出 ---------- */
      @keyframes pageIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
      @keyframes paneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
      .view-enter { animation: pageIn 0.32s ease both; }
      .tab-pane.pane-enter { animation: paneIn 0.3s ease both; }
      @media (prefers-reduced-motion: reduce) {
        .view-enter, .tab-pane.pane-enter { animation: none; }
      }
      /* ---------- 各画面のタイトルヘッダー ---------- */
      .pane-head {
        margin-top: 20px; border-radius: 20px; padding: 22px 22px 18px; color: var(--night-ink);
        background: linear-gradient(140deg, #241b4d, #3a2a63);
        box-shadow: var(--shadow); position: relative; overflow: hidden;
      }
      .pane-head::after { content: "☾"; position: absolute; right: 18px; top: 8px; font-size: 34px; color: rgba(238,194,122,0.5); }
      .pane-head .ph-kicker { font-size: 11.5px; letter-spacing: 0.24em; color: var(--gold); font-weight: 700; margin: 0 0 4px; }
      .pane-head h2 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; text-align: left; color: #fff; font-size: 24px; margin: 0 0 6px; }
      .pane-head h2::after { display: none !important; }
      .pane-head p { margin: 0; font-size: 13.5px; color: var(--night-soft); max-width: 88%; }
      /* ---------- 6つのタブに合わせた調整（スマホでも崩れないよう短縮ラベル） ---------- */
      .tabbar button { font-size: 10px; padding-left: 1px; padding-right: 1px; letter-spacing: 0.01em; }
      .tabbar button .tb-label { white-space: nowrap; text-align: center; line-height: 1.3; }
      .tabbar button.tb-hitokoto.on { color: var(--pink); }
      .tabbar button.tb-hitokoto.on .tb-ic {
        background: linear-gradient(135deg, rgba(217, 107, 158, 0.3), rgba(238, 194, 122, 0.28));
        box-shadow: inset 0 0 0 1px rgba(217, 107, 158, 0.45), 0 2px 8px rgba(217, 107, 158, 0.28);
      }
      /* ---------- アカウントページ ---------- */
      .acct-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); margin-top: 16px; }
      .acct-card > h3 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 18.5px; margin: 0 0 6px; display: flex; align-items: center; gap: 9px; }
      .acct-card > h3 .ac-ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--pink-soft), var(--gold-soft)); display: inline-flex; align-items: center; justify-content: center; color: var(--pink); flex-shrink: 0; }
      .acct-card .ac-lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 8px; }
      .acct-profile-head { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
      .acct-avatar { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(140deg, #241b4d, #6a55a3); color: #eec27a; display: flex; align-items: center; justify-content: center; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 22px; border: 2px solid rgba(238,194,122,0.6); }
      .acct-profile-head .ap-name { font-weight: 700; font-size: 17px; margin: 0; line-height: 1.5; }
      .acct-profile-head .ap-sub { font-size: 13px; color: var(--ink-soft); margin: 0; }
      .acct-rows { margin-top: 10px; }
      .acct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px dashed var(--card-line); font-size: 14.5px; }
      .acct-row:first-child { border-top: none; }
      .acct-row .ar-label { color: var(--ink-faint); font-size: 13px; white-space: nowrap; }
      .acct-row .ar-value { font-weight: 700; text-align: right; }
      .acct-row .ar-value small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
      .acct-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
      .acct-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.75; }
      .acct-note.warn { background: #fdf6ec; border: 1px solid #d9a441; color: #6b4a12; border-radius: 12px; padding: 10px 14px; }
      @media (prefers-color-scheme: dark) { .acct-note.warn { background: #38301c; color: #eec27a; border-color: #8a6d2f; } }
      /* トグル（ボタン式スイッチ） */
      .toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px dashed var(--card-line); }
      .toggle-row:first-of-type { border-top: none; }
      .toggle-row .tg-text { flex: 1; min-width: 0; }
      .toggle-row .tg-title { font-size: 14.5px; font-weight: 700; margin: 0; line-height: 1.6; }
      .toggle-row .tg-desc { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.7; }
      .tgl { flex-shrink: 0; width: 52px; height: 30px; border-radius: 999px; border: 1.5px solid var(--card-line); background: var(--bg-deep); cursor: pointer; position: relative; padding: 0; transition: background 0.2s ease; }
      .tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: left 0.2s ease; }
      .tgl.on { background: linear-gradient(135deg, #ef8fb9, #d96b9e); border-color: var(--pink); }
      .tgl.on::after { left: 25px; }
      .tgl:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
      /* リンク集の行 */
      .link-rows { display: grid; margin-top: 6px; }
      .link-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-top: 1px dashed var(--card-line); padding: 14px 2px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
      .link-row:first-child { border-top: none; }
      .link-row .lr-sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
      .link-row .lr-arrow { margin-left: auto; color: var(--pink); font-weight: 700; flex-shrink: 0; }
      .link-row.danger { color: #b03a5b; }
      @media (prefers-color-scheme: dark) { .link-row.danger { color: #eda3c6; } }
      /* ---------- 規約類の独立ページ ---------- */
      .legal-view { padding-bottom: 30px; }
      .legal-article h2 { text-align: left; font-size: 26px; margin: 6px 0 4px; }
      .legal-article h2::after { margin: 12px 0 0 !important; }
      .legal-meta { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 6px; }
      .legal-draft { background: var(--gold-soft); border: 1px dashed var(--gold); color: var(--ink-soft); border-radius: 12px; padding: 12px 16px; font-size: 13px; line-height: 1.85; margin: 14px 0 20px; }
      .legal-draft strong { color: var(--ink); }
      .legal-article h3 { font-size: 16.5px; margin: 24px 0 6px; }
      .legal-article p, .legal-article li { font-size: 14.5px; color: var(--ink-soft); }
      .legal-article p { margin: 0 0 10px; }
      .legal-article ul { margin: 0 0 10px; padding-left: 20px; }
      .legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14.5px; }
      .legal-table th, .legal-table td { border: 1px solid var(--card-line); padding: 11px 14px; text-align: left; vertical-align: top; line-height: 1.8; }
      .legal-table th { background: var(--bg-deep); color: var(--ink); width: 34%; font-weight: 700; }
      .legal-table td { color: var(--ink-soft); background: var(--card); }
      /* ---------- モーダル ---------- */
      .modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(16, 11, 34, 0.62); display: flex; align-items: center; justify-content: center; padding: 20px; }
      .modal-overlay[hidden] { display: none; }
      .modal-card { background: var(--card); color: var(--ink); border-radius: 20px; padding: 26px 24px; max-width: 480px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.4); max-height: 82vh; overflow-y: auto; }
      .modal-card h3 { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 19px; margin: 0 0 10px; }
      .modal-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 10px; }
      .modal-card p:last-of-type { margin-bottom: 0; }
      /* ---------- フッターのリンク集 ---------- */
      footer .f-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 16px auto 4px; max-width: 560px; }
      footer .f-links button, footer .f-links a { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 6px 8px; }
      /* ---------- オリエンテーション（トレーニングの前置き） ---------- */
      .orient {
        margin-top: 16px; border-radius: 22px; padding: 26px 22px 24px; box-shadow: var(--shadow);
        background:
          linear-gradient(var(--card), var(--card)) padding-box,
          linear-gradient(150deg, rgba(238, 194, 122, 0.65), rgba(217, 107, 158, 0.45) 45%, rgba(106, 85, 163, 0.5)) border-box;
        border: 1.5px solid transparent;
      }
      @media (min-width: 640px) { .orient { padding: 30px 28px 26px; } }
      .orient .or-title { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 22px; margin: 0 0 10px; line-height: 1.55; }
      .orient .or-lead { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 8px; }
      .orient .or-lead strong { color: var(--ink); }
      .or-block { margin-top: 24px; }
      .or-block > h4 {
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 17.5px; margin: 0 0 6px; line-height: 1.6;
        display: flex; align-items: center; gap: 9px;
      }
      .or-block > h4 .or-ic {
        width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
        background: linear-gradient(135deg, var(--pink-soft), var(--gold-soft)); color: var(--pink);
        display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
      }
      .or-block .or-sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; }
      .oc-list { display: grid; gap: 8px; }
      .oc-item {
        display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; font-family: inherit;
        background: var(--bg); border: 1.5px solid var(--card-line); border-radius: 14px;
        padding: 12px 15px; font-size: 14.5px; line-height: 1.7; color: var(--ink); cursor: pointer;
      }
      .oc-item .oc-box {
        flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; border-radius: 7px;
        border: 1.5px solid var(--card-line); background: var(--card); color: transparent;
        display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1;
      }
      .oc-item.on { border-color: var(--pink); background: var(--pink-soft); }
      .oc-item.on .oc-box { background: linear-gradient(135deg, #ef8fb9, #d96b9e); border-color: var(--pink); color: #fff; }
      .oc-msg {
        margin: 12px 0 0; font-size: 14px; line-height: 1.85; color: var(--ink-soft);
        background: var(--gold-soft); border: 1px dashed var(--gold); border-radius: 12px; padding: 12px 16px;
      }
      .oc-msg strong { color: var(--ink); }
      .know-list { display: grid; gap: 10px; }
      .know-pair { background: var(--bg); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px; }
      .know-pair .kp-feel { font-weight: 700; font-size: 15px; margin: 0 0 4px; line-height: 1.65; }
      .know-pair .kp-feel::before { content: "☾ "; color: var(--gold); }
      .know-pair .kp-why { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.85; }
      .know-pair .kp-why .kp-label { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--violet-deep); background: var(--bg-deep); border-radius: 6px; padding: 1px 8px; margin-right: 7px; vertical-align: 1px; }
      @media (prefers-color-scheme: dark) { .know-pair .kp-why .kp-label { color: var(--violet); } }
      .why-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: why; }
      .why-list li { background: var(--bg); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px 14px 52px; position: relative; font-size: 14px; color: var(--ink-soft); line-height: 1.85; }
      .why-list li::before {
        counter-increment: why; content: counter(why);
        position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%;
        background: linear-gradient(135deg, #6a55a3, #463a75); color: #fff;
        font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14px; font-weight: 700;
        display: flex; align-items: center; justify-content: center;
      }
      .why-list li strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
      .or-analogy {
        margin-top: 12px; border-radius: 14px; padding: 16px 18px; color: var(--night-ink);
        background: linear-gradient(140deg, #241b4d, #3a2a63); font-size: 14px; line-height: 1.9;
      }
      .or-analogy .oa-title { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 4px; }
      .or-analogy p { margin: 0; color: var(--night-soft); }
      .or-analogy p strong { color: #f3e9d2; }
      .change-list { display: grid; gap: 10px; }
      .change-row { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px; }
      .change-row .ch-when {
        flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
        color: #fff; background: linear-gradient(135deg, #ef8fb9, #d96b9e); border-radius: 999px; padding: 3px 12px; margin-top: 3px;
      }
      .change-row p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.85; }
      .change-row p strong { color: var(--ink); }
      .or-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.8; }
      .or-cta { margin-top: 22px; text-align: center; }
      .or-cta .or-cta-note { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
      /* ヒーローは販売LP（トップ）専用：会員・申込・規約の各画面では出さない */
      #siteHero[hidden] { display: none !important; }

/* ---- v0.2.0: トップ以外のページ（会員登録・ログイン・マイページ） ---- */
.page-bar { background: var(--bg-deep); border-bottom: 1px solid rgba(138, 129, 163, 0.25); }
.page-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.page-bar-brand { display: inline-flex; align-items: center; gap: 8px; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
.page-bar-nav { display: flex; gap: 14px; }
.page-bar-nav a { font-size: 14px; color: var(--ink-soft); text-decoration: none; padding: 6px 4px; }
.page-bar-nav a:hover { color: var(--ink); text-decoration: underline; }
.page-main { padding: 36px 0 64px; }
.page-title { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 26px; line-height: 1.4; margin: 0 0 20px; color: var(--ink); }
.page-body { font-size: 15.5px; line-height: 1.9; color: var(--ink); }
.page-body a { color: var(--gold); }
.page-body input[type="text"], .page-body input[type="email"], .page-body input[type="password"], .page-body input[type="tel"], .page-body select, .page-body textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; padding: 11px 12px; font-size: 16px;
  color: var(--ink); background: var(--bg); border: 1px solid rgba(138, 129, 163, 0.55); border-radius: 8px;
}
.page-body label { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--ink-soft); }
.page-body input[type="submit"], .page-body button[type="submit"], .page-body .pmpro_btn, .page-body a.pmpro_btn {
  display: inline-block; cursor: pointer; padding: 12px 22px; font-size: 16px; font-weight: 700; border: 0; border-radius: 999px;
  color: #2c2547; background: #eec27a; text-decoration: none;
}
.page-body table { width: 100%; border-collapse: collapse; }
.page-body th, .page-body td { padding: 8px 6px; text-align: left; border-bottom: 1px solid rgba(138, 129, 163, 0.25); }
@media (max-width: 480px) { .page-title { font-size: 22px; } }

/* v0.8.0 ---------- 「こんな夜のために」：アイコンをカードの上辺にまたがせる（タブ風） ---------- */
.worry-list { row-gap: 40px; margin-top: 36px; }
.worry { position: relative; padding-top: 38px; }
.worry .moon {
  position: absolute; top: -22px; left: 20px; margin: 0; /* 高さ44pxの半分（22px）だけ上に出し、カードの上辺がアイコンの中央を通る */
  box-shadow: 0 0 0 5px var(--bg), inset 0 0 0 1px rgba(217, 107, 158, 0.25), 0 4px 10px rgba(70, 58, 117, 0.1);
}

/* v0.8.0 ---------- マイルーム（会員のホーム） ---------- */
.room .wrap { max-width: 720px; }
.room-hello { text-align: center; padding: 28px 0 8px; }
.room-kicker { font-size: 12px; letter-spacing: 0.3em; color: var(--pink); font-weight: 700; margin: 0 0 8px; }
.room-title { font-size: 26px; line-height: 1.5; margin: 0 0 10px; color: var(--ink); }
.room-lead { color: var(--ink-soft); margin: 0; line-height: 1.9; }
.room-letter { margin: 20px 0 0; padding: 16px 20px; border-radius: var(--radius); background: var(--gold-soft); border: 1px dashed var(--gold); }
.room-letter-label { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-soft); }
.room-letter-body { margin: 0; font-size: 17px; line-height: 1.8; color: var(--ink); font-weight: 700; }
.room-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px; margin: 18px 0; }
.room-card h2 { font-size: 19px; margin: 0 0 12px; color: var(--ink); }
.room-sub { color: var(--ink-soft); margin: 0 0 14px; line-height: 1.8; font-size: 14.5px; }
.room-big { font-size: 34px; font-weight: 700; color: var(--gold); line-height: 1; margin-right: 2px; }
.room-note { color: var(--ink-faint); font-size: 13px; margin: 14px 0 0; line-height: 1.8; }

.room-step { display: none; }
.room-step.on { display: block; }
.room-step-n { font-size: 11.5px; letter-spacing: 0.22em; color: var(--violet); margin: 0 0 8px; font-weight: 700; }
.room-form label, .room-q { display: block; font-size: 16px; margin: 0 0 10px; color: var(--ink); line-height: 1.7; }
.room-form input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--card-line); background: var(--bg); color: var(--ink); }
.room-form input[type="text"]:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
.room-next, .room-save { display: block; width: 100%; margin-top: 14px; border: none; border-radius: 999px; padding: 13px 18px; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; background: var(--violet-deep); color: #fff; }
.room-save { background: linear-gradient(135deg, #ef8fb9, #d96b9e 60%, #c98f2d); }
.room-next:disabled, .room-save:disabled { opacity: 0.45; cursor: default; }
.room-wave { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wave-btn { border: 1px solid var(--card-line); background: var(--bg); color: var(--ink); border-radius: 14px; padding: 12px 4px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wave-btn .wave-n { font-size: 20px; font-weight: 700; }
.wave-btn .wave-l { font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; text-align: center; }
.wave-btn.on { background: var(--pink-soft); border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink) inset; }
.room-msg { color: var(--pink); font-size: 14px; margin: 10px 0 0; min-height: 1.4em; }
.room-done-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.room-sum { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 14.5px; }
.room-sum dt { color: var(--ink-faint); }
.room-sum dd { margin: 0; color: var(--ink); }

.moon-row { display: grid; grid-template-columns: repeat(14, 1fr); gap: 7px; }
.moon { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--card-line); background: transparent; display: block; }
.moon.is-done { background: radial-gradient(circle at 35% 35%, #fbe3a6, #eec27a 70%); border-color: #eec27a; box-shadow: 0 0 8px rgba(238, 194, 122, 0.55); }
.moon.is-today { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-soft), 0 0 0 3px var(--pink); }
.moon.is-future { opacity: 0.45; }

.room-weeklist { display: grid; gap: 12px; }
.room-week { border: 1px solid var(--card-line); border-radius: 14px; padding: 16px 16px 14px; background: var(--bg); }
.room-week .wk { display: inline-block; font-size: 11px; letter-spacing: 0.2em; font-weight: 700; color: var(--violet); margin-bottom: 4px; }
.room-week h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.room-week p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.room-week .room-status { margin: 0; font-size: 13px; font-weight: 700; color: var(--gold); }
.room-week .room-status small { font-weight: 400; color: var(--ink-faint); }
.room-week.is-now { border-color: var(--pink); background: var(--pink-soft); }
.room-week.is-locked { opacity: 0.65; }
.room-week.is-locked h3::before { content: "🔒 "; font-size: 14px; }
.room-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.room-links li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--bg); }
.room-links li strong { color: var(--ink); font-size: 15px; }
.room-links li span { color: var(--ink-soft); font-size: 13.5px; }
.room-links li.is-locked { opacity: 0.6; }
@media (max-width: 520px) {
  .moon-row { grid-template-columns: repeat(7, 1fr); }
  .wave-btn .wave-l { font-size: 9.5px; }
  .room-title { font-size: 22px; }
}

/* v0.8.0 ---------- はじめに（入会直後のご案内） ---------- */
.welcome .wrap { max-width: 680px; }
.wl-progress { height: 5px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; margin: 8px 0 6px; }
.wl-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .35s ease; }
.wl-count { text-align: right; font-size: 12px; color: var(--ink-faint); margin: 0 0 6px; }
.wl-step { display: none; padding: 8px 0 4px; }
.wl-step.on { display: block; animation: wlIn .35s ease; }
@keyframes wlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wl-step.on { animation: none; } .wl-progress i { transition: none; } }
.wl-kicker { font-size: 12px; letter-spacing: .22em; color: var(--pink); font-weight: 700; margin: 12px 0 8px; }
.wl-step h1, .wl-step h2 { font-size: 24px; line-height: 1.55; margin: 0 0 12px; color: var(--ink); }
.wl-lead { color: var(--ink-soft); line-height: 1.95; margin: 0 0 18px; }
.wl-note { color: var(--ink-soft); font-size: 14.5px; line-height: 1.9; margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 12px 12px 0; }
.wl-promise { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.wl-promise p { margin: 0 0 8px; color: var(--ink); }
.wl-promise ul { margin: 0; padding-left: 1.2em; color: var(--ink-soft); line-height: 1.95; }
.wl-flow { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.wl-flow li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px; }
.wl-flow .n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--violet-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.wl-flow strong { color: var(--ink); } .wl-flow p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.wl-mock { border: 1px dashed var(--card-line); border-radius: 16px; padding: 14px; background: var(--bg); display: grid; gap: 10px; max-width: 360px; margin: 0 auto; }
.mock-title { font-weight: 700; color: var(--ink); font-size: 14px; }
.mock-input { border: 1px solid var(--card-line); border-radius: 10px; padding: 10px 12px; color: var(--ink-faint); font-size: 13.5px; background: var(--card); }
.mock-wave { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mock-wave b { text-align: center; padding: 8px 0; border-radius: 10px; border: 1px solid var(--card-line); background: var(--card); color: var(--ink); }
.mock-wave b.on { border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 0 0 2px var(--pink) inset; }
.mock-btn { text-align: center; padding: 10px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13.5px; background: linear-gradient(135deg, #ef8fb9, #d96b9e 60%, #c98f2d); }
.wl-moons { margin: 4px 0 18px; }
.wl-cards { display: grid; gap: 12px; }
.wl-cards > div { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px; }
.wl-cards strong { color: var(--ink); } .wl-cards p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.wl-weeks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wl-weeks > div { border: 1px solid var(--card-line); border-radius: 14px; padding: 12px; background: var(--bg); opacity: .75; display: grid; gap: 2px; }
.wl-weeks > div.on { opacity: 1; border-color: var(--pink); background: var(--pink-soft); }
.wl-weeks span { font-size: 11px; letter-spacing: .18em; color: var(--violet); font-weight: 700; }
.wl-weeks strong { color: var(--ink); } .wl-weeks small { color: var(--ink-faint); }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chips span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--card-line); background: var(--card); color: var(--ink-soft); font-size: 14px; }
.wl-emg { background: var(--night); color: var(--night-ink); border-radius: 18px; padding: 18px; }
.emg-btn { text-align: center; padding: 12px; border-radius: 999px; background: #eec27a; color: #3a2c10; font-weight: 700; margin-bottom: 12px; }
.wl-emg ol { margin: 0; padding-left: 1.3em; color: var(--night-soft); line-height: 2; }
.wl-help { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.wl-help li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--card); }
.wl-help strong { color: var(--ink); } .wl-help span { color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.wl-safe { background: var(--pink-soft); border: 1px solid var(--pink); border-radius: 14px; padding: 14px 16px; }
.wl-safe p { margin: 0 0 6px; color: var(--ink); line-height: 1.85; font-size: 14.5px; }
.wl-recap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.wl-recap > div { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.wl-recap strong { display: block; color: var(--gold); font-size: 17px; }
.wl-cta { text-align: center; margin: 6px 0 0; }
.wl-nav { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0 8px; }
.wl-nav button { border: 1px solid var(--card-line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 700; cursor: pointer; }
.wl-nav .wl-next { background: var(--violet-deep); color: #fff; border-color: var(--violet-deep); margin-left: auto; }
.wl-skip { text-align: center; margin: 4px 0 24px; }
.wl-skip button { background: none; border: none; color: var(--ink-faint); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13.5px; }
.room-foot { text-align: center; margin: 8px 0 28px; font-size: 13.5px; }
.room-foot a { color: var(--ink-faint); }

/* v0.8.0 ---------- 夜の緊急ページ ---------- */
.sos .wrap { max-width: 640px; }
.sos-stage { background: var(--night); color: var(--night-ink); border-radius: 22px; padding: 22px 20px 26px; box-shadow: 0 16px 40px rgba(20, 14, 50, 0.35); margin-top: 10px; }
.sos-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-bottom: 18px; }
.sos-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ef8fb9, #eec27a); transition: width 1s linear; }
.sos-step { display: none; }
.sos-step.on { display: block; animation: wlIn .4s ease; }
.sos-kicker { font-size: 12px; letter-spacing: .24em; color: #eec27a; font-weight: 700; margin: 0 0 8px; }
.sos-step h1, .sos-step h2 { font-size: 23px; line-height: 1.55; margin: 0 0 12px; color: var(--night-ink); }
.sos-lead { color: var(--night-soft); line-height: 1.95; margin: 0 0 18px; }
.sos-lead strong { color: #fff; }
.sos-q { color: var(--night-ink); margin: 6px 0 10px; font-weight: 700; }
.sos-sub { color: var(--night-soft); font-size: 13.5px; line-height: 1.85; margin: 12px 0 0; }
.sos-wave { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.sos-w { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: var(--night-ink); border-radius: 14px; padding: 12px 2px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sos-w b { font-size: 20px; } .sos-w span { font-size: 10px; color: var(--night-soft); line-height: 1.3; text-align: center; }
.sos-w.on { background: rgba(239, 143, 185, 0.22); border-color: #ef8fb9; box-shadow: 0 0 0 2px #ef8fb9 inset; }
.sos-btn { display: block; width: 100%; margin-top: 16px; border: none; border-radius: 999px; padding: 14px 18px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; background: #eec27a; color: #3a2c10; }
.sos-btn:disabled { opacity: .45; cursor: default; }
.sos-link { display: block; margin: 12px auto 0; background: none; border: none; color: var(--night-soft); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.sos-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sos-chip { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); color: var(--night-ink); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 15px; cursor: pointer; }
.sos-chip.on { background: #eec27a; color: #3a2c10; border-color: #eec27a; font-weight: 700; }
.sos-stage textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.8; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--night-ink); resize: vertical; }
.sos-stage textarea:focus { outline: 2px solid #eec27a; outline-offset: 1px; }
.sos-msg { color: #f5a8c8; min-height: 1.4em; margin: 10px 0 0; font-size: 14px; }
.sos-breath { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 4px; min-height: 190px; justify-content: center; }
.sos-circle { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbe3a6, #eec27a 70%); box-shadow: 0 0 40px rgba(238, 194, 122, 0.5); transition: transform 4.5s ease-in-out; }
.sos-circle.in { transform: scale(1.45); } .sos-circle.out { transform: scale(0.8); }
.sos-breath span { color: var(--night-ink); font-size: 17px; }
.sos-after { color: #fbe3a6; font-weight: 700; line-height: 1.8; margin: 0 0 14px; }
.sos-cta { text-align: center; margin: 8px 0 0; }
.sos-box { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 20px; margin: 22px 0; box-shadow: var(--shadow); }
.sos-box h2 { font-size: 18px; margin: 0 0 4px; color: var(--ink); }
.sos-box .sos-sub { color: var(--ink-faint); margin: 0 0 12px; }
.sos-drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sos-drafts li { border: 1px solid var(--card-line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.sos-drafts time { font-size: 12px; color: var(--ink-faint); }
.sos-drafts p { margin: 4px 0 8px; color: var(--ink); line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.sos-del { background: none; border: none; color: var(--ink-faint); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.sos-empty { color: var(--ink-faint); font-size: 14px; margin: 0; }
.sos-help { background: var(--pink-soft); border: 1px solid var(--pink); border-radius: 14px; padding: 14px 16px; margin: 0 0 30px; }
.sos-help p { margin: 0 0 6px; color: var(--ink); line-height: 1.85; font-size: 14.5px; }
.sos-help a { color: var(--ink); font-weight: 700; }
.room-sos { text-align: center; margin: 14px 0 0; }
.room-sos a { display: inline-block; background: var(--night); color: #eec27a; font-weight: 700; padding: 11px 20px; border-radius: 999px; text-decoration: none; }
.room-sos span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-faint); }
.room-links li a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .sos-circle { transition: none; } .sos-step.on { animation: none; } }
@media (max-width: 480px) { .sos-w span { font-size: 9px; } }