/* history/assets/style.css */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --brand:#2563eb;
  --r:16px;
  --shadow:0 14px 40px rgba(2,6,23,.08);
}

.hx-shell{background:var(--bg); color:var(--text); padding:18px 0;}
.hx-hero{padding:18px 0 8px;}
.hx-hero__inner{max-width:1080px;margin:0 auto;padding:0 16px;}
.hx-kicker{margin:0 0 6px;color:var(--muted);font-size:13px}
.hx-h1{margin:0;font-size:34px;line-height:1.15;font-weight:900;letter-spacing:-.6px}
.hx-lede{margin:10px 0 0;color:#334155;max-width:60ch;line-height:1.75}

.hx-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hx-tag{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:#334155}

.hx-body{max-width:1080px;margin:0 auto;padding:0 16px;display:block}
@media (min-width:1024px){
  .hx-body{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
}

/* 모바일 목차 */
.hx-tocm{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:10px 12px}
@media (min-width:1024px){ .hx-tocm{display:none} }
.hx-tocm__sum{cursor:pointer;font-weight:800}
.hx-tocm__nav{display:grid;gap:6px;margin-top:10px}
.hx-tocm__nav a{color:#334155;text-decoration:none}
.hx-tocm__nav a:hover{text-decoration:underline}

/* PC 사이드 */
.hx-side{display:none}
@media (min-width:1024px){ .hx-side{display:block} }
.hx-side__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.hx-side__title{font-weight:900;margin-bottom:10px}
.hx-side__nav{display:grid;gap:8px}
.hx-side__nav a{color:#334155;text-decoration:none;font-size:14px}
.hx-side__nav a:hover{text-decoration:underline}

/* ✅ sticky: 되면 좋고, 안 되면 그냥 카드로 남는다 */
@media (min-width:1024px){
  .hx-side{position:-webkit-sticky;position:sticky;top:14px;align-self:start}
}

/* 본문 */
.hx-article{min-width:0}
.hx-sec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.hx-h2{margin:0 0 8px;font-size:18px;font-weight:900;letter-spacing:-.2px}
.hx-time{display:inline-block;color:var(--brand);font-weight:900;margin-right:8px}
.hx-p{margin:0;color:#0f172a;line-height:1.85}

.hx-foot{margin-top:18px}
.hx-ref{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.hx-ref__t{font-weight:900;margin-bottom:10px}
.hx-ul{margin:0;padding-left:18px;color:#334155}

.hx-nav{display:grid;gap:10px;margin-top:14px}
@media (min-width:768px){ .hx-nav{grid-template-columns:1fr 1fr;} }
.hx-nav__a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-decoration:none;color:var(--text)}
.hx-nav__a:hover{background:#f1f5f9}

/* 앵커 이동 보정 */
.hx-sec{scroll-margin-top:90px}

/* 접근성 */
.hx-nav__a:focus-visible,
.hx-side__nav a:focus-visible,
.hx-tocm__nav a:focus-visible{
  outline:0;
  box-shadow:0 0 0 .25rem rgba(37,99,235,.22);
  border-radius:10px;
}
.hx-lede{
  margin:10px 0 0;
  color:#334155;
  max-width:60ch;
  line-height:1.75;
  font-size:1.05rem; /* ✅ 추가 */
}

@media (max-width:640px){
  .hx-lede{ font-size:1rem; } /* ✅ 모바일 보정 */
}
.hx-p{
  margin:0;
  color:#0f172a;
  line-height:1.85;
  font-size:1rem; /* ✅ 선택 */
}
.hx-ul{margin:0;padding-left:18px;color:#334155}
.hx-ul li{margin:6px 0}
.hx-lede{font-size:1.05rem}

/* breadcrumb */
.hx-bc{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:13px}
.hx-bc a{color:inherit;text-decoration:none}
.hx-bc a:hover{text-decoration:underline}

/* card grid */
.hx-cardgrid{display:grid;gap:14px;margin-top:12px}
@media (min-width:768px){ .hx-cardgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .hx-cardgrid{grid-template-columns:repeat(3,1fr)} }

.hx-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.hx-imgbox{border-radius:12px;overflow:hidden;background:#e2e8f0;margin-bottom:10px}
.hx-cap{font-weight:900;margin:0 0 6px}

/* timeline */
.hx-tl{position:relative;margin-top:10px;padding-left:18px}
.hx-tl:before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.hx-tl__item{position:relative;display:flex;gap:12px;margin:12px 0}
.hx-tl__dot{width:12px;height:12px;border-radius:999px;background:var(--brand);margin-left:-1px;flex:0 0 12px;transform:translateX(-12px)}
.hx-tl__content{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04);width:100%}
.hx-tl__year{font-weight:900;color:var(--brand);margin-bottom:6px}

/* table */
.hx-tablewrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.hx-table{width:100%;border-collapse:collapse;min-width:520px}
.hx-table th,.hx-table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;font-size:14px}
.hx-table thead th{background:#f1f5f9;font-weight:900}
.hx-table tbody tr:last-child td{border-bottom:0}

/* lists */
.hx-ul{margin:0;padding-left:18px;color:#334155}
.hx-ul li{margin:6px 0}

/* table */
.hx-tablewrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.hx-table{width:100%;border-collapse:collapse;min-width:520px}
.hx-table th,.hx-table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;font-size:14px}
.hx-table thead th{background:#f1f5f9;font-weight:900}
.hx-table tbody tr:last-child td{border-bottom:0}
.hx-ul{margin:0;padding-left:18px;color:#334155}
.hx-ul li{margin:6px 0}

/* ===== hx 페이지 공통 보강 ===== */
.hx-shell{
  font-size:16px; /* 테마/부트스트랩에 눌려도 기본 크기 고정 */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* breadcrumb */
.hx-bc{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}
.hx-bc a{ color:inherit; text-decoration:none; }
.hx-bc a:hover{ text-decoration:underline; }

/* 카드 그리드 */
.hx-cardgrid{
  display:grid;
  gap:12px;
  margin-top:10px;
}
@media (min-width:768px){
  .hx-cardgrid{ grid-template-columns:repeat(3, 1fr); gap:14px; }
}

.hx-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:12px;
}

.hx-imgbox{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#f8fafc;
  margin-bottom:10px;
}
.hx-imgbox svg{ display:block; width:100%; height:auto; }

.hx-cap{
  font-weight:900;
  letter-spacing:-.2px;
  margin:0 0 6px;
}

/* 타임라인 */
.hx-tl{
  position:relative;
  margin-top:10px;
  padding-left:18px;
}
.hx-tl:before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  bottom:6px;
  width:2px;
  background:var(--line);
}
.hx-tl__item{
  position:relative;
  padding:0 0 12px 0;
}
.hx-tl__dot{
  position:absolute;
  left:-2px;
  top:8px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.hx-tl__content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-left:10px;
}
.hx-tl__year{
  font-weight:900;
  color:var(--brand);
  margin-bottom:4px;
}

/* 본문 문장 크기 통일 */
.hx-lede{ font-size:15px; }
.hx-p{ font-size:14.5px; line-height:1.85; }

/* 카드 이미지 줌(PC hover) */
.hx-imgbox {
  overflow: hidden;
  border-radius: 14px;
}

.hx-imgbox img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1);
  transition: transform .25s ease;
}

/* 카드 전체에 올리면 이미지 확대 */
.hx-card:hover .hx-imgbox img{
  transform: scale(1.08);
}