/* Jungwoljae site cohesion v19
   Unifies header, hero, content width, spacing and card rhythm across the site.
   Loaded last from app.js so page-specific visuals remain intact while geometry is consistent. */

:root{
  --jw-shell:1280px;
  --jw-reading:1120px;
  --jw-gutter:64px;
  --jw-gutter-mobile:24px;
  --jw-radius-hero:18px;
  --jw-radius-card:16px;
  --jw-line:#e8dfdb;
  --jw-brand:#543a3a;
  --jw-ink:#2b2524;
  --jw-muted:#786f6c;
  --jw-section:64px;
}

/* ---------- Global alignment ---------- */
.container,.wide-container{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
  max-width:var(--jw-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

main{overflow-x:clip}

/* ---------- Desktop header: one coherent row ---------- */
@media(min-width:1280px){
  .site-header{border-bottom:1px solid var(--jw-line)!important;background:rgba(255,255,255,.98)!important;box-shadow:none!important}
  .header-inner{
    display:flex!important;
    width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
    max-width:var(--jw-shell)!important;
    min-height:82px!important;
    height:82px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    padding:0!important;
  }
  .brand{
    display:flex!important;
    flex:0 0 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:auto!important;
    margin:0 22px 0 0!important;
  }
  .brand-logo{width:34px!important;height:34px!important}
  .brand-name{display:none!important}
  .desktop-nav{
    display:flex!important;
    flex:1 1 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:auto!important;
    justify-content:center!important;
    align-items:center!important;
    gap:17px!important;
    min-width:0!important;
    margin:0!important;
  }
  .desktop-nav a{
    flex:0 0 auto!important;
    color:#6f6663!important;
    font-size:12.5px!important;
    line-height:20px!important;
    font-weight:500!important;
    white-space:nowrap!important;
  }
  .desktop-nav a[aria-current="page"]{color:var(--jw-brand)!important;font-weight:700!important}
  .header-cta,.auth-login-link,.auth-logout-button{
    flex:0 0 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:auto!important;
    min-height:38px!important;
    height:38px!important;
    padding:0 14px!important;
    border:1px solid #ded3cf!important;
    border-radius:9px!important;
    background:#fff!important;
    color:var(--jw-brand)!important;
    font-size:11px!important;
    line-height:36px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  .header-cta{border-color:var(--jw-brand)!important;background:var(--jw-brand)!important;color:#fff!important}
  .auth-logout-button{margin-left:0!important;cursor:pointer!important}
  .menu-button{display:none!important}
}

/* ---------- Main image heroes ---------- */
.home-image-hero,
.sub-hero,
.guide-image-hero,
.talisman-image-hero,
.quick-hero{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
  max-width:var(--jw-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:var(--jw-radius-hero)!important;
}

.home-image-hero{margin-top:24px!important;min-height:500px!important}
.home-image-hero-inner{min-height:500px!important;padding:50px!important}
.sub-hero{margin-top:24px!important}
.guide-image-hero,.talisman-image-hero,.quick-hero{margin-top:24px!important;margin-bottom:54px!important}

/* ---------- Homepage rhythm ---------- */
.home-services{
  width:100%!important;
  margin-top:56px!important;
}
.home-services>.container{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
  max-width:var(--jw-shell)!important;
}
.home-services .section-head{margin-bottom:22px!important}
.home-services .section-head h2{margin-top:0!important}
.home-services .section-head>p:last-child{max-width:720px!important;margin-top:8px!important}
.service-visual-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.service-visual-card{min-height:300px!important;border-radius:var(--jw-radius-card)!important}
.home-about-banner{margin-top:64px!important}
.home-about-banner>.container{width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important}

/* ---------- Standard service/input pages ---------- */
.page-section{
  margin:54px 0 80px!important;
  padding:0!important;
}
.page-section>.container,
.page-section>.container.page-layout{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
  max-width:var(--jw-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.page-layout{gap:48px!important;align-items:start!important}
.page-copy{padding-top:8px!important}
.service-form-wrap{width:100%!important;max-width:700px!important}
.reading-form,.service-form-wrap .reading-form{border-radius:var(--jw-radius-card)!important}

/* Custom guide page follows the same hero/content axis. */
.guide-shell>.container,
.guide-layout{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
  max-width:var(--jw-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.guide-shell{padding-top:0!important}
.guide-layout{gap:34px!important}
.guide-copy,.guide-form{border-radius:var(--jw-radius-card)!important}

/* ---------- Reviews, archive, auth, mypage ---------- */
.review-page-hero>.container,
.review-page>.container,
.archive-main>.container,
.mypage-main>.container,
.auth-page>.container,
.signup-main>.container{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-shell))!important;
  max-width:var(--jw-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.review-page-hero{padding:54px 0 34px!important}
.review-page{padding:52px 0 80px!important}
.archive-main,.mypage-main,.auth-page,.signup-main{padding-top:52px!important;padding-bottom:80px!important}

/* ---------- Result pages: deliberately narrower, but consistent ---------- */
.saju-container,
.result-container,
.fortune-result-container,
.relationship-result-container,
.work-result-container,
.work-money-result-container,
.guide-result-container,
.compatibility-result-container{
  width:min(calc(100% - var(--jw-gutter)),var(--jw-reading))!important;
  max-width:var(--jw-reading)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.saju-result-main,.result-main,.fortune-result-main,.relationship-result-main,.work-result-main,.work-money-result-main,.guide-result-main{
  padding-top:28px!important;
  padding-bottom:84px!important;
}
.saju-report,.report-section,.fortune-report,.relationship-report,.work-report,.work-money-report,.guide-report{
  margin-bottom:16px!important;
  border-radius:var(--jw-radius-card)!important;
}

/* ---------- Section language / hierarchy ---------- */
.section-head,.section-title-row,.section-heading-row{align-items:end!important}
.section-label,.eyebrow,[class*="-label"],[class*="-kicker"]{letter-spacing:.01em!important}

/* ---------- Tablet ---------- */
@media(max-width:1100px){
  .service-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-layout{gap:36px!important}
}

/* ---------- Mobile ---------- */
@media(max-width:767px){
  :root{--jw-gutter:var(--jw-gutter-mobile);--jw-section:48px}
  .container,.wide-container{width:calc(100% - var(--jw-gutter-mobile))!important}
  .home-image-hero,.sub-hero,.guide-image-hero,.talisman-image-hero,.quick-hero{
    width:calc(100% - var(--jw-gutter-mobile))!important;
    border-radius:16px!important;
  }
  .home-image-hero{margin-top:12px!important;min-height:min(520px,70svh)!important}
  .home-image-hero-inner{min-height:min(520px,70svh)!important;padding:28px 20px 24px!important}
  .home-services{margin-top:42px!important}
  .home-services>.container,.home-about-banner>.container,
  .page-section>.container,.page-section>.container.page-layout,
  .guide-shell>.container,.guide-layout,
  .review-page-hero>.container,.review-page>.container,
  .archive-main>.container,.mypage-main>.container,.auth-page>.container,.signup-main>.container{
    width:calc(100% - var(--jw-gutter-mobile))!important;
  }
  .service-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .service-visual-card{min-height:198px!important;padding:15px!important}
  .home-about-banner{margin-top:48px!important}
  .page-section{margin:40px 0 64px!important}
  .page-layout{grid-template-columns:1fr!important;gap:28px!important}
  .service-form-wrap{max-width:none!important}
  .guide-image-hero,.talisman-image-hero,.quick-hero{margin-top:12px!important;margin-bottom:32px!important}
  .guide-layout{grid-template-columns:1fr!important;gap:18px!important}
  .saju-container,.result-container,.fortune-result-container,.relationship-result-container,.work-result-container,.work-money-result-container,.guide-result-container,.compatibility-result-container{
    width:calc(100% - var(--jw-gutter-mobile))!important;
    max-width:none!important;
  }
  .saju-result-main,.result-main,.fortune-result-main,.relationship-result-main,.work-result-main,.work-money-result-main,.guide-result-main{padding-top:14px!important;padding-bottom:64px!important}
  .saju-report,.report-section,.fortune-report,.relationship-report,.work-report,.work-money-report,.guide-report{margin-bottom:10px!important;border-radius:15px!important}
}

@media(max-width:390px){
  .service-visual-grid{grid-template-columns:1fr!important}
  .service-visual-card{min-height:210px!important}
}