@charset "UTF-8";

	html {
		box-sizing: border-box;
		scroll-behavior: smooth;
	}

	img {
		height: auto;
		max-width: 100%;
		border-radius: 0.365em;
	}

	::selection {
		background-color: #FFD800; /* 선택된 텍스트의 배경 색을 노란색으로 설정 */
		color: #000; /* 선택된 텍스트의 글자 색을 검정색으로 설정 (선택적) */
	}

	.both {
		clear: both;
	}
	b, strong {
		font-family: 'Noto Serif KR', sans-serif !important;
		font-weight: 600;
		background: linear-gradient(transparent 50%, #FBE8E8 50%);
	}

	.small {
		font-size: 0.8rem !important;
	}

	.nine {
		font-size: 0.9rem !important;
	}

	.one {
		font-size: 1rem !important;
	}

/* 텍스트 위치 */
	.align-left {
		text-align: left;
	}
	.align-center {
		text-align: center;
	}
	.align-right {
		text-align: right;
	}

	.fl {
		float: left;
	}
	.fr {
		float: right;
	}

/* 폰트 한글 + 영문 */
	.hangle {
		font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	}
	.hangles {
		font-family: 'Noto Serif KR', sans-serif !important;
	}
	.eng {
		font-family: "Taviraj", serif !important;
	}
	.pr {
		padding-right: 0.2em;
	}

	hr {
		clear: both;
		margin: 3rem 0;
		color: inherit;
		background-color: #303030;
		opacity: .25;
	}
	hr.major {
		margin: 1rem 0;
		color: inherit;
		background-color: currentColor;
		opacity: .25;
	}

	.mb-0 {
		margin-bottom: 0rem !important;
	}
	.mb-1 {
		margin-bottom: 1rem !important;
	}
	.mb-2 {
		margin-bottom: 2rem !important;
	}
	.mb-3 {
		margin-bottom: 3rem !important;
	}
	.mb-4 {
		margin-bottom: 4rem !important;
	}

	.bp {
		border: 1px solid #ddd;
	}

	.middle {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		justify-content: flex-end;
	}

	.logo_title {
		color: #F56A6A;
	}
	.date {
		color: #F56A6A;
		font-size: 1.33em;
		line-height: 1.8;
		font-family: "Taviraj", serif !important;
	}

/*
	#main > .inner > section {
		margin-bottom: 8rem;
	}

	#main > .inner > section:last-child {
		margin-bottom: 0;
	}

@media screen and (max-width: 736px) {
	#main > .inner > section {
        margin-bottom: 5rem;
	}

	#main > .inner > section:last-child {
        margin-bottom: 0;
	}
}
*/

/* 모바일에서 안나오게  */
@media screen and (max-width: 736px) {
    .mobile-hide {
        display: none !important; /* mobile-hide 클래스를 가진 이미지 숨기기 */
    }
}

/* 게시판 목록 */
.bbs-list {
	/*border-top: 2px solid #222;*/
	margin-top: 1rem;
	margin-bottom: 3rem;
	width: 100%;
	overflow-x: hidden;      /* 혹시 넘쳐도 스크롤 대신 잘리게 */
	box-sizing: border-box;
}
.bbs-list-head {
	display: flex;
	align-items: center;
	padding: 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #303030;
	border-bottom: 3px solid #000;
}
.bbs-row {
	display: flex;
	align-items: center;
	padding: 16px;
	text-decoration: none;
	color: #303030;
	border-bottom: 1px solid #eee;
	transition: background 0.15s ease, padding-left 0.15s ease;
	width: 100%;
	box-sizing: border-box;   /* padding이 너비에 포함되도록 */
}
.bbs-row:hover {
	background: #FCF1F1;
	padding-left: 20px;
}
.bbs-row:hover .col-subject {
	color: #8E4848;
}
.col-num {
	flex: 0 0 60px;
	font-family: "Roboto Slab", serif;
	font-size: 0.7rem;
	color: #666;
	font-weight: 500;
}
.col-subject {
	flex: 1;
	min-width: 0;             /* flex 아이템이 내용 때문에 넘치는 것 방지 (핵심) */
	font-family: "Roboto Slab", serif;
	font-size: 1rem;
	font-weight: 330;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s ease;
}
.col-date {
	flex: 0 0 110px;
	font-family: "Roboto Slab", serif;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 500;
	color: #666;
}

.tiles article .meta {
	display: flex;
	gap: 10px;
	font-size: 0.87rem;
	color: #fff;
	font-family: "Taviraj", serif !important;
	font-weight: 700;
	margin: 4px 0 8px;
}
.tiles article .meta-audience::before {
	content: "· ";
}

/* 모바일: 번호/날짜 숨기고 제목만 */
@media (max-width: 736px) {
	.bbs-list-head { display: none; }
	.bbs-row { padding: 14px 12px; }
	.col-num, .col-date { display: none; }
	.col-subject {
		font-size: 14px;
		white-space: nowrap;      /* normal → nowrap + ellipsis로 변경 (아래 설명) */
		overflow: hidden;
		text-overflow: ellipsis;
	}
}


  /* ===================== TOC (자동 목차) ===================== */
  .toc-wrap {
    border: 1px solid #ED6060;           /* 포인트 컬러 톤의 테두리로 눈에 띄게 */
    border-radius: 0.375em;
    overflow: hidden;
    margin: 0 0 5em 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(245, 106, 106, 0.3);
  }

.toc-wrap + button,
.toc-wrap button {
    border-top-left-radius: 4px;     /* 상단 좌측: 기존 라운드 유지 */
    border-top-right-radius: 4px;    /* 상단 우측: 기존 라운드 유지 */
    border-bottom-left-radius: 0;    /* 하단 좌측: 직각 📐 */
    border-bottom-right-radius: 0;   /* 하단 우측: 직각 📐 */
}

  .toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #F56A6A; 
    box-shadow: inset 0 0 0 0 transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: #fff !important;
  }
  .toc-toggle:hover { background: #F56A6A; }
 
  .toc-toggle .toc-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .toc-toggle .toc-icon {
    display: inline-flex;
    font-size: 16px;
  }
  .toc-toggle .toc-count {
    font-size: 12px;
    font-weight: 600;
    color: #FAD3D3;
    background: transparent;
    border-radius: 999px;
    padding: 2px 8px;
  }
.toc-toggle .toc-arrow {
    display: inline-block;
    transition: transform .25s ease;
    
    /* 💡 SVG 전용 크기 및 컬러 매핑 설정 */
    width: 0.9em;        /* 텍스트 크기(1em)에 맞춰 자연스럽게 연동 */
    height: 0.9em;
    color: #fff;         /* SVG stroke="currentColor" 설정으로 글씨색을 그대로 따라감 */
    vertical-align: middle; /* 글씨와 화살표의 높낮이 수평 정렬 */
    margin-left: 5px;    /* 텍스트와의 간격 확보 */
}

/* 💡 목차가 열렸을 때 (기존 로직 완벽 유지) */
.toc-wrap.is-open .toc-toggle .toc-arrow {
    transform: rotate(180deg); /* 부드럽게 싹 뒤집히며 위(^)를 향하게 됨 */
}
 
  .toc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .toc-wrap.is-open .toc-body {
    max-height: 3000px;
  }
 
  /* 대제목(h2) 하나 = 컬럼 하나. 3칸이 차면 다음 대제목은 아래 줄로 */
  .toc-grid {
    list-style: none;
    margin: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 가로 3등분 */
  }
 
  .toc-group {
    padding: 4px 20px;
    border-right: 1px solid #e5e5e5;   /* 컬럼 사이 세로 1px 구분선 */
  }
  .toc-group:nth-child(3n) {
    border-right: none;                /* 각 줄의 마지막 칸은 세로선 없음 */
  }
  /* 4번째 칸부터(=두 번째 줄부터) 위쪽에 가로선 + 여백 */
  .toc-group:nth-child(n+4) {
    border-top: 1px solid #e5e5e5;
    margin-top: 14px;
    padding-top: 14px;
  }
 
  .toc-group .toc-h2-link {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: #F56A6A;
    font-family: 'Noto Serif KR', sans-serif;
    text-decoration: none;
    margin-bottom: 8px;
  }
  .toc-group .toc-h2-link:hover { text-decoration: underline; }
 
  .toc-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toc-sub-list li { 
      border-top: solid 1px rgba(210, 215, 217, 0.75);
      padding: 0.5em 0;
 }
  .toc-sub-list a {
    display: block;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    font-family: 'Noto Serif KR', sans-serif;
    line-height: 1.4;
  }
  .toc-sub-list a:hover { color: #0b57d0; }
 
  /* 모바일: 한 줄(1열)로 전환, 세로선 대신 컬럼(=그룹) 사이 가로선 */
  @media (max-width: 600px) {
    .toc-grid { grid-template-columns: 1fr; }
    .toc-group {
      border-right: none;
      border-top: none;
      margin-top: 0;
      padding-top: 4px;
    }
    .toc-group:not(:first-child) {
      border-top: 1px solid #eee;
      margin-top: 14px;
      padding-top: 14px;
    }
  }


  /* ===========================================================
     fileis.com 리셀러 검색폼 - 스코프된 스타일
     - 모든 규칙을 .fis-search-wrap 하위로 한정 (전역 input/button에 영향 없음)
     - box-sizing 등 리셋도 이 컴포넌트 내부에만 적용
  =========================================================== */
 

  .fis-search-wrap {
    --fis-accent: #585858;
    --fis-accent-pink: #F2849E;
    --fis-border: #e2e4ec;
    --fis-bg: #ffffff;
    --fis-text: #1c1e29;
    --fis-placeholder: #9a9db0;
    --fis-radius: 999px;
    --fis-shadow: 0 2px 10px rgba(20, 24, 40, 0.06);
    --fis-shadow-focus: 0 4px 18px rgba(79, 109, 245, 0.18);
    --fis-logo-size: 40px; /* 좌측 이미지 크기 조절용 */
    --fis-logo-gap: 12px;  /* 이미지와 검색폼 사이 간격 */
 
    display: flex;
    align-items: center;
    gap: var(--fis-logo-gap);
    max-width: 60%;
    width: 100%;
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  }
 
  .fis-search-wrap .fis-search-logo {
    flex: 0 0 auto;
    /*width: var(--fis-logo-size);*/
    height: var(--fis-logo-size);
    object-fit: contain;
    display: block;
  }
 
  .fis-search-wrap *,
  .fis-search-wrap *::before,
  .fis-search-wrap *::after {
    box-sizing: border-box;
  }
 
  .fis-search-wrap .fis-search-form {
    width: 100%;
    margin: 0;
    padding: 0;
  }
 
  .fis-search-wrap .fis-input-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
 
  /* 검색 인풋: 사이트 기본 input 스타일 상속을 막기 위해 리셋 후 재정의 */
  .fis-search-wrap .fis-search-input {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 48px 0 20px; /* 우측에 돋보기 버튼 공간 확보 */
    background: #F5F5F5;
    border: 1.5px solid var(--fis-border);
    border-radius: var(--fis-radius);
    color: var(--fis-text);
    font-size: 15px;
    line-height: 1;
    box-shadow: var(--fis-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
 
  .fis-search-wrap .fis-search-input::placeholder {
    color: var(--fis-placeholder);
  }
 
  .fis-search-wrap .fis-search-input:hover {
    border-color: #c7cbdc;
  }
 
  .fis-search-wrap .fis-search-input:focus {
    border-color: var(--fis-accent);
    box-shadow: var(--fis-shadow-focus);
  }
 
  /* 검색 버튼(돋보기): 인풋 내부 우측에 절대 위치 */
  .fis-search-wrap .fis-search-btn {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fis-accent);
    color: #ffffff !important;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
  }
 
  .fis-search-wrap .fis-search-btn:hover {
    color: var(--fis-bg);
    background: var(--fis-accent-pink) !important;
  }
 
  .fis-search-wrap .fis-search-btn:active {
    transform: translateY(-50%) scale(0.94);
  }
 
  .fis-search-wrap .fis-search-btn:focus-visible {
    outline: 2px solid var(--fis-accent);
    outline-offset: 2px;
  }
 
  .fis-search-wrap .fis-search-icon {
    display: block;
    pointer-events: none;
  }
 
  /* 모바일: 로고 아래로 검색폼이 줄바꿈되어 세로로 쌓이도록 변경 */
  @media (max-width: 420px) {
    .fis-search-wrap {
      flex-direction: column;
      align-items: flex-start;
      max-width: 100%;
      --fis-logo-size: 32px;
      --fis-logo-gap: 8px;
    }
    .fis-search-wrap .fis-search-form {
      width: 100%;
    }
    .fis-search-wrap .fis-search-input {
      height: 44px;
      font-size: 14px;
    }
    .fis-search-wrap .fis-search-btn {
      width: 32px;
      height: 32px;
    }
  }

/* 네비게이션 */
.faq-navigation {
	display: flex;
	gap: 10px;
	margin: 30px 0;
}

.faq-nav-box {
	display: block;
	flex: 1;
	min-width: 0;
	padding: 15px 18px;
	background-color: #F7F7F7;
	border: 1px solid #ddd;
	text-decoration: none;
	box-sizing: border-box;
}

.faq-nav-box strong {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
}

.faq-nav-box span {
	display: block;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #303030;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.faq-nav-box:hover {
	border-color: #aaa;
}

.faq-nav-box:hover span {
	color: #555;
}


/* 모바일 */
@media screen and (max-width: 767px) {

	.faq-navigation {
		flex-direction: column;
		gap: 10px;
	}

	.faq-nav-box {
		width: 100%;
	}

}

/* 본문 베너 코드 */
.view-banners {
	display: flex;
	gap: 15px;
	margin: 30px 0;
}

.view-banner {
	flex: 1;
	min-width: 0;
	display: block;
}

.view-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* 모바일 */
@media screen and (max-width: 767px) {

	.view-banners {
		flex-direction: column;
		gap: 10px;
	}

}

	blockquote p {
		    font-weight: 400;
		    letter-spacing: 0.075em;
		    word-spacing: 0.1em;
		    margin: 0 0 0.3em 0;
	}

/* 카드형 박스 H3 속성 */
	#main > .inner > .posts > article h3,
	#main > .inner > .posts > article h3 a {
		    color: inherit;
		    font-size: 1.35rem;
		    letter-spacing: 0.15em;
		    text-decoration: none;
	}

/* 검색 */
	.wh-search {
		max-width: 720px;
		margin: 4rem auto 12px;
		overflow-x: visible; /* 전역 form { overflow-x:hidden } 무력화 */
	}
	.wh-search .wh-search__box {
		display: flex;
		align-items: stretch;
		background: #ffffff;
		border: 1px solid #e2e5ea;
		border-radius: 999px;
		box-shadow: 0 4px 16px rgba(20, 30, 60, 0.06);
		transition: box-shadow .2s ease, border-color .2s ease;
		overflow: hidden;
		box-sizing: border-box;
	}
	.wh-search .wh-search__box:focus-within {
		border-color: #F56A6A;
		box-shadow: 0 6px 20px rgba(106, 223, 224, 0.18);
	}

	/* ── 셀렉트 박스 ── */
	.wh-search .wh-search__select-wrap {
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 20px;
		flex-shrink: 0;
	}
	.wh-search .wh-search__select-wrap::after {
		content: "";
		position: absolute;
		right: 12px;
		top: 50%;
		width: 8px;
		height: 8px;
		border-right: 2px solid #8a92a3;
		border-bottom: 2px solid #8a92a3;
		transform: translateY(-65%) rotate(45deg);
		pointer-events: none;
	}
	.wh-search select.wh-search__select {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: none;              /* 전역 select 화살표 svg 제거 */
		background-image: none;
		background-color: transparent;
		border: none;
		border-bottom: none;           /* 전역 밑줄 제거 */
		border-radius: 0;
		box-shadow: none;
		font-size: 14px;
		font-weight: 600;
		color: #2b2f3a;
		padding: 0 26px 0 4px;
		height: 52px;
		line-height: 52px;
		cursor: pointer;
		outline: none;
		font-family: inherit;
		width: auto;
		box-sizing: border-box;
	}
	.wh-search select.wh-search__select:focus {
		border-bottom: none;
		box-shadow: none;
	}
	.wh-search select.wh-search__select::-ms-expand {
		display: none;
	}

	.wh-search .wh-search__divider {
		width: 1px;
		margin: 12px 4px;
		background: #e5e7ec;
		flex-shrink: 0;
	}

	/* ── 검색 인풋 ── */
	.wh-search input[type="text"].wh-search__input {
		flex: 1;
		border: none;
		border-bottom: none;           /* 전역 밑줄 제거 */
		box-shadow: none;
		outline: none;
		font-size: 15px;
		padding: 0 8px;
		background: transparent;
		color: #1c1f27;
		font-family: inherit;
		height: 52px;
		width: 100%;
		box-sizing: border-box;
	}
	.wh-search input[type="text"].wh-search__input:focus {
		border-bottom: none;
		box-shadow: none;
	}
	.wh-search input[type="text"].wh-search__input::placeholder {
		color: #a4aab6;
	}

	/* ── 검색 버튼 ── */
	.wh-search .wh-search__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0em;
		width: 52px;
		height: 52px;
		flex-shrink: 0;
		border: none;
		color: #84DCF2;
		cursor: pointer;
		box-shadow: inset 0 0 0 0 #fff;
		transition: background .15s ease, transform .1s ease;
	}
	.wh-search .wh-search__btn:hover {
		background: transparent;
	}
	.wh-search .wh-search__btn:active {
		transform: scale(0.94);
	}

	.wh-search__notice {
		max-width: 720px;
		margin: 14px auto 0;
		font-size: 14px;
		line-height: 1.7;
		color: #9aa0ac;
		text-align: center;
	}

	@media (max-width: 560px) {
		.wh-search select.wh-search__select { font-size: 13px; }
		.wh-search .wh-search__select-wrap { padding-left: 14px; }
		.wh-search input[type="text"].wh-search__input { font-size: 14px; }
	}

/* FAQ 코드 */
/* FAQ Accordion 스타일 */
.faq-list {
    margin: 30px 0;
}

.faq-item {
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.faq-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: background 0.2s;
    position: relative;
}

.faq-header:hover {
    background: #f8f9fa;
}

.faq-header.faq-active {
    background: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
}

.faq-q-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #F56A6A;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
}

.faq-header.faq-active .faq-q-icon {
    color: #F56A6A;
    background: #585858;
}

.faq-q-icon::after {
    content: 'Q';
}

.faq-header.faq-active .faq-q-icon::after {
    content: 'A';
}

.faq-toggle-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    transition: transform 0.4s ease;
}

.faq-header.faq-active .faq-toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}

.faq-content-area {
    flex: 1;
    min-width: 0;
}

.faq-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 10px;
    line-height: 1.5;
    padding-right: 30px;
}

.faq-meta {
    font-size: 13px;
    color: #868e96;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* 부드러운 아코디언 애니메이션 */
.faq-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.faq-body.faq-active {
    max-height: 2000px; /* 충분히 큰 값 */
    opacity: 1;
}

.faq-answer {
    padding: 25px;
    background: #f8f9fa;
    /*border-top: 1px solid #e1e4e8;*/
}

.faq-answer-label {
    font-weight: bold;
    color: #f56a6a;
    margin-bottom: 15px;
    font-size: 15px;
}

.faq-answer-content {
    line-height: 1.8;
    color: #495057;
}

.faq-answer-content img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
}

.faq-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: 500;
}

.badge-notice {
    background: #D3E4F8;
    color: white;
}

.badge-new {
    background: #F6B7B7;
    color: white;
}

.badge-category {
    background: #868e96;
    color: white;
}

/* 검색 폼 */
.search-box {
    margin: 25px 0;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 6px;
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-form select {
    flex: 0 0 150px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-form input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 상단 정보 */
.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #333;
}

.board-info {
    font-size: 14px;
    color: #666;
}

.board-info strong {
    color: #333;
    font-weight: bold;
}

.board-buttons {
    display: flex;
    gap: 8px;
}

/* 전체선택 */
.select-all-wrap {
    margin-bottom: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

.select-all-wrap label {
    cursor: pointer;
    user-select: none;
    margin-right: 15px;
    font-weight: 500;
}

/* 체크박스 */
.faq-checkbox {
    flex-shrink: 0;
    margin-right: 10px;
}

.faq-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 빈 목록 */
.empty-list {
    text-align: center;
    padding: 80px 20px;
    color: #868e96;
}

/* 페이지네이션 */
.pagination-wrap {
    text-align: center;
    margin: 40px 0;
}

/* 반응형 */
@media (max-width: 768px) {
    .faq-header {
        padding: 15px;
    }
    
    .faq-title {
        font-size: 14px;
    }
    
    .faq-meta {
        font-size: 12px;
        gap: 8px;
    }
    
    .search-form {
        flex-direction: column;
    }
    
    .search-form select,
    .search-form input[type="text"] {
        width: 100%;
    }
    
    .search-form select {
        flex: 0 0 50px;
    }

    .board-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* 쿠폰 */
.coupon-code {
    display: inline-block;
    cursor: default;
}
.coupon-code.is-active {
    cursor: pointer;
    text-decoration: underline dotted;
}
.round_boxs {
    background-color: #FCFCFC;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.8rem;
}

/* 랭크 · 순위 · 리뷰 */
.results-list {
    max-width: 100%; /* 카드 폭과 맞추고 싶을 때 */
    margin: 0 auto;    /* 가운데 정렬하고 싶을 때 */
}

.search-result-card {
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FEFEFE;
    border-radius: 0.375em;
    border: solid 1px rgba(210, 215, 217, 0.75);
    padding: 1.5em;
    margin-bottom: 3rem;
}
/* 모바일 */
@media screen and (max-width: 736px) {

    .search-result-card {
        max-width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 0 0 16px 0;
        margin-bottom: 16px;
        border-bottom: 1px solid #ebebeb;
    }

    .search-result-card:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .search-result-card:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
    }

}

/* 기존 파비콘/타이틀/URL 영역 */
.search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 0;
}

.favicon-wrapper {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dadce0;
    background: #f1f3f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.favicon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.result-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow: hidden;
}

.result-title {
    margin: 0;
    font-size: 0.8em;
    font-weight: 600;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-url {
    margin: 0;
    font-size: 11px;
    color: #303030;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 메인 제목 (파란색 링크 타이틀) */
.main-title {
    display: block;
    margin: 6px 0 4px;
    padding: 0 12px;
    font-family: "Taviraj", serif !important;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    color: #1a0dab;
    text-decoration: none;
}

.main-title:hover {
    text-decoration: underline;
}

/* 설명 텍스트 */
.description {
    margin: 0 0 6px;
    padding: 0 12px;
    width: 100%;         /* 원하는 고정 폭 */
    max-width: 100%;        /* 부모 대비 비율로 조절 */
    box-sizing: border-box; /* padding 포함해서 계산되도록 */
    font-size: 14px;
    line-height: 1.58;
    color: #4d5156;
/*
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
*/
}
.description .learn-more {
    color: #1a0dab;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.description .learn-more:hover {
    text-decoration: underline;
}
.description .learn-more:visited {
    color: #609;
}

/* 누락된 검색어 */
.missing-terms {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 14px;
    color: #4d5156;
}

.missing-terms strong {
    font-weight: 700;
    color: #4d5156;
}

/* 순위 목록 대표 이미지 관련 */
/* 카드 내 썸네일 + 텍스트 영역을 감싸는 flex 컨테이너 */
.search-result-card .content-row {
    display: flex;
    align-items: flex-start;
    gap: 0.1em;
}

/* 썸네일 이미지 크기 제한 */
.search-result-card .image.left {
    display: block;
    flex-shrink: 0;
    width: 15%;
    height: 120px;
    padding: 0 0em 1em 0;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
}

.search-result-card .image.left img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 박스에 꽉 채움 */
    display: block;
}


@media screen and (max-width: 736px) {
    .search-result-card .image.left img {
        border: 1px solid #ddd;
    }
}

/* 오른쪽 텍스트 영역 */
.search-result-card .text-content {
    flex: 1;
    min-width: 0; /* flex 안에서 텍스트 overflow 방지 */
}

@media screen and (max-width: 736px) {
    .search-result-card .content-row {
        flex-direction: column;
    }
    .search-result-card .image.left {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* 비율 유지, 필요 없으면 제거 */
    }
}







/* 메인페이지의 h4 구조화 컨테이너 전체 레이아웃 */
.meta-spec-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #f9f9f9; /* 기존 blockquote 느낌의 연한 배경 */
    padding: 12px 20px;
    border-left: 4px solid #757575; /* 인용구 느낌의 왼쪽 포인트 선 */
    margin-bottom: 20px;
    border-radius: 0;
}

/* 개별 목차+데이터 묶음 */
.spec-group {
    display: flex;
    align-items: center;
    font-size: 0.85rem; /* 기존 small 크기 유지 */
}

/* h4 목차 글씨 스타일 (구글 검색 로봇만 조용히 수집해 가도록 스타일링) */
.spec-group h4 {
    font-size: 0.85rem;
    font-weight: bold;
    margin: 0 6px 0 0; /* 우측에 약간의 여백 */
    color: #555555;
    display: inline-block;
}

/* 세부 데이터 글씨 */
.spec-group span {
    color: #666666;
}

/* 항목 사이에 세로 바(|) 넣어주기 */
.spec-group:not(:last-child)::after {
    content: "|";
    margin-left: 15px;
    color: #dddddd;
}