/* ============================================================
   lseonmobile 메인 전용 스타일
   site.css(226개 화면 공용) 는 건드리지 않는다. 이 파일은 메인만 읽는다.
   색은 붓글씨(먹) · 한지 · 소나무에서 가져왔다. 임의 색상 금지 — 토큰만 쓴다.
   ============================================================ */
:root {
  /* 먹 — 순검정보다 아주 살짝 따뜻하게 눌러 종이와 붙는다 */
  --h-ink:        #14170F;
  --h-ink-2:      #40473C;
  --h-ink-3:      #616A5E;
  /* 소나무 */
  --h-forest:     #16493A;
  --h-forest-ink: #0F3227;
  --h-emerald:    #2E7C61;
  --h-emerald-dk: #24614C;
  /* 한지 */
  --h-paper:      #F7F3EA;
  --h-surface:    #FFFFFF;
  --h-muted:      #EDF3EF;
  --h-line:       #DCE4DD;
  --h-line-2:     #C6D2C7;
  /* 금 — 선·작은 배지·강조점에만 */
  --h-gold:       #805E1C;
  --h-gold-soft:  #F3EBD8;
  /* 의미색 */
  --h-ok:         #256B54;
  --h-ok-soft:    #E4F0EA;
  --h-warn:       #8A5E12;
  --h-warn-soft:  #F7EEDA;
  --h-danger:     #9E3527;
  --h-danger-soft:#F8E7E4;

  --h-shadow-1: 0 1px 2px rgba(20,23,15,.06), 0 1px 1px rgba(20,23,15,.04);
  --h-shadow-2: 0 6px 20px rgba(20,23,15,.09);
  --h-radius:   14px;
  --h-max:      1200px;
}

/* 메인은 한지색 바탕 위에 흰 카드가 놓인 구성 */
body.home {
  background: var(--h-paper);
  color: var(--h-ink);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.003em;
  word-break: keep-all;           /* 한국어 줄바꿈 */
  overflow-wrap: anywhere;
}
body.home .wrap { max-width: var(--h-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { body.home .wrap { padding: 0 16px; } }

/* 본문 바로가기 */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--h-forest); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; }
.skip:focus { left: 0; }

body.home .nav { background: var(--h-surface); border-bottom: 1px solid var(--h-line); }
body.home .nav-in { max-width: var(--h-max); }
body.home .brand { color: var(--h-ink); white-space: nowrap; }
body.home .brand b { color: var(--h-forest); }
body.home .nav-links a { color: var(--h-ink-2); }
body.home .nav-links a:hover { color: var(--h-forest); }
body.home .nav-cta { background: var(--h-forest); }
body.home .nav-cta:hover { background: var(--h-forest-ink); }
body.home .navcat > summary { color: var(--h-ink-2); }
body.home .navcat > summary:hover, body.home .navcat[open] > summary { color: var(--h-forest); }
body.home .navcat-menu { border-color: var(--h-line); }
body.home .navcat-menu a:hover { background: var(--h-muted); }
body.home .nav-links a[aria-current="page"] { color: var(--h-forest); font-weight: 800; }
body.home .font-toggle { border-color: var(--h-line-2); color: var(--h-ink-2); }
body.home .font-toggle[aria-pressed="true"] { background: var(--h-ink); color: #fff; border-color: var(--h-ink); }

/* 준비 중 표시 — 버튼처럼 보이지 않게 한다 */
.soon { color: var(--h-ink-3); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; cursor: default; }
.soon::after { content: "준비 중"; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--h-gold); background: var(--h-gold-soft); border-radius: 999px; padding: 2px 8px; }

@media (max-width: 560px) { .nav-links .soon { display: none; } }
@media (max-width: 360px) { body.home .brand { font-size: 14px; } body.home .nav-in { gap: 6px; padding: 10px 12px; } }

/* ── B. 붓글씨 브랜드 배너 (full-bleed) ───────────────────── */
.brandband {
  background: #fff;                     /* 원본 흰 배경과 경계가 보이지 않도록 순백 */
  border-bottom: 1px solid var(--h-line);
  padding: clamp(14px, 2.4vw, 30px) 0 clamp(12px, 2vw, 26px);
}
.brandband picture, .brandband img { display: block; }
.brandband img {
  width: 100%;
  max-width: 1760px;
  height: auto;
  /* contain 이라 좌우가 잘리지 않는다. 높이만 눌러 첫 검색이 밀려나지 않게 한다. */
  max-height: min(40vh, 360px);
  object-fit: contain;
  margin: 0 auto;
}
@media (max-width: 560px) { .brandband img { max-height: none; } }  /* 모바일은 문구 전체 우선 */
@media (forced-colors: active) {                                     /* 고대비 모드에서 사라지지 않게 */
  .brandband { border-bottom: 1px solid CanvasText; }
  .brandband img { forced-color-adjust: none; }
}

/* ── C. hero ──────────────────────────────────────────────── */
.h-hero { padding: clamp(32px, 5vw, 60px) 0 clamp(20px, 3vw, 32px); }
.h-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; color: var(--h-forest); background: var(--h-muted);
  border: 1px solid var(--h-line); border-radius: 999px; padding: 6px 14px; }
.h-title { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.28; font-weight: 800;
  letter-spacing: -.025em; margin: 16px 0 12px; text-wrap: balance; color: var(--h-ink); }
.h-lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--h-ink-2); max-width: 60ch; margin: 0; }
.h-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .12s; }
.h-btn-primary { background: var(--h-forest); color: #fff; }
.h-btn-primary:hover { background: var(--h-forest-ink); }
.h-btn-ghost { background: var(--h-surface); color: var(--h-forest); border-color: var(--h-line-2); }
.h-btn-ghost:hover { border-color: var(--h-forest); }
.h-btn:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 2px; }

/* ── 섹션 공통 ────────────────────────────────────────────── */
.h-sec { padding: clamp(34px, 4.5vw, 56px) 0; }
.h-sec + .h-sec { border-top: 1px solid var(--h-line); }
.h-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px; }
.h-h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.h-sub { font-size: 15px; color: var(--h-ink-2); margin: 6px 0 0; max-width: 62ch; }
.h-more { font-size: 15px; font-weight: 700; color: var(--h-forest); text-decoration: none; white-space: nowrap; }
.h-more:hover { text-decoration: underline; }

/* ── D. 통합 탐색 패널 ────────────────────────────────────── */
.h-search { background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-2); padding: clamp(18px, 2.4vw, 26px); }
.h-search-row { display: flex; gap: 10px; flex-wrap: wrap; }
.h-search-row label { flex: 1 1 300px; min-width: 0; }
.h-search input[type="search"] {
  width: 100%; min-height: 54px; padding: 14px 16px; font-size: 16px; font-family: inherit;
  color: var(--h-ink); background: var(--h-surface);
  border: 1.5px solid var(--h-line-2); border-radius: 12px; }
.h-search input[type="search"]::placeholder { color: var(--h-ink-3); }
.h-search input[type="search"]:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 1px; border-color: var(--h-forest); }
.h-search .h-btn { flex: 0 0 auto; }
@media (max-width: 560px) { .h-search .h-btn { width: 100%; } }
.h-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.h-chip { font-family: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--h-line-2); background: var(--h-surface);
  color: var(--h-ink-2); cursor: pointer; }
.h-chip:hover { border-color: var(--h-forest); color: var(--h-forest); }
.h-chip[aria-pressed="true"] { background: var(--h-forest); border-color: var(--h-forest); color: #fff; }
.h-chip:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 2px; }
.h-count { font-size: 14px; color: var(--h-ink-2); margin: 12px 0 0; }
.h-count b { color: var(--h-ink); }

/* ── E. 공고 카드 ─────────────────────────────────────────── */
.h-cards { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 18px; list-style: none; padding: 0; }
@media (min-width: 700px)  { .h-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .h-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-card { background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius);
  box-shadow: var(--h-shadow-1); display: flex; flex-direction: column; gap: 10px; padding: 18px;
  transition: box-shadow .15s, transform .12s, border-color .15s; }
.h-card:hover { box-shadow: var(--h-shadow-2); border-color: var(--h-line-2); transform: translateY(-2px); }
.h-card:focus-within { border-color: var(--h-forest); }
.h-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.h-card h3 { margin: 0; font-size: 16.5px; line-height: 1.45; font-weight: 700; letter-spacing: -.015em; }
.h-card h3 a { color: var(--h-ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h-card h3 a:hover { color: var(--h-forest); text-decoration: underline; }
.h-card h3 a::after { content: ""; position: absolute; inset: 0; }   /* 카드 전체 클릭 */
.h-card { position: relative; }
.h-card dl { margin: auto 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13.5px; }
.h-card dt { color: var(--h-ink-3); }
.h-card dd { margin: 0; color: var(--h-ink-2); }
.h-tag { font-size: 12.5px; font-weight: 700; border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.h-tag-src { background: var(--h-muted); color: var(--h-forest); }
.h-tag-ai  { background: var(--h-gold-soft); color: var(--h-gold); }
.h-tag-d0  { background: var(--h-danger-soft); color: var(--h-danger); }
.h-tag-d1  { background: var(--h-warn-soft); color: var(--h-warn); }
.h-tag-d2  { background: var(--h-ok-soft); color: var(--h-ok); }
.h-empty { background: var(--h-surface); border: 1px dashed var(--h-line-2); border-radius: var(--h-radius);
  padding: 28px 20px; text-align: center; color: var(--h-ink-2); font-size: 15px; }

/* ── F. 서비스 축 ─────────────────────────────────────────── */
.h-axes { display: grid; gap: 14px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .h-axes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-axis { background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-radius);
  padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.h-axis.is-soon { background: transparent; border-style: dashed; }
.h-axis h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.h-axis p { margin: 0; font-size: 14.5px; color: var(--h-ink-2); }
.h-axis .h-more { margin-top: auto; padding-top: 6px; }
.h-state { font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; align-self: flex-start; }
.h-state-live { background: var(--h-ok-soft); color: var(--h-ok); }
.h-state-soon { background: var(--h-gold-soft); color: var(--h-gold); }

/* ── G. 지역 ──────────────────────────────────────────────── */
.h-regions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.h-region { font-family: inherit; font-size: 14.5px; font-weight: 600; min-height: 44px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--h-line-2);
  background: var(--h-surface); color: var(--h-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.h-region:hover { border-color: var(--h-forest); color: var(--h-forest); }
.h-region:focus-visible { outline: 3px solid var(--h-gold); outline-offset: 2px; }
.h-region b { font-variant-numeric: tabular-nums; color: var(--h-forest); }
.h-region-soon { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center;
  font-size: 14px; color: var(--h-ink-3); }
.h-region-soon span { border: 1px dashed var(--h-line-2); border-radius: 999px; padding: 5px 12px; }

/* ── H. 진단 CTA ──────────────────────────────────────────── */
.h-diag { background: var(--h-forest); color: #fff; border-radius: var(--h-radius);
  padding: clamp(26px, 4vw, 44px); display: flex; gap: 20px; flex-wrap: wrap;
  align-items: center; justify-content: space-between; }
.h-diag h2 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.h-diag p { margin: 0; color: #DCE9E1; font-size: 15.5px; max-width: 56ch; }
.h-diag .h-btn { background: #fff; color: var(--h-forest-ink); }
.h-diag .h-btn:hover { background: var(--h-paper); }
.h-diag .h-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── I. 신뢰·운영 ─────────────────────────────────────────── */
.h-facts { display: grid; gap: 14px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .h-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-fact { border-left: 3px solid var(--h-gold); padding: 4px 0 4px 16px; }
.h-fact dt { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--h-ink-3); }
.h-fact dd { margin: 4px 0 0; font-size: 15px; color: var(--h-ink); }

/* ── J. footer ────────────────────────────────────────────── */
body.home footer.site { background: var(--h-surface); border-top: 1px solid var(--h-line);
  margin-top: 0; padding: 34px 0 44px; color: var(--h-ink-3); }
.h-foot { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .h-foot { grid-template-columns: 1.4fr 1fr 1fr; } }
.h-foot h2 { font-size: 13px; letter-spacing: .04em; color: var(--h-ink-3); margin: 0 0 8px; font-weight: 700; }
.h-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.h-foot a { color: var(--h-ink-2); text-decoration: none; font-size: 14.5px; }
.h-foot a:hover { color: var(--h-forest); text-decoration: underline; }
.h-foot-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--h-line);
  font-size: 13px; color: var(--h-ink-3); }

.h-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .h-card, .h-btn { transition: none; }
  .h-card:hover { transform: none; }
}
/* 글자 크게 모드에서도 깨지지 않게 */
body.home.big { font-size: 18.5px; }
body.home.big .h-card h3 { font-size: 18px; }
body.home.big .h-chip, body.home.big .h-region { font-size: 15.5px; }