@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Noto+Serif+JP:wght@300;400&family=Noto+Sans+JP:wght@300;400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0B0A08;
  --bg2:#111009;
  --surface:#161410;
  --gold:#C4955A;
  --gold2:#E8C88A;
  --gold-dim:#7A5C34;
  --cream:#F2EDE4;
  --cream2:#C8BFB0;
  --muted:#6B6355;
  --border:rgba(196,149,90,0.2);
  --border2:rgba(196,149,90,0.08);
  --radius:4px;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg);
  color:var(--cream);
  min-height:100vh;
  font-size:14px;
  line-height:1.8;
  overflow-x:hidden;
}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4rem 2rem;
  position:relative;
  background:radial-gradient(ellipse at 50% 30%,#1a1508 0%,var(--bg) 70%);
  background-image: url(images/moon.jpg);
  background-color:#000;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(196,149,90,0.015) 40px,rgba(196,149,90,0.015) 41px);
  pointer-events:none;
}
.hero-mark{
  font-family:'Cormorant Garamond',serif;
  font-size:11px;
  letter-spacing:0.4em;
  color:var(--gold);
  margin-bottom:2rem;
  opacity:0.8;
}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,6vw,3.8rem);
  font-weight:300;
  letter-spacing:0.08em;
  color:var(--cream);
  line-height:1.2;
  margin-bottom:0.5rem;
}
.hero-sub{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(0.75rem,2vw,0.9rem);
  color:var(--gold);
  letter-spacing:0.2em;
  margin-bottom:2rem;
  font-weight:300;
}
.hero-desc{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(0.8rem,2vw,0.95rem);
  color:var(--cream2);
  line-height:2.2;
  margin-bottom:3rem;
  font-weight:300;
}
.hero-divider{
  width:1px;
  height:60px;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  margin:0 auto 3rem;
}
.btn-hero{
  display:inline-block;
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  letter-spacing:0.35em;
  color:var(--gold);
  border:0.5px solid var(--gold-dim);
  padding:14px 36px;
  cursor:pointer;
  background:none;
  transition:all 0.3s;
  text-decoration:none;
  text-transform:uppercase;
}
.btn-hero:hover{background:rgba(196,149,90,0.08);border-color:var(--gold);}
.scroll-hint{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:0.3em;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.scroll-hint::after{
  content:'';
  width:0.5px;
  height:40px;
  background:linear-gradient(to bottom,var(--muted),transparent);
}

/* ===== NAV ===== */
.site-nav{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(11,10,8,0.96);
  backdrop-filter:blur(12px);
  border-bottom:0.5px solid var(--border2);
  display:flex;
  justify-content:center;
}
.nav-btn{
  background:none;
  border:none;
  padding:16px 24px;
  font-family:'Cormorant Garamond',serif;
  font-size:12px;
  letter-spacing:0.25em;
  color:var(--muted);
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color 0.2s,border-color 0.2s;
  text-transform:uppercase;
}
.nav-btn.active{color:var(--gold);border-bottom-color:var(--gold);}
.nav-btn:hover{color:var(--cream2);}

/* ===== SECTION ===== */
.section{display:none;padding:5rem 2rem;max-width:1280px;margin:0 auto;}
.section.active{display:block;}
.section-mark{
  font-family:'Cormorant Garamond',serif;
  font-size:10px;
  letter-spacing:0.4em;
  color:var(--gold);
  text-align:center;
  margin-bottom:1rem;
  opacity:0.7;
  text-transform:uppercase;
}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,4vw,2.2rem);
  font-weight:300;
  letter-spacing:0.1em;
  color:var(--cream);
  text-align:center;
  margin-bottom:2rem;
}
.gold-line{
  width:40px;
  height:0.5px;
  background:var(--gold);
  margin:0 auto 3rem;
  opacity:0.5;
}

/* ===== TODAY ===== */
.draw-steps{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  margin-bottom:3rem;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.draw-step{display:flex;align-items:flex-start;gap:1rem;}
.draw-step-icon{font-size:18px;flex-shrink:0;margin-top:2px;}
.draw-step-text{
  font-family:'Noto Serif JP',serif;
  font-size:13px;
  color:var(--cream2);
  line-height:2;
  font-weight:300;
}

/* カードステージ 352:609 */
.card-stage{
  width:min(352px,80vw);
  aspect-ratio:352/609;
  perspective:1200px;
  cursor:pointer;
  flex-shrink:0;
}
.card-inner{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.card-inner.flipped{transform:rotateY(180deg);}
.card-front,.card-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  border-radius:var(--radius);
  overflow:hidden;
}
.card-front{border:0.5px solid var(--border);}
.card-front-img{width:100%;height:100%;object-fit:cover;display:block;}
.card-back{
  transform:rotateY(180deg);
  border:0.5px solid var(--border);
  background:var(--surface);
}
.card-back-img{
  width:100%;height:100%;
  object-fit:cover;
  display:none;
  position:absolute;inset:0;
}
.card-back-img.show{display:block;}
.card-back-noimg{
  display:none;
  position:absolute;inset:0;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;padding:2rem;text-align:center;
}
.card-back-noimg.show{display:flex;}
.cb-num{font-family:'Cormorant Garamond',serif;font-size:11px;color:var(--gold);letter-spacing:0.3em;}
.cb-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--cream);letter-spacing:0.15em;}
.cb-line{width:30px;height:0.5px;background:var(--gold-dim);}
.cb-meaning-fb{font-family:'Noto Serif JP',serif;font-size:11px;color:var(--cream2);line-height:2;font-weight:300;}

.btn-draw{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  letter-spacing:0.35em;
  color:var(--gold);
  border:0.5px solid var(--gold-dim);
  padding:14px 36px;
  cursor:pointer;
  background:none;
  transition:all 0.3s;
  text-transform:uppercase;
  margin-top:2rem;
  white-space:nowrap;
}
.btn-draw:hover{background:rgba(196,149,90,0.08);border-color:var(--gold);}


/* ===== 左右レイアウト ===== */
.draw-layout{
  display:flex;
  gap:0;
  align-items:flex-start;
  justify-content:center;
}

/* 左カラム */
.draw-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  /* translateX でスムーズに左へ */
  transform: translateX(0);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  /* gap の代わりにmargin-rightで間隔管理 */
  margin-right: 0;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              margin-right 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 引いた後：右パネル分のgapを開ける */
.draw-layout.revealed .draw-left{
  margin-right: 3rem;
}

/* 右パネル：max-width で滑らかに展開（GPUアクセラレート） */
.draw-right{
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0s 0.85s;
  will-change: max-width;
}

/* 引いた後：右パネルを展開 */
.draw-right.show{
  max-width: 600px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: max-width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* リセット中 */
.draw-layout.resetting .draw-left{
  margin-right: 0;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              margin-right 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.draw-layout.resetting .draw-right{
  transition: max-width 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              visibility 0s 0.3s;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
}

/* ===== KEYFRAMES ===== */

/* 右パネル各ブロック：下からふわっと */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 右：各ブロックを順番にフェードイン（flex展開後に発火） */
.draw-right.show .td-block:nth-child(1) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.65s both; }
.draw-right.show .td-block:nth-child(2) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.78s both; }
.draw-right.show .td-block:nth-child(3) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.91s both; }
.draw-right.show .td-block:nth-child(4) { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 1.04s both; }
.draw-right.show .td-light              { animation: fadeInUp 0.55s cubic-bezier(0.22,1,0.36,1) 1.18s both; }

/* ===== カード一覧アニメーション ===== */
@keyframes cardItemIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-item--animate {
  opacity: 0;
  animation: cardItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ===== モーダルアニメーション ===== */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-overlay.open {
  animation: overlayIn 0.3s ease forwards;
}

.modal--enter {
  animation: modalIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


.td-block{
  border:0.5px solid var(--border2);
  padding:1.25rem 1.5rem;
  margin-bottom:10px;
  position:relative;
}
.td-block::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:2px;height:100%;
  background:linear-gradient(to bottom,var(--gold),transparent);
  opacity:0.35;
}
.td-label{
  font-family:'Cormorant Garamond',serif;
  font-size:10px;
  letter-spacing:0.35em;
  color:var(--gold);
  margin-bottom:8px;
  text-transform:uppercase;
  opacity:0.8;
}
.td-text{
  font-family:'Noto Serif JP',serif;
  font-size:13px;
  line-height:2.1;
  color:var(--cream2);
  font-weight:300;
}
.td-light{
  text-align:center;
  padding:1.5rem;
  border:0.5px solid var(--border);
  margin-top:10px;
}
.td-light .td-label{text-align:center;margin-bottom:10px;}
.td-light .td-text{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;
  font-weight:300;
  color:var(--cream);
  letter-spacing:0.05em;
  line-height:1.9;
}

/* ===== LIST ===== */
.filter-row{
  display:flex;flex-wrap:wrap;
  gap:8px;justify-content:center;
  margin-bottom:2.5rem;
}
.filter-chip{
  background:none;
  border:0.5px solid var(--border);
  padding:6px 16px;
  font-family:'Cormorant Garamond',serif;
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--muted);
  cursor:pointer;
  transition:all 0.2s;
  text-transform:uppercase;
}
.filter-chip.active,.filter-chip:hover{
  color:var(--gold);
  border-color:var(--gold-dim);
  background:rgba(196,149,90,0.05);
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.card-item{
  border:0.5px solid var(--border2);
  background:var(--surface);
  cursor:pointer;
  transition:border-color 0.2s,transform 0.2s;
  overflow:hidden;
}
.card-item:hover{border-color:var(--gold-dim);transform:translateY(-3px);}
.card-item-img{
  width:100%;
  aspect-ratio:352/609;
  object-fit:cover;
  display:block;
  background:var(--bg2);
}
.card-item-body{padding:.8rem 1rem;}
.ci-num{
  font-family:'Cormorant Garamond',serif;
  font-size:10px;color:var(--gold);
  letter-spacing:0.2em;margin-bottom:4px;
}
.ci-title{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;font-weight:300;
  letter-spacing:0.1em;
  color:var(--cream);margin-bottom:4px;
}
.ci-meaning{font-family:'Noto Serif JP',serif;font-size:10px;color:var(--muted);line-height:1.7;font-weight:300;}

/* ===== MODAL ===== */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.85);
  z-index:300;
  align-items:center;justify-content:center;
  padding:1rem;
  backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface);
  border:0.5px solid var(--border);
  max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;
  position:relative;
}
.modal-img-wrap{
  width:100%;
  aspect-ratio:352/609;
  max-height:100vh;
  overflow:hidden;
  background:var(--bg2);
}
.modal-img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.modal-img-placeholder span{
  font-family:'Cormorant Garamond',serif;
  font-size:11px;color:var(--muted);letter-spacing:0.2em;
}
.modal-body{padding:2rem;}
.modal-close{
  position:absolute;top:1rem;right:1rem;
  background:#fff;
  border:0.5px solid var(--border);
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--muted);cursor:pointer;
  z-index:1;transition:color 0.2s;
}
.modal-close:hover{color:var(--cream);}
.m-mark{
  font-family:'Cormorant Garamond',serif;
  font-size:10px;color:var(--gold);
  letter-spacing:0.35em;margin-bottom:6px;opacity:0.7;
}
.m-title{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;font-weight:300;
  letter-spacing:0.12em;
  color:var(--cream);margin-bottom:1.5rem;
}
.m-div{height:0.5px;background:var(--border);margin:1.25rem 0;}
.m-sec{
  font-family:'Cormorant Garamond',serif;
  font-size:10px;letter-spacing:0.35em;
  color:var(--gold);margin-bottom:8px;
  text-transform:uppercase;opacity:0.7;
}
.m-text{
  font-family:'Noto Serif JP',serif;
  font-size:13px;line-height:2.2;
  color:var(--cream2);font-weight:300;
}
.m-light-wrap{
  margin-top:1.5rem;
  padding:1.5rem;
  border:0.5px solid var(--border);
  text-align:center;
}
.m-light-text{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;font-weight:300;
  color:var(--cream);letter-spacing:0.05em;
  line-height:1.8;
}

/* ===== FOOTER ===== */
.site-footer{
  border-top:0.5px solid var(--border2);
  padding:3rem 2rem;
  text-align:center;
  margin-top:4rem;
}
.footer-title{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:0.3em;
  color:var(--gold);margin-bottom:1rem;
  opacity:0.7;
}
.footer-text{font-size:11px;color:var(--muted);letter-spacing:0.1em;line-height:2;}

/* ===== RESPONSIVE ===== */
@media(max-width:720px){
  .draw-layout{flex-direction:column;align-items:center;}
  .draw-left{margin-right:0 !important;transition:none;}
  .draw-layout.revealed .draw-left{margin-right:0;}
  .draw-right{max-width:100% !important;width:100%;transition:none;}
  .draw-right.show{max-width:100%;}
  .card-stage{width:min(280px,78vw);}
  .btn-draw{margin:1.5rem auto 0;display:block;}
}
@media(max-width:480px){
  .section{padding:3rem 1.25rem;}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .modal-img-wrap{
    max-height:100vh !important;
    margin:4rem auto;
  }
  .modal-body{padding:1.25rem;}
  .m-title{font-size:22px;}
  .nav-btn{padding:14px 14px;font-size:11px;letter-spacing:0.15em;}
}

/* ===== NAV USER ===== */
.nav-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  padding:0 1.5rem;
}
.nav-avatar{
  width:28px;height:28px;
  border-radius:50%;
  object-fit:cover;
  border:0.5px solid var(--border);
}
.nav-username{
  font-family:'Cormorant Garamond',serif;
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--cream2);
}
.nav-logout{
  font-family:'Cormorant Garamond',serif;
  font-size:11px;
  letter-spacing:0.15em;
  color:var(--muted);
  text-decoration:none;
  border:0.5px solid var(--border2);
  padding:4px 12px;
  transition:color 0.2s, border-color 0.2s;
}
.nav-logout:hover{color:var(--cream2);border-color:var(--border);}

@media(max-width:480px){
  .nav-username{display:none;}
  .nav-user{padding:0 0.75rem;gap:8px;}
}

/* ===== ANSWER / RECORD ===== */
.td-answer{
  margin-top:10px;
  padding:1.25rem 1.5rem;
  border:0.5px solid var(--border2);
  position:relative;
}
.td-answer::before{
  content:'';position:absolute;top:0;left:0;
  width:2px;height:100%;
  background:linear-gradient(to bottom,var(--gold),transparent);
  opacity:0.35;
}
.answer-textarea{
  width:100%;
  min-height:100px;
  background:transparent;
  border:none;
  border-bottom:0.5px solid var(--border);
  color:var(--cream);
  font-family:'Noto Serif JP',serif;
  font-size:13px;
  line-height:2.1;
  font-weight:300;
  resize:vertical;
  outline:none;
  padding:0.5rem 0;
  margin-top:0.5rem;
}
.answer-textarea::placeholder{color:var(--muted);font-size:12px;}
.answer-textarea:disabled{opacity:0.5;cursor:default;}
.answer-footer{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
}
.btn-save{
  font-family:'Cormorant Garamond',serif;
  font-size:12px;
  letter-spacing:0.25em;
  color:var(--gold);
  border:0.5px solid var(--gold-dim);
  padding:8px 24px;
  background:none;
  cursor:pointer;
  transition:all 0.2s;
  text-transform:uppercase;
}
.btn-save:hover{background:rgba(196,149,90,0.08);border-color:var(--gold);}
.btn-save:disabled{opacity:0.4;cursor:default;pointer-events:none;}
.save-status{font-size:12px;color:var(--muted);font-family:'Noto Serif JP',serif;}
.save-status.saved{color:var(--gold);}
.save-status.error{color:#E24B4A;}

/* ===== MODAL FAVORITE ===== */
.m-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0;
}
.m-header > div { flex:1; min-width:0; }
.btn-fav{
  background:none;
  border:0.5px solid var(--border2);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--muted);
  transition:color 0.2s, border-color 0.2s;
  flex-shrink:0;
  margin-top:4px;
}
.btn-fav:hover{color:var(--gold);border-color:var(--gold-dim);}