@charset "utf-8";
/* ============================================================================
 *  dark_theme.css  —  팜노트 다크 테마
 *  (주)나래트랜드 / FarmNote
 *  1차 2026-09-22
 *  2차 2026-09-22  ← 상단 메뉴/모바일 메뉴/히어로 가독성 보완
 * ----------------------------------------------------------------------------
 *  ★ 이 파일은 "추가" 전용입니다. common_style.css 는 전혀 수정하지 않습니다.
 *  ★ 되돌리기 : head.php 의 이 파일 <link> 한 줄만 삭제 → 즉시 원래 화면 복구
 *
 *  ★ 동작 조건
 *      - 라이트 화면 : 아래 :root 값이 기존 common_style.css 의 색과
 *                      "완전히 동일" 하므로 화면 변화가 없습니다.
 *      - 다크 화면   : 기기가 다크 모드일 때, 또는 우측 하단 [다크] 버튼
 *
 *  ★ 2차 보완 내역
 *      ① #topnavigation .offmenu  색 #333333 → 밝은 회색 (검정 배경에 묻힘)
 *      ② .onmenu / hover          색 #bf2a4c → 밝은 분홍
 *      ③ 모바일 펼침메뉴 패널      배경 #fff / #e3e3e3 → 어두운색
 *      ④ 히어로 본문              흰색 강제 + 그림자 강화 + 오버레이 진하게
 *      ⑤ 푸터 글자                밝기 상향
 *      ⑥ select/input             선택자 우선순위 보강 (body select)
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * [1] 색상 토큰 — 라이트 값은 현재 common_style.css 와 동일한 값입니다
 * ------------------------------------------------------------------------- */
:root{
	--fn-bg:            #ffffff;   /* body 배경 (현재는 미지정 = 흰색) */
	--fn-fg:            #000000;   /* body 글자 (현재는 미지정 = 검정) */
	--fn-fg-2:          #444444;   /* 보조 글자 */
	--fn-line:          #dddddd;
	--fn-line-2:        #cccccc;

	--fn-link:          #444444;   /* a:link / a:visited */
	--fn-link-hover:    #c5570d;   /* a:hover */

	/* 입력요소 */
	--fn-input-bg:      #f2ffff;
	--fn-input-fg:      #454545;
	--fn-input-line:    #aaaaaa;

	/* 상단 메뉴 (#topnavigation / top_new.php) */
	--fn-menu-fg:       #333333;   /* .offmenu */
	--fn-menu-on:       #bf2a4c;   /* .onmenu / .offmenu:hover */
	--fn-menu-domain:   #00b1ed;   /* .domain */
	--fn-panel:         #ffffff;   /* 모바일 펼침메뉴 바탕 */
	--fn-panel-2:       #e3e3e3;   /* 모바일 펼침메뉴 펼친 바탕 */
	--fn-bread:         #000000;   /* 햄버거 3줄 색 */
	--fn-logo-filter:   none;      /* 로고 이미지 보정 — 다크에서만 동작 */

	/* 상단 파란 띠 (#subnavi_top) */
	--fn-band-a:        #095d9b;
	--fn-band-b:        #25a1a6;
	--fn-band-home:     #094979;
	--fn-band-line:     #5b88a9;

	/* 히어로 (header.index) — 라이트에서는 레이어 없음 */
	--fn-hero-veil-a:   transparent;
	--fn-hero-veil-b:   transparent;
	--fn-hero-fg:       #ffffff;
	--fn-hero-shadow:   none;

	/* 관리 타일 (#mainkey .mainmenu) */
	--fn-tile-bg:       #f0f0f0;
	--fn-tile-line:     #dddddd;
	--fn-tile-fg:       #000000;
	--fn-tile-hover:    #f9feff;
	--fn-tile-icon:     none;      /* 스프라이트 반전 여부 */

	/* 정보 패널 (.mquick2) */
	--fn-quick-bg:      #e6fbe2;
	--fn-quick-fg:      #000000;

	/* 푸터 */
	--fn-foot-bg:       #f4f4f4;
	--fn-foot-line:     #e9e9e9;
	--fn-foot-fg:       #444444;

	/* 의미 색 (경보/정상) — 다크에서 반드시 다시 지정해야 구분됩니다 */
	--fn-red:           #ed543b;
	--fn-green:         #21bb07;
	--fn-blue:          #037bea;
	--fn-orange:        #e64506;

	color-scheme: light;
}

/* ---------------------------------------------------------------------------
 * [2] 다크 — ① 기기 설정이 다크일 때 (단, [라이트] 를 직접 고르면 제외)
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
	--fn-bg:            #000000;
	--fn-fg:            #ffffff;
	--fn-fg-2:          #c3cac6;
	--fn-line:          #2e312f;
	--fn-line-2:        #3c403d;

	--fn-link:          #c3cac6;
	--fn-link-hover:    #ffb066;

	--fn-input-bg:      #1b1d1c;
	--fn-input-fg:      #e8e8e8;
	--fn-input-line:    #3c403d;

	--fn-menu-fg:       #dfe6e2;
	--fn-menu-on:       #ff8fa3;
	--fn-menu-domain:   #4fc8f5;
	--fn-panel:         #141514;
	--fn-panel-2:       #1b1d1c;
	--fn-bread:         #dfe6e2;
	/* 로고 PNG 의 진한 남색 글자가 검정 배경에서 사라지는 문제 보정.
	   invert(1) 로 명암만 뒤집고 hue-rotate(180deg) 로 색상을 되돌려,
	   Farm note 의 청록색은 유지하면서 어두운 글자만 밝게 만듭니다.
	   ※ 로고를 아예 흰색 실루엣으로 하고 싶으면 아래로 바꾸십시오:
	      --fn-logo-filter: brightness(0) invert(1);                     */
	--fn-logo-filter:   invert(1) hue-rotate(180deg);

	--fn-band-a:        #2a6272;
	--fn-band-b:        #2f7382;
	--fn-band-home:     #103c4d;
	--fn-band-line:     #3f6b7a;

	--fn-hero-veil-a:   rgba(0,0,0,.58);
	--fn-hero-veil-b:   rgba(0,0,0,.48);
	--fn-hero-fg:       #ffffff;
	--fn-hero-shadow:   0 1px 3px rgba(0,0,0,.95), 0 2px 18px rgba(0,0,0,.75);

	--fn-tile-bg:       #1b1d1c;
	--fn-tile-line:     #3a3e3b;
	--fn-tile-fg:       #ffffff;
	--fn-tile-hover:    #242927;
	--fn-tile-icon:     invert(1) brightness(1.25);

	--fn-quick-bg:      #0d2a14;
	--fn-quick-fg:      #ffffff;

	--fn-foot-bg:       #141514;
	--fn-foot-line:     #2e312f;
	--fn-foot-fg:       #cdd4d0;

	--fn-red:           #ff6b6b;
	--fn-green:         #4ed089;
	--fn-blue:          #5fb8f5;
	--fn-orange:        #ff9a5c;

	color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------
 * [3] 다크 — ② [다크] 버튼을 직접 눌렀을 때 (기기가 라이트여도 적용)
 * ------------------------------------------------------------------------- */
:root[data-theme="dark"]{
	--fn-bg:            #000000;
	--fn-fg:            #ffffff;
	--fn-fg-2:          #c3cac6;
	--fn-line:          #2e312f;
	--fn-line-2:        #3c403d;

	--fn-link:          #c3cac6;
	--fn-link-hover:    #ffb066;

	--fn-input-bg:      #1b1d1c;
	--fn-input-fg:      #e8e8e8;
	--fn-input-line:    #3c403d;

	--fn-menu-fg:       #dfe6e2;
	--fn-menu-on:       #ff8fa3;
	--fn-menu-domain:   #4fc8f5;
	--fn-panel:         #141514;
	--fn-panel-2:       #1b1d1c;
	--fn-bread:         #dfe6e2;
	/* 로고 PNG 의 진한 남색 글자가 검정 배경에서 사라지는 문제 보정.
	   invert(1) 로 명암만 뒤집고 hue-rotate(180deg) 로 색상을 되돌려,
	   Farm note 의 청록색은 유지하면서 어두운 글자만 밝게 만듭니다.
	   ※ 로고를 아예 흰색 실루엣으로 하고 싶으면 아래로 바꾸십시오:
	      --fn-logo-filter: brightness(0) invert(1);                     */
	--fn-logo-filter:   invert(1) hue-rotate(180deg);

	--fn-band-a:        #2a6272;
	--fn-band-b:        #2f7382;
	--fn-band-home:     #103c4d;
	--fn-band-line:     #3f6b7a;

	--fn-hero-veil-a:   rgba(0,0,0,.58);
	--fn-hero-veil-b:   rgba(0,0,0,.48);
	--fn-hero-fg:       #ffffff;
	--fn-hero-shadow:   0 1px 3px rgba(0,0,0,.95), 0 2px 18px rgba(0,0,0,.75);

	--fn-tile-bg:       #1b1d1c;
	--fn-tile-line:     #3a3e3b;
	--fn-tile-fg:       #ffffff;
	--fn-tile-hover:    #242927;
	--fn-tile-icon:     invert(1) brightness(1.25);

	--fn-quick-bg:      #0d2a14;
	--fn-quick-fg:      #ffffff;

	--fn-foot-bg:       #141514;
	--fn-foot-line:     #2e312f;
	--fn-foot-fg:       #cdd4d0;

	--fn-red:           #ff6b6b;
	--fn-green:         #4ed089;
	--fn-blue:          #5fb8f5;
	--fn-orange:        #ff9a5c;

	color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * [4] 공통 바탕 / 링크 / 입력요소
 *     ★ body select 로 선택자를 한 단계 올려 common_style.css 보다 확실히 우선
 * ------------------------------------------------------------------------- */
body{ background: var(--fn-bg); color: var(--fn-fg); }

a:link, a:visited          { color: var(--fn-link); }
a:active, a:focus, a:hover { color: var(--fn-link-hover); }

body select, body textarea, body .input, body .input2{
	background: var(--fn-input-bg);
	color:      var(--fn-input-fg);
	border-color: var(--fn-input-line);
}

/* 경보/정상 색 — 다크 배경에서 구분이 흐려지지 않도록 재지정 */
.fc_red    { color: var(--fn-red); }
.fc_green  { color: var(--fn-green); }
.fc_blue   { color: var(--fn-blue); }
.fc_orange { color: var(--fn-orange); }

/* ---------------------------------------------------------------------------
 * [5] 상단 메뉴  (top_new.php / #topnavigation)   ★ 2차 신규
 *     회원관리 · 농가비교 · 이벤트내역 … 글자색이 #333 이어서 검정 배경에
 *     묻히던 문제를 해결합니다.
 * ------------------------------------------------------------------------- */
.offmenu                { color: var(--fn-menu-fg); }
.offmenu:hover, .onmenu { color: var(--fn-menu-on); }

#topnavigation .domain  { color: var(--fn-menu-domain); }
#topnavigation .rightArea,
#topnavigation .rightArea li               { color: var(--fn-fg-2); }
#topnavigation .rightArea a:link,
#topnavigation .rightArea a:visited        { color: var(--fn-fg-2); }
#topnavigation .menuArea a:link,
#topnavigation .menuArea a:visited         { color: var(--fn-menu-fg); }
#topnavigation .menuArea a:hover           { color: var(--fn-menu-on); }

/* 상단 우측 아이콘 (MyPage / Logout) — 어두운 선 아이콘이면 밝게 반전 */
#topnavigation .sub-icon                   { filter: var(--fn-tile-icon); }

/* ★ 2차-b : 로고 이미지 (new_logo.png / m_indexlogo.png)
   「스마트 영농일지 팜노트」 글자가 진한 남색이라 검정 배경에서 사라집니다.
   이미지 파일을 새로 만들지 않고 CSS 로 명암만 뒤집습니다.                */
#topnavigation .menuArea img,
#mtopnavi .menu_m_list img,
#mtopnavi .top_logo img,
.mobiletop img,
#loginTop .logoarea img{
	filter: var(--fn-logo-filter);
}

/* 모바일 펼침메뉴 — 흰 패널이 그대로 남으면 눈이 부십니다 */
#mtopnavi                                  { background: var(--fn-panel); }
#ac-gn-menustate:checked ~ #mtopnavi,
#ac-gn-menustate:target  ~ #mtopnavi       { background: var(--fn-panel-2); }
#mtopnavi .top_menu                        { border-bottom-color: var(--fn-line); }
#mtopnavi .top_link,
#mtopnavi .top_link:link,
#mtopnavi .top_link:visited                { color: var(--fn-fg); }
#mtopnavi .ac-gn-menuicon-bread-crust      { background: var(--fn-bread); }
#mtopnavi3 .menu_list                      { background: var(--fn-panel-2); }
#mtopnavi3 .top_menu                       { border-bottom-color: var(--fn-line); }
#mtopnavi3 .top_link,
#mtopnavi3 .top_link:link,
#mtopnavi3 .top_link:visited               { color: var(--fn-fg); }
.mobiletop .domain                         { color: var(--fn-menu-domain); }

/* PC용 2단 서브메뉴 */
.pc_submenu                                { background: var(--fn-panel-2); border-bottom-color: var(--fn-line); }
.pc_submenu a:link, .pc_submenu a:visited  { color: var(--fn-fg-2); }
.pc_submenu a:hover, .pc_submenu a.select  { color: var(--fn-menu-on); }

/* ---------------------------------------------------------------------------
 * [6] 첫 화면 — 상단 파란 띠 (#subnavi_top)
 * ------------------------------------------------------------------------- */
#subnavi_top{
	background: var(--fn-band-a);
	background: linear-gradient(90deg, var(--fn-band-a) 0%, var(--fn-band-b) 100%);
}
#subnavi_top .home{
	background: var(--fn-band-home);
	border-left-color:  var(--fn-band-line);
	border-right-color: var(--fn-band-line);
}
#subnavi_top .etc{ border-left-color: var(--fn-band-line); }

/* ---------------------------------------------------------------------------
 * [7] 첫 화면 — 히어로 (header.index)
 *     ★ 사진은 그대로 두고 그 위에 어두운 레이어만 얹습니다.
 *     ★ .slogan_ex 는 PC에서 글자색이 지정되어 있지 않던 기존 버그를
 *        함께 바로잡습니다 (다크에서만 적용).
 * ------------------------------------------------------------------------- */
header.index{ position: relative; }
header.index::after{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background: linear-gradient(180deg, var(--fn-hero-veil-a) 0%, var(--fn-hero-veil-b) 50%, var(--fn-hero-veil-a) 100%);
}
#index_t, #loginTop{ position: relative; z-index: 1; }

#index_t .slogan,
#index_t .slogan_ex,
#loginTop .slogan,
#loginTop .slogan_ex{
	color: var(--fn-hero-fg);
	text-shadow: var(--fn-hero-shadow);
	word-break: keep-all;   /* 「디지털 유산(DX)이 / 며」 단어 끊김 방지 */
}

/* ---------------------------------------------------------------------------
 * [8] 첫 화면 — 관리 타일 4개 (#mainkey)
 *     아이콘은 스프라이트 1장이므로 filter 로 밝게 반전합니다.
 * ------------------------------------------------------------------------- */
#mainkey .mainmenu{
	background: var(--fn-tile-bg);
	border-color: var(--fn-tile-line);
	color: var(--fn-tile-fg);
}
#mainkey .mainmenu:hover{ background: var(--fn-tile-hover); }
#mainkey a:link, #mainkey a:visited{ color: var(--fn-tile-fg); }
#mainkey .index-icon{ filter: var(--fn-tile-icon); }

/* ---------------------------------------------------------------------------
 * [9] 첫 화면 — 공지사항
 * ------------------------------------------------------------------------- */
.index_noticetitle      { border-bottom-color: var(--fn-line-2); color: var(--fn-fg); }
.index_noticetitle .more a:link,
.index_noticetitle .more a:visited{ color: var(--fn-fg-2); }
.index_notice ul        { border-bottom-color: var(--fn-line); }
.index_notice a:link,
.index_notice a:visited { color: var(--fn-fg-2); }
.index_notice a:hover   { color: var(--fn-link-hover); }

/* ---------------------------------------------------------------------------
 * [10] 첫 화면 — 초록 정보 패널 (.mquick2)
 *      원형 아이콘의 색(bg1~5 / border1~5)은 그대로 둡니다.
 * ------------------------------------------------------------------------- */
.mquick2      { background: var(--fn-quick-bg); }
.mquick2_item { color: var(--fn-quick-fg); }
.mquick2_item a:link, .mquick2_item a:visited{ color: var(--fn-quick-fg); }
.circle       { background: transparent; }

/* ---------------------------------------------------------------------------
 * [11] 푸터
 * ------------------------------------------------------------------------- */
#footCopy{
	background: var(--fn-foot-bg);
	border-top-color:    var(--fn-foot-line);
	border-bottom-color: var(--fn-foot-line);
}
#footCopy .copy,
#footCopy a:link, #footCopy a:visited{ color: var(--fn-foot-fg); }
#footCopy a:hover                    { color: var(--fn-link-hover); }
#footContact                         { color: var(--fn-foot-fg); }
#footContact b,
#footContact a:link, #footContact a:visited{ color: var(--fn-fg); }

/* ---------------------------------------------------------------------------
 * [12] 테마 전환 버튼 (foot.php 에서 출력)
 * ------------------------------------------------------------------------- */
#fnTheme{
	position: fixed; right: 14px; bottom: 14px; z-index: 99990;
	display: flex; overflow: hidden;
	border: 1px solid var(--fn-line-2);
	border-radius: 6px;
	background: var(--fn-bg);
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	opacity: .92;
}
#fnTheme:hover{ opacity: 1; }
#fnTheme button{
	font-family: inherit; font-size: 11px; line-height: 1;
	padding: 6px 9px; cursor: pointer;
	border: 0; border-right: 1px solid var(--fn-line);
	background: transparent; color: var(--fn-fg-2);
}
#fnTheme button:last-child{ border-right: 0; }
#fnTheme button.on{ background: var(--fn-tile-bg); color: var(--fn-fg); font-weight: 700; }

@media only screen and (max-width: 767px){
	#fnTheme{ right: 8px; bottom: 8px; }
	#fnTheme button{ font-size: 11px; padding: 7px 8px; }
}

/* ---------------------------------------------------------------------------
 * [13] 3차에서 검토할 항목 (지금은 적용하지 않음)
 * ---------------------------------------------------------------------------
 *   - .td_* / .list_table / .data_table  : 표 배경 (조회 화면 전반)
 *   - .newBtn / .confirmBtn / .cancelBtn : 그라데이션 버튼
 *   - #writeform / .setting              : 입력 폼
 *   - #newSearch / #bodytop / #subtab    : 검색·탭 영역
 *   위 항목은 조회·입력 화면 전체에 영향이 있으므로 첫 화면 확인 후
 *   별도 차수로 진행합니다.
 * ========================================================================= */