/* YEOKJU live reading · mobile-first on-screen cinematic edition.
 * DESIGN-ONLY reference: no rival reading copy, factual claims or fortune text.
 * A4 print and PNG ZIP retain the existing sepia/hanji edition.
 */
@media screen {
  #resultView{
    --yeokju-ink:#f1eadf;
    --yeokju-muted:#c1bbb7;
    --yeokju-metal:#c69d62;
    position:relative;
    min-height:100vh;
    color:var(--yeokju-ink)!important;
    background:
      radial-gradient(circle at 8% 4%,rgba(125,88,44,.13),transparent 32%),
      radial-gradient(circle at 90% 43%,rgba(56,64,107,.13),transparent 34%),
      linear-gradient(160deg,#0b0e15,#12131b 48%,#080b13)!important;
  }
  #resultView .page-head{max-width:900px;margin:0 auto;padding:clamp(26px,5vw,50px) 22px 16px!important;}
  #resultView .page-head h1{color:#f6eee1!important;text-shadow:0 3px 27px #0007;}
  #resultView .page-head p{color:#c9c4bd!important;line-height:1.8;}
  #resultView .privacy-summary,#resultView .yeokju-reading-guide{
    max-width:860px;margin:15px auto!important;
    color:#ded3c2!important;
    border:1px solid #584731!important;
    border-radius:15px!important;
    background:#171820dd!important;
    padding:18px 22px!important;
  }
  #resultView .privacy-summary strong,#resultView .yeokju-reading-guide strong{color:#f0d6aa!important;}
  #resultView .privacy-summary p,#resultView .yeokju-reading-guide p,
  #resultView .privacy-summary a{color:#c9c3bd!important;}
  #resultView #result{max-width:930px!important;}
  #resultView #result>.manseryeok-result{
    max-width:855px!important;
    background:
      radial-gradient(circle at 50% 2%,#d5a35b13,transparent 47%),
      linear-gradient(140deg,#1b1b23,#121620)!important;
    color:#f2eadc!important;
    border:1px solid #8c724b88!important;
    border-radius:20px!important;
    box-shadow:0 27px 74px #0009,inset 0 1px #e2c99c23!important;
  }
  #resultView #result>.manseryeok-result :is(h1,h2,h3,h4,strong){color:#f3e8d2!important;}
  #resultView #result>.manseryeok-result :is(p,small,span,td,th,li){color:#d4c9b6!important;}
  #resultView .yeokju-customer-reading{
    max-width:850px!important;gap:22px!important;
    margin:0 auto 62px!important;
  }
  #resultView .yeokju-customer-reading .yeokju-paper-sheet{
    min-height:0!important;
    padding:clamp(26px,4vw,60px) clamp(23px,5vw,64px) clamp(29px,5vw,59px)!important;
    border:1px solid #6e5439!important;
    border-radius:19px!important;
    background:
      radial-gradient(ellipse at 95% -6%,rgba(201,156,91,.085),transparent 42%),
      radial-gradient(ellipse at 0% 100%,rgba(61,69,112,.08),transparent 42%),
      linear-gradient(135deg,#1c1a22,#151721 58%,#141720)!important;
    color:#eae3da!important;
    box-shadow:0 17px 55px #0009,inset 0 1px #edc99417!important;
    overflow:visible;
  }
  #resultView .yeokju-customer-reading .yeokju-paper-sheet::before{
    border-color:#92754d70!important;
    inset:11px!important;
    border-radius:12px!important;
    z-index:0!important;
  }
  #resultView .yeokju-customer-reading .yeokju-paper-sheet::after{
    color:#a88b62!important;
    border-color:#80664465!important;
  }
  #resultView .yeokju-customer-reading .yeokju-story-cover{
    min-height:540px!important;
    background:
      radial-gradient(circle at 50% 48%,#dfb8761c,transparent 48%),
      radial-gradient(circle at 50% 15%,#a9904512,transparent 50%),
      linear-gradient(148deg,#201b22,#111721)!important;
    text-align:center;
  }
  #resultView .yeokju-customer-reading :is(h2,h3,h4){
    color:#f6eddc!important;
    text-wrap:balance;
  }
  #resultView .yeokju-customer-reading h2{
    font-size:clamp(30px,5.3vw,49px)!important;
    line-height:1.48!important;
    letter-spacing:-.044em!important;
  }
  #resultView .yeokju-customer-reading h3{
    font-size:clamp(24px,4.2vw,36px)!important;
    line-height:1.53!important;
  }
  #resultView .yeokju-customer-reading h4{
    color:#efd1a2!important;
    font-size:clamp(17px,2.5vw,23px)!important;
  }
  #resultView .yeokju-customer-reading .yeokju-sheet-kicker,
  #resultView .yeokju-customer-reading .yeokju-story-label{
    color:#e9b978!important;
    border-color:#967447a3!important;
    letter-spacing:.075em!important;
  }
  #resultView .yeokju-customer-reading p,
  #resultView .yeokju-customer-reading .yeokju-story-line{
    color:#ebe4dd!important;
    font-family:'Noto Sans KR',system-ui,sans-serif!important;
    font-size:clamp(16px,1.5vw,18px)!important;
    line-height:1.91!important;
    letter-spacing:-.026em!important;
    font-weight:400!important;
    overflow-wrap:break-word;
    word-break:keep-all;
  }
  #resultView .yeokju-customer-reading .yeokju-sheet-desc,
  #resultView .yeokju-customer-reading .yeokju-cover-desc,
  #resultView .yeokju-customer-reading .yeokju-cover-subtitle{
    color:#cfc2ae!important;
    border-color:#6e553876!important;
  }
  #resultView .yeokju-customer-reading .yeokju-report-seal{
    border-color:#bd9660!important;
    color:#f0bd77!important;
    box-shadow:inset 0 0 0 6px #24202a,inset 0 0 0 8px #9d794c!important;
  }
  #resultView .yeokju-customer-reading .yeokju-story-year-output,
  #resultView .yeokju-customer-reading select{
    background:#252530!important;color:#f7ebdf!important;
    border-color:#8b6e4d!important;
    border-radius:10px!important;
  }
  #resultView .yeokju-customer-reading .yeokju-year-mini,
  #resultView .yeokju-customer-reading .yeokju-era,
  #resultView .yeokju-customer-reading .yeokju-story-disclaimer{
    border-color:#7c62447d!important;
  }
  #resultView .yeokju-customer-reading .yeokju-story-disclaimer{
    color:#b9b1a7!important;font-size:12px!important;
  }
  #resultView .yeokju-customer-reading .yeokju-story-chapter .yeokju-story-line,
  #resultView .yeokju-customer-reading .yeokju-chapter-sheet .yeokju-story-line{
    border-color:#70563855!important;
  }
  /* 11 topic cards: visible in two columns only when there is room;
     expanded content takes full width and leads directly into the real reading. */
  #resultView .topic-explorer{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:13px;row-gap:13px;
    max-width:900px!important;
    padding:clamp(19px,4vw,38px)!important;
    margin:36px auto!important;
    background:linear-gradient(150deg,#10151e,#171821)!important;
    border:1px solid #756145!important;
    border-radius:20px!important;
    box-shadow:0 24px 67px #0008!important;
  }
  #resultView .topic-explorer-head,
  #resultView .topic-explorer-actions{grid-column:1/-1;}
  #resultView .topic-explorer h2{color:#f3e7d4!important;}
  #resultView .topic-explorer-head p{color:#c4beb8!important;}
  #resultView .topic-explorer-actions button{
    color:#f0d7b0!important;
    border:1px solid #866b47!important;
    background:#23222b!important;
    border-radius:999px!important;
    min-height:42px;
  }
  #resultView .topic-chapter{
    min-width:0;min-height:136px;
    background:linear-gradient(145deg,#27242e,#1c1e28 82%)!important;
    border:1px solid #725b42!important;
    border-radius:14px!important;
    overflow:hidden;
    padding:15px!important;
    box-shadow:inset 0 1px #dfc19113!important;
  }
  #resultView .topic-chapter[open]{
    grid-column:1/-1;
    background:linear-gradient(160deg,#28232d,#191d29)!important;
    border-color:#b49462!important;
  }
  #resultView .topic-chapter>summary{
    display:grid;grid-template-columns:1fr auto;
    grid-template-rows:auto 1fr;
    gap:9px!important;align-items:start;
    min-height:82px;padding:0!important;color:#fff5e7!important;
  }
  #resultView .topic-chapter-num{
    font:600 15px/1 Georgia,serif;color:#d0a371!important;
    letter-spacing:.1em;
  }
  #resultView .topic-chapter>summary strong{
    grid-column:1/-1;grid-row:2;
    font-size:clamp(15px,2.2vw,20px)!important;
    line-height:1.5!important;
    font-weight:680!important;color:#f8f0e6!important;
  }
  #resultView .topic-chapter>summary small{
    grid-column:2;grid-row:1;
    color:#a9a4a1!important;
    font-size:11px!important;
    white-space:nowrap!important;
    margin:0!important;
  }
  #resultView .topic-chapter>summary:after{
    content:none!important;
  }
  #resultView .topic-criterion{
    color:#b5aea7!important;line-height:1.65!important;
    font-size:12px!important;margin:12px 0 0!important;
  }
  #resultView .topic-chapter[open] .topic-criterion{padding-bottom:15px;border-bottom:1px solid #8b705144;}
  #resultView .topic-sub{margin:0!important;padding:0 3px;border-color:#65534080!important;}
  #resultView .topic-sub>summary{
    padding:17px 6px!important;
    color:#efdfc6!important;
    font-weight:560!important;
    font-size:clamp(14px,2.2vw,17px)!important;
  }
  #resultView .topic-sub>summary:focus-visible,
  #resultView .topic-chapter>summary:focus-visible{outline:2px solid #f4cb88;outline-offset:3px;border-radius:5px}
  #resultView .topic-sub-content{
    padding:15px 16px 24px!important;
    background:#161923;border-radius:12px;
    color:#e8dfd5!important;
    line-height:1.9!important;
  }
  #resultView .topic-sub-content p,
  #resultView .topic-detail-reading,
  #resultView .topic-grounded-part p,
  #resultView .topic-detail-list li{
    color:#e8dfd5!important;
    font-size:15px!important;line-height:1.95!important;
    word-break:keep-all;
  }
  #resultView .topic-grounded-part{border-color:#c3a16c!important;}
  #resultView .topic-grounded-part h4{
    color:#f0c990!important;font-size:15px!important;
  }
  #resultView .topic-detail-level{
    background:#22242e!important;color:#eee0c8!important;
    border-color:#68553c!important;
    border-radius:10px!important;
    padding:14px 17px!important;
  }
  #resultView .topic-detail-level summary{color:#e4cba5!important;}
  #resultView .topic-detail-note,
  #resultView .topic-sub-content small{color:#bdb5aa!important;}
  #resultView .result-actions{
    max-width:900px;margin:32px auto 0;
    padding:24px 18px!important;
    border-top:1px solid #5c4d37;
  }
  #resultView .result-actions :is(button,a){min-height:44px;}
  #resultView .report-image-status{color:#c5baaa!important;}
  @media(max-width:640px){
    #resultView{padding-inline:0!important}
    #resultView .yeokju-customer-reading{gap:14px!important;padding:0 12px!important;}
    #resultView .yeokju-customer-reading .yeokju-paper-sheet{
      min-height:0!important;padding:35px 25px 38px!important;
      border-radius:15px!important;
    }
    #resultView .yeokju-customer-reading .yeokju-story-cover{
      min-height:400px!important;padding:39px 25px!important;
    }
    #resultView .yeokju-customer-reading .yeokju-story-cover h2{font-size:clamp(29px,7vw,37px)!important;}
    #resultView .yeokju-customer-reading p,
    #resultView .yeokju-customer-reading .yeokju-story-line{font-size:16px!important;line-height:1.83!important;}
    #resultView .topic-explorer{margin:20px 12px!important;padding:17px 13px!important;gap:10px;}
    #resultView .topic-chapter{padding:12px!important;min-height:133px;}
    #resultView .topic-chapter>summary strong{font-size:14px!important;}
    #resultView .topic-chapter>summary small{font-size:10px!important;}
    #resultView .topic-sub-content{padding:12px!important;}
  }
  @media(max-width:350px){
    #resultView .topic-explorer{grid-template-columns:1fr;}
    #resultView .topic-chapter{min-height:110px;}
  }
  @media(prefers-reduced-motion:no-preference){
    #resultView .yeokju-customer-reading .yeokju-paper-sheet{
      animation:yeokju-chapter-arrive .46s cubic-bezier(.2,.6,.3,1) both;
    }
    #resultView .topic-chapter{
      transition:background .18s ease,border-color .18s ease,transform .18s ease;
    }
    #resultView .topic-chapter:not([open]):hover{
      transform:translateY(-2px);border-color:#cda774!important;
    }
  }
  @keyframes yeokju-chapter-arrive{
    from{opacity:.82;transform:translateY(9px)}to{opacity:1;transform:none}
  }
}

@media screen{
 #resultView .yeokju-customer-reading .yeokju-free-pillars{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;margin:26px 0 39px;
 }
 #resultView .yeokju-free-pillar{
  display:grid;gap:7px;justify-items:center;
  background:linear-gradient(145deg,#231f29,#161821);
  border:1px solid #8c704977;border-radius:12px;
  padding:clamp(12px,2vw,21px) 4px;box-shadow:inset 0 1px #d9b88d16;
 }
 #resultView .yeokju-free-pillar small{
  color:#bca686;font-size:11px;letter-spacing:.12em;
 }
 #resultView .yeokju-free-pillar strong{
  font:650 clamp(22px,5vw,35px)/1.3 'Noto Serif KR',serif;color:#f2d4a4;
 }
 #resultView .yeokju-free-opening .yeokju-story-line{
  margin:0 0 30px!important;
  color:#efe8dd!important;
  font-size:clamp(16px,1.8vw,18px)!important;
  line-height:2.04!important;
 }
 #resultView .yeokju-free-opening .yeokju-story-line strong{
  font-weight:780;color:#f0bcb2!important;
 }
 #resultView .yeokju-free-opening .yeokju-story-label{color:#bb8d82!important}
 #resultView .yeokju-free-opening{border-color:#9f785278!important}
 @media(max-width:600px){
  #resultView .yeokju-free-pillars{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #resultView .yeokju-free-opening .yeokju-story-line{font-size:16px!important;line-height:1.92!important}
 }
}