/* 사이트 공통 헤더 메뉴 + 위/아래 이동 버튼
 *
 * 모든 페이지가 함께 씁니다. index.html과 privacy.html은 common.css를
 * 읽지 않고 각자 스타일을 품고 있어서, 색은 전부 var(...) 뒤에 기본값을
 * 적어 어느 페이지에서도 같게 나오도록 했습니다.
 *
 * z-index — 헤더 20(공통)/40(랜딩) 위, 모달 60(뉴트리 밸런스)/100(공통)
 * 아래인 50에 둡니다. 모달이 뜨면 버튼이 그 뒤로 들어갑니다.
 */

/* ── 헤더 ─────────────────────────────────────────────── */

/* 로고를 누르면 홈으로. 글자색·서체는 기존 .brand 그대로 둡니다. */
.wl-brand{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.wl-brand:hover{opacity:.72;}
.wl-brand:focus-visible{outline:2px solid var(--teal-soft, #7FA593); outline-offset:3px; border-radius:6px;}
.wl-brand .wl-mark{width:22px; height:22px; flex:none;}

/* 두 갈래 메뉴 */
.wl-nav{display:flex; align-items:center; gap:4px;}
.wl-nav a{
  display:inline-block; padding:7px 12px; border-radius:999px;
  font-size:13px; font-weight:600; text-decoration:none;
  color:var(--teal, #1B4B43); border:1px solid var(--line, rgba(30,42,34,0.14));
  background:transparent; white-space:nowrap; line-height:1.4;
  transition:background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.wl-nav a:hover{background:var(--panel, #F0F2EA); border-color:var(--teal-soft, #7FA593);}
.wl-nav a:focus-visible{outline:2px solid var(--teal-soft, #7FA593); outline-offset:2px;}
/* 지금 보고 있는 곳 */
.wl-nav a[aria-current]{background:var(--teal, #1B4B43); border-color:var(--teal, #1B4B43); color:var(--paper, #FAF9F5);}

/* 헤더가 좁아지면 메뉴를 아랫줄로 내립니다 — 로고와 언어 버튼이 먼저입니다. */
.headbar, .report-toolbar{flex-wrap:wrap; row-gap:10px;}
@media (max-width:600px){
  .wl-nav{order:9; width:100%; justify-content:center;}
  .wl-nav a{flex:1 1 0; text-align:center; padding:8px 6px; font-size:12.5px;}
  /* 헤더가 화면 위에 붙어 있는데 줄이 늘었습니다. 위아래를 조금 줄여
     본문이 보이는 높이를 벌어 둡니다. */
  .headbar, .report-toolbar{padding-top:11px; padding-bottom:11px; row-gap:8px;}
}

/* ── 위/아래 이동 버튼 ────────────────────────────────── */

.wl-fab{
  position:fixed; right:16px; bottom:16px; z-index:50;
  display:flex; flex-direction:column; gap:8px;
}
.wl-fab button{
  width:44px; height:44px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line, rgba(30,42,34,0.14));
  background:rgba(250,249,245,0.94); color:var(--teal, #1B4B43);
  box-shadow:0 2px 10px rgba(30,42,34,0.13);
  cursor:pointer; font-family:inherit;
  transition:opacity .2s ease, background .15s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.wl-fab button:hover:not([disabled]){background:var(--paper, #FAF9F5); transform:translateY(-1px);}
.wl-fab button:focus-visible{outline:2px solid var(--teal-soft, #7FA593); outline-offset:2px;}
.wl-fab button svg{width:19px; height:19px;}
/* 끝에 닿으면 흐리게 — 사라지지 않고 자리를 지킵니다. 버튼이 없어졌다
   생겼다 하면 어디를 눌러야 할지 매번 다시 찾아야 합니다.
   단추 전체를 반투명하게 만들면 뒤 글자가 비쳐 얼룩처럼 보입니다.
   바탕은 그대로 두고 화살표 색만 연하게 합니다. */
.wl-fab button[disabled]{
  cursor:default; color:#A7B2A8;
  border-color:rgba(30,42,34,0.09);
  box-shadow:0 1px 4px rgba(30,42,34,0.07);
}

@media (max-width:600px){
  .wl-fab{right:12px; bottom:12px; gap:6px;}
  .wl-fab button{width:40px; height:40px;}
}

/* ── 사업자 정보(모든 페이지 맨 아래, site-nav.js가 붙임) ──
   색·크기는 랜딩 footer(.foot-row 12.5px #7A867B, 제휴 고지 11px #8A968B)에 맞춥니다.
   오른쪽 아래 위/아래 버튼(.wl-fab)이 글자를 덮지 않도록, 버튼이 본문 폭
   안쪽까지 들어오는 화면에서는 오른쪽을 비워 둡니다. */
.wl-biz-foot{margin-top:40px; border-top:1px solid var(--line, rgba(30,42,34,0.14));}
/* 폭·좌우 여백은 각 페이지의 .wrap 을 그대로 씁니다 — 본문과 같은 줄에 맞춥니다. */
.wl-biz-foot .wl-biz-in{padding-top:18px; padding-bottom:28px;}
.wl-biz-links{margin:0 0 6px; font-size:12.5px; line-height:1.6; color:#7A867B;}
.wl-biz-links a{color:inherit;}
.wl-biz-links .wl-li{white-space:nowrap;}
/* 일본어판 법적 페이지 링크 — 일본어로 볼 때만(2026-09-17 H71 Q5) */
.wl-only-ja{display:none;}
.wl-only-en{display:none;}
body.lang-en .wl-only-en{display:inline;}
body.lang-en .wl-not-en{display:none;}   /* 영어판 법적 페이지(H74) */
body.lang-ja .wl-only-ja{display:inline;}
body.lang-ja .wl-not-ja{display:none;}   /* 링크 이름이 중간에서 안 끊기게(375px 에서 「환／불정책」이던 것) */
.wl-biz-links .wl-li + .wl-li::before{content:"· ";}   /* 앞 띄어쓰기는 항목 사이 실제 빈칸(site-nav.js) — 줄바꿈 자리 */
/* 영어판은 처음엔 무료(2026-09-17 사람 결정 E3) — 가격 안내 · 환불정책 링크를 숨김.
   일본어판도 처음엔 무료라 같게(2026-09-24 JE04 — 두 쪽은 한국어 전용 · 유료는 한국어판만) */
body.lang-en .wl-biz-links .wl-li[data-page="pricing.html"], body.lang-en .wl-biz-links .wl-li[data-page="refund.html"],
body.lang-ja .wl-biz-links .wl-li[data-page="pricing.html"], body.lang-ja .wl-biz-links .wl-li[data-page="refund.html"]{display:none;}
.wl-biz{margin:0; font-size:11px; line-height:1.8; color:#8A968B;}
.wl-biz-item{display:inline-block; margin-right:10px;}
/* 한국어 화면에서만 보이는 푸터 항목(2026-09-22 사람 결정 — 일본어·영어 푸터에는 상호·문의만).
   통신판매업 신고번호(H08)도 번호가 나오면 같은 class 로 붙습니다. 법적 페이지 본문의
   사업자 정보는 그대로입니다(privacy-ja 등 — 일본 개인정보보호법). */
body.lang-ja .wl-only-ko, body.lang-en .wl-only-ko{display:none;}
.wl-biz-k{font-weight:600;}
.wl-biz a{color:inherit;}
footer .wl-biz-wrap{padding-bottom:20px;}
@media (max-width:1180px){
  .wl-biz-foot .wl-biz-in, footer .wl-biz-wrap{padding-right:72px;}
}

/* 인쇄물(리포트 PDF·뉴트리 밸런스 결과지)에는 나오면 안 됩니다. */
@media print{
  .wl-fab{display:none !important;}
  .wl-nav{display:none !important;}
  .wl-biz-foot{display:none !important;}
}

/* 움직임을 줄여 달라고 설정한 분에게는 부드러운 스크롤을 쓰지 않습니다.
   실제 이동은 site-nav.js가 이 설정을 읽어 behavior를 정합니다. */
@media (prefers-reduced-motion:reduce){
  .wl-fab button{transition:none;}
}

/* ══════════════════════════════════════════════════════════════
   랜딩 개편 — 큰 카테고리 버튼 2개 + 펼침 패널 + 국기 언어 선택
   ══════════════════════════════════════════════════════════════ */

/* ── 카테고리 진입점 — 로고 바로 아래 맨 위 띠 ────────── */
/* 사이트에 들어와서 처음 만나는 갈림길입니다. 히어로 글보다 위에 두고,
   화면 너비를 좌우로 나눠 씁니다. 같은 메뉴를 헤더에 또 두지 않습니다. */
.wl-cathero{
  background:var(--paper, #FAF9F5);
  border-bottom:1px solid var(--line, rgba(30,42,34,0.14));
  padding:18px 0 20px;
}
.wl-bigcat{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
/* 일본어 · 영어판은 처음엔 뉴트리 밸런스를 내놓지 않습니다(2026-09-17 사람 결정 N1 · N2 — 리포트 · 큐레이션만).
   랜딩 큰 버튼 · 펼침 패널 · 모든 페이지 머리 메뉴의 입구를 숨기고, 남는 큰 버튼 하나는 한 줄 전체로.
   #nb 로 들어오거나 한국어에서 펼친 채 언어를 바꾸면 site-nav.js 가 부위별 패널을 펼칩니다. */
body.lang-ja .wl-bigcat, body.lang-en .wl-bigcat{grid-template-columns:1fr;}
body.lang-ja .wl-bigcat button[data-panel="nb"], body.lang-en .wl-bigcat button[data-panel="nb"],
body.lang-ja .wl-stage > #nb.wl-cat-panel, body.lang-en .wl-stage > #nb.wl-cat-panel,
body.lang-ja .wl-nav a[href*="#nb"], body.lang-en .wl-nav a[href*="#nb"]{display:none !important;}
.wl-bigcat button{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:26px 28px; border-radius:16px; cursor:pointer; text-align:left;
  border:1.5px solid var(--line, rgba(30,42,34,0.14));
  background:#fff; color:var(--ink, #1E2A22);
  font-family:inherit; line-height:1.45; width:100%;
  box-shadow:0 1px 3px rgba(30,42,34,0.05);
  transition:border-color .15s ease, background .15s ease,
             transform .12s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.wl-bigcat button:hover{
  border-color:var(--teal-soft, #7FA593); transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(30,42,34,0.10);
}
.wl-bigcat button:focus-visible{outline:2px solid var(--teal-soft, #7FA593); outline-offset:3px;}
.wl-bigcat .t{
  display:flex; align-items:center; gap:10px; width:100%;
  font-size:21px; font-weight:700; color:var(--teal, #1B4B43);
  letter-spacing:-0.01em;
}
.wl-bigcat .d{font-size:14px; color:#5A6A5C;}
/* 펼쳐져 있는 쪽 */
.wl-bigcat button[aria-expanded="true"]{
  background:var(--teal, #1B4B43); border-color:var(--teal, #1B4B43);
  box-shadow:0 4px 14px rgba(27,75,67,0.22);
}
.wl-bigcat button[aria-expanded="true"] .t{color:var(--paper, #FAF9F5);}
.wl-bigcat button[aria-expanded="true"] .d{color:rgba(250,249,245,.84);}
/* 아래를 가리키는 화살표 — 펼쳐지면 뒤집힙니다 */
.wl-bigcat .chev{margin-left:auto; width:20px; height:20px; flex:none; transition:transform .2s ease;}
.wl-bigcat button[aria-expanded="true"] .chev{transform:rotate(180deg);}

@media (max-width:760px){
  .wl-cathero{padding:14px 0 16px;}
  .wl-bigcat{grid-template-columns:1fr; gap:10px;}
  .wl-bigcat button{padding:18px 20px; border-radius:14px;}
  .wl-bigcat .t{font-size:18px;}
  .wl-bigcat .d{font-size:13px;}
}

/* 히어로에 남는 보조 링크 */
.wl-subcta{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.wl-subcta a{font-size:13.5px; font-weight:600; color:var(--teal, #1B4B43); text-decoration:none; border-bottom:1px solid rgba(27,75,67,.3); padding-bottom:1px;}
.wl-subcta a:hover{border-bottom-color:var(--teal, #1B4B43);}

/* ── 고정 영역 ────────────────────────────────────────── */
/* 버튼을 눌러도 페이지가 밀리지 않아야 합니다. 두 패널을 같은 격자 칸에
   겹쳐 두고, 보이는 것만 바꿉니다. 숨긴 쪽도 자리를 차지하므로 칸 높이는
   둘 중 큰 쪽으로 고정되고, 아래 히어로와 나머지 섹션은 전환 때 한 픽셀도
   움직이지 않습니다.

   display:none 이 아니라 visibility:hidden 을 씁니다 — 자리를 지켜야
   높이가 고정되고, visibility 는 탭 이동에서도 빠집니다. */
.wl-stage{
  display:grid;
  background:var(--panel, #F0F2EA);
  border-top:1px solid var(--line, rgba(30,42,34,0.14));
  border-bottom:1px solid var(--line, rgba(30,42,34,0.14));
}
.wl-stage > .wl-cat-panel{
  grid-area:1 / 1;
  visibility:hidden; opacity:0;
  transition:opacity .22s ease;
}
.wl-stage > .wl-cat-panel.is-open{visibility:visible; opacity:1;}
@media (prefers-reduced-motion:reduce){
  .wl-stage > .wl-cat-panel{transition:none;}
}
/* 인쇄에는 지금 보이는 쪽만 나갑니다 — 겹쳐 둔 나머지가 빈 장으로
   찍히지 않도록 자리째 뺍니다. */
@media print{
  .wl-stage > .wl-cat-panel{display:none;}
  .wl-stage > .wl-cat-panel.is-open{display:block; visibility:visible; opacity:1;}
}
/* 좁은 화면(760px 이하)에서는 겹쳐 두지 않습니다.
   겹쳐 두면 칸 높이가 두 패널 중 큰 쪽으로 고정되는데, 한국어는 뉴트리
   밸런스 패널이 부위별 패널보다 훨씬 커서 부위별을 볼 때 아래가 크게
   빕니다 — 600px 에서 645px (2026-09-15 wellutin.com 계측). 부위 목록이
   사라지는 561px 부터 부위별 패널이 470px 가량 짧아져 차이가 가장 큽니다.
   전환할 때 높이가 바뀌어 화면이 한 번 움직이지만, 휴대폰은 어차피
   전환하면 스크롤 위치가 바뀌므로 그 편이 낫습니다.
   데스크톱은 그대로 겹쳐 둡니다(1280px 에서 414px 빈칸은 따로 기록). */
@media (max-width:760px){
  .wl-stage > .wl-cat-panel{display:none;}
  .wl-stage > .wl-cat-panel.is-open{display:block;}
}

/* ── 국기 언어 선택 ───────────────────────────────────── */
/* 국기 이모지(🇰🇷 등)는 윈도우에서 그려지지 않고 KR·JP·US 글자로 나옵니다.
   글꼴에 기대지 않도록 SVG 로 그립니다. */
.wl-flag{width:20px; height:14px; flex:none; border-radius:2px; display:block;}
.langsw button{display:inline-flex; align-items:center; gap:7px;}
/* 한국어 전용 배포 묶음 — lang-router.js 가 공개 언어가 하나일 때 붙이는 클래스.
   display:none 으로 빼면 헤더 높이가 82→71px 로 줄어 데스크톱 배치가 바뀌므로,
   자리는 두고 보이지·눌리지·읽히지 않게만 합니다. */
.wl-one-lang .langsw{visibility:hidden;}

/* 일본어·영어에서 한국어 페이지로 보내는 안내 링크 */
.wl-nbonly{font-size:14px;}
.wl-nbonly a{color:var(--teal, #1B4B43); font-weight:600;}
/* FR04(2026-09-25 · Fable 검수 5장 3) — 한국어 화면은 낱말 가운데서 줄을 바꾸지 않음(예전: 「신경 쓰이는 부 / 분을」 「한국인 기 / 준에」).
   긴 영문 · 주소는 넘치지 않게 break-word. 일본어 · 영어에는 걸지 않음(일본어에 keep-all 을 걸면 줄이 안 바뀜).
   body 의 lang-ko 는 lang-router 가 없는 쪽(뉴트리 밸런스)에 안 붙어, lang-router 가 언어대로 바꾸는 <html lang> 에 겁니다 */
html:lang(ko){word-break:keep-all; overflow-wrap:break-word;}