/*
Theme Name: 집노트
Description: 집노트(2호) 전용 테마 — 국비노트 테마 이식본
Version: 1.0
Author: 국비노트
*/

/* ═══ 색상 토큰 (설계서 v2 §1-4) ═══ */
:root{
  --ink:#17181A; --ink-2:#3A3D42; --muted:#5F646B;
  --paper:#FFFFFF; --ground:#F1F3F5; --sunken:#E9ECEF;
  --line:#E4E6E9; --line-strong:#888D94;
  --brand:#9E2158; --brand-deep:#7C1840; --brand-tint:#FBEFF3;
  --brand-line:#E6C6D3; --on-brand:#FFFFFF;
  --slate:#3F4A5A; --slate-tint:#EEF1F5;
  --ok:#1F6B3A; --ok-tint:#EDF6F0;
  --warn:#8A5A00; --warn-tint:#FFF6E5;

  /* 타이포 — 🔴 px 고정 금지. rem 이라야 사용자 글자크기 설정이 산다 */
  --fs-h1:clamp(1.6875rem,6.4vw,2.5rem);
  --fs-h2:clamp(1.25rem,4.8vw,1.625rem);
  --fs-h3:1.125rem; --fs-body:1.0625rem; --fs-ui:.9375rem; --fs-meta:.8125rem;
  --lh-body:1.75; --measure:34em;
  --w-reg:400; --w-semi:600; --w-bold:700;   /* 🔴 800·900 금지 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:44px; --sp-8:64px;
  --r-s:6px; --r-m:12px; --r-l:20px;
  --d-fast:120ms; --d-base:180ms; --d-slow:260ms;
  --ease:cubic-bezier(.22,1,.36,1);   /* 🔴 (.4,0,.2,1)=Tailwind 기본값=AI 지문 */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E8E9EB; --ink-2:#C3C6CB; --muted:#9AA0A8;
    --paper:#16181B; --ground:#0F1113; --sunken:#1D2024;
    --line:#2C2F34; --line-strong:#61656B;
    --brand:#F49AC0; --brand-deep:#FBC0D8; --brand-tint:#2C1520;
    --brand-line:#4C2434; --on-brand:#17181A;
    --slate:#A9B6C6; --slate-tint:#1B2027;
    --ok:#5FBF85; --ok-tint:#14241A; --warn:#E0A94A; --warn-tint:#2A2114;
  }
}
:root[data-theme="dark"]{
  --ink:#E8E9EB; --ink-2:#C3C6CB; --muted:#9AA0A8;
  --paper:#16181B; --ground:#0F1113; --sunken:#1D2024;
  --line:#2C2F34; --line-strong:#61656B;
  --brand:#F49AC0; --brand-deep:#FBC0D8; --brand-tint:#2C1520;
  --brand-line:#4C2434; --on-brand:#17181A;
  --slate:#A9B6C6; --slate-tint:#1B2027;
  --ok:#5FBF85; --ok-tint:#14241A; --warn:#E0A94A; --warn-tint:#2A2114;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--ink); background:var(--paper);
  word-break:keep-all;   /* 🔴 한글 어절 단위 줄바꿈 */
}
h1,blockquote{ font-family:"Noto Serif KR","NotoSerifKR","Pretendard Variable",serif; font-weight:700; }
h1,h2,h3,.ui,.btn,.badge,.tab,nav{ letter-spacing:-.02em; }
p,li,dd,td{ letter-spacing:normal; }
.num,time,.spec dd{ font-variant-numeric:tabular-nums; letter-spacing:0; }
h1{ font-size:var(--fs-h1); line-height:1.35; margin:0 0 var(--sp-5); }
h2{ font-size:var(--fs-h2); margin:var(--sp-7) 0 var(--sp-3); }
h3{ font-size:var(--fs-h3); margin:var(--sp-6) 0 var(--sp-2); }
p{ margin:0 0 18px; }
a{ color:var(--brand); text-underline-offset:3px; }
img,figure,table{ border-radius:0; max-width:100%; height:auto; }
.card,.table,.notice{ box-shadow:none; }   /* 정적 콘텐츠 드롭섀도 금지 */

/* ═══ 레이아웃 ═══ */
.wrap{ width:min(100% - 32px, 46rem); margin-inline:auto; }
.site-header{ border-bottom:1px solid var(--line); background:var(--paper);
  position:sticky; top:0; z-index:50; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between;
  min-height:56px; gap:var(--sp-4); }
.brand{ font-family:"Noto Serif KR",serif; font-weight:700; font-size:1.25rem;
  color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
.brand b{ color:var(--brand); }
.gnb{ display:flex; gap:var(--sp-4); font-size:var(--fs-ui); }
.gnb a{ color:var(--ink-2); text-decoration:none; }
.gnb a:hover{ color:var(--brand); }
main{ padding:var(--sp-6) 0 var(--sp-8); }
article :where(p,ul,ol,table,figure){ max-width:var(--measure); }

/* ═══ 컴포넌트 ═══ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:52px; padding:14px 20px; border-radius:var(--r-m); width:100%;
  font-size:var(--fs-body); font-weight:var(--w-bold); letter-spacing:-.02em;
  line-height:1.4; text-decoration:none; border:0; cursor:pointer;
  transition:background-color var(--d-base) var(--ease); }
.btn--primary,.cta__cap{ background:var(--brand); color:var(--on-brand); }
.btn--primary:hover,.cta__cap:hover{ background:var(--brand-deep); }
.cta__cap{ display:flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 20px; border-radius:var(--r-m);
  font-weight:var(--w-bold); text-decoration:none; margin:var(--sp-5) 0; }
.cta__closed{ background:var(--sunken); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--sp-4); text-align:center; margin:var(--sp-5) 0; }
.cta__closed p{ margin:0; font-size:var(--fs-ui); }

/* 광고 고지 — 상단 */
.notice--ad{ background:var(--warn-tint); border:1px solid var(--brand-line);
  border-radius:var(--r-s); padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-meta); color:var(--ink-2); margin:0 0 var(--sp-5); }

/* 🔴 법정표시 박스 — 페이지 하단, CTA 바로 위 (kpei 실측 73% 지점) */
.legal{ background:var(--ground); border:1px solid var(--line);
  border-radius:var(--r-m); padding:var(--sp-5); margin:var(--sp-7) 0 var(--sp-5);
  font-size:var(--fs-meta); color:var(--ink-2); line-height:1.7; }
.legal h2{ font-size:var(--fs-h3); margin:0 0 var(--sp-3); color:var(--ink);
  font-family:inherit; }
.legal dl{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4);
  margin:0 0 var(--sp-3); }
.legal dt{ color:var(--muted); white-space:nowrap; }
.legal dd{ margin:0; }
.legal .legal__note{ margin:var(--sp-3) 0 0; padding-top:var(--sp-3);
  border-top:1px solid var(--line); color:var(--muted); }

/* 정부 인용 — 전용 색 */
.gov{ background:var(--slate-tint); border-left:3px solid var(--slate);
  padding:var(--sp-4); margin:var(--sp-5) 0; font-size:var(--fs-ui); }

.badge{ display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:var(--fs-meta); font-weight:var(--w-semi); }
.badge--ok{ background:var(--ok-tint); color:var(--ok); }
.badge--warn{ background:var(--warn-tint); color:var(--warn); }
.badge--brand{ background:var(--brand-tint); color:var(--brand); }

table{ border-collapse:collapse; width:100%; font-size:var(--fs-ui); margin:var(--sp-5) 0; }
th,td{ border:1px solid var(--line); padding:var(--sp-3); text-align:left; }
th{ background:var(--ground); font-weight:var(--w-semi); }
.table-scroll{ overflow-x:auto; }

.crumb{ font-size:var(--fs-meta); color:var(--muted); margin:0 0 var(--sp-3); }
.crumb a{ color:var(--muted); text-decoration:none; }

.site-footer{ border-top:1px solid var(--line); background:var(--ground);
  padding:var(--sp-6) 0; font-size:var(--fs-meta); color:var(--muted); }
.site-footer p{ margin:0 0 var(--sp-2); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important;
     scroll-behavior:auto!important; }
}

/* ═══ 전환 유도 요소 (2026-09-09 추가) ═══ */
.lead{ font-size:1.1875rem; line-height:1.7; color:var(--ink);
  margin:0 0 var(--sp-6); font-weight:var(--w-reg); }
.lead strong{ color:var(--brand); font-weight:var(--w-bold); }

/* 혜택 강조 박스 — 페이지 상단, 스크롤 전에 보이게 */
.highlight{ background:var(--brand-tint); border:1px solid var(--brand-line);
  border-radius:var(--r-m); padding:var(--sp-5); margin:0 0 var(--sp-6); }
.highlight__title{ font-size:var(--fs-h3); font-family:inherit; font-weight:var(--w-bold);
  color:var(--brand-deep); margin:0 0 var(--sp-4); }
.highlight__note{ margin:var(--sp-4) 0 0; padding-top:var(--sp-3);
  border-top:1px solid var(--brand-line); font-size:var(--fs-ui); color:var(--ink-2); }
.check{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.check li{ position:relative; padding-left:28px; font-size:var(--fs-body); color:var(--ink); }
.check li::before{ content:""; position:absolute; left:0; top:.45em;
  width:16px; height:9px; border-left:2.5px solid var(--brand);
  border-bottom:2.5px solid var(--brand); transform:rotate(-45deg); }
.check strong{ color:var(--brand-deep); }

/* 본문 이미지 */
figure.wp-block-image{ margin:var(--sp-6) 0; }
figure.wp-block-image img{ width:100%; display:block; border-radius:var(--r-m); }
figure.wp-block-image figcaption{ margin-top:var(--sp-2); font-size:var(--fs-meta);
  color:var(--muted); text-align:center; }

/* 🔴 모바일 하단 고정 CTA — 스크롤 어디서나 신청 가능 */
.cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--paper); border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(23,24,26,.06); }
.cta-bar a{ display:flex; align-items:center; justify-content:center;
  min-height:50px; border-radius:var(--r-m); background:var(--brand);
  color:var(--on-brand); font-weight:var(--w-bold); text-decoration:none;
  font-size:var(--fs-body); letter-spacing:-.02em; }
.cta-bar a:hover{ background:var(--brand-deep); }
@media (min-width:768px){ .cta-bar{ display:none; } }
body.has-cta-bar{ padding-bottom:84px; }
@media (min-width:768px){ body.has-cta-bar{ padding-bottom:0; } }

/* ═══════════════════════════════════════════════════════════
   카드형 CTA (2026-09-09)
   🔴 AI 느낌을 없애는 규칙
     · 보라·인디고 그라데이션 금지 (AI 생성물의 대표 지문)
     · 둥근 모서리를 크게 굴리지 않는다 (r-m 12px 까지)
     · 드롭섀도를 겹치지 않는다 — 선 하나로 경계를 만든다
     · 버튼은 검정 계열. 브랜드색은 강조에만 쓴다
   ═══════════════════════════════════════════════════════════ */
.ccard{ border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
  background:var(--paper); margin:var(--sp-6) 0; }

.ccard__visual{ position:relative; aspect-ratio:1/1; background:var(--sunken); }
@media (min-width:600px){ .ccard__visual{ aspect-ratio:4/3; } }
.ccard__visual img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 글자가 얹히는 아래쪽만 어둡게 — 전체를 덮으면 사진이 죽는다 */
.ccard__visual::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,17,19,.72) 0%, rgba(15,17,19,.28) 34%, transparent 62%); }

.ccard__badge{ position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(23,24,26,.86); color:#fff; font-size:var(--fs-meta);
  font-weight:var(--w-semi); padding:5px 11px; border-radius:var(--r-s);
  letter-spacing:-.02em; }
.ccard__overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--sp-5); color:#fff; }
.ccard__org{ margin:0 0 4px; font-size:var(--fs-meta); font-weight:var(--w-semi);
  opacity:.86; letter-spacing:.02em; }
.ccard__headline{ margin:0; font-family:"Noto Serif KR",serif; font-weight:700;
  font-size:clamp(1.375rem,5.2vw,1.75rem); line-height:1.28; letter-spacing:-.03em;
  text-shadow:0 1px 12px rgba(0,0,0,.28); }

.ccard__body{ padding:var(--sp-5); }
.ccard__cat{ margin:0 0 var(--sp-3); font-size:var(--fs-meta); font-weight:var(--w-bold);
  color:var(--brand); letter-spacing:-.01em; }
.ccard__brand{ margin:0 0 2px; font-size:var(--fs-ui); color:var(--muted); }
.ccard__title{ margin:0 0 var(--sp-3); font-size:1.3125rem; font-weight:var(--w-bold);
  font-family:inherit; letter-spacing:-.03em; line-height:1.35; }
.ccard__desc{ margin:0 0 var(--sp-5); font-size:var(--fs-ui); color:var(--ink-2);
  line-height:1.7; }

.ccard__spec{ display:grid; grid-template-columns:auto 1fr; gap:0;
  margin:0 0 var(--sp-5); border-top:1px solid var(--line); }
.ccard__spec dt{ padding:var(--sp-3) 0; font-size:var(--fs-ui); color:var(--muted);
  border-bottom:1px solid var(--line); }
.ccard__spec dd{ padding:var(--sp-3) 0; margin:0; font-size:var(--fs-ui);
  font-weight:var(--w-bold); text-align:right; border-bottom:1px solid var(--line); }

/* 🔴 버튼은 검정 — 레퍼런스 카드와 같은 무게감. 브랜드색은 라벨에만 */
.ccard__btn{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); min-height:56px; padding:14px 20px;
  background:#17181A; color:#fff; border-radius:var(--r-s);
  font-size:var(--fs-body); font-weight:var(--w-bold); letter-spacing:-.02em;
  text-decoration:none; margin:0;
  transition:background-color var(--d-base) var(--ease); }
.ccard__btn:hover{ background:#2C2F34; }
.ccard__arrow{ flex:none; }
:root[data-theme="dark"] .ccard__btn,
@media (prefers-color-scheme:dark){ .ccard__btn{ background:#E8E9EB; color:#17181A; } }

/* ═══════════════════════════════════════════════════════════
   이번 주 인기 자격증 슬라이드
   ═══════════════════════════════════════════════════════════ */
.pop{ margin:var(--sp-8) 0 var(--sp-6); padding-top:var(--sp-6);
  border-top:1px solid var(--line); }
.pop__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); margin:0 0 var(--sp-4); }
.pop__title{ margin:0; font-size:var(--fs-h3); font-family:inherit;
  font-weight:var(--w-bold); letter-spacing:-.03em; }
.pop__all{ display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:var(--fs-ui); font-weight:var(--w-semi); color:var(--ink-2);
  text-decoration:none; }
.pop__all:hover{ color:var(--brand); }

.pop__viewport{ overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  margin-inline:calc(var(--sp-4) * -1); padding-inline:var(--sp-4); }
.pop__viewport::-webkit-scrollbar{ display:none; }
.pop__track{ display:flex; gap:12px; list-style:none; margin:0; padding:0 0 var(--sp-2); }
.pop__item{ flex:0 0 132px; scroll-snap-align:start; }
@media (min-width:600px){ .pop__item{ flex-basis:152px; } }
.pop__item a{ display:block; text-decoration:none; color:inherit; }

.pop__thumb{ position:relative; display:block; aspect-ratio:1/1;
  border-radius:var(--r-s); overflow:hidden; background:var(--sunken);
  border:1px solid var(--line); margin-bottom:var(--sp-2); }
.pop__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pop__thumb--none{ display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-family:"Noto Serif KR",serif; font-size:1.5rem;
  font-weight:700; color:var(--muted); }
.pop__rank{ position:absolute; left:0; top:0; min-width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:#17181A; color:#fff; font-size:var(--fs-meta);
  font-weight:var(--w-bold); font-variant-numeric:tabular-nums; }
.pop__badge{ position:absolute; right:6px; bottom:6px;
  background:var(--brand); color:var(--on-brand); font-size:11px;
  font-weight:var(--w-semi); padding:2px 7px; border-radius:999px; }
.pop__name{ display:block; font-size:var(--fs-ui); font-weight:var(--w-semi);
  letter-spacing:-.02em; line-height:1.4; }
.pop__meta{ display:block; margin-top:2px; font-size:var(--fs-meta); color:var(--muted); }

.pop__nav{ display:none; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-3); }
@media (min-width:600px){ .pop__nav{ display:flex; } }
.pop__btn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink-2);
  border-radius:var(--r-s); cursor:pointer;
  transition:border-color var(--d-fast) var(--ease); }
.pop__btn:hover{ border-color:var(--ink); color:var(--ink); }

/* ═══ 공고 카드 목록 (2026-09-09) ═══ */
.lst{ margin:0 0 var(--sp-8); }
.lst__head{ margin:0 0 var(--sp-5); }
.lst__title{ margin:0 0 4px; font-size:var(--fs-h2); font-family:"Noto Serif KR",serif;
  font-weight:700; letter-spacing:-.03em; }
.lst__sub{ margin:0; font-size:var(--fs-ui); color:var(--muted); }
.lst__grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-5); }
@media (min-width:720px){ .lst__grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); } }

.lcard{ display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
  background:var(--paper); height:100%;
  transition:border-color var(--d-base) var(--ease); }
.lcard:hover{ border-color:var(--line-strong); }
.lcard__visual{ position:relative; aspect-ratio:1/1; background:var(--sunken); }
.lcard__visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.lcard__visual::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,17,19,.74) 0%, rgba(15,17,19,.26) 36%, transparent 64%); }
.lcard__noimg{ display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-family:"Noto Serif KR",serif; font-size:2.5rem;
  font-weight:700; color:var(--line-strong); }
.lcard__no{ position:absolute; left:14px; top:12px; z-index:2; color:#fff;
  font-size:var(--fs-ui); font-weight:var(--w-bold); font-variant-numeric:tabular-nums;
  letter-spacing:.02em; opacity:.92; }
.lcard__badge{ position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(23,24,26,.86); color:#fff; font-size:var(--fs-meta);
  font-weight:var(--w-semi); padding:5px 11px; border-radius:var(--r-s); }
.lcard__overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--sp-5); color:#fff; }
.lcard__org{ margin:0 0 4px; font-size:var(--fs-meta); font-weight:var(--w-semi); opacity:.86; }
.lcard__headline{ margin:0; font-family:"Noto Serif KR",serif; font-weight:700;
  font-size:clamp(1.25rem,4.6vw,1.5rem); line-height:1.3; letter-spacing:-.03em;
  text-shadow:0 1px 12px rgba(0,0,0,.3); }
.lcard__body{ padding:var(--sp-5); }
.lcard__cat{ margin:0 0 var(--sp-2); font-size:var(--fs-meta);
  font-weight:var(--w-bold); color:var(--brand); }
.lcard__title{ margin:0 0 var(--sp-3); font-size:1.1875rem; font-weight:var(--w-bold);
  font-family:inherit; letter-spacing:-.03em; }
.lcard__desc{ margin:0 0 var(--sp-4); font-size:var(--fs-ui); color:var(--ink-2);
  line-height:1.65; }
.lcard__spec{ display:grid; grid-template-columns:auto 1fr;
  margin:0 0 var(--sp-4); border-top:1px solid var(--line); }
.lcard__spec dt{ padding:10px 0; font-size:var(--fs-ui); color:var(--muted);
  border-bottom:1px solid var(--line); }
.lcard__spec dd{ padding:10px 0; margin:0; font-size:var(--fs-ui);
  font-weight:var(--w-bold); text-align:right; border-bottom:1px solid var(--line); }
.lcard__more{ display:flex; align-items:center; justify-content:space-between;
  min-height:52px; padding:12px 18px; background:#17181A; color:#fff;
  border-radius:var(--r-s); font-size:var(--fs-ui); font-weight:var(--w-bold);
  letter-spacing:-.02em; }
.lcard:hover .lcard__more{ background:#2C2F34; }

/* 홈 히어로 */
.hero{ padding:var(--sp-6) 0 var(--sp-7); }
.hero__eyebrow{ margin:0 0 var(--sp-3); font-size:var(--fs-meta);
  font-weight:var(--w-bold); color:var(--brand); letter-spacing:.04em; }
.hero__title{ margin:0 0 var(--sp-4); font-size:clamp(1.75rem,6.8vw,2.5rem);
  line-height:1.3; letter-spacing:-.035em; }
.hero__lead{ margin:0; font-size:var(--fs-body); color:var(--ink-2);
  line-height:1.7; max-width:var(--measure); }
.hero__lead strong{ color:var(--ink); font-weight:var(--w-bold); }

/* 🔴 2026-09-09 수정 — 캠페인 사진에 이미 자격명이 박혀 있다.
   오버레이 제목을 겹치면 글자가 두 번 보여 지저분해진다.
   → 사진이 있는 카드는 오버레이를 숨기고, 어둡게 덮지도 않는다. */
.lcard__visual:has(img) .lcard__overlay,
.ccard__visual:has(img) .ccard__overlay{ display:none; }
.lcard__visual:has(img)::after,
.ccard__visual:has(img)::after{
  background:linear-gradient(to top, rgba(15,17,19,.34) 0%, transparent 38%); }
/* :has() 미지원 브라우저 대비 — 이미지 없는 카드는 오버레이가 필요하다 */
@supports not (selector(:has(img))){
  .lcard__overlay,.ccard__overlay{ display:none; }
}
/* 사진 없는 카드는 글자 자리를 남긴다 */
.lcard__visual:not(:has(img)) .lcard__overlay{ display:block; }
.lcard__visual:not(:has(img))::after{ background:none; }

/* ── 발행 전 항목 (2026-09-09) ─────────────────────────────
   🔴 죽은 링크를 내보내지 않는다. jpn_is_live() 가 false 면
      <a> 대신 <div>/<span> 으로 렌더되고 이 규칙이 적용된다. */
.lcard--soon{cursor:default;opacity:.62;filter:saturate(.55)}
.lcard--soon:hover{transform:none;box-shadow:none}
.lcard__more--soon{color:var(--muted,#6b7280);background:transparent;border:1px solid currentColor}
.pop__item--soon{opacity:.55;filter:saturate(.5)}
.pop__soon{cursor:default;display:block;color:inherit;text-decoration:none}

/* ══════════════════════════════════════════════════════════
   본문 2열 레이아웃 (2026-09-09, 대표님 지시)
   ① 제목폭 = 본문폭  ② PC 우측 고정 CTA + 정사각형 링크
   ══════════════════════════════════════════════════════════ */

/* ① 제목도 본문과 같은 폭으로 — 종전에는 h1/h2 만 wrap 전체 폭이라 어긋나 보였다 */
article :where(h1,h2,h3){ max-width:var(--measure); }

/* 본문 페이지는 사이드바가 붙으므로 더 넓은 wrap 을 쓴다 */
.wrap--article{ width:min(100% - 32px, 46rem); }
.layout__main{ min-width:0; }

/* 사이드바 — 기본(모바일)은 본문 아래로 흐른다 */
.side{ margin-top:var(--sp-7); }
.side .ccard{ margin:0 0 var(--sp-5); }

@media (min-width:1100px){
  .wrap--article{ width:min(100% - 48px, 70rem); }
  .layout{ display:grid; grid-template-columns:minmax(0,1fr) 20.5rem;
           gap:var(--sp-8); align-items:start; }
  .side{ margin-top:0; }
  /* 🔴 헤더가 sticky(56px) 이므로 그 아래에 붙인다 */
  .side__sticky{ position:sticky; top:76px; }
  .side .ccard__visual{ aspect-ratio:1/1; }
}

/* 정사각형 링크 묶음 */
.sqs{ border-top:1px solid var(--line); padding-top:var(--sp-5); }
.sqs__head{ margin:0 0 var(--sp-4); font-size:var(--fs-meta);
  font-weight:var(--w-bold); color:var(--muted); letter-spacing:-.02em; }
.sqs__list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
@media (min-width:1100px){ .sqs__list{ grid-template-columns:repeat(3,1fr); } }
.sqs__item a{ display:block; text-decoration:none; color:inherit; }
.sqs__thumb{ display:block; aspect-ratio:1/1; overflow:hidden;
  background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-s); }
.sqs__thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--d-slow) var(--ease); }
.sqs__item a:hover .sqs__thumb img{ transform:scale(1.04); }
.sqs__name{ display:block; margin-top:6px; font-size:var(--fs-meta);
  line-height:1.35; color:var(--ink-2); }
.sqs__item a:hover .sqs__name{ color:var(--brand); }

/* ④ 광고 고지 — 경고 박스에서 한 줄 각주로 (대표님 지시 2026-09-09)
   🔴 없애지는 않는다. 애드팟 규정이 「본문 첫 부분」 표시를 요구하고,
      우리 자체 blocker(fair_trade)도 앞 300자 안에서 이 문구를 찾는다. */
.notice--ad{ background:none; border:0; border-radius:0; padding:0;
  margin:0 0 var(--sp-5); font-size:var(--fs-meta); color:var(--muted);
  line-height:1.5; max-width:var(--measure); }

/* 푸터 고지 */
.site-footer .foot-ad{ margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid var(--line); font-size:var(--fs-meta); color:var(--muted); }

/* ── 2026-09-09 보정 ─────────────────────────────────────
   🔴 sticky 가 안 붙던 원인: grid + align-items:start 라 .side 높이가
      내용만큼이어서 그 안의 .side__sticky 가 움직일 공간이 없었다.
      → .side 자체에 sticky 를 건다. */
@media (min-width:1100px){
  .side{ position:sticky; top:72px; }
  .side__sticky{ position:static; }
}
/* 정사각형 3개가 사이드바 폭을 넘던 것 — 트랙 최소폭을 0으로 */
.sqs__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ══════════════════════════════════════════════════════════
   2026-09-09 2차 보정 (대표님 스크린샷 지적 4건)
   ══════════════════════════════════════════════════════════ */

/* ① 헤더·푸터가 본문보다 좁아 로고가 안쪽으로 들어와 있었다
      → 전 페이지 공통 폭을 넓혀 기준선을 하나로 맞춘다 */
.wrap{ width:min(100% - 32px, 70rem); }
@media (min-width:1100px){ .wrap{ width:min(100% - 48px, 70rem); } }

/* 🔴 홈 카드는 넓어진 폭에 맞춰 열 수를 늘린다 */
@media (min-width:720px){
  .lst__grid{ grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); }
}

/* ② 제목폭 = 본문폭
      🔴 종전 `max-width:34em` 은 헛돌았다 — em 은 **그 요소의 폰트 크기** 기준이라
         h1(2.5rem)에서는 34em = 1,360px 이 되어 제한이 걸리지 않는다.
         본문 34em × 1.0625rem = 36.125rem 을 rem 고정값으로 준다. */
:root{ --measure-fix:36.125rem; }
article :where(p,ul,ol,table,figure,h1,h2,h3,.notice--ad,.crumb){
  max-width:var(--measure-fix);
}
.legal{ max-width:var(--measure-fix); }

/* ③ 우측 카드가 너무 길어 아래가 잘렸다 → 압축 */
@media (min-width:1100px){
  .side .ccard__visual{ aspect-ratio:16/9; }        /* 정사각형 → 가로형 */
  .side .ccard__body{ padding:var(--sp-4); }
  .side .ccard__title{ font-size:1.0625rem; margin-bottom:var(--sp-2); }
  .side .ccard__desc{ font-size:var(--fs-meta); line-height:1.55;
    margin-bottom:var(--sp-3);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .side .ccard__spec dt,.side .ccard__spec dd{ padding:var(--sp-2) 0; font-size:var(--fs-meta); }
  .side .ccard__btn{ min-height:46px; font-size:var(--fs-ui); }
  .side .ccard__cat{ margin-bottom:var(--sp-2); }
}

/* ④ 「다른 과정도 보기」 → 정보글 안내 형태 (썸네일 + 제목 세로 리스트) */
.sqs{ border-top:1px solid var(--line); padding-top:var(--sp-5); margin-top:var(--sp-5); }
.sqs__head{ margin:0 0 var(--sp-4); font-size:var(--fs-ui);
  font-weight:var(--w-bold); color:var(--ink); letter-spacing:-.02em; }
.sqs__list{ display:block; }
.sqs__item + .sqs__item{ margin-top:var(--sp-4); }
.sqs__item a{ display:grid; grid-template-columns:4.5rem 1fr; gap:var(--sp-3);
  align-items:start; text-decoration:none; color:inherit; }
.sqs__thumb{ display:block; aspect-ratio:1/1; overflow:hidden;
  background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-s); }
.sqs__name{ display:block; margin-top:0; font-size:var(--fs-ui); font-weight:var(--w-semi);
  line-height:1.45; color:var(--ink); }
.sqs__sub{ display:block; margin-top:3px; font-size:var(--fs-meta); color:var(--muted);
  line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sqs__item a:hover .sqs__name{ color:var(--brand); }

/* ⑤ 대표 썸네일 — 제목 바로 아래 */
.hero-thumb{ margin:0 0 var(--sp-6); max-width:var(--measure-fix); }
.hero-thumb img{ width:100%; height:auto; display:block; border-radius:var(--r-m); }

/* ── 2026-09-09 3차 보정 ─────────────────────────────────
   🔴 CTA 카드 사진을 16:9 로 잘랐더니 캠페인 이미지에 박힌 글자가 잘렸다
      (「필라테스 강사」 → 「필라테스」). 캠페인 소재는 정사각형 기준으로
      제작되므로 **1:1 을 유지**하고, 길이는 다른 곳에서 줄인다. */
@media (min-width:1100px){
  .side .ccard__visual{ aspect-ratio:1/1; }
  .side .ccard__body{ padding:var(--sp-4) var(--sp-4) var(--sp-5); }
  .side .ccard__cat{ margin-bottom:var(--sp-1); font-size:var(--fs-meta); }
  .side .ccard__brand{ margin-bottom:0; font-size:var(--fs-meta); }
  .side .ccard__title{ font-size:1.0625rem; margin-bottom:var(--sp-2); }
  .side .ccard__desc{ font-size:var(--fs-meta); line-height:1.5;
    margin-bottom:var(--sp-3);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .side .ccard__spec dt,.side .ccard__spec dd{ padding:7px 0; font-size:var(--fs-meta); }
  .side .ccard__btn{ min-height:44px; font-size:var(--fs-ui); margin-top:var(--sp-3); }
}

/* ══ 로고·상단바 (2026-09-09, 로고 B「등록 태그」 채택) ══ */
.topbar{ background:var(--ground); border-bottom:1px solid var(--line);
  font-size:var(--fs-meta); color:var(--muted); }
.topbar .wrap{ display:flex; align-items:center; gap:7px; min-height:32px; }
.topbar__ico{ flex:none; color:var(--brand); }
.site-header{ top:0; }

.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--ink); }
.brand__mark{ flex:none; }
.brand__txt{ display:block; }
.brand__name{ display:block; font-family:"Noto Serif KR",serif; font-weight:700;
  font-size:1.25rem; line-height:1; letter-spacing:-.03em; }
.brand__name b{ color:var(--brand); }
.brand__sub{ display:block; margin-top:3px; font-size:.5625rem; font-weight:var(--w-semi);
  letter-spacing:.14em; color:var(--muted); line-height:1; }
@media (max-width:420px){ .brand__sub{ display:none; } }

/* 🔴 .brand 에 남아 있던 Noto Serif KR 이 부제까지 상속됐다 — 부제는 산세리프로 */
.brand__sub{ font-family:"Pretendard Variable",system-ui,sans-serif !important; }

/* ══ 메인 개편 (2026-09-09) ══════════════════════════════
   종전 메인은 「히어로 + 카드」 두 블록뿐이라 위쪽이 비어 보였다.
   근거 숫자와 안내 블록을 넣어 정보 사이트의 밀도를 만든다. */
.hero{ padding-top:var(--sp-6); }
.hero__title{ max-width:22ch; }
.hero__lead{ max-width:var(--measure-fix); }
.hero__act{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.btn--auto{ width:auto; min-height:48px; padding:12px 22px; }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); font-weight:var(--w-semi); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ground); }

/* 근거 숫자 */
.facts{ margin:var(--sp-7) 0 var(--sp-8); padding:var(--sp-5) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-5);
  grid-template-columns:1fr; }
@media (min-width:640px){ .facts__list{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); } }
.facts__list li{ display:flex; flex-direction:column; gap:4px; }
.facts__list b{ font-family:"Noto Serif KR",serif; font-weight:700; font-size:1.5rem;
  line-height:1.2; color:var(--brand); letter-spacing:-.02em; }
.facts__list span{ font-size:var(--fs-meta); color:var(--muted); line-height:1.55; }

/* 안내 블록 */
.guidebox{ margin:var(--sp-8) 0 var(--sp-6); padding:var(--sp-6);
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r-m); }
.guidebox h2{ margin:0 0 var(--sp-3); font-size:var(--fs-h3); font-family:inherit;
  letter-spacing:-.02em; }
.guidebox p{ margin:0 0 var(--sp-3); font-size:var(--fs-ui); color:var(--ink-2);
  line-height:1.7; max-width:var(--measure-fix); }
.guidebox__more{ display:inline-flex; align-items:center; gap:5px; margin-top:var(--sp-2);
  font-size:var(--fs-ui); font-weight:var(--w-bold); color:var(--brand); text-decoration:none; }
.guidebox__more:hover{ color:var(--brand-deep); }

/* ══ 2026-09-10 대표님 지시 반영 ══════════════════════════════════ */

/* ① 모바일에서도 과정 카드 2열 — 1열은 스크롤이 너무 길다 */
.lst__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
@media (min-width:720px){ .lst__grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); } }
@media (min-width:1100px){ .lst__grid{ grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); } }
@media (max-width:719px){
  .lcard__body{ padding:var(--sp-4); }
  .lcard__title{ font-size:1rem; line-height:1.4; margin-bottom:var(--sp-2); }
  .lcard__desc{ font-size:var(--fs-meta); line-height:1.5; margin-bottom:var(--sp-3);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .lcard__spec dt,.lcard__spec dd{ padding:5px 0; font-size:.75rem; }
  .lcard__cat{ font-size:.6875rem; margin-bottom:var(--sp-2); }
  .lcard__org{ font-size:.6875rem; }
  .lcard__more{ font-size:var(--fs-meta); }
  .lcard__no,.lcard__badge{ font-size:.625rem; padding:3px 7px; }
}

/* ② 히어로 — 근거 숫자 블록을 뺐으므로 목록과의 간격을 다시 잡는다 */
.hero{ padding:var(--sp-7) 0 var(--sp-6); }
.hero__title{ margin-bottom:var(--sp-4); }

/* ③ 본문 하단 고정 CTA — 기존 .cta-bar 골격 위에 좌(문구)·우(버튼) 2단 */
.cta-bar__in{ display:flex; align-items:center; gap:var(--sp-4);
  width:min(100% - 8px, 40rem); margin:0 auto; }
.cta-bar__txt{ margin:0; min-width:0; line-height:1.35; }
.cta-bar__txt b{ display:block; font-size:var(--fs-ui); font-weight:var(--w-bold); color:var(--brand); }
.cta-bar__txt span{ display:block; font-size:var(--fs-meta); color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-bar a.cta-bar__btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--sp-5); border-radius:var(--r-m);
  background:var(--brand); color:var(--on-brand); text-decoration:none;
  font-size:var(--fs-ui); font-weight:var(--w-bold); letter-spacing:-.02em; }
.cta-bar a.cta-bar__btn:hover{ background:var(--brand-deep); color:var(--on-brand); }

/* ── 2026-09-10 ② 모바일 2열 실기기 확인 후 보정 ─────────────────── */
@media (max-width:719px){
  /* 🔴 카드 폭이 절반이 되면서 번호 배지(왼쪽 위)와 「수강료 0원」 배지(오른쪽 위)가
        겹쳤다. 번호는 정보가치가 낮으므로 2열에서는 감춘다. */
  .lcard__no{ display:none; }
  .lcard__badge{ top:8px; right:8px; }

  /* 카드 높이 정렬 — 제목 2줄·설명 3줄 자리를 미리 잡아 두 카드의
     스펙 줄이 같은 높이에서 시작하게 한다 */
  .lcard{ display:flex; flex-direction:column; height:100%; }
  .lcard__body{ display:flex; flex-direction:column; flex:1; }
  .lcard__title{ min-height:2.8em;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .lcard__desc{ min-height:4.5em; }
  .lcard__spec{ margin-top:auto; }

  /* 상단 고지 막대가 2줄이라 첫 화면을 많이 먹는다 — 높이만 줄인다 */
  .topbar{ padding-top:6px; padding-bottom:6px; }
  .topbar .wrap{ font-size:.75rem; line-height:1.4; }
}

/* ── 2026-09-10 ③ PC 실측 보정 (getComputedStyle 기준) ──────────────
   실측값: 본문 열 728px 인데 글은 578px 만 써서 오른쪽에 150px 죽은 공간,
           gap 64px 을 더해 본문 끝 ~ 카드 사이가 214px 벌어져 있었다.
           사이드 총높이 1030px > 화면 가용 824px 라 「함께 보면 좋은 글」이 잘렸다. */
@media (min-width:1100px){
  /* ① 본문 열을 글 폭에 맞춘다 — 578 + 48(gap) + 328(사이드) = 954px */
  .wrap--article{ width:min(100% - 48px, 60rem); }
  .layout{ grid-template-columns:minmax(0,1fr) 20.5rem; gap:var(--sp-6); column-gap:48px; }

  /* ② 사이드를 화면 안에 넣는다 — 카드 압축 */
  .side .ccard__body{ padding:var(--sp-4) var(--sp-4) var(--sp-4); }
  .side .ccard__cat{ margin-bottom:4px; }
  .side .ccard__brand{ font-size:.75rem; margin-bottom:2px; }
  .side .ccard__title{ font-size:1.0625rem; margin-bottom:6px; }
  .side .ccard__desc{ font-size:var(--fs-meta); line-height:1.5; margin-bottom:var(--sp-3);
    -webkit-line-clamp:2; }
  .side .ccard__spec dt,.side .ccard__spec dd{ padding:7px 0; font-size:var(--fs-meta); }
  .side .ccard__btn{ min-height:46px; }

  /* 「함께 보면 좋은 글」 압축 (개수는 PHP 에서 3 → 2 로 줄였다) */
  .side .sqs{ padding-top:var(--sp-4); margin-top:var(--sp-4); }
  .side .sqs__head{ margin-bottom:var(--sp-3); }
  .side .sqs__item + .sqs__item{ margin-top:var(--sp-3); }

  /* ③ 안전망 — 화면이 더 낮은 노트북에서도 사이드 안에서 스크롤되게 한다.
        이게 없으면 sticky 아래쪽은 어떤 방법으로도 볼 수 없다. */
  .side__sticky{ max-height:calc(100vh - 92px); overflow-y:auto; scrollbar-width:thin;
    overscroll-behavior:contain; }
}

/* ④ 모바일 하단 고정 CTA — 문구 2줄 + 버튼 2단이 두껍고 어색했다.
      전체 폭 버튼 하나로 되돌린다(마크업도 PHP 에서 단순화). */
.cta-bar__in,.cta-bar__txt{ display:none; }
.cta-bar a{ gap:6px; }
.cta-bar a svg{ flex:0 0 auto; }

/* ── 2026-09-10 ④ 사이드 높이 2차 압축 (실측 906px → 목표 808px 이하) ──
   이미지는 대표님 지시대로 1:1 유지(328px). 줄일 곳은 카드 본문뿐이라
   이미지 오버레이와 겹치는 항목(카테고리·기관명)을 사이드에서만 감춘다. */
@media (min-width:1100px){
  .side .ccard__cat,
  .side .ccard__brand{ display:none; }              /* 이미지 위에 이미 적혀 있다 */
  .side .ccard__body{ padding:var(--sp-3) var(--sp-4) var(--sp-4); }
  .side .ccard__title{ font-size:1.0625rem; margin-bottom:6px; }
  .side .ccard__spec dt,.side .ccard__spec dd{ padding:5px 0; }
  .side .ccard__btn{ min-height:44px; }

  .side .sqs__head{ margin-bottom:var(--sp-2); font-size:var(--fs-meta); }
  .side .sqs__thumb{ width:52px; height:52px; flex:0 0 52px; }
  .side .sqs__item + .sqs__item{ margin-top:var(--sp-2); }
  .side .sqs__sub{ -webkit-line-clamp:2; }
}

/* ── 2026-09-10 ⑤ 화면 높이별로 사이드 내용을 맞춘다 ─────────────────
   압축만으로는 모든 노트북을 못 덮는다(실측: 810px 필요, 1366×768 화면의 가용은 676px).
   화면이 낮으면 「함께 보면 좋은 글」 개수를 줄여 잘리는 일이 없게 한다.
   🔑 본문 맨 아래 인기 슬라이드가 같은 역할을 하므로 여기서 줄여도 도달 경로는 남는다. */
@media (min-width:1100px){
  .side .sqs__sub{ -webkit-line-clamp:1; }
}
@media (min-width:1100px) and (max-height:880px){
  .side .sqs__item:nth-of-type(2){ display:none; }   /* 1개만 */
}
@media (min-width:1100px) and (max-height:790px){
  .side .sqs{ display:none; }                        /* 카드만 — 잘린 채 보이는 것보다 낫다 */
}

/* 2026-09-10 ⑥ 마지막 2px — 1440x900 에서 810 필요 / 808 가용이었다 */
@media (min-width:1100px){
  .side .sqs{ padding-top:var(--sp-3); margin-top:var(--sp-3); }
  .side__sticky{ max-height:calc(100vh - 84px); }
}

/* ══ 2026-09-10 (3) 홈 개편 — 히어로 사진 · 정보글 섹션 · 3×2 그리드 ══ */

/* ① 히어로 — 사진이 있으면 2단 */
.hero__txt{ min-width:0; }
.hero--split{ display:grid; gap:var(--sp-5); align-items:center; }
@media (min-width:900px){
  .hero--split{ grid-template-columns:1fr 1fr; gap:var(--sp-7); padding:var(--sp-7) 0; }
  .hero--split .hero__title{ font-size:clamp(2rem,3.4vw,2.75rem); }
  .hero--split .hero__lead{ max-width:26rem; }
}
.hero__img{ min-width:0; }
.hero__img img{ display:block; width:100%; height:auto; border-radius:var(--r-l);
  background:var(--sunken); }

/* ② 섹션 공통 머리·꼬리 */
.sec{ margin-top:var(--sp-7); }
.sec__head{ margin-bottom:var(--sp-5); }
.sec__title{ margin:0 0 6px; font-size:1.375rem; letter-spacing:-.03em; }
.sec__sub{ margin:0; font-size:var(--fs-ui); color:var(--ink-2); }
.sec__act{ margin-top:var(--sp-5); text-align:center; }
.btn--line{ display:inline-flex; align-items:center; gap:6px;
  min-height:46px; padding:0 var(--sp-6); border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-size:var(--fs-ui); font-weight:var(--w-bold); text-decoration:none; }
.btn--line:hover{ border-color:var(--brand); color:var(--brand); }

/* ③ 3×2 그리드 — PC 3열 / 모바일 2열 */
.pgrid,.lst__grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3); }
@media (min-width:720px){ .pgrid,.lst__grid{ gap:var(--sp-5); } }
@media (min-width:1100px){
  .pgrid,.lst__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); }
}

/* ④ 정보글 카드 */
.pcard{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; transition:border-color .15s, transform .15s; }
.pcard:hover{ border-color:var(--brand); transform:translateY(-2px); }
.pcard__visual{ display:block; position:relative; aspect-ratio:16/10; background:var(--sunken); }
.pcard__visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard__noimg{ display:flex; align-items:center; justify-content:center; height:100%;
  font-size:1.5rem; font-weight:var(--w-bold); color:var(--muted); }
.pcard__body{ display:flex; flex-direction:column; flex:1; padding:var(--sp-4); }
.pcard__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:1rem; font-weight:var(--w-bold); line-height:1.45;
  letter-spacing:-.02em; margin-bottom:6px; }
.pcard__desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:var(--fs-meta); color:var(--ink-2); line-height:1.55; }
.pcard__date{ margin-top:auto; padding-top:var(--sp-3); font-size:.75rem; color:var(--muted); }
@media (min-width:1100px){
  .pcard__title{ font-size:1.0625rem; }
  .pcard__desc{ font-size:var(--fs-ui); -webkit-line-clamp:3; }
}

/* 2026-09-10 (4) PC 3열에서도 카드 높이를 맞춘다 — 설명 줄 수가 달라
   「상세정보 보기」 버튼 위치가 카드마다 어긋나 있었다(6번 카드가 짧았다) */
@media (min-width:720px){
  .lst__item,.pgrid__item{ display:flex; }
  .lcard,.pcard{ display:flex; flex-direction:column; width:100%; }
  .lcard__body{ display:flex; flex-direction:column; flex:1; }
  .lcard__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:2.9em; }
  .lcard__desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:3.1em; }
  .lcard__spec{ margin-top:auto; }
}

/* ── 2026-09-10 모집 중인 과정 — 탭 전환 ────────────────────────────
   대표님 지시: 마이모델하우스 「타입안내 84A/84B」처럼 탭을 눌러 목록이 바뀐다 */
.tabs{ display:flex; gap:6px; margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs__btn{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px 12px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:var(--fs-ui); font-weight:var(--w-bold);
  color:var(--muted); letter-spacing:-.02em; white-space:nowrap; }
.tabs__btn::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:transparent; transition:background .15s; }
.tabs__btn:hover{ color:var(--ink-2); }
.tabs__btn.is-on{ color:var(--brand); }
.tabs__btn.is-on::after{ background:var(--brand); }
.tabs__n{ display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--sunken); color:var(--muted); font-size:.6875rem; }
.tabs__btn.is-on .tabs__n{ background:var(--brand); color:var(--on-brand); }
.lst__panel[hidden]{ display:none; }
@media (min-width:1100px){
  .tabs__btn{ padding:12px 20px 14px; font-size:1rem; }
}

/* ══ 2026-09-10 히어로 2차 — 대표님 확정 배치 ══════════════════════
   PC: 좌우 분리(글자 가독성 우선) / 모바일: 사진 위에 글자(첫 화면 공간 절약)
   🔑 마크업은 하나다. 사진을 먼저 두고 CSS 로 자리만 바꾼다 — 유지보수가 두 벌이 되지 않게. */

/* ── 모바일 기본: 사진을 배경으로 깔고 그 위에 글자 ── */
.hero--split{
  position:relative; display:block; isolation:isolate;
  min-height:26rem; padding:var(--sp-6) var(--sp-5) var(--sp-7);
  border-radius:var(--r-l); overflow:hidden;
  background:var(--sunken);
}
.hero--split .hero__img{
  position:absolute; inset:0; z-index:0; margin:0;
}
.hero--split .hero__img img{
  width:100%; height:100%; object-fit:cover; object-position:60% 40%;
  display:block; border-radius:0;
}
/* 🔴 글자가 사진 위에서 읽히도록 아래쪽을 어둡게 덮는다.
      사진 자체가 밝아서 그러데이션 없이는 흰 글자가 사라진다. */
.hero--split .hero__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,16,19,.10) 0%, rgba(20,16,19,.45) 42%, rgba(20,16,19,.82) 100%);
}
.hero--split .hero__txt{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:22rem;
}
.hero--split .hero__eyebrow{ color:#f0c2d4; }
.hero--split .hero__title{ color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.28); }
.hero--split .hero__lead{ color:rgba(255,255,255,.92); }

/* ── PC(1000px↑): 좌우 분리. 사진은 오른쪽 칸으로, 덮개는 걷는다 ── */
@media (min-width:1000px){
  .hero--split{
    display:grid; grid-template-columns:1fr 1fr; align-items:center;
    gap:var(--sp-7); min-height:0; padding:var(--sp-7) 0;
    border-radius:0; background:none; overflow:visible;
  }
  .hero--split .hero__img{ position:static; order:2; }
  .hero--split .hero__img img{ height:auto; border-radius:var(--r-l); }
  .hero--split .hero__img::after{ display:none; }   /* 그러데이션 불필요 */
  .hero--split .hero__txt{
    order:1; min-height:0; display:block;
  }
  /* 🔴 색을 기본 토큰으로 되돌린다. 안 그러면 흰 글자가 흰 배경에 얹힌다 */
  .hero--split .hero__eyebrow{ color:var(--brand); }
  .hero--split .hero__title{ color:var(--ink); text-shadow:none;
    font-size:clamp(2rem,3.4vw,2.75rem); }
  .hero--split .hero__lead{ color:var(--ink-2); max-width:26rem; }
}

/* 아주 좁은 화면 — 사진 비중을 줄여 글자가 눌리지 않게 */
@media (max-width:400px){
  .hero--split{ min-height:23rem; padding:var(--sp-5) var(--sp-4) var(--sp-6); }
  .hero--split .hero__txt{ min-height:19rem; }
  .hero--split .hero__title{ font-size:1.75rem; }
}

/* 2026-09-10 히어로 3차 — 모바일에서 eyebrow 가 사진에 묻히던 것
   🔴 원인: 연분홍(#f0c2d4) 글자가 사진 위쪽 밝은 영역(창가)에 얹혔다.
      아래쪽 그러데이션은 제목·리드까지만 닿고 eyebrow 는 그 위라 덮이지 않는다.
   → 색을 바꾸는 대신 **반투명 칩**을 씌운다. 사진이 무엇으로 바뀌어도 읽힌다. */
.hero--split .hero__eyebrow{
  display:inline-block; align-self:flex-start;
  margin:0 0 var(--sp-3);
  padding:5px 12px 6px;
  border-radius:999px;
  background:rgba(18,14,17,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; letter-spacing:.06em;
}
/* PC 는 사진 위가 아니라 옆이므로 칩을 걷고 원래 모습으로 */
@media (min-width:1000px){
  .hero--split .hero__eyebrow{
    display:block; padding:0; border-radius:0;
    background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    color:var(--brand); letter-spacing:.08em;
  }
}

/* 2026-09-10 히어로 4차 — 칩 안에서 글자가 정중앙에 오도록
   🔴 원인: inline-block + 위아래 패딩만으로는 한글 baseline 때문에 글자가 위로 쏠린다.
      line-height 를 1 로 눌러 두고 flex 로 가운데를 잡는다. */
.hero--split .hero__eyebrow{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 13px; height:28px; line-height:1;
  text-align:center; white-space:nowrap;
}
@media (min-width:1000px){
  /* PC 는 칩이 없으므로 flex 를 걷고 원래 흐름으로 되돌린다 */
  .hero--split .hero__eyebrow{
    display:block; height:auto; line-height:1.5; padding:0; text-align:left;
  }
}

/* 🔴 2026-09-10 — 읽기폭 제한이 카드 그리드까지 좁혔다
   466줄 article :where(p,ul,ol,...) 의 ul 에 .lst__grid(카드 목록)가 걸려
   PC 에서 목록이 578px 로 묶여 오른쪽 절반이 비어 있었다.
   읽기폭은 '문장'에만 필요하다 — 카드·탭·썸네일 리스트는 컨테이너 폭을 다 쓴다. */
article :where(.lst__grid,.pgrid,.tabs,.sqs__list,.lst__panel){ max-width:none; }

/* 🔴 2026-09-10 — 3열 시작점을 1100px → 900px 로
   1092px 창에서 2열이 되어 카드 하나가 화면 절반을 차지했다.
   대표님 지시는 「PC 3×2 / 모바일 2열」 이므로 노트북 폭에서도 3열이어야 한다. */
@media (min-width:900px){
  .pgrid,.lst__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); }
}

/* 🔴 2026-09-10 — 카드 번호가 밝은 사진 위에서 사라졌다
   흰 글씨 단독이라 광고주 소재(어두운 배경)에서는 보이고
   AI 사진(밝은 주방·설원)에서는 묻혔다. 그림자로 어느 배경에서도 읽히게 한다. */
.lcard__no{ text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35); opacity:1; }

/* 🔴 2026-09-10 — 히어로 썸네일이 정사각형으로 화면을 다 차지했다
   기존 7편의 썸네일은 16:9 였지만 신규 15편은 카드가 1:1 이라 1:1 로 만들었다.
   카드는 1:1 그대로 두고, 본문 맨 위 히어로에서만 16:9 로 잘라 쓴다. */
.hero-thumb{ margin:0 0 var(--sp-5); }
.hero-thumb img{ width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  display:block; border-radius:var(--r-l); }

/* 🔴 2026-09-10 — 사이드 CTA 카드가 본문 아래에서 화면을 압도했다
   사이드바는 1100px 부터 생긴다. 그 미만에서는 카드가 본문 아래 전체 폭(1045px)으로
   깔리고 4:3 이라 세로 780px 이 되어 사진 한 장이 한 화면을 다 먹었다.
   레이아웃은 그대로 두고 폭만 읽기폭에 맞춘다. */
@media (max-width:1099px){
  .side .ccard{ max-width:var(--measure-fix); }
  .side .ccard__visual{ aspect-ratio:16/9; }
}

/* ── 본문 입력폼 (2026-09-10) ─────────────────────────────────────
   광고주 랜딩으로 보내지 않고 이 자리에서 바로 신청을 받는다.
   🔴 iframe 은 광고주가 발급한 코드 그대로다. 폭·높이만 우리가 잡는다. */
.cform{ margin:var(--sp-7) 0; padding:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--sunken);
  max-width:var(--measure-fix); scroll-margin-top:76px; }
.cform__title{ margin:0 0 var(--sp-2); font-size:1.125rem; font-weight:var(--w-bold);
  letter-spacing:-.02em; color:var(--ink); }
.cform__note{ margin:0 0 var(--sp-4); font-size:var(--fs-meta); color:var(--muted); }
.cform__box{ background:var(--paper); border-radius:var(--r-m); overflow:hidden; }
.cform__box iframe{ display:block; width:100%; border:0; }
.cform__legal{ margin:var(--sp-4) 0 0; font-size:var(--fs-meta); line-height:1.6;
  color:var(--muted); }
@media (max-width:719px){
  .cform{ padding:var(--sp-4); margin:var(--sp-6) 0; }
}

/* 🔴 애드팟 폼은 광고주 코드가 height 360px 고정이라 안에 스크롤바가 생긴다.
   디비디비딥은 iframeResizer 가 높이를 스스로 맞추므로 건드리지 않는다. */
.cform--adpot .cform__box iframe{ height:470px; }
@media (max-width:719px){ .cform--adpot .cform__box iframe{ height:430px; } }

/* 사이드바가 없는 페이지(목록 등)는 본문이 전폭을 쓴다.
   🔴 2열 그리드는 사이드가 없어도 빈 열 20.5rem 을 그대로 잡는다. */
@media (min-width:1100px){
  .layout--full{ display:block; }
  .layout--full .layout__main{ max-width:none; }
}


/* 🔴 2026-09-11 — 사이드바 안에 스크롤바가 두 개로 보이던 문제
   `.side__sticky` 를 max-height 로 자르고 overflow-y:auto 를 준 탓이다.
   이제 sticky 안에는 CTA 만 들어가므로 자를 이유가 없다. */
.side__sticky{ max-height:none !important; overflow:visible !important; }
.side .sqs{ margin-top:var(--sp-5); }

/* 🔴 2026-09-11 — 폼 박스 정리 (대표님: "디자인이 넘 별로인데 어색하고")
   문제 셋: ①회색 박스 안에 흰 박스가 또 있어 겹쳐 보였다
            ②광고주 폼이 파란 버튼이라 우리 자주색과 부딪혔다
            ③높이를 470px 로 고정해 아래가 크게 비었다(실제 폼은 334px)
   고침: 배경을 겹치지 않게 하나로 두고, 주변을 중립색으로 낮춰 색 충돌을 줄인다. */
.cform{ background:var(--paper); border:1px solid var(--line); padding:var(--sp-5) var(--sp-5) var(--sp-4); }
.cform__box{ background:transparent; border:0; border-radius:0; margin:0 -4px; }
.cform__title{ font-size:1.0625rem; margin-bottom:var(--sp-4); }
.cform__title::before{ content:''; display:inline-block; width:3px; height:1em;
  background:var(--brand); border-radius:2px; margin-right:8px;
  vertical-align:-.12em; }

.cform__legal{ margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--line); font-size:var(--fs-meta); }
@media (max-width:719px){
  .cform{ padding:var(--sp-4) var(--sp-4) var(--sp-3); }

}


/* 🔴 2026-09-11 — 광고주 폼(iframe)이 「박스 안의 박스」로 보이던 문제
   폼 자체가 2px 검은 테두리 + 40px 안쪽여백을 갖고 있다. 남의 페이지라 안을 못 고친다.
   → **담는 칸을 넘어가는 만큼 잘라낸다**. 테두리와 여백 일부가 칸 밖으로 나가 사라진다.
   잘라내는 폭은 폼 안쪽여백보다 **작아야** 한다 — 크면 입력칸이 잘린다.
     · 폼 안쪽여백은 폼 자신의 폭이 400px 이상이면 40px, 미만이면 20px 이다.
     · 그래서 넓은 화면 18px / 좁은 화면 14px 로 둔다(어느 조합에서도 여백보다 작다). */
.cform--adpot .cform__box{ position:relative; overflow:hidden;
  height:341px; border-radius:var(--r-m); }
.cform--adpot .cform__box iframe{ position:absolute; top:-18px; left:-18px;
  width:calc(100% + 36px); height:377px;
  /* 버튼이 파랑(#2457BD)이라 자주색 사이트와 부딪친다.
     iframe 통째로 색을 돌린다 — 검정·회색·흰색은 색이 없어 그대로다. */
  filter:hue-rotate(110deg) saturate(.7); }
@media (max-width:719px){
  .cform--adpot .cform__box{ height:301px; }
  .cform--adpot .cform__box iframe{ top:-14px; left:-14px; width:calc(100% + 28px); }
}


/* 🔴 2026-09-11 — 디비디비딥 폼의 남는 위아래 여백
   폼 안쪽에 위 80px · 아래 50px 이 있어 신청칸이 한참 아래에 놓였다.
   파란 테두리는 광고주 대시보드에서 0px 으로 껐고(2026-09-11 대표님 승인),
   여기서는 남은 여백만 잘라낸다. 좌우는 건드리지 않는다.
   높이는 광고주 스크립트가 실시간으로 바꾸므로 jpn-150-form.php 가 따라간다. */
/* 🔴 2026-09-13 — 첫 방문자에게 폼이 안 보이던 문제.
   iframe 에 높이가 없어 브라우저 기본 150px 로 떴고(보이는 건 44px 잘린 106px),
   광고주 iframeResizer 가 895px 로 고치는 데 첫 로드에서 14초가 걸렸다.
   여기서 초기 높이를 실측값으로 박아 둔다 — resizer 가 나중에 같은 값을 다시 줘도 변화 없다.
   box = 895 - 44(위 잘라냄) - 34(아래 잘라냄) = 817 */
.cform--dbdbdeep .cform__box{ position:relative; overflow:hidden;
  height:817px; border-radius:var(--r-m); }
.cform--dbdbdeep .cform__box iframe{ position:absolute; top:-44px; left:0; width:100%;
  height:895px; }


/* 🔴 2026-09-11 — 홈에서 「알아두면 좋은 이야기」 카드와 「모집 중인 과정」이 붙어 있었다.
   두 구역 사이 틈이 0px 이라 카드 아래에 바로 제목이 놓였다.
   `.sec--posts + .lst` 로 **홈에만** 걸리게 한다(자격증 목록 페이지는 그대로). */
.sec--posts + .lst{ margin-top:var(--sp-7); }
@media (max-width:719px){ .sec--posts + .lst{ margin-top:var(--sp-6); } }

/* ═══════════════════════════════════════════════════════════
   함께 보는 과정 — 관련도 기반 추천 (2026-09-12)
   ─ 인기 슬라이드(.pop)를 대체한다. 가로 스크롤 대신 격자로 둔다.
     추천은 훑어보는 것이라 한눈에 다 보이는 편이 낫다.
   ═══════════════════════════════════════════════════════════ */
.rel{ margin:var(--sp-8) 0 var(--sp-6); padding-top:var(--sp-6);
  border-top:1px solid var(--line); }
.rel__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); margin:0 0 var(--sp-4); }
.rel__title{ margin:0; font-size:var(--fs-h3); font-family:inherit;
  font-weight:var(--w-bold); letter-spacing:-.03em; }
.rel__all{ display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:var(--fs-ui); font-weight:var(--w-semi); color:var(--ink-2);
  text-decoration:none; }
.rel__all:hover{ color:var(--brand); }

.rel__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 12px;
  list-style:none; margin:0; padding:0; }
@media (min-width:520px){ .rel__grid{ grid-template-columns:repeat(3,1fr); } }
.rel__item a{ display:block; text-decoration:none; color:inherit; }
.rel__thumb{ position:relative; display:block; aspect-ratio:1/1;
  border-radius:var(--r-s); overflow:hidden; background:var(--sunken);
  border:1px solid var(--line); margin-bottom:var(--sp-2); }
.rel__thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--d-fast) var(--ease); }
.rel__item a:hover .rel__thumb img{ transform:scale(1.04); }
.rel__thumb--none{ display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-family:"Noto Serif KR",serif; font-size:1.5rem;
  font-weight:700; color:var(--muted); }
.rel__badge{ position:absolute; right:6px; bottom:6px;
  background:var(--brand); color:var(--on-brand); font-size:11px;
  font-weight:var(--w-semi); padding:2px 7px; border-radius:999px; }
.rel__name{ display:block; font-size:var(--fs-ui); font-weight:var(--w-semi);
  letter-spacing:-.02em; line-height:1.4; }
.rel__org{ display:block; margin-top:2px; font-size:var(--fs-meta); color:var(--muted); }

/* CTA 자리를 대신할 때는 위 여백만 줄인다 */
.cta__closed + .rel{ margin-top:var(--sp-5); padding-top:var(--sp-5); }

/* ── 자료 출처 띠 (2026-09-13 신설) ─────────────────────────
   대표님 지시: 푸터 위에 공식 기관 링크를 카드로 띄워 신뢰를 높인다.
   🔴 로고 이미지를 쓰지 않는다 — 정부 상징 사용 지침 + 「정부 공인」 오인 방지.
      기관명 타이포 + 한 줄 설명으로 같은 역할을 한다. */
.src-band{
  border-top:1px solid var(--line,#e5e7eb);
  background:var(--bg-soft,#f7f7f8);
  padding:28px 0 24px;
}
.src-band__title{
  margin:0 0 14px; font-size:14px; font-weight:600;
  color:var(--muted,#6b7280); letter-spacing:-.01em;
}
.src-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-columns:repeat(3,1fr);
}
.src-grid a{
  display:flex; flex-direction:column; gap:3px; height:100%;
  padding:13px 14px; border:1px solid var(--line,#e5e7eb); border-radius:10px;
  background:#fff; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.src-grid a:hover,.src-grid a:focus-visible{
  border-color:var(--brand,#9E2158);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.src-grid strong{ font-size:14px; font-weight:600; line-height:1.35; }
.src-grid span{ font-size:12px; color:var(--muted,#6b7280); line-height:1.4; }
.src-band__note{
  margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--muted,#6b7280);
}
@media (max-width:900px){ .src-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){
  .src-grid{ grid-template-columns:1fr; gap:8px; }
  .src-grid a{ flex-direction:row; align-items:baseline; gap:8px; padding:11px 13px; }
  .src-grid span{ margin-left:auto; text-align:right; }
}

/* ── 헤더 검색 (2026-09-14 신설) ─────────────────────────── */
.site-header .wrap{ position:relative; }
.hsearch{ position:relative; margin-left:auto; }
.hsearch__form{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--line,#e5e7eb); border-radius:999px;
  background:#fff; padding:7px 14px; transition:border-color .15s, box-shadow .15s;
}
.hsearch__form:focus-within{
  border-color:var(--brand,#9E2158); box-shadow:0 0 0 3px rgba(158,33,88,.08);
}
.hsearch__ico{ color:var(--muted,#9ca3af); flex:none; }
.hsearch__input{
  border:0; outline:0; background:none; font-size:14px; width:170px;
  font-family:inherit; color:inherit;
}
.hsearch__input::-webkit-search-cancel-button{ cursor:pointer; }

/* 추천 목록 */
.hsearch__panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:min(380px,92vw); max-height:min(420px,70vh); overflow-y:auto;
  background:#fff; border:1px solid var(--line,#e5e7eb); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.hs-item{
  display:flex; gap:11px; align-items:center; padding:10px 13px;
  text-decoration:none; color:inherit; border-bottom:1px solid var(--line,#f1f1f3);
}
.hs-item:last-child{ border-bottom:0; }
.hs-item:hover,.hs-item.is-on{ background:var(--bg-soft,#f7f7f8); }
.hs-item__thumb{
  width:44px; height:44px; flex:none; border-radius:8px; object-fit:cover;
  background:var(--bg-soft,#f1f1f3);
}
/* 🔴 썸네일 없는 글(정보글 38편)은 글자 블록으로 대체한다 */
.hs-item__ph{
  width:44px; height:44px; flex:none; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f3e6ec,#efeff2);
  color:var(--brand,#9E2158); font-weight:700; font-size:15px;
}
.hs-item__body{ min-width:0; }
.hs-item__title{
  font-size:13.5px; line-height:1.4; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hs-item__kind{
  display:inline-block; margin-top:3px; font-size:11px; color:var(--muted,#6b7280);
  border:1px solid var(--line,#e5e7eb); border-radius:5px; padding:0 5px; line-height:16px;
}
.hs-empty{ padding:18px 14px; font-size:13px; color:var(--muted,#6b7280); text-align:center; }

@media (max-width:820px){
  .hsearch__input{ width:120px; }
  .hsearch__form{ padding:6px 11px; }
}
@media (max-width:520px){
  .site-header .wrap{ flex-wrap:wrap; }
  .hsearch{ order:3; width:100%; margin:9px 0 0; }
  .hsearch__input{ width:100%; }
  .hsearch__panel{ right:auto; left:0; width:100%; }
}