/* =========================================================
   Daily Log Timeline (컨테이너/타임라인 라인)
========================================================= */
.daily-log{
  border-left: 3px solid #111827;
  margin-left: 6px;
  padding-left: 14px;
}

/* =========================================================
   카드 공통 (details / 내용없는 dl-item)
========================================================= */
.daily-log details,
.daily-log .dl-item{
  position: relative;
  margin: 10px 0;
  background: #f9fafb;
  border-radius: 6px;
  padding: 8px 12px;
}

/* 타임라인 기준점(기본: 검정) */
.daily-log details::before,
.daily-log .dl-item::before{
  content:"";
  position:absolute;
  left:-22px;
  top:14px;
  width:10px;
  height:10px;
  background:#111827;
  border-radius:50%;
}

/* =========================================================
   Summary / Summary 대체
========================================================= */
.daily-log summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
.daily-log summary::-webkit-details-marker{ display:none; }

/* 내용 없는 항목은 summary 대신 */
.daily-log .dl-summary{ font-weight:600; }

/* =========================================================
   펼쳐진 상세 본문 (details 안 p 타입)  ✅ 상하 여백 컴팩트
========================================================= */
.daily-log details p{
  margin: 6px 0 0;       /* 기존 10px → 축소 */
  padding: 8px 10px;     /* 기존 10px 12px → 축소 */
  border-radius: 10px;
}
.daily-log details[open] p{
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,0.08);
  font-size:0.92em;
  line-height:1.6;
  color:#111827;
  overflow:auto;
}
.daily-log details[open] p > br{ line-height:1.8; }
.daily-log details[open] p ul,
.daily-log details[open] p ol{
  margin:8px 0 0;
  padding-left:18px;
}
.daily-log details[open] p li{ margin:4px 0; }

/* =========================================================
   날짜 표시
========================================================= */
.daily-log .date{
  display:inline-block;
  font-weight:700;
  color:#111827;
  margin-right:6px;
  text-align:right;
}
.daily-log .date:empty{ min-width:0.5em; }
.daily-log .date:empty::before{ content:"미상"; }

/* =========================================================
   국내 정당/세력 색상 (점 + 날짜 컬러)
========================================================= */
/* 민주당 */
.daily-log details.minju::before,
.daily-log .dl-item.minju::before{ background:#2563eb; }
.daily-log details.minju .date,
.daily-log .dl-item.minju .date{ color:#2563eb; }

/* 국민의힘 */
.daily-log details.gukhim::before,
.daily-log .dl-item.gukhim::before{ background:#ec4899; }
.daily-log details.gukhim .date,
.daily-log .dl-item.gukhim .date{ color:#ec4899; }

/* 이재명 정부 */
.daily-log details.jaemyeong::before,
.daily-log .dl-item.jaemyeong::before{ background:#50bcdf; }
.daily-log details.jaemyeong .date,
.daily-log .dl-item.jaemyeong .date{ color:#50bcdf; }

/* =========================================================
   배지(Badge)
========================================================= */
.badge{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  font-size:0.75em;
  font-weight:600;
  color:#fff;
  border-radius:4px;
  vertical-align:middle;
}
.badge.important{ background:#dc2626; }
.badge.economy{ background:#16a34a; }
.badge.mourning{ background:#111827; color:#fff; }

.badge.country{
  background:#fff;
  color:#111827;
  border:1px solid #d1d5db;
}
.daily-log .badge.count{
  font-weight:900;
  background:#fde68a;
  border:1px solid rgba(15,23,42,0.14);
  color:#111827;
}
.daily-log .badges{ display:inline; }

/* =========================================================
   월/주 details 커스텀 삼각형(접기 UI)
========================================================= */
details.month > summary,
details.week  > summary{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  width:100%;
  list-style:none;
}
details.month > summary > h2,
details.week  > summary > h3{
  margin:0;
  display:inline;
  font-size:inherit;
  font-weight:800;
}
details.month > summary::-webkit-details-marker,
details.week  > summary::-webkit-details-marker{ display:none; }
details.month > summary::marker,
details.week  > summary::marker{ content:""; }

details.month > summary::before,
details.week  > summary::before{
  content:"\25B6";
  width:1em;
  flex:0 0 1em;
  line-height:1;
  opacity:.75;
  transform-origin:50% 50%;
  transition:transform .15s ease;
}
details.month[open] > summary::before,
details.week[open]  > summary::before{
  transform:rotate(90deg);
}

/* =========================================================
   월/연 요약 포스트잇
========================================================= */
.month-note{
  margin:10px 0 14px;
  padding:12px 14px;
  border-radius:10px;
  background:#fff7cc;
  border:1px solid rgba(17,24,39,0.10);
  box-shadow:0 8px 18px rgba(15,23,42,0.08);
  position:relative;
}
.month-note::before{
  content:"";
  position:absolute;
  top:-8px;
  left:18px;
  width:66px;
  height:18px;
  border-radius:6px;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(17,24,39,0.08);
  transform:rotate(-2deg);
}
.month-note-title{
  font-weight:800;
  color:#111827;
  margin-bottom:8px;
}
.month-note-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.month-note-tags .mtag{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:0.85em;
  font-weight:700;
  background:rgba(17,24,39,0.08);
  color:#111827;
}
.month-note-desc{
  margin-top:8px;
  font-size:0.88em;
  color:rgba(17,24,39,0.75);
}
.month-note.year-note{
  background:#fbf6ea;
  border:1px solid rgba(17,24,39,0.12);
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
  border-left:4px solid rgba(17,24,39,0.18);
  padding-left:12px;
}
.month-note.year-note::before{
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(17,24,39,0.10);
}
.month-note.year-note .mtag{
  background:rgba(17,24,39,0.06);
  color:#111827;
}
.month-note.year-note .month-note-title{ color:#111827; }

/* =========================================================
   그룹 내부 하위 카드(서브카드)
   - ✅ 서브카드는 항상 불투명 배경 고정
   - ✅ 상하 여백 컴팩트
========================================================= */
.dl-subcards{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px; /* 기존 10px → 축소 */
}

.dl-subcard{
  background:#f3f4f6; /* ✅ 불투명 */
  border:1px solid rgba(15,23,42,0.12);
  border-radius:12px;
  padding:8px 10px;   /* 기존 10px 12px → 축소 */
}

.dl-subcard .sub-title{
  font-size:0.95rem;
  line-height:1.35;
}

.dl-subcard .sub-body{
  margin-top:6px;              /* 기존 8px → 축소 */
  font-size:0.92rem;
  line-height:1.45;
  color:rgba(15,23,42,0.85);

  /* ✅ flex 금지: (태그/문장들이 요소 단위로 쪼개져 개행되는 현상 방지) */
  display:block !important;
  overflow:auto;
}

.dl-subcard .badges{ margin-left:8px; }

/* =========================================================
   강조 색깔 박스 (태그 기반) - 메인(details / .dl-item)만 색 적용
========================================================= */
/* 진보(파랑) : 중요-진보 */
.daily-log details[data-tags*="중요-진보"],
.daily-log .dl-item[data-tags*="중요-진보"]{
  background: rgba(37, 99, 235, 0.06) !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
}
.daily-log details[data-tags*="중요-진보"]::before,
.daily-log .dl-item[data-tags*="중요-진보"]::before{
  background: rgba(37, 99, 235, 0.95) !important;
}
.daily-log details[data-tags*="중요-진보"] .date,
.daily-log .dl-item[data-tags*="중요-진보"] .date{
  color: rgba(37, 99, 235, 0.95) !important;
}

/* 보수(빨강) : 중요-보수 */
.daily-log details[data-tags*="중요-보수"],
.daily-log .dl-item[data-tags*="중요-보수"]{
  background: rgba(220, 38, 38, 0.06) !important;
  border: 1px solid rgba(220, 38, 38, 0.18) !important;
}
.daily-log details[data-tags*="중요-보수"]::before,
.daily-log .dl-item[data-tags*="중요-보수"]::before{
  background: rgba(220, 38, 38, 0.95) !important;
}
.daily-log details[data-tags*="중요-보수"] .date,
.daily-log .dl-item[data-tags*="중요-보수"] .date{
  color: rgba(220, 38, 38, 0.95) !important;
}

/* 국제(초록) : 중요-국제 */
.daily-log details[data-tags*="중요-국제"],
.daily-log .dl-item[data-tags*="중요-국제"]{
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.18) !important;
}
.daily-log details[data-tags*="중요-국제"]::before,
.daily-log .dl-item[data-tags*="중요-국제"]::before{
  background: rgba(16, 185, 129, 0.95) !important;
}
.daily-log details[data-tags*="중요-국제"] .date,
.daily-log .dl-item[data-tags*="중요-국제"] .date{
  color: rgba(16, 185, 129, 0.95) !important;
}

/* 이슈(노랑) : 중요-이슈 */
.daily-log details[data-tags*="중요-이슈"],
.daily-log .dl-item[data-tags*="중요-이슈"]{
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
}
.daily-log details[data-tags*="중요-이슈"]::before,
.daily-log .dl-item[data-tags*="중요-이슈"]::before{
  background: rgba(245, 158, 11, 0.95) !important;
}
.daily-log details[data-tags*="중요-이슈"] .date,
.daily-log .dl-item[data-tags*="중요-이슈"] .date{
  color: rgba(245, 158, 11, 0.95) !important;
}

/* ✅ 중요 태그가 있더라도 그룹 영역은 투명 */
.daily-log details[data-tags*="중요-"] .dl-group,
.daily-log details[data-tags*="중요-"] .dl-subcards{
  background: transparent !important;
}

/* ✅ 최종 안전망: 서브카드는 항상 불투명 */
.daily-log details[data-group] .dl-group .dl-subcards .dl-subcard[data-id]{
  background: #f3f4f6 !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
}

/* =========================================================
   [FINAL] 회색 박스 안 이미지 배치 통일
   - PC: 무조건 오른쪽(float)
   - Mobile: 위쪽 + 100%
   - 대상: details[open] p(회색 박스) + 서브카드(.sub-body)
========================================================= */
/* (메인 카드/회색 본문 안) 썸네일을 오른쪽으로 보내는 핵심 */
.dl-thumb-img{
  float:right;
  width:120px;
  max-width:40%;
  height:auto;
  margin:0 0 8px 12px;
  border-radius:12px;
  object-fit:cover;
}

/* float가 들어가도 박스 높이가 정상 계산되게(회색 본문 p) */
.daily-log details[open] p{
  overflow:auto;
}

/* =========================================================
   [MOBILE] 1) 서브카드 이외(메인 카드 포함) → "추출한 규칙"만 적용
   - 대상: details[open] p 안의 .dl-thumb-img
   - 서브카드는 아래(2)에서 별도 처리
========================================================= */
@media (max-width: 640px){
  .daily-log details[open] p .dl-thumb-img{
    float:none;
    display:block;
    width:100%;
    max-width:100%;
    margin:12px 0 0; /* ✅ 추출한 값 유지 */
  }
}

/* =========================================================
   [MOBILE] 2) 서브카드 전용 → 네가 원하는 "Mobile: 위쪽 + 100%" 규칙 적용
========================================================= */
@media (max-width: 640px){

  /* ✅ 서브카드 썸네일/이미지 래퍼만: 10px 0 8px 룰 유지 */
  .daily-log .dl-subcard .sub-body .dl-thumb-img,
  .daily-log .dl-subcard .sub-body .cheese-img-wrapper{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 8px !important; /* ✅ 서브카드만 이 값 */
  }

  .daily-log .dl-subcard .sub-body .cheese-img-wrapper img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* =========================================================
   [PC] 서브카드 썸네일 위쪽 여백 최소화 (네 패치 유지)
========================================================= */
@media (min-width: 641px){

  .daily-log .dl-subcard .sub-body{
    margin-top: 2px !important;   /* 0~4px 취향 */
  }

  .daily-log .dl-subcard .sub-body .dl-thumb-img{
    margin-top: -4px !important;  /* -2 ~ -8px 취향 */
    margin-bottom: 6px !important;
  }
}
/* =========================================================
   카드(상세)/서브카드 위아래 공백 축소(컴팩트)
========================================================= */
.daily-log details > p{
  margin: 6px 0 0;
  padding: 8px 10px;
}

.daily-log .dl-subcard{
  margin-top: 8px;
  padding: 8px 10px;
}

/* =========================================================
   [MOBILE ONLY PATCH]
   details 안에서 p(회색 박스) 위에 있는 썸네일(=details 직속 이미지 래퍼)을
   모바일에서만 "위쪽 + 100%"로 고정
   대상 구조:
   details
     > .cheese-img-wrapper   (여기 안에 .dl-thumb-img)
     > p                     (회색 박스)
========================================================= */
@media (max-width: 640px){

  /* 1) p 위에 있는 썸네일은 float 끊고, 위쪽 단독 배치 */
  .daily-log details > .cheese-img-wrapper .dl-thumb-img{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 6px 0 8px !important; /* 상단 여백 더 줄이고 싶으면 0~6px로 */
  }

  /* 2) wrapper 자체도 과한 여백 방지 */
  .daily-log details > .cheese-img-wrapper{
    margin: 6px 0 8px !important;
    padding: 0 !important;
  }

  /* 3) 안전망: 혹시 float 잔여가 있어도 p는 아래로 */
  .daily-log details > p{
    clear: both;
  }
}

/* =========================================================
   모바일: 건수(count)만 표시
========================================================= */
@media (max-width: 640px){
  .daily-log summary .badge,
  .daily-log .dl-summary .badge,
  .daily-log .dl-subcard .badge{
    display:none !important;
  }

  .daily-log summary .badge.count,
  .daily-log .dl-summary .badge.count{
    display:inline-block !important;
  }

  .daily-log .dl-subcard .badge.count{
    display:none !important;
  }

  .daily-log .dl-subcard{
    font-size:17px !important;
    line-height:1.6 !important;
  }

  .daily-log .dl-subcard .sub-title,
  .daily-log .dl-subcard .sub-body,
  .daily-log .dl-subcard p,
  .daily-log .dl-subcard li,
  .daily-log .dl-subcard b,
  .daily-log .dl-subcard strong,
  .daily-log .dl-subcard small{
    font-size:inherit !important;
    line-height:inherit !important;
  }
}

/* =========================================================
   (선택) cheese-img-wrapper를 카드 안에서 쓸 때 여백 폭발 방지
   - 전역 .post-body .cheese-img-wrapper { margin:40px auto; }를 무력화
========================================================= */
.daily-log .cheese-img-wrapper{
  max-width:100%;
  margin:10px 0;   /* 카드 안에서는 촘촘하게 */
  padding:0;
}



/* =========================================================
   연도 이동 네비게이션
========================================================= */

  :root{
    --b: rgba(15,23,42,.14);
    --t: #0f172a;
    --sub: rgba(15,23,42,.70);
    --acc: #2563eb;
    --card: #fff;
    --shadow: 0 10px 24px rgba(15,23,42,.06);
  }

  /* details 자체를 카드로 */
  details.cheese-year-nav{
    border:1px solid var(--b);
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin: 18px 0;
    overflow: hidden;
  }

  /* summary = 헤더 */
  details.cheese-year-nav > summary{
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  details.cheese-year-nav > summary::-webkit-details-marker{ display:none; }
  details.cheese-year-nav > summary::marker{ content:""; }

  .cheese-year-head{
    display:flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .cheese-year-title{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--t);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cheese-year-sub{
    font-size: 12px;
    font-weight: 800;
    color: var(--sub);
    margin: 0;
  }

  /* 오른쪽 “접기/펼치기” 표시 */
  .cheese-year-toggle{
    font-weight: 900;
    font-size: 12px;
    color: var(--sub);
    border: 1px solid var(--b);
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  details.cheese-year-nav[open] .cheese-year-toggle{ color: var(--t); }

  /* 본문 */
  .cheese-year-body{
    border-top: 1px solid var(--b);
    padding: 14px 16px 16px;
  }

  .cheese-year-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .cheese-year-cell{
    height: 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
    border: 1px solid var(--b);
    background: #fff;
    text-decoration:none;
    font-weight: 900;
    color: var(--t);
    transition: transform .06s ease, background .12s ease;
    white-space: nowrap;
  }
  .cheese-year-cell:hover{
    background: rgba(15,23,42,.04);
    transform: translateY(-1px);
  }

  .cheese-year-cell.current{
    background: var(--acc);
    border-color: var(--acc);
    color: #fff;
    cursor: default;
  }

  .cheese-year-cell.ghost{
    background: #f3f4f6;
    color: rgba(15,23,42,.85);
  }

  @media (max-width: 640px){
    .cheese-year-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cheese-year-title{ font-size: 16px; }
  }