/* ============================================================
   [2단 포털 사이드바] 3단계 디자인 — 허니타임 브랜드 톤 (CSS만)
   대상: .fmk-2col-side 안의 .hsb-*  (PC 2단에서만 노출; 모바일은 aside 자체 display:none)
   브랜드색: 골드 #F5B919 · 브라운 #4A2A18 · 크림 #FFF8E8
   부가:    골드다크 #C8961A · 라인 #EFE7D6 · 회색텍스트 #9b8e77 · 코멘트 #E8582E
   ※ 기능/마크업 무변경. 링크·데이터·랜덤 그대로. 디자인만.
   ============================================================ */

/* ── 사이드바 컨테이너: 크림 패널 위에 흰 카드가 뜨는 느낌 ── */
.fmk-2col-side {
    box-sizing: border-box;
    padding: 12px;
    background: #FFF8E8;                 /* 크림 배경 */
    border: 1px solid #F1E4C4;
    border-radius: 16px;
    /* 사이트 기본 폰트(Noto Sans KR) 그대로 상속 */
    font-size: 14px;
    line-height: 1.5;
    color: #3a3a3a;
    -webkit-font-smoothing: antialiased;
}

/* ── 블록(카드) 공통: 흰 카드 + 은은한 테두리/그림자 ── */
.fmk-2col-side .hsb-card {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #EFE7D6;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(74, 42, 24, .05);
    overflow: hidden;
}
.fmk-2col-side .hsb-card:last-child { margin-bottom: 0; }

/* ── 블록 헤더: 브라운 텍스트 + 골드 포인트(아이콘 + 밑줄) ── */
.fmk-2col-side .hsb-tit {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 12px 15px 11px;
    border-bottom: 2px solid #F5E2B0;   /* 옅은 골드 밑줄 */
    font-size: 14.5px;
    font-weight: 800;
    color: #4A2A18;                     /* 브라운 */
    letter-spacing: -.2px;
    line-height: 1.2;
}
.fmk-2col-side .hsb-tit i {
    color: #F5B919;                     /* 골드 아이콘 */
    font-size: 15px;
    width: 16px;
    text-align: center;
}

/* ══ [블록 1] 실시간 인기글 — 순위 리스트 ══ */
.fmk-2col-side .hsb-rank { margin: 0; padding: 5px 14px 9px; list-style: none; }
.fmk-2col-side .hsb-rank-li { margin: 0; }
.fmk-2col-side .hsb-rank-li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #F4EEE2;
    color: #3a3a3a;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
    transition: color .15s;
}
.fmk-2col-side .hsb-rank-li:last-child > a { border-bottom: 0; }

/* 순위 번호: 1~3위 골드 배지, 그 외 브라운 톤 숫자 */
.fmk-2col-side .hsb-rank-no {
    flex: 0 0 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #b9ab8f;
}
.fmk-2col-side .hsb-rank-no.is-top {
    color: #fff;
    background: #F5B919;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(200, 150, 26, .35);
}
/* 제목: 한 줄 말줄임(...) */
.fmk-2col-side .hsb-rank-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.fmk-2col-side .hsb-rank-cmt {
    flex: 0 0 auto;
    color: #E8582E;
    font-weight: 700;
    font-size: 11.5px;
}
.fmk-2col-side .hsb-rank-li > a:hover .hsb-rank-txt { color: #C8961A; }
.fmk-2col-side .hsb-rank-li > a:hover .hsb-rank-no:not(.is-top) { color: #4A2A18; }

/* ══ [블록 2] 최신글 — 썸네일 리스트 ══ */
.fmk-2col-side .hsb-thumblist { margin: 0; padding: 5px 14px 9px; list-style: none; }
.fmk-2col-side .hsb-tl-li { margin: 0; }
.fmk-2col-side .hsb-tl-li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    border-bottom: 1px solid #F4EEE2;
    text-decoration: none;
}
.fmk-2col-side .hsb-tl-li:last-child > a { border-bottom: 0; }

/* 썸네일(블록 2 공용): 비율 고정, 안 찌그러지게 cover */
.fmk-2col-side .hsb-thumb {
    flex: 0 0 58px;
    width: 58px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #FFF8E8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fmk-2col-side .hsb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fmk-2col-side .hsb-noimg { font-size: 20px; line-height: 1; }

.fmk-2col-side .hsb-tl-meta { flex: 1 1 auto; min-width: 0; }
.fmk-2col-side .hsb-tl-subj {                 /* 제목 2줄 클램프 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    max-height: 2.8em;
    transition: color .15s;
}
.fmk-2col-side .hsb-tl-li > a:hover .hsb-tl-subj { color: #C8961A; }
.fmk-2col-side .hsb-tl-date {
    display: block;
    margin-top: 3px;
    color: #a99c85;
    font-size: 11.5px;
}
.fmk-2col-side .hsb-tl-cmt { color: #E8582E; font-weight: 600; }

/* ══ [블록 3] Hot글 — 썸네일 그리드(2열) ══ */
.fmk-2col-side .hsb-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 11px 14px 13px;
}
.fmk-2col-side .hsb-grid-cell { text-decoration: none; }
.fmk-2col-side .hsb-grid-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;               /* 비율 통일 */
    border-radius: 9px;
    overflow: hidden;
    background: #FFF8E8;
}
.fmk-2col-side .hsb-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.fmk-2col-side .hsb-grid-cell:hover .hsb-grid-thumb img { transform: scale(1.06); }
.fmk-2col-side .hsb-grid-hit {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 10.5px;
    line-height: 1.55;
    font-weight: 600;
}
.fmk-2col-side .hsb-grid-hit i { color: #F5B919; }
.fmk-2col-side .hsb-grid-subj {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    color: #4A2A18;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.32;
    max-height: 2.7em;
    transition: color .15s;
}
.fmk-2col-side .hsb-grid-cell:hover .hsb-grid-subj { color: #C8961A; }

/* ══ [블록 4] ⭐ 추천 업체(광고) — 프리미엄 골드 톤 ══ */
.fmk-2col-side .hsb-ad {
    background: linear-gradient(180deg, #FFFDF7 0%, #FFFAF0 100%);
    border-color: #F0DFA8;
}
.fmk-2col-side .hsb-ad .hsb-tit { border-bottom-color: #F5B919; }
.fmk-2col-side .hsb-ad-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 8px;
    background: #F5B919;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    vertical-align: 2px;
}
.fmk-2col-side .hsb-ad-list { margin: 0; padding: 5px 14px 9px; list-style: none; }
.fmk-2col-side .hsb-ad-li { margin: 0; }
.fmk-2col-side .hsb-ad-li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid #F3E9CF;
    text-decoration: none;
}
.fmk-2col-side .hsb-ad-li:last-child > a { border-bottom: 0; }
.fmk-2col-side .hsb-ad-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #FFF8E8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(74, 42, 24, .1);
}
.fmk-2col-side .hsb-ad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fmk-2col-side .hsb-ad-meta { flex: 1 1 auto; min-width: 0; }
.fmk-2col-side .hsb-ad-name {                 /* 상호: 굵게, 한 줄 말줄임 */
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #4A2A18;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: color .15s;
}
.fmk-2col-side .hsb-ad-li > a:hover .hsb-ad-name { color: #C8961A; }
.fmk-2col-side .hsb-ad-loc {                  /* 지역: 작게 회색, 2번째 줄 */
    display: block;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #9b8e77;
    font-size: 12px;
}
.fmk-2col-side .hsb-ad-pin { margin-right: 1px; font-size: 11px; }
/* 상호+지역 2줄 구성 유지를 위해 테마태그(#…) 줄은 숨김 (마크업/데이터는 보존) */
.fmk-2col-side .hsb-ad-tagline { display: none; }

/* ── 모바일/좁은폭 안전장치: 사이드바가 본문 아래 전체폭으로 와도 안 깨지게 ──
   (현재 portal2col.css 가 <1100px 에서 aside 를 display:none 처리 → 평소엔 숨김.
    나중에 '본문 아래 노출'로 바꿔도 이 규칙들로 레이아웃이 유지됨.) */
@media (max-width: 1099px) {
    .fmk-2col-side { border-radius: 14px; }
    .fmk-2col-side .hsb-grid { grid-template-columns: repeat(2, 1fr); }
}