@charset "utf-8";
/* ============================================================================
   FACT_NSEED front modern design system (2026)
   - Loaded AFTER default.css / bbs.css so it upgrades shared sub-page
     components without touching the (independent) main page.
   - Markup is untouched; everything here is a visual overlay keyed off the
     existing class names used across the 80+ front sub pages.
   ============================================================================ */

:root{
	--brand:#00a77b;          /* main hero green */
	--brand-strong:#13aa8a;
	--brand-dark:#0b7d5c;
	--brand-tint:#eafaf4;     /* soft green wash */
	--brand-tint-2:#f4fffb;
	--ink:#182230;
	--ink-soft:#3c4756;
	--muted:#6a7686;
	--line:#e6eaef;
	--line-soft:#eef2f6;
	--surface:#ffffff;
	--radius-lg:16px;
	--radius:12px;
	--radius-sm:8px;
	--pill:999px;
	--shadow-sm:0 1px 3px rgba(16,40,30,.06);
	--shadow:0 6px 18px rgba(16,40,30,.08);
	--shadow-lg:0 16px 40px rgba(16,40,30,.12);
	--ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- base rhythm ---------------------------------------------------- */
#content{ padding:28px 8px 60px 34px; color:var(--ink); }

/* ---------- header quick buttons (home / sitemap) --------------------------
   서브페이지 헤더의 홈·사이트맵 PNG 아이콘을 메인 페이지와 같은
   그린 아이콘으로 통일. 마크업은 그대로 두고 PNG 를 숨긴 뒤
   CSS(SVG data URI) 아이콘으로 교체한다.
   - 사이트맵: 메인 .hamburger 와 동일 규격 (32x28, 22x4 라운드 바 3개)
   - 색상: 기본 #51cdaa → hover #00a77b (메인과 동일) */
#header_pc .gnb menu li.mobile-hide a[href="/front/index.do"],
#header_pc .gnb menu li.mobile-hide a[href*="method=sitemap"]{
	display:inline-flex; align-items:center; justify-content:center;
	width:36px; height:32px; background-repeat:no-repeat; background-position:center;
}
#header_pc .gnb menu li.mobile-hide a[href="/front/index.do"] img,
#header_pc .gnb menu li.mobile-hide a[href*="method=sitemap"] img{ display:none; }

#header_pc .gnb menu li.mobile-hide a[href="/front/index.do"]{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2351cdaa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");
	background-size:26px 26px;
}
#header_pc .gnb menu li.mobile-hide a[href="/front/index.do"]:hover,
#header_pc .gnb menu li.mobile-hide a[href="/front/index.do"]:focus-visible{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2300a77b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");
}

#header_pc .gnb menu li.mobile-hide a[href*="method=sitemap"]{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28'%3E%3Crect x='5' y='0' width='22' height='4' rx='2' fill='%2351cdaa'/%3E%3Crect x='5' y='12' width='22' height='4' rx='2' fill='%2351cdaa'/%3E%3Crect x='5' y='24' width='22' height='4' rx='2' fill='%2351cdaa'/%3E%3C/svg%3E");
	background-size:32px 28px;
}
#header_pc .gnb menu li.mobile-hide a[href*="method=sitemap"]:hover,
#header_pc .gnb menu li.mobile-hide a[href*="method=sitemap"]:focus-visible{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28'%3E%3Crect x='5' y='0' width='22' height='4' rx='2' fill='%2300a77b'/%3E%3Crect x='5' y='12' width='22' height='4' rx='2' fill='%2300a77b'/%3E%3Crect x='5' y='24' width='22' height='4' rx='2' fill='%2300a77b'/%3E%3C/svg%3E");
}

/* ---------- breadcrumb ----------------------------------------------------- */
.path{
	display:inline-flex; align-items:center; gap:6px;
	margin-bottom:6px; padding:6px 14px 6px 12px;
	background:var(--brand-tint) !important; border-radius:var(--pill);
	font-size:12px !important; letter-spacing:-.01em !important;
	color:var(--brand-dark) !important; line-height:1.4;
}
.path strong{ color:var(--brand-dark) !important; font-weight:700; }

/* ---------- page title / sub title ---------------------------------------- */
.title{
	position:relative; margin:14px 0 10px !important; padding-left:16px;
	font-size:30px !important; font-weight:800 !important; letter-spacing:-.03em;
	color:var(--ink) !important; line-height:1.25;
}
.title:before{
	content:""; position:absolute; left:0; top:8px; bottom:8px; width:6px;
	border-radius:var(--pill); background:linear-gradient(180deg,var(--brand),var(--brand-strong));
}
.sub-title{
	font-size:15px !important; line-height:1.7 !important; color:var(--muted) !important;
	margin:0 0 30px !important;
}
.sub-title strong{ color:var(--ink-soft); }

/* ---------- left content menu (#nav_pc) ------------------------------------ */
#nav_pc{ border:0 !important; }
#nav_pc h1{
	margin-bottom:14px; padding:0 4px 14px; border-bottom:2px solid var(--line);
	font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
#nav_pc menu, #nav_pc ul{ display:flex; flex-direction:column; gap:4px; }
#nav_pc li{ list-style:none; }
#nav_pc li a{
	display:block; padding:12px 16px; border-radius:var(--radius);
	font-size:15.5px; color:var(--ink-soft); text-decoration:none;
	transition:background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
#nav_pc li a:hover{ background:var(--brand-tint); color:var(--brand-dark); transform:translateX(2px); }
#nav_pc li a.on, #nav_pc li a.active{
	background:linear-gradient(135deg,var(--brand),var(--brand-strong));
	color:#fff !important; font-weight:700; box-shadow:var(--shadow-sm);
}

/* left "종자개별신청" promo card */
.left_banner, .side_banner, #nav_pc + div, .apply_box{
	border-radius:var(--radius-lg) !important;
}

/* ---------- top nav (.lnb) active state ------------------------------------ */
.lnb menu li a.on, .lnb menu li a:hover{ color:var(--brand) !important; }
.lnb menu li a.on{ position:relative; }

/* ---------- board list table ---------------------------------------------- */
.board_list table, .board_view table{
	width:100%; border-collapse:separate; border-spacing:0;
	border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
	box-shadow:var(--shadow-sm); background:var(--surface);
}
.board_list table thead th{
	padding:15px 12px; background:var(--brand-tint) !important;
	border:0 !important; border-bottom:1px solid var(--line) !important;
	color:var(--brand-dark) !important; font-weight:700; font-size:14px; letter-spacing:-.01em;
}
.board_list table tbody td{
	padding:15px 12px; border:0 !important; border-bottom:1px solid var(--line-soft) !important;
	color:var(--ink-soft); font-size:14px; line-height:1.5;
}
.board_list table tbody tr:last-child td{ border-bottom:0 !important; }
.board_list table tbody tr{ transition:background-color .15s var(--ease); }
.board_list table tbody tr:hover{ background:var(--brand-tint-2); }
.board_list table tbody td a{ color:var(--ink); text-decoration:none; }
.board_list table tbody td a:hover{ color:var(--brand-dark); text-decoration:underline; }

/* "notice" / status chips inside board rows */
.board_list .notice, .board_list td .noti, .board_list td .best{
	display:inline-block; padding:3px 12px; border-radius:var(--pill);
	background:var(--brand); color:#fff !important; font-size:12px; font-weight:700; line-height:1.5;
}

/* total count line */
.board_list .total, #content .total{
	margin:0 0 14px !important; padding:0 2px !important; border:0 !important; background:none !important;
	text-align:left !important; color:var(--muted) !important; font-size:13px !important;
}
.board_list .total strong, #content .total strong{ color:var(--brand-dark); }

/* board detail view */
.board_view table thead th, .board_view table tbody th{
	background:var(--brand-tint) !important; color:var(--brand-dark) !important;
	border:0 !important; border-bottom:1px solid var(--line) !important; padding:14px 16px; font-weight:700;
}
.board_view table tbody td{ padding:14px 16px; border:0 !important; border-bottom:1px solid var(--line-soft) !important; }
.board_view .content{ line-height:1.75; color:var(--ink-soft); }

/* 레거시 잔재 정리:
   - 셀 왼쪽 세로줄(|)로 보이던 bg_head_line.gif 배경 제거 (bbs.css)
   - 첨부파일 행의 옛 초록(#71bf45) 밑줄을 공통 라인색으로 */
.board_list table th, .board_list table td,
.board_view table th, .board_view table td,
.board_form table td{ background-image:none !important; }
.board_view table td, .board_view table th{ border-bottom:1px solid var(--line-soft) !important; }
.board_view table tr:last-child td, .board_view table tr:last-child th{ border-bottom:0 !important; }

/* 행 세로 가운데 정렬 + 라벨/값 패딩 통일 (bbs.css 의 top 정렬을 덮는다) */
.board_view table th, .board_view table td{
	vertical-align:middle !important; padding:14px 16px !important;
}

/* 첨부파일: 기본 파란 링크 → 클립 아이콘이 달린 파일 칩 */
.board_view td.fileDownLoad{ color:var(--muted); }
.board_view td.fileDownLoad ul.file{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.board_view td.fileDownLoad ul.file li{ list-style:none; margin:0; padding:0; background:none; }
.board_view td.fileDownLoad a{
	display:inline-flex; align-items:center; gap:7px; max-width:100%;
	padding:7px 14px 7px 11px; border:1px solid var(--line); border-radius:var(--pill);
	background:var(--surface); color:var(--ink-soft) !important; font-size:13.5px;
	text-decoration:none !important; box-shadow:var(--shadow-sm);
	transition:all .15s var(--ease);
}
.board_view td.fileDownLoad a::before{
	content:""; flex:0 0 auto; width:15px; height:15px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2300a77b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") no-repeat center/contain;
}
.board_view td.fileDownLoad a:hover{
	border-color:var(--brand); color:var(--brand-dark) !important;
	background:var(--brand-tint); transform:translateY(-1px); box-shadow:var(--shadow);
}

/* 게시판 하단 목록 버튼: btn_list.jpg 이미지 대신 공통 pill 버튼 텍스트로 */
#content section.btn a[onclick*="onListPage"] img{ display:none; }
#content section.btn a[onclick*="onListPage"]::after{ content:"\BAA9\B85D\BCF4\AE30"; } /* "목록보기" - 문서 인코딩(euc-kr) 영향을 받지 않도록 유니코드 이스케이프 */
#content section.btn{ margin:16px 0; text-align:right; }

/* ---------- sitemap --------------------------------------------------------
   160px 고정 카드 + 무지개 컬러바 + dot GIF 를 브랜드 그린 카드 그리드로 통일 */
section.sitemap > menu{
	display:flex; flex-wrap:wrap; gap:22px; overflow:visible; margin-top:6px;
}
section.sitemap > menu > li{
	float:none; display:flex; flex-direction:column;
	width:calc((100% - 66px)/4); height:auto; min-height:225px;
	margin:0; background:var(--surface);
	border:1px solid var(--line); border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm); overflow:hidden;
	transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
section.sitemap > menu > li:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
section.sitemap > menu > li > a{
	display:block; width:auto; padding:14px 18px 12px; border-radius:0;
	border-top:4px solid var(--brand) !important;
	border-bottom:1px solid var(--line-soft);
	font-size:16px; font-weight:800; color:var(--ink); line-height:1.4;
}
section.sitemap menu li menu{ margin:10px 10px 16px; }
section.sitemap menu li menu li a{
	position:relative; display:block; width:auto; padding:7px 10px 7px 22px; margin:1px 0;
	background:none; border-top:0; border-bottom:0; border-radius:var(--radius-sm);
	font-size:13.5px; font-weight:500; color:var(--ink-soft); line-height:1.45;
	transition:background-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
section.sitemap menu li menu li a::before{
	content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
	width:5px; height:5px; border-radius:50%; background:var(--brand);
}
section.sitemap menu li menu li a:hover{
	background:var(--brand-tint); color:var(--brand-dark); transform:translateX(2px);
}
@media screen and (max-width:1200px){
	section.sitemap > menu > li{ width:calc((100% - 22px)/2); min-height:0; }
}
@media screen and (max-width:730px){
	section.sitemap > menu{ gap:14px; }
	section.sitemap > menu > li{ width:100%; }
}

/* ---------- 기관신청 및 수요조사 (supply-demand-init) ------------------------
   인라인 스타일(초록 2px 보더, 회색+opacity 0.6 패널, GIF 로그인 버튼)을
   공통 디자인으로 교체. 활성 패널 노랑 하이라이트(JS setTableColor)는
   :focus-within 그린 하이라이트로 대체한다. */
#content .supply-demand-init > ul > div{
	border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
	padding:26px !important; background:var(--surface); box-shadow:var(--shadow-sm);
}
.supply-demand-init td > b{ font-size:15px; color:var(--ink); letter-spacing:-.01em; }
.supply-demand-init table[id^="table_"]{
	opacity:1 !important; background:var(--brand-tint-2) !important;
	border:1px solid var(--line) !important; border-radius:var(--radius);
	border-collapse:separate; padding:14px 12px !important;
	transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.supply-demand-init table[id^="table_"]:focus-within{
	border-color:var(--brand) !important; background:#fff !important;
	box-shadow:0 0 0 3px rgba(0,167,123,.14);
}
.supply-demand-init table[id^="table_"] th{
	font-weight:600; color:var(--ink-soft); font-size:13.5px;
}
/* 로그인 GIF 를 그린 pill(SVG)로 교체 - img 의 onclick 이 그대로 살아 있다 */
.supply-demand-init img[src*="supply_demand_login"]{
	content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2300a77b'/%3E%3Cstop offset='1' stop-color='%2313aa8a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='40' rx='20' fill='url(%23g)'/%3E%3Ctext x='60' y='25' text-anchor='middle' font-family='Malgun Gothic, sans-serif' font-size='15' font-weight='700' fill='%23fff'%3E%EB%A1%9C%EA%B7%B8%EC%9D%B8%3C/text%3E%3C/svg%3E");
	transition:transform .15s var(--ease), filter .15s var(--ease);
}
.supply-demand-init img[src*="supply_demand_login"]:hover{
	transform:translateY(-2px);
	filter:brightness(1.05) drop-shadow(0 6px 12px rgba(0,167,123,.3));
}
/* 하단 안내 문구 카드 */
.supply-demand-init + div section.information{
	background:var(--brand-tint-2); border:1px solid var(--line);
	border-radius:var(--radius); padding:16px 20px; text-align:left;
	line-height:1.8; color:var(--ink-soft);
}

/* ---------- board view prev/next ------------------------------------------- */
.board_view section.list{
	margin-top:18px; background:var(--surface);
	border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.board_view section.list p{
	display:flex; align-items:center; gap:12px; margin:0; padding:12px 16px;
	border-bottom:1px solid var(--line-soft);
}
.board_view section.list p:last-child{ border-bottom:0; }
.board_view section.list p strong{
	flex:0 0 auto; color:var(--brand-dark); font-weight:700; font-size:13px;
}
.board_view section.list p strong span{ color:var(--brand); font-size:11px; }
.board_view section.list p a{
	min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	color:var(--ink-soft); font-size:14px; text-decoration:none;
}
.board_view section.list p a:hover{ color:var(--brand-dark); text-decoration:underline; }

/* ---------- inputs / selects ---------------------------------------------- */
#content input[type=text], #content input[type=password], #content input[type=file],
#content textarea, #content select{
	padding:9px 12px !important; border:1px solid var(--line) !important; border-radius:var(--radius-sm) !important;
	background:#fff; color:var(--ink) !important; font-size:14px; line-height:1.3;
	transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
#content input[type=text]:focus, #content input[type=password]:focus,
#content textarea:focus, #content select:focus{
	border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(0,167,123,.15) !important; outline:0;
}

/* ---------- buttons -------------------------------------------------------- */
#content .btn a, #content a.btn, #content .button a, #content input[type=button],
#content input[type=submit], .footer .btn a, .crssrch-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	min-height:38px; padding:0 20px !important; border-radius:var(--pill) !important;
	border:1px solid var(--line) !important; background:#fff !important; color:var(--ink-soft) !important;
	font-size:14px !important; font-weight:600; text-decoration:none; cursor:pointer;
	box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
/* hover: 흰 버튼은 브랜드 그린으로 채워지며 떠오르고,
   그린 버튼은 그림자·리프트가 강해진다 (모든 pill 버튼 공통) */
#content .btn a:hover, #content a.btn:hover, #content .button a:hover,
#content input[type=button]:hover, #content input[type=submit]:hover, .crssrch-btn:hover,
#content .btn a:focus-visible, #content a.btn:focus-visible, #content .button a:focus-visible{
	transform:translateY(-2px) !important;
	background:linear-gradient(135deg,var(--brand),var(--brand-strong)) !important;
	border-color:transparent !important;
	color:#fff !important;
	box-shadow:0 8px 20px rgba(0,167,123,.28) !important;
}
/* click: 눌리는 느낌 */
#content .btn a:active, #content a.btn:active, #content .button a:active,
#content input[type=button]:active, #content input[type=submit]:active, .crssrch-btn:active{
	transform:translateY(0) !important;
	box-shadow:0 3px 8px rgba(0,167,123,.22) !important;
}
/* primary buttons (search / submit / list) */
.crssrch-btn, #content input[type=submit],
#content .btn a.on, #content .btn a.primary, #content a.btn_search{
	background:linear-gradient(135deg,var(--brand),var(--brand-strong)) !important;
	border-color:transparent !important; color:#fff !important;
}

/* ---------- bottom search box --------------------------------------------- */
.search{
	margin-top:26px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-lg);
	background:var(--brand-tint-2); box-shadow:var(--shadow-sm);
}
.search form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }

/* ---------- pagination (공통) ----------------------------------------------
   게시판(.paginate)과 농사로 API(.apiContArea .pagination) 페이징 공통 규격.
   - 숫자는 담백한 텍스트, 현재 페이지만 브랜드 그린 필
   - 이전/다음 GIF 화살표는 숨기고 SVG 셰브런 아이콘으로 교체 (:has 미지원
     브라우저는 기존 GIF 그대로 노출되는 안전한 성능저하) */
.paginate, .footer .paginate{
	margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center;
	align-items:center; gap:2px; text-align:center;
}
.apiContArea .pagination{
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	gap:2px; padding:20px 0;
}
.apiContArea .pagination strong{
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	gap:2px; margin:0;
}
.paginate .num, .footer .paginate .num{ display:inline-flex; margin:0; line-height:normal; vertical-align:baseline; }
.paginate .num a, .paginate .num strong,
.footer .paginate .num a, .footer .paginate .num strong,
.apiContArea .pagination a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:30px; height:30px; padding:0 7px; margin:0; border:0; background:none;
	border-radius:var(--radius-sm); font-size:14px; font-weight:500; line-height:1;
	text-decoration:none; color:var(--ink-soft); transition:all .15s var(--ease);
}
.paginate .num a, .footer .paginate .num a{ color:var(--ink-soft) !important; }
/* hover 는 background-color 만 변경한다 (단축 background 를 쓰면
   화살표의 background-image SVG 가 지워진다) */
.paginate .num a:hover, .footer .paginate .num a:hover,
.apiContArea .pagination a:hover{ color:var(--brand-dark) !important; background-color:var(--brand-tint); }
.paginate .num strong, .footer .paginate .num strong,
.apiContArea .pagination a.active{
	background:linear-gradient(135deg,var(--brand),var(--brand-strong));
	color:#fff !important; font-weight:700; box-shadow:var(--shadow-sm);
}
.paginate > a, .footer .paginate > a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:30px; height:30px; border-radius:var(--radius-sm);
	transition:background-color .15s var(--ease);
}
.paginate > a:hover, .footer .paginate > a:hover{ background-color:var(--brand-tint); }
.paginate a img, .footer .paginate img{ vertical-align:middle; }

/* 화살표 GIF → SVG 셰브런 (파일명으로 방향 판별) */
.paginate a:has(img), .footer .paginate a:has(img),
.apiContArea .pagination a:has(img){
	background-repeat:no-repeat; background-position:center; background-size:16px 16px;
}
.paginate a:has(img) img, .footer .paginate a:has(img) img,
.apiContArea .pagination a:has(img) img{ display:none; }

/* 단일 셰브런: 이전(‹) / 다음(›) */
.paginate a:has(img[src*="prev"]), .apiContArea .pagination a:has(img[src*="prev"]){
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236a7686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4 6 8l4 4'/%3E%3C/svg%3E");
}
.paginate a:has(img[src*="next"]), .apiContArea .pagination a:has(img[src*="next"]){
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236a7686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 4 4 4-4 4'/%3E%3C/svg%3E");
}
/* 이중 셰브런: 맨앞/이전10(«) / 맨뒤/다음10(») */
.paginate a:has(img[src*="first"]), .paginate a:has(img[src*="prev10"]),
.apiContArea .pagination a:has(img[src*="prev10"]){
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236a7686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 4 8l4 4'/%3E%3Cpath d='M12 4 8 8l4 4'/%3E%3C/svg%3E");
}
.paginate a:has(img[src*="last"]), .paginate a:has(img[src*="next10"]),
.apiContArea .pagination a:has(img[src*="next10"]){
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236a7686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 4 4 4-4 4'/%3E%3Cpath d='m8 4 4 4-4 4'/%3E%3C/svg%3E");
}

/* ---------- tabs (.tab ul.control) ---------------------------------------- */
.tab ul.control{ display:flex; gap:8px; border-bottom:2px solid var(--line) !important; margin-bottom:26px; }
.tab ul.control li a{
	border:0 !important; border-radius:var(--radius) var(--radius) 0 0 !important;
	padding:12px 26px !important; background:var(--brand-tint-2) !important;
	color:var(--muted) !important; font-weight:600 !important; font-size:15px !important;
	transition:all .15s var(--ease);
}
.tab ul.control li a:hover{ background:var(--brand-tint) !important; color:var(--brand-dark) !important; }
.tab ul.control li.on a{
	background:linear-gradient(135deg,var(--brand),var(--brand-strong)) !important; color:#fff !important;
}

/* ============================================================================
   Responsive — complements default.css breakpoints (1200 / 730 / 374).
   Keeps the modern components tidy on tablet & phone without touching markup.
   ============================================================================ */
@media screen and (max-width:1200px){
	#content{ padding:22px 16px 44px !important; }
	.title{ font-size:26px !important; }
	/* wide data tables scroll horizontally instead of blowing out the layout */
	.board_list, .board_view, .apiContArea, .right_contents_api{
		overflow-x:auto; -webkit-overflow-scrolling:touch;
	}
	/* left content menu turns into a horizontal chip bar above the content */
	#nav_pc{ margin-bottom:18px; }
	#nav_pc menu, #nav_pc ul{ flex-direction:row; flex-wrap:wrap; gap:8px; }
	#nav_pc li a{ padding:9px 15px; border:1px solid var(--line); border-radius:var(--pill); font-size:14px; }
	#nav_pc li a:hover{ transform:none; }
}

@media screen and (max-width:730px){
	#content{ padding:16px 14px 36px !important; }
	.title{ font-size:22px !important; padding-left:12px; }
	.title:before{ width:5px; }
	.sub-title{ font-size:14px !important; margin-bottom:22px !important; }

	/* comfortable touch targets */
	#content .btn a, #content a.btn, #content .button a,
	#content input[type=button], #content input[type=submit], .crssrch-btn{
		min-height:44px; width:100%; box-sizing:border-box;
	}
	/* bottom search stacks */
	.search{ padding:14px; }
	.search form{ flex-direction:column; align-items:stretch; }
	.search form select, .search form input[type=text]{ width:100% !important; box-sizing:border-box; }

	/* pagination: wrap and shrink */
	.paginate{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
	.paginate .num{ margin:0; }
	.paginate .num a, .paginate .num strong{ min-width:34px; height:34px; font-size:13px; }

	/* tabs scroll horizontally when they overflow */
	.tab ul.control{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.tab ul.control li a{ white-space:nowrap; padding:11px 18px !important; font-size:14px !important; }

	/* mobile board card (default.css .mobile_board_list) tuned to match */
	.mobile_board_list table{ border-radius:var(--radius); overflow:hidden; }
}


/* ---- 농사로(nongsaro) API 검색줄: 레이블-입력 수직 중앙 정렬 (2026-07-26) ---- */
#nongsaroApiLoadingAreaInstt select, #nongsaroApiLoadingAreaInstt input[type=text],
#nongsaroApiLoadingAreaInstt button, #nongsaroApiLoadingAreaInstt img, #nongsaroApiLoadingAreaInstt a,
.apiContArea select, .apiContArea input[type=text], .apiContArea button, .apiContArea img{
	vertical-align: middle !important;
}
#nongsaroApiLoadingAreaInstt{ line-height: 40px; }
#nongsaroApiLoadingAreaInstt table th, #nongsaroApiLoadingAreaInstt table td,
.apiContArea table th, .apiContArea table td{ vertical-align: middle !important; }


/* ---- 농사로 검색줄(.schBox): 레이블(display:block)이 위로 붙는 문제 -> flex 중앙 (2026-07-26, 라이브 실측 검증) ---- */
.schBox .fl{ display:flex !important; align-items:center !important; }
.schBox .nTitle{ display:inline-block !important; margin:0 6px 0 0 !important; }

/* ---- 요구 1번: 종자개별신청 화면 휴대전화로 볼 때 (2026-09-05) ------------
   실측 390px: 주문 정보 표는 폭 540px 인데 상자는 340px 이고, 위쪽
   `.board_list table` 의 둥근 모서리용 overflow:hidden 이 bbs.css 의
   `body .mobile-table2{overflow-x:auto}` 를 덮어써서 오른쪽 세 칸
   (신청수량·비고·설명)에 손이 아예 닿지 않았다. 신청자·배송 정보 표는
   4단을 390px 에 밀어 넣느라 "도로명주소" 가 한 줄에 한 글자씩 세로로 섰다. */
@media screen and (max-width:730px){
	.board_list table.app-table,
	.board_list table.mobile-table2{
		overflow-x:auto; -webkit-overflow-scrolling:touch;
	}

	.supply-application-handle .userinfo table{ display:block; width:100%; }
	.supply-application-handle .userinfo colgroup{ display:none; }
	.supply-application-handle .userinfo tbody,
	.supply-application-handle .userinfo tr{ display:block; width:100%; }
	.supply-application-handle .userinfo td{
		display:block; width:auto !important; height:auto !important;
		padding:8px 10px !important; box-sizing:border-box; text-align:left;
	}
	.supply-application-handle .userinfo td.title_name,
	.supply-application-handle .userinfo td.zipinput{
		background:#f5f7f6; font-weight:bold; padding:6px 10px !important;
	}
	.supply-application-handle .userinfo td.zipinput{ font-weight:normal; }
	.supply-application-handle .userinfo td.zipinput[colspan]{ background:none; }
	.supply-application-handle .userinfo #userNm,
	.supply-application-handle .userinfo input.userroadaddr{
		width:100% !important; box-sizing:border-box;
	}
	.supply-application-handle .userinfo #pZipCd{ width:110px !important; }
	.supply-application-handle .userinfo #findZipcode{ margin-left:6px; }
}

/* ---- 왼쪽 안내 상자: 한글이 낱자로 끊기지 않게 (2026-09-05, 요구사항정의서 지적)
   "농가에서 농진원 종자 / 를 직접 신청하세요." 처럼 조사가 떨어져 넘어갔다. */
nav aside li a strong,
nav aside li a span{ word-break:keep-all; }


/* 왼쪽 메뉴 안내 카드 : 두 줄로 들어가게 좌우 여백을 줄인다. (2026-09-07)
   재 보니 안쪽이 146px 인데 첫 줄이 151px 라 한 줄이 더 접혔다.
   여백을 8px 로 줄이면 안쪽이 162px 가 되어 두 줄로 떨어진다. */
nav aside li a{ /* aside-two-lines */
	padding-left:8px !important;
	padding-right:8px !important;
}