@charset "utf-8";
/* ============================================================
 *  base.css — 기본 태그 초기화 (reset / normalize)
 *  기존 common.css(33KB) 에서 "태그 초기화" 부분만 추려 정리했습니다.
 *  나머지 2,200여 줄은 사이트별 컴포넌트라 가져오지 않았습니다.
 *
 *  로드 순서:  bootstrap.min.css → base.css → header/sub/footer.css → utility.css
 *  ── 폰트는 아래 :root 의 --font-base 만 바꾸면 사이트 전체에 반영됩니다.
 * ============================================================ */

:root {
	/* 폰트 — 웹폰트는 inc/title.php 에서 CDN 으로 불러옵니다.
	   'Pretendard Variable' = 웹폰트로 받아온 가변 폰트 (모든 방문자에게 동일하게 보임)
	   'Pretendard'          = PC 에 폰트가 설치돼 있으면 그걸 사용 (웹폰트 실패 시 대비)
	   뒤쪽은 웹폰트를 못 받았을 때의 OS 기본 한글 글꼴입니다. */
	--font-base: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;

	/* 기본 타이포 */
	--text-color: #222;
	--text-size:  18px;
	--text-lh:    1.6;

	/* 폼 */
	--placeholder: #b6b6b6;
	--line-color:  #dddddd;
}


/* ------------------------------------------------------------
 * 1. 문서 기본
 * ------------------------------------------------------------ */
html {
	font-size: 10px;                       /* rem 기준값: 1rem = 10px */
	scroll-behavior: smooth;               /* 앵커 이동 시 부드럽게 */

	/* 가로 스크롤 방지 — html 에도 반드시 함께 걸어야 합니다. ⚠ 지우지 마세요.
	   body 에만 걸면 PC 브라우저에서는 막히지만, 모바일 사파리(iOS)에서는
	   손가락으로 옆으로 미는 동작이 그대로 남아 화면이 좌우로 흔들립니다. */
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-base);
	font-size: var(--text-size);
	line-height: var(--text-lh);
	color: var(--text-color);
	word-break: keep-all;                  /* 한글 단어 중간에서 줄바꿈 방지 */
	overflow-x: hidden;                    /* 가로 스크롤 방지 (위 html 과 한 쌍) */
}


/* ------------------------------------------------------------
 * 2. 링크
 * ------------------------------------------------------------ */
a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus {
	color: inherit;
	text-decoration: none;
	outline: 0;
	transition: all .2s ease-in 0s;
}


/* ------------------------------------------------------------
 * 3. 제목 · 문단
 * ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;                             /* 브라우저·부트스트랩이 붙이는 기본 여백 제거 */
}

p {
	font-family: inherit;
	margin: 0;
}

blockquote, address, pre { margin: 0; }

address { font-style: normal; }

b, strong { font-weight: 700; }


/* ------------------------------------------------------------
 * 4. 목록 — 브라우저 기본 불릿·들여쓰기 제거
 * ------------------------------------------------------------ */
ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

li { list-style: none; }

dl, dt, dd {
	margin: 0;
	padding: 0;
}


/* ------------------------------------------------------------
 * 5. 이미지 · 미디어
 * ------------------------------------------------------------ */
img {
	border: 0;
	max-width: 100%;
	vertical-align: top;
	display: inline-block;
	image-rendering: -webkit-optimize-contrast;   /* 축소 시 선명하게 */
}

figure { margin: 0; }

iframe, video {
	max-width: 100%;
	border: 0;
}


/* ------------------------------------------------------------
 * 6. 표
 * ------------------------------------------------------------ */
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	vertical-align: middle;
}

th, td {
	padding: 0;
	vertical-align: middle;
}

/* 표 제목(caption) 은 디자인상 화면에 내보내지 않습니다.
   다만 display:none 으로 "지우면" 화면낭독기에서도 사라져, 표에 들어섰을 때
   무슨 표인지 알 수 없게 됩니다. 그래서 숨기더라도 아래 .blind 를 함께 쓰고,
   그때는 caption.blind 규칙(10번 항목)이 display 를 되살립니다.
        <caption class="blind">2026 푸르메런 대회 요강 …</caption>
   ⚠ AM솔루션 게시판·신청폼의 caption 은 css/am-guard.css 에서 따로 되살립니다. */
caption { display: none; }


/* ------------------------------------------------------------
 * 7. 구분선
 * ------------------------------------------------------------ */
hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid #eeeeee;
}


/* ------------------------------------------------------------
 * 8. 폼 요소
 * ------------------------------------------------------------ */
input, textarea, button, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin: 0;
	border-radius: 0;
}

/* 브라우저·부트스트랩이 붙이는 기본 여백만 제거 (테두리는 건드리지 않습니다) */
label { margin: 0; }

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	margin: 0;
	padding: 0;
}

input:focus,
textarea:focus,
select:focus { outline: none; }

button {
	cursor: pointer;
	border: none;
	outline: none;
	background: none;
}

button:active,
button:focus {
	border: none;
	outline: none;
}

textarea { resize: vertical; }

/* iOS 에서 입력창이 둥글게 변형되는 것 방지
   ※ submit·button 은 일부러 제외했습니다.
     AM 프로그램의 버튼 외형까지 없애버릴 수 있어서입니다. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

/* 안내문구 색상 */
input::placeholder,
textarea::placeholder {
	color: var(--placeholder);
	opacity: 1;                            /* 파이어폭스에서 흐리게 나오는 현상 방지 */
}

/* 입력 시작하면 안내문구 숨김 */
input:focus::placeholder,
textarea:focus::placeholder { color: transparent; }


/* ------------------------------------------------------------
 * 9. 레이아웃 — .container
 *    부트스트랩을 쓰지 않으므로 여기서 직접 정의합니다.
 *    섹션별로 더 좁게 쓰려면 그쪽에서 max-width 만 덮어쓰면 됩니다.
 *      예) .sec_pd .container { max-width: 1170px; }
 * ------------------------------------------------------------ */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}


/* ------------------------------------------------------------
 * 10. 접근성 — 화면에는 안 보이지만 스크린리더는 읽는 텍스트
 * ------------------------------------------------------------ */
.blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* caption 에 .blind 를 쓸 때는 display 를 되살려야 합니다 — ⚠ 지우지 마세요.
   위 6번의 caption { display: none } 이 그대로 이기면 화면낭독기에서도
   표 이름이 사라집니다. (실제로 유의사항·개인정보처리방침 표의 caption 이
   적혀 있는데도 읽히지 않고 있었습니다) */
caption.blind { display: table-caption; }


/* ------------------------------------------------------------
 * 11. 키보드 초점 표시 — ⚠ 지우지 마세요
 *
 *   위쪽 5·6번에서 a / button / input 의 outline 을 지우고 있습니다.
 *   마우스로 눌렀을 때 테두리가 남는 걸 막으려는 것인데, 그대로 두면
 *   키보드(Tab)로 이동할 때 지금 어디에 있는지 화면에 전혀 표시되지 않습니다.
 *
 *   :focus-visible 은 "키보드로 이동했을 때만" 걸리는 선택자라
 *   마우스 클릭에는 테두리가 생기지 않습니다. 둘 다 만족합니다.
 *   ※ 위 규칙들과 특이도가 같으므로 반드시 이 파일 "뒤쪽"에 있어야 합니다.
 * ------------------------------------------------------------ */
/*  ▼ 초점 테두리는 "두 겹" 입니다 — ⚠ 한 가지 색으로 되돌리지 마세요.
 *
 *  이 사이트는 흰 배경 · 파란 버튼 · 남색 헤더가 섞여 있어서
 *  한 가지 색으로는 어느 한 곳에서 반드시 사라집니다. (실제 측정값)
 *
 *      링 색      남색 헤더   흰 배경   파란 버튼   파란 섹션
 *      #0076d7      4.1        4.6       1.0 ✘      1.1 ✘
 *      #ffffff     18.8        1.0 ✘     4.6        4.0
 *      #111111      1.0 ✘     18.9       4.1        4.7
 *
 *  그래서 안쪽에 흰 링(box-shadow), 바깥에 검정 링(outline)을 겹쳐 둡니다.
 *  어떤 배경이든 둘 중 최소 한 쪽이 4:1 이상으로 또렷하게 보입니다.
 *
 *  ※ box-shadow 를 지우면 파란 버튼 위에서 초점이 안 보입니다.
 *  ※ outline 을 지우면 흰 배경 위에서 초점이 안 보입니다.
 *  ※ 초점 요소를 감싼 상자에 overflow:hidden 이 있으면 이 두 링이 잘립니다.
 *    (코스도 10K/3K 탭에서 실제로 그런 일이 있었습니다 — css/main.css .sec05 .tab)
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #111111;
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #ffffff;
}