/**
 * @author parkyk
 * @since 2026-03-17
 * @description 사이트 프로젝트 CSS
 */
/* 기본 글자크기는 body 에 지정 — html(rem 기준)은 브라우저 기본 16px 유지.
   html 에 font-size 를 주면 rem 기준이 바뀌어 Tailwind 전 유틸이 스케일됨(디자인 시안 16px 와도 어긋남). */
body {
	font-size: 14px;
	font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;
}

/* 비활성/읽기전용 입력 — 잠김 시각 신호(옅은 회색, 짙지 않게). 클래스 무관 전역 적용.
   클릭 트리거로 쓰는 readonly(예: main AI 검색)는 해당 요소에서 style 로 override */
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
	background: #f5f6f8;
	color: #8b9096;
	cursor: not-allowed;
}

/* s-input: 사이트 공통 입력칸(input·select·textarea). 폭·높이만 유틸로 덮어 쓰면 되게 최소 스타일만. */
.s-input { width: 100%; height: 2.5rem; padding: 0 0.875rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.9375rem; color: #333; background: #fff; outline: none; }
.s-input::placeholder { color: #9aa0a8; }
.s-input:focus { border-color: var(--s-blue); }
textarea.s-input { height: auto; padding: 0.625rem 0.875rem; }

/* s-bg-main: 사용자 영역(mainBase) 전용 은은한 배경. 디자인 시안 body 그라데이션 그대로.
   min-height 로 콘텐츠가 짧아도 하단 흰 여백 없이 그라데이션이 화면을 채움. (관리자 영역은 미적용) */
.s-bg-main {
	min-height: 100vh;
	background: linear-gradient(180deg, #fff 19.11%, #fafdff 62.69%);
}

/* s-section-bg: 콘텐츠 섹션 전체폭 배경(시안 page 그라데이션, 상단 회색기). 전체폭 래퍼(section)에 적용, 내부는 s-container 로 가운데 정렬.
   body .s-bg-main(흰색 시작)보다 진해 페이지 단위 opt-in. 콘텐츠 짧을 때 하단 seam 방지하려면 min-height 유틸 병행. */
.s-section-bg {
	background: linear-gradient(180deg, #f4f6f8 13.58%, #fafdff 62.69%);
}

/* 사용자(main) 영역 페이저 스킨 — body.s-bg-main 하위의 makePagination(_pagination/_page_item)에 시안 룩 자동 적용.
   숫자=원형·옅은 active, 화살표(_page_nav)=테두리. 관리자(adminBase: s-bg-main 없음)·bare 팝업은 미적용.
   .s-bg-main 하위 선택자라 기본 스타일(pcommon3.css)보다 우선. */
.s-bg-main ._pagination {
	gap: 0.375rem;
}
.s-bg-main ._pagination ._page_item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.375rem;
	border: 0;
	border-radius: 9999px;
	color: #888888;
	font-weight: 500;
	line-height: 1;
}
.s-bg-main ._pagination ._page_item:hover {
	background-color: #f1f1f3;
}
.s-bg-main ._pagination ._page_item.active {
	background-color: #f4f6f8;
	color: #1f1f1f;
	font-weight: 700;
}
.s-bg-main ._pagination ._page_item:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
/* 화살표(처음/이전/다음/끝) — 시안처럼 테두리 버튼. _page_item 뒤에 와서 border:0 을 덮음 */
.s-bg-main ._pagination ._page_nav {
	border: 1px solid #d1d5db;
	color: #666666;
}
.s-bg-main ._pagination ._page_nav:hover {
	background-color: #f7f7f9;
}

/* s-container: 사이트 공통 콘텐츠 폭 — topBar/header/footer/본문의 좌우 정렬 단일 기준.
   폭·좌우 패딩 변경은 여기서만. (s- = icube 사이트 전용)
   좌우 거터는 전 폭 일관되게 0.625rem — 좁은 화면에서 거터가 커지는 어색함 방지. 캡 이상은 가운데 정렬로 여백 생김.
   패딩 방식이라 자식 full-bleed(가장자리까지) 필요 시 자식에 margin-inline:-0.625rem 로 빼면 됨. */
.s-container { max-width: 1120px; margin-inline: auto; padding-inline: 0.625rem; }

/* s-required: 필수 입력 항목 라벨의 별표. 라벨 안 <span class="s-required">*</span> 로 사용.
   색값이 인라인 style 로 화면마다 흩어져 있던 것을 한곳으로 모음 — 색 변경은 여기서만. (검증은 입력의 required 클래스가 담당) */
.s-required { color: #e5484d; }

/* s-row-edit: 표에서 지금 편집 중인 행. 화면마다 색이 갈리지 않게 여기서만 정한다(관리자 인라인 편집 화면 공용). */
.s-row-edit { background: #eff6ff; }

/* s-scroll-thin: 스크롤바를 얇게(숨김 아님). 가로/세로 공용 — webkit 은 height(가로)·width(세로) 둘 다 지정. */
.s-scroll-thin { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.s-scroll-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.s-scroll-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.s-scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* s-skeleton: 로딩 자리표시(shimmer 펄스) — 회색 막대에 부여. 폭/높이는 사용처에서(인라인 style 또는 유틸). (s- = icube 사이트 공통) */
.s-skeleton { display: block; border-radius: 0.375rem; background: linear-gradient(90deg, #eef1f5 25%, #f5f7fa 37%, #eef1f5 63%); background-size: 400% 100%; animation: s-skeleton 1.3s ease-in-out infinite; }
@keyframes s-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .s-skeleton { animation: none; } }

/* ===== 공개 목록/상세 공통 컴포넌트 (뉴스·게시판 — 시안 톤 통일). 페이지별로 다른 값(패딩·여백)은 유틸로 각자 부여. (s- = icube 사이트 전용) =====
   같은 스타일은 여기로, 비슷하되 다른 부분(제목/검색 action/탭 ename 등)은 각 peb 의 마크업·유틸로 분리. */
:root { --s-blue: #3280F7; }

/* 메인 화면 카드 제목 폰트(디자이너 지정 Paperlogy) — 본문은 Pretendard 유지. 크기·굵기·색은 각 제목의 유틸에 두고 여기서는 서체만 바꾼다.
   ※ Paperlogy 웹폰트는 mainBase head 에서만 로드된다 — 사용자 영역 밖(관리자·shop)에서 이 클래스를 쓰면 폰트 없이 폴백만 걸린다.
   폴백을 body 와 같게 이어 둬 CDN 실패 시에도 자연스럽게 Pretendard 로 떨어진다 */
.s-main-card-title { font-family: Paperlogy, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; }

/* 히어로 — 파란 라운드 박스(브랜드+검색+하단 탭바). 좌우 데코·바깥 여백(mb-*)은 페이지 유틸
   그라데이션은 시안(csiAnalysis)이 왼쪽 칼럼에만 건 것을 박스 전체로 옮김 — 오른쪽은 데코 이미지로 덮이고, 데코를 숨기는 모바일에서도 색이 유지된다 */
.s-hero { border-radius: 1.5rem; overflow: hidden; background: linear-gradient(120deg, #0a3d8c 0%, #04307b 100%); }
.s-hero-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 9999px; background: var(--s-blue); }
/* 히어로 상단 행(브랜드+검색) — 4개 화면 높이 통일. 검색창 유무로 자연 높이가 갈리므로 둘 다보다 큰 값을 최소 높이로 준다.
   탭바까지 늘어나지 않도록 .s-hero 가 아닌 안쪽 행에 건다 */
.s-hero-top { min-height: 9rem; }
/* 히어로 검색 인풋 — 반투명 흰 박스 + 흰 글자(우측 돋보기 버튼 자리 pr 확보) */
.s-hero-search { width: 100%; height: 2.5rem; padding: 0 3rem 0 1rem; border: 0; border-radius: 0.75rem; font-size: 0.875rem; color: #fff; background: rgba(255, 255, 255, .20); outline: none; }
.s-hero-search::placeholder { color: rgba(255, 255, 255, .7); }
/* 히어로 하단 탭바 + 탭. 활성은 .is-active 토글 — JS 다중 클래스 토글 대신 단일 클래스
   활성 표시는 글자색·굵기만 — 밑줄 없음(디자이너 요청) */
/* min-height: 탭 한 줄 높이 선확보 — JS 렌더 전 빈 바가 0 으로 붕괴했다 늘어나는 로딩 점프(CLS) 방지 */
.s-hero-tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; min-height: 2.75rem; padding: 0.25rem 1.5rem; background: #144faa; }
.s-hero-tab { white-space: nowrap; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, .7); cursor: pointer; }
.s-hero-tab:hover { color: #fff; }
.s-hero-tab.is-active { color: #fff; font-weight: 700; }

/* 목록 흰 카드(뉴스·게시판 목록 박스) — 안쪽 패딩은 페이지 유틸 */
.s-list-card { border-radius: 1.5rem; border: 1px solid #DBDEE8; background: #fff; }
/* 상세 카드(뉴스·게시물 상세) — 안쪽 패딩은 페이지 유틸(p-6 sm:p-10) */
.s-article-card { border-radius: 1rem; border: 1px solid #e2e8f0; background: #fff; }
/* 은은한 카드 그림자(상세 카드·언론사 프로모 공용) */
.s-soft-shadow { box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .06); }
/* 파랑 '목록으로' 버튼(상세 하단) */
.s-list-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 700; color: #fff; background: var(--s-blue); cursor: pointer; }
.s-list-btn:hover { filter: brightness(1.05); }
/* 공유 버튼(뉴스 상세) — 원형 아이콘 버튼. 브랜드 글리프(f·N)는 각 버튼 내부에서 색 지정 */
.s-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; transition: background-color .15s, color .15s; }
.s-share-btn:hover { background: #f8fafc; color: #0f172a; }

/* s-prose: 저장된 리치 본문(markdown/HTML)을 렌더한 영역의 타이포 복구.
   Tailwind preflight 가 기본 태그 스타일을 리셋하므로, 제목/목록/코드/인용/표만 최소로 되살림.
   게시글·약관 본문 등 "사람이 읽는 글" 컨테이너에 부여. (s- = icube 사이트 전용) */
.s-prose { line-height: 1.7; overflow-wrap: break-word; }
.s-prose > :first-child { margin-top: 0; }
.s-prose > :last-child { margin-bottom: 0; }
.s-prose h1 { font-size: 1.75rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.s-prose h2 { font-size: 1.5rem; font-weight: 700; margin: 1.4rem 0 0.7rem; }
.s-prose h3 { font-size: 1.25rem; font-weight: 600; margin: 1.3rem 0 0.6rem; }
.s-prose h4 { font-size: 1.1rem; font-weight: 600; margin: 1.2rem 0 0.5rem; }
.s-prose h5, .s-prose h6 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.s-prose p { margin: 0.75rem 0; }
.s-prose ul, .s-prose ol { margin: 0.75rem 0; padding-left: 1.5rem; }
.s-prose ul { list-style: disc; }
.s-prose ol { list-style: decimal; }
.s-prose li { margin: 0.25rem 0; }
.s-prose a { color: #2563eb; text-decoration: underline; }
/* 뉴스 본문만 링크를 평문처럼 — 피드 HTML 의 a 태그가 인라인 style 을 갖고 있어 밑줄은 !important 아니면 안 지워진다 */
.s-prose[data-ename="newsCn"] a { color: inherit; text-decoration: none !important; }
.s-prose blockquote { margin: 1rem 0; padding: 0.25rem 1rem; border-left: 4px solid #d1d5db; color: #4b5563; }
.s-prose code { background: #f3f4f6; padding: 0.1rem 0.3rem; border-radius: 0.25rem; font-size: 0.9em; }
.s-prose pre { background: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; }
.s-prose pre code { background: none; padding: 0; }
.s-prose img { max-width: 100%; height: auto; }
.s-prose hr { margin: 1.5rem 0; border-top: 1px solid #e5e7eb; }
/* 본문 표: 화면보다 넓으면 그 표만 가로 스크롤(래퍼 없이 표 자체를 스크롤 박스로 — 본문은 작성자 HTML이라 마크업 못 건드림). 모바일 표 넘침 대응 */
.s-prose table { border-collapse: collapse; margin: 1rem 0; display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.s-prose th, .s-prose td { border: 1px solid #d1d5db; padding: 0.4rem 0.6rem; }
.s-prose th { background: #f9fafb; font-weight: 600; }

/* 메인 팝업(pop classes 옵션으로 .s-main-popup 부여) — 파랑 헤더 + 고스트 버튼.
   헤더 배경은 이보다 밝게 못 간다 — 흰 글씨 기준 #2f6fe4 가 WCAG AA(4.5:1) 경계다(4.65:1).
   더 밝히려면 글씨를 진한 색으로 바꿔야 한다. */
._dialog.s-main-popup {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 18px 56px rgb(15 23 42 / 0.20);   /* 알림창보다 넓게 — 배경 위에 떠 있는 느낌 */
	overflow: hidden;                        /* 그라디언트 헤더가 라운드 모서리 밖으로 삐져나오지 않게 */
}
._dialog.s-main-popup .ui-dialog-titlebar {
	gap: 0.625rem;
	padding: 0.85rem 1rem;
	background: linear-gradient(180deg, #4a90f0 0%, #4181e9 100%);
	border-bottom: 0;
	color: #fff;                             /* 제목·닫기(X) 가 함께 상속 */
}
._dialog.s-main-popup .ui-dialog-title { font-size: 1rem; }
._dialog.s-main-popup .ui-dialog-titlebar-close { opacity: 0.85; }
._dialog.s-main-popup .ui-dialog-content { padding: 1.5rem; }

/* 버튼줄 — 둘 다 우측(오늘 하루 보지 않기 · 닫기 순) */
.s-main-popup-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #eef1f5;
}
.s-main-popup-btn {
	padding: 0.5em 1.1em;
	border: 1px solid #e5e7eb;
	border-radius: 9px;
	background: #fff;
	color: #64748b;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}
.s-main-popup-btn:hover { background: #f8fafc; }
.s-main-popup-btn-primary { border-color: #bfdbfe; color: #2563eb; }
.s-main-popup-btn-primary:hover { background: #eff6ff; }

/* s-auth-*: 인증 공개폼(로그인·아이디/비번찾기·재설정) 전용 톤 — 디자인 시안의 크고 둥근 입력 + 다크 버튼.
   클래스명에 auth 가 박혀 용도가 자명(다른 화면에서 오용될 일 없음). 같은 톤 필요하면 그 폼에 s-auth-* 를 그대로 재사용.
   주: tailwind.css(먼저) → site.css(나중) 로드라 site 가 유틸을 덮음 → 비번 토글 패딩 등은 여기서 처리. */
.s-auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.s-auth-label { display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; font-weight: 600; color: #475569; }
.s-auth-input { width: 100%; min-height: 3.75rem; padding: 0 1.25rem; border: 1px solid #ddd; border-radius: 1rem; background: #fff; font-size: 1.0625rem; }
.s-auth-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 4px rgb(59 130 246 / 0.1); }
.s-auth-input.s-auth-input-pw { padding-right: 3rem; }   /* 비밀번호 표시토글 아이콘 자리(login) */
.s-auth-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.75rem; border: 0; border-radius: 0.75rem; background: #2c2e33; color: #fff; font-size: 1.0625rem; font-weight: 600; cursor: pointer; }
.s-auth-btn:hover { background: #3a3d44; }
/* 비활성 버튼 시각 피드백 — 전 사이트 공통(admin 은 pcommon3 별도). */
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* 읽기전용 시각 피드백 — 인증 입력(s-auth-input)에 한정. JS el.readOnly=true 가 readonly 속성으로 반영돼 [readonly] 매칭.
   .s-auth-input[readonly](0,2,0)가 .s-auth-input(0,1,0)보다 우선이라 배경/글자색을 덮음.
   (전역 input[readonly] 는 관리자 등 의도적 readonly 표시 필드까지 회색처리하는 부작용이 있어 인증용으로 축소) */
.s-auth-input[readonly] { background: #f1f5f9; color: #64748b; }
/* 입력 옆 보조 버튼(중복확인·인증코드 받기·확인 등) — 아웃라인. flex 행 stretch 로 입력 높이에 맞춰짐. disabled 는 전역 button:disabled 처리. */
.s-auth-btn-side { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 1rem; border-radius: 1rem; border: 1px solid #2f6fe4; background: #fff; color: #2f6fe4; font-weight: 600; cursor: pointer; }
.s-auth-btn-side:hover { background: #eff4fe; }
.s-auth-btn-side-neutral { border-color: #cbd5e1; color: #475569; }   /* 중립 변형(변경/취소 등) */
.s-auth-btn-side-neutral:hover { background: #f8fafc; }
/* 공개폼 헤더(가운데 좁은 폭 래퍼 + 제목/설명) — 4페이지 동일 구조 공통화 */
.s-auth-page { margin-inline: auto; width: 100%; max-width: 30rem; padding-block: 3.5rem; padding-inline: 1rem; }
.s-auth-head { margin-bottom: 2.5rem; text-align: center; }
.s-auth-title { font-size: 38px; font-weight: 700; letter-spacing: -0.025em; color: #0f172a; }
.s-auth-desc { margin-top: 0.75rem; font-size: 0.9375rem; color: #64748b; }
/* 계정찾기 탭 */
.s-find-tab { color: #2f77e5; }
.s-find-tab.is-active { background: #2f77e5; color: #fff; }
/* 폼 영역 — min-height 로 공간 예약(폼 표시 전 레이아웃 점프 방지), 표시될 때 페이드인(초기/탭 전환 공통). 찾기 화면 한정 스코프 */
.s-find-body { min-height: 15rem; }
.s-find-body form { animation: s-fade-in 0.25s ease both; }
@keyframes s-fade-in { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }

/* ===== 알림·확인창 스킨 (시안 A · 미니멀 라인) */

/* 창 껍데기 — 각진 테두리 + 약한 그림자 → 라운드(14px) + 넉넉한 그림자.
   그림자 색으로 종류를 구분한다(알림=주황 / 확인=파랑) — 테두리·배경은 그대로 두어 톤이 튀지 않게. */
._dialog._dialog_alert,
._dialog._dialog_confirm {
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
}
._dialog._dialog_alert   { box-shadow: 0 6px 16px rgb(234 88 12 / 0.13); }
._dialog._dialog_confirm { box-shadow: 0 6px 16px rgb(37 99 235 / 0.13); }

/* 타이틀바 */
._dialog._dialog_alert .ui-dialog-titlebar,
._dialog._dialog_confirm .ui-dialog-titlebar {
	padding: 0.9rem 1.1rem;
	background: #fff;
	border-radius: 14px 14px 0 0;
	border-bottom: 0;
}

/* 본문 */
._dialog_alert .ui-dialog-content,
._dialog_confirm .ui-dialog-content {
	padding: 1.6rem;
}

/* 버튼줄 */
._dialog_alert ._dialog_foot,
._dialog_confirm ._dialog_foot {
	margin-top: 1.4rem;
	padding: 0;
	gap: 0.6rem;
}

/* 버튼 공통 — 조금 크고 둥글게 + 흰 배경 고스트(확인·취소 공통). ✓/✕ 글리프는 미니멀 톤에 맞춰 제거 */
._dialog_alert ._dialog_foot ._button,
._dialog_confirm ._dialog_foot ._button {
	padding: 0.55em 1.3em;
	border-radius: 9px;
	font-weight: 600;
	background-color: #fff;
	border-color: #e5e7eb;
}
._dialog_alert ._dialog_foot ._button::before,
._dialog_confirm ._dialog_foot ._button::before { content: none; }

/* 확인 = 글자색만 파랑(주 액션). hover 의 opacity:1 은 ._button:hover{opacity:.85}(글자 흐려짐) 무효화용 */
._dialog_confirm ._dialog_foot ._confirm { color: #2563eb; }
._dialog_confirm ._dialog_foot ._confirm:hover {
	background-color: #eff6ff;
	border-color: #bfdbfe;
	opacity: 1;
}

/* 취소·닫기 = 회색 글자 */
._dialog_alert ._dialog_foot ._close,
._dialog_confirm ._dialog_foot ._close { color: #475569; }
._dialog_alert ._dialog_foot ._close:hover,
._dialog_confirm ._dialog_foot ._close:hover {
	background-color: #f8fafc;
	opacity: 1;
}