@charset "utf-8";

/* ==========================================================================
   SPIDO 기본 레이아웃
   기본 테마의 고정폭(1200px) 구조를 반응형으로 대체한다
   ========================================================================== */

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

body {
    margin: 0;
    padding: 0;
    background: var(--spido-bg);
    color: var(--spido-text);
    font-family: var(--spido-font);
    font-size: var(--spido-fs-body);
    line-height: 1.65;
    word-break: normal;
    overflow-wrap: normal;
    line-break: strict;
}

body.spido-no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6,
input, button, select, textarea {
    font-family: var(--spido-font);
}

/*
   한국어 문장은 어절과 문맥 단위로 줄바꿈한다.
   그누보드 기본 CSS의 p { word-break:break-all }보다 뒤에서 명시적으로 덮는다.
*/
p, li, dt, dd, blockquote,
h1, h2, h3, h4, h5, h6,
.spido-title, .spido-lead {
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;
}

h1, h2, h3, h4, h5, h6,
.spido-title {
    text-wrap: balance;
}

p, li, dd, blockquote,
.spido-lead {
    text-wrap: pretty;
}

/* 공백 없이 길어질 수 있는 데이터만 예외적으로 안전하게 접는다 */
.spido-url,
.spido-email,
.spido-address,
.spido-file-name,
.spido-user-content {
    word-break: normal;
    overflow-wrap: anywhere;
}

.spido-nowrap,
.spido-phone,
.spido-date,
.spido-business-number {
    white-space: nowrap;
}

/* 편집용 줄바꿈은 PC·태블릿에서만 유지하고 모바일에서는 자연스럽게 잇는다 */
.spido-br--desktop {
    display: initial;
}

/*
   다크 배경 위의 select 는 브라우저 기본 드롭다운이 흰 배경으로 열린다.
   글자색만 밝게 두면 목록이 보이지 않으므로 옵션 배경까지 함께 지정한다.
*/
select {
    color-scheme: dark;
}

select option,
select optgroup {
    background-color: #16161a;
    color: #f4f4f4;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

hr {
    display: none;
}

/* 기본 테마의 고정폭 해제 */
#hd, #wrapper, #ft, #hd_pop, #container_wr {
    min-width: 0;
}

/* 팝업레이어 - 고정 헤더보다 위에 표시한다 */
#hd_pop {
    z-index: var(--spido-z-drawer);
}

/* 공통 컨테이너 - 좌우 최대 60px, 화면이 작아지면 반응형 축소 */
.spido-container {
    width: 100%;
    max-width: var(--spido-maxw);
    margin: 0 auto;
    padding-inline: var(--spido-gutter);
}

.spido-section {
    padding-block: var(--spido-section-y);
}

.spido-section--tight {
    padding-block: clamp(48px, 6vw, 96px);
}

.spido-section--alt {
    background: var(--spido-bg-alt);
}

/* 본문 영역 */
#wrapper {
    display: block;
}

#container_wr:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#container {
    position: static;
    float: none;
    width: auto;
    min-height: 40vh;
    margin: 0;
    font-size: 1em;
}

#container:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

/* 서브 페이지 헤딩 */
#container_title {
    margin: 0 0 32px;
    font-size: var(--spido-fs-h2);
    font-weight: 700;
    line-height: 1.15;
}

#container_title span {
    display: block;
    margin: 0;
    line-height: inherit;
}

/* 서브 페이지 래퍼 */
.spido-page {
    padding-top: calc(var(--spido-header-h) + clamp(40px, 6vw, 88px));
    padding-bottom: clamp(72px, 9vw, 130px);
}

.spido-page--portfolio {
    padding-top: var(--spido-header-h);
}

.spido-page__head {
    margin-bottom: clamp(28px, 4vw, 56px);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--spido-line);
}

/* 제목 위 영문 라벨 - 다른 화면의 eyebrow 와 같은 규칙을 따른다 */
.spido-page__eyebrow {
    margin: 0 0 14px;
    color: var(--spido-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* 화면낭독기 전용 */
.sound_only, .msg_sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}

#skip_to_container a {
    z-index: var(--spido-z-top);
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#skip_to_container a:focus,
#skip_to_container a:active {
    width: 100%;
    height: 64px;
    background: var(--spido-accent);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    line-height: 64px;
}

#hd_login_msg {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* 포커스 가시성 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--spido-accent);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .spido-br--desktop {
        display: none;
    }
}