/*
  ============================================================
  style.css — 엔트리 (데모/가이드용)
  ------------------------------------------------------------
  [역할]
  - 컴포넌트 CSS를 @import 로 묶는 진입점
  - .ui-guide / .form-guide 는 데모 페이지 전용 (실서비스 복사 X)

  [다른 프로젝트]
  - 이 파일 대신 필요한 CSS만 개별 @import 하거나
  - 아래 import 목록에서 쓰는 모듈만 남기세요.
  - 매뉴얼: README.md , docs/적용가이드.md , docs/tokens.md
  ============================================================
*/
@import url(tokens.css);
@import url(common.css);
@import url(layout.css);
@import url(button.css);
@import url(form.css);
@import url(popup.css);
@import url(table.css);
@import url(faq.css);
@import url(loading.css);
@import url(tab.css);
@import url(slide.css);
@import url(chart.css);
@import url(menu.css);
@import url(editor.css);
@import url(datepicker.css);
@import url(main.css);
@import url(board.css);
@import url(search.css);
@import url(breadcrumb.css);
@import url(alert.css);
@import url(step.css);
@import url(footer.css);
@import url(related.css);
@import url(share.css);
@import url(video.css);
@import url(map.css);
@import url(login.css);
@import url(seo.css);
@import url(scroll-panel.css);
@import url(site-portal.css);


/* ============================================================
   가이드 페이지 공통 (form / button / table / paging / popup / faq 등)
   ※ 실서비스에는 복사하지 않아도 됨
   ============================================================ */
.ui-guide,
.form-guide {
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
}
.ui-guide-item,
.form-guide-item {
    margin-top: 2rem;
    padding: 2.4rem 2.8rem 2.8rem;
    border: 1px solid #ddd;
    border-left: 4px solid var(--krds-color-action-primary, #256ef4);
    border-radius: 0.8rem;
    background: #fafafa;
}
.ui-guide-item:first-child,
.form-guide-item:first-child {
    margin-top: 0;
}
.ui-guide-tit,
.form-guide-tit {
    margin: 0 0 1.6rem;
    padding: 0 0 1.2rem;
    border-bottom: 1px solid #ccc;
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    line-height: 1.4;
}
.ui-guide-body,
.form-guide-body {
    padding: 0.4rem 0 0;
}
.ui-guide-body > .mt10:first-child,
.form-guide-body > .mt10:first-child {
    margin-top: 0 !important;
}
.ui-guide-body > .mt20:first-child,
.form-guide-body > .mt20:first-child {
    margin-top: 0 !important;
}
/* 가이드 안 노트·문항 문구 */
.ui-guide-body > p.nt,
.form-guide-body > p.nt {
    margin-top: 1.2rem;
}
.form-guide-body > p#quiz1_q,
.form-guide-body > p[id$="_q"] {
    margin: 2rem 0 1.2rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
    color: #000;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.6rem;
}
/* 가이드 안 테이블 블록 간격 */
.form-guide-body .tbl-list + .tbl-list {
    margin-top: 2rem;
}
/* 버튼 가이드: 데모 영역 */
.ui-guide-body .btn-demo {
    padding: 2rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.6rem;
}
.ui-guide-note {
    margin: 1.2rem 0 0;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #555;
}
.ui-guide-note + .ui-guide-note {
    margin-top: 0.4rem;
}
/* 가이드 옵션 표기: (고정) 등 */
.btn-demo .guide-opt {
    margin-left: 0.2em;
    font-weight: 500;
    color: #666;
    font-size: 0.92em;
}
@media (max-width: 640px) {
    .ui-guide-item,
    .form-guide-item {
        padding: 2rem 1.6rem 2.2rem;
    }
    .ui-guide-tit,
    .form-guide-tit {
        font-size: 1.6rem;
    }
    .ui-guide-body .btn-demo {
        padding: 1.6rem;
    }
}




/* quiz-tit */
.quiz-tit {
    font-size: 1.8rem;
    font-weight: 600;
    color: #000;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* 문서형 가이드 (head.html 등) */
.doc-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 1.45rem;
    line-height: 1.55;
}
.doc-table th,
.doc-table td {
    padding: 1rem 1.2rem;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.doc-table thead th {
    background: #f5f5f5;
    font-weight: 700;
    color: #000;
}
.doc-table tbody th {
    width: 32%;
    background: #fafafa;
    font-weight: 600;
    color: #000;
}
.doc-code {
    display: block;
    margin: 0;
    padding: 1.6rem;
    overflow-x: auto;
    border: 1px solid #e5e5e5;
    border-radius: 0.6rem;
    background: #fff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.35rem;
    line-height: 1.6;
    color: #333;
    white-space: pre;
}
.doc-code:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.doc-check {
    margin: 0;
    padding: 0;
    list-style: none;
}
.doc-check li {
    position: relative;
    margin-bottom: 0.8rem;
    padding-left: 2.4rem;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #333;
}
.doc-check li::before {
    content: "☐";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.6rem;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .doc-table tbody th {
        width: auto;
    }
}

/*
  여백 클릭 후 Shift 등 키입력 시 상단 검정 포커스 선 방지
  (common.css 와 동일 · @import 캐시 대비 style.css 본체에서 한 번 더 고정)
*/
html:focus,
html:focus-visible,
body:focus,
body:focus-visible,
#wrap:focus,
#wrap:focus-visible,
#contents[tabindex="-1"]:focus,
#contents[tabindex="-1"]:focus-visible,
#container[tabindex="-1"]:focus,
#container[tabindex="-1"]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}