/* reset.css */
* {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-drag: none; /* 이미지/텍스트 드래그 방지(선택) */
}

html {
    font-size: 62.5%; /* 1rem = 10px */
    scroll-behavior: smooth; /* 스크롤 부드럽게 */
}

body {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width:330px;
    font-family: 'SUIT Variable', sans-serif;
    line-height: 1.2;
    font-size: 1.6rem;
    color: var(--color-333);
    background-color: var(--white);
    word-break: keep-all;
    overflow-x: hidden;
}
#contents {
    flex: 1;
}

header, footer, section, article, aside, nav, main, details, menu, figure, figcaption, video {display:block;}
table {border-collapse:collapse;border-spacing:0;word-wrap:break-word;word-break:break-all;}
table th, table td {text-align:center;vertical-align:middle;font-weight:normal;font-family: 'SUIT Variable';}
ol, ul, li {list-style: none outside none;}
a {text-decoration:none; color:#333}
a:hover, a:visited {text-decoration:none;}
button{border:0;background:none;cursor:pointer;padding:0;font-family: 'SUIT Variable';}
button span{position:relative;font-family: 'SUIT Variable';}
select{font-family: 'SUIT Variable';}
select:focus{outline: 2px solid #000;}
img {border:0 none; max-width:100%;}
form input, form select, form label, form img {vertical-align: middle;}
fieldset {border: 0 none;}
address {font-style: normal;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
iframe {margin: 0; padding: 0;}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}
fieldset legend ,
table caption {display:inline-block;width:0;height:0;overflow:hidden;line-height:0;color:transparent;position:absolute;top:0;left:-99999px;}

textarea{font-family: 'SUIT Variable';color:#333;border:1px solid #dadada;-webkit-appearance: none;-moz-appearance: none;-webkit-border-radius: 0;}
textarea.ctextarea{width:100%;height:260px;padding:13px;font-size:17px;color:#222;border-radius:7px;box-sizing: border-box;resize: none;}


input:focus + label{  outline: 1.5px solid #000; }
::-webkit-input-placeholder{color:#bbb;font-family: 'SUIT Variable';}
::-moz-input-placeholder{color:#bbb;font-family: 'SUIT Variable';}
:-ms-input-placeholder{color:#bbb !important;font-family: 'SUIT Variable';}
::-ms-input-placeholder{color:#bbb !important;font-family: 'SUIT Variable';}
::input-placeholder{color:#bbb;font-family: 'SUIT Variable';}


/* 스크롤바를 숨기고 싶다면 display:none 보다는 투명하게 처리하는 편이 안전합니다 */
body::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

img { max-width: 100%; height: auto; display: block; border: 0; }
ul, li { list-style: none; }
li::marker { display: none; }
a { text-decoration: none; color: inherit; display: inline-block; } /* 영역 확보를 위해 inline-block 추천 */
button { border: none; background: none; cursor: pointer; font-family: inherit; }

/* 버튼, 인풋 등 폼 요소 폰트 상속 및 기본 스타일 제거 */
input, button, select, textarea {
    font-family: inherit; /* 부모(body)의 SUIT Variable 폰트 상속 */
    font-size: inherit;
    color: inherit;
    border: 0;
    background-color: transparent;
    outline: none; /* 클릭 시 생기는 기본 테두리 제거 */
    -webkit-appearance: none; /* iOS 아이폰 기본 스타일 제거 */
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* iOS 기본 라운딩 제거 */
}

/* 1. 기본 아웃라인 제거 및 커스텀 스타일 설정 */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    position: relative;
    z-index: index 5;; 
}

/* 2. 접근성 포커스 링 (Focus Ring) - 고대비 스타일 */
/* 배경이 어두운 곳과 밝은 곳 모두 대응하기 위해 이중 보더(2px 흰색 + 2px 유채색) 권장 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:2px solid #333; /* 브랜드 컬러 활용 */
    border-radius: 2px;
}


/* 텍스트 영역 리사이즈 제한 (디자인 깨짐 방지) */
textarea { resize: none; vertical-align: top; }

/* 체크박스나 라디오 버튼은 appearance: none 후에 별도 디자인을 입히는 경우가 많음 */
input[type="checkbox"], input[type="radio"] {
    appearance: auto; /* 기본 모양을 유지하고 싶다면 auto, 직접 디자인한다면 none */
    cursor: pointer;
}

/* 인풋의 X 버튼이나 숫자 조절 화살표 제거 (선택 사항) */
input::-ms-clear, input::-ms-reveal { display: none; }
input::-webkit-inner-spin-button, 
input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* 플레이스홀더 색상 통일 */
input::placeholder, textarea::placeholder {
    color: var(--color-ccc);
    opacity: 1; /* 파이어폭스에서 투명도 차이 방지 */
}


/* 2. IR 기법 (Image Replacement) - 텍스트 숨기기 */
/* 로고나 아이콘 등 이미지만 보이고 텍스트는 스크린 리더만 읽게 할 때 사용 */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
}