/* ============================================================
   Peta4PL Base — reset · typography · grid · utilities
   Bootstrap 4 클래스 계약을 Hope 디자인으로 재구현
   (JS가 런타임에 생성하는 마크업이 이 클래스들을 사용하므로 이름 유지)
   ============================================================ */

/* ══════════════ Reset ══════════════ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--h-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--h-text);
    background-color: var(--h-bg);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5rem;
    font-family: var(--h-font);
    line-height: 1.35;
    color: var(--h-text);
    letter-spacing: -0.02em;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { margin: 0 0 1rem; }

a {
    color: var(--h-primary);
    text-decoration: none;
    transition: color var(--h-transition);
}
a:hover { color: var(--h-primary-dark); }

img { max-width: 100%; vertical-align: middle; border-style: none; }

table { border-collapse: collapse; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button { cursor: pointer; }

hr {
    border: 0;
    border-top: 1px solid var(--h-border);
    margin: 1rem 0;
}

small { font-size: 85%; }

/* ── 스크롤바 ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d2d7e2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--h-text-faint); }

/* ══════════════ Grid ══════════════ */

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.row.no-gutters,
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3  { flex: 0 0 25%;        max-width: 25%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6  { flex: 0 0 50%;        max-width: 50%; }
.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9  { flex: 0 0 75%;        max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%;       max-width: 100%; }

@media (min-width: 576px) {
    .col-sm-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
    .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
    .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
    .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
    .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* ══════════════ Display / Flex ══════════════ */

.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-inline  { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex    { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-column { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }

.align-items-start  { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end    { align-items: flex-end !important; }

@media (min-width: 768px) {
    .d-md-table-cell { display: table-cell !important; }
    .d-md-block { display: block !important; }
    .d-md-flex  { display: flex !important; }
    .d-md-none  { display: none !important; }
}

@media (min-width: 992px) {
    .d-lg-inline { display: inline !important; }
    .d-lg-block  { display: block !important; }
    .d-lg-flex   { display: flex !important; }
    .d-lg-none   { display: none !important; }
}

/* ══════════════ Spacing ══════════════
   0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem  (Bootstrap 스케일) */

.m-0 { margin: 0 !important; }        .p-0 { padding: 0 !important; }
.m-1 { margin: .25rem !important; }   .p-1 { padding: .25rem !important; }
.m-2 { margin: .5rem !important; }    .p-2 { padding: .5rem !important; }
.m-3 { margin: 1rem !important; }     .p-3 { padding: 1rem !important; }
.m-4 { margin: 1.5rem !important; }   .p-4 { padding: 1.5rem !important; }
.m-5 { margin: 3rem !important; }     .p-5 { padding: 3rem !important; }

.mt-0 { margin-top: 0 !important; }      .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem !important; } .mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }  .mb-2 { margin-bottom: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }   .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; } .mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }   .mb-5 { margin-bottom: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }

.ml-0 { margin-left: 0 !important; }      .mr-0 { margin-right: 0 !important; }
.ml-1 { margin-left: .25rem !important; } .mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }  .mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }   .mr-3 { margin-right: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; } .mr-4 { margin-right: 1.5rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.pt-0 { padding-top: 0 !important; }      .pb-0 { padding-bottom: 0 !important; }
.pt-1 { padding-top: .25rem !important; } .pb-1 { padding-bottom: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }  .pb-2 { padding-bottom: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }   .pb-3 { padding-bottom: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; } .pb-4 { padding-bottom: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }   .pb-5 { padding-bottom: 3rem !important; }

.pl-0 { padding-left: 0 !important; }      .pr-0 { padding-right: 0 !important; }
.pl-3 { padding-left: 1rem !important; }   .pr-3 { padding-right: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; } .pr-4 { padding-right: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }   .pr-5 { padding-right: 3rem !important; }

.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

@media (min-width: 576px) {
    .m-sm-1 { margin: .25rem !important; }
    .px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}
@media (min-width: 768px) {
    .m-md-2 { margin: .5rem !important; }
}
@media (min-width: 992px) {
    .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ══════════════ Text ══════════════ */

.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; letter-spacing: .04em; }

.text-muted   { color: var(--h-text-muted) !important; }
.text-primary { color: var(--h-primary) !important; }
.text-success { color: var(--h-success) !important; }
.text-danger  { color: var(--h-danger) !important; }
.text-warning { color: var(--h-warning) !important; }
.text-info    { color: var(--h-info) !important; }
.text-light   { color: #fff !important; }
.text-dark    { color: var(--h-text) !important; }


/* ══════════════ Sizing / Position / Border ══════════════ */

.w-100 { width: 100% !important; }
.w-75  { width: 75% !important; }
.w-50  { width: 50% !important; }
.w-25  { width: 25% !important; }
.h-100 { height: 100% !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }

.border-0 { border: 0 !important; }
.border   { border: 1px solid var(--h-border) !important; }
.border-dark { border-color: var(--h-text) !important; }

.rounded         { border-radius: var(--h-radius) !important; }
.rounded-1       { border-radius: var(--h-radius-sm) !important; }
.rounded-circle  { border-radius: 50% !important; }
.rounded-pill    { border-radius: var(--h-radius-pill) !important; }

.bg-white     { background-color: #fff !important; }
.bg-dark      { background-color: var(--h-text) !important; }
.bg-gray-100  { background-color: var(--h-bg) !important; }
.bg-gray-700  { background-color: #495057 !important; }
.bg-primary   { background-color: var(--h-primary) !important; }
.bg-success   { background-color: var(--h-success) !important; }
.bg-warning   { background-color: var(--h-warning) !important; }
.bg-danger    { background-color: var(--h-danger) !important; }

.align-middle { vertical-align: middle !important; }

.shadow-00 { box-shadow: none !important; }
.shadow-01 { box-shadow: var(--h-shadow) !important; }

/* 구 템플릿 유틸 (JS 생성 마크업에서 사용) */
.pull-left  { float: left; }
.pull-right { float: right; }

.trans-03-in-out { transition: all .3s ease-in-out; }

/* clearfix — pull-left/right 사용 컨테이너 대응 */
.widget-content::after,
.row::after,
.form-group::after { content: ""; display: table; clear: both; }

/* ══════════════ Font weight 제거 ══════════════
   굵기 대비를 쓰지 않는다 — 전체 단일 굵기(400).
   브라우저 기본 굵기(h1~h6/th/strong/b)와 서드파티 위젯
   (footable·toastr·tui-pagination·daterangepicker)까지 덮기 위해 !important 사용.
   굵기를 다시 쓰려면 이 블록만 지우면 된다. */
* { font-weight: 400 !important; }