:root{
  --bg:#FBF3EF;
  --surface:#FFFFFF;
  --surface-alt:#F6E9E4;
  --ink:#2E2430;
  --ink-muted:#8A7B85;
  --accent:#B8425A;
  --accent-ink:#ffffff;
  --accent-soft:#F3C6CF;
  --accent-2:#6B4C6B;
  --gold:#D9A441;
  --border:#EAD9D3;
  --shadow: 0 18px 40px -22px rgba(46,36,48,0.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1E1720;
    --surface:#2A2129;
    --surface-alt:#342933;
    --ink:#F3E9EC;
    --ink-muted:#B9A6AF;
    --accent:#F088A0;
    --accent-ink:#241118;
    --accent-soft:#4A2A34;
    --accent-2:#D3B2D5;
    --gold:#E8BE72;
    --border:#4A3C46;
    --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#1E1720; --surface:#2A2129; --surface-alt:#342933; --ink:#F3E9EC;
  --ink-muted:#B9A6AF; --accent:#F088A0; --accent-ink:#241118; --accent-soft:#4A2A34;
  --accent-2:#D3B2D5; --gold:#E8BE72; --border:#4A3C46;
  --shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  min-height:100vh;
}
a{ color:inherit; }

.app-shell{
  max-width:480px;
  margin-inline:auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:20px 16px 32px;
}

h1,h2,h3{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:900;
  margin:0;
}

/* ---- ログイン画面 ---- */
.login-screen{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}
.logo-mark{ width:64px; height:64px; }
.app-name{ font-size:22px; }
.tagline{ font-size:13.5px; color:var(--ink-muted); line-height:1.8; max-width:26ch; }
.google-btn{
  margin-top:6px;
  width:100%;
  max-width:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:13px 16px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  box-shadow:var(--shadow);
}
.fine-print{ font-size:11px; color:var(--ink-muted); max-width:26ch; line-height:1.6; }

/* ---- ヘッダー共通 ---- */
.top-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.brand-link{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:900;
  font-size:15px;
  text-decoration:none;
  color:var(--ink);
}
.nav-action{
  font-size:12.5px;
  color:var(--ink-muted);
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  background:var(--surface);
}

/* ---- 診断画面 ---- */
.progress-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink-muted); margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.progress-track{
  height:6px; background:var(--surface-alt); border-radius:999px; overflow:hidden;
  margin-bottom:16px;
}
.progress-fill{ height:100%; background:var(--gold); border-radius:999px; transition:width .3s ease; }

.quiz-form{ flex:1; display:flex; flex-direction:column; }
.quiz-image-wrap{
  position:relative;
  flex:1;
  border-radius:20px;
  overflow:hidden;
  background:var(--surface-alt);
  box-shadow:var(--shadow);
  aspect-ratio: 848 / 1264;
}
.quiz-image-wrap img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
}
.tap-zone{
  position:absolute; left:2%; width:96%;
  border-radius:12px;
  border:2px solid transparent;
  background:transparent;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tap-zone:hover,
.tap-zone:focus-visible,
.tap-zone:active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline:none;
}

/* ---- 結果画面 ---- */
.result-title{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:900; font-size:13px; color:var(--ink-muted);
  letter-spacing:.08em; margin-bottom:6px; text-align:center;
}
.radar-wrap{ display:flex; justify-content:center; margin:4px 0 8px; }
.type-badge{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:700;
  font-size:19px;
  color:var(--accent);
  text-align:center;
  margin-bottom:14px;
  text-wrap:balance;
}
.result-comment{
  font-size:14px;
  line-height:1.9;
  color:var(--ink);
  background:var(--surface-alt);
  border-radius:16px;
  padding:18px 16px;
  white-space:pre-line;
}
.share-box{
  margin-top:16px;
  display:flex;
  gap:8px;
}
.share-input{
  flex:1;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-size:12.5px;
  background:var(--surface);
  color:var(--ink);
}
.share-btn,.primary-btn{
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  font-size:13.5px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.result-actions{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.result-cta{ margin-top:20px; text-align:center; font-size:12.5px; color:var(--ink-muted); }

/* ---- マイページ ---- */
.profile-row{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.avatar{
  width:48px; height:48px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:17px;
  flex-shrink:0; object-fit:cover;
}
.profile-name{ font-weight:700; font-size:15px; }
.profile-sub{ font-size:11.5px; color:var(--ink-muted); }
.section-h{
  font-size:12px; font-weight:700; color:var(--ink-muted);
  letter-spacing:.08em; margin-bottom:12px;
}
.history-card{
  display:flex; align-items:center; gap:12px;
  background:var(--surface-alt);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:10px;
  text-decoration:none;
  color:var(--ink);
}
.history-name{ font-size:13px; font-weight:700; }
.history-date{ font-size:11px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.history-type{
  margin-left:auto; font-size:10.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:4px 9px; border-radius:999px;
  white-space:nowrap;
}
.empty-note{ font-size:12.5px; color:var(--ink-muted); padding:12px 0; }

.error-box{
  background:var(--surface-alt);
  border-radius:12px;
  padding:14px 16px;
  color:var(--accent);
  font-size:13px;
  margin-bottom:16px;
}