@charset "utf-8";
/************************************************************************
 * filename     : ui.css
 * description  : 명성인터내셔날 UI style CSS
 * date         : 2025.10.20
************************************************************************/

/* ===== [공통] Design ICON ===== */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

/* ===== [공통] Design Tokens ===== */
:root {
    --container: 1200px;
    --space: clamp(16px, 2.5vw, 28px);
    --radius: 16px;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --primary: #004794; /* Main Blue */
    --accent: #ee0000; /* Accent Red */
    --bg-soft: #f8fafc;
    --shadow: 0 6px 22px rgba(17, 24, 39, .08);
}

html,
body {
    height: 100%;
}

/*===== BASE =====*/
*, ::before, ::after{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0; padding:0;
}
*{
    box-sizing: border-box;
    margin:0; padding:0;
    vertical-align: baseline;
    list-style: none;
}
img{
    max-width: 100%;
    height: auto;
}
address{
    font-style: normal;
    display:inline-block;
    vertical-align: baseline;
}
strong{
    color: inherit;
    font-weight:600;
}
hr{
    display:none;
    position: absolute;
    clip: rect(0 0 0 0);
    width: 0px;
    height: 0px;
    margin: 0px;
    overflow: hidden;
}
.sr-only{
    position: absolute !important;
    width: 0px !important;
    height: 0px !important;
    margin: 0px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.mobile-view{
    display:none;
}
.pc-view{
    display:inline-block;
}

/*===== BUTTON =====*/
button{
    border:0 none;
    background: none;
    outline:0;
    cursor: pointer;
}
a{
    text-decoration: none;
    outline:0;
    cursor: pointer;
    color: inherit
}
.btn{
    display: inline-block;
    padding: .4rem .5rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #1F2330;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid #D7DCE5;
    border-radius: 3px;
    background-color: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover,
.btn:focus{
    filter: brightness(1.1);
}
.btn i{
    color:inherit;
}
.btn-container{
    display:flex;
}
.btn-container .btn{
    margin-right:10px;
}
.btn-container .btn:last-child{
    margin-right:0;
}
.btn-container .btn-lg{
    width:100%;
    height:45px;
}
.btn.btn-xs{
    padding:.3rem .4rem;
    font-size:1.2rem;
}
.btn.btn-sm{
    padding: .35rem .45rem;
    font-size:1.4em;
}
.btn.btn-md{
    padding: .4rem .5rem;
    font-size:1.6rem;
}
.btn.btn-lg{
    padding: .45rem .55rem;
    font-size:1.8rem;
}
.btn-default{ /* 기본 버튼 */
    background: #ffffff;
    border: 1px solid #D7DCE5;
}
.btn-default:hover,
.btn-default:focus{
    background-color: #f9f9f9;
    border: 1px solid #D7DCE5;
    filter: brightness(1.1);
}