/* 一本の細い縦の流れ：名前を入れる → 文字が一つずつ浮かぶ → 3つの場面 → 案内。スマホ1列を基準に、広い画面でも幅は読み物の幅にとどめる */
:root {
  --bg: #FAF6F4;
  --paper: #FFFFFF;
  --ink: #5E524D;
  --ink-soft: #7E706A;
  --btn: #9E6B62;
  --btn-hover: #87574F;
  --line: #EDE3DE;
  --rose: #C79A92;
  --rose-deep: #A9776E;
  --totsu: #E59A86;
  --ou: #8FB8DA;
  --totsu-bg: #FCEEEA;
  --ou-bg: #EDF4FA;
  --display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2A2427; --paper: #342D31; --ink: #EDE3DF; --ink-soft: #BFB2AD; --line: #4A4145; --btn: #B47C72; --btn-hover: #C68E84;
    --rose: #D7ABA3; --rose-deep: #E8BDB4; --totsu: #EFA997; --ou: #9EC6E6; --totsu-bg: #46363A; --ou-bg: #353C47; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2A2427; --paper: #342D31; --ink: #EDE3DF; --ink-soft: #BFB2AD; --line: #4A4145; --btn: #B47C72; --btn-hover: #C68E84;
  --rose: #D7ABA3; --rose-deep: #E8BDB4; --totsu: #EFA997; --ou: #9EC6E6; --totsu-bg: #46363A; --ou-bg: #353C47; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { word-break: auto-phrase; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.9; padding-inline: 16px; }
.wrap { max-width: 600px; margin: 0 auto; padding-block: 28px 64px; display: flex; flex-direction: column; gap: 40px; }
h1, h2, h3, .catch { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; }
p { margin: 0; }

/* ヘッダー */
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo .mark-wrap { position: relative; width: 60px; height: 60px; flex: none; }
.logo .yata { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo .dot { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 270deg, #F4A3AA, #F8C49E, #FBE3A0, #BEE2B2, #A6D6EE, #A9BAEC, #C4B2E8, #F2BCDD, #F4A3AA);
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 72%); mask-image: radial-gradient(circle, #000 52%, transparent 72%); }
.logo .txt { display: flex; flex-direction: column; align-items: stretch; line-height: 1.2; }
.logo .en { font-family: var(--display); font-size: 12px; color: var(--ink-soft); display: grid; grid-template-columns: repeat(13, 1fr); text-align: center; padding-inline: 11px 14px; }
.logo .jp { font-family: var(--display); font-weight: 700; font-size: 29px; letter-spacing: .2em; padding-left: .2em; color: var(--rose-deep); }
.brand small { font-size: 12.5px; letter-spacing: .1em; color: var(--rose-deep); background: var(--paper); padding: 5px 18px; border-radius: 99px; margin-top: 4px; box-shadow: 0 1px 6px rgba(160,110,100,.12); }

/* 入力 */
.hero { display: flex; flex-direction: column; gap: 18px; text-align: center; }
.hero h1 { font-size: clamp(19px, 5.2vw, 24px); line-height: 1.6; }
.hero .lead { color: var(--ink-soft); font-size: 14px; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
form { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.frow { display: flex; gap: 10px; justify-content: center; }
.fnote { font-size: 12px; color: var(--ink-soft); max-width: 300px; text-align: left; line-height: 1.7; }
.fnote summary { cursor: pointer; text-align: center; list-style: none; }
.fnote summary::after { content: " ⓘ"; color: var(--rose-deep); }
.fnote summary::-webkit-details-marker { display: none; }
.oldnote { font-size: 13px; background: var(--paper); border: 1px solid var(--rose); border-radius: 14px; padding: 12px 14px; text-align: left; color: var(--ink); }
.oldnote b { font-family: var(--display); color: var(--rose-deep); }
form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); text-align: left; }
input { width: 140px; font: inherit; font-size: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.go { align-self: center; font: inherit; font-family: var(--display); font-size: 16px; padding: 10px 28px; border: 0; border-radius: 12px; background: var(--btn); color: #fff; cursor: pointer; }
.go:hover, .cta:hover { background: var(--btn-hover); }
.cta { width: 100%; font: inherit; font-family: var(--display); font-size: 16px; padding: 14px 20px; border: 0; border-radius: 14px; background: var(--btn); color: #fff; cursor: pointer; }
.cta-note { font-size: 13px; color: var(--ink-soft); }
.colbtn { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 14px; color: var(--rose-deep); background: var(--paper); border: 1px solid var(--rose); border-radius: 99px; padding: 8px 18px; text-decoration: none; line-height: 1.5; }
.colbtn small { font-size: 11px; color: #fff; background: var(--rose); border-radius: 99px; padding: 1px 8px; flex: none; }
.colbtn:hover { background: var(--totsu-bg); }
.colbtn.sm { font-size: 13px; padding: 5px 16px; }
footer .colbtn { color: var(--rose-deep); }
.share-top { align-self: center; font: inherit; font-size: 13px; padding: 6px 16px; border-radius: 99px; border: 1px solid var(--rose); background: var(--paper); color: var(--rose-deep); cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(40,30,30,.55); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal .box { background: var(--paper); border-radius: 18px; padding: 16px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow: auto; }
.modal img { width: 100%; border-radius: 10px; }
.modal p { font-size: 13px; color: var(--ink-soft); text-align: center; }
.modal button { align-self: center; font: inherit; font-size: 14px; padding: 7px 22px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }

/* 文字の丸 */
.orb { position: relative; width: 76px; height: 76px; flex: none; }
.orb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb .sw { -webkit-mask-image: radial-gradient(circle, #000 0%, #000 42%, transparent 70%); mask-image: radial-gradient(circle, #000 0%, #000 42%, transparent 70%); }

.result { display: flex; flex-direction: column; gap: 40px; }
.name-head { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.name-head .who { font-size: 13px; color: var(--ink-soft); letter-spacing: .2em; }
.name-head .catch { font-size: 21px; line-height: 1.6; color: var(--rose-deep); }
.headnote { font-family: var(--display); font-size: 13px; color: var(--ink-soft); letter-spacing: .08em; }
.headwhy { align-self: center; max-width: 420px; text-align: left; margin-top: 0; }
.headwhy summary { text-align: center; }
.pp .pw { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; margin: 2px 0; }

.letters { display: flex; flex-direction: column; gap: 14px; }
.orb .yoon { position: absolute; right: -6px; bottom: -2px; width: 34px; height: 34px; }
.orb .yoon .orb, .chars.dense .orb .yoon .orb { width: 100%; height: 100%; }
.chars.dense { flex-wrap: nowrap; gap: 2px; }
.chars.dense .char { width: 58px; flex: none; }
.chars.dense .orb { width: 56px; height: 56px; }
.chars.dense .orb .yoon { width: 26px; height: 26px; right: -5px; }
.chars.dense .char .k { font-size: 14px; }
.chars.dense .char .w { font-size: 9.5px; white-space: normal; letter-spacing: -0.05em; line-height: 1.35; min-height: 3.9em; }
.lrow { display: flex; flex-direction: column; gap: 2px; }
.lrow .tag { font-size: 12px; color: var(--ink-soft); letter-spacing: .2em; text-align: center; }
.chars { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.char { width: 88px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: scale(.7); filter: blur(8px); animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.char .k { font-family: var(--display); font-size: 16px; margin-top: -4px; }
.char .w { font-size: 11.5px; line-height: 1.5; min-height: 2.6em; white-space: nowrap; letter-spacing: -0.03em; }
.mark { display: inline-block; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 99px; margin-top: 3px; color: #fff; background: var(--totsu); }
.tip { font-size: 11px; line-height: 1.4; color: var(--ink-soft); margin-top: 3px; }
.mark.ou { background: var(--ou); }
.mark.mix { background: linear-gradient(90deg, var(--ou), var(--totsu)); }
.legend { font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.8; display: flex; flex-direction: column; gap: 2px; }
.legend span { text-wrap: balance; }

/* 特徴 */
.traits { display: flex; flex-direction: column; gap: 12px; background: var(--paper); border-radius: 18px; padding: 22px 20px; }
.traits h2 { font-size: 16px; }
.traits dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.traits dt { font-family: var(--display); font-size: 13px; color: var(--rose-deep); }
.traits dd { margin: 0; }

/* 場面へのジャンプ */
.jump { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.jump a { font-size: 13px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 5px 14px; background: var(--paper); }
.jump a:hover { border-color: var(--rose); }

/* 場面（白いカードを開閉） */
.scenes { display: flex; flex-direction: column; gap: 14px; }
.scene { background: var(--paper); border-radius: 20px; scroll-margin-top: 16px; }
.scene summary { list-style: none; cursor: pointer; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.scene summary::-webkit-details-marker { display: none; }
.scene .where { grid-column: 1; font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; }
.scene h2 { grid-column: 1; font-size: 18px; }
.scene .sub { grid-column: 1; font-family: var(--display); font-size: 14px; color: var(--rose-deep); line-height: 1.6; }
.scene .tog { grid-column: 2; grid-row: 1 / 4; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 14px; color: var(--rose-deep); transition: transform .3s; }
.scene[open] .tog { transform: rotate(180deg); }
.scene .body { padding: 0 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.scene .flow { font-size: 14px; color: var(--ink); border-top: 1px dashed var(--line); padding-top: 14px; }
.scene h3 { font-size: 13px; letter-spacing: .15em; display: flex; align-items: center; gap: 8px; }
.scene h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--totsu); }
.scene h3.w::before { background: var(--ou); }
.scene ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scene li { border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.85; }
.scene li b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.strong li { background: var(--totsu-bg); }
.weak li { background: var(--ou-bg); }
.pair { display: flex; flex-direction: column; gap: 8px; }
.pair + .pair { border-top: 1px dashed var(--line); padding-top: 14px; }
.scene .pair h3 { font-size: 15px; letter-spacing: .03em; color: var(--rose-deep); }
.scene .pair h3::before { display: none; }
.pp, .pn { border-radius: 14px; padding: 10px 14px 12px; font-size: 14.5px; line-height: 1.85; }
.pp { background: var(--totsu-bg); } .pn { background: var(--ou-bg); }
.pp .lab, .pn .lab { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-soft); }
.pp .lab::before, .pn .lab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--totsu); }
.pn .lab::before { background: var(--ou); }
.pn b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; margin: 2px 0 2px; }
.why { font-size: 13.5px; margin-top: 6px; }
.scene .why summary, .why summary { display: block; padding: 0; cursor: pointer; font-family: var(--display); font-size: 12.5px; color: var(--rose-deep); list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: "＋ "; }
.why[open] summary::before { content: "－ "; }
.why p { margin-top: 6px; color: var(--ink-soft); line-height: 1.8; }
.legendwhy { text-align: center; margin-top: 4px; }
.addnote { margin-top: 4px; }
.addnote p { font-size: 13px; }
.flowwhy { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 0; }
.flowwhy .flow { border-top: 0; padding-top: 0; font-size: 13.5px; color: var(--ink-soft); }
.sublinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.sublinks button, .sublinks a { font: inherit; font-size: 13px; color: var(--ink-soft); background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.live { font-size: 14.5px; text-align: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.live b { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .15em; color: var(--rose-deep); }

/* シェア・相手 */
.share { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.share button { font: inherit; font-size: 13px; padding: 7px 16px; border-radius: 99px; border: 1px solid var(--rose); background: var(--paper); color: var(--rose-deep); cursor: pointer; }
.share button:hover { background: var(--totsu-bg); }
.copied { font-size: 12px; color: var(--ink-soft); text-align: center; min-height: 1.5em; }

/* 締め */
.back { background: var(--paper); border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.back h2 { font-size: 16px; }
.trouble { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.trouble h2 { font-size: 17px; }
.trouble ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trouble li { background: var(--paper); border-radius: 12px; padding: 10px 14px; }
.trouble p { font-size: 14px; }

.check, .manual { border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.check h2, .manual h2 { font-size: 16px; }
.manual { background: var(--paper); border-color: var(--rose); }
.manual ul { margin: 0; padding-left: 1.2em; }
.price { font-family: var(--display); font-size: 20px; color: var(--rose-deep); }
.price small { font-size: 12px; color: var(--ink-soft); }
.btn { align-self: flex-start; font: inherit; font-family: var(--display); font-size: 14px; padding: 9px 22px; border-radius: 12px; border: 1px solid var(--rose); background: transparent; color: var(--rose-deep); cursor: not-allowed; }
.manual .btn { background: var(--rose); color: #fff; border-color: var(--rose); }
.soon { font-size: 12px; color: var(--ink-soft); }

.note { font-size: 13px; color: var(--ink-soft); text-align: center; background: var(--paper); border-radius: 14px; padding: 14px; }

.howto { font-size: 13.5px; background: var(--bg); border-radius: 12px; padding: 10px 14px; }
.howto summary { cursor: pointer; font-family: var(--display); font-size: 14px; color: var(--rose-deep); }
.howto ol { margin: 8px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.howto-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.more { align-self: flex-start; font-family: var(--display); font-size: 14px; color: var(--rose-deep); }
.sample { font-size: 13.5px; background: var(--bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.sample b { font-family: var(--display); font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; }

footer { border-top: 1px solid var(--line); padding-top: 20px; font-size: 12.5px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; text-align: center; }
footer a { color: var(--ink-soft); }

/* 名前の設計図の紹介ページ */
.mv { display: flex; flex-direction: column; gap: 18px; }
.mv .backlink { font-size: 13px; color: var(--ink-soft); }
.mv-eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: .25em; color: var(--rose-deep); }
.mv h1 { font-size: 24px; margin-top: -10px; }
.mv h2 { font-size: 17px; margin-top: 12px; }
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spec > div { background: var(--paper); border-radius: 14px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; }
.spec b { font-family: var(--display); font-size: 17px; color: var(--rose-deep); }
.spec span { font-size: 12px; color: var(--ink-soft); }
.chaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chaps li { background: var(--paper); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.mc { font-family: var(--display); font-size: 11.5px; letter-spacing: .15em; color: var(--rose-deep); }
.chaps b { font-family: var(--display); font-size: 15.5px; }
.chaps p { font-size: 14px; }
.lead2 { font-size: 13.5px; color: var(--ink-soft); }
.peek { display: flex; flex-direction: column; gap: 12px; }
.pk { position: relative; overflow: hidden; background: var(--paper); border-radius: 18px; padding: 18px 18px 64px; display: flex; flex-direction: column; gap: 10px; max-height: 300px; font-size: 14px; }
.pk-t b { font-family: var(--display); font-size: 15.5px; }
.pk-vs, .pk-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 460px) { .pk-vs, .pk-ab { grid-template-columns: 1fr; } }
.pk-vs > div, .pk-ab > div { background: var(--bg); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.pk-vs .hi { background: var(--totsu-bg); }
.pk-ab .a { background: var(--ou-bg); } .pk-ab .b { background: var(--totsu-bg); }
.pk small { display: block; font-family: var(--display); font-size: 11px; color: var(--rose-deep); }
.pk-vs b { font-family: var(--display); display: block; }
.veil { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  background: linear-gradient(to bottom, transparent, var(--paper) 72%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
.veil span { font-family: var(--display); font-size: 13px; color: var(--rose-deep); background: var(--paper); border: 1px solid var(--rose); border-radius: 99px; padding: 4px 14px; }
.buy { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mv .cta:disabled { opacity: .7; cursor: not-allowed; }
/* 個人セッションのページ */
.session { display: flex; flex-direction: column; gap: 28px; }
.session .backlink { font-size: 13px; color: var(--ink-soft); }
.session h1 { font-size: 21px; line-height: 1.6; }
.sbanner { display: block; width: 100%; height: auto; border-radius: 20px; }
.prof { display: flex; gap: 16px; align-items: center; background: var(--paper); border-radius: 20px; padding: 20px; flex-wrap: wrap; }
.photo { width: 96px; height: 96px; border-radius: 50%; background: var(--totsu-bg); display: grid; place-items: center; font-size: 11px; color: var(--ink-soft); text-align: center; line-height: 1.5; flex: none; }
.prof > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.prof .role { font-size: 12.5px; color: var(--ink-soft); margin-top: -6px; }
.prof .nm { font-family: var(--display); font-size: 17px; }
.yt { font-size: 13.5px; background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.yt a { color: var(--rose-deep); }
.info { background: var(--paper); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.info h2 { font-size: 15px; color: var(--rose-deep); }
.info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.info dt { color: var(--ink-soft); }
.info dd { margin: 0; }
.ph { color: var(--ink-soft); font-size: 13px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
.sdesc { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.sdesc h2, .info h2 { font-size: 16px; color: var(--rose-deep); margin-top: 8px; }
.sflow { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.sflow b { display: block; font-family: var(--display); }
.sflow small { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.voices { display: flex; flex-direction: column; gap: 10px; }
.voices blockquote { margin: 0; background: var(--paper); border-radius: 16px; padding: 14px 16px; font-size: 13.5px; line-height: 1.85; }
.snote { font-size: 12.5px; color: var(--ink-soft); }
.out-link { align-self: flex-start; font-family: var(--display); font-size: 14px; padding: 9px 22px; border-radius: 12px; background: var(--rose); color: #fff; text-decoration: none; }

/* コラムのページ */
.column { display: flex; flex-direction: column; gap: 22px; }
.column .backlink { font-size: 13px; color: var(--ink-soft); }
.column h1 { font-size: 22px; line-height: 1.6; margin-top: -10px; }
.column h2 { font-size: 17px; margin-top: 10px; }
.column p { font-size: 15px; }
.kw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .kw { grid-template-columns: 1fr; } }
.kw.one { grid-template-columns: 1fr; }
.kw > div { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.kw .no { background: var(--paper); }
.kw .yes { background: var(--totsu-bg); }
.kw b { font-family: var(--display); font-size: 14px; color: var(--rose-deep); }
.kw ul { margin: 0; padding-left: 1.2em; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.point { background: var(--paper); border: 1px solid var(--rose); border-radius: 20px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.point h2 { margin: 0; color: var(--rose-deep); }
.blog { display: flex; flex-direction: column; gap: 18px; }
.blog .backlink { font-size: 13px; color: var(--ink-soft); }
.blog h1 { font-size: 22px; margin-top: -10px; }
.cats { display: flex; gap: 6px; flex-wrap: wrap; }
.cats span { font-size: 12.5px; padding: 4px 12px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); }
.cats span.on { background: var(--rose); color: #fff; border-color: var(--rose); }
.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.posts a { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: var(--ink); }
.posts a:hover { box-shadow: 0 0 0 1px var(--rose); }
.posts .meta { font-size: 12px; color: var(--ink-soft); display: flex; gap: 10px; }
.posts .meta em { font-style: normal; color: var(--rose-deep); }
.posts b { font-family: var(--display); font-size: 16px; line-height: 1.6; }
.posts p { font-size: 13.5px; color: var(--ink-soft); }
.posts .soon-post { background: transparent; border: 1px dashed var(--line); border-radius: 16px; padding: 16px 18px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.column .meta { font-size: 12px; color: var(--ink-soft); }
.author { display: flex; align-items: center; gap: 14px; }
.author-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.author div { display: flex; flex-direction: column; }
.author b { font-family: var(--display); font-size: 17px; }
.author span { font-size: 12.5px; color: var(--ink-soft); }
.column .cta { display: block; text-align: center; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .char { animation: none; opacity: 1; transform: none; filter: none; } }
.samplebar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.samplebar span { width: 100%; text-align: center; font-size: 12px; color: var(--ink-soft); }
.samplebar button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.family { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.family b { font-family: var(--display); color: var(--rose-deep); font-size: 15px; }
.family ul { margin: 0; padding-left: 1.2em; }
.sub-btn { font: inherit; font-family: var(--display); font-size: 14px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--rose); background: var(--paper); color: var(--rose-deep); cursor: pointer; }
.sub-btn:disabled { opacity: .7; cursor: not-allowed; }
.scene .pair h3 .from { font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-soft); margin-left: 8px; letter-spacing: .1em; }
.scenes-note { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; margin: 0 0 -4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.scenes-note .why p { text-align: left; }
.scenes-note.pmnote { margin: 4px 0 0; }