:root{
  --bg:#FAF4F2;
  --bg2:#F3E9E8;
  --card:#FFFFFF;
  --ink:#4A3B40;
  --mut:#A8959C;
  --ribbon:#E1A0B2;
  --ribbon-deep:#C5708A;
  --gold:#C2A05A;
  --line:rgba(120,80,90,.12);
  --line2:rgba(120,80,90,.20);
  --noir:#2A2026;
  --depth:0;
  --shadow:0 18px 50px -24px rgba(120,60,80,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Zen Kaku Gothic New",sans-serif;
  color:var(--ink);
  background:#F7E3E8 url('../bg.webp') center top / cover fixed;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
/* soft edge vignette */
.creep{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 calc(40px + 120px*var(--depth)) calc(10px + 40px*var(--depth)) rgba(42,32,38,calc(.06 + .20*var(--depth)));
  transition:box-shadow .9s ease;
}

.wrap{max-width:560px;margin:0 auto;padding:26px 20px 60px;transition:max-width .35s ease}
body.is-focus .wrap{max-width:1120px}

/* ---- shared ---- */
.eyebrow{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:15px;letter-spacing:.16em;color:var(--ribbon-deep);
  text-transform:uppercase;
}
.rule{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ribbon-deep);margin:10px 0 6px}
.rule::before,.rule::after{content:"";height:1px;width:40px;background:linear-gradient(90deg,transparent,var(--ribbon))}
.rule span{font-family:"Cormorant Garamond",serif;letter-spacing:.3em;font-size:12px}

/* ---- intro ---- */
#intro{text-align:center;animation:fade .7s ease both}
.crest{
  width:54px;height:54px;margin:0 auto 14px;border-radius:50%;
  border:1px solid var(--line2);display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%, #fff, #FBEFEF);
  box-shadow:var(--shadow);
}
.crest svg{width:26px;height:26px}
h1{
  font-family:"Shippori Mincho B1",serif;font-weight:800;
  font-size:clamp(27px,7.6vw,38px);line-height:1.36;letter-spacing:.02em;
  margin:6px 0 4px;
}
h1 .pct{color:var(--ribbon-deep)}
.lede{color:#6c5a60;font-size:14.5px;max-width:30em;margin:14px auto 0}
.menu-card{
  margin:26px 0 18px;padding:26px 22px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);backdrop-filter:blur(10px);
}
.menu-card .label{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:13px;letter-spacing:.18em;color:var(--gold)}
.spec{display:flex;justify-content:center;gap:22px;margin:14px 0 4px;color:var(--ink)}
.spec b{display:block;font-family:"Cormorant Garamond",serif;font-size:26px;font-weight:600;line-height:1}
.spec small{font-size:11px;color:var(--mut);letter-spacing:.08em}
.start{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:17px;letter-spacing:.06em;
  color:#fff;background:linear-gradient(135deg,var(--ribbon),var(--ribbon-deep));
  border:none;border-radius:999px;padding:15px 38px;cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(197,112,138,.85);
  transition:transform .2s ease, box-shadow .2s ease;
}
.start:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(197,112,138,.9)}
.start:active{transform:translateY(0)}
.note{font-size:12px;color:var(--mut);margin-top:14px;letter-spacing:.02em}
.note .whisper{display:block;margin-top:6px;font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--ribbon-deep);font-size:13.5px;letter-spacing:.04em}

/* ---- quiz ---- */
#quiz{
  display:none;position:relative;padding:54px clamp(20px,6vw,90px) 58px;
  border:1px solid rgba(218,157,174,.4);border-radius:30px;
  background:rgba(255,252,252,.97);box-shadow:0 24px 60px -34px rgba(120,60,80,.45);
  overflow:hidden
}
#quiz::before,#quiz::after,#result::before,#result::after{
  position:absolute;color:#ed9db4;pointer-events:none;opacity:.62;
  font-family:"Cormorant Garamond",serif
}
#quiz::before,#result::before{content:"♡  ✧";font-size:52px;left:22px;top:16px;transform:rotate(-12deg)}
#quiz::after,#result::after{content:"୨୧  ✦";font-size:45px;right:24px;top:20px;transform:rotate(10deg)}
.progress{display:flex;align-items:center;gap:26px;margin:0 auto 34px;max-width:670px}
.bar{flex:1;height:14px;border-radius:99px;background:#f8e5ea;padding:3px}
.bar i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--ribbon),var(--ribbon-deep));transition:width .4s ease}
.qno{font-family:"Cormorant Garamond",serif;font-size:23px;letter-spacing:.12em;color:var(--mut);white-space:nowrap}
.qno b{color:#df7697;font-size:40px;font-weight:600}
.qcard{animation:slide .42s ease both}
.qtext{
  max-width:780px;margin:0 auto 8px;text-align:center;
  font-family:"Shippori Mincho B1",serif;font-weight:700;
  font-size:clamp(22px,3vw,34px);line-height:1.65;letter-spacing:.06em
}
#opts{max-width:820px;margin:30px auto 0}
.opt{
  display:flex;align-items:center;width:100%;text-align:left;margin-bottom:16px;
  font-family:"Zen Kaku Gothic New",sans-serif;font-size:17px;color:var(--ink);
  background:rgba(255,255,255,.94);border:1px solid rgba(226,166,183,.45);border-radius:17px;
  padding:15px 24px;cursor:pointer;line-height:1.65;
  box-shadow:0 10px 20px -16px rgba(156,79,104,.55);
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.opt:hover{border-color:var(--ribbon);transform:translateX(2px)}
.opt:active,.opt.sel{background:linear-gradient(135deg,#fff,#FCEEF1);border-color:var(--ribbon-deep)}
.opt .mk{
  flex:0 0 48px;height:48px;display:grid;place-items:center;margin-right:20px;border-radius:50%;
  font-family:"Cormorant Garamond",serif;font-style:italic;color:#fff;font-size:25px;
  background:linear-gradient(135deg,#efa1b7,#d96c91);border:3px double #fff;
  box-shadow:0 0 0 2px #e98daa
}
.opt .opt-icon{
  margin-left:auto;padding-left:20px;color:#e985a4;font-size:27px;
  border-left:2px dotted #efbfd0;line-height:1
}
.honne{
  margin:0 auto;text-align:center;font-family:"Zen Kaku Gothic New",sans-serif;
  color:#df7697;font-size:14px;letter-spacing:.07em;min-height:1em;opacity:.92
}

/* ---- result ---- */
#result{
  display:none;position:relative;animation:fade .7s ease both;
  padding:48px clamp(18px,5vw,70px) 58px;border:1px solid rgba(218,157,174,.4);
  border-radius:30px;background:rgba(255,252,252,.97);
  box-shadow:0 24px 60px -34px rgba(120,60,80,.45);overflow:hidden
}
.r-head{text-align:center}
.r-rank{font-family:"Cormorant Garamond",serif;letter-spacing:.24em;color:#db7796;font-size:18px}
.r-rank::before,.r-rank::after{content:"✦";padding:0 12px;font-size:12px}
.r-name{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(29px,5vw,48px);line-height:1.4;margin:8px 0;color:#403136}
.r-catch{font-family:"Shippori Mincho B1",serif;font-weight:600;color:#d55f85;font-size:clamp(16px,2vw,22px)}
.result-card{
  max-width:880px;margin:30px auto 0;padding:30px;border-radius:28px;
  background:#fff;border:1px solid rgba(218,133,159,.55);
  box-shadow:0 18px 45px -32px rgba(120,60,80,.55)
}
.gauge{
  display:grid;grid-template-columns:minmax(0,1fr) 235px;column-gap:34px;
  margin:0;padding:4px;background:none;border:0;box-shadow:none
}
.gauge-main{min-width:0}
.gauge .glabel{display:flex;justify-content:space-between;align-items:baseline;gap:15px}
.gauge .glabel span{font-size:12px;letter-spacing:.14em;color:var(--mut);font-family:"Cormorant Garamond",serif;font-style:italic}
.gauge .glabel span:first-child{padding:5px 15px;border-radius:99px;background:#fdf0f3}
.bignum{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(72px,12vw,112px);line-height:1;color:#da6f92;margin:18px 0 8px}
.bignum small{font-size:40px;margin-left:4px}
.meter{height:16px;border-radius:99px;background:#F0E2E4;overflow:visible;margin:15px 0 14px;position:relative}
.meter i{display:block;height:100%;width:0;border-radius:99px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.meter::after{content:"♥";position:absolute;left:calc(var(--fit,82%) - 12px);top:-12px;color:#e17a9a;font-size:27px;text-shadow:0 2px 0 #fff}
.status{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:var(--mut);font-family:"Cormorant Garamond",serif}
.status .tag{font-style:italic;font-weight:600}
.result-avatar{text-align:center;align-self:center}
.result-avatar img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 18px rgba(194,107,136,.18))}
.result-comment{position:relative;margin-top:28px;padding:25px 28px;border:1px solid #ed9db5;border-radius:20px;background:linear-gradient(135deg,#fff,#fff8fa)}
.result-comment-label{position:absolute;left:28px;top:-17px;padding:6px 17px;border-radius:99px;background:linear-gradient(135deg,#ed9db5,#db7596);color:#fff;font-size:13px;letter-spacing:.1em}
.r-desc{font-size:15px;color:#49383d;margin:5px 0 0;line-height:2}

/* share */
.share{margin:30px 0 6px;text-align:center}
.share .stitle{font-family:"Shippori Mincho B1",serif;letter-spacing:.16em;color:#dc7898;font-size:16px;margin-bottom:14px}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);
  background:#fff;color:var(--ink);border-radius:999px;padding:11px 18px;font-size:13.5px;
  cursor:pointer;text-decoration:none;font-family:"Zen Kaku Gothic New",sans-serif;
  transition:transform .16s ease,border-color .16s ease}
.sbtn:hover{transform:translateY(-2px);border-color:var(--ribbon)}
.sbtn svg{width:16px;height:16px}
.sbtn.x{background:#000;color:#fff;border-color:#000}
.sbtn.th{background:#000;color:#fff;border-color:#000}
.copied{font-size:12px;color:var(--ribbon-deep);height:1em;margin-top:10px;opacity:0;transition:opacity .3s}
.copied.on{opacity:1}
.retry{display:inline-block;margin-top:22px;background:none;border:none;cursor:pointer;
  font-family:"Shippori Mincho B1",serif;font-weight:600;color:var(--ribbon-deep);
  font-size:15px;border-bottom:1px solid var(--ribbon);padding:2px 2px 4px}

@media(max-width:700px){
  body.is-focus .wrap{padding:12px 10px 45px}
  #quiz,#result{padding:32px 14px 38px;border-radius:22px}
  #quiz::before,#result::before{font-size:30px;left:8px;top:4px}
  #quiz::after,#result::after{font-size:27px;right:8px;top:7px}
  .progress{gap:13px;margin-bottom:25px;padding:0 8px}
  .qno{font-size:16px}.qno b{font-size:29px}
  .bar{height:11px}
  .qtext{font-size:20px;letter-spacing:.03em}
  .honne{font-size:12px;line-height:1.65;padding:0 12px}
  #opts{margin-top:22px}
  .opt{font-size:13.5px;padding:12px 12px;margin-bottom:11px;border-radius:14px}
  .opt .mk{flex-basis:36px;height:36px;margin-right:12px;font-size:20px}
  .opt .opt-icon{font-size:20px;padding-left:10px}
  .r-rank{font-size:14px}.r-rank::before,.r-rank::after{padding:0 6px}
  .r-name{font-size:24px}.r-catch{font-size:15px}
  .result-card{padding:17px 14px;border-radius:21px}
  .gauge{grid-template-columns:minmax(0,1fr) 115px;column-gap:10px}
  .gauge .glabel{display:block}.gauge .glabel span{display:block;margin-bottom:7px}
  .gauge .glabel span:first-child{padding:3px 8px;font-size:10px}
  .bignum{font-size:69px;margin-top:13px}.bignum small{font-size:25px}
  .meter{height:11px}.meter::after{font-size:21px;top:-10px}
  .status{font-size:9px}
  .result-comment{padding:22px 17px 16px;margin-top:23px}.result-comment-label{left:17px}
  .r-desc{font-size:13.5px;line-height:1.9}
}

/* ---- SEO copy ---- */
.seo{margin-top:46px;padding-top:28px;border-top:1px solid var(--line)}
.seo h2{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:18px;margin:24px 0 8px;color:var(--ink)}
.seo p{font-size:13.5px;color:#6c5a60;margin-bottom:8px}
.seo .faq dt{font-weight:700;font-size:14px;margin-top:14px}
.seo .faq dd{font-size:13.5px;color:#6c5a60}
.result-catalog{margin-top:42px;text-align:left}
.result-catalog>h2{
  font-family:"Shippori Mincho B1",serif;font-size:21px;line-height:1.55;
  text-align:center;margin-bottom:8px
}
.result-catalog>.catalog-lede{font-size:13.5px;color:#6c5a60;text-align:center;margin-bottom:22px}
.catalog-group{margin-top:18px}
.catalog-group h3{
  display:flex;align-items:center;gap:9px;
  font-family:"Shippori Mincho B1",serif;font-size:16px;color:var(--ink);margin-bottom:9px
}
.catalog-group h3::after{content:"";height:1px;flex:1;background:var(--line2)}
.catalog-card{
  display:block;margin:0 0 10px;padding:16px 17px;border:1px solid var(--line2);
  border-radius:15px;background:rgba(255,255,255,.82);box-shadow:0 10px 28px -24px rgba(120,60,80,.7);
  color:inherit;text-decoration:none
}
.catalog-card:hover{border-color:var(--ribbon)}
.catalog-card small{
  display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--gold);letter-spacing:.12em;font-size:12px
}
.catalog-card b{display:block;font-family:"Shippori Mincho B1",serif;font-size:15.5px;margin:2px 0 4px}
.catalog-card span{display:block;font-size:12.5px;color:#6c5a60;line-height:1.75}

footer{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);text-align:center}
footer nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
footer a{color:var(--mut);text-decoration:none;font-size:13px}
footer a:hover{color:var(--ribbon-deep)}
footer .cp{font-size:11px;color:var(--mut);font-family:"Cormorant Garamond",serif;letter-spacing:.08em}

@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .meter i{transition:none !important}
}

/* ---- hero with illustration ---- */
.hero{position:relative;overflow:hidden;text-align:left;min-height:230px}
.hero-txt{position:relative;z-index:2;max-width:57%;padding-bottom:6px}
.hero-art{position:absolute;top:-8px;right:-11%;width:66%;max-width:none;margin:0;z-index:1;filter:drop-shadow(0 16px 26px rgba(197,112,138,.20))}
.gimg{width:100%;height:auto;display:block}
.logo{margin:0 0 8px;padding:0}
.logo img{display:block;width:100%;max-width:222px;height:auto;margin:0;filter:drop-shadow(0 8px 16px rgba(197,112,138,.15))}
.hero .lede{margin:0;text-align:left}
.lede b{font-family:"Shippori Mincho B1",serif;font-weight:700;color:var(--ink);font-size:1.14em;display:inline-block;margin-bottom:3px;letter-spacing:.02em}
@media(min-width:600px){
  .hero{min-height:300px}
  .hero-txt{max-width:52%;padding-top:10px;padding-bottom:18px}
  .hero-art{top:-12px;right:-1%;width:50%}
  .logo img{max-width:392px}
}
/* ---- cafe-menu card ---- */
.menu-h{font-family:"Cormorant Garamond",serif;font-style:italic;letter-spacing:.22em;color:var(--gold);font-size:14px;text-align:center;margin-bottom:2px}
.menu-list{list-style:none;margin:14px 0 2px;padding:0}
.menu-list li{display:flex;align-items:baseline;gap:8px;padding:7px 2px}
.menu-list li span{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:17px;color:var(--ink);letter-spacing:.03em}
.menu-list li i{flex:1;border-bottom:1.5px dotted var(--line2);transform:translateY(-4px)}
.menu-list li b{font-family:"Shippori Mincho B1",serif;font-weight:600;color:var(--ribbon-deep);white-space:nowrap;font-size:14.5px}
.menu-foot{font-size:12px;color:var(--mut);margin-top:14px;letter-spacing:.02em}
.teaser{margin:22px auto 0;font-size:13.5px;color:#6c5a60;max-width:32em;line-height:1.9}
.teaser span{color:var(--ribbon-deep);font-family:"Shippori Mincho B1",serif;font-weight:600}

/* ---- style explainers ---- */
.menu-note{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line2);font-size:11.5px;color:var(--mut);line-height:1.85}
.menu-note b{color:var(--ribbon-deep);font-weight:700}
.gauge-note{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut);text-align:center;line-height:1.7}
.gauge-note b{color:var(--ribbon-deep)}

.tcs-static{position:relative;z-index:2;max-width:680px;margin:26px auto;padding:0 16px}
  .tcs-card{background:rgba(255,255,255,.94);border:1px solid #d4488f44;border-radius:18px;padding:20px 18px;margin:18px 0;box-shadow:0 8px 22px rgba(60,40,110,.10)}
  .tcs-card h2{margin:0 0 10px;color:#2b2735;font-size:1.25rem}
  .tcs-card h3{color:#d4488f;border-bottom:1px solid #d4488f44;padding-bottom:6px;margin:24px 0 8px;font-size:1.05rem}
  .tcs-card p,.tcs-card li,.tcs-card dd{line-height:1.92;font-size:.94rem;color:#2b2735;margin:6px 0}
  .tcs-axes{display:grid;gap:12px;margin:14px 0}
  .tcs-axes dt{font-weight:800;color:#d4488f;margin-bottom:2px}
  .tcs-axes dd{margin:0;color:#6f687e}
  .tcs-item{border:1px solid #d4488f44;border-radius:14px;padding:14px 16px;margin:12px 0;background:rgba(255,255,255,.75)}
  .tcs-item h4{margin:0 0 4px;font-size:1.03rem;color:#2b2735;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
  .tcs-sub{font-size:.72rem;font-weight:700;color:#6f687e;letter-spacing:.05em}
  .tcs-catch{font-weight:700;color:#d4488f;margin:2px 0 8px}
  .tcs-label{font-weight:700;margin:8px 0 2px;color:#2b2735}
  .tcs-item ul{margin:0;padding-left:1.2em;color:#6f687e}
  .tcs-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:0;list-style:none}
  .tcs-tags li,.tcs-tag{font-size:.74rem;font-weight:700;color:#d4488f;border:1px solid currentColor;border-radius:999px;padding:2px 10px}
  .tcs-note{color:#6f687e;font-size:.86rem;border-top:1px dashed #d4488f44;padding-top:8px;margin-top:10px}
  .tcs-column p{line-height:2}

body[data-diagnosis-page=quiz] #quiz,body[data-diagnosis-page=result] #result{display:block}