/* lana — 見た目。
 *
 * 方針は一つだけ。**神秘性を装飾で出さない。**
 * 余白の広さ、大きなタイポグラフィ、黒と白の強い対比だけで出す。
 *
 * 白地に黒。色は先生のアクセント一色だけを、線とラベルに使う。
 *
 * 使わないもの（意図的に禁じている）
 *   紫のグラデーション／星屑／水晶玉／ラメ／光彩（glow）／ネオン
 *   ファンタジー系の書体／影／ぼかし／回転／パララックス／パーティクル
 *
 * 和文のサンセリフと明朝の使い分けが、このサイトの一番の特徴。
 * UI と見出しはゴシック、鑑定文だけ明朝にする。ここを崩さないこと。
 */

/* ---- デザイントークン ---------------------------------------------------- */

:root{
  /* 面。白と黒の二色だけ。中間色を足さない */
  --bg:        #FAF9F6;   /* ほぼ純白。わずかに温かみを残す */
  --fg:        #121210;   /* ほぼ純黒 */

  /* 中間のグレーは三段階まで。増やさない */
  --line:      #DEDBD3;   /* 境界線（ヘアライン） */
  --muted:     #6E6B63;   /* 補助テキスト */
  --disabled:  #B4B0A6;   /* 無効状態 */

  /* 先生ごとのアクセント。一人一色。
     **面には使わない。** 細い線・小さなラベル・選択状態の印だけ。
     一画面あたりの使用面積は 5% を超えないこと。 */
  --accent:    #A64232;

  /* 書体 */
  --sans:  "Inter","Zen Kaku Gothic New","Helvetica Neue",
           "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --serif: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;

  /* 大きさ。モバイル 375px を基準に置く */
  --t-display: clamp(2rem, 9vw, 3.5rem);      /* モバイルでも 32px を下回らない */
  --t-h2:      clamp(1.5rem, 6.5vw, 2.125rem);
  --t-body:    1rem;
  --t-small:   .8125rem;
  --t-eyebrow: .6875rem;

  /* 行間。詰め込まない */
  --lh-read: 1.9;
  --lh-ui:   1.55;

  /* 余白。一画面につき主題は一つ */
  --pad-x:     1.5rem;
  --gap-block: 2.5rem;
  --gap-sect:  6rem;

  /* 形。角丸はほぼ無し */
  --radius: 0;

  /* 動き。フェードと微小な上移動だけ、150〜250ms */
  --dur:  200ms;
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---- 土台 ---------------------------------------------------------------- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:var(--lh-ui);
  font-feature-settings:"palt";
}

main{max-width:34rem;margin:0 auto;padding:5rem var(--pad-x) 3rem}

/* 小さく、字送りを大きく、英大文字。セクションの位置を示す最小の単位 */
.eyebrow{
  margin:0 0 1.5rem;
  font-size:var(--t-eyebrow);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow.is-accent{color:var(--accent)}

/* ---- 場面の切り替え ------------------------------------------------------ */

.stage{display:none}
.stage.is-on{display:block;animation:enter var(--dur) var(--ease) both}

@keyframes enter{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .stage.is-on,.body.on,.mitate.on,.gate.on,.done.on,.extra{animation:none}
}

/* ---- 入口 ---------------------------------------------------------------- */

.sign{
  margin:0 0 var(--gap-sect);
  font-size:var(--t-eyebrow);
  letter-spacing:.55em;
  text-indent:.55em;
  color:var(--fg);
}

h1{
  margin:0 0 var(--gap-block);
  font-size:var(--t-display);
  font-weight:500;
  line-height:1.28;
  letter-spacing:-.01em;
}

.lede{
  margin:0 0 var(--gap-sect);
  font-size:var(--t-small);
  line-height:1.95;
  color:var(--muted);
}

/* ---- ボタン -------------------------------------------------------------- */
/* 塗りつぶさない。1px の枠線で立てる */

.go{
  display:block;width:100%;
  margin:var(--gap-block) 0 0;
  padding:1.15rem 1rem;
  background:transparent;
  color:var(--fg);
  border:1px solid var(--fg);
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:var(--t-small);
  letter-spacing:.24em;
  text-indent:.24em;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.go:hover{border-color:var(--accent);color:var(--accent)}
.go[disabled]{border-color:var(--disabled);color:var(--disabled);cursor:default}

/* ---- うかがう ------------------------------------------------------------ */

h2{
  margin:0 0 1rem;
  font-size:var(--t-h2);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.01em;
}

.note{
  margin:0 0 var(--gap-sect);
  font-size:var(--t-small);
  line-height:1.9;
  color:var(--muted);
}

.side{
  border:0;
  border-top:1px solid var(--line);
  margin:0;
  padding:var(--gap-sect) 0 0;
}
.side:first-of-type{border-top:0;padding-top:0}
.side legend{
  padding:0;
  margin-bottom:var(--gap-block);
  font-size:var(--t-eyebrow);
  letter-spacing:.2em;
  color:var(--muted);
}

.field{margin:0 0 var(--gap-block)}
label,.label{
  display:block;
  margin:0 0 .75rem;
  font-size:var(--t-eyebrow);
  letter-spacing:.14em;
  color:var(--muted);
}
.req{color:var(--accent);margin-left:.4em}

input[type=text],input[type=email]{
  width:100%;
  padding:.7rem 0;
  background:transparent;
  color:var(--fg);
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:1.0625rem;
}
input::placeholder{color:var(--disabled);opacity:1}
input:focus{outline:0;border-bottom-color:var(--fg)}

.hint{margin:.7rem 0 0;font-size:var(--t-eyebrow);color:var(--disabled);letter-spacing:.02em}

.row{display:flex;gap:1.5rem}
.row .field{flex:1}

/* 選択肢。選ばれたものだけをアクセントの枠で示す */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pills button{
  padding:.6rem 1rem;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:var(--t-small);
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.pills button:hover{border-color:var(--muted);color:var(--fg)}
.pills button.on{border-color:var(--accent);color:var(--fg)}

/* 生年月日 */
.ymd{display:flex;align-items:baseline;gap:.6rem}
.ymd input{
  width:4.5rem;padding:.7rem 0;text-align:center;
  background:transparent;color:var(--fg);
  border:0;border-bottom:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:1.0625rem;
}
.ymd input:first-child{width:5.75rem}
.ymd input:focus{outline:0;border-bottom-color:var(--fg)}
.ymd span{font-size:var(--t-eyebrow);color:var(--disabled)}

/* 追加の項目への入口。押されなくてよいので静かに置く */
.more{
  display:block;width:100%;
  margin:1.75rem 0 0;padding:1rem 0;
  background:transparent;border:0;
  color:var(--muted);
  font-family:var(--sans);
  font-size:var(--t-eyebrow);
  letter-spacing:.16em;
  cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.more:hover{color:var(--fg)}
.more::after{content:"　+"}

.extra{
  margin-top:var(--gap-sect);
  padding-top:var(--gap-sect);
  border-top:1px solid var(--line);
  animation:enter var(--dur) var(--ease) both;
}
.extra .note{margin-bottom:var(--gap-block)}
.extra .go{margin-top:var(--gap-sect)}

.say-inline{
  min-height:1.4rem;
  margin:var(--gap-block) 0 0;
  font-size:var(--t-small);
  color:var(--accent);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.say-inline.on{opacity:1}

/* ---- 共有カード ---------------------------------------------------------- */
/* 撮ってそのまま貼れる一枚。4:5 に収める。
   長い鑑定文はここに入れない。結論と図と今日の一行だけ。
   仕様書が求める 4:5 と 9:16 のどちらでも、この枠ごと収まる。 */

.card{
  aspect-ratio:4/5;
  display:flex;flex-direction:column;
  margin:0 0 var(--gap-sect);
  padding:1.75rem 1.35rem 1.25rem;
  border:1px solid var(--fg);
  animation:enter var(--dur) var(--ease) both;
}
.card[hidden]{display:none}

.card-sign{
  margin:0;flex:none;
  font-size:var(--t-eyebrow);letter-spacing:.5em;text-indent:.5em;
}
.card-verdict{
  margin:1.25rem 0 0;flex:none;
  font-size:clamp(1.375rem,5.6vw,1.75rem);
  font-weight:500;line-height:1.4;letter-spacing:-.01em;
}
/* 図は残りの高さいっぱいに置く。文が長い日は図が縮んで、はみ出さない */
.card-chart{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  margin:.75rem 0;
}
.card-chart svg{width:auto;height:100%;max-height:100%;max-width:100%}
.card-daylabel{
  margin:0;flex:none;
  padding-top:1rem;border-top:1px solid var(--line);
  font-size:var(--t-eyebrow);letter-spacing:.16em;color:var(--accent);
}
.card-today{
  margin:.5rem 0 0;flex:none;
  font-family:var(--serif);
  font-size:var(--t-small);line-height:1.75;color:var(--muted);
}
.card-mark{
  margin:.9rem 0 0;flex:none;
  font-size:var(--t-eyebrow);letter-spacing:.2em;color:var(--disabled);
}

/* ---- 結果 ---------------------------------------------------------------- */
/* スクリーンショットしてそのまま貼れるように、ここを一つの塊として切り出す。
   4:5 でも 9:16 でも崩れないよう、中身は縦一列だけで組む。
   この塊の中に広告も CTA も入れない。文章と余白だけ。 */

.shot{
  border:1px solid var(--line);
  padding:var(--gap-block) 1.25rem 1.5rem;
}

.them{
  margin:0 0 var(--gap-block);
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
  font-size:1.0625rem;
  letter-spacing:.06em;
}

/* 結論。結果画面で唯一、大きく置く文字。
   点数は出さないが、良し悪しはぼかさない。 */
.verdict{margin:0 0 var(--gap-block)}
.verdict[hidden]{display:none}
.verdict-line{
  margin:0 0 1.25rem;
  font-size:var(--t-h2);
  font-weight:500;line-height:1.35;letter-spacing:-.01em;
}
.verdict-dir{
  margin:0 0 .6rem;
  font-size:var(--t-eyebrow);letter-spacing:.18em;
  color:var(--accent);
}
.verdict-say{
  margin:0 0 var(--gap-block);
  padding-bottom:var(--gap-block);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:var(--t-small);line-height:1.85;color:var(--muted);
}

/* 視立て */
.mitate{margin:0 0 var(--gap-block);opacity:0;transition:opacity var(--dur) var(--ease)}
.mitate.on{opacity:1}
.mitate[hidden]{display:none}

.mitate-title{
  margin:0 0 1.6rem;
  font-size:var(--t-eyebrow);
  letter-spacing:.3em;
  color:var(--muted);
}

.mitate-grid{display:flex;gap:1rem}
.mitate .col{flex:1;min-width:0}
.mitate .who{
  margin:0 0 .9rem;padding-bottom:.65rem;
  border-bottom:1px solid var(--line);
  font-size:var(--t-eyebrow);letter-spacing:.1em;color:var(--muted);
}
.mitate .marks{display:flex;flex-direction:column;gap:.5rem}
.mitate .mark{margin:0;font-size:var(--t-small);color:var(--fg)}
/* 符号。丸で囲まず、角のままの細い枠に置く。
   記号と名前を並べる。記号だけだと伝わらないので、名前は必ず添える */
.mitate .glyph{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.35rem .55rem;
  border:1px solid var(--accent);border-radius:var(--radius);
  color:var(--fg);
}
.mitate .glyph .gm{width:15px;height:15px;flex:none;display:block}
.mitate .glyph .gm path{
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.mitate .glyph i{
  font-style:normal;font-family:var(--serif);font-size:.9375rem;line-height:1;
}
.mitate .from{margin:.4rem 0 0;font-size:var(--t-eyebrow);color:var(--disabled)}

/* 五行の図。線画のみ。塗り・影・ぼかし・発光は使わない */
.chart,.card-chart{}
.card-chart svg{display:block}
.card-chart .edge{fill:none;stroke:var(--line);stroke-width:1}
.card-chart .koku{stroke-dasharray:2 3}          /* 剋す線は破線で区別する */
.card-chart .active{stroke:var(--accent);stroke-width:1.25}
.card-chart .arrow{fill:var(--accent)}
.card-chart .node{fill:var(--bg);stroke:var(--line);stroke-width:1}
.card-chart .node.is-on{stroke:var(--accent)}
.card-chart .gname{
  fill:var(--muted);font-family:var(--serif);font-size:11px;text-anchor:middle;
}
/* 五行の記号。線だけ。太さをそろえて、五つが同じ手に見えるようにする */
.card-chart .mark-g path{
  fill:none;stroke:var(--muted);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.card-chart .mark-g.is-on path{stroke:var(--fg)}
.card-chart .gname.is-on{fill:var(--fg)}
.card-chart .who-t{
  fill:var(--accent);font-family:var(--sans);font-size:9px;
  letter-spacing:.12em;text-anchor:middle;
}

/* 関係。符号 → なぜそう言えるか → 何を意味するか の三段 */
.ties{margin:1.75rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.tie-row{margin:0 0 1.5rem}
.tie-row:last-child{margin-bottom:0}
.ties p{margin:0;line-height:1.8}
.tie-head{font-size:var(--t-small);color:var(--fg)}
.tie-head b{
  display:inline-block;margin-right:.6em;
  font-weight:400;font-size:var(--t-eyebrow);letter-spacing:.16em;
  color:var(--accent);
}
.tie-why{margin-top:.4rem !important;font-size:var(--t-eyebrow);color:var(--muted)}
.tie-means{margin-top:.5rem !important;font-size:var(--t-small);color:var(--muted)}

/* 鑑定文。ここだけ明朝。読み物としての質感を出す */
.body{min-height:3rem}
.body.on{animation:enter var(--dur) var(--ease) both}
.body .sec{
  margin:0 0 1rem;
  font-family:var(--sans);
  font-size:var(--t-eyebrow);
  letter-spacing:.2em;
  color:var(--accent);
}
.body .sec + p{margin-top:0}
.body p + .sec{margin-top:var(--gap-block)}
.body p{
  margin:0 0 1.75rem;
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:var(--lh-read);
  color:var(--fg);
}

/* 書き上がるまでの印。点滅も発光もさせない */
.pen{
  display:inline-block;width:.5em;height:1em;
  background:var(--disabled);
  vertical-align:-.12em;
}

/* 撮ったときに、どこの鑑定かが分かる程度に控えめに置く */
.shot-mark{
  margin:var(--gap-block) 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:var(--t-eyebrow);
  letter-spacing:.2em;
  color:var(--disabled);
}

/* 控えの場所。撮る一枚には入れず、その外に小さく置く */
.permalink{
  margin:1.25rem 0 0;
  font-size:var(--t-eyebrow);letter-spacing:.06em;color:var(--disabled);
  word-break:break-all;
}
.permalink[hidden]{display:none}
.again{margin-top:var(--gap-sect)}

/* ---- 続きへ -------------------------------------------------------------- */

.gate,.done{display:none}
.gate.on,.done.on{display:block;animation:enter var(--dur) var(--ease) both}
.gate,.done{margin-top:var(--gap-sect)}

.gate-say{
  margin:0 0 var(--gap-block);
  font-family:var(--serif);
  font-size:1rem;line-height:var(--lh-read);
  color:var(--muted);
}
.done p{margin:0 0 1.2rem;font-size:var(--t-small);line-height:1.9;color:var(--muted)}
.done p:first-child{color:var(--fg)}

/* ---- 足元 ---------------------------------------------------------------- */

footer{
  max-width:34rem;margin:0 auto;
  padding:var(--gap-sect) var(--pad-x) 4rem;
  border-top:1px solid var(--line);
}
footer a{
  font-size:var(--t-eyebrow);letter-spacing:.1em;
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line);
}
footer a:hover{color:var(--fg)}
.fine{margin:2rem 0 0;font-size:var(--t-eyebrow);line-height:1.9;color:var(--disabled)}

/* ---- 狭い画面（375px を最優先で見る） ------------------------------------ */

@media (max-width:420px){
  main{padding:3.5rem var(--pad-x) 2.5rem}
  :root{--gap-sect:4.5rem;--gap-block:2rem}
  .row{display:block}
  .row .field{margin-bottom:var(--gap-block)}
  .shot{padding:2rem 1rem 1.25rem}
  .mitate-grid{gap:.75rem}
  .mitate .glyph{min-width:2rem;font-size:.875rem}
}