@charset "utf-8";
/* ============================================================
   하나로 USA · 게시판 스킨 (당근/SEED 디자인 언어)
   - 색·글자·모서리·여백은 전부 SEED 토큰 값만 사용
   - 레이아웃(layouts/hanaro/css/layout.css)이 없어도 혼자 서도록
     토큰을 이 파일 안에 다시 선언한다(이름은 --hb-* 로 분리해 충돌 없음)
   - 주황(#ff6600)은 「글쓰기·현재 쪽·고른 말머리·새 글 점」에만. 화면의 5% 이하
   ============================================================ */

.hb-board{
  /* SEED 회색 11단 */
  --hb-g0:#ffffff;   --hb-g100:#f7f8f9; --hb-g200:#f3f4f5; --hb-g300:#eeeff1;
  --hb-g400:#dcdee3; --hb-g500:#d1d3d8; --hb-g600:#b0b3ba; --hb-g700:#868b94;
  --hb-g800:#555d6d; --hb-g900:#2a3038; --hb-g1000:#1a1c20;
  /* SEED 당근 주황 10단 */
  --hb-c100:#fff2ec; --hb-c200:#ffe8db; --hb-c300:#ffd5c0; --hb-c400:#ffb999;
  --hb-c500:#ff9364; --hb-c600:#ff6600; --hb-c700:#e14d00; --hb-c800:#b93901;
  --hb-c900:#862b00; --hb-c1000:#471601;
  /* 역할색 */
  --hb-blue:#217cf9; --hb-red:#fa342c; --hb-green:#079171;

  /* 의미 토큰 — 밝은 화면 */
  --hb-bg:var(--hb-g100);
  --hb-surface:var(--hb-g0);
  --hb-sunken:var(--hb-g200);
  --hb-line:var(--hb-g300);
  --hb-line-strong:var(--hb-g400);
  --hb-title:var(--hb-g1000);
  --hb-body:var(--hb-g900);
  --hb-sub:var(--hb-g800);
  --hb-weak:var(--hb-g700);
  --hb-disabled:var(--hb-g600);
  --hb-brand:var(--hb-c600);
  --hb-brand-press:var(--hb-c700);
  --hb-brand-text:var(--hb-c700);   /* 흰 바탕 위 주황 글자 — 대비 확보용 한 단 어둡게 */
  --hb-brand-tint:var(--hb-c100);
  --hb-brand-line:var(--hb-c300);
  --hb-on-brand:var(--hb-g0);
  --hb-danger:var(--hb-red);
  --hb-lift:var(--hb-g300);

  --hb-font: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  font-family:var(--hb-font);
  font-size:16px;
  line-height:24px;
  font-weight:400;
  color:var(--hb-body);
  overflow-wrap:break-word;
  word-break:break-word;
}

/* 어두운 화면 — 새 색을 만들지 않고 같은 팔레트를 뒤집어 쓴다 */
@media (prefers-color-scheme: dark){
  .hb-board{
    --hb-bg:var(--hb-g1000);
    --hb-surface:var(--hb-g900);
    --hb-sunken:var(--hb-g1000);
    --hb-line:var(--hb-g800);
    --hb-line-strong:var(--hb-g700);
    --hb-title:var(--hb-g0);
    --hb-body:var(--hb-g200);
    --hb-sub:var(--hb-g500);
    --hb-weak:var(--hb-g600);
    --hb-disabled:var(--hb-g700);
    --hb-brand:var(--hb-c500);
    --hb-brand-press:var(--hb-c600);
    --hb-brand-text:var(--hb-c500);
    --hb-brand-tint:var(--hb-c1000);
    --hb-brand-line:var(--hb-c900);
    --hb-on-brand:var(--hb-g1000);
    --hb-danger:var(--hb-c500);
    --hb-lift:var(--hb-g1000);
  }
}

.hb-board *,.hb-board *::before,.hb-board *::after{box-sizing:border-box}
.hb-board h1,.hb-board h2,.hb-board h3,.hb-board h4{margin:0;color:var(--hb-title);font-weight:700}
.hb-board p{margin:0}
.hb-board ul,.hb-board ol{margin:0;padding:0;list-style:none}
.hb-board a{color:inherit;text-decoration:none}
.hb-board img{max-width:100%;height:auto}
.hb-board svg{display:block;flex:none}
/* flex·grid 자식의 자동 최소너비가 칸을 밀어내는 것을 구조로 막는다 */
.hb-board .hb-feed li,.hb-board .hb-feed a,.hb-board .hb-row,.hb-board .hb-cell{min-width:0}

.hb-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ══════════════ 공통 단추 ══════════════ */
.hb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding-block:0;padding-inline:16px;
  border:1px solid var(--hb-line-strong);border-radius:10px;
  background:var(--hb-surface);color:var(--hb-sub);
  font-family:inherit;font-size:14px;line-height:19px;font-weight:500;
  cursor:pointer;
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.hb-btn:hover{background:var(--hb-sunken);color:var(--hb-title)}
.hb-btn--primary{
  background:var(--hb-brand);border-color:var(--hb-brand);color:var(--hb-on-brand);font-weight:700;
}
.hb-btn--primary:hover{background:var(--hb-brand-press);border-color:var(--hb-brand-press);color:var(--hb-on-brand)}
.hb-btn--danger{color:var(--hb-danger)}
.hb-btn--danger:hover{color:var(--hb-danger)}
.hb-btn--sm{min-height:44px;padding-inline:12px;font-size:13px;line-height:18px;border-radius:8px}

/* ══════════════ 게시판 머리 ══════════════ */
.hb-board{background:transparent}
.hb-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;
}
.hb-head h2{font-size:22px;line-height:30px}
.hb-head h2 img{max-height:40px;width:auto}
.hb-head .hb-setup{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;color:var(--hb-weak);
  font-size:13px;line-height:18px;
}
.hb-head .hb-setup:hover{color:var(--hb-title)}

.hb-notice-text{
  background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:12px;
  padding:16px;margin-bottom:12px;
  font-size:14px;line-height:19px;color:var(--hb-sub);
}
.hb-notice-text:empty{display:none}

/* ══════════════ 말머리 = 완전히 둥근 칩 · 가로 스크롤 ══════════════ */
.hb-chips{
  display:flex;gap:6px;align-items:center;
  margin-bottom:12px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding-block:2px;
}
.hb-chips::-webkit-scrollbar{display:none}
.hb-chips>li{flex:none;scroll-snap-align:start}
.hb-chips>li>a{
  display:inline-flex;align-items:center;
  min-height:44px;padding-inline:16px;
  border:1px solid var(--hb-line-strong);border-radius:9999px;
  background:var(--hb-surface);
  font-size:14px;line-height:19px;font-weight:500;color:var(--hb-sub);
  white-space:nowrap;
  transition:background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.hb-chips>li>a:hover{background:var(--hb-sunken);border-color:var(--hb-g600);color:var(--hb-title)}
.hb-chips>li.on>a{
  border-color:var(--hb-brand);color:var(--hb-brand-text);
  background:var(--hb-brand-tint);font-weight:700;
}
/* 2단계 말머리 — 아래 줄에 작게 */
.hb-chips--sub{margin-top:-4px}
.hb-chips--sub>li>a{min-height:44px;padding-inline:12px;font-size:13px;line-height:18px}

/* ══════════════ 글 목록 = 한 줄에 한 건 ══════════════ */
.hb-listwrap{
  background:var(--hb-surface);
  border:1px solid var(--hb-line);border-radius:16px;
  padding-inline:18px;
  overflow:hidden;
}
.hb-feed>li + li{border-top:1px solid var(--hb-line)}
.hb-feed a.hb-item{
  display:flex;flex-direction:column;gap:6px;
  padding-block:14px;min-height:44px;justify-content:center;
}
.hb-feed a.hb-item:hover .hb-t{text-decoration:underline}
.hb-t{
  display:flex;align-items:flex-start;gap:6px;
  font-size:16px;line-height:24px;font-weight:700;color:var(--hb-title);
}
.hb-t--plain{font-weight:500}
.hb-new{
  width:6px;height:6px;border-radius:9999px;background:var(--hb-brand);
  flex:none;margin-top:8px;
}
.hb-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
  font-size:12px;line-height:16px;color:var(--hb-weak);
}
.hb-meta .hb-dot{width:2px;height:2px;border-radius:9999px;background:var(--hb-g500);display:block;flex:none}
.hb-meta .hb-who{color:var(--hb-sub);font-weight:500}
.hb-tag{
  flex:none;display:inline-flex;align-items:center;
  min-height:24px;padding-inline:8px;border-radius:6px;
  background:var(--hb-sunken);
  font-size:12px;line-height:16px;font-weight:500;color:var(--hb-sub);
  white-space:nowrap;
}
.hb-tag--notice{background:var(--hb-brand-tint);color:var(--hb-brand-text);font-weight:700}
.hb-cmt{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:4px;color:var(--hb-weak);
}
.hb-cmt b{font-weight:700;color:var(--hb-sub)}
.hb-cmt svg{width:14px;height:14px}
.hb-feed .hb-check{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
}
.hb-feed li.hb-has-check{display:flex;align-items:center;gap:8px}
.hb-feed li.hb-has-check>a.hb-item{flex:1 1 auto;min-width:0}
.hb-feed li.hb-notice .hb-t{color:var(--hb-title)}

/* 폰에서는 조회수·추천수를 접는다 — 한 줄에 「말머리 · 글쓴이 · 시간 …… 댓글」만 남긴다 */
@media (max-width:767px){ .hb-board .hb-meta .hb-onlypc{display:none} }

/* ══════════════ 글이 하나도 없을 때 — 여기가 첫인상 ══════════════ */
.hb-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:40px;
}
.hb-empty__ico{
  width:64px;height:64px;margin-bottom:20px;
  color:var(--hb-g600);
}
.hb-empty__ico svg{width:64px;height:64px}
.hb-empty h3{
  font-size:18px;line-height:24px;font-weight:700;color:var(--hb-title);
  margin-bottom:8px;
}
.hb-empty p{
  font-size:14px;line-height:19px;color:var(--hb-weak);
  margin-bottom:24px;max-width:320px;
}
.hb-empty .hb-btn{min-width:160px}

/* ══════════════ 목록 아래 줄 — 쓰기 · 검색 · 쪽 ══════════════ */
.hb-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:16px;
}
.hb-toolbar .hb-grow{flex:1 1 auto;min-width:0}

.hb-search{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:12px;
}
.hb-search[hidden]{display:none}
.hb-search__box{
  display:flex;align-items:center;gap:8px;flex:1 1 200px;min-width:0;
  min-height:44px;padding-inline:16px;
  border:1px solid var(--hb-line-strong);border-radius:9999px;
  background:var(--hb-surface);
}
.hb-search__box:focus-within{border-color:var(--hb-brand);box-shadow:0 0 0 2px var(--hb-brand-tint)}
.hb-search__box svg{width:18px;height:18px;color:var(--hb-weak)}
.hb-search__box input{
  flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:14px;line-height:19px;color:var(--hb-body);
  padding-block:10px;
}
.hb-search__box input::placeholder{color:var(--hb-disabled)}
.hb-search select{
  flex:none;width:auto;max-width:160px;min-height:44px;padding-inline:12px;
  border:1px solid var(--hb-line-strong);border-radius:10px;
  background:var(--hb-surface);color:var(--hb-sub);
  font-family:inherit;font-size:14px;line-height:19px;
}

.hb-pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;
  margin-top:20px;
}
.hb-pager a,.hb-pager strong{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding-inline:8px;
  border:1px solid transparent;border-radius:10px;
  font-size:14px;line-height:19px;font-weight:500;color:var(--hb-sub);
}
.hb-pager a:hover{background:var(--hb-sunken);color:var(--hb-title)}
.hb-pager strong{
  background:var(--hb-brand);border-color:var(--hb-brand);
  color:var(--hb-on-brand);font-weight:700;
}
.hb-pager .hb-edge{color:var(--hb-weak);font-weight:400}

/* ══════════════ 글 읽기 ══════════════ */
.hb-read{
  background:var(--hb-surface);
  border:1px solid var(--hb-line);border-radius:16px;
  padding:24px 18px;
  margin-bottom:12px;
}
.hb-read__head{padding-bottom:18px;border-bottom:1px solid var(--hb-line);margin-bottom:20px}
.hb-read__cate{
  display:inline-flex;align-items:center;min-height:24px;padding-inline:8px;
  border-radius:6px;background:var(--hb-brand-tint);color:var(--hb-brand-text);
  font-size:12px;line-height:16px;font-weight:700;margin-bottom:10px;
}
.hb-read__head h1{font-size:22px;line-height:30px;font-weight:700;color:var(--hb-title)}
.hb-read__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
  margin-top:12px;
  font-size:13px;line-height:18px;color:var(--hb-weak);
}
.hb-read__meta .hb-who{color:var(--hb-sub);font-weight:500}
.hb-read__meta .hb-dot{width:2px;height:2px;border-radius:9999px;background:var(--hb-g500);display:block;flex:none}

.hb-read__body{
  font-size:16px;line-height:24px;color:var(--hb-body);
  padding-block:4px;
  min-height:80px;
}
.hb-read__body>*:first-child{margin-top:0}
.hb-read__body p{margin-block:12px}
.hb-read__body img{border-radius:10px}
.hb-read__body h1,.hb-read__body h2{font-size:20px;line-height:27px;margin-block:20px 10px}
.hb-read__body h3{font-size:18px;line-height:24px;margin-block:20px 10px}
.hb-read__body a{color:var(--hb-brand-text);text-decoration:underline}
.hb-read__body ul,.hb-read__body ol{padding-left:20px;margin-block:12px}
.hb-read__body ul{list-style:disc}
.hb-read__body ol{list-style:decimal}
.hb-read__body blockquote{
  margin:12px 0;padding:12px 16px;
  border-left:2px solid var(--hb-brand);border-radius:0 8px 8px 0;
  background:var(--hb-sunken);color:var(--hb-sub);
}

/* 잠긴 글 · 비밀번호 */
.hb-lock{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:20px;border:1px solid var(--hb-line);border-radius:12px;
  background:var(--hb-sunken);
}
.hb-lock label{font-size:14px;line-height:19px;color:var(--hb-sub)}
.hb-inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hb-inline input[type="password"],.hb-inline input[type="text"]{width:auto;flex:1 1 160px;min-width:0}

/* 추가 입력칸 표 */
.hb-exvars{
  width:100%;border-collapse:collapse;
  margin-bottom:20px;
  font-size:14px;line-height:19px;
}
.hb-exvars th,.hb-exvars td{
  padding:10px 12px;border-bottom:1px solid var(--hb-line);text-align:left;vertical-align:top;
}
.hb-exvars th{width:120px;color:var(--hb-weak);font-weight:500}
.hb-exvars td{color:var(--hb-body)}

/* 첨부 */
.hb-files{margin-top:20px;padding-top:16px;border-top:1px solid var(--hb-line)}
.hb-files__btn{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-block:0;
  font-family:inherit;font-size:13px;line-height:18px;font-weight:500;color:var(--hb-sub);
  background:none;border:0;padding:0;cursor:pointer;
}
.hb-files__btn:hover{color:var(--hb-title)}
.hb-files ul{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.hb-files ul a{
  display:flex;align-items:center;min-height:44px;
  font-size:13px;line-height:18px;color:var(--hb-brand-text);
}
.hb-files .hb-size{color:var(--hb-weak);margin-left:8px;font-size:12px;line-height:16px}

.hb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.hb-tags a{
  display:inline-flex;align-items:center;min-height:24px;padding-inline:8px;
  border-radius:9999px;background:var(--hb-sunken);
  font-size:12px;line-height:16px;color:var(--hb-sub);
}
.hb-tags a:hover{background:var(--hb-brand-tint);color:var(--hb-brand-text)}

.hb-sign{
  display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--hb-line);
  font-size:13px;line-height:18px;color:var(--hb-weak);
}
.hb-sign img{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex:none}

.hb-read__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--hb-line);
}
.hb-read__foot .hb-grow{flex:1 1 auto}

/* ══════════════ 댓글 = 말풍선 ══════════════ */
.hb-cmts{
  background:var(--hb-surface);
  border:1px solid var(--hb-line);border-radius:16px;
  padding:18px;
}
.hb-cmts + .hb-cmts{margin-top:12px}
.hb-cmts__head{
  display:flex;align-items:baseline;gap:6px;margin-bottom:16px;
}
.hb-cmts__head h2{font-size:16px;line-height:22px;font-weight:700}
.hb-cmts__head em{font-style:normal;font-size:16px;line-height:22px;font-weight:700;color:var(--hb-brand-text)}

.hb-cmt-list{display:flex;flex-direction:column;gap:12px}
.hb-cmt-list li{display:flex;gap:10px}
.hb-cmt-list li.hb-indent1{margin-left:20px}
.hb-cmt-list li.hb-indent2{margin-left:40px}
.hb-cmt-list li.hb-indent3,
.hb-cmt-list li.hb-indent4,
.hb-cmt-list li.hb-indent5{margin-left:40px}
.hb-cmt-list .hb-pf{
  width:36px;height:36px;border-radius:9999px;flex:none;
  background:var(--hb-sunken);object-fit:cover;
  border:1px solid var(--hb-line);
}
.hb-bubble{flex:1 1 auto;min-width:0}
.hb-bubble__in{
  background:var(--hb-sunken);
  border-radius:4px 14px 14px 14px;
  padding:12px 14px;
}
.hb-bubble__top{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-bottom:6px;
}
.hb-bubble__top h3,.hb-bubble__top strong,.hb-bubble__top a{
  font-size:13px;line-height:18px;font-weight:700;color:var(--hb-title);
}
.hb-bubble__top .hb-time{font-size:12px;line-height:16px;font-weight:400;color:var(--hb-weak)}
.hb-bubble__body{font-size:14px;line-height:19px;color:var(--hb-body)}
.hb-bubble__body>*:first-child{margin-top:0}
.hb-bubble__body>*:last-child{margin-bottom:0}
.hb-bubble__body.deleted{color:var(--hb-disabled)}
.hb-bubble__act{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:4px;padding-left:2px;
}
.hb-bubble__act a,.hb-bubble__act span{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:12px;line-height:16px;color:var(--hb-weak);
}
.hb-bubble__act a:hover{color:var(--hb-brand-text)}

.hb-cmt-form{margin-top:20px;padding-top:16px;border-top:1px solid var(--hb-line)}

/* ══════════════ 글쓰기 ══════════════ */
.hb-write{
  background:var(--hb-surface);
  border:1px solid var(--hb-line);border-radius:16px;
  padding:18px;
}
.hb-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.hb-field>label{font-size:13px;line-height:18px;font-weight:500;color:var(--hb-sub)}

.hb-board input[type="text"],
.hb-board input[type="password"],
.hb-board input[type="email"],
.hb-board input[type="number"],
.hb-board textarea,
.hb-board select{
  width:100%;
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--hb-g400);
  border-radius:10px;
  background:var(--hb-surface);
  color:var(--hb-body);
  font-family:inherit;font-size:16px;line-height:24px;font-weight:400;
  outline:none;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.hb-board textarea{min-height:120px;resize:vertical}
.hb-board input[type="text"]:focus,
.hb-board input[type="password"]:focus,
.hb-board input[type="email"]:focus,
.hb-board input[type="number"]:focus,
.hb-board textarea:focus,
.hb-board select:focus{
  border-color:var(--hb-brand);
  box-shadow:0 0 0 2px var(--hb-brand-tint);
}
.hb-board input::placeholder,.hb-board textarea::placeholder{color:var(--hb-disabled)}
.hb-board input[type="checkbox"],.hb-board input[type="radio"]{
  width:18px;height:18px;accent-color:var(--hb-brand);margin:0;flex:none;
}

.hb-title-input{font-size:18px !important;line-height:24px !important;font-weight:700 !important}

/* 에디터(CKEditor)는 제 테두리를 스스로 그린다 — 여기서 또 두르면 선이 겹친다.
   overflow:hidden 도 걸지 않는다(도구막대 펼침이 잘린다) */
.hb-write__editor{margin-block:12px}
.hb-write__editor textarea{width:100%}

.hb-opts{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--hb-line);
}
.hb-opt{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:13px;line-height:18px;color:var(--hb-sub);cursor:pointer;
}
.hb-authorbox{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
}
.hb-authorbox .hb-field{flex:1 1 160px;margin-bottom:0}

.hb-captcha{margin-top:12px}

.hb-write__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--hb-line);
}
.hb-write__foot .hb-grow{flex:1 1 auto}

/* 폰에서는 마지막 줄의 주요 단추가 남은 폭을 채우게 — 혼자 떨어져 보이지 않도록 */
@media (max-width:767px){
  .hb-write__foot .hb-btn--primary,
  .hb-read__foot .hb-btn{flex:1 1 auto}
}

/* ══════════════ 안내 · 삭제 확인 ══════════════ */
.hb-msg{
  background:var(--hb-surface);
  border:1px solid var(--hb-line);border-radius:16px;
  padding:32px 18px;text-align:center;
  font-size:16px;line-height:24px;color:var(--hb-body);
}
.hb-panel{
  background:var(--hb-surface);
  border:1px solid var(--hb-line);border-radius:16px;
  padding:24px 18px;
}
.hb-panel h1,.hb-panel h2{font-size:18px;line-height:24px;font-weight:700;margin-bottom:12px}
.hb-panel h3{font-size:16px;line-height:22px;font-weight:700;margin-bottom:8px}
.hb-panel p{font-size:14px;line-height:19px;color:var(--hb-sub);margin-bottom:16px}
.hb-panel .hb-t{font-size:18px;line-height:24px;font-weight:700;color:var(--hb-title);margin-bottom:6px}
.hb-panel .hb-who{font-size:13px;line-height:18px;font-weight:500;color:var(--hb-weak)}
.hb-panel .hb-write__foot{margin-top:16px}

/* 태그 모음 */
.hb-taglist{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:16px;
  padding:18px;
}
.hb-taglist a{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;
  border-radius:9999px;background:var(--hb-sunken);color:var(--hb-sub);
  font-size:13px;line-height:18px;font-weight:500;
}
.hb-taglist a:hover{background:var(--hb-brand-tint);color:var(--hb-brand-text)}
.hb-taglist a.rank1{font-size:20px;line-height:27px;font-weight:700;color:var(--hb-title);min-height:44px;padding-inline:16px}
.hb-taglist a.rank2{font-size:18px;line-height:24px;font-weight:700;color:var(--hb-title);min-height:44px;padding-inline:14px}
.hb-taglist a.rank3{font-size:16px;line-height:22px;font-weight:500}
.hb-taglist a.rank4{font-size:14px;line-height:19px}

/* 엮인 글(트랙백) */
.hb-tb-item{
  display:block;padding:14px 0;border-top:1px solid var(--hb-line);
  font-size:14px;line-height:19px;color:var(--hb-sub);
}
.hb-tb-item .hb-bubble__top{margin-bottom:6px}
.hb-tb-item .hb-who a{font-size:13px;line-height:18px;font-weight:700;color:var(--hb-title)}
.hb-tb-item .hb-time{font-size:12px;line-height:16px;color:var(--hb-weak)}
.hb-cmts .trackbackURL a{font-size:12px;line-height:16px;color:var(--hb-weak);word-break:break-all}

/* ══════════════ PC ══════════════ */
@media (min-width:768px){
  .hb-listwrap{padding-inline:24px}
  .hb-read{padding:32px 28px}
  .hb-read__head h1{font-size:24px;line-height:32px}
  .hb-read__body{font-size:16px;line-height:24px}
  .hb-cmts{padding:24px 28px}
  .hb-write{padding:28px}
  .hb-head h2{font-size:24px;line-height:32px}
}