/* ホテルタイプ診断（旧 claude.ai アーティファクト D338QEGDo6KkARBsMKdgoS から移植。見た目は旧版と同じ） */

/* 旧アーティファクトの外枠（claude.ai が付けていた基本スタイル） */
:root{color-scheme:light}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found]){display:none!important}

/* ---- ここから旧アーティファクト本体のスタイル（変更なし） ---- */
:root{
  --paper:#f3ede1;
  --surface:#fffdf9;
  --surface-2:#ece3d1;
  --ink:#1e2430;
  --ink-dim:#5f6473;
  --line:#ddd2bc;
  --brass:#a8823d;
  --brass-deep:#7c5e27;
  --brass-soft:#f0e4c8;
  --shadow: 0 1px 2px rgba(30,36,48,.05), 0 14px 32px -18px rgba(30,36,48,.28);
  --focus: 0 0 0 3px rgba(168,130,61,.35);

  /* per-type reveal palettes */
  --classic-bg:#3a1414; --classic-ink:#f6e9dd; --classic-accent:#d7a45a;
  --modern-bg:#232b34; --modern-ink:#eef2f5; --modern-accent:#8fb0c4;
  --design-bg:#122e2c; --design-ink:#fbeee6; --design-accent:#e07a4e;
  --resort-bg:#0d3c3f; --resort-ink:#eafaf6; --resort-accent:#4fd6c4;
  --private-bg:#131318; --private-ink:#ece6d8; --private-accent:#b08a3e;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#151311;
    --surface:#1e1b17;
    --surface-2:#26221c;
    --ink:#efe7d8;
    --ink-dim:#a89d88;
    --line:#3a3428;
    --brass:#d4ac68;
    --brass-deep:#e8c68b;
    --brass-soft:#332c1d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 36px -18px rgba(0,0,0,.65);
    --focus: 0 0 0 3px rgba(212,172,104,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#151311; --surface:#1e1b17; --surface-2:#26221c;
  --ink:#efe7d8; --ink-dim:#a89d88; --line:#3a3428;
  --brass:#d4ac68; --brass-deep:#e8c68b; --brass-soft:#332c1d;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 36px -18px rgba(0,0,0,.65);
  --focus: 0 0 0 3px rgba(212,172,104,.4);
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  line-height:1.6;
  -webkit-tap-highlight-color:transparent;
}
.serif{font-family:'Cormorant Garamond',ui-serif,Georgia,'Hiragino Mincho ProN',serif;}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;}
::selection{background:var(--brass); color:var(--surface);}
button{font-family:inherit; color:inherit;}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:10px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }

.stage{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px;
}
.card{
  width:100%; max-width:440px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:background .3s ease;
}

/* ---------- top plaque / progress ---------- */
.plaque{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.plaque .brand{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); font-weight:700; text-decoration:none;}
.plaque .brand:hover{color:var(--brass-deep);}
.keys{display:flex; gap:6px;}
.keys i{
  width:9px; height:9px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); display:block;
}
.keys i.done{background:var(--brass); border-color:var(--brass);}

/* ---------- cover ---------- */
.cover{padding:8px 26px 30px;}
.cover .kicker{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-deep); margin:22px 0 10px;
}
.cover h1{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-style:italic;
  font-size:clamp(26px, 8vw, 36px); line-height:1.25; margin:0 0 16px;
}
.cover h1 wbr{line-height:0;}
.cover p{font-size:14.5px; color:var(--ink-dim); margin:0 0 8px;}
.cover .lede{font-size:14.5px; color:var(--ink); margin:18px 0 20px; line-height:1.75;}
.cover .byline{
  display:flex; align-items:center; gap:6px; margin-bottom:22px;
  font-size:12.5px; color:var(--ink-dim);
}
.cover .byline .dot{width:6px; height:6px; border-radius:50%; background:var(--brass); flex:none;}
.cover .byline a{color:var(--brass-deep); font-weight:700; text-decoration:none;}
.cover .byline a:hover{text-decoration:underline;}
.type-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:26px;}
.type-chips span{
  font-size:11.5px; padding:5px 11px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-dim);
}
.start-btn{
  width:100%; padding:16px; border:none; border-radius:13px; cursor:pointer;
  background:var(--brass); color:#fff9ee; font-weight:700; font-size:15px;
  letter-spacing:.02em;
  box-shadow:0 10px 24px -12px rgba(124,94,39,.55);
  transition:transform .12s ease, opacity .12s ease;
}
@media (hover:hover) and (pointer:fine){
  .start-btn:hover{opacity:.94;}
}
.start-btn:active{transform:scale(.98);}
.cover .meta{margin-top:14px; text-align:center; font-size:11.5px; color:var(--ink-dim);}

/* ---------- question ---------- */
.qwrap{padding:26px 24px 28px;}
.qwrap .qno{
  font-family:'IBM Plex Mono'; font-size:11px; color:var(--brass-deep); font-weight:500;
  letter-spacing:.08em; margin-bottom:10px;
}
.qwrap h2{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:23px; line-height:1.35;
  margin:0 0 20px; text-wrap:balance;
}
.opts{display:flex; flex-direction:column; gap:10px;}
.opt{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 15px; border-radius:13px; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; text-align:left;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
@media (hover:hover) and (pointer:fine){
  .opt:hover{border-color:var(--brass); background:var(--brass-soft);}
}
.opt:active{border-color:var(--brass); background:var(--brass-soft); transform:scale(.99);}
.opt .letter{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:12px; font-weight:500;
  background:var(--surface-2); color:var(--ink-dim); border:1px solid var(--line);
}
.opt .txt{font-size:14px; padding-top:3px;}
.back-link{
  display:inline-block; margin-top:20px; font-size:12.5px; color:var(--ink-dim);
  background:none; border:none; cursor:pointer; padding:4px 0; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line);
}

/* ---------- reveal ---------- */
.reveal{
  padding:36px 26px 30px;
  background:var(--reveal-bg); color:var(--reveal-ink);
  transition:background .35s ease;
}
.reveal .eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--reveal-accent); margin-bottom:14px;
}
.reveal .type-name{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600;
  font-size:clamp(28px, 8.5vw, 40px); line-height:1.15; margin:0 0 16px;
}
.reveal .type-name wbr{line-height:0;}
.reveal .tagline{font-size:15px; line-height:1.8; opacity:.92; margin:0 0 26px;}
.reveal .brands-label{
  font-size:11px; font-weight:700; letter-spacing:.1em; opacity:.7; margin-bottom:10px;
}
.reveal .brands{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;
}
.reveal .brands span{
  font-size:12px; padding:6px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--reveal-accent) 45%, transparent);
  color:var(--reveal-accent); font-weight:600;
}
.reveal .unlock{
  display:block; width:100%; padding:16px; border-radius:13px; text-align:center;
  text-decoration:none; font-weight:700; font-size:14.5px;
  background:var(--reveal-accent); color:var(--reveal-bg);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.5);
}
.reveal .unlock small{display:block; font-weight:500; font-size:11.5px; opacity:.85; margin-top:3px;}
.reveal .retry{
  display:block; text-align:center; margin-top:16px; font-size:12.5px;
  color:var(--reveal-ink); opacity:.7; background:none; border:none; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; width:100%;
}
.reveal .foot{
  margin-top:26px; padding-top:16px; border-top:1px solid color-mix(in srgb, var(--reveal-ink) 20%, transparent);
  font-size:11px; opacity:.65; line-height:1.7;
}

[hidden]{display:none !important;}
/* ---- 旧アーティファクト本体のスタイルここまで ---- */

/* ---------- 追加：結果のSNS共有（2026-10-07 Cloudflare Pages 移行時） ---------- */
.reveal .share{margin-top:22px;}
.reveal .share-label{
  font-size:11px; font-weight:700; letter-spacing:.1em; opacity:.7; margin-bottom:10px; text-align:center;
}
.reveal .share-row{display:flex; gap:10px;}
.reveal .share-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 10px; border-radius:12px; text-decoration:none;
  font-size:13px; font-weight:700; color:var(--reveal-ink);
  border:1px solid color-mix(in srgb, var(--reveal-ink) 32%, transparent);
  background:color-mix(in srgb, var(--reveal-ink) 6%, transparent);
  min-height:44px;
}
@media (hover:hover) and (pointer:fine){
  .reveal .share-btn:hover{background:color-mix(in srgb, var(--reveal-ink) 14%, transparent);}
}
.reveal .share-btn svg{width:16px; height:16px; fill:currentColor; flex:none;}

.noscript{padding:20px 26px; font-size:13px; color:var(--ink-dim);}

/* 404.html 用 */
.home-link{display:block; text-align:center; text-decoration:none;}

/* ---------- 追加：タイプ別画像（結果画面の最上部、カードの端まで） ---------- */
.reveal .type-visual{margin:-36px -26px 26px; background:color-mix(in srgb, var(--reveal-ink) 8%, var(--reveal-bg));}
.reveal .type-visual img{display:block; width:100%; height:auto; aspect-ratio:1200/675;}

/* ---------- 追加：共有された結果ページ（result/<key>/）の「あなたも診断する」 ---------- */
.reveal .retry-cta{
  display:block; margin-top:18px; padding:14px; border-radius:13px; text-align:center; text-decoration:none;
  font-weight:700; font-size:14px; color:var(--reveal-ink);
  border:1px solid color-mix(in srgb, var(--reveal-accent) 60%, transparent);
}