/* ============================================================
   Guide site — layout unification (2026-08)
   ONE shared width system for every user-facing page. Loaded AFTER
   css/washington.css and /cdss-theme.css so overrides win.
   Change --guide-w here and every page follows.
   ============================================================ */
:root{
  --guide-w: 1080px;   /* single content-column width, sized for the data tables */
}

/* ---- 1) Load-jank guards (kept from the theme pass) ---------------- */
/* Never paint the page-transition spinner on a normal load; it only
   fades in if a transition really takes longer than 450 ms. */
.page-content.loading-mask{top:0;opacity:0;animation:cdssMaskIn .25s linear .45s forwards;}
.page-content.loading-mask.stop-loading{animation:none;opacity:0;}
@keyframes cdssMaskIn{to{opacity:.6;}}
/* Hide uncompiled AngularJS {{ }} templates until Angular compiles. */
[ng-cloak],[data-ng-cloak],.ng-cloak{display:none !important;}

/* ---- 2) Page shell: theme bg, centered column, footer at bottom ----
   NOTE: this site is an independent web app — NO family top bar here.
   The app's own navbar (hamburger) is the only navigation.
   2026-08 redesign: deeper page bg + crisper card for real contrast. */
:root{
  --g-ink:#0f1b2d;        /* headings */
  --g-body:#1e293b;       /* body text */
  --g-muted:#5b6b81;      /* secondary text */
  --g-primary:#1663d8;    /* links / accents */
  --g-line:#e3e9f2;       /* the ONLY divider color — no default hairlines */
  --g-card-border:#d8dfeb;
  --g-tint:#e8f0fc;       /* icon-tile tint */
}
html{background:#eef2f8;}
body.cdss-body{display:flex;flex-direction:column;min-height:100vh;margin:0;
  background:#eef2f8;color:var(--g-body);
  /* Korean line breaking: never split a word mid-syllable-block
     (owner: "중증도" was wrapping as "중증/도") */
  word-break:keep-all;overflow-wrap:break-word;}
body.cdss-body a{color:var(--g-primary);}
.cdss-footer{margin-top:auto;width:100%;box-sizing:border-box;}
/* counter washington.css `a{width:100%}` inside the shared footer */
.cdss-footer a{width:auto;}

/* ---- 3) THE unified content column ---------------------------------
   Every page's app frame (.mobile-wrapper) becomes the same centered
   card. The internal fixed navbar and jin/search input bar are pinned
   to the exact same width so edges align on every page.
   !important also defeats framework.js' inline width on mobile UAs. */
.w-section.mobile-wrapper{
  width:var(--guide-w) !important;max-width:100%;
  height:auto !important;min-height:560px;
  margin:0 auto 48px;flex:0 0 auto;background:#fff;
  border:1px solid var(--g-card-border);border-top:0;
  border-radius:0 0 14px 14px;
  box-shadow:0 8px 28px rgba(15,27,45,.10);
}
#main-stack{position:relative;width:auto;height:auto;min-height:inherit;}
.navbar{width:var(--guide-w) !important;border-bottom:1px solid var(--g-line);}
/* app navbar sits at y=0 again (no top bar), so the search input bar
   goes right below it at its original 60px offset */
.input-chat-block{top:60px;width:var(--guide-w) !important;}
.shadow-layer{box-shadow:none;}
@media (max-width:1120px){
  .w-section.mobile-wrapper{width:100% !important;border-left:0;border-right:0;border-radius:0;margin-bottom:0;}
  .navbar,.input-chat-block{width:100% !important;}
}

/* ---- 4) Typography base (GLOBAL only — page looks live in each page) */
.navbar-title{font-family:var(--cdss-font);font-weight:800;font-size:16px;color:var(--g-ink);letter-spacing:-.01em;}
.nav-menu-titles,.title-list,.title-new,.message-title,.grey-heading-title{font-family:var(--cdss-font);}
.title-new,.message-title,.grey-heading-title{color:var(--g-ink);font-weight:800;}
.title-list{font-size:14px;color:var(--g-ink);}
.description-new,.message-text{font-size:14px;line-height:1.65;color:var(--g-body);}
.highlighted{color:var(--g-muted);}
.hero-image{display:flex;align-items:center;justify-content:center;height:auto;padding:30px 0 6px;}
.hero-image div{width:100%;line-height:0;}
.hero-image img{display:block;margin:0 auto;width:400px;max-width:88%;height:auto;}
.news-container.item-new{display:block;width:100%;box-sizing:border-box;}
/* tables define the column width; anything wider scrolls INSIDE the card */
.text-new{border:0;padding:20px 26px;overflow-x:auto;}
.table-bordered{width:100%;border-collapse:collapse;font-size:13px !important;}
.table-bordered th,.table-bordered td{border:1px solid var(--g-line);padding:10px 12px;vertical-align:middle;}
.table-bordered th{background:#eef2f9;color:var(--g-ink);font-weight:700;}
.table-bordered tbody tr:nth-child(even) td{background:#f8fafc;}
.input-chat{font-size:14px;}
/* elements.html department tiles: the icons were designed for a 342px
   column; at the unified width `cover` crops them into abstract lines —
   `contain` keeps them whole at any column width. */
.group-image{background-size:contain;}

/* ---- 4b) WebP asset swap (QA 2026-08) --------------------------------
   img/ and css/ are www-data-owned, so the recompressed images live in
   /imgw/ and the washington.css background urls are overridden here.
   Originals in img/ are untouched. */
.splash-logo{background-image:url(/imgw/main.webp);}
.group-image{background-image:url(/imgw/head.webp);}
.group-image.bg1{background-image:url(/imgw/thyroid.webp);}
.group-image.bg2{background-image:url(/imgw/lung.webp);}
.group-image.bg3{background-image:url(/imgw/heart.webp);}
.group-image.bg4{background-image:url(/imgw/breast.webp);}
.group-image.bg5{background-image:url(/imgw/stomach.webp);}
.group-image.bg6{background-image:url(/imgw/kidney.webp);}
.group-image.bg7{background-image:url(/imgw/exercise.webp);}
.group-image.bg8{background-image:url(/imgw/vessel.webp);}
.group-image.bg9{background-image:url(/imgw/baby.webp);}
.group-image.bg10{background-image:url(/imgw/heart.webp);}

/* ---- 5) Shared hamburger drawer (same navbar on every page) --------
   Kill its default hairlines and give it the EXACT same menu language
   as the redesigned home list: 40px tinted icon tile + bold label +
   14px icon-text gap + soft hover. CSS-only — markup untouched. */
.nav-menu{width:320px;max-width:86%;padding:0 20px;box-shadow:8px 0 28px rgba(15,27,45,.16);}
.nav-menu-header{height:auto;padding:34px 0 20px;margin-bottom:8px;border-bottom:1px solid var(--g-line);}
.nav-menu .logo{padding-bottom:0;font-size:26px;font-weight:800;color:var(--g-ink);letter-spacing:.02em;}
.nav-menu-link{display:flex;align-items:center;height:56px;border-bottom:0;
  border-radius:12px;padding:0 10px;margin:2px -10px;transition:background .15s;}
.nav-menu-link:hover,.nav-menu-link:active{background:#f0f5fd;}
.nav-menu-link .icon-list-menu{flex:0 0 40px;float:none;width:40px;height:40px;margin-right:15px;
  border-radius:11px;background:var(--g-primary);color:#fff;
  font-size:22px;line-height:40px;text-align:center;}
.nav-menu-titles{float:none;line-height:1.35;font-size:14px;font-weight:700;color:var(--g-ink);}
.navbar-button{color:#8a97ab;}
.bar-home-icon{background-color:var(--g-ink);}