@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@font-face {
    font-family: 'ChosunGu';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Somi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_10@1.0/Somi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
	/*폰트*/
	--head-text: 'Abel', sans-serif; /*항목*/
	--title-text:'NanumSquareNeo-Variable'; /*시나리오명*/
	--basic-text: 'ChosunGu'; /*기본*/
	--phrase-text:'Chosunilbo_myungjo'; 
	--ruby-text:'Somi'; /*루비문자*/
	
	/*레이아웃*/
	--phrase-color: #5252526d;
	--line-color: #333333; /*영수증 선*/
	--text-color: #333333; /*기본 텍스트*/
	--link-color: #333333; /*링크, 수정,삭제 버튼*/
	--back-color: #ffffff; /*배경색*/
	--ruby-color: rgba(0, 0, 0, 0.233); /*코드네임*/
	--truby-color: rgba(0, 17, 255, 0.67); /*캠페인 명*/


	/*입력폼*/
	--plho-text: 'Pretendard-Regular'; /*입력폼 설명*/
	--plho-color: #adadad; /*입력폼 설명 폰트색*/
	--spo-color: #333333; /*스포방지 체크박스 폰트색*/	
	--border-color: #C6BCC1; /*입력폼 선 색*/

	--title-shadow: rgba(0, 0, 0, 0.222); /*시나리오명 폰트 그림자*/
	--receipt-shadow: #cfcfcf99; /*영수증 그림자*/
}

/** Notice Box **/
.board-notice	{ max-width: 430px; padding: 20px; margin: 20px auto 30px; text-align: center;} 

#page_board_content input, #page_board_content select, #page_board_content .ui-btn, #page_board_content .ui-btn.point,#page_board_content .pg_wrap .pg_page {height:24px;line-height:22px;}
#page_board_content .pg_wrap .pg_page {border: 0 none; background:none; color:inherit;padding:0 2px; font-size:12px;}
#page_board_content .pg_wrap .pg_page:before {font-size:12px;}

.ui-text-area{ position:relative; padding-right:60px; box-sizing:border-box;}
.ui-text-area button {position:absolute;right:0;top:0;width:60px;}


.ui-top {position:relative;padding:0 5px; box-sizing:border-box;}

.ui-memo-list					{ position: relative; clear: both;  } 


/* 레이아웃 */
.ui-memo-list{
	width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width:750px){
	.ui-memo-list{
		width: 70% ; /*영수증 가로 길이*/
		margin-left: auto;
		margin-right: auto;
	}
} 

table { border-spacing:0px; background: rgb(255, 255, 255) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;}

.tbl_wrap table	{ width: 100%; position:relative; line-height:20px; 
	border-bottom: 1px dashed var(--line-color);}

.tbl_head01 thead th	{
	font-weight: bold;
	padding: 7px 3px;
	border-top: 1px solid var(--line-color);
	border-bottom: 1px dashed var(--line-color);
	border-left-width: 0;
	border-right-width: 0;
	font-size: 14px;
	color: var(--text-color);
	font-family: var(--head-text);
	text-align: center;
}

.tbl_head01  tbody td	{
	color: var(--text-color);
	font-weight: normal;
	padding: 5px 3px;
	font-family: var(--basic-text); font-size: 12px; 
	text-align:center;
}

.stitle		{ font-family: var(--title-text); font-weight: normal; text-align: left !important; } 
.sname		{ text-align: center !important; } 
.sline		{ white-space: pre-line;} 
a:link {color: var(--text-color) !important;} 
a:visited {color: var(--link-color) !important;}  

.dx3logo{
	display:block;
	width:100%;
	margin:auto;
	padding-bottom:20px;
	background: var(--back-color) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;
	text-align:center;
}
.dx3phrase{
	display:block;
	width:100%;
	margin:auto;
	padding-bottom:20px;
	background: var(--back-color) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;
	font-family: var(--phrase-text);
	font-style: italic;
	text-align:center;
	color: var(--phrase-color);
	font-size:12px;
	font-weight:bold;
}


.dx3bottom{
	display:block;
	width:100%;
	padding-bottom:30px;
	padding-top:20px;
	background: var(--back-color) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;
	font-family: var(--basic-text);
	text-align:center;
	color: var(--text-color);
	font-size:12px;
	font-weight:normal;
	margin:auto;
	line-height:180%;
	-webkit-mask-image: linear-gradient(0deg, transparent 10px, white 10px), linear-gradient(-135deg, white 5px, transparent 5px), linear-gradient(135deg, white 5px, transparent 5px);
    -webkit-mask-position: left bottom;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: 100% 100%, 10px 10px, 10px 10px;
}


.receipt{
	filter: drop-shadow(2px 3px 10px var(--receipt-shadow));
} 


/*루비문자*/
.codename {
	display: inline-block;
	position:relative;
	color: var(--text-color);
	line-height: 1.3em;
	margin-top: 0.2em;
	letter-spacing:-1px;
	margin-bottom: 0.2em;
	width:100%;
	text-align: center;
   }
  
   .codename:after {
	content:attr(data-text);
	font-size: 15px;
	color: var(--ruby-color);
	position:absolute;
	left:0;
	right: 0;
	white-space: nowrap;
	margin-top: -9px !important;
	font-family:var(--ruby-text);
   }
 
 .title {
	display: inline-block;
	position:relative;
	color: var(--text-color);
	line-height: 1.3em;
	margin-top: 0.2em;
	letter-spacing:-1px;
	margin-bottom: 0.2em;
	filter: drop-shadow(0px 0px 3px var(--title-shadow));
   }
   .title:after {
	content:attr(data-text);
	font-size: 15px;
	color: var( --truby-color);
	position:absolute;
	left:0;
	width: max-content;
	top: -11px;
	font-family:var(--ruby-text);
	font-weight:normal !important; 
   }


/*입력창 레이아웃*/
#page_board_content input { margin: 1px 0; }
textarea {
    box-sizing: border-box;
    border-width: 1px;
    border-style: groove;
    border-radius: 5px;
    padding: 0 10px;
    max-width: 100%;
    min-height: 15px !important;
    font-size: 12px;
	color:var(--text-color) !important;
	font-family: var(--basic-text);
	background-color: var(--back-color) !important;
	border-color: var(--border-color) ;
}
.form-input, input[type="text"], input[type="password"], input[type="file"], select {
    box-sizing: border-box;
    border-width: 1px;
    border-style: groove;
    border-radius: 5px;
    padding: 0 10px;
    max-width: 100%;
    font-size: 12px !important;
	color:var(--text-color) !important;
    font-family: var(--basic-text) !important;
	background-color: var(--back-color) !important;
	border-color: var(--border-color) ;
}
input[type="date"] {
	box-sizing: border-box;
	color: var(--plho-color) !important;
	font-family: var(--plho-text);
	border-width: 1px;
	border-style: groove;
	border-radius: 5px;
	max-width: 100%;
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
	border-color: var(--border-color) ;
	height: 24px;
    line-height: 22px;
  }
  input[type="number"]  {
	box-sizing: border-box;
	color: var(--plho-color) !important;
	font-family: var(--plho-text);
	border-width: 1px;
	border-style: groove;
	border-radius: 5px;
	max-width: 100%;
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
	border-color: var(--border-color) ;
	height: 24px;
	width: 70px ;
    line-height: 22px;
  }
input::placeholder  {
	color: var(--plho-color);
	font-family: var(--plho-text);
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
	line-height: 22px;
  }
textarea::placeholder {
	color: var(--plho-color);
	font-family: var(--plho-text);
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
  }
label {    font-size: 11px !important;
	color:var(--spo-color) !important;
    font-family: var(--basic-text) !important;
	margin-left: 3px;}


/*영수증 하단 합계와 카운트*/

.tbl_wrap2 table	{ width: 55%; position:relative; line-height:20px; border-bottom: 1px dashed var(--line-color); margin-bottom: 20px;}

.tbl_head02 thead th	{
	font-weight: normal;
	padding: 5px 1px;
	border-top: 1px dashed var(--line-color);
	border-bottom: 1px dashed var(--line-color);
	border-left-width: 0;
	border-right-width: 0;
	font-size: 12px;
	font-family: var(--head-text);
	text-align: center;
}
.tbl_head02  tbody td	{
	color: var(--text-color);
	font-weight: normal;
	padding: 5px 1px;
	font-family: var(--head-text); font-size: 12px; 
	text-align:center;
}
.bt_tb {font-weight: bold;}


/* ── 관리자 꾸미기 버튼 ── */
.adm-box { margin-bottom: 5px; text-align: right; margin-right: 5px; }
.adm-box .adm-btn {
    display: inline-block !important;
    width: auto !important; height: 24px !important; line-height: 22px !important;
    padding: 0 12px !important; font-size: 12px !important;
    font-family: var(--head-text) !important;
    background: #58b8c8 !important; border: none !important;
    color: #fff !important; border-radius: 12px !important;
    text-decoration: none !important; cursor: pointer; transition: background 0.15s;
}
.adm-box .adm-btn:hover,
.adm-box .adm-btn:visited { background: #46a6b6 !important; color: #fff !important; }

/* ── 기록하기 버튼 ── */
.ui-write-box .write_open,
a.write_open {
    display: inline-block !important; position: static !important;
    width: auto !important; height: auto !important;
    padding: 4px 14px !important; line-height: 1.5 !important;
    font-size: 12px !important; font-family: var(--head-text) !important;
    background: #58b8c8 !important; border: none !important;
    color: #fff !important; border-radius: 14px !important;
    text-decoration: none !important; cursor: pointer; margin-bottom: 4px;
}
.ui-write-box .write_open:hover { background: #46a6b6 !important; color: #fff !important; }

/* ── 기록 폼 패널 ── */
.write-form-panel {
    display: none;
    background: #ffffff; border: 1px solid var(--border-color);
    border-radius: 6px; padding: 14px 16px 10px; margin-top: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.write-form-panel.open { display: block; }
.ui-write-box.update .write-form-panel { display: flex; flex-wrap: wrap; }
.wf-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.wf-row:last-child { margin-bottom: 0; }
.wf-radio-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wf-radio-group label {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 12px !important; font-family: var(--basic-text) !important;
    color: var(--text-color) !important; white-space: nowrap; cursor: pointer; margin-left: 0 !important;
}
.wf-radio-group input[type="radio"] {
    width: auto !important; height: auto !important; margin: 0 !important;
    padding: 0 !important; border: none !important; background: none !important;
    -webkit-appearance: radio !important; appearance: radio !important;
}
.wf-submit {
    padding: 4px 20px !important; height: 28px !important;
    background: #333 !important; color: #fff !important;
    border: none !important; border-radius: 4px !important;
    font-family: var(--head-text) !important; font-size: 13px !important;
    cursor: pointer;
}
.wf-submit:hover { background: #555 !important; }

/* ── 영수증 찢긴 테두리 ── */
.receipt-tear { display: block; width: 100%; height: 14px; margin: 0; padding: 0; }
.receipt-body { background: var(--back-color) url("./img/paper.png") repeat; margin: 0; padding: 0; }


/* ── 룰 필터 ── */
.rule-filter {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    padding: 5px 10px;
    background: var(--back-color) url("./img/paper.png") repeat;
    border-bottom: 1px dashed var(--line-color);
}
.rule-btn {
    font-family: var(--head-text); font-size: 11px; padding: 1px 7px;
    border: 1px dashed var(--line-color); border-radius: 2px;
    color: var(--text-color) !important; text-decoration: none; opacity: 0.5; transition: opacity 0.15s;
}
.rule-btn:hover  { opacity: 0.85 !important; }
.rule-btn.active { opacity: 1; border-style: solid; font-weight: bold; }

/* ── 수정/삭제 * - 버튼 흰 테두리 ── */
td.control {
    font-size: 13px !important; letter-spacing: 3px !important; opacity: 0.85 !important;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 4px #fff !important;
}

/* ── 관리자 모달 ── */
.radm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.radm-box {
    background: #fff url("./img/paper.png") repeat;
    border: 1px solid var(--line-color); padding: 22px 26px 18px;
    min-width: 280px; max-width: 90vw; font-family: var(--basic-text);
}
.radm-title {
    font-family: var(--head-text); font-size: 16px; letter-spacing: 1px;
    border-bottom: 1px dashed var(--line-color); padding-bottom: 8px;
    margin-bottom: 12px; color: var(--text-color);
}
.radm-label { display: block; font-size: 11px; color: var(--plho-color); font-family: var(--plho-text); margin-bottom: 3px; margin-top: 10px; }
.radm-input {
    width: 100%; box-sizing: border-box; border: 1px groove var(--border-color);
    border-radius: 5px; padding: 4px 8px; font-size: 12px;
    font-family: var(--basic-text) !important; color: var(--text-color) !important;
    background: var(--back-color) !important;
}
.radm-toggle { display: flex; gap: 16px; margin-top: 4px; }
.radm-toggle label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px !important; font-family: var(--basic-text) !important;
    color: var(--text-color) !important; cursor: pointer; margin-left: 0 !important;
}
.radm-toggle input[type="radio"] {
    width: auto !important; height: auto !important; margin: 0 !important;
    padding: 0 !important; border: none !important; background: none !important;
    -webkit-appearance: radio !important; appearance: radio !important;
}
.radm-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.radm-btn-save { font-family: var(--head-text); font-size: 12px; padding: 3px 14px; border: 1px solid var(--line-color); background: var(--back-color); cursor: pointer; border-radius: 2px; }
.radm-btn-cancel { font-family: var(--head-text); font-size: 12px; padding: 3px 14px; border: 1px dashed var(--line-color); background: none; cursor: pointer; border-radius: 2px; opacity: 0.6; }
.radm-link-admin { margin-left: auto; font-size: 11px; font-family: var(--head-text); color: var(--text-color) !important; opacity: 0.5; text-decoration: none; }
.radm-link-admin:hover { opacity: 1 !important; }
#radm-msg { margin: 6px 0 0; font-size: 11px; color: #888; text-align: center; font-family: var(--plho-text); min-height: 16px; }

/* ── 너비: bo_table_width 인라인 스타일로 제어, 여기선 기본값만 ── */
.ui-memo-list { max-width: 100%; }

/* ── td overflow: 루비 텍스트가 행 밖으로 보이게 ── */
.tbl_head01 tbody td { overflow: visible !important; }

/* ── 링크 파란색 제거 (테이블 안) ── */
#page_board_content .tbl_head01 tbody td a,
#page_board_content .tbl_head01 tbody td a:link,
#page_board_content .tbl_head01 tbody td a:visited,
#page_board_content .tbl_head01 tbody td a:hover {
    color: var(--text-color) !important; text-decoration: none !important;
}
/* 기록하기/꾸미기 버튼 흰색 유지 */
.adm-box .adm-btn, .adm-box .adm-btn:link, .adm-box .adm-btn:visited, .adm-box .adm-btn:hover,
.ui-write-box a.write_open, .ui-write-box a.write_open:link, .ui-write-box a.write_open:visited, .ui-write-box a.write_open:hover { color: #fff !important; }

/* ── 테이블 행 배경 RA0 테마 줄무늬 제거 ── */
#page_board_content .tbl_head01 tbody tr,
#page_board_content .tbl_head01 tbody tr:nth-child(even),
#page_board_content .tbl_head01 tbody tr:nth-child(odd) { background: transparent !important; }
#page_board_content .tbl_head01 tbody tr:hover td { background: rgba(0,0,0,0.025) !important; }
#page_board_content .tbl_head01 tbody td { background: transparent !important; border: none !important; }

/* ── 스포일러 ── */
.spoiler     { filter: blur(4px); transition: filter .2s; }
.spoiler-off { filter: blur(0px) !important; }

/* ── 행 패딩 축소 (행 높이 줄이기) ── */
#page_board_content .tbl_head01 tbody td {
    padding: 3px 3px !important;
}

/* ── RA0 파란 배경 강력 제거 ── */
#page_board_content .txt-point,
#page_board_content td.txt-point,
#page_board_content li td.txt-point,
#page_board_content table td.txt-point,
#page_board_content .tbl_head01 td,
#page_board_content .tbl_head01 tr,
#page_board_content .tbl_head01 tr.line,
#page_board_content .tbl_head01 tr.line td {
    background: transparent !important;
    background-color: transparent !important;
}
#page_board_content .tbl_head01 tr.line:hover td,
#page_board_content .tbl_head01 tr:hover td {
    background-color: rgba(0,0,0,0.025) !important;
}

/* ── default.css의 .tbl_wrap table 덮어쓰기 (파란 배경 + overflow:hidden 제거) ── */
.tbl_head01.tbl_wrap table,
.tbl_wrap.tbl_head01 table {
    background: rgb(255, 255, 255) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
.tbl_head01.tbl_wrap tbody tr,
.tbl_head01.tbl_wrap tbody td {
    background: transparent !important;
    background-color: transparent !important;
}

/* ── 헤더 구분선 전체 열에 일정하게 ── */
.tbl_head01 thead tr {
    border-bottom: 1px dashed var(--line-color) !important;
}
.tbl_head01 thead th {
    border-bottom: none !important;
}

/* ── 글쓰기 폼 패널: 가로 컴팩트 ── */
.write-form-panel.open {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 4px;
}

/* ── 본문 이미지: 원본 크기 유지, 비율 보존, 컨테이너 넘으면 축소 ── */
.tbl_head01 tbody td img,
.receipt-body img:not(.dx3logo img):not([src*="barcode"]):not([src*="logo"]) {
    max-width: 100%;
    height: auto;
    width: auto;       /* 원본보다 강제로 키우지 않음 */
    object-fit: contain;
}

/* ── 로고 이미지: 원본 크기 유지, 넘치면 축소, 강제 확대 없음 ── */
.dx3logo .receipt-logo {
    max-width: 100%;
    width: auto;
    height: auto;
}

/* ── 연도 드롭다운 ── */
.year-nav {
    display: flex;
    justify-content: center;
    padding: 10px 0 6px;
}
.year-dropdown-wrap {
    position: relative;
    display: inline-block;
}
.year-label {
    font-family: var(--head-text);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--year-color, #ffffff);
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    cursor: pointer;
    padding: 2px 10px;
    border-bottom: 1px dashed var(--year-color, #ffffff);
    transition: opacity 0.15s;
    user-select: none;
}
.year-label:hover { opacity: 0.8; }

.year-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    background: var(--back-color) url("./img/paper.png") repeat;
    border: 1px solid var(--line-color);
    z-index: 999;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.year-dropdown.open { display: block; }

.year-option {
    display: block;
    padding: 5px 16px;
    font-family: var(--head-text);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text-color) !important;
    text-decoration: none;
    border-bottom: 1px dashed var(--line-color);
    transition: background 0.1s;
}
.year-option:last-child { border-bottom: none; }
.year-option:hover { background: rgba(0,0,0,0.04); }
.year-option.current {
    font-weight: bold;
    background: rgba(0,0,0,0.03);
}

/* ── 기본 flex 순서 / 수정 모드 폼 ── */
.ui-memo-list {
    display: flex;
    flex-direction: column;
}

/* 기본 순서 */
.btn-area  { order: 1; }
.year-nav  { order: 2; }
.receipt   { order: 3; }


/* ── 수정 모드 폼: 너비 제한 ── */
.ui-write-box.update {
    max-width: 700px;
    margin: 20px auto;
}
.ui-write-box.update .write-form-panel {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

/* ── SVG 찢긴 테두리: --back-color 변수와 연동 ── */
.receipt-tear path {
    fill: var(--back-color, #ffffff);
}

/* ── 검색 영역 ── */
.search-area {
    padding: 6px 0;
    text-align: center;
}
.search-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.search-select {
    height: 26px !important;
    font-size: 11px !important;
    font-family: var(--basic-text) !important;
    padding: 0 4px !important;
    border: 1px groove var(--border-color) !important;
    border-radius: 4px !important;
    background: var(--back-color) !important;
    color: var(--text-color) !important;
    width: auto !important;
}
.search-input {
    height: 26px !important;
    width: 140px !important;
    font-size: 11px !important;
    font-family: var(--basic-text) !important;
    padding: 0 8px !important;
    border: 1px groove var(--border-color) !important;
    border-radius: 4px !important;
}
.search-btn {
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    font-family: var(--head-text);
    background: var(--text-color);
    color: var(--back-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.search-btn:hover { opacity: 0.75; }

/* 검색 결과 집계 */
.search-total {
    font-family: var(--head-text);
    font-size: 13px;
    color: var(--text-color);
    padding: 10px 0 20px;
    text-align: center;
    letter-spacing: 0.5px;
}
.search-total strong {
    font-size: 15px;
}

/* ── 검색 해제 버튼 & 검색 중 표시 ── */
.search-clear {
    display: inline-block;
    font-size: 11px !important;
    font-family: var(--head-text) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 2px 10px;
    background: #888888;
    border: none;
    border-radius: 4px;
    transition: background 0.15s;
    white-space: nowrap;
    cursor: pointer;
}
.search-clear:hover { background: #666 !important; color: #fff !important; }

.search-info {
    font-family: var(--phrase-text);
    font-size: 11px;
    color: var(--phrase-color);
    text-align: center;
    margin: 2px 0 0;
    font-style: italic;
}

/* 반응형: 좁을 때 검색 폼도 btn-area 안에서 아래 행으로 */
.btn-area { flex-wrap: wrap; }
.search-area { width: 100%; text-align: center; }

@media (min-width: 501px) {
    .btn-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 4px;
    }
    .search-area {
        width: 100%;
        order: 10; /* 검색폼은 항상 한 줄 아래 */
    }
    .btn-area .adm-box { margin: 0 !important; }
    .btn-area .ui-top  { padding: 0; }
    .btn-area .ui-write-area { width: auto; margin: 0; }
}