@charset "utf-8";

/* 비밀번호 토글 아이콘 스타일 - 일반 폼 */
.password-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    user-select: none;
    vertical-align: middle !important;
}

/* 로그인 폼 비밀번호 필드 - 눈 아이콘 위치 */
.new_login .input_form dl dd {
    position: relative !important;
}

.new_login .input_form dl dd .password-toggle-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

.password-toggle-icon:hover {
    opacity: 1;
}

.password-toggle-icon:hover svg {
    stroke: #000 !important;
}

.password-toggle-icon.active {
    opacity: 0.85;
}

.password-toggle-icon svg {
    display: block;
}

/* 댓글 입력 폼 비밀번호 필드 - 눈 아이콘 위치 */
.answer_wrapper .custom_box_bom {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.answer_wrapper .custom_box_bom input[type="password"],
.answer_wrapper .custom_box_bom input[type="text"] {
    flex: 1 !important;
    padding-right: 35px !important;
}

.answer_wrapper .custom_box_bom .password-toggle-icon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

/* 댓글 관련 스타일 */
.comment-empty {
    text-align: center !important;
    padding: 80px 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* =========================================================================
   The IRO — 사이트 공통 (헤더 / 푸터 / 디자인 토큰)
   custom.css 는 headHtml.jsp 가 맨 마지막에 로드하므로 전역 오버라이드가 된다.
   메인 페이지 본문 스타일은 여기가 아니라 /css/mainpage.css 에 있다.
   ========================================================================= */

:root {
	/* 화이트·연회색 베이스 + 포인트 1색(다홍).
	   2026-09 피드백 — "브라운(베이지) 톤이 아니라 젊은 감성. 베이스는 흰색·회색, 포인트는 다홍/핑크."
	   그래서 베이지 계열을 전부 걷어내고 무채색 회색으로 바꿨다. 포인트컬러는 --iro-point 한 곳에서만
	   정의한다 — 이 값만 바꾸면 헤더 CTA·버튼·강조선까지 전부 따라 바뀐다.
	   ※ 게시판 등 프로그램 영역 색상은 이 변수가 아니라 관리자 > 사이트설정의
	     메인컬러(IDENTITY_COLOR → --color-primary01)로 관리한다. 같은 값을 넣어야 통일된다. */
	--iro-point: #f2564b;      /* 포인트 — 다홍(코랄 레드). 버튼·배지 같은 "면" 에 쓴다 */
	--iro-point-dk: #d9463c;   /* 면 hover (한 단계 진한 다홍) */
	/* 면 색을 그대로 흰 배경 위 작은 글자로 쓰면 대비가 모자란다(11~13px 라벨).
	   텍스트·아이콘·얇은 선에는 한 단계 눌러 진하게 쓴다.
	   면=--iro-point / 글자=--iro-point-ink 로 역할을 나눠 둔 것. */
	--iro-point-ink: #d63a30;
	--iro-point-soft: #fdeceb; /* 다홍을 아주 옅게 깐 면 — 체크·선택 상태의 바탕 */

	--iro-ink: #111111;        /* 본문 검정 */
	--iro-ink-2: #5a5a60;      /* 보조 텍스트 (푸른 기 없는 중립 회색) */
	--iro-ink-3: #8e8e94;      /* 캡션 / 라벨 */
	--iro-paper: #ffffff;      /* 기본 배경 */
	--iro-paper-2: #f4f4f6;    /* 연회색 섹션 배경 */
	--iro-paper-3: #ebebee;    /* 한 단계 더 진한 회색 면 */
	--iro-line: #e4e4e8;       /* 헤어라인 */
	--iro-line-dk: #2a2a2a;    /* 어두운 면 위의 라인 */

	--iro-head-h: 98px;        /* 고정 헤더 높이 (PC) — 로고 크기에 맞춰 잡는다 */
	--iro-head-h-m: 64px;      /* 고정 헤더 높이 (모바일) */

	/* 영문·숫자 표기용 서체. 한글 글리프가 없으므로 Noto Sans KR 이 뒤를 받는다.
	   (headHtml.jsp 가 Google Fonts 로 로드) */
	--iro-serif: 'Playfair Display', 'Noto Sans KR', serif;
	--iro-sans: 'Noto Sans KR', 'Poppins', sans-serif;
}

/* Playfair Display 의 앰퍼샌드(&)는 장식이 과한 스와시 형태라 제목에서 혼자 튄다.
   그 글자만 기하학적인 산세리프로 바꿔 단정하게 둔다. */
.amp {
	font-family: 'Poppins', 'Noto Sans KR', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: .82em;      /* 세리프보다 크게 보여 한 단계 줄인다 */
	letter-spacing: 0;
	margin: 0 .04em;
}

/* 각진 톤 — 공통 요소의 둥근 모서리를 없앤다 */
#header .head_cta a,
#footer input, #footer button { border-radius: 0; }

/* 고정 헤더가 본문을 가리지 않도록 확보하는 여백.
   메인(.main_wrap)은 히어로가 헤더 아래에서 시작하므로 여백을 주지 않고,
   히어로 자체가 padding-top 으로 처리한다. */
body { padding-top: var(--iro-head-h); }
body.is_main { padding-top: 0; }

/* 앵커(/#id)로 이동했을 때 고정 헤더에 제목이 가리지 않게 한다 */
[id^="iro-"], .iro_sec { scroll-margin-top: var(--iro-head-h); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------ 헤더 (GNB) ------------------------------ */
/* layout.css 18행이 개발용 navbar(devMenu)를 쓰던 시절 설정으로 #header 를 숨긴다.
   layout.css 는 전역 공유 파일이라 건드리지 않고 여기(마지막 로드)에서 되살린다. */
#header {
	display: block;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: var(--iro-head-h);
	background: var(--iro-paper);
	border-bottom: 1px solid var(--iro-line);
	z-index: 1000;
	transition: box-shadow .25s ease;
}
#header.scrolled { box-shadow: 0 1px 12px rgba(0,0,0,.06); }

/* 메인 최상단에서는 헤더가 히어로 위에 겹쳐 있으므로 살짝 투명하게 두어
   히어로가 헤더 뒤로 비쳐 보이게 한다. 스크롤이 시작되면(.scrolled) 흰 면으로 굳는다.
   ※ 흰 비율(.72)과 blur 는 함께 움직인다 — 더 투명하게 두면 모델의 검은 머리가
     헤더 뒤로 비쳐 우측 메뉴 글자의 대비가 떨어진다.
   ※ body.is_main 으로 한정 — 히어로가 없는 서브페이지는 처음부터 흰 면이어야 한다. */
body.is_main #header {
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	border-bottom-color: transparent;
	transition: background .35s ease, border-color .35s ease, box-shadow .25s ease;
}
body.is_main #header.scrolled {
	background: var(--iro-paper);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: var(--iro-line);
}

/* 좌우 기준선은 본문 섹션(.iro_inner)과 같은 값으로 맞춘다 —
   max-width 1800px + clamp(20px, 4.5vw, 80px).
   따로 두면(예전 1440px + 40px) 화면폭에 따라 로고·메뉴가 아래 섹션 제목과
   수십 px 어긋나 보인다. 이 값을 바꿀 때는 mainpage.css 의 .iro_inner /
   .hero_copy / .hero_scroll 도 함께 바꿔야 한다. */
#header .inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
	max-width: 1800px;
	height: 100%;
	margin: 0 auto;
	/* !important 는 board.css 의 @media(max-width:600px) 에 있는
	   `.inner { padding-left/right: 16px !important }` 를 넘기 위한 것.
	   board.css 는 전 프로젝트 공용 파일이라 건드리지 않고 여기서 덮는다.
	   이게 없으면 좁은 화면에서만 헤더가 본문 섹션보다 4px 안쪽으로 들어간다. */
	padding: 0 clamp(20px, 4.5vw, 80px) !important;
	box-sizing: border-box;
}

#header .site_logo { flex: 0 0 auto; margin: 0; line-height: 0; }
#header .site_logo a { display: block; }
#header .site_logo a { display: block; transition: opacity .25s ease; }
#header .site_logo a:hover { opacity: .62; }
#header .site_logo img { display: block; height: 70px; width: auto; }

#header .gnb { flex: 1 1 auto; }
#header .gnb > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	margin: 0; padding: 0;
	list-style: none;
}
#header .gnb > ul > li > a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-family: var(--iro-serif);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--iro-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
/* 각진 톤에 맞춰 밑줄은 직선 1px 로만 그린다 */
#header .gnb > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--iro-point-ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}
#header .gnb > ul > li > a:hover { color: var(--iro-point-ink); }
#header .gnb > ul > li > a:hover::after { transform: scaleX(1); }

/* 전화 버튼 — 번호 대신 아이콘 하나만 둔 정사각 고스트 버튼.
   헤더가 반투명 유리라 면을 채우면 그 부분만 무겁게 떠 보인다. 선으로만 두르면
   헤더의 가벼움을 유지하면서도 버튼으로 읽힌다.
   hover 에서 잉크 면으로 채워져, 히어로 주 CTA(면 → 선)와 정확히 반대로 뒤집힌다.
   아이콘은 stroke="currentColor" 라 글자색만 바꾸면 선 색도 함께 따라온다. */
#header .head_cta { flex: 0 0 auto; }
#header .head_cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid rgba(17, 17, 17, .26);
	color: var(--iro-ink);
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}
#header .head_cta a svg { display: block; width: 19px; height: 19px; }
#header .head_cta a:hover {
	background: var(--iro-ink);
	border-color: var(--iro-ink);
	color: #fff;
}

/* 모바일 햄버거 (기본 숨김 — layout.css 기본값을 덮는다) */
#header .m_btn { display: none; flex: 0 0 auto; width: 26px; cursor: pointer; }
#header .m_btn i {
	display: block;
	width: 100%; height: 2px;
	margin: 6px 0;
	background: var(--iro-ink);
	transition: all .2s ease;
}

@media (max-width: 1280px) {
	/* padding 은 위 clamp 가 화면폭에 따라 알아서 줄어든다(섹션과 같은 값 유지) */
	#header .gnb > ul { gap: 22px; }
	#header .gnb > ul > li > a { font-size: 14px; letter-spacing: .08em; }
}
@media (max-width: 1024px) {
	:root { --iro-head-h: var(--iro-head-h-m); }
	body { padding-top: var(--iro-head-h-m); }
	#header { display: block; height: var(--iro-head-h-m); }  /* layout.css 28행의 display:none 을 덮는다 */
	#header .site_logo img { height: 42px; }
	#header .gnb { display: none; }          /* PC GNB 숨김 → #m_menu 사용 */
	#header .head_cta { margin-left: auto; }
	#header .head_cta a { width: 40px; height: 40px; }
	#header .head_cta a svg { width: 17px; height: 17px; }
	/* margin-right:0 은 layout.css 의 auto 마진을 지우는 것 —
	   그게 남아 있으면 햄버거가 오른쪽 끝에 붙지 못하고 57px 쯤 안쪽에 뜬다. */
	#header .m_btn { display: block; margin-left: 14px; margin-right: 0; }
}
@media (max-width: 480px) {
	/* 번호를 아이콘으로 바꾸면서 좁은 화면에서도 그대로 둔다 —
	   폭을 거의 차지하지 않고, 모바일에서야말로 바로 전화가 걸려 쓸모가 크다.
	   (예전에는 번호 텍스트가 길어 display:none 으로 숨겼다.) */
	#header .head_cta a { width: 38px; height: 38px; }
}

/* ------------------------------ 푸터 (FNB) ------------------------------ */
#footer {
	background: var(--iro-ink);
	color: #fff;
}
/* 컨테이너 규격은 헤더(#header .inner)·본문 섹션(.iro_inner)과 똑같이 —
   max-width 1800px + clamp(20px, 4.5vw, 80px). 그래야 로고 · 카피 · 섹션 제목 · 푸터 로고의
   왼쪽 선이 한 줄로 맞는다. (예전 1440px + 40px 은 넓은 화면에서 푸터만 안쪽으로 밀렸다)
   !important 는 헤더와 같은 이유 — board.css 의 좁은 화면 .inner 패딩을 덮는다. */
#footer .inner {
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	padding: 76px clamp(20px, 4.5vw, 80px) 40px !important;
	box-sizing: border-box;
}
#footer .ft_top {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	padding-bottom: 46px;
	border-bottom: 1px solid var(--iro-line-dk);
}
#footer .ft_brand { flex: 1 1 340px; }
#footer .ft_brand .ft_logo {
	display: inline-block;
	margin: 0 0 30px;
	line-height: 0;
	text-decoration: none;
}
/* 로고 파일은 흰 바탕 위 검정 글자라, 어두운 푸터에서는 흰색으로 반전시켜 쓴다
   (별도 화이트 버전 로고 파일을 받으면 filter 를 지우고 src 만 교체하면 된다) */
#footer .ft_brand .ft_logo img {
	--ft-logo-h: 104px;
	display: block;
	height: var(--ft-logo-h);
	width: auto;
	/* logo.png(660×336) 는 글자 왼쪽에 100px 투명 여백이 있다(100/336 ≈ .2976).
	   그대로 두면 글자가 컨테이너 왼쪽 선보다 안쪽(104px 기준 31px)에서 시작해
	   헤더·섹션 제목과 줄이 안 맞아 보인다. 높이에 비례해 그만큼 왼쪽으로 당긴다. */
	margin-left: calc(var(--ft-logo-h) * -.2976);
	filter: brightness(0) invert(1);
}
#footer .ft_brand p {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: #9a9a9e;
}
#footer .ft_col { flex: 0 1 300px; }
#footer .ft_col h3 {
	margin: 0 0 24px;
	font-family: var(--iro-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	color: #fff;
}
#footer .ft_col ul { margin: 0; padding: 0; list-style: none; }
#footer .ft_col li { margin-bottom: 12px; font-size: 14px; line-height: 1.6; color: #9a9a9e; }
#footer .ft_col li a { color: #9a9a9e; text-decoration: none; transition: color .2s ease; }
#footer .ft_col li a:hover { color: #fff; }

#footer .ft_bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 30px;
	font-size: 12px;
	letter-spacing: .02em;
	color: #75757a;
}
#footer .ft_bottom .ft_policy a { color: #75757a; text-decoration: none; }
#footer .ft_bottom .ft_policy a:hover { color: #fff; }
#footer .ft_bottom .ft_policy span { margin: 0 10px; opacity: .5; }

@media (max-width: 1024px) {
	#footer .inner { padding: 48px clamp(20px, 4.5vw, 80px) 28px !important; }
	#footer .ft_top { gap: 28px; padding-bottom: 30px; }
	#footer .ft_brand { flex: 1 1 100%; }
	#footer .ft_col { flex: 1 1 42%; }
	/* 푸터 로고가 104px 이라 모바일에서는 그것만으로 화면의 1/8 을 먹는다 */
	#footer .ft_brand .ft_logo { margin-bottom: 18px; }
	#footer .ft_brand .ft_logo img { --ft-logo-h: 68px; }
	#footer .ft_col h3 { margin-bottom: 14px; }
	#footer .ft_col li { margin-bottom: 8px; }
	#footer .ft_bottom { padding-top: 20px; }
}
@media (max-width: 560px) {
	#footer .ft_col { flex: 1 1 100%; }
	#footer .ft_bottom { justify-content: flex-start; }
}

/* ------------------------- 모바일 슬라이드 메뉴 ------------------------- */
.m_menu_bg {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 1100;
}
/* ⚠ layout.css 가 #m_menu 를 자체 디자인으로 이미 정의해 두었다(전 프로젝트 공용 파일이라
   건드리지 않는다). 그쪽은 왼쪽에서 밀려 나오는 전체폭 패널 + 검은 로그인 바 + 메뉴 링크
   `display:flex !important` 라, 여기서 덮지 않으면 아래 문제가 그대로 보인다.
     · left(layout) 와 right(custom) 가 동시에 걸려 패널 폭이 제멋대로 잡힌다
     · padding-top:80px 때문에 로고 · 닫기 버튼이 화면 한참 아래에서 시작한다
     · 검은 배경(#292929) 위에 검은 글자가 얹혀 로그인 · 회원가입이 읽히지 않는다
     · flex + space-between 이라 "Q&A" 의 &가 양 끝으로 벌어진다
   그래서 이 블록은 `body` 를 앞에 붙여 특이도를 올리고, !important 로 선언된 것만
   같은 방식으로 되돌린다. */
body #m_menu {
	position: fixed;
	top: 0;
	left: auto !important;        /* layout.css 의 left 기반 애니메이션을 끈다 */
	right: -320px;
	width: 320px; max-width: 86vw;
	height: 100%;
	padding-top: 0 !important;    /* layout.css 의 80px — 로고를 아래로 밀던 원인 */
	background: var(--iro-paper);
	z-index: 1200;
	transition: right .3s ease;
	overflow-y: auto;
}
body #m_menu.on { left: auto !important; right: 0; }
#m_menu .top_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--iro-head-h-m);
	padding: 0 18px;
	border-bottom: 1px solid var(--iro-line);
}
#m_menu .top_box .m_logo img { display: block; height: 28px; width: auto; }
/* top/right 을 0 으로 되돌리는 건 layout.css 가 걸어 둔 오프셋(top:1rem, right:20px)
   때문 — 그대로 두면 닫기 버튼만 로고보다 16px 아래로 내려가 줄이 안 맞는다. */
body #m_menu .top_box .close_btn {
	position: relative;
	top: 0; right: 0;
	display: block;
	flex: 0 0 auto;
	width: 22px; height: 22px;
}
#m_menu .top_box .close_btn i {
	position: absolute;
	top: 50%; left: 0;
	width: 100%; height: 2px;
	background: var(--iro-ink);
}
#m_menu .top_box .close_btn i:first-child { transform: rotate(45deg); }
#m_menu .top_box .close_btn i:last-child { transform: rotate(-45deg); }

/* 로그인 · 회원가입 — layout.css 의 검은 바(#292929, padding 20px) 를 걷어내고
   사이트 톤에 맞춰 흰 바탕 + 검은 글자로 둔다. 가운데 구분선은 글자 높이만큼만. */
body #m_menu .login_box {
	display: flex;
	align-items: stretch;
	padding: 0 !important;
	background: transparent !important;
	border-bottom: 1px solid var(--iro-line);
}
body #m_menu .login_box a {
	flex: 1;
	padding: 16px 0 !important;
	font-family: var(--iro-sans);
	font-size: 13px !important;
	letter-spacing: 0;
	text-align: center;
	color: var(--iro-ink) !important;
	text-decoration: none;
}
body #m_menu .login_box a + a { border-left: 1px solid var(--iro-line); }

#m_menu .gnb_box > ul { margin: 0; padding: 0; list-style: none; }
#m_menu .gnb_box > ul > li { border-bottom: 1px solid var(--iro-line); }
/* display 를 block 으로 되돌리는 !important 는 layout.css 의
   `display:flex !important` 를 이기기 위한 것 — flex + space-between 이면
   "Q&A" 처럼 안에 <span> 이 있는 항목의 글자가 양 끝으로 벌어진다. */
body #m_menu .gnb_box > ul > li > a {
	display: block !important;
	padding: 15px 18px !important;
	font-family: var(--iro-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.4;
	color: var(--iro-ink);
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
body #m_menu .gnb_box > ul > li > a:hover,
body #m_menu .gnb_box > ul > li > a:active {
	background: var(--iro-paper-2);
	color: var(--iro-point-ink);
}
#m_menu .gnb_box > ul ul { display: none; margin: 0; padding: 0 0 8px; list-style: none; background: var(--iro-paper-2); }
#m_menu .gnb_box > ul ul > li > a {
	display: block;
	padding: 11px 18px 11px 30px;
	font-size: 13px;
	color: var(--iro-ink-2);
	text-decoration: none;
}