/* @media 가 아니라 @container 다 — 이 CSS 는 미리보기(shadow host) 안에서 쓰이는데,
   미리보기는 브라우저 창이 아니라 컨테이너 폭만 줄인다. @media 로 두면 데스크탑·태블릿·
   모바일을 바꿔도 늘 창 폭(1500px) 기준으로 평가돼 반응형 규칙이 전혀 안 걸렸다. */
/* 홈페이지 키트 — 레이아웃 전용 CSS (색 없음, 색은 전부 인라인) */
.hk-wrap{max-width:1040px;margin:0 auto;padding-inline:16px}
.hk-sec{padding-block:48px}
.hk-sec-sm{padding-block:32px}
.hk-grid{display:grid;gap:16px}
.hk-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hk-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hk-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hk-g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.hk-hero21{grid-template-columns:2fr 1fr}
.hk-hero32{grid-template-columns:3fr 2fr}
.hk-flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hk-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hk-stack{display:grid;gap:12px}
.hk-btn{display:inline-block;padding:10px 20px;border-radius:8px;border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;white-space:nowrap}
.hk-btn-sm{padding:6px 12px;border-radius:6px;font-size:13px}
.hk-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap}
.hk-chip{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.hk-input{width:100%;padding:11px 12px;border-radius:8px;border:1px solid transparent;font:inherit;box-sizing:border-box;background:transparent}
.hk-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.hk-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;margin:0 0 10px}
.hk-h1{font-size:clamp(26px,4.5vw,42px);font-weight:700;line-height:1.2;margin:0;text-wrap:pretty}
.hk-h2{font-size:clamp(21px,3vw,30px);font-weight:700;line-height:1.25;margin:0;text-wrap:pretty}
.hk-h3{font-size:18px;font-weight:700;margin:0;line-height:1.35}
.hk-p{font-size:15px;line-height:1.7;margin:0}
.hk-sub{font-size:13px;line-height:1.5}
.hk-card{border-radius:12px;border:1px solid transparent;overflow:hidden}
.hk-pad{padding:18px}
.hk-hr{height:1px;border:0;margin:0}
.hk-ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hk-svg{display:block;width:100%;height:auto}
.hk-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
/* 내비게이션 */
.hk-nav{display:flex;align-items:center;gap:22px;padding-block:14px}
.hk-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;white-space:nowrap}
.hk-logo i{width:26px;height:26px;border-radius:7px;display:inline-block;flex-shrink:0}
.hk-menu{display:flex;gap:20px;flex:1;flex-wrap:wrap;font-size:14px;font-weight:600}
/* 게시판 목록 행 */
.hk-brow{display:grid;grid-template-columns:52px minmax(0,1fr) 92px 84px 52px;gap:10px;align-items:center;padding-block:12px;font-size:14px}
.hk-page{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding-block:10px}
.hk-pbtn{min-width:34px;height:34px;border-radius:8px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;cursor:pointer;padding:0 6px}
/* 폼 */
.hk-drop{border:2px dashed transparent;border-radius:12px;padding-block:26px;text-align:center;padding-inline:16px}
.hk-field{margin-bottom:16px}
.hk-check{display:flex;gap:8px;align-items:center;font-size:14px}
/* 타임라인 */
.hk-tl{position:relative;padding:0 0 26px 22px;border-left:2px solid transparent;margin-left:6px}
.hk-tl i{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%}
/* 푸터 */
.hk-foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding-block:44px 28px}
.hk-foot ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:13px}
.hk-tabs{display:flex;gap:8px;flex-wrap:wrap}
.hk-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@container (max-width:700px){
  .hk-g3,.hk-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hk-g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hk-hero21,.hk-hero32{grid-template-columns:1fr}
  .hk-foot{grid-template-columns:1fr 1fr}
}
@container (max-width:560px){
  .hk-sm-hide{display:none}
  .hk-brow{grid-template-columns:40px minmax(0,1fr) 74px}
  .hk-metrics{grid-template-columns:1fr;gap:10px}
  .hk-foot{grid-template-columns:1fr}
}