/* KisekaeAi Web 版の見た目（design/mocks/d_b_structure_c_mood.html を本番用に写したもの）
   方針: 白黒モノトーン＋金の差し色 1 つ。罫線と余白で区切る。本文 16px・タップ領域 44px 以上。
   外部フォント・CDN は使わない（CSP は自分のサーバーだけ）。HTML に style 属性を書かない（CSP で禁止） */

:root {
  --bg: #ffffff;
  --surface: #f5f5f2;
  --fg: #121212;
  --muted: #6e6e69;
  --line: #e4e4df;
  --gold: #b08d57;
  --gold-ink: #121212;
  --gold-soft: #f4ecdd;
  --ok: #2f8f5b;
  --warn: #b7792a;
  --r-lg: 12px; --r-md: 10px;
  --display: "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f0f0f; --surface: #1a1a19; --fg: #f4f4f1; --muted: #9c9c95; --line: #2b2b29; --gold: #d2b57e; --gold-ink: #121212; --gold-soft: #2a241a; --ok: #58b985; --warn: #d79a4c; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; min-height: 100vh; }
[hidden] { display: none !important; }
p { margin: 0; }
h1, h2 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: 32px; line-height: 1.3; }
h2 { font-size: 22px; line-height: 1.35; }
a { color: inherit; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.6; }
.small { font-size: 13px; }
.center { text-align: center; }
.gap-xs { margin-top: 6px; }
.gap-s { margin-top: 10px; }
.gap-m { margin-top: 16px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { max-width: 430px; margin: 0 auto; padding: 0 20px 40px; }
#loading { padding: 40vh 20px; }

/* ログイン後の案内ページ（web.mjs の page() が使う） */
.card { max-width: 480px; margin: 12vh auto; padding: 32px 20px; text-align: center; }
.card h1 { font-size: 24px; margin-bottom: 12px; }
.card p { margin: 8px 0; }

/* ヘッダー */
.hdr { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hdr { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  @media (prefers-reduced-transparency: reduce) { .hdr { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
}
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.logo .rule { width: 18px; height: 1px; background: var(--gold); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--fg); font-weight: 600; font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; cursor: pointer; font-family: inherit; }
.pill .i { color: var(--gold); width: 14px; height: 14px; }
.balwrap { position: relative; }
.pop { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 240px; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 10; text-align: left; }
.balwrap.open .pop { display: block; }
@media (hover: hover) { .balwrap:hover .pop { display: block; } }
.poprow { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.poprow:first-child { padding-top: 0; }
.poprow b { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-weight: 600; font-size: 15px; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .08s ease; }
.btn:active { transform: scale(.985); }
.btn.primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn.block { width: 100%; }
.btn.sm { min-height: 44px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); min-height: 44px; font-weight: 500; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn .i { width: 18px; height: 18px; }
:is(.btn, .pill, .chip, .zone, .pack, .seg button, .x, .rechoose, summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 区切り・小物 */
.sect { padding: 24px 0; border-top: 1px solid var(--line); }
.sect:first-child { border-top: 0; }
.sect-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sect-head .muted { font-size: 12px; letter-spacing: .04em; }
.label { font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.hint { margin-top: 10px; }
.status { min-height: 1.6em; margin-top: 8px; text-align: center; font-size: 14px; }
details { border-top: 1px solid var(--line); }
summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-weight: 500; font-size: 15px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gold); font-size: 20px; font-weight: 300; }
details[open] summary::after { content: "−"; }
details ul { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
details li + li { margin-top: 6px; }
details > p { margin: 0 0 16px; font-size: 14px; }
.s-foot { margin-top: 20px; }

/* ---------- ログイン前 ---------- */
.hero { padding-top: 24px; }
.hero .lead { margin-top: 14px; color: var(--muted); font-size: 15px; }
.hero .cta { margin-top: 22px; }
.hero .cta .muted { margin-top: 10px; }
.hero-cmp { margin-top: 24px; }
.hero-note { margin-top: 8px; }
/* 加工例の仮シルエット（画像が届くまで） */
.faq { margin-top: 32px; }
.faq .eyebrow { margin-bottom: 6px; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }

/* ビフォー／アフター（重ねて見比べる） */
.cmp { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: var(--ar, 4 / 5); background: var(--surface); }
.cmp .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp .top { clip-path: inset(0 var(--cut, 50%) 0 0); }
.cmp .handle { position: absolute; top: 0; bottom: 0; left: calc(100% - var(--cut, 50%)); width: 1px; background: #fff; pointer-events: none; }
.cmp .handle::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #121212; font-size: 9px; letter-spacing: 2px; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.cmp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cmp .lab { position: absolute; top: 12px; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-shadow: 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
.cmp .lab.l { left: 12px; } .cmp .lab.r { right: 12px; }
.cmp.only .top, .cmp.only .handle, .cmp.only .lab.l, .cmp.only input { display: none; }
.seg { display: inline-flex; gap: 16px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; letter-spacing: .14em; padding: 4px 0; cursor: pointer; border-bottom: 1px solid transparent; }
.seg button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--gold); }

/* ---------- 写真 ---------- */
.zone { position: relative; display: grid; place-items: center; width: 100%; min-height: 228px; padding: 26px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; text-align: center; transition: border-color .15s; }
.zone:hover { border-color: var(--fg); }
.zone .corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--gold); }
.zone .corner.tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.zone .corner.tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.zone .corner.bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.zone .corner.br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.zone .ic { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--fg); color: var(--fg); display: grid; place-items: center; margin: 0 auto 12px; }
.zone .ic .i { width: 24px; height: 24px; }
.zone b { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.zone .muted { margin-top: 2px; }
.zone.has-photo { padding: 0; aspect-ratio: var(--ar, 4 / 5); min-height: 0; overflow: hidden; cursor: default; }
.zone.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.zone .meta { position: absolute; left: 12px; top: 12px; color: #fff; font-size: 11px; letter-spacing: .14em; text-shadow: 0 1px 2px rgba(0,0,0,.4); font-variant-numeric: tabular-nums; }
.rechoose { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.92); color: #121212; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rechoose .i { width: 16px; height: 16px; }
.working .zone img { filter: saturate(.5) brightness(.9); }
.shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 220% 100%; animation: sweep 1.8s linear infinite; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.progress { margin-top: 14px; }
.progress .track { height: 2px; background: var(--line); overflow: hidden; }
.progress .fill { height: 100%; width: 10%; background: var(--gold); transition: width .6s ease; }
.progress .steps { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.progress .steps .done { color: var(--ok); }
.progress .steps .now { color: var(--fg); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; } .progress .fill { transition: none; } }

/* ---------- 指示 ---------- */
.prompt { width: 100%; min-height: 92px; padding: 13px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; line-height: 1.6; resize: none; }
.prompt::placeholder { color: var(--muted); }
.prompt:focus { outline: none; border-color: var(--fg); }
.prompt[disabled] { opacity: .7; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 10px -20px 0; padding: 2px 20px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.chip .sw { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line); background: #ccc; }
.chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; }

/* ---------- 結果 ---------- */
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ---------- 購入シート ---------- */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 92vh; overflow-y: auto; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.sheet .head { display: flex; justify-content: space-between; align-items: center; }
.sheet .x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.sheet .x .i { width: 16px; height: 16px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pack { position: relative; display: grid; gap: 2px; width: 100%; min-height: 96px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.pack[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.pack .n { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pack .n small { font-family: inherit; font-size: 12px; font-weight: 600; margin-left: 3px; letter-spacing: .06em; }
.pack .price { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pack .price .i { width: 13px; height: 13px; fill: var(--gold); stroke: none; }
.pack .per { font-size: 12px; color: var(--muted); }
.pack .tag { position: absolute; top: -9px; right: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gold); background: var(--bg); color: var(--gold); font-size: 10px; letter-spacing: .12em; }
.pack.wide { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; min-height: 0; }
.pack.wide .per { grid-column: 2; }
.howpay { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); }
.howpay .i { width: 20px; height: 20px; color: var(--fg); margin-top: 2px; }
.sheet .foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 12px; letter-spacing: .04em; }
.sheet .foot span { display: inline-flex; align-items: center; gap: 5px; }
.sheet .foot .i { width: 13px; height: 13px; color: var(--gold); }

/* ---------- PC（幅 900px 以上）: 2 列 ---------- */
@media (min-width: 900px) {
  .wrap { max-width: 1040px; padding-left: 40px; padding-right: 40px; }
  .hdr { padding-left: max(20px, calc((100vw - 1040px) / 2 + 40px)); padding-right: max(20px, calc((100vw - 1040px) / 2 + 40px)); }
  .hero { display: grid; grid-template-columns: 1fr 440px; grid-template-rows: auto auto 1fr auto; column-gap: 56px; align-items: start; padding-top: 48px; }
  .hero h1, .hero .lead, .hero .cta { grid-column: 1; max-width: 460px; }
  .hero h1 { font-size: 44px; }
  .hero .cta .btn { width: auto; min-width: 280px; }
  .hero .cta .muted { text-align: left; }
  .hero-cmp { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .hero-note { grid-column: 2; grid-row: 4; }
  .hero .faq { grid-column: 1 / -1; margin-top: 40px; max-width: 640px; }
  .app-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-flow: row dense; column-gap: 48px; align-items: start; padding-top: 16px; }
  .app-grid .s-photo, .app-grid .s-result { grid-column: 1; grid-row: 1 / span 8; border-top: 0; }
  .has-result .app-grid .s-photo { display: none; }   /* 結果と写真は同じ枠に出るので、結果の間は写真を隠す（2026-10-16 PC で見出しが重なった修正） */
  .app-grid .s-prompt, .app-grid .s-run, .app-grid .status, .app-grid .s-more, .app-grid .s-foot { grid-column: 2; }
  .app-grid .s-prompt { border-top: 0; }
  .app-grid .zone { min-height: 320px; }
  .chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 520px; max-height: 88vh; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 16px; }
}

/* 紹介（友だちを紹介して無料枠をもらう） */
.ref-hint { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: var(--r-md); background: var(--gold-soft); color: var(--fg); }
.s-invite { margin-top: 16px; }
.inv-rules { margin: 10px 0 0; padding-left: 1.2em; }
.inv-rules li { margin: 4px 0; }
.inv-link { width: 100%; min-height: 48px; padding: 0 14px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; }
.inv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- メールでログイン（2026-10-22） ---------- */
.email-login { margin-top: 18px; }
.email-login .or { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--muted); font-size: 12px; letter-spacing: .12em; }
.email-login .or::before, .email-login .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.email-login .inv-link { margin-top: 0; font-size: 16px; min-height: 50px; }
.email-login .inv-link.code { text-align: center; letter-spacing: .3em; font-size: 22px; font-variant-numeric: tabular-nums; }
.email-login .inv-link:focus { outline: none; border-color: var(--fg); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }