@charset "utf-8";

/* ============================================
   창원대 홍보원 디자인 시스템 (Design System)
   피그마 디자인 기반 기본 컴포넌트 정의
   ============================================ */

/* ============================================
   초기화 및 기본 설정
   ============================================ */
html {overflow-y:scroll}
body {
    margin:0;
    padding:0;
    font-size:0.75em;
    font-family:'Pretendard', 'Malgun Gothic', dotum, sans-serif;
    background:#fff;
    color:#000;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, dl, dt, dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Pretendard', 'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}
textarea, select {font-family:'Pretendard', 'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.sound_only {display:none}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}


input[type=text], input[type=password], textarea {
    -webkit-transition:all 0.30s ease-in-out;
    -moz-transition:all 0.30s ease-in-out;
    -ms-transition:all 0.30s ease-in-out;
    -o-transition:all 0.30s ease-in-out;
    transition:all 0.30s ease-in-out;
    outline:none;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
    -webkit-box-shadow:0 0 5px #9ed4ff;
    -moz-box-shadow:0 0 5px #9ed4ff;
    box-shadow:0 0 5px #9ed4ff;
    border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* ============================================
   디자인 토큰 - 색상 (Color Tokens)
   ============================================ */
:root {
    /* Primary Colors */
    --color-primary: #003179;
    --color-primary-02: #0046ac;
    --color-primary-bg: #f1f3f7;
    --color-primary-bg02: #e9ecff;
    
    /* Neutral Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey-100: #f9f9f9;
    --color-grey-200: #f2f2f2;
    --color-grey-400: #dddddd;
    --color-grey-500: #7b7b7b;
    --color-grey-700: #2a2e33;
    
    /* Semantic Colors */
    --color-warning: #ff0004;
    --color-divider: #e9e9e9;
    
    /* Text Colors */
    --text-headline: #000000;
    --text-paragraph: #000000;
    --text-link-1: #000000;
    --text-link-2: #ffffff;
}

/* ============================================
   타이포그래피 (Typography)
   ============================================ */

/* H1 - Header 1 */
h1, .h1 {
    font-family:'Pretendard', sans-serif;
    font-weight:800; /* ExtraBold */
    font-size:80px;
    line-height:1.1;
    letter-spacing:-1.6px;
    text-transform:uppercase;
    color:var(--text-headline);
    margin:0;
    padding:0;
}

/* H2 - Header 2 */
h2, .h2 {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:64px;
    line-height:1;
    letter-spacing:-1.28px;
    text-transform:uppercase;
    color:var(--text-headline);
    margin:0;
    padding:0;
}

/* H3 - Header 3 */
h3, .h3 {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:44px;
    line-height:1.1;
    letter-spacing:-0.88px;
    text-transform:uppercase;
    color:var(--text-headline);
    margin:0;
    padding:0;
}

/* H4 - Header 4 */
h4, .h4 {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:36px;
    line-height:1.16;
    letter-spacing:-0.36px;
    text-transform:uppercase;
    color:var(--text-headline);
    margin:0;
    padding:0;
}

/* H5 - Header 5 */
h5, .h5 {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:24px;
    line-height:1.2;
    letter-spacing:0;
    text-transform:uppercase;
    color:var(--text-headline);
    margin:0;
    padding:0;
}

/* P1 - Paragraph 1 */
p, .p1 {
    font-family:'Pretendard', sans-serif;
    font-weight:400; /* Regular */
    font-size:20px;
    line-height:1.5;
    letter-spacing:0;
    color:var(--text-paragraph);
    margin:0;
    padding:0;
}

/* P2 - Paragraph 2 */
.p2 {
    font-family:'Pretendard', sans-serif;
    font-weight:400; /* Regular */
    font-size:16px;
    line-height:1.31;
    letter-spacing:0;
    color:var(--text-paragraph);
    margin:0;
    padding:0;
}

/* Label/Paragraph (Small) */
.label, .paragraph-small {
    font-family:'Figtree', sans-serif;
    font-weight:400; /* Regular */
    font-size:12px;
    line-height:1.2;
    letter-spacing:-0.24px;
    color:var(--text-paragraph);
}

/* ============================================
   버튼 컴포넌트 (Button Components)
   ============================================ */

/* BTN1 - Button 1 (Primary) */
.btn-primary, .btn1 {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:16px;
    line-height:1;
    letter-spacing:0;
    text-transform:uppercase;
    
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    background:var(--color-primary);
    color:var(--color-white);
    border:none;
    border-radius:7.246px;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s ease-out;
}

.btn-primary:hover, .btn1:hover {
    background:var(--color-primary-02);
    color:var(--color-white);
    text-decoration:none;
}

.btn-primary:focus, .btn1:focus {
    outline:none;
    box-shadow:0 0 0 3px rgba(0, 49, 121, 0.3);
}

/* BTN2 - Button 2 (Secondary) */
.btn-secondary, .btn2 {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:14px;
    line-height:1;
    letter-spacing:0;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 12px;
    background:var(--color-primary-bg02);
    color:var(--color-black);
    border:none;
    border-radius:7.246px;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s ease-out;
}

.btn-secondary:hover, .btn2:hover {
    background:var(--color-primary-bg);
    color:var(--color-black);
    text-decoration:none;
}

/* Button Outline (Secondary with border) */
.btn-outline {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:16px;
    line-height:1;
    letter-spacing:0;
    text-transform:uppercase;
    
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 17px;
    background:var(--color-white);
    color:var(--color-primary);
    border:1px solid var(--color-primary);
    border-radius:7.246px;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s ease-out;
}

.btn-outline:hover {
    background:var(--color-primary-bg02);
    color:var(--color-primary);
    text-decoration:none;
}

/* Button Warning */
.btn-warning {
    font-family:'Pretendard', sans-serif;
    font-weight:700; /* Bold */
    font-size:16px;
    line-height:1;
    letter-spacing:0;
    text-transform:uppercase;
    
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 16px;
    background:var(--color-white);
    color:var(--color-warning);
    border:1px solid var(--color-warning);
    border-radius:7.246px;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s ease-out;
}

.btn-warning:hover {
    background:var(--color-warning);
    color:var(--color-white);
    text-decoration:none;
}

/* ============================================
   입력 필드 컴포넌트 (Input Components)
   ============================================ */

/* Text Input */
.input-text, .frm_input {
    font-family:'Pretendard', sans-serif;
    font-weight:400; /* Regular */
    font-size:16px;
    line-height:1.31;
    color:var(--color-grey-500);
    padding: 4px;
    width:100%;
    border-radius: 4px;
    border: 1px solid var(--color-grey-500, #f2f2f2);
}