:root{
  --fortune-bg:#fff8ef;
  --fortune-bg-soft:#fffdf8;
  --fortune-card:#fff7e8;
  --fortune-card-strong:#fff3df;
  --fortune-line:#d9b98c;
  --fortune-line-soft:#ead7b8;
  --fortune-accent:#f2a65a;
  --fortune-accent-strong:#e38b3d;
  --fortune-sub:#8bcb77;
  --fortune-sub-strong:#66af5a;
  --fortune-title:#8c5a2b;
  --fortune-text:#6e6257;
  --fortune-muted:#a2917f;
  --fortune-shadow:0 16px 40px rgba(154, 118, 64, 0.14);
}

html,
body{
  background:
    linear-gradient(180deg, #fffdf8 0%, #fff8ef 38%, #fff5e8 100%);
  color:var(--fortune-text);
}

body{
  min-height:100vh;
}

a{
  color:inherit;
}

.header{
  background:rgba(255, 253, 248, 0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(217, 185, 140, 0.18);
}

.nav{
  max-width:1120px;
}

.container.fortune-page{
  max-width:1120px;
  padding:12px 16px 40px;
}

.header .brand{
  display:flex;
  justify-content:center;
}

.site-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:auto;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
  text-decoration:none;
  transition:opacity .12s ease;
}

.site-logo:hover{
  text-decoration:none;
  opacity:.78;
  transform:none;
}

.site-logo-text{
  display:block;
  color:#6b4620;
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1;
}

.fortune-shell{
  display:grid;
  gap:10px;
}

.card-lite{
  border:1px solid rgba(217, 185, 140, 0.54);
  background:rgba(255, 253, 248, 0.82);
  border-radius:24px;
  box-shadow:var(--fortune-shadow);
}

.fortune-shortcuts{
  gap:10px;
  margin-top:-2px;
}

.fortune-shortcuts .feature-shortcut-btn{
  min-height:36px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--fortune-line);
  background:linear-gradient(180deg, #fffaf0, #fff3df);
  color:var(--fortune-title);
  box-shadow:none;
  font-size:13px;
  font-weight:800;
}

.fortune-shortcuts .feature-shortcut-btn:hover{
  text-decoration:none;
  background:linear-gradient(180deg, #fff3df, #ffeed0);
  border-color:#cfab79;
  transform:translateY(-1px);
}

.fortune-shortcuts .feature-shortcut-btn.is-active{
  color:#fffdf8;
  border-color:var(--fortune-accent-strong);
  background:linear-gradient(180deg, var(--fortune-accent), var(--fortune-accent-strong));
  box-shadow:0 8px 20px rgba(227, 139, 61, 0.18);
}

.fortune-intro{
  padding:18px 24px 16px;
  text-align:center;
}

.fortune-title{
  margin:0 0 10px;
  color:var(--fortune-title);
  font-size:34px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-0.03em;
}

.fortune-desc{
  display:none;
}

.fortune-search{
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.fortune-input{
  width:min(520px, 100%);
  height:52px;
  border-radius:16px;
  border:1px solid var(--fortune-line);
  background:#fffdf8;
  color:var(--fortune-title);
  padding:0 18px;
  font-size:16px;
  font-weight:700;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
}

.fortune-input::placeholder{
  color:var(--fortune-muted);
  font-weight:600;
}

.fortune-input:focus{
  border-color:var(--fortune-accent);
  box-shadow:
    0 0 0 4px rgba(242, 166, 90, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

.fortune-submit{
  height:52px;
  min-width:122px;
  padding:0 18px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg, var(--fortune-accent), var(--fortune-accent-strong));
  color:#fffdf8;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(227, 139, 61, 0.2);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.fortune-submit:hover{
  transform:translateY(-1px);
  filter:saturate(1.04);
  box-shadow:0 12px 24px rgba(227, 139, 61, 0.24);
}

.fortune-submit:disabled{
  cursor:wait;
  opacity:.7;
  transform:none;
  box-shadow:none;
}

.fortune-notice{
  margin:10px 0 0;
  text-align:center;
  color:var(--fortune-muted);
  font-size:13px;
  line-height:1.7;
}

.fortune-result-tools{
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.fortune-result-label{
  color:var(--fortune-title);
  font-size:17px;
  font-weight:900;
  line-height:1.2;
}

.fortune-reset-btn{
  min-height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--fortune-line);
  background:linear-gradient(180deg, #fffaf0, #fff3df);
  color:var(--fortune-title);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.fortune-reset-btn:hover{
  background:linear-gradient(180deg, #fff3df, #ffeed0);
  border-color:#cfab79;
}

.fortune-stage{
  position:relative;
  overflow:hidden;
  min-height:1320px;
  padding:16px;
}

.fortune-stage-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,248,239,0.42)),
    url("./fortune-bg.png") center center / cover no-repeat;
  opacity:.78;
  filter:saturate(1.02);
  pointer-events:none;
}

.fortune-result-wrap{
  position:relative;
  z-index:1;
  min-height:1260px;
  display:grid;
  place-items:center;
}

.fortune-scroll{
  position:relative;
  width:min(880px, 99%);
  aspect-ratio:610 / 832;
  display:grid;
  place-items:center;
  overflow:visible;
}

.fortune-scroll-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  transform:scale(1.98);
  transform-origin:center center;
  filter:drop-shadow(0 20px 26px rgba(116, 86, 46, 0.16));
}

.fortune-scroll-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fortune-meta{
  position:absolute;
  color:rgba(110, 98, 87, 0.9);
  font-weight:800;
  letter-spacing:0.01em;
  text-shadow:0 1px 0 rgba(255,255,255,0.72);
  user-select:none;
  text-align:center;
}

.fortune-meta-top{
  top:1.7%;
  left:50%;
  transform:translateX(-50%);
  width:min(640px, 74%);
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  font-size:clamp(22px, 3.2vw, 40px);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fortune-meta-top:empty{
  display:none;
}

.fortune-meta-bottom{
  bottom:-3.4%;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  white-space:nowrap;
}

.fortune-vertical{
  position:absolute;
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  padding-top:8px;
}

.fortune-vertical-line{
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  color:#6b4620;
  font-family:"Gungsuh", "Batang", serif;
  font-weight:400;
  letter-spacing:0.03em;
  line-height:1.18;
  text-shadow:
    0 1px 0 rgba(255,255,255,.86),
    0 0 18px rgba(255,255,255,.22);
  box-sizing:border-box;
}

.fortune-vertical.is-single{
  top:18.6%;
  bottom:12.8%;
  left:35.8%;
  right:35.8%;
  justify-content:center;
  gap:0;
}

.fortune-vertical.is-single .fortune-vertical-line{
  font-size:51px;
  line-height:1.16;
  letter-spacing:0.035em;
  padding-top:6px;
  padding-bottom:6px;
}

.fortune-vertical.is-double{
  top:18.6%;
  bottom:12.8%;
  left:34.2%;
  right:34.2%;
  justify-content:center;
  gap:14px;
}

.fortune-vertical.is-double .fortune-vertical-line{
  font-size:62px;
  line-height:1.18;
  letter-spacing:0.035em;
  padding-top:6px;
  padding-bottom:6px;
}

.fortune-placeholder{
  display:block;
  text-align:center;
  color:rgba(110, 98, 87, 0.68);
  font-size:18px;
  font-weight:700;
  line-height:1.8;
}

.fortune-error{
  color:#ad4f3c;
}

.footer{
  margin-top:28px;
}

.footer .row{
  max-width:1120px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 900px){
  .container.fortune-page{
    padding-top:10px;
  }

  .site-logo-text{
    font-size:15px;
  }

  .fortune-intro{
    padding:16px 18px 14px;
  }

  .fortune-title{
    font-size:28px;
    margin-bottom:8px;
  }

  .fortune-stage{
    min-height:1080px;
    padding:16px;
  }

  .fortune-result-wrap{
    min-height:1020px;
  }

  .fortune-scroll{
    width:min(560px, 100%);
  }

  .fortune-scroll-image{
    transform:scale(1.92);
  }

  .fortune-meta-top{
    top:1.9%;
    width:min(420px, 72%);
    height:62px;
    padding:0 12px;
    font-size:clamp(17px, 3.3vw, 28px);
  }

  .fortune-meta-bottom{
    bottom:-3.4%;
    font-size:10px;
  }

  .fortune-vertical{
    padding-top:7px;
  }

  .fortune-vertical.is-single{
    top:18.8%;
    bottom:13%;
    left:36.2%;
    right:36.2%;
  }

  .fortune-vertical.is-single .fortune-vertical-line{
    font-size:38px;
    line-height:1.14;
    letter-spacing:0.03em;
  }

  .fortune-vertical.is-double{
    top:18.8%;
    bottom:13%;
    left:34.4%;
    right:34.4%;
    gap:12px;
  }

  .fortune-vertical.is-double .fortune-vertical-line{
    font-size:47px;
    line-height:1.16;
    letter-spacing:0.03em;
  }
}

@media (max-width: 640px){
  .site-logo-text{
    font-size:15px;
    letter-spacing:-0.01em;
  }

  .fortune-shortcuts{
    gap:8px;
    margin-top:-4px;
  }

  .fortune-shortcuts .feature-shortcut-btn{
    min-height:34px;
    padding:0 13px;
    font-size:12px;
  }

  .fortune-title{
    font-size:24px;
    margin-bottom:8px;
  }

  .fortune-desc{
    display:none;
  }

  .fortune-search{
    flex-direction:column;
    align-items:stretch;
    margin-top:0;
  }

  .fortune-input,
  .fortune-submit{
    width:100%;
  }

  .fortune-stage{
    min-height:900px;
    padding:10px;
  }

  .fortune-result-wrap{
    min-height:840px;
  }

  .fortune-scroll{
    width:min(440px, 100%);
  }

  .fortune-scroll-image{
    transform:scale(1.88);
  }

  .fortune-meta-top{
    top:2%;
    left:50%;
    transform:translateX(-50%);
    width:min(320px, 70%);
    height:48px;
    padding:0 10px;
    font-size:clamp(14px, 4vw, 20px);
  }

  .fortune-meta-bottom{
    bottom:-3.6%;
    left:50%;
    transform:translateX(-50%);
    font-size:8px;
  }

  .fortune-vertical{
    padding-top:6px;
  }

  .fortune-vertical.is-single{
    top:19.2%;
    bottom:13.2%;
    left:36.8%;
    right:36.8%;
  }

  .fortune-vertical.is-single .fortune-vertical-line{
    font-size:29px;
    line-height:1.12;
    letter-spacing:0.025em;
  }

  .fortune-vertical.is-double{
    top:19.2%;
    bottom:13.2%;
    left:35%;
    right:35%;
    gap:10px;
  }

  .fortune-vertical.is-double .fortune-vertical-line{
    font-size:35px;
    line-height:1.14;
    letter-spacing:0.025em;
  }

  .fortune-placeholder{
    font-size:15px;
  }
}

[hidden]{display:none !important;}