@charset 'utf-8';
/**
 * base.css — 한맥 사이트 기반 (reset + fonts + tokens + utility)
 * ──────────────────────────────────────────────────────────────────
 * 통합 (2026-06-09): reset.css + font.css 흡수, gothic_a1 dead 정리.
 *   - @import (CDN 폰트) 는 CSS 스펙상 @charset 다음 위치
 *   - reset → tokens(:root) → utility 순
 * 로드 순서: base → layout → components → pages/*.css
 * ──────────────────────────────────────────────────────────────────
 */

/* Pretendard — jsdelivr CDN (orioncactus 공식) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* 서강체 (눈누 CDN) */
@font-face {
    font-family: 'Seongang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/SOGANGUNIVERSITYTTF.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* COLOR · 브랜드 (2026 새 팔레트, hanmac-2026.md §4) */
  --color-hm-cream:      #F1E9DD;   /* 메인 배경 */
  --color-hm-green:      #00513B;   /* 강조 / GNB / CTA */
  --color-hm-dark-green: #003D28;   /* 텍스트 / Footer */
  --color-hm-gold:       #C07712;   /* CTA / 강조 */

  /* COLOR · 시맨틱 (브랜드 의미별 매핑 — 컴포넌트에서 우선 사용) */
  --color-bg:         var(--color-hm-cream);
  --color-text:       var(--color-hm-dark-green);
  --color-text-muted: rgba(0, 61, 40, 0.6);
  --color-primary:    var(--color-hm-green);
  --color-accent:     var(--color-hm-gold);

  /* COLOR · 그레이 스케일 (form / body / link 등 무채색 계열) */
  --gray-300: #d7d7d7;      /* form border (input) */
  --gray-400: #bbbbbb;      /* form border (textarea, soft) */
  --gray-700: #424242;      /* link default (<a>) */
  --gray-800: #373737;      /* body text default */

  /* LAYOUT */
  --gnb-height: 90px;       /* PC GNB top bar 높이 (.menu_wrap height) */
  --banner-height: 0px;     /* 배너 열림 시 inc/banner.php 가 override */
  --page-gutter: 6.25vw;    /* 좌우 여백 — 1920:120 / 1440:90 / 1024:64 / 768:48 / 375:23 */
  --section-pad-y: 6.25vw;  /* 위아래 여백 — 좌우와 동일 비율 */
}

/* 모바일/태블릿 — GNB 높이만 점프 (햄버거 ↔ 풀메뉴 전환이라 불가피) */
@media (max-width: 1024px) {
  :root { --gnb-height: 53px; }
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *:before, *:after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { min-height: 100%; }   /* height:100% 는 sticky 차단. min-height 로 fallback */
body { position: relative; min-width: 320px; overflow-x: clip; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--gray-800); -webkit-text-size-adjust: none; -webkit-tap-highlight-color: transparent; }
em, address { font-style: normal; }
ul, ol, dl { list-style: none; margin: 0; }   /* Bootstrap reboot 의 ul/ol/dl margin-bottom: 1rem 차단 */
p { word-break: keep-all; }
a { color: var(--gray-700); background: transparent; text-decoration: none; }
img { max-width: 100%; border: 0; vertical-align: middle; }
img, video, audio, object, embed, iframe { max-width: 100%; width: 100%; }
input, button, select, textarea { font: inherit; }

/* ── 폼 요소 (디자인 룰 — 새 시스템 도입 시 components.css 로 이전 검토) ── */
input[type=text], input[type=password], input[type="reset"], input[type="submit"], input[type=date], input[type=time], input[type=number] { border: 1px solid var(--gray-300); border-radius: 0; }
input[type=text], input[type=number] { height: 50px; line-height: 50px; font-size: 0.9em; padding: 5px 10px; border: 0; background: var(--color-hm-green); color: #fff; vertical-align: middle; }
textarea { overflow-y: auto; width: 100%; padding: 10px; border: 1px solid var(--gray-400); outline: 0; }
button, select, input[type="radio"], input[type="checkbox"] { border: 0; border-radius: 0; }
input::placeholder, textarea::placeholder { color: #fff; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; color: #fff; font-size: 0.9em; background: var(--color-hm-green) url('/resources/images/common/sel_arrow.svg') right 12px center/10px 6px no-repeat; padding: 0 26px 0 10px; height: 50px; line-height: 50px; }
input[type="checkbox"] { width: 20px; height: 20px; margin: 0 5px 0 0; display: inline-block; background: url('/resources/images/common/checkbox_off.svg') center/20px 20px no-repeat; vertical-align: middle; cursor: pointer; -webkit-appearance: none; appearance: none; }
input[type="checkbox"]:checked { background-image: url('/resources/images/common/checkbox_on.svg'); }
input[type="radio"] { width: 20px; height: 20px; margin: 0 5px 0 0; display: inline-block; background: url('/resources/images/common/radio_off.svg') center/20px 20px no-repeat; vertical-align: middle; cursor: pointer; -webkit-appearance: none; appearance: none; }
input[type="radio"]:checked { background-image: url('/resources/images/common/radio_on.svg'); }

/* ── 테이블 ── */
table { border-collapse: collapse; border: 0; table-layout: fixed; width: 100%; }
table th, table td { padding: 0; word-wrap: break-word; }

/* ── Utility ──────────────────────────────────────────────────── */
/* a11y — 스크린리더만 읽고 시각적으로 숨김 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ══════════════════════════════════════════════════════════════════════
 *  OneTrust Cookie Consent (GTM 로드) override
 *  ----------------------------------------------------------------------
 *  OneTrust SDK 가 동적으로 만드는 #onetrust-* DOM 을 한맥 톤에 맞춰 override.
 *  사이즈 축소 + 크림/다크그린 톤. 셀렉터는 SDK 표준 ID 라 변경 안 됨.
 *  ====================================================================== */

/* ── 하단 배너 (#onetrust-banner-sdk) ── */
#onetrust-consent-sdk #onetrust-banner-sdk { background: var(--color-hm-cream) !important; color: var(--color-hm-dark-green) !important; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12) !important; font-family: 'Pretendard', sans-serif !important; }
#onetrust-consent-sdk #onetrust-policy-title { color: var(--color-hm-dark-green) !important; font-size: 16px !important; font-weight: 600 !important; }
#onetrust-consent-sdk #onetrust-policy-text,
#onetrust-consent-sdk #onetrust-policy-text * { color: var(--color-hm-dark-green) !important; font-size: 13px !important; line-height: 1.5 !important; }
#onetrust-consent-sdk #onetrust-policy-text a { color: var(--color-hm-green) !important; text-decoration: underline !important; }

/* ── 배너 버튼 (#onetrust-button-group) ── */
#onetrust-consent-sdk #onetrust-button-group button,
#onetrust-consent-sdk .ot-sdk-container button { min-height: 40px !important; padding: 10px 20px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.2px !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
#onetrust-consent-sdk #onetrust-accept-btn-handler { background: var(--color-hm-green) !important; color: #fff !important; border: 0 !important; }
#onetrust-consent-sdk #onetrust-accept-btn-handler:hover { background: var(--color-hm-dark-green) !important; transform: translateY(-1px) !important; }
#onetrust-consent-sdk #onetrust-reject-all-handler,
#onetrust-consent-sdk #onetrust-pc-btn-handler { background: transparent !important; color: var(--color-hm-dark-green) !important; border: 1.5px solid rgba(0, 61, 40, 0.3) !important; }
#onetrust-consent-sdk #onetrust-reject-all-handler:hover,
#onetrust-consent-sdk #onetrust-pc-btn-handler:hover { background: rgba(0, 61, 40, 0.06) !important; }

/* ── 닫기 X ── */
#onetrust-consent-sdk #onetrust-close-btn-container button { color: var(--color-hm-dark-green) !important; opacity: 0.6 !important; }
#onetrust-consent-sdk #onetrust-close-btn-container button:hover { opacity: 1 !important; }

/* ── Preference Center 모달 (#onetrust-pc-sdk) ── */
#onetrust-consent-sdk #onetrust-pc-sdk { background: var(--color-hm-cream) !important; color: var(--color-hm-dark-green) !important; border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important; font-family: 'Pretendard', sans-serif !important; max-width: 540px !important; }
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc{color: var(--color-hm-dark-green) !important}
#onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-header,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-footer { background: var(--color-hm-cream) !important; border-color: rgba(0, 61, 40, 0.15) !important; }
#onetrust-consent-sdk #onetrust-pc-sdk h2,
#onetrust-consent-sdk #onetrust-pc-sdk h3,
#onetrust-consent-sdk #onetrust-pc-sdk h4,
#onetrust-consent-sdk #onetrust-pc-sdk h5,
#onetrust-consent-sdk #onetrust-pc-sdk p,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-cat-header,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-category-desc { color: var(--color-hm-dark-green) !important; }
#onetrust-consent-sdk #onetrust-pc-sdk a { color: var(--color-hm-green) !important; }

/* ── 카테고리 토글 (Active 그린) ── */
#onetrust-consent-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob { background-color: var(--color-hm-green) !important; border-color: var(--color-hm-green) !important; }
#onetrust-consent-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob::before { background-color: #fff !important; border-color: #fff !important; }

/* ── 플로팅 아이콘 (좌측 하단, 바텀네비 위) ── */
#ot-sdk-btn-floating.ot-floating-button { bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important; left: 6px !important; }
/* 평소엔 작고 반투명, hover/focus 시 원래 크기 */
#ot-sdk-btn-floating,
.ot-floating-button { opacity: 0.7 !important; transform: scale(0.6) !important; transform-origin: bottom left !important; transition: opacity 0.3s ease, transform 0.3s ease !important; }
#ot-sdk-btn-floating:hover,
#ot-sdk-btn-floating:focus,
#ot-sdk-btn-floating:focus-within,
.ot-floating-button:hover,
.ot-floating-button:focus,
.ot-floating-button:focus-within { opacity: 1 !important; transform: scale(1) !important; }

/* ── 모바일 (배너 더 작게) ── */
@media (max-width: 768px) {
  #onetrust-consent-sdk #onetrust-banner-sdk { padding: 16px !important; }
  #onetrust-consent-sdk #onetrust-policy-title { font-size: 14px !important; }
  #onetrust-consent-sdk #onetrust-policy-text,
  #onetrust-consent-sdk #onetrust-policy-text * { font-size: 12px !important; }
  #onetrust-consent-sdk #onetrust-button-group button { min-height: 36px !important; padding: 8px 14px !important; font-size: 13px !important; }
  #onetrust-consent-sdk #onetrust-pc-sdk { max-width: 92vw !important; max-height: 86vh !important; }
  #ot-sdk-btn-floating:hover,
#ot-sdk-btn-floating:focus,
#ot-sdk-btn-floating:focus-within,
.ot-floating-button:hover,
.ot-floating-button:focus,
.ot-floating-button:focus-within { transform: scale(0.6) !important; }
}