/* ============================================================
   こころむ — 参照実測に基づく案件トークンセット
   参照：KATE ZONE（黒基調・480px縦型・ガラスUI・赤アクセント）
   ============================================================ */

:root {
  /* 配色（参照実測：#000系の青みがかった暗色3段＋白＋赤） */
  --c-bg0: #070711;
  --c-bg1: #0d0d1a;
  --c-bg2: #141425;
  --c-text: #f2f0ee;
  --c-sub: #a09eae;
  --c-line: rgba(255, 255, 255, .14);
  --c-accent: #db2440;

  /* ゾーンごとの差し色（暗部で光らせる用。面積は絞る） */
  --z-lip: #ff3355;
  --z-eye: #8f6cff;
  --z-cheek: #ff8fa5;
  --z-base: #e5c07b;
  --za: var(--c-accent);

  /* ガラスUI（参照実測：blur16px） */
  --glass: rgba(255, 255, 255, .05);
  --blur: blur(16px);

  /* 角丸2種・影1種 */
  --r-s: 6px;
  --r-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);

  /* 書体（参照実測：Bruno Ace／Oswald／Noto Sans JP。かなはNotoに落ちる） */
  --font-disp: 'Bruno Ace', 'Oswald', 'Noto Sans JP', sans-serif;
  --font-head: 'Oswald', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--c-bg0);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* ===== 舞台（スマホ幅480pxの縦型。参照実測 --pcw:480px） ===== */
.stage {
  position: relative;
  width: min(480px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--c-bg0) 0%, var(--c-bg1) 45%, var(--c-bg2) 100%);
  border-left: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  overflow-x: clip;
}

.side-label {
  position: fixed;
  left: calc(50% - 340px);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-disp);
  font-size: 14px;
  letter-spacing: .6em;
  color: rgba(255, 255, 255, .14);
  user-select: none;
}
@media (max-width: 700px) { .side-label { display: none; } }

/* ===== 入口 ===== */
#entrance {
  position: fixed;
  inset: 0;
  z-index: 300;
  margin: 0 auto;
  width: min(480px, 100%);
  background: var(--c-bg0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
  transition: opacity .9s ease;
}
#entrance.gone { opacity: 0; pointer-events: none; }

.ent-lips { width: 180px; }
.lips-path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  filter: drop-shadow(0 0 10px rgba(219, 36, 64, .55));
  animation: draw 2.2s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.ent-brand {
  font-family: var(--font-disp);
  font-size: 30px;
  letter-spacing: .34em;
  padding-left: .34em;
  opacity: 0;
  animation: rise 1s ease 1.2s forwards;
}
.ent-sub {
  font-family: var(--font-disp);
  font-size: 11px;
  letter-spacing: .52em;
  padding-left: .52em;
  color: var(--c-sub);
  margin-top: -8px;
  opacity: 0;
  animation: rise 1s ease 1.45s forwards;
}
.ent-copy {
  font-size: 13px;
  color: var(--c-sub);
  letter-spacing: .2em;
  opacity: 0;
  animation: rise 1s ease 1.7s forwards;
}
.ent-hint {
  margin-top: 26px;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .5em;
  padding-left: .5em;
  color: var(--c-sub);
  opacity: 0;
}
#entrance.ready .ent-hint { animation: pulse 2.4s ease infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
  .lips-path { stroke-dashoffset: 0; }
  .ent-brand, .ent-sub, .ent-copy { opacity: 1; }
  #entrance.ready .ent-hint { opacity: 1; animation: none; }
}

/* ===== ヘッダー ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  background: rgba(7, 7, 17, .6);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--c-line);
}
.topbar .brand {
  font-family: var(--font-disp);
  font-size: 15px;
  letter-spacing: .34em;
  padding-left: .34em;
}
#btn-back {
  position: absolute;
  left: 6px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--c-sub);
}
.proto-tag {
  position: absolute;
  right: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--c-sub);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}

/* ===== ビュー共通 ===== */
.view { display: none; padding: 32px 20px 60px; }
.view.active { display: block; animation: fadeup .6s ease; }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ===== ホーム ===== */
.hero { padding: 28px 0 12px; }
.hero-eyebrow {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--c-sub);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  margin-bottom: 16px;
}
.hero-lead { font-size: 13px; color: var(--c-sub); }

.home-note {
  margin-top: 28px;
  font-size: 11px;
  color: var(--c-sub);
  line-height: 1.8;
}

/* カルテ */
.karte-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 4px;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
}
.karte-title {
  width: 100%;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-sub);
}
.karte-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}
.karte-chip b { font-family: var(--font-head); font-weight: 500; font-size: 11px; letter-spacing: .12em; color: var(--c-sub); }

/* ゾーンの扉 */
.zone-doors { display: grid; gap: 14px; margin-top: 26px; }
.door {
  position: relative;
  display: block;
  padding: 22px 48px 22px 22px;
  background: var(--glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.door:hover { transform: translateY(-2px); border-color: var(--za); }
.door[data-zone="lip"]   { --za: var(--z-lip); }
.door[data-zone="eye"]   { --za: var(--z-eye); }
.door[data-zone="cheek"] { --za: var(--z-cheek); }
.door[data-zone="base"]  { --za: var(--z-base); }
.door-glow {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--za);
  box-shadow: 0 0 18px var(--za);
  animation: glowpulse 3.6s ease infinite;
}
@keyframes glowpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.door-label {
  display: block;
  font-family: var(--font-disp);
  font-size: 15px;
  letter-spacing: .22em;
}
.door-jp { display: block; font-size: 12px; color: var(--c-sub); margin-top: 2px; }
.door-copy { display: block; font-size: 12px; color: var(--c-sub); margin-top: 10px; line-height: 1.8; }
.door-arrow {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--za);
  font-size: 16px;
}

/* ===== ゾーン共通 ===== */
body[data-zone="lip"]   .stage { --za: var(--z-lip); }
body[data-zone="eye"]   .stage { --za: var(--z-eye); }
body[data-zone="cheek"] .stage { --za: var(--z-cheek); }
body[data-zone="base"]  .stage { --za: var(--z-base); }

.zone-head { padding: 20px 0 8px; }
.zone-label {
  font-family: var(--font-disp);
  font-size: 12px;
  letter-spacing: .42em;
  color: var(--za);
  text-shadow: 0 0 14px var(--za);
  margin-bottom: 10px;
}
.zone-head h2 { font-size: 24px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; }
.zone-copy { margin-top: 12px; font-size: 13px; color: var(--c-sub); }

/* 診断カード */
.diag-cards { display: grid; gap: 12px; margin-top: 24px; }
.diag-card {
  display: block;
  text-align: left;
  padding: 20px 22px 24px;
  background: var(--glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  transition: border-color .35s ease;
}
.diag-card:hover { border-color: var(--za); }
.diag-kind {
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .4em;
  color: var(--za);
  margin-bottom: 8px;
}
.diag-title { display: block; font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.diag-desc { display: block; font-size: 12px; color: var(--c-sub); margin-top: 8px; line-height: 1.8; }
.diag-go {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 10px 22px;
  min-height: 44px;
  line-height: 24px;
  border: 1px solid var(--za);
  border-radius: var(--r-pill);
  color: var(--c-text);
}

/* 診断結果 */
.result-slot {
  margin-top: 22px;
  padding: 24px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--za);
  border-radius: var(--r-s);
  box-shadow: var(--shadow);
}
.result-eyebrow { font-size: 11px; letter-spacing: .3em; color: var(--c-sub); }
.result-eyebrow small { letter-spacing: .06em; margin-left: 6px; }
.result-type {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .14em;
  margin: 10px 0 12px;
  line-height: 1.3;
}
.result-type small {
  display: block;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .4em;
  color: var(--za);
  margin-top: 4px;
}
.result-desc { font-size: 14px; }
.result-advice {
  margin-top: 12px;
  padding: 12px 16px;
  font-size: 13px;
  background: rgba(0, 0, 0, .3);
  border-left: 2px solid var(--za);
}
.rec-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.rec-chip i {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 45%), var(--sw);
}
.rec-chip small { color: var(--c-sub); }
.result-redo {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  color: var(--c-sub);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
}

/* CTA */
.cta {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--c-accent);
  border-radius: var(--r-pill);
  box-shadow: 0 0 24px rgba(219, 36, 64, .35);
  transition: transform .25s ease;
  cursor: pointer;
}
.cta:hover { transform: translateY(-1px); }
.cta.ghost {
  background: none;
  border: 1px solid var(--c-line);
  box-shadow: none;
  color: var(--c-text);
  font-weight: 400;
}

/* スキャン写真の再利用ボタン */
.scan-reuse {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-sub);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 36px;
  text-align: left;
}
.scan-reuse:hover { color: var(--c-text); }

/* ===== 商品グリッド ===== */
.zone-products { margin-top: 40px; }
.sec-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .32em;
  margin-bottom: 18px;
}
.sec-title small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--c-sub);
  margin-top: 4px;
}
.products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product {
  padding: 18px 16px 20px;
  background: var(--glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
}
.p-swatch {
  display: block;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%), var(--sw);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  margin-bottom: 12px;
}
.p-name { font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.p-name small {
  margin-left: 6px;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--c-sub);
}
.p-meta { font-size: 11px; color: var(--za); margin-top: 2px; letter-spacing: .1em; }
.p-mood { font-size: 11px; color: var(--c-sub); margin-top: 6px; }
.p-try {
  margin-top: 12px;
  font-size: 12px;
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: border-color .3s ease;
}
.p-try:hover { border-color: var(--z-lip); }

/* ===== バーチャル試し ===== */
.tryon-stage {
  margin-top: 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
}
#tryon-empty { padding: 36px 24px 30px; text-align: center; }
#tryon-empty > p { font-size: 14px; color: var(--c-sub); }
.tryon-modes { margin-top: 8px; }
#tryon-canvas { width: 100%; height: auto; display: block; }

.tryon-controls { margin-top: 18px; }

/* 部位タブ */
.tryon-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tryon-tabs::-webkit-scrollbar { display: none; }
.ttab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .16em;
  padding: 9px 16px;
  min-height: 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-sub);
  transition: border-color .25s ease, color .25s ease;
}
.ttab.on { border-color: var(--c-accent); color: var(--c-text); }
.ttab i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 45%), var(--sw);
}
.ttab i.empty { background: none; border: 1px dashed var(--c-line); }

/* 「これ、違う」「好きかも」 */
.judge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.judge {
  padding: 13px 10px;
  min-height: 56px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  border-radius: var(--r-s);
  border: 1px solid var(--c-line);
  transition: border-color .25s ease, transform .2s ease;
}
.judge:active { transform: scale(.97); }
.judge small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--c-sub);
  margin-top: 3px;
}
.judge.chigau { background: var(--glass); }
.judge.chigau:hover { border-color: var(--c-sub); }
.judge.suki { background: rgba(219, 36, 64, .14); border-color: rgba(219, 36, 64, .5); }
.judge.suki:hover { border-color: var(--c-accent); }

.tried-note {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-sub);
}
.tried-note b { font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--c-text); margin: 0 2px; }

/* 好きかもの蓄積 */
.keeps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.keeps-label { width: 100%; font-size: 11px; letter-spacing: .3em; color: var(--c-sub); }
.keep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 13px;
  min-height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: border-color .25s ease;
}
.keep-chip:hover { border-color: var(--c-accent); }
.keep-chip i, .karte-chip.keep i {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 45%), var(--sw);
}
.karte-chip.keep { cursor: pointer; }
.keeps-title { margin-top: 6px; }
#tryon-current { font-size: 14px; letter-spacing: .06em; min-height: 24px; }
#tryon-current small { color: var(--c-sub); margin-left: 6px; }

.swatches {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.swatches::-webkit-scrollbar { display: none; }
.swatch {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 42%), var(--sw);
  border: 2px solid transparent;
  transition: transform .25s ease, border-color .25s ease;
}
.swatch.on { border-color: #fff; transform: scale(1.12); }
.swatch.none {
  background: var(--glass);
  border: 1px dashed var(--c-line);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--c-sub);
}
.swatch.none.on { border: 2px solid #fff; color: var(--c-text); }

.intensity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: .2em;
}
.intensity input { flex: 1; accent-color: var(--c-accent); height: 44px; }

/* ===== モーダル ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0 auto;
  width: min(480px, 100%);
  background: rgba(7, 7, 17, .7);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  display: flex;
  align-items: flex-end;
}
.modal-panel {
  position: relative;
  width: 100%;
  min-height: 380px;
  padding: 30px 24px 44px;
  background: var(--c-bg1);
  border-top: 1px solid var(--c-line);
  border-radius: 14px 14px 0 0;
  animation: sheetup .45s ease;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  font-size: 22px;
  color: var(--c-sub);
}
.quiz-zone {
  font-family: var(--font-disp);
  font-size: 11px;
  letter-spacing: .4em;
  color: var(--za, var(--c-accent));
}
.quiz-progress {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 22px;
  margin-top: 8px;
}
.quiz-progress span { font-size: 13px; color: var(--c-sub); }
.quiz-intro { font-size: 12px; color: var(--c-sub); margin-top: 6px; }
.quiz-q { font-size: 18px; font-weight: 700; letter-spacing: .06em; margin: 16px 0 18px; line-height: 1.6; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opt {
  padding: 14px 18px;
  min-height: 52px;
  text-align: left;
  font-size: 14px;
  background: var(--glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  transition: border-color .25s ease;
}
.quiz-opt:hover { border-color: var(--c-accent); }

/* ===== トースト ===== */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 250;
  max-width: min(440px, calc(100% - 40px));
  padding: 12px 20px;
  font-size: 13px;
  line-height: 1.7;
  background: rgba(20, 20, 37, .92);
  border: 1px solid var(--c-line);
  border-radius: var(--r-s);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== フッター ===== */
.foot {
  padding: 28px 20px 44px;
  border-top: 1px solid var(--c-line);
  font-size: 11px;
  line-height: 2;
  color: var(--c-sub);
}