/* ============================================================
   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);}

/* ---- 6) App header v2 (2026-09) --------------------------------------
   The Webflow template centres .w-container at max-width:940px inside
   the 1080px navbar, so the hamburger sat 70px in and the absolutely-
   positioned title was centred on the wrong box (visibly off-centre).
   Now: full-width container, hamburger pinned left, brand beside it,
   title truly centred on the card, header actions (fullscreen) right.
   guide-app.js injects .gd-brand and moves #gd-fs-btn into .gd-actions. */
.navbar{padding-top:0;height:60px;background:#fff;border-bottom:1px solid var(--g-line);}
/* no backdrop-filter here: it would make .navbar the containing block of
   the position:fixed .wrapper-mask and clip the menu backdrop to the bar */
.wrapper-mask{top:0;left:0;margin-top:0;}
.navbar>.w-container{position:relative;max-width:none;height:60px;margin:0;}
.navbar-title{position:absolute;top:0;left:170px;right:170px;width:auto;height:60px;margin:0;
  line-height:60px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--g-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
.navbar-en{display:none;}
#menu-button.navbar-button{position:absolute;left:14px;top:10px;float:none;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  line-height:normal;cursor:pointer;transition:background .15s;}
#menu-button.navbar-button:hover{background:#f0f5fd;}
#menu-button .navbar-button-icon.home-icon{display:flex;flex-direction:column;gap:4px;
  width:18px;height:auto;margin:0;}
#menu-button .bar-home-icon{height:2px;margin:0;border-radius:2px;background:var(--g-ink);}
#menu-button .bar-home-icon:nth-child(2){width:72%;}
.gd-brand{position:absolute;left:62px;top:0;height:60px;display:flex;align-items:center;gap:8px;
  font-family:var(--cdss-font);font-weight:800;font-size:16px;letter-spacing:0;color:var(--g-ink) !important;
  text-decoration:none;width:auto !important;}
.gd-brand svg{width:26px;height:26px;flex:none;display:block;}
.gd-brand i{font-style:normal;color:var(--cdss-accent,#0ea5a4);}
.gd-actions{position:absolute;right:14px;top:10px;display:flex;gap:6px;}
#gd-fs-btn.gd-in-header{position:static !important;width:40px !important;height:40px !important;
  border:0 !important;box-shadow:none !important;background:transparent !important;
  color:#5b6b81 !important;font-size:17px !important;border-radius:10px !important;}
#gd-fs-btn.gd-in-header:hover{background:#f0f5fd !important;color:var(--g-ink) !important;}
@media (max-width:640px){
  .gd-brand span{display:none;}
  .navbar-title{left:100px;right:100px;font-size:15.5px;}
}