/* ===== Base ===== */
:root{
    --bg:#fff1f2;
    --ink:#121212;
    --muted:#6b7280;
    --line:#e5e7eb;
    --card:#ffffff;
    --shadow: 0 8px 24px rgba(0,0,0,.08);
    --radius:18px;
    --radius2:14px;
    --max: 1280px;
  
    /* 상단(hero) 높이 고정 */
    --hero-h: 300px;
  
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
  }
  
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; height:auto; display:block; }
  
  .wrap{ width:100%; }
  
  /* ✅ 페이지 전체 선택 방지 */
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* ✅ 예외(입력/코드 블록은 선택 가능하게) */
  input, textarea, button, select,
  pre, code {
    -webkit-user-select: text;
    user-select: text;
  }
  
  
  /* ===== HERO ===== */
  header.hero{
    width: min(var(--max), calc(100% - 32px));
    margin: 0px auto 18px;
  
    border-bottom-right-radius: 26px;
    border-bottom-left-radius: 26px;
  
    height: var(--hero-h);
    position: relative;
    overflow: visible;
  
    /* ✅ 배경 이미지 + 기존 효과 유지 */
    background-image:
      url("./images/background-bg.png"),
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 35%),
      radial-gradient(circle at 80% 20%, rgba(255,255,255,.08), transparent 40%);
      
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  
    background-color: #ffffff;
  
    display:flex;
    flex-direction:column;
    z-index: 50;
  }
  
  
  .post-title img {
    display: none;
  }
  
  .hero-inner{
      width: 100%;
      height: 100%;
      padding: 0;
  
      display: flex;
      align-items: center;       /* 세로 가운데 */
      justify-content: center;   /* 가로 가운데 */
  }
  
  .brand-title {
      display: inline-block;
  
      font-family: "Arial Rounded MT Bold", "Noto Sans KR", sans-serif;
      font-size: 48px;
      font-weight: 900;
      letter-spacing: -2px;
  
      color: #7a3e18;
  
      text-shadow:
          2px 2px 0 #fff7e8,
          4px 4px 0 rgba(215, 120, 45, 0.25);
  
      padding: 8px 20px;
      border: 0;
  }
  
  /* 아래 작은 글자는 필요 없으면 숨김 */
  .brand-sub{
      display: inline-block;
  
      font-family: "Arial Rounded MT Bold", "Noto Sans KR", sans-serif;
      font-size: 46px;
      font-weight: 900;
      letter-spacing: -2px;
  
      color: #7a3e18;
  
      text-shadow:
          2px 2px 0 #fff8e8,
          4px 4px 0 rgba(215,120,45,.22);
  }
  
  
  .hero-search{ min-width: 280px; flex: 0 0 auto; }
  .search-form{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:999px;
    overflow:hidden;
    padding: 10px 12px;
    gap:10px;
  }
  .search-input{
    border:0; outline:none;
    width:100%;
    font-size:14px;
  }
  .search-btn{
    border:0; background:transparent;
    cursor:pointer;
    font-size:16px;
    padding: 0 8px;
  }
  
  /* ===== NAV + SUBMENU (✅ 여기만 제대로 되면 끝) ===== */
  .nav{
    width: min(var(--max), calc(100% - 32px));
    margin: 24px auto 0px;
    /* border-radius: 26px; */
    border-top-right-radius: 26px;
    border-top-left-radius: 26px;
    background: rgba(17,24,39,.06);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.35);
  
    padding: 10px 14px;
  
    order: 1;              /* ⭐ 맨 위 */
    margin-top: 14px;
    top: 0;
    position: relative; /* ⭐ sub-menu 패널의 기준 */
    z-index: 9999;
    overflow: visible;
    display:flex;
    align-items:center;
  }
  
  /* 로고 자리 */
  .nav-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:900;
    font-size:16px;
    color:#111827;
  }
  
  .nav-logo img{
    height:28px;     /* 필요하면 24~34로 조절 */
    width:auto;
    display:block;
  }
  
  
  /* 주메뉴 리스트 */
  .nav-main{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left:auto;          /* ✅ 오른쪽 정렬 핵심 */
    justify-content:flex-end;  /* 우측으로 모으기 */
  
  }
  
  .nav-item{ position: relative; }
  
  .nav-link{
    display:inline-flex;
    align-items:center;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight:700;
    font-size: 14px;
    color:#111827;
  }
  .nav-link:hover{
    background: rgba(17,24,39,.06);
  }
  
  
  /* ===== Mega menu (있다면 그대로) ===== */
  .has-mega .mega{
    position:absolute;
    left:0;
    top: calc(100% + 10px);
    min-width: 200px;
    background: #fff;
    border:1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 14px;
    display:none;
    z-index: 9000;
  }
  .has-mega:hover .mega{ display:block; }
  
  .nav-item.has-mega { position: relative; }
  
  .nav-item.has-mega > .mega{
    top: 100% !important;     /* ✅ 틈 제거 */
    margin-top: 0 !important; /* ✅ 틈 제거 */
  } 
  
  
  .mega-col a{
    display:block;
    padding: 5px 5px;
    border-radius: 12px;
    color:#111827;
    font-weight:600;
    font-size: 13px;
  }
  .mega-col a:hover{
    color: blue;
    
  }
  .mega-col a:visited{
    color: #7c3aed;
  }
  
  /* ===== LAYOUT ===== */
  .layout{
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto 24px;
    display:grid;
    grid-template-columns: 300px 1fr;
    gap: 18px;
  }
  
  /* ===== SIDEBAR ===== */
  .sidebar{ position: relative; }
  
  .card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 14px;
  }
  
  .card-title{
    font-weight: 800;
    font-size: 14px;
    margin:10px;
  }
  
  .card-body{ color:#111827; font-size: 13px; margin:10px;}
  
  /* 쿠팡 광고 사이즈 조정 */
  /* 왼쪽 광고 슬롯 */
  .ad-left-slot{
    width: 100%;
    max-width: 780px;     /* 최대 780까지만 */
    overflow: hidden;     /* 780 고정으로 튀면 잘라버림 */
    /* margin-left: 10px;
    margin-right: 10px; */
  }
  
  /* 혹시 내부가 iframe이면 최대폭 제한 */
  .ad-left-slot iframe,
  .ad-left-slot img{
    max-width: 100% !important;
  }
  
  .ad-content{
  
    /* padding: 0.5rem 0.75rem; */
  
    background: rgb(82, 80, 80);            /* 검정 배경 */
    color: #fff;                 /* 흰 글씨 */
  
    border: 1px solid var(--line);
    border-bottom-left-radius:16px;
    border-bottom-right-radius:16px;
    font-size: 0.73rem;          /* rem 단위 (약 12px) */
    line-height: 1.4;
  
    text-align: center;
  }
  
  .ad-content span{
    opacity: 0.9;                /* 살짝 부드럽게 */
  }
  
  
  .profile-top{
    display:flex;
    gap: 12px;
    align-items:center;
  }
  .profile-img{
    width: 104px; height: 104px;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid var(--line);
    flex: 0 0 auto;
    background:#f3f4f6;
  }
  
  .profile-img img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 또는 contain */
    display: block;
  }
  
  
  .profile-meta .profile-title{ font-weight: 900; font-size: 14px; }
  .profile-meta .profile-desc{ color: var(--muted); font-size: 12px; margin-top:4px; }
  
  .btn{
    flex: 1;
    text-align:center;
    border: 1px solid var(--line);
    background:#fff;
    padding: 10px 10px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 12px;
  }
  .btn:hover{ background: rgba(17,24,39,.04); }
  
  .quick{ list-style:none; padding:0; margin:0; }
  .quick li a{
    display:block;
    padding: 10px 10px;
    border-radius: 12px;
  }
  .quick li a:hover{ background: rgba(17,24,39,.06); }
  
  .ad-placeholder{
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 18px 12px;
    text-align:center;
    color: var(--muted);
    font-weight:700;
  }
  
  #tt-body-index .category_list,
  .category_list{ font-size: 13px; }
  .category_list a{ padding: 6px 0; display:inline-block; }
  
  /* ===== CONTENT ===== */
  .content{ min-width: 0; }
  
  /* page title 카드 */
  .page-title{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 16px;
    margin-bottom: 14px;
  
    /* ✅ 추가 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  
  /* 제목(카테고리명) */
  .page-title h1,
  .page-title h2{
    margin: 0;
    font-size: 18px;
    letter-spacing: -.2px;
  }
  
  .page-sub{
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
  }
  
  /* ===== 오른쪽 액션 영역 ===== */
  .page-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* 글자가 길어져도 버튼 밀리지 않게 */
  }
  
  /* 버튼 공통 */
  .page-actions a{
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    transition: all .15s ease;
    white-space: nowrap;
  }
  
  /* 글쓰기 버튼 강조 */
  /* .page-actions .btn-write{
    font-weight: 600;
  } */
  
  .post-list{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  
  .post-item{
    display:grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
  }
  .post-item:last-child{ border-bottom:0; }
  
  .post-thumb{
    width: 140px;
    height: 96px;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid var(--line);
    background:#f3f4f6;
    position: relative;
  }
  .post-thumb .thumb-img{ width:100%; height:100%; object-fit: cover; }
  .post-thumb .thumb-empty{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--muted);
    font-weight:800;
    font-size:12px;
  }
  .post-thumb .thumb-img + .thumb-empty{ display:none; }
  
  .post-title{
    display:block;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: -.2px;
    margin-top: 2px;
  }
  .post-title:hover{ text-decoration: underline; }
  
  .post-meta{
    margin-top: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  
    /* ✅ 글자 가시성 강화 */
    color: #6b7280; /* var(--muted) 보다 확실히 보이게 */
  }
  
  /* dot은 post-meta 안에서만 적용되게 */
  .post-meta .dot{
    opacity: .65;
  }
  
  /* 카테고리 pill */
  .post-meta .cat{
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background:#fff;
    color:#374151;
    font-weight:700;
    text-decoration: none;
  }
  /* ✅ 날짜/댓글이 안 보이는 문제를 확실히 막기 */
  .post-meta .date,
  .post-meta .rp-count{
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
  }
  
  /* 카테고리만 진하게, 나머지는 은은하게 */
  .post-meta .cat{
    color:#374151;
  }
  
  
  .post-desc{
    margin-top: 8px;
    color:#374151;
    font-size: 13px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .paging{ margin-top: 14px; text-align:center; }
  .paging a, .paging span{
    display:inline-block;
    margin: 0 4px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background:#fff;
    font-weight: 800;
    font-size: 12px;
  }
  .paging a:hover{ background: rgba(17,24,39,.04); }
  
  .article{
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px;
  }
  .article-head{ margin-bottom: 14px; }
  .article-title{
    margin:0;
    font-size: 22px;
    letter-spacing: -.4px;
  }
  /* 메타 + 네비 한 줄 배치 */
  .article-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:8px;
  }
  
  .article-meta{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--muted);
    flex:1;
  }
  /* 버튼 영역 */
  .article-nav{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
  }
  
  /* 🔥 버튼 사이즈 축소 */
  .article-nav .nav-btn{
    padding:3px 8px;          /* 핵심 */
    font-size:11px;           /* 메타와 비슷하게 */
    line-height:1.2;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:#fff;
    color:#555;
    text-decoration:none;
    white-space:nowrap;
  }
  
  /* hover 최소 효과 */
  .article-nav .nav-btn:hover{
    background:#f3f4f6;
  }
  
  .article-body{ 
    margin-top: 16px; 
    font-size: 15px;
    border-top: 1px solid rgba(17, 24, 39, 0.15); /* 연한 선 */
    padding-top: 20px;
  }
  
  .article-body pre{
    padding: 14px;
    border-radius: 16px;
    background:#0b1020;
    color:#e5e7eb;
    overflow:auto;
  }
  .article-body code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  }
  
  .cta-box{
    display:flex;
    gap:10px;
    flex-wrap: wrap;
    margin: 18px 0 6px;
  }
  .cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background:#fff;
    font-weight: 900;
    font-size: 13px;
  }
  .cta:hover{ background: rgba(17,24,39,.04); }
  
  .tags{ margin-top: 12px; }
  .tag{
    display:inline-block;
    margin: 4px 6px 0 0;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background:#fff;
    font-weight: 800;
    font-size: 12px;
    color:#374151;
  }
  
  .footer{
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto 24px;
    
    
    border-radius: 26px;
    background: rgba(17,24,39,.06);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.35);
    padding: 10px 14px;
  }
  
  .footer-inner{
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    padding-right: 24px;   /* 🔥 오른쪽 벽과 HOME/Admin 간 거리 */
  }
  .footer-copy{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #111827;
    white-space: nowrap;
  }
  .footer-links{
    margin-left: auto;
    display: flex;
    gap: 20px;           /* HOME ↔ Admin 간격 */
  }
  
  .footer-links a{
    font-size: 12px;
    color: #111827;
    text-decoration: none;
  }
  
  
  
  .footer-links a:hover{ text-decoration: underline; }
  
  /* ===== Responsive ===== */
  @media (max-width: 980px){
    .layout{ grid-template-columns: 1fr; }
  
    .hero{ height: auto; }
    .hero-inner{
      flex-direction: column;
      align-items:flex-start;
      order: 2; 
    }
    .hero-search{ width:100%; min-width: 0; }
  
  
  }
  
  @media (max-width: 560px){
    .post-item{ grid-template-columns: 1fr; }
    .post-thumb{ width:100%; height: 160px; }
  }
  
  /* ===== TISTORY CATEGORY FIX (사이드바 카테고리) ===== */
  .card .tt_category,
  .card .category_list,
  .card .category_list ul,
  .card .category_list li{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  
  .card .category_list a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px !important;
    border-radius:12px;
    color:#111827;
    font-weight:700;
  }
  
  .card .category_list a:hover{
    background: rgba(17,24,39,.06);
  }
  
  .card .category_list .c_cnt,
  .card .category_list .count{
    margin-left:8px;
    font-size:12px;
    color: var(--muted);
    font-weight:400;
  }
  
  /* ✅ 카테고리 한 줄을 '좌:카테고리 / 우:(숫자)+토글' 형태로 */
  .tt_category > li > a.link_item{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  /* (숫자) span 클래스가 스킨마다 다를 수 있어 2개 같이 대응 */
  .tt_category .c_cnt,
  .tt_category .count{
    margin-left:0;
    font-size:12px;
  }
  
  /* ✅ 토글 버튼(체크/화살표) */
  .cat-toggle{
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    flex:0 0 auto;
  }
  
  
  
  /* 기본(닫힘): 빈 체크 */
  .cat-toggle::before{
    content:"";
    font-size:15px;
    color:#9ca3af;
    line-height:1;
  }
  
  .link_tit {
    display: none;
  }
  
  
  /* 카테고리 한 줄 정렬(왼쪽: 이름 / 오른쪽: (숫자) + ✔ ) */
  .card .category_list > li > a.link_item{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important; /* space-between 금지 */
    gap:6px !important;
  }
  
  /* 하위 카테고리 li 자체를 들여쓰기 */
  /* 하위 카테고리 전체 톤 다운 */
  .sub_category_list li{
    padding-left: 22px;
    margin-top: 6px;
    position: relative;
  
    font-size: 12px;        /* 🔽 상위보다 작게 */
    font-weight: 400;       /* 🔽 얇게 */
    color: #8b95a1;   /* 👈 연한 쿨그레이 */
  }
  
  /* 하위 카테고리 링크 */
  .sub_category_list .link_sub_item{
    font-size: inherit;     /* li 기준 따라감 */
    color: #8b95a1;
  }
  
  
  /* 하위 카테고리 링크 */
  .link_sub_item{
    display: block;
    font-size: 13px;
    color: #374151;
  }
  
  
  
  /* (0) 같은 카운트 */
  .card .category_list a .c_cnt{
    margin-left:0px;
    font-size:12px;
    color:#374151;
    font-weight:400;
  }
  
  /* 하위 목록은 기본 숨김 */
  .card .category_list .sub_category_list{
    display:none;
    margin-top:8px;
    list-style: disc;
    padding-left:18px;
    margin-left: 14px;
  }
  
  /* ✅ (1) 카운트는 이름 바로 옆 */
  .card .category_list > li > a.link_item .c_cnt,
  .card .category_list > li > a.link_item .count{
    margin-left:4px !important;
    display:inline !important;
    white-space:nowrap !important;
  }
  
  /* ✅ 토글 버튼만 오른쪽 끝으로 밀기 */
  .card .category_list > li > a.link_item .cat-toggle{
    margin-left:auto !important;
  }
  
  /* li가 열림 상태일 때만 하위 표시 */
  .card .category_list > li.is-open > .sub_category_list{
    display:block;
  }
  
  /* ✔ 토글 버튼 */
  .card .cat-toggle{
    border:0;
    background:transparent;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    padding:0px 8px;
    border-radius:10px;
  }
  
  /* 닫힘: 빈 체크박스 느낌 */
  .card .category_list > li:not(.is-open) > a .cat-toggle{
    opacity:.55;
  }
  
  /* 열림: ✔ 강조 */
  .card .category_list > li.is-open > a .cat-toggle{
    opacity:1;
    font-weight:900;
  }
  
  /* 부모 카테고리 */
  .category_list > li{
    position: relative;
  }
  
  /* ● 동그라미
  .card .category_list .sub_category_list > li::before{
    content: "●";
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 8px;
    color: #9ca3af; 
  } */
  
  /* ✅ 1) 상위(부모) 카테고리 링크에만 flex/패딩 적용 */
  .card .category_list > li > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px !important;
    border-radius:12px;
    font-weight:700;
  }
  
  /* ✅ 2) 하위 카테고리 링크는 flex 금지 + 들여쓰기 보이게 */
  .card .category_list .sub_category_list a.link_sub_item{
    display:block !important;
    padding:6px 0 !important;
    border-radius:0 !important;
    font-weight:600;
  }
  
  /* ✅ 3) 하위 UL 자체의 기본 들여쓰기(브라우저/초기화 충돌) 제거 */
  .card .category_list .sub_category_list{
    margin:8px 0 0 0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  
  /* ✅ 4) 하위 LI 들여쓰기 + 동그라미는 LI에서만 */
  .card .category_list .sub_category_list > li{
    position:relative;
    padding-left:18px;
    margin:6px 0;
  }
  
  .card .category_list .sub_category_list > li::before{
    content:"●";
    position:absolute;
    left:6px;
    top:10px;
    font-size:6px;
    color:#9ca3af;
  }
  
  /* ✅ 5) (중요) 너가 만든 a::before 동그라미는 제거해야 함 */
  .link_sub_item::before{
    content:none !important;
  }
  
  
  
  /* ✅ 하위 li/a는 더 이상 absolute 동그라미/내어쓰기 요소 쓰지 않기 */
  .card .category_list > li > .sub_category_list > li{
    margin: 6px 0 !important;
    padding: 0 !important;
  }
  
  .card .category_list > li > .sub_category_list > li::before{
    content: none !important;       /* ✅ 너가 만든 before 동그라미 제거 */
  }
  
  .card .category_list > li > .sub_category_list a.link_sub_item{
    display:inline !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;      /* ✅ 내어쓰기 방지 */
  }
  
  /* ✅ 기본: 하위 카테고리 닫힘 */
  .card .category_list > li > .sub_category_list{
    display:none !important;
    margin: 6px 0 0 0 !important;
    padding: 0 0 0 18px !important;
    list-style: disc !important;
    list-style-position: inside;
  }
  
  /* ✅ 열림 상태에서만 펼침 */
  .card .category_list > li.is-open > .sub_category_list{
    display:block !important;
  }
  
  .link_item img, .link_sub_item img {
    display: none;
  }
  
  .card-title{
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }
  
  .card-title::after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    background: #e5e7eb; /* 연한 회색 */
    margin-top:8px;
  }
  
  /* page-sub 전체 스타일 */
  .page-sub{
    font-size: 14px;        /* '총', '개' 기본 크기 */
    color: #6b7280;
  }
  
  .page-sub-count{
    font-size: 28pt;
    font-weight: 900;
    background: #fee2e2;
    color: #b91c1c;
    padding: 2px 12px;
    border-radius: 999px;
  }
  
  /* 댓글 영역 상단 구분선 */
  .comment {
    border-top: 1px solid rgba(17, 24, 39, 0.15);
    margin-top: 28px;
    padding-top: 20px;
  }
  
  
  /* ✅ 목록 페이지(홈/카테고리/태그/검색)에서는 글 본문 숨김 */
  #tt-body-index .article,
  #tt-body-category .article,
  #tt-body-tag .article,
  #tt-body-search .article {
    display: none !important;
  }
  
  
  /* 댓글 영역 기본 박스 */
  section.comment{
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(17, 24, 39, 0.15);
  }
  
  /* 티스토리 댓글 폼/리스트에서 자주 쓰는 입력들 */
  section.comment input[type="text"],
  section.comment input[type="password"],
  section.comment textarea{
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
  }
  
  section.comment textarea{
    min-height: 110px;
    resize: vertical;
  }
  
  /* 버튼류(등록/취소 등) */
  section.comment button,
  section.comment input[type="submit"]{
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
  }
  
  section.comment button:hover,
  section.comment input[type="submit"]:hover{
    background: rgba(17,24,39,.04);
  }
  /* =========================
     댓글 입력폼(로그인 사용자) 레이아웃 수정
     - 썸네일 왼쪽, textarea 오른쪽
     - 유저이름은 textarea 안쪽 상단에 표시
     ========================= */
  
  /* 전체 줄: 썸네일 + 입력영역을 가로로 */
  .comment-form .cmt-ui{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
  
  /* 왼쪽 썸네일 영역(너 코드에선 comment-avatar 사용) */
  .comment-form .comment-avatar{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--line);
    background:#fff;
  }
  
  .comment-form .comment-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  /* 오른쪽 입력영역 */
  .comment-form .cmt-inputwrap{
    flex:1;
    min-width:0;            /* flex 줄바꿈/넘침 방지 */
    position:relative;      /* 내부 오버레이(이름) 기준 */
  }
  
  /* 유저 이름을 textarea 내부 상단에 얹기 */
  .comment-form .cmt-who-in{
    position:absolute;
    top:10px;
    left:14px;
    z-index:2;
    pointer-events:none;    /* 클릭 방해 금지 */
    
  }
  #comments form:not(.kk-guest-mode) .comment-form .cmt-who-in{
    position: static !important;
  }
  
  .comment-form .cmt-who-name{
    font-size:13px;
    font-weight:800;
    color:var(--ink);
    opacity:.9;
  }
  
  /* textarea는 이름 들어갈 공간만큼 padding-top 늘림 */
  .comment-form textarea{
    width:100%;
    min-height:90px;
    border:1px solid var(--line);
    border-radius:14px;
    padding:36px 12px 12px;   /* ✅ 상단 여백: 이름 자리 */
    font-size:14px;
    outline:none;
    resize:vertical;
    box-sizing:border-box;
  }
  
  /* 하단 액션(비밀댓글/등록)은 우측 정렬 */
  .comment-form .cmt-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:10px;
  }
  
  .comment-form .cmt-secret{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color: #333;
  }
  
  /* 등록 버튼이 줄바꿈으로 튀지 않게 */
  .comment-form .cmt-submit{
    white-space:nowrap;
  }
  /* 댓글 등록 버튼 정리 */
  .cmt-submit{
    padding: 6px 14px !important;   /* 버튼 크기 축소 */
    font-size: 13px !important;     /* 너무 크지 않게 */
    font-weight: 400 !important;    /* ✅ 보통 글자 */
    line-height: 1.2;
  
    border-radius: 10px;
    background-color: #fff;
    color: #333;
  
    border: 1px solid #e5e7eb;
    box-shadow: none !important;
  }
  
  /* hover 시에도 과하지 않게 */
  .cmt-submit:hover{
    background-color: #f9fafb;
  }
  
  
  .comment-form input{
    border:1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font-size:13px;
  }
  .comment-form button{
    border:1px solid var(--line);
    background:#fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight:800;
    cursor:pointer;
  }
  .cmt-guest{
    display:flex;
    gap:8px;
    margin-top:10px;
    flex-wrap:wrap;
  }
  .cmt-member{
    margin-top:10px;
  }
  .comment-ul{
    list-style:none;
    margin: 14px 0 0;
    padding:0;
  }
  .comment-item{
    position: relative;
    padding: 14px 0;
  }
  /* 댓글 1개당 아래 구분선 */
  .comment-ul > .comment-item{
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.12);
  }
  
  
  
  /* (⋮) 버튼을 오른쪽 위로 */
  #comments .comment-item .comment-more,
  #comments .comment-item .comment-more-btn,
  #comments .comment-item .comment-menu-btn,
  #comments .comment-item .cmt-more-btn{
    position: absolute !important;
    top: 10px !important;     /* 🔼 더 올리고 싶으면 6~12px 사이로 */
    right: 12px !important;
    margin: 0 !important;
  }
  
  /* 드롭다운(서브메뉴)도 버튼 바로 아래로 */
  #comments .comment-item .comment-menu,
  #comments .comment-item .comment-dropdown,
  #comments .comment-item .comment-actions-menu{
    position: absolute !important;
    top: 0px !important;     /* 🔼 더 올리고 싶으면 32~42px 사이로 */
    right: 12px !important;
    margin: 0 !important;
    z-index: 50 !important;
  }
  
  .comment-meta{
    display:flex;
    align-items: center;
    gap:10px;
    font-size:12px;
    color: var(--muted);
  }
  /* .comment-text{
    margin-top:6px;
    font-size:14px;
  } */
  .comment-text{
    margin-left: 52px;   /* ✅ 아바타 영역만큼 들여쓰기 */
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
  }
  
  
  /* 댓글 작성자(아이디) 표시 */
  .comment-form .cmt-who{
    font-weight: 800;
    font-size: 14px;
    color: var(--ink);
    margin: 0 0 8px 2px;   /* textarea 위 간격 */
  }
  
  /* textarea 이미 잘 쓰고 있으면 유지, 없으면 이거 적용 */
  .comment-form textarea{
    width: 100%;
    min-height: 90px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    font-size: 14px;
    outline: none;
    resize: vertical;
  }
  
  /* ✅ 비밀댓글 + 등록 버튼 오른쪽 정렬 */
  .comment-form .cmt-actions{
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;  /* 오른쪽 정렬 */
    align-items: center;
    gap: 12px;
  }
  
  /* .comment-form .cmt-secret{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  } */
  
  .comment-form .cmt-submit{
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
  }
  
  /* 댓글 입력폼 아래 구분선 */
  #comments .comment-form{
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.15);
  }
  
  
  /* 댓글 입력 UI (아바타 + 내부 아이디 라벨) */
  #comments .comment-form.enhanced{
    padding-top: 6px;
  }
  
  #comments .comment-form .rp-ui{
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
  
  #comments .comment-form .rp-avatar{
    width:40px;
    height:40px;
    border-radius:999px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#f3f4f6;
    flex:0 0 auto;
  }
  
  #comments .comment-form .rp-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  #comments .comment-form .rp-inputwrap{
    position:relative;
    flex:1;
  }
  
  /* textarea "안에" 있는 것처럼 보이는 아이디 라벨 */
  #comments .comment-form .rp-username{
    position:absolute;
    top:10px;
    left:14px;
    font-weight:800;
    font-size:13px;
    color:#111827;
    pointer-events:none;
  }
  
  /* textarea 패딩 위쪽을 넉넉히 줘서 라벨 공간 확보 */
  #comments .comment-form textarea{
    width:100% !important;
    min-height:92px;
    border:1px solid var(--line);
    border-radius:14px;
    padding:34px 14px 14px; /* ⭐ 상단 패딩 크게 */
    outline:none;
    resize:vertical;
    background:#fff;
    font-size:14px;
  }
  
  #comments .comment-form textarea::placeholder{
    color:#9ca3af;
  }
  
  /* 비밀댓글+등록 버튼 오른쪽 정렬 */
  #comments .comment-form .rp-actions{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
  }
  
  #comments .comment-form .rp-actions label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#111827;
  }
  
  #comments .comment-form .rp-actions input[type="checkbox"]{
    width:14px;
    height:14px;
  }
  
  #comments .comment-form .rp-actions input[type="submit"],
  #comments .comment-form .rp-actions button{
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:8px 14px;
    font-weight:800;
    cursor:pointer;
  }
  
  #comments .comment-form .rp-actions input[type="submit"]:hover,
  #comments .comment-form .rp-actions button:hover{
    background: rgba(17,24,39,.04);
  }
  
  /* 댓글 제목 위쪽 선 제거 */
  #comments,
  #comments .comment-title {
    border-top: none !important;
  }
  
  /* 댓글 제목 아래 수평선 */
  #comments .comment-title {
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.15);
    margin-top: 0 !important;
  }
  
  .article hr {
    display: none !important;
  }
  
  /* 작성자 카드 높이 줄이기 */
  .article .author {
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* 댓글 영역 위로 당기기 */
  #comments {
    margin-top: 16px !important;
  }
  
  /* 댓글 제목 위 여백 제거 */
  #comments .comment-title {
    margin-top: 0 !important;
  }
  
  /* 작성자 카드 아래 불필요한 간격 제거 */
  .article > div + #comments {
    margin-top: 0 !important;
  }
  
  
  /* ===== Namecard 전체 레이아웃 ===== */
  .tt_box_namecard{
    margin: 0 !important;
    height: 100px !important;
    min-height: 30px !important;
  
    display: flex !important;              /* 🔥 이 줄 중요 */
    justify-content: space-between !important;
    gap: 12px !important;
  
    padding: 20px 14px !important;
    box-sizing: border-box !important;
  }
  
  /* ===== 텍스트 영역 (코드콕콕 + 블로그) 가로 배치 ===== */
  .tt_box_namecard .tt_cont{
    /* flex: 1 1 auto !important; */
    padding: 1 !important;
    margin: 0 !important;
  
    flex-direction: column !important;
    justify-content: center !important; /* ✅ 텍스트도 세로 중앙 */
    line-height: 1 !important;
    gap: 12px !important;
  }
  
  
  .tt_box_namecard .tt_desc , .tt_box_namecard .tt_tit_cont{
    font-size: 13px;
    color: #888;
  }
  
  .tt_cont a {
    display: block;
    width: 100%;
  }
  
  /* 링크 기본 block/width 강제 해제 */
  .tt_box_namecard .tt_cont a{
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
  
  
  /* ✅ 썸네일 박스: 내부 콘텐츠(IMG/SVG) 무조건 정중앙 */
  .tt_box_namecard .tt_wrap_thumb{
    margin-top: 0;
    width:40px !important;
    height:40px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    border:1px solid var(--line) !important;
    background:#f3f4f6 !important;
  
    flex:0 0 40px !important;
  
    /* 🔥 핵심 */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;     /* baseline 영향 제거 */
  }
  
  /* ✅ 이미지 들어오면 꽉 채우기 */
  .tt_box_namecard .tt_wrap_thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
  
  /* ✅ 이미지 없고 SVG(기본 아이콘)일 때도 정중앙 */
  .tt_box_namecard .tt_wrap_thumb svg{
    display:block !important;
    margin: 0;
    padding :0 ;
  }
  
  /* 썸네일 링크(동그라미) 자체를 중앙정렬 컨테이너로 */
  div[data-tistory-react-app="Namecard"] .tt_box_namecard a.tt_wrap_thumb{
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    background: #f3f4f6 !important;
  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    padding: 0 !important;
    margin: 0 !important;
  
    line-height: 0 !important; /* baseline 처짐 방지 */
    font-size: 0 !important;
  }
  
  /* 실제 썸네일은 span 배경이미지이므로 span을 꽉 채우고 중앙 고정 */
  div[data-tistory-react-app="Namecard"] .tt_box_namecard a.tt_wrap_thumb .tt_thumb_g{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 혹시 티스토리 기본이 position/transform으로 건드리면 무력화 */
  div[data-tistory-react-app="Namecard"] .tt_box_namecard a.tt_wrap_thumb .tt_thumb_g{
    position: static !important;
    transform: none !important;
  }
  
  
  /* 텍스트 영역: 남는 공간 채우고 세로 중앙 느낌 */
  .tt_box_namecard .tt_cont{
    /* flex: 1 1 auto !important; */
    padding: 0 !important;
    margin: 0 !important;
  
    /* display: flex !important; */
    flex-direction: column !important;
    justify-content: center !important; /* ✅ 텍스트도 세로 중앙 */
    line-height: 1.25 !important;
  }
  
  .kk-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:28px 0 10px;
  }
  
  .kk-page{
    text-decoration:none;
    color:#111;
    font-size:16px;
    line-height:1;
  }
  
  .kk-num{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
  }
  
  .kk-num.selected{
    background:#111;
    color:#fff;
    font-weight:700;
  }
  
  .kk-arrow{
    font-size:22px;
    padding:0 6px;
  }
  
  /* 링크가 비어있는 prev/next는 흐리게 (티스토리 케이스별로 빈 href/속성 미출력 등 차이가 있어 보강) */
  .kk-page:not([href]),
  .kk-page[href=""],
  .kk-page[href="#"]{
    pointer-events:none;
    opacity:.35;
  }
  
  
  /* 글쓰기/관리 버튼 영역 (목록 버튼과 동일 톤) */
  .article-admin-actions{
    display:flex;
    gap:8px;
  }
  
  .article-admin-actions .btn-write,
  .article-admin-actions .btn-manage{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 12px;
    border:1px solid var(--line);
    border-radius: 16px;
    background:#fff;
    text-decoration:none;
    color:var(--ink);
    font-size:13px;
  }
  
  /* 상단 액션 정렬 */
  .article-head-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  
  .article-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  
  .article-toolbox{
    display:flex;
    align-items:center;
    padding:6px 10px;
    background:#fff;
    min-height:36px;
  }
  
  /* 티스토리 공감바(#post_button_group) 자체 스타일이 깨지지 않도록 */
  .article-toolbox .container_postbtn{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  
  /* 모바일에서 줄바꿈 */
  @media (max-width: 860px){
    .article-head-row{ flex-direction:column; align-items:flex-start; }
    .article-head-actions{ width:100%; flex-wrap:wrap; justify-content:flex-start; }
  }
  
  
  /* 댓글 메타(프로필 + 이름/날짜) */
  .comment-avatar{
    width:34px;
    height:34px;
    border-radius:999px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#f3f4f6;
    flex:0 0 auto;
  }
  
  .comment-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  
  .comment-meta-right{
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  
  
  
  .comment-actions button,
  .comment-actions a{
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    padding:6px 10px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
  }
  
  .reply-ul{
    margin-top:10px;
    padding-left:18px;
    border-left:2px solid rgba(17,24,39,0.10);
  }
  
  .reply-item{
    padding-left:10px;
  }
  
  /* ✅ PROFILE 배지 숨김 (티스토리 기본 배지/라벨) */
  .comment-item .profile,
  .comment-item .txt_profile,
  .comment-item .badge_profile,
  .comment-item [class*="profile"]{
    display:none !important;
  }
  
  /* ✅ 오른쪽 상단 메뉴 영역 */
  /* .comment-actions{
    margin-left:auto;
    position: relative;
    display:flex;
    justify-content:flex-end;
    align-items:center;
  } */
  
  .comment-actions{
    position: absolute;
    top: 12px;        /* 🔥 여기서 위아래 미세조정 */
    right: 12px;
  
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  
  .cmt-menu{
    top: 38px;   /* 버튼 바로 아래 */
    right: 0;
    background:#fff;
    border: none;                  /* 테두리 제거 */
    border-radius:12px;
    box-shadow: var(--shadow);
    padding:6px;
  }
  
  
  /* ⋮ 메뉴 버튼 기본 상태 */
  button.cmt-more-btn{
    width: 26px !important;
    height: 26px !important;
  
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  
    color: #9ca3af !important;   /* 기본 점 색 (연한 회색) */
    cursor: pointer !important;
    border-radius: 8px !important;
  }
  
  /* hover 시 연분홍 배경 */
  button.cmt-more-btn:hover{
    background-color: #fff1f2 !important;  /* 연분홍 */
  }
  
  .cmt-more-dot{
    width:2px;
    height:2px;
    border-radius:999px;
    background:#111;
    display:block;
  }
  
  /* 드롭다운 메뉴 */
  .cmt-menu{
    position:absolute;
    top: 40px;
    right: 0;
    min-width: 140px;
    background:#fff;
    
    border-radius:12px;
    box-shadow: var(--shadow);
    padding:6px;
    display:none;
    z-index: 9999;
  }
  
  .comment-actions.is-open .cmt-menu{
    display:block;
  }
  
  /* 메뉴 아이템 버튼 */
  .cmt-menu-item{
    width:100%;
    text-align:left;
  
    /* 테두리/배경 완전 제거 */
    border: none !important;
    background: transparent !important;
  
    padding:8px 10px;
    cursor:pointer;
  
    font-size:13px;
    font-weight:400;               /* 글자 연하게 */
    color:#6b7280;                 /* 연한 그레이 */
  
    border-radius:8px;             /* hover 대비 */
  }
  
  /* hover 시만 살짝 표시 */
  .cmt-menu-item:hover{
    background:#f9fafb;
    color:#374151;
  }
  
  
  /* 모바일에서도 메뉴 잘 보이게 */
  @media (max-width: 560px){
    .cmt-menu{ min-width: 160px; }
  }
  
  .cmt-guest{display:flex; gap:8px; margin:10px 0; flex-wrap:wrap;}
  .cmt-guest input{flex:1; min-width:160px;}
  
  
  /* 비밀댓글 내부 secret 텍스트 숨김 */
  .comment-text {
    white-space: pre-line;
  }
  
  .comment-text::first-line {
    display: none;
  }
  
  /* 혹시 단독으로 나올 경우 대비 */
  .comment-text:contains(" secret ") {
    display: none;
  }
  
  /* 댓글 입력폼에 튀어나오는 secret 텍스트 제거 */
  .comment-form > text {
    display: none !important;
  }
  
  
  /* 비로그인 입력폼 '익명' 라벨 */
  .kk-guest-label{
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 6px 0;
    color: #111;
  }
  
  /* 본문 첫 번째 이미지를 숨김 */
  /* .article-view img:first-of-type {
    display: none;
  } */
  
  
  
  @media (max-width: 640px){
    .article-nav{
      justify-content:space-between; /* 모바일에서 좌우로 보기 좋게 */
    }
    .article-nav .nav-btn{
      flex:1 1 auto;
    }
  }
  
  /* 구독하기 버튼 미니멀 스타일 */
  .tt_btn_subscribe{
    /* 위치 미세 조정 (이미 쓰던 값 유지 가능) */
    transform: translateY(-12px);
  
    /* 크기 */
    padding: 2px 10px !important;
    font-size: 10px !important;
    line-height: 1;
  
    /* 색상 : 배경과 어울리는 연분홍 */
    background-color: #fff1f2 !important;   /* 사이트 바탕색과 동일 */
    color: #c0265c !important;              /* 톤다운된 핑크 텍스트 */
  
    /* 테두리 */
    border: 1px solid #fce7f3 !important;
    border-radius: 999px;                   /* 알약 버튼 */
  
    /* 그림자/강조 제거 */
    box-shadow: none !important;
  
    /* 기타 */
    font-weight: 500;
    opacity: 0.9;
  }
  
  /* 게스트 폼에서 textarea 위에 '익명' 라벨 */
  .kk-guest-mode .kk-guest-label{
    display:block;
    margin: 8px 0 6px;
    font-weight:700;
    font-size:14px;
    color:#111;
  }
  
  
  /* 게스트 textarea placeholder 2줄 줄바꿈 반영 */
  /* #comments .kk-guest-mode textarea::placeholder{
    white-space: pre-line;
    line-height: 1.4;
  } */
  
  /* 게스트일 때만 여백을 로그인 폼 수준으로 정리 */
  .kk-guest-mode .cmt-guest { margin-bottom: 8px !important; }
  .kk-guest-mode .cmt-who-in { margin: 6px 0 8px !important; }
  
  /* ================================
     댓글 폼 겹침 해결 (로그인/비로그인 분리)
     - 로그인: textarea 내부에 이름 오버레이
     - 비로그인(.kk-guest-mode): 위 input들이 있어서 오버레이 금지(겹침 방지)
  ================================ */
  
  /* 1) 기본(로그인/회원) : textarea 내부 오버레이 */
  #comments form:not(.kk-guest-mode) .comment-form .cmt-inputwrap{
    position: relative !important;
  }
  #comments form:not(.kk-guest-mode) .comment-form .cmt-who-in{
    position: absolute !important;
    top: 10px !important;
    left: 14px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  #comments form:not(.kk-guest-mode) .comment-form textarea{
    padding: 34px 14px 14px !important;  /* 이름 자리 확보 */
  }
  
  /* 2) 비로그인(게스트) : 오버레이 쓰면 input에 겹침 → 블록 라벨로 변경 */
  #comments form.kk-guest-mode .comment-form .cmt-who-in{
    position: static !important;          /* absolute 금지 */
    margin: 10px 0 6px !important;        /* textarea 위로 내려줌 */
  }
  #comments form.kk-guest-mode .comment-form textarea{
    padding: 14px 14px 14px !important;   /* 불필요한 상단 패딩 제거 */
  }
  
  /* 3) 비로그인 input 3개 줄과 textarea 사이 간격 안정화 */
  #comments form.kk-guest-mode .comment-form .cmt-guest{
    margin: 0 0 10px !important;
  }
  
  /* 게스트일 때 textarea 내부에 "익명" 오버레이 */
  #comments form.kk-guest-mode .kk-ta-wrap{
    position: relative !important;
  }
  
  #comments form.kk-guest-mode .kk-ta-wrap .cmt-who-in{
    position: absolute !important;
    top: 10px !important;
    left: 14px !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  
  #comments form.kk-guest-mode .kk-ta-wrap .cmt-who-name{
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    opacity: .9 !important;
  }
  
  /* "익명" 자리만큼 padding-top 확보 */
  #comments form.kk-guest-mode .kk-ta-wrap textarea{
    padding: 34px 14px 14px !important;
  }
  
  /* placeholder가 안 보이는 문제 강제 복구 */
  #comments .comment-form textarea::placeholder{
    color:#9ca3af !important;
    opacity:1 !important;
  }
  
  /* ✅ 로그인(회원)도 placeholder 보이게: 이름 라벨을 textarea 위로 빼기 */
  #comments form:not(.kk-guest-mode) .comment-form .cmt-who-in{
    position: static !important;   /* absolute 제거 */
    margin: 0 0 6px !important;    /* textarea 위 간격 */
  }
  
  #comments form:not(.kk-guest-mode) .comment-form textarea{
    padding: 14px 14px 14px !important;  /* 상단 패딩(34px) 제거 */
  }
  
  /* placeholder는 확실히 보이게 유지 */
  #comments .comment-form textarea::placeholder{
    color:#9ca3af !important;
    opacity:1 !important;
  }
  
  /* 익명(게스트) 댓글 입력 폼 숨기기 */
  #comments .comment-form.kk-guest-mode .cmt-inputwrap,
  #comments .comment-form.kk-guest-mode .cmt-actions,
  #comments .comment-form.kk-guest-mode .cmt-guest{
    display:none !important;
  }
  
  /* 안내문구 박스 */
  #comments .kk-guest-block{
    margin: 12px 0 0 !important;
    padding: 14px 16px !important;
    border: 1px dashed var(--line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.65) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
  }
  #comments .kk-guest-block a{
    text-decoration: underline !important;
  }
  
  /* 익명(게스트) 댓글 입력 UI 전체 숨기기 (프로필/아바타 포함) */
  #comments .comment-form.kk-guest-mode .cmt-ui,
  #comments .comment-form.kk-guest-mode .comment-avatar,
  #comments .comment-form.kk-guest-mode .comment-form{
    display: none !important;
  }
  
  /* ==========================
     비로그인(익명) 댓글 폼: 읽기전용 UI
     ========================== */
  
  /* 입력창은 클릭/입력 안되게 보이도록 */
  #comments .comment-form.kk-guest-mode textarea[name="comment"]{
    background: #fff !important;
    cursor: not-allowed !important;
  }
  
  /* 비밀댓글/등록 버튼 영역 흐리게 + 클릭 막기 */
  #comments .comment-form.kk-guest-mode .cmt-actions{
    opacity: .35 !important;
    pointer-events: none !important; /* 클릭 완전 차단 */
  }
  
  /* 게스트 입력(이름/비번/홈페이지) 라인은 숨김 */
  #comments .comment-form.kk-guest-mode .cmt-guest{
    display: none !important;
  }
  
  /* '익명' 라벨은 보이게(원래 숨겼다면 복구) */
  #comments .comment-form.kk-guest-mode .cmt-who-in{
    display: block !important;
    margin: 0 0 6px !important;
    font-weight: 800 !important;
  }
  
  /* =========================================================
     방명록(Guestbook) 전용 CSS - 정리본 (필요한 것만)
     대상: <section id="guestbook" class="kk-card kk-guestbook"> ... </section>
     ========================================================= */
  
  :root{
    --kk-bg: #fff1f2;
    --kk-card: rgba(255,255,255,.88);
    --kk-line: rgba(0,0,0,.08);
    --kk-ink: #111827;
    --kk-muted: #6b7280;
    --kk-radius: 18px;
    --kk-shadow: 0 10px 28px rgba(0,0,0,.08);
  }
  
  /* 공통 카드 */
  .kk-card{
    background: var(--kk-card);
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    box-shadow: var(--kk-shadow);
    overflow: hidden;
  }
  
  /* ✅ 방명록 페이지 content 배경(사이 부분 연분홍/투명 톤) */
  body#tt-body-guestbook .content,
  body#tt-body-guestbook section.content{
    background: var(--kk-bg) !important;
  }
  
  /* 방명록 카드 자체 */
  #guestbook.kk-guestbook{
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  
  /* ✅ body를 별도 카드처럼(내부 React 영역을 하나의 카드로) */
  #guestbook.kk-guestbook > .kk-guestbook-body{
    margin: 0 !important;
    padding: 14px 16px 16px;
    border: 1px solid var(--kk-line);
    border-radius: var(--kk-radius);
    background: var(--kk-card);
    box-shadow: var(--kk-shadow);
  }
  
  /* =========================
     방명록(React Comment) - 최종 정리본
     목표:
     [썸네일] [유저 · 날짜 · 답글(한줄)] 
             [본문(다음줄)]
     + 빨간 세로줄 정도로 왼쪽 들여쓰기(썸네일 오른쪽 기준)
     ========================= */
  
  /* React 컨테이너 바탕 정리 */
  #guestbook [data-tistory-react-app="Comment"] .tt-comment-cont{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  /* 상단 타이틀/카운트 */
  #guestbook .tt-box-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 8px 2px 12px;
    margin: 0 0 10px;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  #guestbook .tt-box-total .tt_txt_g{ font-weight: 900; }
  #guestbook .tt-box-total .tt_num_g{ font-weight: 900; opacity:.65; }
  
  /* 리스트 기본 */
  #guestbook .tt-list-reply{
    list-style:none;
    padding:0;
    margin: 14px 0 0;
  }
  #guestbook .tt-item-reply{
    position:relative;
    padding: 18px 4px;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  #guestbook .tt-item-reply:last-child{ border-bottom:0; }
  
  /* ✅ 한 아이템: 썸네일(왼쪽) + 내용(오른쪽) */
  #guestbook .tt-item-reply .tt-wrap-cmt{
    display:flex !important;
    align-items:flex-start !important;
    gap: 14px !important;
    width:100% !important;
  }
  
  /* 썸네일 */
  #guestbook .tt-item-reply .tt-box-thumb{
    flex: 0 0 44px !important;
    width:44px !important;
  }
  #guestbook .tt-item-reply .tt-thumbnail{
    width:44px !important;
    height:44px !important;
    border-radius:999px !important;
    background-size:cover !important;
    background-position:center !important;
    border: 1px solid rgba(0,0,0,.06);
  }
  
  /* ✅ 오른쪽 내용칸(빨간 세로줄 느낌: 썸네일 오른쪽으로 들여쓰기된 영역) */
  #guestbook .tt-item-reply .tt-box-content{
    flex: 1 1 auto !important;
    min-width:0 !important;
    padding-left: 6px !important;          /* ← 빨간 세로줄 정도 “살짝” 더 들여쓰기 */
  }
  
  /* ✅ "유저 · 날짜 · 답글"을 같은 줄로 만들기
     - meta(유저) + info(날짜/답글)를 한 행에 올림 */
  #guestbook .tt-item-reply .tt-box-meta{
    display:inline-flex !important;
    align-items:center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  
  #guestbook .tt-item-reply .tt-link-user{
    font-weight: 900 !important;
    color: var(--kk-ink, #111827);
  }
  
  /* info(날짜/답글)를 meta 옆(같은 줄)으로 끌어올림 */
  #guestbook .tt-item-reply .tt-wrap-info{
    display:inline-flex !important;
    align-items:center !important;
    gap: 10px !important;
    margin: 0 !important;
    margin-left: 10px !important;          /* 유저와 간격 */
    color: var(--kk-muted, #6b7280);
    font-size: 12px;
  }
  
  /* "답글" 링크도 같은 톤 */
  #guestbook .tt-item-reply .tt-link-comment .tt_txt_g{
    font-weight: 800;
    color: var(--kk-muted, #6b7280);
  }
  
  /* ✅ 본문은 다음 줄 */
  #guestbook .tt-item-reply .tt-wrap-desc{
    margin-top: 10px !important;
  }
  #guestbook .tt-item-reply .tt_desc{
    margin: 0 !important;
    line-height: 1.65;
    color: var(--kk-ink, #111827);
    white-space: pre-line;
  }
  
  /* ✅ 더보기(⋮) 버튼: 오른쪽 위 고정 */
  #guestbook .tt-item-reply .tt-box-modify{
    position:absolute !important;
    top: 12px !important;
    right: 12px !important;
  }
  
  /* 더보기 리스트 위치 */
  #guestbook .tt-item-reply .tt-list-modify{
    right: 0;
    left: auto;
  }
  
  /* =========================
     작성 영역(하단 입력폼) - 톤만 정리
     ========================= */
  #guestbook .tt-area-write{
    margin-top: 16px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.65);
  }
  #guestbook .tt-area-write .tt-box-thumb{
    width:44px;
    min-width:44px;
    margin-right:10px;
  }
  
  /* 입력 textarea(contenteditable) */
  #guestbook .tt-cmt{
    min-height: 84px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.95);
    line-height: 1.6;
  }
  
  /* 등록 버튼 줄 */
  #guestbook .tt-box-write{
    margin-top: 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  #guestbook .tt-btn_register{
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 900;
  }
  .kk-gb-top {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  
  /* =========================
     [PATCH] 방명록 제목/본문 안보임 강제 복구
     (방명록 CSS 맨 아래에 추가)
     ========================= */
  
  /* 1) 방명록 제목(방명록 / 2) 무조건 표시 */
  #guestbook [data-tistory-react-app="Comment"] .tt-box-total{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    overflow:visible !important;
    margin:0 0 10px !important;
  }
  
  /* 2) 리스트 본문(글) 무조건 보이게 */
  #guestbook [data-tistory-react-app="Comment"] .tt-wrap-desc{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    margin-top:6px !important;
  }
  
  /* p 본문 자체 */
  #guestbook [data-tistory-react-app="Comment"] .tt_desc{
    display:block !important;
    color: var(--kk-ink, #111827) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin:0 !important;
    white-space: pre-line !important;
  }
  
  /* 3) 오른쪽 내용 영역이 혹시 flex로 눌려서 0폭 되는 케이스 방지 */
  #guestbook [data-tistory-react-app="Comment"] .tt-item-reply .tt-box-content{
    display:block !important;  /* 중요: block으로 고정 */
    min-width:0 !important;
  }
  
  /* 4) 우리가 만든 상단 1줄(유저/시간/답글) 라인 */
  #guestbook [data-tistory-react-app="Comment"] .kk-gb-top{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  
  /* 유저/시간/답글이 한 줄로 보이게(시간+답글은 info 안에 있음) */
  #guestbook [data-tistory-react-app="Comment"] .tt-box-meta{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
  }
  #guestbook [data-tistory-react-app="Comment"] .tt-wrap-info{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    color: var(--kk-muted, #6b7280) !important;
    font-size:12px !important;
  }
  
  /* 5) 썸네일 옆 “빨간 세로줄 만큼” 들여쓰기 느낌(원하면 값 조절) */
  #guestbook [data-tistory-react-app="Comment"] .tt-item-reply .tt-box-content{
    padding-left: 6px !important; /* <- 여기 조절(0~12px 사이 추천) */
  }
  
  
  /* =========================
     PC에서 560 이하가 되면 상단 가로 메뉴 숨김
     (모바일 CSS는 건드리지 않음)
     ========================= */
  @media (max-width: 600px){
    .nav-main, .brand-sub{ 
      display: none !important;
    }
  
  }
  
  .kk-num .selected:hover {
    background-color: #ffffff !important;  /* 연분홍 */
  }
  
  /* =========================
     사이드바 미니 달력
  ========================= */
  .kk-calendar{
    width:100%;
    font-size:12px;
  }
  
  /* 달력 상단 헤더 */
  .kk-cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
  }
  
  /* ✅ "1월" 중앙 타이틀 */
  .kk-cal-title{
    font-weight:700;
    font-size:13px;
    text-align:center;
    flex:1;
  }
  
  
  /* ✅ 좌/우 버튼: 원형 + 아이콘 중앙 정렬 */
  .kk-cal-nav{
    width:28px;
    height:28px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.15);
    background:#fff;
    cursor:pointer;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    font-size:16px;
    line-height:1;
    padding:0;
  }
  
  /* 주간/그리드 */
  .kk-cal-week,
  .kk-cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
  }
  
  .kk-cal-week{
    margin-bottom:4px;
    color:#666;
    font-weight:600;
  }
  .kk-cal-week div{ padding:4px 0; }
  
  .kk-cal-grid div{
    padding:6px 0;
    border-radius:10px;
    position:relative; /* ✅ 도트 표시용 */
  }
  
  /* 기본 날짜 */
  .kk-cal-day{ cursor:default; }
  
  /* 오늘 */
  .kk-cal-day.today{
    background:#5B4BFF;
    color:#fff;
    font-weight:700;
  }
  
  /* ✅ 공휴일: 원(도트) 표시 */
  .kk-cal-day.holiday::after{
    content:"";
    width:6px;
    height:6px;
    border-radius:999px;
    background:#ff3b30;
    position:absolute;
    left:50%;
    bottom:3px;
    transform:translateX(-50%);
  }
  
  /* 빈칸 */
  .kk-cal-empty{ background:none; }
  
  /* =========================================================
     KK RESTORE PATCH (Sidebar Category / Top Nav / Post List / Comments)
     - 이 블록은 반드시 style.css 맨 아래
     ========================================================= */
  
  /* =========================
     1) LEFT CATEGORY ACCORDION
     ========================= */
  .sidebar .card .category_list,
  .sidebar .card .category_list ul,
  .sidebar .card .category_list li{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  
  /* 1뎁스 */
  .sidebar .card .category_list > li{ position:relative; }
  
  .sidebar .card .category_list > li > a{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    font-weight:800 !important;
    color:#111827 !important;
    justify-content:flex-start !important;
  }
  .sidebar .card .category_list > li > a:hover{
    background: rgba(17,24,39,.06) !important;
  }
  
  /* 카운트 */
  .sidebar .card .category_list > li > a .c_cnt,
  .sidebar .card .category_list > li > a .count{
    font-size:12px !important;
    font-weight:500 !important;
    color:#6b7280 !important;
    margin-left:4px !important;
    display:inline !important;
  }
  
  /* 서브 있는 부모만 화살표 */
  .sidebar .card .category_list > li.has-sub > a::after{
    content:"▸";
    margin-left:auto;
    opacity:.7;
    font-size:12px;
    transform: rotate(0deg);
    transition: transform .18s ease;
  }
  .sidebar .card .category_list > li.is-open.has-sub > a::after{
    transform: rotate(90deg);
  }
  
  /* 2뎁스: 기본 닫힘 */
  .sidebar .card .category_list > li > ul,
  .sidebar .card .category_list > li > .sub_category_list{
    display:none !important;
    margin:6px 0 10px 0 !important;
    padding:0 0 0 16px !important;
  }
  .sidebar .card .category_list > li.is-open > ul,
  .sidebar .card .category_list > li.is-open > .sub_category_list{
    display:block !important;
  }
  
  /* 2뎁스 li */
  .sidebar .card .category_list > li > ul > li,
  .sidebar .card .category_list > li > .sub_category_list > li{
    position:relative;
    margin:6px 0 !important;
    padding-left:14px !important;
  }
  .sidebar .card .category_list > li > ul > li::before,
  .sidebar .card .category_list > li > .sub_category_list > li::before{
    content:"●";
    position:absolute;
    left:0;
    top:8px;
    font-size:6px;
    color:#9ca3af;
  }
  
  /* 2뎁스 링크 */
  .sidebar .card .category_list > li > ul a,
  .sidebar .card .category_list > li > .sub_category_list a{
    display:inline-block !important;
    padding:0 !important;
    border-radius:0 !important;
    font-weight:600 !important;
    font-size:13px !important;
    color:#8b95a1 !important;
  }
  
  /* 이미지/불필요 before 제거 */
  .sidebar .card .category_list a img,
  .sidebar .card .category_list a::before{
    display:none !important;
    content:none !important;
  }
  
  /* =========================
     2) TOP NAV (유지 + 안정화)
     ========================= */
  header.hero{ z-index: 50 !important; }
  .nav{
    z-index: 9999 !important;
    overflow: visible !important;
  }
  
  /* nav가 흐리게 보일 때 대비 */
  .nav-link{
    color:#111827 !important;
    font-weight:800 !important;
  }
  
  /* =========================
     3) POST LIST CARD (목록 카드 톤 고정)
     ========================= */
  .post-list{
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow:hidden !important;
  }
  
  .post-item{
    display:grid !important;
    grid-template-columns: 140px 1fr !important;
    gap:14px !important;
    padding:14px !important;
    border-bottom:1px solid var(--line) !important;
  }
  .post-item:last-child{ border-bottom:0 !important; }
  
  .post-thumb{
    width:140px !important;
    height:96px !important;
    border-radius:16px !important;
    overflow:hidden !important;
    border:1px solid var(--line) !important;
    background:#f3f4f6 !important;
  }
  
  .post-title{
    font-weight:900 !important;
    font-size:15px !important;
  }
  .post-meta{
    color:#6b7280 !important;
    font-size:12px !important;
    opacity:1 !important;
  }
  .post-meta .date,
  .post-meta .rp-count{
    display:inline !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  
  /* =========================
     4) COMMENTS (댓글 레이아웃 고정)
     ========================= */
  #comments{
    margin-top: 16px !important;
  }
  
  section.comment,
  #comments .comment-form{
    border-top: 1px solid rgba(17,24,39,0.15) !important;
  }
  
  .comment-ul > .comment-item{
    border-bottom: 1px solid rgba(17,24,39,0.12) !important;
  }
  
  /* 댓글 내용 들여쓰기(아바타 폭 기준) */
  .comment-text{
    margin-left: 52px !important;
    line-height: 1.6 !important;
    color: var(--ink) !important;
  }
  
  /* ⋮ 메뉴 버튼 우상단 고정(혹시 다른 규칙에 밀릴 때) */
  .comment-actions{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
  }
  
  /* =========================
     사이드바 미니 달력
  ========================= */
  .kk-calendar{
    width:100%;
    font-size:12px;
  }
  
  /* 달력 상단 헤더 */
  .kk-cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
  }
  
  /* ✅ "1월" 중앙 타이틀 */
  .kk-cal-title{
    font-weight:700;
    font-size:13px;
    text-align:center;
    flex:1;
  }
  
  
  /* ✅ 좌/우 버튼: 원형 + 아이콘 중앙 정렬 */
  .kk-cal-nav{
    width:28px;
    height:28px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.15);
    background:#fff;
    cursor:pointer;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    font-size:16px;
    line-height:1;
    padding:0;
  }
  
  /* 주간/그리드 */
  .kk-cal-week,
  .kk-cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
  }
  
  .kk-cal-week{
    margin-bottom:4px;
    color:#666;
    font-weight:600;
  }
  .kk-cal-week div{ padding:4px 0; }
  
  .kk-cal-grid div{
    padding:6px 0;
    border-radius:10px;
    position:relative; /* ✅ 도트 표시용 */
  }
  
  /* 기본 날짜 */
  .kk-cal-day{ cursor:default; }
  
  /* 오늘 */
  .kk-cal-day.today{
    background:#5B4BFF;
    color:#fff;
    font-weight:700;
  }
  
  /* ✅ 공휴일: 원(도트) 표시 */
  .kk-cal-day.holiday::after{
    content:"";
    width:6px;
    height:6px;
    border-radius:999px;
    background:#ff3b30;
    position:absolute;
    left:50%;
    bottom:3px;
    transform:translateX(-50%);
  }
  
  /* 빈칸 */
  .kk-cal-empty{ background:none; }