/* 휴넥스 — 공통 스타일 */

:root{
  /* 로고 파랑을 기준으로 잡은 브랜드 색 */
  --brand:#062FEB;
  --brand-dark:#0523B8;
  --brand-soft:#EEF2FF;
  --brand-line:#C7D4FF;

  /* 회색 단계 */
  --ink:#191F28;        /* 제목 */
  --ink-soft:#4E5968;   /* 본문 */
  --mute:#8B95A1;       /* 보조 설명 */
  --rule:#E5E8EB;       /* 선 */
  --surface:#F9FAFB;    /* 옅은 면 */
  --card:#FFFFFF;
  --paper:#FFFFFF;
  --alert:#E5484D;

  --stamp:#062FEB;      /* 기존 인라인 스타일 호환용 */

  --r:18px;             /* 카드 모서리 */
  --r-sm:12px;          /* 버튼·입력 모서리 */

  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Roboto Mono",Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink);overflow-wrap:break-word;
  line-height:1.7;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--brand-line);outline-offset:2px}

/* ── 상단 내비게이션 ─────────────────────── */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.bar.hide{transform:translateY(-100%)}
.bar .wrap{display:flex;align-items:center;gap:20px;min-height:72px;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:38px;width:auto;display:block}
.nav{margin-left:auto;display:flex;gap:6px}
.nav a{font-size:15px;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding:8px 14px;border-radius:10px}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}

/* ── 타이포 ─────────────────────────────── */
h1{font-size:clamp(32px,6.4vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1.24}
h2{font-weight:800;letter-spacing:-.035em}
.lede{margin-top:18px;color:var(--ink-soft);font-size:17px;line-height:1.65;max-width:34em}
.eyebrow{font-size:14px;font-weight:700;color:var(--brand)}
.section{font-size:14px;font-weight:700;color:var(--mute);margin-bottom:18px}

/* ── 버튼 ───────────────────────────────── */
.btn{display:inline-block;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-.02em;
  padding:15px 28px;border-radius:var(--r-sm);border:0;background:var(--brand);color:#fff;
  text-decoration:none;cursor:pointer;transition:background .15s,transform .05s}
.btn:hover{background:var(--brand-dark)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--rule);color:var(--mute);cursor:default}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn.ghost:hover{background:var(--rule)}

/* ── 표 ─────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
th,td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
tr:last-child th,tr:last-child td{border-bottom:0}
th{background:var(--surface);font-weight:700;white-space:nowrap;color:var(--ink-soft)}

.fill{background:#FFF6D6;padding:2px 7px;border-radius:6px;font-weight:600;color:#7A5A00}

/* ── 하단 ──────────────────────────────── */
.foot{margin-top:80px;border-top:1px solid var(--rule);padding:36px 0 72px;
  font-size:14px;color:var(--mute)}
.foot .links,.foot nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.foot .links a,.foot nav a{color:var(--ink-soft);text-decoration:none;font-weight:600;
  padding:6px 12px;border-radius:8px}
.foot .links a:hover,.foot nav a:hover{background:var(--rule);color:var(--ink)}
.foot dl{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:14px}
.foot dt{color:var(--mute)}
.foot dd{color:var(--ink-soft)}

@media(max-width:640px){
  .bar .wrap{padding-top:12px;padding-bottom:12px;min-height:0}
  .brand img{height:34px}
  .nav{margin-left:0;width:100%;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav a{padding:8px 12px;white-space:nowrap}
  .foot dl{grid-template-columns:1fr;gap:0}
  .foot dd{margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── 히어로 ─────────────────────────────── */
.hero{padding:84px 0 48px}
.hero p{color:var(--ink-soft);font-size:17px;line-height:1.65;margin-top:18px;max-width:34em}
.narrow{max-width:720px}

/* ── 카드 ───────────────────────────────── */
.receipt{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(25,31,40,.04),0 12px 32px -20px rgba(25,31,40,.28)}
.rhead{padding:24px 28px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag{font-size:13px;font-weight:600;color:var(--mute)}
.kind{font-size:19px;font-weight:800;letter-spacing:-.035em}
.perf{height:1px;margin:0 28px;background:var(--rule)}
.rbody{padding:24px 28px 28px}

/* 홈 화면의 사업 카드 */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:30px 28px 28px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--brand-line);transform:translateY(-2px);
  box-shadow:0 14px 34px -22px rgba(6,47,235,.5)}
.card h2,.card h3{font-size:22px;font-weight:800;letter-spacing:-.035em;margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:15px;line-height:1.65}
.go{display:inline-block;margin-top:18px;font-size:15px;font-weight:700;color:var(--brand)}

/* 운영시간 표시 */
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

@media(max-width:640px){
  .hero{padding:56px 0 36px}
  .cards{grid-template-columns:1fr}
  .rhead{padding:20px 20px 16px}
  .rbody{padding:20px}
  .perf{margin:0 20px}
}

/* ── 좁은 화면에서의 표 ──────────────────── */
@media(max-width:640px){
  /* 항목명과 값이 한 줄씩 쌓이도록 바꾼다. nowrap 이면 값이 들어갈 자리가 없다 */
  table:not(.cols3),
  table:not(.cols3) tbody,
  table:not(.cols3) tr,
  table:not(.cols3) th,
  table:not(.cols3) td{display:block;width:auto}
  table:not(.cols3) tr{border-bottom:1px solid var(--rule)}
  table:not(.cols3) tr:last-child{border-bottom:0}
  table:not(.cols3) th,
  table:not(.cols3) td{white-space:normal;border-bottom:0}
  table:not(.cols3) th{background:transparent;color:var(--mute);font-size:13px;padding:14px 16px 2px}
  table:not(.cols3) td{padding:0 16px 14px;font-size:15px}

  /* 열이 많아 쌓을 수 없는 표는 가로로 밀어서 본다 */
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--rule);border-radius:var(--r)}
  .scroll-x table{border:0;border-radius:0;min-width:520px}
}