/* JD Letter 공통 스타일: 색상 · 바탕 · 위쪽 메뉴(로고·버튼) · 페이지 제목 띠 · 바닥글
   모든 페이지가 이 파일을 먼저 불러오고, 페이지 전용 스타일이 그 위에 덧붙어요.
   메뉴·로고·바닥글 모양은 여기서만 고치세요. */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#EEF2F5; --panel:#FFFFFF; --ink:#16212B; --mute:#5C6B78; --line:#D3DCE3;
  --accent:#0E6B73; --up:#D1352B; --down:#1F5FBF;
  --band:#0B1F2E; --band-ink:#F3F7FA; --band-mute:#A9BAC7; --band-line:rgba(255,255,255,.14); --band-accent:#4FB8C0;
  --serif:"Noto Serif KR","Nanum Myeongjo",Batang,serif;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1820; --panel:#16232D; --ink:#E6EDF2; --mute:#93A3B0; --line:#2B3C49;
  --accent:#4FB8C0; --up:#FF6B60; --down:#6FA3FF; --band:#08131B;
}}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scrollbar-gutter:stable} /* 짧은 페이지에서도 로고·메뉴 위치가 흔들리지 않게 */
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* 위쪽 메뉴: 화면 전체 폭 남색 띠 (가로 스크롤 없이 box-shadow + clip-path 로 칠해요) */
header.top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;
  background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);
  color:var(--band-ink);border-bottom:1px solid var(--band-line)}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 21px/1 var(--serif);letter-spacing:-.02em;color:var(--band-ink);text-decoration:none}
.logo .mark{width:30px;height:30px;flex:none;display:block}
.logo b{font-weight:700;color:var(--band-accent)}
header.top nav{display:flex;flex-wrap:wrap;gap:8px}
header.top nav a{display:inline-block;padding:7px 16px;border:1px solid rgba(255,255,255,.4);border-radius:4px;color:#fff;
  font-size:15px;font-weight:500;line-height:1.3;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
header.top nav a:hover{background:var(--band-accent);border-color:var(--band-accent);color:var(--band)}
header.top nav a.on{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
@media(max-width:560px){
  header.top{flex-direction:column;align-items:flex-start;gap:14px}
  header.top nav{gap:5px}
  header.top nav a{padding:5px 8px;font-size:13.5px} /* 버튼 5개가 한 줄에 들어가게 */
}

/* 하위 페이지 제목 띠 (메뉴 바로 아래 남색 영역) */
.phero{position:relative;background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);color:var(--band-ink);padding:30px 0 34px}
.phero h1{font:700 clamp(26px,5vw,36px)/1.25 var(--serif);letter-spacing:-.03em;margin:0 0 8px;color:var(--band-ink);word-break:keep-all}
.phero p{margin:0;color:var(--band-mute);font-size:15px;word-break:keep-all;max-width:40em}
.phero p a{color:var(--band-accent);font-weight:600;text-decoration:none}

/* 바닥글 */
footer{margin-top:56px;padding:22px 0 30px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
footer .foot{margin-top:8px}
footer .foot a{color:inherit;text-underline-offset:3px}
footer .foot a:hover{color:var(--accent)}