/* ================ CINDERCLAD 최종안 ================ */
/* 배경 유지 */
body{
  background:url("/cindercladbg.jpg") no-repeat center center fixed !important;
  background-size:cover !important;
}

/* 전역 리셋: 예전 ::before 주입 전부 제거 */
body::before,
header::before,
header a[href="/"]::before,
header a[rel="home"]::before,
header .navbar__brand::before,
header .brand::before,
header .site-branding::before,
.column-header__icon::before{
  content:none !important;
  background:none !important;
}

/* 혹시 남아있는 fav.png <img>도 숨김 */
header img[src*="/fav.png"],
.logo-resources img[src*="/fav.png"]{
  display:none !important;
}

/* ---- 데스크톱(아이콘 없음) ---- */
@media (min-width:769px){
  header .logo,
  header .brand svg,
  header .brand img,
  header [class*="logo"] svg,
  .logo-resources,
  .column-header__icon svg{
    display:none !important;
    visibility:hidden !important;
  }
}

/* ---- 모바일(토끼 → 불꽃) ---- */
@media (max-width:768px){
  /* 기본 토끼/SVG 숨김 */
  .logo-resources,
  header .brand svg,
  header .brand img,
  header [class*="logo"] svg,
  .column-header__icon svg{
    display:none !important;
  }

  /* 홈 링크에 불꽃 아이콘 주입 */
  header .brand,
  header a[href="/"],
  header a[rel="home"]{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    min-height:40px !important;
    padding-left:40px !important; /* 아이콘 자리 */
  }
  header .brand::before,
  header a[href="/"]::before,
  header a[rel="home"]::before{
    content:"";
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    width:32px; height:32px;
    background:url("/fav.png?v=8") no-repeat center/contain !important;
  }

  /* 사이드 컬럼 헤더 아이콘도 동일 적용(테마별 보조) */
  .column-header__icon{
    width:32px; height:32px;
    background:url("/fav.png?v=8") no-repeat center/contain !important;
  }
}

/* ==== MOBILE HOME ICON SWAP — wider net selectors ==== */
@media (max-width: 768px){
  /* 1) 모바일 레이아웃에서 나올 수 있는 모든 로고/토끼 svg/img 숨김 */
  header svg, header img,
  .logo-resources,
  .column-header__icon svg, .column-header__icon img,
  .tabs-bar__link--logo svg, .tabs-bar__link--logo img,
  .tabs-bar a[aria-label*="Home"] svg, .tabs-bar a[aria-label*="홈"] svg,
  .drawer__header a svg, .drawer__header a img,
  a[title*="Home"] svg, a[title*="홈"] svg {
    display: none !important;
  }

  /* 2) 홈 링크(가능한 후보들)에 불꽃 아이콘 주입 */
  header a[href="/"]::before,
  header a[rel="home"]::before,
  .tabs-bar__link--logo::before,
  .tabs-bar a[aria-label*="Home"]::before, .tabs-bar a[aria-label*="홈"]::before,
  .drawer__header a::before,
  a[title*="Home"]::before, a[title*="홈"]::before,
  .column-header__icon::before {
    content: "";
    display: inline-block;
    width: 32px; height: 32px;
    vertical-align: middle;
    background: url("/fav.png?v=9") no-repeat center center / contain !important;
  }

  /* 3) 아이콘이 들어간 요소의 높이/정렬 보정 */
  header a[href="/"], header a[rel="home"],
  .tabs-bar__link--logo,
  .tabs-bar a[aria-label*="Home"], .tabs-bar a[aria-label*="홈"],
  .drawer__header a,
  a[title*="Home"], a[title*="홈"],
  .column-header__icon {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    gap: 8px;
  }
}

/* ==== MOBILE FIX: reset wide selectors and swap ONLY the header mascot ==== */
@media (max-width: 768px){
  /* (A) 이전 주입들 전부 해제: 여기 때문에 탭바 등에서 불꽃이 튀어나왔음 */
  header a[href="/"]::before,
  header a[rel="home"]::before,
  .tabs-bar__link--logo::before,
  .tabs-bar a[aria-label*="Home"]::before, .tabs-bar a[aria-label*="홈"]::before,
  .drawer__header a::before,
  a[title*="Home"]::before, a[title*="홈"]::before,
  header .brand::before {
    content: none !important;
    background: none !important;
  }

  /* (B) 탭바/하단 네비 자체엔 아무 배경도 주지 않음 */
  .tabs-bar__link--logo,
  .tabs-bar a[aria-label*="Home"], .tabs-bar a[aria-label*="홈"]{
    background: none !important;
  }

  /* (C) 진짜 교체 대상: 헤더의 마스코트 아이콘만 바꾼다 */
  .column-header__icon svg,
  .column-header__icon img {
    display: none !important;
  }
  .column-header__icon{
    width: 32px;
    height: 32px;
    background: url("/fav.png?v=10") no-repeat center center / contain !important;
  }
}

/* ==== MOBILE HEADER ONLY: swap bunny -> fav.png ==== */
@media (max-width: 768px){
  /* 헤더 안의 로고/토끼만 숨김 (하단 탭바 제외) */
  header .logo,
  header [class*="logo"] img,
  header [class*="logo"] svg,
  header .brand img,
  header .brand svg,
  header .column-header__icon img,
  header .column-header__icon svg {
    display: none !important;
  }

  /* 헤더의 홈/브랜드 영역에만 불꽃 아이콘 주입 */
  header .brand,
  header a[href="/"],
  header a[rel="home"],
  header .column-header__icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding-left: 36px !important; /* 아이콘 자리 */
  }

  /* 아이콘 그리기 (헤더에만) */
  header .brand::before,
  header a[href="/"]::before,
  header a[rel="home"]::before,
  header .column-header__icon::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    background: url("/fav.png?v=11") no-repeat center center / contain !important;
  }
}

/* ==== MOBILE HEADER: swap .ui__header__logo bunny -> fav.png, remove stray flames ==== */
@media (max-width: 768px){
  /* (A) 잔재 불꽃 제거: 이전 주입 흔적들 초기화 */
  header .brand::before,
  header a[href="/"]::before,
  header a[rel="home"]::before,
  .column-header__icon::before {
    content: none !important;
    background: none !important;
  }
  .column-header__icon {
    background: none !important;
  }

  /* (B) 토끼가 들어있는 정확한 요소: a.ui__header__logo */
  /* 내부의 svg/img(토끼) 숨기고 */
  a.ui__header__logo svg,
  a.ui__header__logo img {
    display: none !important;
  }

  /* 링크 자체를 아이콘으로 바꾼다 */
  a.ui__header__logo{
    position: relative !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    /* 레이아웃이 틀어지지 않도록 줄정렬 보정 */
    vertical-align: middle !important;
    /* 아이콘 표시 */
    background: url("/fav.png?v=12") no-repeat center center / contain !important;
    /* 혹시 남는 텍스트 숨김 */
    text-indent: -9999px;
    overflow: hidden;
  }
}

/* ==== TABLET RANGE (769–1024px): header bunny -> fav.png, remove leftovers ==== */
@media (min-width: 769px) and (max-width: 1024px){
  /* 잔재 불꽃 제거 */
  header .brand::before,
  header a[href="/"]::before,
  header a[rel="home"]::before,
  .column-header__icon::before {
    content: none !important;
    background: none !important;
  }
  .column-header__icon { background: none !important; }

  /* 정확 타깃: a.ui__header__logo 내부 토끼 숨김 */
  a.ui__header__logo svg,
  a.ui__header__logo img { display: none !important; }

  /* 링크 자체를 불꽃 아이콘으로 */
  a.ui__header__logo{
    position: relative !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    vertical-align: middle !important;
    background: url("/fav.png?v=13") no-repeat center center / contain !important;
    text-indent: -9999px; overflow: hidden;
  }
}

/* ==== DESKTOP WORDMARK ==== */
@media (min-width: 1025px){
  /* 기존 토끼/불꽃 SVG는 숨김 */
  a.ui__header__logo svg,
  a.ui__header__logo img {
    display: none !important;
  }

  /* 링크 자체에 워드마크 배경 적용 */
  a.ui__header__logo{
    display: inline-block !important;
    width: 220px !important;     /* 필요시 조정 */
    height: 42px !important;
    margin-left: 12px !important; /* 왼쪽 여백 살짝 추가 */
    background: url("/serverthumb.png?v=1") no-repeat left center / contain !important;
    text-indent: -9999px; 
    overflow: hidden;
  }
}

/* ==== DESKTOP: unify wordmark for nav panel + sidebar ==== */
@media (min-width: 1025px){
  /* 기존 이미지 숨김 */
  .navigation-panel__logo img,
  .sidebar img.logo--icon {
    display: none !important;
  }

  /* navigation panel 로고 */
  .navigation-panel__logo a.column-link--logo{
    display: inline-block !important;
    width: 220px !important;   /* 필요시 조정 */
    height: 42px !important;
    background: url("/serverthumb.png?v=3") no-repeat left center / contain !important;
    text-indent: -9999px;
    overflow: hidden;
  }

  /* sidebar 로고 */
  .sidebar a[href="/"]{
    display: inline-block !important;
    width: 220px !important;
    height: 42px !important;
    background: url("/serverthumb.png?v=3") no-repeat left center / contain !important;
    text-indent: -9999px;
    overflow: hidden;
  }
}

/* ==== LOGO POSITION ADJUSTMENT ==== */

/* 모바일/태블릿 flame 아이콘 */
@media (max-width: 1024px){
  a.ui__header__logo,
  header .brand,
  header a[href="/"],
  header a[rel="home"],
  header .column-header__icon {
    margin-left: 8px !important; /* 🔥 불꽃 전체를 오른쪽으로 */
  }
}

/* 데스크톱 wordmark 로고들 */
@media (min-width: 1025px){
  a.ui__header__logo,
  .navigation-panel__logo a.column-link--logo,
  .sidebar a[href="/"] {
    margin-left: 12px !important; /* ✨ 워드마크 오른쪽으로 */
  }
}

/* ==== LOGO POSITION ADJUSTMENT ==== */

/* 모바일/태블릿 flame 아이콘 */
@media (max-width: 1024px){
  a.ui__header__logo,
  header .brand,
  header a[href="/"],
  header a[rel="home"],
  header .column-header__icon {
    margin-left: 20px !important; /* 🔥 불꽃 전체를 오른쪽으로 */
  }
}

/* 데스크톱 wordmark 로고들 */
@media (min-width: 1025px){
  a.ui__header__logo,
  .navigation-panel__logo a.column-link--logo,
  .sidebar a[href="/"] {
    margin-left: 30px !important; /* ✨ 워드마크 오른쪽으로 */
  }
}

/* ==== DESKTOP: bigger navigation panel wordmark (40% larger) ==== */
@media (min-width: 1025px){
  .navigation-panel__logo a.column-link--logo{
    width: 308px !important;
    height: 59px !important;
    background-size: contain !important;
  }
}

/* ==== DESKTOP: navigation panel wordmark 60% larger ==== */
@media (min-width: 1025px){
  .navigation-panel__logo a.column-link--logo{
    width: 352px !important;
    height: 67px !important;
    background-size: contain !important;
  }
}

/* ==== DESKTOP: navigation panel wordmark 80% larger ==== */
@media (min-width: 1025px){
  .navigation-panel__logo a.column-link--logo{
    width: 396px !important;
    height: 76px !important;
    background-size: contain !important;
  }
}

/* ==== DESKTOP: navigation panel wordmark 100% larger ==== */
@media (min-width: 1025px){
  .navigation-panel__logo a.column-link--logo{
    width: 440px !important;
    height: 84px !important;
    background-size: contain !important;
  }
}

/* ==== BRAND COLOR OVERRIDE ==== */
:root {
  --brand-color: #56b6a2 !important;
  --accent-color: #56b6a2 !important;
  --button-primary-bg: #56b6a2 !important;
  --button-primary-text: #ffffff !important; /* 흰색 글자 유지 */
}

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}

/* ==== SETTINGS SIDEBAR LOGO OVERRIDE ==== */
@media (min-width: 769px){
  /* 기존 이미지 숨기기 */
  .sidebar img.logo--icon {
    display: none !important;
  }

  /* 새 이미지로 교체 */
  .sidebar a[href="/"]{
    display: inline-block !important;
    width: 220px !important;
    height: 42px !important;
    background: url("/serverthumb.png?v=4") no-repeat left center / contain !important;
    text-indent: -9999px;
    overflow: hidden;
    margin-left: 8px !important; /* 여백 맞춤 */
  }
}

/* ==== SETTINGS / ADMIN: sidebar logos -> serverthumb.png ==== */
@media (min-width: 769px){
  /* 1) 기존 이미지 숨김 (설정/관리 화면 전용) */
  .admin .sidebar img.logo--icon,
  .admin .navigation-panel__logo img,
  .admin .sidebar__toggle__logo img { display: none !important; }

  /* 2) sidebar 최상단 로고 링크를 워드마크로 교체 */
  .admin .sidebar a[href="/"]{
    display:inline-block !important;
    width:220px !important;
    height:42px !important;
    background:url("/serverthumb.png?v=5") no-repeat left center / contain !important;
    text-indent:-9999px; overflow:hidden;
    margin-left:8px !important;
  }

  /* 3) 토글 영역에 있는 로고 컨테이너도 동일 교체 */
  .admin .sidebar__toggle__logo{
    width:220px !important;
    height:42px !important;
    background:url("/serverthumb.png?v=5") no-repeat left center / contain !important;
  }
}

/* ==== ADMIN SETTINGS: force replace sidebar toggle logo ==== */
@media (min-width: 769px){
  /* 기존 이미지들 숨김(아이콘/워드마크 전부) */
  .admin .sidebar__toggle__logo a > img,
  .admin .sidebar a[href="/"] > img.logo,
  .admin .sidebar a[href="/"] > img.logo--icon,
  .admin .sidebar a[href="/"] > img.logo--wordmark {
    display: none !important;
  }

  /* 링크 자체를 워드마크 배경으로 교체 */
  .admin .sidebar__toggle__logo a,
  .admin .sidebar a[href="/"] {
    display: inline-block !important;
    width: 220px !important;
    height: 42px !important;
    background: url("/serverthumb.png?v=6") no-repeat left center / contain !important;
    text-indent: -9999px; overflow: hidden;
    margin-left: 8px !important;
  }
}

/* ==== ADMIN SETTINGS: force sidebar logos to serverthumb.png ==== */
/* 상단 메인 로고(<a href="/"> <img class="logo ...">) 숨김 */
.admin .sidebar > a[href="/"] > img.logo,
.admin .sidebar > a[href="/"] > img.logo--icon,
.admin .sidebar > a[href="/"] > img.logo--wordmark {
  display: none !important;
}
/* 링크 자체를 워드마크로 */
.admin .sidebar > a[href="/"]{
  display: inline-block !important;
  width: 220px !important;
  height: 42px !important;
  background: url("/serverthumb.png?v=7") no-repeat left center / contain !important;
  text-indent: -9999px; overflow: hidden;
  margin-left: 8px !important;
}

/* 토글 영역(sidebar__toggle__logo) 안 로고도 동일 처리 */
.admin .sidebar__toggle__logo > a > img { display: none !important; }
.admin .sidebar__toggle__logo > a{
  display: inline-block !important;
  width: 220px !important;
  height: 42px !important;
  background: url("/serverthumb.png?v=7") no-repeat left center / contain !important;
  text-indent: -9999px; overflow: hidden;
  margin-left: 8px !important;
}


/* ==== BUTTONS: force transparent background ==== */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button:active,
.button:focus,
.button:hover,
.layout-single-column .button,
.layout-single-column .button:active,
.layout-single-column .button:focus,
.layout-single-column .button:hover,
button.button--block[type="submit"],
.button.button--block[type="submit"] {
  background: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* ==== POST (게시) BUTTON ==== */
button.compose-form__publish,
button.button.button--block[type="submit"] {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}
button.compose-form__publish:hover,
button.button.button--block[type="submit"]:hover {
  background-color: #4da593 !important; /* hover 시 약간 어둡게 */
  border-color: #4da593 !important;
}

/* ==== POST (게시) + SAVE (저장) BUTTON ==== */
button.compose-form__publish,
form button[type="submit"] {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}

button.compose-form__publish:hover,
form button[type="submit"]:hover {
  background-color: #4da593 !important; /* hover 시 조금 어둡게 */
  border-color: #4da593 !important;
}

/* ==== SAVE BUTTONS (환경설정 상단/하단 모두) ==== */
form .button[type="submit"],
form input[type="submit"].button {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}

form .button[type="submit"]:hover,
form input[type="submit"].button:hover {
  background-color: #4da593 !important;
  border-color: #4da593 !important;
}

/* ==== SETTINGS: SAVE BUTTON (환경설정 - 외관 상단) ==== */
.simple_form .actions input[type="submit"] {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.simple_form .actions input[type="submit"]:hover {
  background-color: #4da593 !important;
  border-color: #4da593 !important;
}

/* ==== SETTINGS: SAVE BUTTON (환경설정 상단) ==== */
.content__heading .content__heading__actions .button {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.content__heading .content__heading__actions .button:hover {
  background-color: #4da593 !important;
  border-color: #4da593 !important;
}

/* ==== ADMIN WRAPPER CUSTOM ==== */
.admin-wrapper {
  background-color: transparent !important;
}

/* ==== ADMIN BUTTON / ACCENT ==== */
.admin-wrapper .button,
.admin-wrapper button,
.admin-wrapper [type="submit"],
.admin-wrapper [type="button"] {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}

.admin-wrapper .button:hover,
.admin-wrapper button:hover {
  filter: brightness(0.9) !important;
}

/* ADMIN 화면: 배경/사이드바 투명 처리(최상단에서 강제) */
body.admin { background: transparent !important; }
body.admin .admin-wrapper,
body.admin .sidebar-wrapper,
body.admin .sidebar { background: transparent !important; }

/* ADMIN 화면: 버튼/강조색 통일 */
body.admin .button,
body.admin button,
body.admin [type="submit"],
body.admin [type="button"]{
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}
body.admin .button:hover,
body.admin button:hover{
  filter: brightness(0.9) !important;
}

/* ==== ADMIN WRAPPER CUSTOM ==== */
.admin-wrapper {
  background-color: transparent !important;
}

/* ==== ADMIN BUTTON / ACCENT ==== */
.admin-wrapper .button,
.admin-wrapper button,
.admin-wrapper [type="submit"],
.admin-wrapper [type="button"] {
  background-color: #56b6a2 !important;
  border-color: #56b6a2 !important;
  color: #fff !important;
}

.admin-wrapper .button:hover,
.admin-wrapper button:hover {
  filter: brightness(0.9) !important;
}

/* ==== REVERT (ADMIN): restore dark background/look ==== */
body.admin { 
  background: #191b22 !important;                 /* 관리자 뷰 전체 배경을 다크로 복귀 */
}
body.admin .admin-wrapper,
body.admin .sidebar-wrapper,
body.admin .sidebar {
  background-color: rgba(0,0,0,0.45) !important;  /* 좌측 영역/래퍼도 어두운 톤으로 복귀 */
}
/* (게시/저장 버튼 색상은 이전에 지정한 #56b6a2 유지) */

/* ==== REVERT with BACKGROUND IMAGE ==== */
/* 관리자 화면에서도 기본 cindercladbg.png 배경을 그대로 보이도록 */
body.admin {
  background: url("/cindercladbg.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

body.admin .admin-wrapper,
body.admin .sidebar-wrapper,
body.admin .sidebar {
  background-color: transparent !important; /* 배경을 가리지 않도록 투명화 */
}

/* 저장/게시 버튼은 계속 #56b6a2 유지 */