/* ============================================================
   관향 기록소 · 공통 스타일
   팔레트 : 백지(白) 위 감청(紺靑). 족보 판식(版式)을 차용.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --paper-2:#F5F8FC;
  --paper-3:#EDF3FA;

  --ink:#0F1B2D;
  --ink-2:#41556E;
  --ink-3:#7C8EA5;

  --navy:#1B4D8F;      /* 주색 · 독립유공자 */
  --navy-deep:#123566;
  --azure:#2E7BD6;     /* 강조 · 링크 */
  --azure-soft:#E3EEFB;

  --crimson:#B42318;   /* 친일반민족행위자 */
  --crimson-soft:#FDECEA;

  --cta:#E5342A;       /* 행동 유도 · 본문 적색과 구분되는 주황빛 적색 */
  --cta-deep:#C0221A;

  --rule:#DCE5EF;
  --rule-strong:#B9CBE0;

  --shadow-sm:0 1px 2px rgba(15,27,45,.06);
  --shadow-md:0 4px 16px rgba(15,27,45,.08);
  --shadow-lg:0 12px 40px rgba(15,27,45,.10);

  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --wrap:920px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.01em;
  word-break:keep-all;
}

a{color:var(--azure);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid var(--azure);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- 상단 머리표 ---------- */
.masthead{
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,#FBFDFF 0%,#FFFFFF 100%);
  padding:34px 0 30px;
  text-align:center;
}
.masthead .eyebrow{
  font-size:12px;letter-spacing:.22em;color:var(--ink-3);
  font-weight:500;margin:0 0 10px;
}
.masthead h1{
  font-family:'Gowun Batang',serif;font-weight:700;
  font-size:clamp(30px,6.4vw,46px);
  color:var(--navy-deep);margin:0;letter-spacing:-.02em;
}
.masthead .lede{
  margin:12px auto 0;max-width:620px;
  color:var(--ink-2);font-size:15px;
}

/* 어미(魚尾) — 족보 판심의 표지. 구획의 시작을 뜻함 */
.eomi{display:block;margin:0 auto 14px;width:26px;height:16px;color:var(--navy)}

/* ---------- 검색 ---------- */
.searchbar{position:relative;margin:26px auto 0;max-width:640px}
.searchrow{display:flex;gap:10px}
/* 흰 바탕 위 흰 입력칸에 연회색 테두리를 두르면 경계가 묻힌다.
   감청색 테두리와 옅은 배경으로 '여기에 쓰는 자리'임을 드러낸다. */
.searchrow input{
  flex:1;min-width:0;height:58px;padding:0 18px;
  font-family:inherit;font-size:17px;color:var(--ink);
  background:#F7FAFE;
  border:2.5px solid var(--navy);border-radius:var(--r-md);
  box-shadow:0 2px 8px rgba(27,77,143,.10);
  transition:background .15s,box-shadow .15s;
}
.searchrow input::placeholder{color:#8FA3BC}
.searchrow input:focus{
  outline:none;background:var(--paper);
  box-shadow:0 0 0 4px var(--azure-soft);
}

.cta{
  position:relative;overflow:hidden;isolation:isolate;
  flex:0 0 auto;height:58px;padding:0 30px;
  font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:#fff;background:var(--cta);
  border:none;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 14px rgba(229,52,42,.32);
  transition:background .15s,transform .08s,box-shadow .15s;
}
.cta:hover{background:var(--cta-deep);box-shadow:0 6px 20px rgba(229,52,42,.42)}
.cta:active{transform:translateY(1px)}

/* 광택 스윕 — 버튼 위를 빛이 훑고 지나간다 */
.cta::after{
  content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.48) 50%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-22deg);
  animation:sweep 2.6s ease-in-out infinite;
  pointer-events:none;z-index:-1;
}
@keyframes sweep{
  0%   {left:-70%}
  55%  {left:135%}
  100% {left:135%}
}

.cta[disabled]{background:#C4B5B3;cursor:not-allowed;box-shadow:none}
.cta[disabled]::after{display:none}

@media (max-width:560px){
  /* 세로로 쌓이면 입력칸이 버튼보다 작아 보인다. 둘 다 같은 크기로 묶는다.
     iOS 사파리는 입력칸 기본 모양을 강제로 줄이므로 appearance 를 끈다.
     font-size 를 16px 이상으로 둬야 입력할 때 화면이 확대되지 않는다. */
  .searchrow{flex-direction:column;gap:12px}

  .searchbar .searchrow input,
  .searchbar .searchrow .cta{
    height:64px;
    min-height:64px;
    border-radius:14px;
    font-size:17px;
    width:100%;
    -webkit-appearance:none;
    appearance:none;
  }
  .searchbar .searchrow input{
    padding:0 16px;
    text-align:center;
    line-height:normal;
  }
  .searchbar .searchrow .cta{
    padding:0;
    font-size:18px;
    font-weight:700;
  }

  .suggest{top:76px}
  .searchhint{font-size:12px;padding:0 4px}
}

/* 안내 문구가 길어 잘리지 않도록 */
.searchrow input::placeholder{font-size:.94em}

/* 자동완성 */
.suggest{
  position:absolute;z-index:40;left:0;right:0;top:62px;
  background:var(--paper);border:1px solid var(--rule-strong);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  max-height:340px;overflow-y:auto;display:none;
}
.suggest.open{display:block}
.suggest li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--paper-3);
}
.suggest li:last-child{border-bottom:none}
.suggest li:hover,.suggest li[aria-selected="true"]{background:var(--azure-soft)}
.suggest .s-name{font-weight:600;font-size:15.5px;color:var(--ink)}
.suggest .s-name em{font-style:normal;color:var(--azure);font-weight:700}
.suggest .s-count{font-size:12.5px;color:var(--ink-3);white-space:nowrap;flex-shrink:0}
.suggest .s-count b{font-weight:600}
.suggest .s-count .c-ind{color:var(--navy)}
.suggest .s-count .c-col{color:var(--crimson)}
.suggest .s-empty{padding:18px 16px;color:var(--ink-3);font-size:14px;text-align:center}

/* 인기 본관 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px auto 0;max-width:640px}
.chips .chip-label{width:100%;text-align:center;font-size:12.5px;color:var(--ink-3);margin-bottom:2px}
.chip{
  padding:7px 14px;font-size:14px;font-family:inherit;color:var(--navy);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:999px;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.chip:hover{background:var(--azure-soft);border-color:var(--rule-strong)}

.masthead.compact{padding:18px 0 16px}
.masthead.compact .eyebrow{letter-spacing:0;font-size:13px;color:var(--ink-3)}
.masthead h1.sm{font-size:clamp(20px,4.4vw,28px);margin-top:6px}

/* ---------- 광고 슬롯 ---------- */
.adslot{margin:34px auto;max-width:var(--wrap);padding:0 20px;min-height:1px}
.adslot .adslot-note{
  display:block;text-align:center;font-size:11px;color:#B6C2D0;
  letter-spacing:.1em;margin-bottom:6px;
}
.adslot-ph{
  height:96px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#98A8BB;
  background:var(--paper-2);border:1px dashed var(--rule);border-radius:var(--r-sm);
}

/* ---------- 결과 카드(저장·공유용) ---------- */
.record{
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:14px;
  margin:0 auto;
  max-width:720px;
}
/* 사주쌍변(四周雙邊) — 판식의 이중 테두리 */
.record-inner{
  border:2px solid var(--navy);
  border-radius:10px;
  padding:34px 26px 30px;
  position:relative;
}
.record-inner::after{
  content:"";position:absolute;inset:5px;
  border:1px solid var(--rule-strong);border-radius:6px;pointer-events:none;
}

.rec-eyebrow{
  text-align:center;font-size:12px;letter-spacing:.2em;
  color:var(--ink-3);margin:0 0 6px;
}
.rec-title{
  font-family:'Gowun Batang',serif;font-weight:700;
  font-size:clamp(34px,7.4vw,52px);
  text-align:center;color:var(--navy-deep);
  margin:0;line-height:1.15;letter-spacing:-.02em;
}
.rec-title .han{font-size:.46em;color:var(--ink-3);font-weight:400;margin-left:.24em;letter-spacing:0}

.rec-divider{
  display:flex;align-items:center;gap:10px;
  margin:22px 0 24px;
}
.rec-divider span{flex:1;height:1px;background:var(--rule-strong)}
.rec-divider i{width:7px;height:7px;border-radius:50%;background:var(--navy);flex:0 0 auto}

/* 계선(界線)으로 나뉜 두 칸 */
.rec-cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:0}
.rec-rule{background:var(--rule-strong)}
.rec-col{padding:0 16px;text-align:center}

.rec-cat{
  font-family:'Gowun Batang',serif;font-weight:700;
  font-size:16px;margin:0 0 2px;letter-spacing:-.01em;
}
.rec-cat.ind{color:var(--navy)}
.rec-cat.col{color:var(--crimson)}
.rec-num{
  font-family:'Gowun Batang',serif;font-weight:700;
  font-size:40px;line-height:1.1;margin:0;
}
.rec-num.ind{color:var(--navy)}
.rec-num.col{color:var(--crimson)}
.rec-num small{font-size:.44em;font-weight:400;margin-left:2px}
.rec-src{font-size:11px;color:var(--ink-3);margin:2px 0 14px}

.rec-names{list-style:none;margin:0;padding:0}
.rec-names li{font-size:16px;font-weight:500;color:var(--ink);padding:3px 0}
.rec-names li.more{font-size:13px;color:var(--ink-3);font-weight:400;padding-top:6px}
.rec-names li.none{font-size:14px;color:var(--ink-3);font-weight:400}

.rec-foot{
  margin:26px 0 0;padding-top:14px;border-top:1px solid var(--paper-3);
  font-size:11px;color:var(--ink-3);text-align:center;line-height:1.6;
}

@media (max-width:520px){
  .rec-col{padding:0 8px}
  .rec-names li{font-size:15px}
  .rec-num{font-size:34px}
}

/* ---------- 액션 버튼 ---------- */
.actions{display:flex;gap:10px;max-width:720px;margin:16px auto 0}
.act{
  flex:1;height:52px;font-family:inherit;font-size:15.5px;font-weight:600;
  border-radius:var(--r-md);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,border-color .15s;
}
.act.primary{color:#fff;background:var(--navy);border:none;box-shadow:var(--shadow-sm)}
.act.primary:hover{background:var(--navy-deep)}
.act.ghost{color:var(--navy);background:var(--paper);border:1.5px solid var(--rule-strong)}
.act.ghost:hover{background:var(--paper-2);border-color:var(--navy)}
.act svg{width:17px;height:17px}
@media (max-width:520px){.act{font-size:14.5px}}

/* ---------- 고지 박스 ---------- */
/* 담긴 자리의 폭을 그대로 따른다. 본문이 920이면 920, 카드 단이면 720.
   따로 폭을 정해두면 표나 카드와 어긋나 통일감이 깨진다. */
.notice{
  margin:26px 0 34px;
  background:var(--paper-2);border:1px solid var(--rule);
  border-left:4px solid var(--navy);
  border-radius:var(--r-sm);padding:17px 20px;
  font-size:13.5px;line-height:1.75;color:var(--ink-2);
}
.notice b{color:var(--ink)}

/* 기록 카드와 같은 단으로 묶는 상자 */
.narrow{max-width:720px;margin:0 auto}
.narrow .notice{margin-bottom:0}

/* ---------- 인물 상세 ---------- */
.detail{max-width:720px;margin:44px auto 0}
.detail-h{
  font-family:'Gowun Batang',serif;font-weight:700;font-size:21px;
  color:var(--ink);margin:0 0 22px;letter-spacing:-.02em;
}

.group{margin-bottom:34px}
.group-h{
  display:flex;align-items:baseline;gap:9px;
  margin:0 0 14px;padding-bottom:9px;border-bottom:2px solid var(--rule);
  position:relative;
}
.group-h::after{content:"";position:absolute;left:0;bottom:-2px;width:74px;height:2px}
.group.ind .group-h::after{background:var(--navy)}
.group.col .group-h::after{background:var(--crimson)}
.group-h .t{font-family:'Gowun Batang',serif;font-weight:700;font-size:18px}
.group.ind .group-h .t{color:var(--navy)}
.group.col .group-h .t{color:var(--crimson)}
.group-h .n{font-size:13.5px;color:var(--ink-3)}

.person{
  background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:17px 19px;margin-bottom:10px;
}
.person-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin-bottom:5px}
.person-name{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.person-life{font-size:13.5px;color:var(--ink-3)}
.tag{
  font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:999px;line-height:1.5;
}
.tag.gov{color:var(--crimson);background:var(--crimson-soft)}
.tag.dict{color:#8A5A00;background:#FDF3E2}
.tag.award{color:var(--navy);background:var(--azure-soft)}
.person-meta{font-size:13.5px;color:var(--ink-2);margin:0 0 7px}
.person-note{font-size:14.5px;color:var(--ink);margin:0;line-height:1.7}
.person-src{margin-top:9px;font-size:12.5px;color:var(--ink-3)}

.more-btn{
  width:100%;height:48px;font-family:inherit;font-size:14.5px;font-weight:600;
  color:var(--navy);background:var(--paper-2);
  border:1px solid var(--rule-strong);border-radius:var(--r-md);cursor:pointer;
}
.more-btn:hover{background:var(--azure-soft)}
.empty{
  padding:22px;text-align:center;color:var(--ink-3);font-size:14.5px;
  background:var(--paper-2);border:1px dashed var(--rule-strong);border-radius:var(--r-md);
}
.fold[hidden]{display:none}
.umnote{
  margin:22px 0 0;padding:14px 16px;
  font-size:13px;line-height:1.75;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-sm);
}

/* 검색 결과 칩은 링크이므로 밑줄을 지운다 */
a.chip{text-decoration:none;display:inline-block}
a.chip:hover{text-decoration:none}

/* ---------- 책 ---------- */
.books{max-width:var(--wrap);margin:52px auto 0;padding:0 20px}
.books-h{
  font-family:'Gowun Batang',serif;font-weight:700;font-size:19px;
  color:var(--ink);margin:0 0 16px;
}
.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:760px){.book-grid{grid-template-columns:repeat(2,1fr)}}
.book{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:14px;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s;
}
.book:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-md)}
.book-img{
  aspect-ratio:3/4;background:var(--paper-3);border-radius:var(--r-sm);
  margin-bottom:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-3);
}
.book-img img{width:100%;height:100%;object-fit:cover}
.book-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.45;margin:0 0 4px}
.book-a{font-size:12.5px;color:var(--ink-3);margin:0 0 12px}
.book-btn{
  margin-top:auto;display:block;text-align:center;
  padding:9px 0;font-size:13.5px;font-weight:600;
  color:#fff;background:var(--navy);border-radius:var(--r-sm);
}
.book-btn:hover{background:var(--navy-deep);text-decoration:none}
.aff-note{margin:14px 0 0;font-size:12px;color:var(--ink-3)}

/* ---------- 꼬리말 ---------- */
.foot{
  margin-top:56px;border-top:1px solid var(--rule);
  background:var(--paper-2);padding:26px 0 40px;
}
.foot .wrap{font-size:12.5px;color:var(--ink-3);line-height:1.8}
.foot a{color:var(--ink-2)}
.foot .backlink{display:inline-block;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--navy)}

/* ---------- 토스트 ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;font-size:14px;font-weight:500;
  padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.shake{animation:shake .32s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

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

/* ============================================================
   인물 기록 · 분야/분류 · 검색 확장
   ============================================================ */

.searchwrap{
  background:linear-gradient(180deg,#FBFDFF 0%,#FFFFFF 100%);
  border-bottom:1px solid var(--rule);
  padding:0 0 30px;
}
.searchwrap .searchbar{margin-top:0}

.sec-h{
  font-family:'Gowun Batang',serif;font-weight:700;font-size:21px;
  color:var(--ink);margin:44px 0 6px;letter-spacing:-.02em;
}
.sec-p{margin:0 0 16px;font-size:14px;color:var(--ink-2)}

.lead-n{
  margin:26px 0 18px;font-size:15px;color:var(--ink-2);
  padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.lead-n b{color:var(--ink);font-size:17px}

/* 분야 카드 */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media (max-width:760px){.fgrid{grid-template-columns:repeat(2,1fr)}}
.fcard{
  display:flex;flex-direction:column;gap:2px;
  padding:18px 16px;text-decoration:none;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-md);
  transition:border-color .15s,background .15s,transform .08s;
}
.fcard:hover{background:var(--azure-soft);border-color:var(--rule-strong);text-decoration:none}
.fcard:active{transform:translateY(1px)}
.fc-n{font-family:'Gowun Batang',serif;font-weight:700;font-size:30px;color:var(--navy);line-height:1.1}
.fc-t{font-size:15.5px;font-weight:600;color:var(--ink)}
.fc-s{font-size:12.5px;color:var(--ink-3)}

/* 분류 목록 */
.clist{display:flex;flex-direction:column;gap:8px;margin-bottom:34px}
.crow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;text-decoration:none;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);
  transition:border-color .15s,background .15s;
}
.crow:hover{background:var(--paper-2);border-color:var(--rule-strong);text-decoration:none}
.cr-t{font-size:16px;font-weight:600;color:var(--ink)}
.cr-n{font-size:13.5px;color:var(--ink-3);white-space:nowrap}

/* 인물 기록 */
.people{margin-top:20px}
.people .person{margin-bottom:12px;scroll-margin-top:20px}
.person:target{
  border-color:var(--navy);
  box-shadow:0 0 0 3px var(--azure-soft);
}
.person-hanja{font-size:14.5px;color:var(--ink-3);font-weight:400}
.acts{margin:8px 0 0;padding-left:18px}
.acts li{font-size:14.5px;line-height:1.75;color:var(--ink);margin-bottom:3px}
.laws{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tag.law{
  color:var(--ink-2);background:var(--paper-3);
  font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:999px;cursor:help;
}

/* 법호 설명 */
.legend{
  margin:0 0 22px;padding:14px 18px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-sm);
}
.legend summary{
  cursor:pointer;font-size:14.5px;font-weight:600;color:var(--navy);
  list-style:none;
}
.legend summary::-webkit-details-marker{display:none}
.legend summary::before{content:"▸ ";color:var(--ink-3)}
.legend[open] summary::before{content:"▾ "}
.legend-p{margin:10px 0 8px;font-size:13px;color:var(--ink-3)}
.legend ul{margin:0;padding-left:18px}
.legend li{font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.legend li b{color:var(--navy);margin-right:4px}

/* 본관 블록 */
.clanbox{margin-top:12px}
.clanbox .chips{justify-content:flex-start;max-width:none;margin-top:0}

/* 검색 결과 한자 */
.suggest .s-han{color:var(--ink-3);font-weight:400;font-size:13.5px}

/* ---------- 독립유공자 표 ---------- */
.ptable-wrap{
  border:1px solid var(--rule);border-radius:var(--r-md);
  overflow:hidden;margin-bottom:20px;
}
.ptable{width:100%;border-collapse:collapse;font-size:14.5px}
.ptable thead th{
  background:var(--paper-2);color:var(--ink-2);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.ptable td{padding:11px 14px;border-bottom:1px solid var(--paper-3);vertical-align:top}
.ptable tbody tr:last-child td{border-bottom:none}
.ptable tbody tr:nth-child(even){background:#FCFDFF}
.ptable tr:target{background:var(--azure-soft) !important}
.ptable .pn{font-weight:600;color:var(--ink);white-space:nowrap}
.ptable .pl{color:var(--ink-3);font-size:13.5px;white-space:nowrap}
.ptable .pm{color:var(--ink-2)}
.ptable .pa{color:var(--navy);font-size:13.5px;white-space:nowrap}

@media (max-width:640px){
  .ptable{font-size:13.5px}
  .ptable thead th:nth-child(4),.ptable td.pa{display:none}
  .ptable td,.ptable thead th{padding:10px}
  .ptable .pm{font-size:12.5px}
}

/* 독립유공자 계열 카드는 색을 달리해 친일 쪽과 구분한다 */
.fcard.alt .fc-n{color:var(--navy-deep)}
.fcard.alt{background:#F7FAFE}

/* ---------- 본관 판정 안내 ---------- */
.verdict{
  max-width:720px;margin:26px auto 0;
  padding:16px 18px;border-radius:var(--r-sm);
  font-size:14px;line-height:1.75;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule);
  border-left:4px solid var(--ink-3);
}
.verdict b{color:var(--ink);font-size:15px}
.verdict.clear{
  background:#F2F8F3;border-color:#CFE4D4;border-left-color:#2E7D4F;
}
.verdict.clear b{color:#1E6B3F}

/* ---------- 성씨 페이지 본관 목록 ---------- */
.bgbox{max-width:720px;margin:26px auto 0}
.bg-h{
  font-family:'Gowun Batang',serif;font-weight:700;font-size:15.5px;
  color:var(--ink-2);margin:0 0 10px;
}
.chip.static{
  padding:6px 12px;font-size:13px;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:999px;
}
.chip.static.on{
  color:#fff;background:var(--navy);border-color:var(--navy);font-weight:600;
}

.searchhint{
  margin:11px 0 0;text-align:center;
  font-size:12.5px;color:var(--ink-3);line-height:1.6;
}

/* ---------- 본관 확인 표시 ---------- */
.tag.ok{
  color:#1E6B3F;background:#E7F3EA;border:1px solid #CFE4D4;
  font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;
}
.tag.unk{
  color:var(--ink-3);background:var(--paper-2);border:1px solid var(--rule);
  font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;
}
.person-src{
  margin:9px 0 0;padding-top:8px;border-top:1px solid var(--paper-3);
  font-size:12px;color:var(--ink-3);
}

.bggroup{margin-bottom:22px}
.bg-title{
  font-family:'Gowun Batang',serif;font-weight:700;font-size:16px;
  color:var(--navy-deep);margin:0 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--rule);
}
.bg-title span{font-family:'Noto Sans KR',sans-serif;font-weight:400;
  font-size:13px;color:var(--ink-3);margin-left:6px}
.bggroup.on .bg-title{color:var(--navy)}
.bggroup.on{
  background:var(--azure-soft);border-radius:var(--r-md);
  padding:14px 14px 2px;margin-left:-14px;margin-right:-14px;
}

/* 접히는 상자 */
.foldbox{
  margin:18px 0 0;padding:14px 16px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-sm);
}
.foldbox summary{
  cursor:pointer;font-size:14.5px;font-weight:600;color:var(--navy);list-style:none;
}
.foldbox summary::-webkit-details-marker{display:none}
.foldbox summary::before{content:"▸ ";color:var(--ink-3)}
.foldbox[open] summary::before{content:"▾ "}
.fold-p{margin:10px 0 14px;font-size:13px;color:var(--ink-3);line-height:1.7}

/* 기록 카드 단(720px)에 맞춘 광고. 앞뒤 요소와 폭이 어긋나면
   그 부분만 비어져 보여 광고가 이질적으로 느껴진다. */
.adslot.narrow-ad{max-width:calc(720px + 40px)}

/* 광고 앞뒤로 숨 쉴 자리를 둔다 */
.adslot{margin:38px auto}
@media (max-width:560px){.adslot{margin:30px auto}}