/* SAJU-DEEP-001 skin: the first sky-blue screen, cleaned up with gold borders. Same palette as fortune_app/theme.py. No pictures. */
:root { --bg:#EAF5FF; --surface:#F3F9FF; --card:#FFFFFF; --text:#1F2A3A; --muted:#4F6275; --line:#C9DDF0; --sky:#8EC9F5; --sky-soft:#DDF0FC;
  --gold:#C9A23A; --gold-soft:#F6EBC8; --gold-deep:#9C7A1E; --focus:#1E6FB8; --space:1rem; --radius:1rem; }
* { box-sizing:border-box; }
body { margin:0 auto; max-width:72rem; padding:var(--space); background:var(--bg); color:var(--text); font-family:system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; line-height:1.7; }
header,main { background:var(--card); border:2px solid var(--gold); border-radius:var(--radius); padding:var(--space); margin-bottom:var(--space); box-shadow:0 2px 10px rgba(30,111,184,.08); }
header { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1rem; }
header h1 { margin:0; font-size:1.5rem; color:var(--focus); } header p { margin:0; flex:1; color:var(--muted); }
h2 { margin:.4rem 0 .8rem; font-size:1.3rem; color:var(--focus); }
fieldset { border:2px solid var(--line); border-radius:var(--radius); background:var(--surface); margin:var(--space) 0; }
legend { padding:0 .5rem; font-weight:700; color:var(--gold-deep); }
label { display:inline-flex; flex-direction:column; margin:.3rem; }
input,select,button { font:inherit; padding:.4rem .6rem; max-width:100%; }
input,select { border:2px solid var(--line); border-radius:.6rem; background:#fff; color:var(--text); }
input[type="checkbox"],input[type="radio"] { accent-color:var(--focus); width:1.2rem; height:1.2rem; }
button { cursor:pointer; border:2px solid var(--gold); background:#fff; color:var(--text); border-radius:999px; padding:.4rem 1rem; }
button:hover { background:var(--gold-soft); }
button:disabled { cursor:wait; color:var(--muted); background:var(--surface); border-color:var(--line); }
#run, button.primary { display:block; margin:var(--space) auto 0; min-width:12rem; font-weight:700; background:var(--sky); border-color:var(--gold); color:#0E3556; padding:.6rem 1.4rem; }
#run:hover:not(:disabled), button.primary:hover { background:var(--sky-soft); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[hidden] { display:none !important; }
.muted { color:var(--muted); } .small { font-size:.9rem; }
label.check { flex-direction:row; align-items:center; gap:.4rem; }
#status { background:var(--sky-soft); border:1px solid var(--line); border-radius:999px; padding:.3rem 1rem; display:inline-block; }
/* user 10-30: two boxes per line on every screen: 이름·성별 / 생년월일·태어난 시간 / 시·도·시·군·구 */
#person { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; align-items:start; max-width:44rem; }
#person label, #partner label { margin:0; width:100%; gap:.2rem; }
#person label.check, #partner label.check { width:auto; }
#person input:not([type="checkbox"]):not([type="radio"]), #person select, #partner input:not([type="radio"]) { width:100%; }
.field { display:flex; flex-direction:column; gap:.35rem; } .field .label { line-height:1.4; }
.choice { display:flex; gap:1.2rem; padding:.35rem 0; }
#partner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; align-items:start; max-width:44rem; }
.who { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; background:var(--surface); border:2px solid var(--gold); border-radius:var(--radius); padding:.6rem 1rem; font-weight:700; }
#results { margin-top:var(--space); }
/* 만세력 */
.manse { background:var(--surface); border:2px solid var(--gold); border-radius:var(--radius); padding:var(--space); margin-bottom:var(--space); }
.manse-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; max-width:40rem; margin:0 auto; }
.mcol { display:flex; flex-direction:column; align-items:center; gap:.3rem; background:#fff; border:2px solid var(--line); border-radius:.9rem; padding:.6rem .3rem; min-width:0; }
.mcol.me { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.mhead { color:var(--gold-deep); } .god { font-weight:700; color:var(--focus); min-height:1.4em; }
.hidden-stems,.stage { color:var(--muted); font-size:.85rem; text-align:center; } .stars { color:var(--gold-deep); font-weight:700; font-size:.8rem; text-align:center; min-height:1.2em; } .unknown { font-size:1.6rem; color:var(--muted); padding:2rem 0; }
.glyph { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; border-radius:.7rem; color:#fff; min-width:3rem; padding:.2rem .4rem; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.glyph b { font-size:1.6rem; line-height:1.2; font-family:"Noto Serif CJK KR","Batang",serif; } .glyph small { font-size:.72rem; opacity:.95; }
.glyph.big { width:100%; max-width:6rem; padding:.4rem .2rem; } .glyph.big b { font-size:2.6rem; }
.el-목 { background:#3E9E62; } .el-화 { background:#E0574F; } .el-토 { background:#D79A2B; } .el-금 { background:#8D97A3; } .el-수 { background:#34557F; } .el-x { background:#B8C2CC; }
/* 메뉴 카드 */
.menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.8rem; }
.menu button { display:grid; grid-template-columns:3.2rem 1fr; grid-template-rows:auto auto; column-gap:.8rem; align-items:center; text-align:left; border-radius:var(--radius); padding:.8rem 1rem; background:#fff; box-shadow:0 2px 6px rgba(30,111,184,.08); }
.menu i { grid-row:1/3; font-style:normal; display:flex; align-items:center; justify-content:center; width:3.2rem; height:3.2rem; border-radius:50%; background:var(--sky-soft); border:2px solid var(--gold); color:var(--gold-deep); font-size:1.5rem; font-weight:700; }
.menu strong { font-size:1.1rem; } .menu small { color:var(--muted); line-height:1.3; }
.menu { scroll-margin-top:0; }
.menu.compact { position:sticky; top:0; z-index:5; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.4rem; background:var(--card); padding:.5rem 0; border-bottom:2px solid var(--gold); margin-bottom:.8rem; }
.menu.compact button { grid-template-columns:1fr; justify-items:center; text-align:center; padding:.4rem .2rem; row-gap:.15rem; box-shadow:none; }
.menu.compact i { grid-row:auto; width:2.2rem; height:2.2rem; font-size:1.05rem; } .menu.compact strong { font-size:.88rem; white-space:nowrap; } .menu.compact small { display:none; }
.menu button[aria-current="true"] { background:var(--sky); } .menu button[aria-current="true"] i { background:#fff; }
[data-panel] { scroll-margin-top:7.5rem; }
.cards figure.rev img { transform:rotate(180deg); }
/* 풀이 카드 */
.story { max-width:52rem; margin:0 auto; display:flex; flex-direction:column; gap:.9rem; }
#fortune-text { max-width:none; margin:1rem 0; }
.sec { background:#fff; border:2px solid var(--gold); border-radius:var(--radius); padding:1rem 1.2rem; }
.sec .ask { display:inline-block; color:var(--gold-deep); background:var(--gold-soft); border-radius:999px; padding:0 .7rem; font-weight:700; }
.sec h3 { margin:.4rem 0 .5rem; font-size:1.3rem; line-height:1.45; color:var(--text); }
.sec p { margin:.5rem 0; font-size:1.05rem; }
.sec.hero { background:linear-gradient(180deg,var(--sky-soft),#fff); }
.sec.closing { background:var(--gold-soft); margin-top:1rem; }
.band { margin:1.4rem 0 .6rem; padding-left:.6rem; border-left:5px solid var(--gold); font-size:1.1rem; }
.scroll { overflow-x:auto; padding-bottom:.4rem; }
/* user 10-28: the 대운표 fills the box edge to edge; on a narrow phone it scrolls sideways as before */
.dgrid { display:grid; grid-template-columns:repeat(var(--n,9),minmax(4.4rem,1fr)); gap:.5rem; width:100%; min-width:max-content; }
.dcol { display:flex; flex-direction:column; align-items:center; gap:.25rem; background:#fff; border:2px solid var(--line); border-radius:.8rem; padding:.5rem .4rem; min-width:4.4rem; }
.dcol.now { border-color:var(--gold); background:var(--gold-soft); } .dcol em { font-style:normal; font-weight:700; color:var(--gold-deep); }
.timeline { display:flex; flex-direction:column; gap:.35rem; }
.trow { display:grid; grid-template-columns:3.6rem 3rem auto 1fr; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius:.7rem; padding:.35rem .7rem; }
.trow.now { border:2px solid var(--gold); background:var(--gold-soft); }
.tchars { display:inline-flex; gap:.3rem; } .trow .glyph { min-width:2.4rem; } .trow .glyph b { font-size:1.2rem; } .trow .glyph small { display:none; }
.ttitle { font-weight:700; }
.folds { display:flex; flex-direction:column; gap:.5rem; }
.fold { background:#fff; border:2px solid var(--line); border-radius:var(--radius); }
.fold[open] { border-color:var(--gold); }
.fold summary { cursor:pointer; padding:.7rem 1rem; display:flex; flex-direction:column; gap:.1rem; }
.fold summary .ask { color:var(--gold-deep); font-weight:700; font-size:.92rem; } .fold summary .title { font-weight:700; font-size:1.08rem; }
.fold-body { padding:0 1rem .8rem; } .fold-body p { margin:.4rem 0; }
.chips { display:flex; gap:.5rem; margin-bottom:.8rem; }
.chips button[aria-checked="true"] { background:var(--sky); font-weight:700; }
/* 오늘의 운세 · 타로 · 궁합 */
.reading { max-width:52rem; margin:0 auto; font-size:1.05rem; }
.reading h3 { color:var(--focus); margin:1rem 0 .2rem; font-size:1.15rem; border-bottom:2px dotted var(--gold); padding-bottom:.2rem; }
.reading p { margin:.1rem 0; }
.daynav { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.total #total-score { font-size:2rem; font-weight:700; color:var(--focus); }
.score { display:grid; grid-template-columns:6rem minmax(6rem,14rem) 3.5rem 1fr; gap:.6rem; align-items:center; margin:.4rem 0; }
.bar { display:block; height:1rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.fill { display:block; height:100%; }
.fill.great { background:#6CC072; } .fill.good { background:var(--sky); } .fill.fair { background:#E9C766; } .fill.low { background:#B8BEC6; }
.lucky { font-weight:700; }
.lotto-box { background:var(--surface); border:2px solid var(--gold); border-radius:var(--radius); padding:.6rem 1rem; margin-top:var(--space); }
.lotto-box h3 { margin:.2rem 0 .5rem; color:var(--focus); }
.lotto { display:flex; flex-wrap:wrap; gap:.5rem; }
.ball { display:inline-flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem; border-radius:50%; font-weight:700; font-size:1.15rem; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35); box-shadow:inset 0 -3px 0 rgba(0,0,0,.15); }
.ball.b0 { background:#F2C230; } .ball.b1 { background:#5B9BE0; } .ball.b2 { background:#E9706B; } .ball.b3 { background:#9AA1AA; } .ball.b4 { background:#6CC072; }
.spreads { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.6rem; margin:.6rem 0 1rem; }
.spreads button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; border-radius:var(--radius); padding:.6rem .8rem; border-color:var(--line); }
.spreads button[aria-checked="true"] { background:var(--sky-soft); border-color:var(--gold); }
.spreads small { color:var(--muted); line-height:1.35; }
.spread-note { display:none; text-align:center; color:var(--muted); font-size:.9rem; margin:0 0 .6rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,13.5rem)); justify-content:center; gap:1rem; margin:var(--space) 0; }
.cards figure { margin:0; display:flex; flex-direction:column; align-items:center; }
.cards img { width:100%; height:auto; aspect-ratio:var(--card-ar,3/4); max-width:13.5rem; border-radius:.6rem; border:2px solid var(--gold); box-shadow:0 3px 10px rgba(0,0,0,.12); }
.cards figcaption { text-align:center; font-weight:700; margin-top:.4rem; }
.cards[data-count="1"] { grid-template-columns:minmax(12rem,18rem); } .cards[data-count="1"] img { max-width:18rem; }
.compat-score { display:flex; flex-direction:column; align-items:center; gap:.2rem; margin:var(--space) 0; }
.compat-score .pair { font-weight:700; font-size:1.15rem; }
.compat-score strong { font-size:2.6rem; color:var(--focus); line-height:1.1; }
@media (max-width:40rem) {
  body { padding:.4rem; } header,main { padding:.7rem; } header h1 { font-size:1.25rem; }
  #person, #partner { gap:.6rem; }
  #run { width:100%; }
  .manse { padding:.6rem; } .manse-grid { gap:.3rem; } .mcol { padding:.4rem .1rem; } .glyph.big b { font-size:2rem; } .god { font-size:.8rem; }
  .hidden-stems,.stage,.stars { font-size:.72rem; } .mhead { font-size:.85rem; }
  .menu { grid-template-columns:1fr 1fr; gap:.5rem; } .menu button { grid-template-columns:1fr; grid-template-rows:auto; justify-items:center; text-align:center; padding:.7rem .4rem; row-gap:.2rem; }
  .menu i { grid-row:auto; width:2.8rem; height:2.8rem; font-size:1.3rem; } .menu strong { font-size:1rem; } .menu small { font-size:.78rem; }
  .menu.compact { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.3rem; } .menu.compact i { width:1.8rem; height:1.8rem; font-size:.9rem; } .menu.compact strong { font-size:.74rem; letter-spacing:-.04em; white-space:normal; line-height:1.2; }
  [data-panel] { scroll-margin-top:9.5rem; }
  .sec { padding:.8rem .9rem; } .sec h3 { font-size:1.15rem; } .sec p { font-size:1rem; }
  .trow { grid-template-columns:3.2rem 2.6rem auto; } .ttitle { grid-column:1/-1; font-size:.92rem; }
  .daynav button { padding:.4rem .7rem; font-size:.9rem; } .daynav strong { font-size:.95rem; text-align:center; }
  .score { grid-template-columns:4.6rem 1fr 3rem; gap:.4rem; } .score .msg { grid-column:1/-1; margin-top:-.3rem; color:var(--muted); }
  /* user 10-30: the spread list must leave 카드 섞기 on the first phone screen: three name-only buttons per row, the chosen one's line below */
  .spreads { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin:.4rem 0 .3rem; }
  .spreads button { align-items:center; justify-content:center; text-align:center; padding:.5rem .25rem; min-height:2.8rem; }
  .spreads strong { font-size:.88rem; line-height:1.25; } .spreads small { display:none; }
  .spread-note { display:block; }
  [data-panel="tarot"] > .muted { margin:.3rem 0; font-size:.92rem; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; } .cards[data-count="1"] { grid-template-columns:minmax(0,16rem); }
  .ball { width:2.4rem; height:2.4rem; font-size:1rem; }
  .who { flex-wrap:nowrap; padding:.5rem .7rem; font-size:.9rem; } .who span { flex:1; min-width:0; } .who button { flex:none; padding:.35rem .7rem; font-size:.85rem; }
}
/* SAJU-DEEP-001 tarot table: face-down fan, real spread shapes, shuffle and flip (user 10-28) */
.pick-status { text-align:center; font-weight:700; color:var(--gold-deep); min-height:1.5em; margin:.6rem 0 0; }
.fan { margin:.4rem 0 1rem; overflow:hidden; transition:opacity .4s; }
.fan.gone { display:none; }
/* user 10-31 "너무 빽빽히 붙어있어서 선택하기 힘들어", "뽑을때도 배경넣고": one big wheel of cards on a night sky.
   Only its top arc shows, so the cards stand apart; drag (or the arrows) to turn it. Sizes follow the stage width (cqi). */
.fan-ring { position:relative; width:100%; max-width:34rem; aspect-ratio:2/1; margin:0 auto; container-type:inline-size; overflow:hidden;
  border:2px solid var(--gold); border-radius:var(--radius); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
  background:radial-gradient(1.5px 1.5px at 12% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 28% 42%,#fff 60%,transparent),
    radial-gradient(1.5px 1.5px at 46% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 63% 30%,#fff 60%,transparent),
    radial-gradient(1.5px 1.5px at 81% 16%,#fff 60%,transparent),radial-gradient(1px 1px at 90% 46%,#fff 60%,transparent),
    radial-gradient(1px 1px at 7% 58%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 36% 66%,#F6EBC8 60%,transparent),
    radial-gradient(ellipse at 50% 125%,#9d7fc9 0%,#4a3a86 45%,#1d2552 100%);
  --r:96cqi; --cw:15cqi; --ch:calc(var(--cw) * var(--card-hw,1.34)); }
.fan-ring.dragging { cursor:grabbing; }
.fan-ring::after { content:""; position:absolute; inset:auto 0 0; height:8cqi; background:linear-gradient(transparent,rgba(29,37,82,.85)); pointer-events:none; }
.fan-wheel { position:absolute; left:50%; top:calc(var(--r) + var(--ch) / 2 + 8cqi); width:0; height:0; transform:rotate(var(--spin,0deg)); transition:transform .3s ease-out; }
.fan-ring.dragging .fan-wheel { transition:none; }
.fan-card { position:absolute; left:0; top:0; width:var(--cw); max-width:none; height:var(--ch); margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); padding:0; border:1px solid var(--gold); border-radius:.4rem; background:var(--sky-soft); overflow:hidden;
  transform-origin:50% 50%; transform:translateY(calc(-1 * var(--r))); transition:transform .5s ease, box-shadow .2s; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.fan-turn { display:flex; justify-content:center; gap:.6rem; margin:.5rem 0 0; }
.fan-turn button { padding:.3rem 1rem; }
.fan-card img,.plain-back { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.plain-back { display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.6rem; }
.fan.spread .fan-card { transform:rotate(var(--a)) translateY(calc(-1 * var(--r))); }
.fan.spread .fan-card:hover { transform:rotate(var(--a)) translateY(calc(-1 * var(--r) - 2cqi)); box-shadow:0 0 10px 2px rgba(246,235,200,.8); }
.fan.spread .fan-card.picked { transform:rotate(var(--a)) translateY(calc(-1 * var(--r) - 6cqi)); border:2px solid var(--focus); box-shadow:0 0 0 3px var(--gold-soft); }
.fan-card.picked::after { content:attr(data-n); position:absolute; top:.2rem; left:50%; transform:translateX(-50%); background:var(--focus); color:#fff; border-radius:999px; width:1.4rem; height:1.4rem; font-size:.85rem; line-height:1.4rem; font-weight:700; }
.fan.shuffling .fan-card { animation:shuffle .25s ease-in-out 3 alternate; }
.fan.shuffling .fan-card:nth-child(even) { animation-direction:alternate-reverse; }
@keyframes shuffle { from { transform:translateY(calc(-1 * var(--r))) translateX(-1.6rem) rotate(-4deg); } to { transform:translateY(calc(-1 * var(--r))) translateX(1.6rem) rotate(4deg); } }
.board { display:grid; grid-template-columns:repeat(3,minmax(0,10rem)); justify-content:center; gap:1.4rem 1.4rem; margin:var(--space) 0; }
.board[data-spread="single"], .board[data-spread="yes_no"] { grid-template-columns:minmax(0,15rem); }
.board[data-spread="year"]:not(.compact) { grid-template-columns:repeat(4,minmax(0,8.4rem)); gap:1rem 1rem; }
.board .slot { margin:0; display:flex; flex-direction:column; align-items:center; perspective:900px; }
.flip { position:relative; width:100%; aspect-ratio:var(--card-ar,3/4); transform-style:preserve-3d; transition:transform .7s ease; }
.slot.open .flip { transform:rotateY(180deg); }
/* user 10-31 "결과보여줄때도 가벼운 액션": each card drops in, then shines once as it turns over */
.board .slot { animation:deal .55s cubic-bezier(.2,.8,.3,1.2) backwards; animation-delay:calc(var(--i,0) * 120ms); }
@keyframes deal { from { opacity:0; transform:translateY(-2.4rem) scale(.85) rotate(-6deg); } }
.slot.open .face.front { animation:shine 1s ease-out .45s; }
@keyframes shine { 0% { box-shadow:0 0 0 0 rgba(246,235,200,0); } 40% { box-shadow:0 0 18px 6px rgba(246,235,200,.95); } 100% { box-shadow:0 0 0 0 rgba(246,235,200,0); } }
.face { position:absolute; inset:0; backface-visibility:hidden; border-radius:.6rem; overflow:hidden; border:2px solid var(--gold); box-shadow:0 3px 10px rgba(0,0,0,.12); background:var(--sky-soft); }
.face img { display:block; width:100%; height:100%; object-fit:cover; }
.face.front { transform:rotateY(180deg); }
.slot.rev .face.front img { transform:rotate(180deg); }
.slot figcaption { text-align:center; font-size:.9rem; margin-top:.35rem; line-height:1.35; }
.slot figcaption { display:flex; flex-direction:column; align-items:center; gap:.15rem; word-break:keep-all; overflow-wrap:break-word; }
.slot figcaption b { color:var(--gold-deep); }
.slot figcaption .way { display:inline-block; padding:0 .5em; border-radius:999px; font-size:.82em; line-height:1.6; background:var(--sky-soft); border:1px solid var(--gold); color:var(--gold-deep); white-space:nowrap; }
.slot figcaption .way.rev { background:#fff3e6; }
.saju-card { display:flex; gap:1rem; align-items:center; max-width:52rem; margin:0 auto 1rem; background:linear-gradient(180deg,var(--sky-soft),#fff); border:2px solid var(--gold); border-radius:var(--radius); padding:1rem; }
.saju-card:empty { display:none; }
.saju-card figure { margin:0; flex:none; width:8.5rem; }
.saju-card img { display:block; width:100%; border-radius:.5rem; border:2px solid var(--gold); }
.saju-card .ask { color:var(--gold-deep); font-weight:700; } .saju-card h3 { margin:.2rem 0 .4rem; font-size:1.25rem; } .saju-card p { margin:0; }
@media (max-width:40rem) {
  .fan { margin-bottom:.4rem; }
  .pick-status { margin-top:.4rem; } .pick-guide { padding:.4rem .8rem; margin-top:.4rem; } .pick-guide strong { font-size:1rem; } .pick-guide span { display:none; } .auto-pick { margin-top:.4rem; padding:.35rem .9rem; } .fan-card.picked::after { width:1.1rem; height:1.1rem; font-size:.7rem; line-height:1.1rem; }
  .board { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; } .board[data-spread="single"], .board[data-spread="yes_no"] { grid-template-columns:minmax(0,13rem); }
  .slot figcaption { font-size:.76rem; }
  .board { gap:1.4rem .5rem; padding:1.8rem .5rem 1.2rem; scroll-margin-top:11rem; } .board .flip { width:84%; } .slot figcaption { font-size:.72rem; padding:.2rem .3rem; }
  .saju-card { flex-direction:column; text-align:center; } .saju-card figure { width:9rem; }
}
@media (prefers-reduced-motion:reduce) { .fan-card,.flip,.fan-wheel { transition:none; } .fan.shuffling .fan-card, .board .slot, .slot.open .face.front { animation:none; } }
/* User 10-28: what to think of while picking, an automatic pick, and a backdrop that suits the reading */
.pick-guide { max-width:30rem; margin:.6rem auto 0; padding:.7rem 1rem; text-align:center; background:linear-gradient(180deg,var(--sky-soft),#fff); border:2px solid var(--gold); border-radius:var(--radius); display:flex; flex-direction:column; gap:.1rem; word-break:keep-all; }
.pick-guide .ask { color:var(--gold-deep); font-weight:700; } .pick-guide strong { font-size:1.15rem; color:var(--focus); } .pick-guide span { color:var(--muted); font-size:.92rem; }
.auto-pick { display:block; margin:.6rem auto 0; font-size:.92rem; }
.auto-pick[hidden],.pick-guide[hidden] { display:none; }
.board { scroll-margin-top:7rem; padding:2.2rem 1rem 1.4rem; border:2px solid var(--gold); border-radius:var(--radius); background:var(--sky-soft); }
.board:empty { display:none; }
.board-note { grid-column:1/-1; grid-row:1; margin:0 0 .3rem; text-align:center; font-weight:700; font-size:.92rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); word-break:keep-all; }
.board .slot figcaption { background:rgba(255,255,255,.9); border-radius:.6rem; padding:.2rem .5rem; box-shadow:0 1px 4px rgba(0,0,0,.12); }
/* User 10-28: a magical night sky behind the spread (sun, moons, moon phases, a magic circle), tinted by the reading */
.board[data-mood] { --tint:#1d2552; --tint2:#2f3f86; background:var(--magic,none) center 3rem/min(46rem,100%) auto no-repeat,radial-gradient(circle at 20% 15%,rgba(255,255,255,.9) 0 1px,transparent 2px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,rgba(255,226,200,.8) 0 1px,transparent 2px) 0 0/130px 130px,radial-gradient(circle at 45% 80%,rgba(255,255,255,.6) 0 1.5px,transparent 2.5px) 0 0/170px 170px,radial-gradient(ellipse at 50% 30%,var(--tint2),var(--tint) 75%); }
.board[data-mood="fire"] { --tint:#3a1d4f; --tint2:#7a3a6a; }
.board[data-mood="water"] { --tint:#14304f; --tint2:#2a5a8a; }
.board[data-mood="air"] { --tint:#26324f; --tint2:#55648f; }
.board[data-mood="earth"] { --tint:#1d3a35; --tint2:#3f6a50; }
.board.wide { grid-template-columns:repeat(7,minmax(0,8.4rem)); gap:.8rem .9rem; }
.board.wide[data-mood] { background-position:center,0 0,0 0,0 0,center; background-size:min(40rem,90%) auto,90px 90px,130px 130px,170px 170px,auto; }
@media (max-width:40rem) { .board[data-mood] { background-position:center,0 0,0 0,0 0,center; background-size:110% auto,90px 90px,130px 130px,170px 170px,auto; } }
.board.compact { --cw:4.4rem; grid-template-columns:repeat(3,var(--cw)); grid-template-rows:auto; grid-auto-rows:calc(var(--cw) * 2 / 3 + .15rem); gap:.3rem 1.6rem; }
.board.compact .slot { position:relative; } .board.compact .flip { width:100%; }
.board.compact figcaption { display:none; }
.board.compact .slot::before { content:attr(data-n); position:absolute; z-index:2; top:-.45rem; left:-.45rem; width:1.4rem; height:1.4rem; border-radius:999px; background:var(--gold); color:#fff; font-weight:700; font-size:.8rem; line-height:1.4rem; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.board.compact .board-note { font-size:.8rem; }
.board-note .compact-only { display:none; } .board.compact .board-note .compact-only { display:inline; }
.tfold { background:#fff; border-radius:.7rem; }
.tfold > summary { cursor:pointer; list-style:none; } .tfold > summary::-webkit-details-marker { display:none; }
.tfold > summary { position:relative; padding-right:2rem; } .tfold > summary::after { content:'▾'; position:absolute; right:.7rem; top:.45rem; color:var(--gold-deep); transition:transform .2s; } .tfold[open] > summary::after { transform:rotate(180deg); }
.tfold[open] { border:2px solid var(--gold); } .tfold[open] > summary { border:0; border-bottom:1px solid var(--line); border-radius:.7rem .7rem 0 0; }
.tfold .fold-body { padding:.2rem 1rem .7rem; }

.panel-head { display:flex; align-items:center; justify-content:space-between; gap:.4rem .6rem; flex-wrap:wrap; }
.panel-head h2 { min-width:0; }
/* user 10-30: image·PDF saving is two small buttons beside the reading's title, not a big bar */
.save-bar { display:flex; align-items:center; gap:.3rem; flex:none; margin-left:auto; }
.save-bar button { padding:.25rem .65rem; font-size:.82rem; border-radius:999px; border-color:var(--gold); background:var(--surface); line-height:1.4; }
.save-bar[hidden] { display:none; }
/* user 10-28: the five elements as a picture */
.el-chart { margin:.2rem auto 1rem; max-width:24rem; text-align:center; }
.el-chart svg { display:block; width:100%; height:auto; font-family:inherit; }
.el-chart figcaption { display:flex; flex-direction:column; gap:.15rem; font-size:.88rem; color:var(--muted); word-break:keep-all; }

/* PIN-PROFILE-001: remember my info for this PIN */
.remember { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1rem; margin:.6rem 0; }
.remember button[hidden] { display:none; }
.mycode { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:.6rem; margin:.8rem 0 .2rem; }
.mycode input { width:8rem; text-align:center; letter-spacing:.2em; font-size:1.1rem; }
/* LOOKUP-FULL-001: after many misses 이어하기 asks for name + whole birth date + phone digits instead of waiting */
.mycode-full { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; flex-basis:100%; } .mycode-full[hidden] { display:none; } .mycode-full input { letter-spacing:normal; }
.code-note { text-align:center; margin:.4rem auto; max-width:30rem; padding:.6rem 1rem; border:2px solid var(--gold); border-radius:var(--radius); background:var(--gold-soft); word-break:keep-all; }
.code-note strong { font-size:1.5rem; letter-spacing:.15em; color:var(--focus); margin:0 .2rem; }
.code-note[hidden] { display:none; }
/* user 10-28: 처음하기 / 이어하기 after the PIN */
.start { text-align:center; background:var(--surface); border:2px solid var(--gold); border-radius:var(--radius); padding:1.2rem 1rem; margin:.6rem auto; max-width:30rem; }
.start-ask { font-size:1.2rem; font-weight:700; margin:0 0 .8rem; }
.start-buttons { display:flex; justify-content:center; align-items:stretch; gap:.8rem; flex-wrap:wrap; }
.start-buttons button { min-width:8rem; margin:0; padding:.8rem 1.2rem; font-size:1.1rem; line-height:1.2; font-weight:700; }
/* user 10-30: tidy on every phone width (320~430px). Nothing may poke out, squeeze into a thin column or split a word. */
header p { flex:1 1 16rem; min-width:0; }
fieldset { min-width:0; }
input,select { min-width:0; }
.mhead { white-space:nowrap; }
.score > :first-child, .daynav button, .choice label.check, .who button, .save-bar button { white-space:nowrap; }
.menu small, .menu strong, .spreads button, .who span, .trow, .score { word-break:keep-all; overflow-wrap:break-word; }
@media (max-width:40rem) {
  header { flex-direction:column; align-items:stretch; text-align:center; gap:.4rem; }
  header p { flex:none; font-size:.95rem; } #logout { align-self:center; padding:.3rem .9rem; font-size:.88rem; }
  main { padding:.6rem .5rem; }
  fieldset { margin:.6rem 0; padding:.5rem .6rem .7rem; }
  .who { flex-wrap:wrap; justify-content:center; text-align:center; } .who span { flex:1 1 100%; }
  .manse { padding:.6rem .35rem; } .manse h2 { text-align:center; margin-top:0; }
  .mcol { padding:.4rem 0; gap:.2rem; } .mhead { font-size:.82rem; letter-spacing:-.03em; }
  .mcol.me .me-tag { display:none; }
  .glyph.big { width:calc(100% - .5rem); } .glyph.big small { font-size:.62rem; white-space:nowrap; }
  .menu.compact strong { word-break:keep-all; }
  .daynav strong { flex:1; min-width:0; }
  .score { grid-template-columns:5.2rem 1fr 3rem; } .score > :first-child { letter-spacing:-.03em; }
  .sec h3, .fold summary .title, .story, .reading, .board-note, .pick-guide { word-break:keep-all; overflow-wrap:break-word; }
  .save-bar button { padding:.2rem .55rem; font-size:.78rem; }
}
/* the narrowest phones (320~380px): one field per line so nothing gets squashed */
@media (max-width:24rem) {
  .choice { gap:.6rem; }
  .menu:not(.compact) small { font-size:.74rem; }
  .menu.compact { gap:.25rem; } .menu.compact button { padding:.35rem .1rem; } .menu.compact strong { font-size:.7rem; }
  .spreads strong { font-size:.8rem; }
  .panel-head { flex-wrap:nowrap; } .panel-head h2 { font-size:1.2rem; } .save-bar { gap:.2rem; } .save-bar button { padding:.2rem .4rem; font-size:.72rem; letter-spacing:-.02em; }
  .score { grid-template-columns:4.9rem 1fr 2.8rem; }
}
/* user 10-30: no lonely last syllable on its own line anywhere. Korean words stay whole, short lines are balanced,
   long paragraphs avoid a one-word last line (browsers without text-wrap simply ignore it). */
body { word-break:keep-all; overflow-wrap:break-word; }
p, li, .fold-body p, .sec p { text-wrap:pretty; }
h1, h2, h3, legend, summary, figcaption, small, strong, .ask, .title, .menu small, .spreads small, .board-note, .pick-guide, .code-note { text-wrap:balance; }
/* user 10-31 "밑에 문구들 오른쪽 끝까지 안가는거 조정": long notes and the status bubble fill every line to the edge.
   (balance and pretty both pull lines in; keep-all above still keeps each Korean word whole.) */
.muted, #status { text-wrap:wrap; }
/* user 10-30: the phone's last four digits, typed next to the save button */
.remember label.phone4 { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem; margin:0; font-weight:700; max-width:100%; }
/* user 10-30: the '예: 5678' hint was cut off; the box now sizes to the phone and always fits its text */
.remember label.phone4 input { width:clamp(7.5rem,34vw,9rem); max-width:100%; box-sizing:border-box; padding-inline:.4rem; text-align:center; letter-spacing:.08em; font-size:clamp(1rem,4.2vw,1.1rem); }
.remember .phone4-note { flex-basis:100%; text-align:center; color:var(--muted); margin-top:-.3rem; }
/* APP-INSTALL-001: phone home-screen install button and the iPhone how-to line */
#install { background:var(--sky); font-weight:700; color:#0E3556; }
header p.install-tip { flex:1 1 100%; margin:0; font-size:.9rem; color:var(--gold-deep); background:var(--gold-soft); border-radius:.6rem; padding:.3rem .7rem; text-align:center; }
@media (max-width:24rem) { #install { align-self:center; padding:.3rem .9rem; font-size:.88rem; } }