*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;background:#08172b;color:#0f172a}.hero{padding:36px 20px 86px;text-align:center;color:white;background:linear-gradient(120deg,#13203a,#1b2a44 55%,#6d874f)}.eyebrow{color:#e1ff58;letter-spacing:.16em;font-weight:800;font-size:13px}.hero h1{font-size:clamp(34px,6vw,50px);line-height:1.18;margin:12px 0}.hero p{font-weight:700;margin:0}.app{width:min(1120px,calc(100% - 24px));margin:-52px auto 50px;background:white;border-radius:24px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.28)}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.tabs button,.spread-card button{border:0;border-radius:18px;padding:14px;font-weight:800;cursor:pointer;background:#e9eef5;color:#26344a}.tabs button.active,.spread-card button{background:#0e1624;color:white}.search{width:100%;padding:15px;border-radius:14px;border:1px solid #d5deea;font-size:16px;margin-bottom:16px}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.card-tile{background:white;border:1px solid #dbe4ef;border-radius:16px;padding:12px;min-height:250px;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(15,23,42,.06)}.card-tile img{width:100%;height:155px;object-fit:contain;background:#f8fafc;border-radius:12px;margin-bottom:8px}.card-meta{color:#71839e;font-size:12px;font-weight:800}.card-tile h3{font-size:21px;margin:6px 0}.card-tile p{font-size:14px;line-height:1.55;margin:0;color:#334155}.hidden{display:none}.modal.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:999;overflow:auto;padding:20px}.detail-inner{background:white;color:#111;max-width:980px;margin:24px auto;border-radius:24px;padding:22px;position:relative}.close-btn{position:absolute;right:14px;top:12px;border:0;background:#0e1624;color:white;border-radius:50%;width:42px;height:42px;font-size:24px}.detail-layout{display:grid;grid-template-columns:300px 1fr;gap:24px}.detail-image{width:100%;max-height:520px;object-fit:contain;background:#f8fafc;border-radius:16px}.detail-text h2{font-size:34px;margin:8px 0}.theme{font-weight:900;color:#1d3557}.detail-text section,.reading-box section{border-top:1px solid #e5eaf2;padding-top:12px;margin-top:14px}.detail-text h3,.reading-box h3{margin:0 0 6px}.detail-text p,.reading-box p{line-height:1.85}.story-box{background:#f8fafc;border-left:5px solid #6d874f;border-radius:14px;padding:12px;margin-top:10px}.spread-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.spread-card{border:1px solid #dbe4ef;border-radius:16px;padding:16px}.positions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.positions span{background:#eef4fb;border-radius:999px;padding:8px 10px;font-size:13px}.draw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:16px}.draw-card{border:1px solid #dbe4ef;border-radius:16px;padding:12px;text-align:center;background:white;cursor:pointer}.draw-card img{width:100%;height:180px;object-fit:contain}.draw-card img.reversed{transform:rotate(180deg)}.draw-pos{font-weight:900;color:#37506f;margin-bottom:8px}.reading-box{background:#fffdf3;border:1px solid #eadf9a;border-radius:18px;padding:18px;margin-top:20px}.reading-title{font-size:24px;margin:0 0 12px;color:#1d3557}@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr}.spread-grid{grid-template-columns:1fr}}@media(max-width:520px){.app{width:calc(100% - 16px);padding:12px;border-radius:18px}.card-grid{grid-template-columns:1fr 1fr;gap:10px}.card-tile{min-height:210px;padding:10px}.card-tile img{height:130px}.card-tile h3{font-size:18px}.card-tile p{font-size:12px}.hero{padding-bottom:76px}.draw-card img{height:145px}}

/* ===== スプレッド本来配置 Ver2：カード小さめ ===== */
.draw-grid{
  grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
  gap:10px;
}

.draw-card{
  padding:8px;
}

.draw-card img{
  height:105px;
}

.draw-card h4{
  margin:6px 0 2px;
  font-size:14px;
}

.draw-card p{
  margin:0;
  font-size:12px;
}

.draw-pos{
  font-size:12px;
  margin-bottom:5px;
}

/* 共通：本来配置 */
.draw-grid.layout-horseshoe,
.draw-grid.layout-hexagram,
.draw-grid.layout-celtic{
  display:grid;
  gap:10px;
  align-items:center;
  justify-items:center;
  margin:18px auto;
}

.layout-horseshoe .draw-card,
.layout-hexagram .draw-card,
.layout-celtic .draw-card{
  width:100%;
  max-width:105px;
}

/* ホースシュー：馬蹄形 */
.draw-grid.layout-horseshoe{
  max-width:820px;
  grid-template-columns:repeat(7, 1fr);
  grid-template-rows:repeat(4, auto);
}
.layout-horseshoe .pos-1{grid-column:1;grid-row:1}
.layout-horseshoe .pos-2{grid-column:2;grid-row:2}
.layout-horseshoe .pos-3{grid-column:3;grid-row:3}
.layout-horseshoe .pos-4{grid-column:4;grid-row:4}
.layout-horseshoe .pos-5{grid-column:5;grid-row:3}
.layout-horseshoe .pos-6{grid-column:6;grid-row:2}
.layout-horseshoe .pos-7{grid-column:7;grid-row:1}

/* ヘキサグラム：六芒星風 */
.draw-grid.layout-hexagram{
  max-width:620px;
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(5, auto);
}
.layout-hexagram .pos-1{grid-column:3;grid-row:1}
.layout-hexagram .pos-2{grid-column:2;grid-row:2}
.layout-hexagram .pos-3{grid-column:4;grid-row:2}
.layout-hexagram .pos-4{grid-column:3;grid-row:3}
.layout-hexagram .pos-5{grid-column:2;grid-row:4}
.layout-hexagram .pos-6{grid-column:4;grid-row:4}
.layout-hexagram .pos-7{grid-column:3;grid-row:5}

/* ケルト十字：中央十字＋右の柱 */
.draw-grid.layout-celtic{
  max-width:760px;
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows:repeat(4, auto);
}
.layout-celtic .pos-1{grid-column:2;grid-row:2}
.layout-celtic .pos-2{grid-column:3;grid-row:2}
.layout-celtic .pos-3{grid-column:2;grid-row:3}
.layout-celtic .pos-4{grid-column:1;grid-row:2}
.layout-celtic .pos-5{grid-column:2;grid-row:1}
.layout-celtic .pos-6{grid-column:4;grid-row:2}
.layout-celtic .pos-7{grid-column:6;grid-row:4}
.layout-celtic .pos-8{grid-column:6;grid-row:3}
.layout-celtic .pos-9{grid-column:6;grid-row:2}
.layout-celtic .pos-10{grid-column:6;grid-row:1}

/* スマホ：横スクロールで形を崩さない */
@media(max-width:760px){
  .draw-area{
    overflow-x:auto;
    padding-bottom:10px;
  }
  .draw-grid.layout-horseshoe{
    width:770px;
    grid-template-columns:repeat(7,100px);
  }
  .draw-grid.layout-hexagram{
    width:520px;
    grid-template-columns:repeat(5,100px);
  }
  .draw-grid.layout-celtic{
    width:650px;
    grid-template-columns:repeat(6,100px);
  }
  .layout-horseshoe .draw-card,
  .layout-hexagram .draw-card,
  .layout-celtic .draw-card{
    max-width:95px;
  }
  .draw-card img{
    height:95px;
  }
}


/* ===== PHPログイン画面 ===== */
.login-screen{
  min-height:100vh;
  background:linear-gradient(120deg,#08172b,#1b2a44 55%,#6d874f);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-box{
  width:min(420px,100%);
  background:white;
  color:#0f172a;
  border-radius:24px;
  padding:28px;
  text-align:center;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}
.login-box h2{
  margin:0 0 12px;
  font-size:28px;
}
.login-box input{
  width:100%;
  padding:15px;
  border:1px solid #d5deea;
  border-radius:14px;
  font-size:18px;
  margin:12px 0;
}
.login-box button{
  width:100%;
  padding:15px;
  border:0;
  border-radius:14px;
  background:#0e1624;
  color:white;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}
.login-error{
  color:#c0392b;
  font-weight:800;
  margin-top:12px;
}
.logout-link{
  position:fixed;
  right:14px;
  top:14px;
  z-index:1000;
  background:rgba(255,255,255,.92);
  color:#0e1624;
  text-decoration:none;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

/* ===== 購入者別ログイン表示 ===== */
.user-bar{
  position:fixed;
  right:14px;
  top:14px;
  z-index:1000;
  background:rgba(255,255,255,.94);
  color:#0e1624;
  border-radius:999px;
  padding:8px 14px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.user-bar a{
  color:#0e1624;
  text-decoration:underline;
  margin-left:8px;
}
/* スマホではスプレッドを見やすい通常配置に戻す */
@media(max-width:760px){
  .draw-area{
    overflow-x:visible;
  }

  .draw-grid.layout-horseshoe,
  .draw-grid.layout-hexagram,
  .draw-grid.layout-celtic{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }

  .layout-horseshoe .draw-card,
  .layout-hexagram .draw-card,
  .layout-celtic .draw-card{
    grid-column:auto !important;
    grid-row:auto !important;
    max-width:none;
  }

  .draw-card img{
    height:120px;
  }
}