@charset "utf-8";

/* =========================================================
   HOVAN - Sub page common styles
   css/style.css 다음에 로드됩니다.

   타이포 스케일은 메인(css/style.css)의 .section-title /
   .section-desc / .btn 크기에 맞춰 정리했습니다.
   ========================================================= */

:root {
    --ink: #0d131a;
    --gold-light: #f9f38c;
    --gold-grad: linear-gradient(90deg, #e8b91f 0%, #f9f38c 100%);
    --gray-050: #f8f8f8;
    --gray-200: #eeeeee;
    --field: #f6f7f8;
    --line: #e5e5e5;
    --line-soft: #efefef;
    --required: #e5484d;

    /* type scale */
    --fs-page-title: clamp(28px, 3.4vw, 50px);
    --fs-section: clamp(22px, 2.6vw, 38px);
    --fs-block: clamp(18px, 1.6vw, 24px);
    --fs-lead: clamp(15px, 1.1vw, 18px);
    --fs-body: clamp(15px, 1.05vw, 17px);
    --fs-label: clamp(15px, 1.05vw, 17px);
    --fs-ui: 16px;
    --fs-small: clamp(14px, 1vw, 15px);
}

/* display를 지정한 요소(.draft-notice, .course-card 등)에서도
   hidden 속성이 확실히 먹도록 합니다. */
[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Light header ---------- */
.site-header--light {
    background: var(--white);
    border-bottom: 1px solid var(--line-soft);
}

.site-header--light.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.site-header--light .menu-toggle span {
    background: var(--ink);
}

@media (min-width: 901px) {
    .site-header--light .gnb a {
        color: var(--ink);
    }

    .site-header--light .gnb a:hover,
    .site-header--light .gnb .is-active a {
        color: var(--gold);
    }

    .site-header--light .gnb .is-active a::after {
        width: 100%;
    }
}

.sub-main {
    padding-top: var(--header-h);
}

/* ---------- Page head (breadcrumb + title + tabs) ---------- */
.page-head {
    padding: clamp(44px, 6vw, 96px) clamp(20px, 4.2vw, 60px) 0;
}

.page-head__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--fs-small);
    color: var(--gray-600);
    letter-spacing: -0.02em;
}

.breadcrumb__home {
    display: inline-flex;
    color: var(--ink);
    transition: color 0.2s ease;
}

.breadcrumb__home:hover {
    color: var(--gold);
}

.breadcrumb svg {
    display: block;
}

.breadcrumb .sep {
    display: inline-flex;
    color: #c4c4c4;
}

.breadcrumb .current {
    color: var(--ink);
    font-weight: 500;
}

.page-title {
    margin-top: 16px;
    font-weight: 700;
    font-size: var(--fs-page-title);
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.page-tabs {
    margin-top: clamp(22px, 2.4vw, 34px);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* 탭이 화면보다 넓을 때만 우측을 흐리게 해 스크롤 가능함을 알립니다 (js/sub.js) */
.page-tabs.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}

.page-tabs::-webkit-scrollbar {
    display: none;
}

.page-tabs ul {
    display: flex;
    gap: clamp(6px, 1vw, 16px);
    min-width: max-content;
}

.page-tabs a {
    display: block;
    padding: 0 14px 14px;
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gray-600);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.page-tabs a:hover {
    color: var(--ink);
}

.page-tabs a.is-active {
    color: var(--gold);
    font-weight: 600;
    border-bottom-color: var(--gold);
}

/* ---------- Sub section shells ---------- */
.sub-section {
    padding: clamp(56px, 6vw, 96px) clamp(20px, 4.2vw, 60px);
}

.sub-section--tight {
    padding-top: clamp(38px, 4.2vw, 64px);
}

.sub-section--gray {
    background: var(--gray-050);
}

.sub-inner {
    max-width: var(--container);
    margin: 0 auto;
}

.sub-title {
    font-weight: 600;
    font-size: var(--fs-section);
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: center;
}

.sub-title--left {
    text-align: left;
}

.sub-lead {
    margin-top: 16px;
    text-align: center;
    font-size: var(--fs-lead);
    line-height: 1.7;
    letter-spacing: -0.02em;
    color: var(--gray-700);
}

/* =========================================================
   회사소개 - 프라임에셋
   ========================================================= */
.intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
}

.intro__headline {
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.intro__body {
    margin-top: clamp(26px, 3vw, 42px);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.6vw, 22px);
    max-width: 760px;
}

.intro__body p {
    font-size: var(--fs-body);
    line-height: 1.85;
    letter-spacing: -0.02em;
    color: var(--gray-700);
    /* 지원하는 브라우저에서는 줄 끝 모양을 다듬고 마지막 줄에 한 단어만
       남는 것을 막아준다. 지원하지 않아도 아래 .br-pc 로 줄이 잡힌다. */
    text-wrap: pretty;
}

.intro__body strong {
    color: var(--ink);
    font-weight: 700;
}

/* PC 전용 줄바꿈
   긴 한글 문장을 뜻이 끊기지 않는 자리에서 직접 줄바꿈할 때 쓴다.
   <br class="br-pc"> 처럼 쓰고, 좁은 화면에서는 강제 줄바꿈이 오히려
   어색해지므로 숨겨서 자연스럽게 흐르도록 둔다.
   (숨겨도 앞뒤 줄 사이의 공백은 남아 단어가 붙지 않는다) */
@media (max-width: 768px) {
    .br-pc { display: none; }
}

.intro__visual {
    display: grid;
    grid-template-columns: 1fr 0.36fr;
    gap: 16px;
    align-items: end;
}

.intro__visual figure {
    overflow: hidden;
    border-radius: 20px;
    background: var(--gray-200);
}

.intro__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro__visual .is-main {
    aspect-ratio: 524 / 541;
}

.intro__visual .is-side {
    aspect-ratio: 188 / 541;
    margin-bottom: 72px;
}

/* ---------- 비전과 가치 카드 ---------- */
.value-grid {
    margin-top: clamp(34px, 4vw, 58px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.6vw, 26px);
}

.value-card {
    background: var(--gray-050);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: clamp(40px, 4.5vw, 72px) clamp(22px, 2.4vw, 40px) clamp(36px, 4.5vw, 64px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    border-color: var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.value-card__icon {
    height: clamp(90px, 8vw, 128px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

.value-card__icon svg {
    height: 100%;
    width: auto;
}

.value-card__title {
    margin-top: clamp(26px, 3.4vw, 56px);
    font-weight: 700;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.value-card__sub {
    margin-top: 10px;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gray-600);
}

.value-card__desc {
    margin-top: 18px;
    font-size: var(--fs-body);
    line-height: 1.8;
    letter-spacing: -0.02em;
    color: var(--gray-700);
}

/* =========================================================
   회사소개 - 호반본부 (CI / 컬러시스템)
   ========================================================= */
.ci-grid {
    margin-top: clamp(30px, 3.6vw, 52px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.2vw, 36px);
}

.ci-item--wide {
    grid-column: 1 / -1;
}

.ci-item__box {
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: var(--white);
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 9vw, 150px);
    flex-wrap: wrap;
    padding: clamp(36px, 4.5vw, 58px) 24px;
    min-height: clamp(180px, 17vw, 232px);
}

.ci-item__caption {
    margin-top: 20px;
}

.ci-item__caption h3 {
    font-weight: 600;
    font-size: clamp(16px, 1.3vw, 19px);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.ci-item__caption p {
    margin-top: 10px;
    font-size: var(--fs-body);
    line-height: 1.8;
    letter-spacing: -0.02em;
    color: var(--gray-700);
}

/* 로고 락업 — 하나의 로고 이미지에서 심볼/타이포 영역을 잘라 씁니다 */
.lockup {
    display: block;
    overflow: hidden;
    flex: none;
}

.lockup img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}

.lockup--symbol {
    height: clamp(72px, 8vw, 116px);
    width: clamp(72px, 8vw, 116px);
}

.lockup--type {
    height: clamp(46px, 5vw, 74px);
    width: clamp(148px, 17vw, 250px);
}

.lockup--type img {
    margin-left: calc(clamp(46px, 5vw, 74px) * -1.05);
}

.lockup--full {
    height: clamp(56px, 6vw, 92px);
    width: auto;
}

.lockup--stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: none;
}

.lockup--stack .lockup--symbol {
    height: clamp(64px, 7vw, 100px);
    width: clamp(64px, 7vw, 100px);
}

.lockup--stack .lockup--type {
    height: clamp(30px, 3.2vw, 46px);
    width: clamp(104px, 11vw, 160px);
}

.lockup--stack .lockup--type img {
    margin-left: calc(clamp(30px, 3.2vw, 46px) * -1.05);
}

.ci-download {
    margin-top: 24px;
}

.ci-download .btn {
    padding: 13px 26px;
    font-size: var(--fs-ui);
}

/* ---------- 컬러시스템 ---------- */
.color-system {
    margin-top: clamp(30px, 3.6vw, 52px);
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: clamp(10px, 1.2vw, 18px);
}

.color-chip {
    border-radius: 12px;
    min-height: clamp(140px, 13vw, 190px);
    padding: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.color-chip--ink {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.85);
}

.color-chip--gold {
    background: var(--gold-grad);
    color: rgba(255, 255, 255, 0.95);
}

.color-chip--white {
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--gray-600);
}

/* =========================================================
   강좌 플랫폼
   ========================================================= */
.course-search {
    margin-top: clamp(24px, 2.8vw, 38px);
    display: flex;
    justify-content: flex-end;
}

.course-search__form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 420px);
    padding: 6px 6px 6px 20px;
    border: 1px solid var(--line);
    border-radius: 50px;
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.course-search__form:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232, 185, 31, 0.15);
}

.course-search__form svg {
    flex: none;
    color: var(--gray-500);
}

.course-search__form input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: var(--fs-ui);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.course-search__form input::placeholder {
    color: #aaa;
}

.course-search__form button {
    flex: none;
    padding: 11px 22px;
    border-radius: 50px;
    background: var(--ink);
    color: var(--white);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.course-search__form button:hover {
    opacity: 0.85;
}

.course-grid {
    margin-top: clamp(24px, 2.8vw, 38px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 26px);
}

.course-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.course-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.09);
}

.course-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--gray-200);
}

.course-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.course-card:hover .course-card__thumb img {
    transform: scale(1.06);
}

/* 등록된 이미지가 없어 기본 이미지를 쓰는 카드에만 어두운 덮개 + 로고 워터마크를 올립니다.
   실제 강좌 썸네일(첨부 이미지, 유튜브 썸네일)은 원본 그대로 선명하게 보여줍니다. */
.course-card--placeholder .course-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.course-card__mark {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.course-card__mark img {
    width: clamp(110px, 58%, 165px);
    height: auto;
    object-fit: contain;
    opacity: 0.95;
}

.course-card__body {
    padding: clamp(18px, 1.6vw, 24px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-card__title {
    font-weight: 600;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card__date {
    margin-top: auto;
    padding-top: 16px;
    font-size: var(--fs-small);
    color: var(--gray-500);
}

/* ---------- Pagination ---------- */
.pagination {
    margin-top: clamp(40px, 4.5vw, 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--fs-ui);
    color: var(--gray-600);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pagination a:hover {
    background: var(--gray-050);
    color: var(--ink);
}

.pagination .is-current {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* =========================================================
   진단 리포트 (폼)
   ========================================================= */
/* 폼은 전폭(1600px)이 아니라 읽고 입력하기 좋은 폭으로 제한합니다 */
.report-shell {
    max-width: 1120px;
    margin: 0 auto;
}

/* 작성하던 내용을 불러왔을 때의 안내 */
.draft-notice {
    margin: 24px auto 0;
    max-width: max-content;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 20px;
    border: 1px solid rgba(232, 185, 31, 0.45);
    background: rgba(232, 185, 31, 0.09);
    border-radius: 50px;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.draft-notice #draftReset {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.draft-notice #draftReset:hover {
    color: var(--ink);
}

.draft-notice__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -4px;
    border-radius: 50%;
    color: var(--gray-500);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.draft-notice__close:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--ink);
}

/* ---------- 진행 상태 ---------- */
.report-progress {
    margin-top: clamp(28px, 3.2vw, 46px);
}

.report-progress__meta {
    display: none;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.report-progress__now {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--gray-500);
}

.report-progress__now strong {
    font-size: var(--fs-body);
    color: var(--ink);
}

.report-progress__name {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
}

.report-progress__track {
    margin-top: 14px;
    height: 4px;
    border-radius: 4px;
    background: var(--line);
    overflow: hidden;
}

.report-progress__fill {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 4px;
    background: var(--gold-grad);
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.report-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.report-steps__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: clamp(56px, 4.2vw, 68px);
    padding: 12px 26px;
    border: 1px solid var(--line);
    background: var(--white);
    font-family: inherit;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gray-500);
    cursor: default;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.report-steps__item:first-child {
    border-radius: 10px 0 0 10px;
}

.report-steps__item:last-child {
    border-radius: 0 10px 10px 0;
}

.report-steps__item + .report-steps__item {
    border-left: none;
}

.report-steps__item.is-done {
    color: var(--ink);
    cursor: pointer;
}

.report-steps__item.is-done:hover {
    background: var(--gray-050);
}

.report-steps__item.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
    font-weight: 700;
    border-radius: 10px;
    z-index: 2;
}

.report-steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--white);
    border: 1px solid var(--line);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 1L6.5 6.5L1 12' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

/* ---------- Form ---------- */
.report-form {
    margin-top: clamp(24px, 2.6vw, 40px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 44px) clamp(28px, 3.2vw, 48px);
}

.report-step[hidden] {
    display: none;
}

.report-step__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
}

.report-step__title {
    font-weight: 600;
    font-size: var(--fs-block);
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.report-step__sub {
    margin-top: 8px;
    font-size: var(--fs-small);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--gray-600);
}

.report-step__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.report-step__note {
    font-size: var(--fs-small);
    color: var(--required);
    letter-spacing: -0.02em;
}

/* 필수 안내가 아닌 일반 문구 */
.report-step__note--plain {
    color: var(--gray-600);
}

/* 병력 확인 - '없음' 일괄 입력 */
.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 50px;
    background: var(--white);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--gray-700);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.link-btn:hover {
    border-color: var(--gold);
    background: rgba(232, 185, 31, 0.08);
    color: var(--ink);
}

/* 체크박스처럼 보이는 상태 표시 - 켜짐/꺼짐이 한눈에 구분됩니다 */
.link-btn__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid #c9ccd1;
    border-radius: 5px;
    background: var(--white);
    color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.link-btn.is-on {
    border-color: var(--gold);
    background: rgba(232, 185, 31, 0.14);
    color: var(--ink);
    font-weight: 600;
}

.link-btn.is-on .link-btn__box {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--ink);
}

.field-grid {
    margin-top: clamp(24px, 2.6vw, 36px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 1.8vw, 28px) clamp(18px, 1.4vw, 20px);
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.field__label .req {
    color: var(--required);
}

.field__control {
    margin-top: 12px;
}

.field__hint {
    margin-top: 8px;
    font-size: var(--fs-small);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--gray-600);
}

.field__examples {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--gray-050);
    font-size: var(--fs-small);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--gray-700);
}

.field__examples li {
    position: relative;
    padding-left: 14px;
}

.field__examples li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

.field__examples strong {
    font-weight: 600;
    color: var(--ink);
}

.field__error {
    display: none;
    margin-top: 8px;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--required);
}

.field.is-invalid .field__error {
    display: block;
}

.input,
.textarea {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--field);
    padding: 0 20px;
    height: 58px;
    font-family: inherit;
    font-size: var(--fs-ui);
    letter-spacing: -0.02em;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.textarea {
    height: 170px;
    padding: 18px 20px;
    line-height: 1.75;
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: #a8adb3;
}

.input:hover,
.textarea:hover {
    border-color: var(--line);
}

.input:focus,
.textarea:focus {
    border-color: var(--gold);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(232, 185, 31, 0.15);
    outline: none;
}

.field.is-invalid .input,
.field.is-invalid .textarea {
    border-color: var(--required);
    background: #fdf5f5;
}

/* 날짜 입력 - 인풋 전체 영역을 눌러 달력이 열립니다 (js/sub.js) */
.input[type="date"] {
    position: relative;
    cursor: pointer;
    padding-right: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Crect x='1.75' y='3.25' width='14.5' height='13' rx='2.5' stroke='%23555555' stroke-width='1.4'/%3E%3Cpath d='M2 7.5h14M5.75 1.75v3M12.25 1.75v3' stroke='%23555555' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.input[type="date"]::-webkit-calendar-picker-indicator {
    width: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
}

/* 세그먼트 컨트롤 (운전) */
.segmented {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    height: 58px;
}

.segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    cursor: pointer;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--gray-600);
    background: var(--white);
    border-left: 1px solid var(--line);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.segmented label:first-of-type {
    border-left: none;
}

.segmented label:hover {
    background: var(--gray-050);
}

.segmented input:checked + label {
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
}

.segmented input:focus-visible + label {
    outline: 2px solid var(--gold);
    outline-offset: -3px;
}

.field.is-invalid .segmented {
    border-color: var(--required);
}

/* 라디오 필 (보장 체크) */
.pill-group {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.pill-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0 clamp(12px, 1.3vw, 20px);
    border: 1px solid var(--line);
    border-left: none;
    cursor: pointer;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--gray-700);
    background: var(--white);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pill-group .pill:first-of-type {
    border-left: 1px solid var(--line);
    border-radius: 8px 0 0 8px;
}

.pill-group .pill:last-of-type {
    border-radius: 0 8px 8px 0;
}

.pill::before {
    content: '';
    flex: none;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid #c9ccd1;
    background: var(--white);
    transition: border-color 0.2s ease, border-width 0.2s ease;
}

.pill:hover {
    color: var(--ink);
    background: var(--gray-050);
}

.pill-group input:checked + .pill {
    position: relative;
    z-index: 1;
    border: 1px solid var(--gold);
    border-radius: 8px;
    color: var(--ink);
    font-weight: 600;
    background: rgba(232, 185, 31, 0.09);
}

.pill-group input:checked + .pill::before {
    border-color: var(--gold);
    border-width: 6px;
}

.pill-group input:focus-visible + .pill {
    outline: 2px solid var(--gold);
    outline-offset: -3px;
}

.field.is-invalid .pill {
    border-color: var(--required);
}

/* ---------- Form actions ---------- */
.report-actions {
    margin-top: clamp(38px, 4.4vw, 66px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-solid,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
    height: 56px;
    padding: 0 30px;
    border-radius: 50px;
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-ui);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.btn-solid {
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
}

.btn-solid:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.btn-ghost {
    min-width: 150px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--gray-700);
}

.btn-ghost:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1280px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .report-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .report-steps__item,
    .report-steps__item:first-child,
    .report-steps__item:last-child,
    .report-steps__item + .report-steps__item {
        border: 1px solid var(--line);
        border-radius: 10px;
    }

    .report-steps__item.is-active {
        border-color: var(--ink);
    }

    .report-steps__item::after {
        display: none;
    }
}

@media (max-width: 1024px) {
    .intro {
        grid-template-columns: 1fr;
    }

    .intro__visual {
        max-width: 640px;
    }

    .intro__visual .is-side {
        margin-bottom: 0;
    }

    .value-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .ci-grid {
        grid-template-columns: 1fr;
    }

    .color-system {
        grid-template-columns: 1fr;
    }

    .color-chip {
        min-height: 110px;
    }
}

@media (max-width: 900px) {
    .site-header--light .gnb {
        background: rgba(10, 10, 10, 0.98);
    }

    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .pill-group {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .pill,
    .pill-group .pill:first-of-type {
        border: 1px solid var(--line);
        border-top: none;
        border-radius: 0;
    }

    .pill-group .pill:first-of-type {
        border-top: 1px solid var(--line);
        border-radius: 8px 8px 0 0;
    }

    .pill-group .pill:last-of-type {
        border-radius: 0 0 8px 8px;
    }
}

@media (max-width: 640px) {
    .page-head,
    .sub-section {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* 모바일에서는 4칸 인디케이터 대신 진행 표시로 압축합니다 */
    .report-steps {
        display: none;
    }

    .report-progress__meta {
        display: flex;
    }

    .course-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .course-search {
        justify-content: stretch;
    }

    .report-step__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .segmented {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        height: auto;
    }

    .segmented label {
        height: 52px;
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .segmented label:first-of-type {
        border-top: none;
    }

    .report-actions,
    .summary-actions {
        flex-direction: column-reverse;
    }

    .report-actions .btn-solid,
    .report-actions .btn-ghost,
    .summary-actions .btn-solid,
    .summary-actions .btn-ghost {
        width: 100%;
    }

    .ci-item__box {
        gap: 32px;
    }
}

/* =========================================================
   내 리포트 확인 (report-list.php / report-view.php)
   ========================================================= */
.report-list__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-bottom: clamp(20px, 2.4vw, 32px);
}

.report-list__total {
    font-size: 15px;
    color: var(--gray-600);
}

.report-list__total strong {
    color: var(--ink);
    font-weight: 600;
}

.report-list__actions {
    display: flex;
    gap: 8px;
}

.report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--ink);
    font-size: 15px;
    letter-spacing: -0.02em;
}

.report-table th {
    padding: 16px 12px;
    background: var(--gray-050);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
}

.report-table td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--gray-700);
    white-space: nowrap;
}

.report-table td.is-name a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.report-table tr:hover td {
    background: var(--gray-050);
}

.report-table .is-num {
    width: 64px;
    color: var(--gray-500);
}

.report-table .is-center {
    text-align: center;
}

.report-table__empty td {
    padding: 70px 0;
    text-align: center;
    white-space: normal;
    color: var(--gray-500);
}

/* ---------- 목록 공통: 상단 툴바 / 빈 목록 (카드 게시판, 내 리포트) ---------- */
/* 왼쪽은 검색 결과 문구와 관리자 버튼, 오른쪽은 검색창.
   일반 회원이 검색 없이 볼 때는 왼쪽이 비어 검색창만 오른쪽에 놓입니다. */
.card-board__top {
    margin-top: clamp(24px, 2.8vw, 38px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.card-board__lead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.card-board__top .course-search {
    margin-top: 0;
    margin-left: auto;
}

.card-board__total {
    font-size: var(--fs-small);
    color: var(--gray-600);
}

.card-board__total strong {
    color: var(--ink);
    font-weight: 600;
}

.card-board__stx {
    color: var(--gold);
    font-weight: 600;
}

.card-board__reset {
    margin-left: 10px;
    color: var(--gray-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.card-board__reset:hover {
    color: var(--ink);
}

/* 목록 상단 버튼 묶음
   - 주요 동작(등록/문의하기)은 채운 버튼으로 크게, 관리자 전용(설정)은 낮춘다.
   - 권한이 없어 등록 버튼이 사라지는 자리에는 로그인 안내를 대신 보여준다. */
.card-board__admin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.board-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.board-btn svg { flex: none; }

/* 이 화면에서 가장 중요한 동작 */
.board-btn--primary {
    background: var(--ink);
    color: var(--white);
}

.board-btn--primary:hover {
    background: #000;
    color: var(--white);
    transform: translateY(-1px);
}

/* 로그인해야 쓸 수 있을 때 대신 보여주는 버튼 */
.board-btn--login {
    border-color: var(--line);
    background: var(--white);
    color: var(--gray-700);
}

.board-btn--login:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* 관리자에게만 보이는 보조 기능 - 앞에 구분선을 두고 눈에 덜 띄게 */
.board-btn--admin {
    margin-left: 4px;
    padding: 0 14px;
    background: transparent;
    color: var(--gray-600);
    font-weight: 500;
}

.board-btn--admin::before {
    content: '';
    width: 1px;
    height: 18px;
    margin-right: 12px;
    background: var(--line);
}

.board-btn--admin:hover {
    background: var(--gray-050);
    color: var(--ink);
}

@media (max-width: 768px) {
    /* 좁은 화면에서는 검색창과 버튼이 한 줄에 끼지 않게 줄을 나눈다.
       flex-wrap 은 반드시 끈다. 줄바꿈이 켜진(multi-line) flex 는 줄 폭을 화면 폭이 아니라
       안쪽 요소의 최대 폭(검색 입력칸의 기본 폭 등)으로 잡아서, 로그인 버튼과 검색창이
       함께 화면 밖으로 밀려난다. */
    .card-board__top { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .card-board__top > * { min-width: 0; max-width: 100%; }
    .card-board__top .course-search { margin-left: 0; order: 3; }
    .card-board__top .course-search__form { width: 100%; }
    .card-board__lead { justify-content: space-between; }
    .card-board__admin { width: 100%; }
    .board-btn { flex: 1; justify-content: center; height: 46px; }
    .board-btn--admin { flex: none; }
}

.card-board__empty {
    margin-top: clamp(24px, 2.8vw, 38px);
    padding: clamp(60px, 8vw, 110px) 24px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: var(--gray-050);
    text-align: center;
}

.card-board__empty-title {
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--ink);
}

.card-board__empty-desc {
    margin-top: 10px;
    font-size: var(--fs-small);
    line-height: 1.7;
    color: var(--gray-600);
}

.card-board__empty-desc strong {
    color: var(--ink);
    font-weight: 600;
}

.card-board__empty .btn {
    margin-top: 22px;
}

.card-board__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 30px;
}

@media (max-width: 640px) {
    /* .card-board__* 의 좁은 화면 처리는 위쪽 768px 블록에 모아두었다. */
}

/* ---------- 그누보드 페이징 (get_paging → .pg_wrap) 을 .pagination 룩으로 ---------- */
.pg_wrap {
    float: none;
    display: block;
    width: 100%;
    margin-top: clamp(40px, 4.5vw, 66px);
    text-align: center;
}

.pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pg_page,
.pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    font-size: 16px;
    line-height: 1;
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pg_page:hover {
    background: var(--gray-050);
    color: var(--ink);
}

.pg_current {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.pg_start,
.pg_prev,
.pg_next,
.pg_end {
    width: auto;
    padding: 0 6px;
    border: 0;
    background: none;
    text-indent: 0;
    overflow: visible;
    font-size: 0;
}

.pg_start::before { content: '\00ab'; font-size: 16px; }
.pg_prev::before  { content: '\2039'; font-size: 16px; }
.pg_next::before  { content: '\203a'; font-size: 16px; }
.pg_end::before   { content: '\00bb'; font-size: 16px; }


/* =========================================================================
   진단 리포트 결과 문서 (report-summary.php / report-view.php)

   설계 원칙
   1) 표면을 3단으로 나눈다. 회색 바탕 → 흰 카드 → 옅은 인셋.
      바탕과 카드가 같은 흰색이면 경계가 사라진다.
   2) 색에 뜻을 하나씩만 준다.
      골드 = 브랜드/고객 니즈,  러스트 = 확인 필요,  회색 = 해당 없음.
      (전에는 골드가 두 가지 뜻을 겸해 무엇이 중요한지 흐려졌다)
   3) 색이 사라져도 읽히게 만든다. 인쇄에서는 배경이 안 찍히므로
      테두리 · 굵기 · 여백만으로 위계가 서도록 짠다.
   ========================================================================= */

.summary-page {
    /* 표면 */
    --sm-canvas:   #e4e9f0;   /* 페이지 바탕 - 카드가 떠 보이게 (흰 카드 대비 1.22:1) */
    --sm-surface:  #ffffff;   /* 카드 */
    --sm-inset:    #f6f8fb;   /* 카드 안의 한 단 더 들어간 면 */

    /* 선 */
    --sm-line:     #dde3ec;
    --sm-line-2:   #eaeef4;

    /* 글자 */
    --sm-text:     #10151c;
    --sm-text-2:   #48525f;
    --sm-text-3:   #666f7c;   /* 흰 배경 대비 5.09:1 (AA 통과) */

    /* 뜻을 가진 색 */
    --sm-brand:    #e8b91f;   /* 브랜드 골드 */
    --sm-brand-tx: #7a5c00;   /* 밝은 배경에서 읽히는 골드 글자 */
    --sm-brand-bg: #fdf6e0;
    --sm-alert:    #b45309;   /* 확인 필요 */
    --sm-alert-tx: #8a3f07;
    --sm-alert-bg: #fff6ed;
    --sm-alert-ln: #f2c9a0;

    background: var(--sm-canvas);
    color: var(--sm-text-2);
}

/* ---------- 문서 머리 ---------- */
.summary-hero {
    max-width: 1000px;
    margin: clamp(24px, 3vw, 40px) auto 0;
    padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3vw, 44px);
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-top: 4px solid var(--sm-brand);
    border-radius: 16px 16px 0 0;
    text-align: left;
}

.summary-hero__eyebrow {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sm-brand-tx);
}

.summary-hero h1 {
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--sm-text);
}

.summary-hero h1 span {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--sm-text-3);
}

.summary-hero p { color: var(--sm-text-2); }

.summary-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 0;
    margin-top: 14px;
    font-size: 15px;
    color: var(--sm-text-2);
}

.summary-hero__meta span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 12px;
    background: var(--sm-line);
    vertical-align: -1px;
}

/* 고객이 원하는 조건 - 이 문서에서 가장 먼저 읽혀야 하는 줄 */
.summary-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--sm-line-2);
    list-style: none;
}

.summary-hero__badges li {
    padding: 8px 15px;
    border: 1px solid var(--sm-brand);
    border-radius: 8px;
    background: var(--sm-brand-bg);
    color: var(--sm-brand-tx);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- 본문 ---------- */
.summary-body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 clamp(48px, 6vw, 88px);
}

.summary-block {
    padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3vw, 44px);
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-top: 0;
}

.summary-block:last-of-type {
    border-radius: 0 0 16px 16px;
}

.summary-block + .summary-block { margin-top: 0; }

.summary-block__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--sm-text);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--sm-text);
}

/* 섹션 상태 표시 */
.summary-flagcount {
    flex: none;
    padding: 5px 12px;
    border: 1px solid var(--sm-alert-ln);
    border-radius: 6px;
    background: var(--sm-alert-bg);
    color: var(--sm-alert-tx);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.summary-flagcount.is-clear {
    border-color: var(--sm-line);
    background: var(--sm-inset);
    color: var(--sm-text-3);
    font-weight: 600;
}

/* ---------- 일반 항목 ---------- */
.summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 44px);
    margin-top: 4px;
}

.summary-list > div {
    display: grid;
    grid-template-columns: minmax(96px, 148px) 1fr;
    gap: 8px 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--sm-line-2);
    letter-spacing: -0.02em;
}

.summary-list dt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--sm-text-3);
}

.summary-list dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
    color: var(--sm-text);
}

/* ---------- 확인이 필요한 항목 ---------- */
.summary-flags {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.summary-flag {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr;
    gap: 6px 20px;
    padding: 16px 20px;
    border: 1px solid var(--sm-alert-ln);
    border-left: 4px solid var(--sm-alert);
    border-radius: 10px;
    background: var(--sm-alert-bg);
}

.summary-flag__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sm-alert-tx);
}

.summary-flag__value {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--sm-text);
    word-break: keep-all;
}

/* ---------- 해당 없는 항목 ---------- */
.summary-clear {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--sm-line-2);
    border-radius: 10px;
    background: var(--sm-inset);
}

.summary-clear__label {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-text-3);
}

.summary-clear ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.summary-clear li {
    padding: 4px 10px;
    border: 1px solid var(--sm-line);
    border-radius: 6px;
    background: var(--sm-surface);
    color: var(--sm-text-2);
    font-size: 13px;
}

/* ---------- 상세 서술 ---------- */
.summary-long { margin-top: 20px; }

.summary-long dt {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-text-3);
}

.summary-long dd {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--sm-line);
    border-radius: 10px;
    background: var(--sm-inset);
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--sm-text-2);
    white-space: pre-line;
}

/* ---------- 주민등록번호 ---------- */
.summary-mask { letter-spacing: 0.04em; }

.summary-mask__btn {
    margin-left: 8px;
    padding: 3px 9px;
    border: 1px solid var(--sm-line);
    border-radius: 6px;
    background: var(--sm-surface);
    color: var(--sm-text-3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    vertical-align: 1px;
}

.summary-mask__btn:hover {
    border-color: var(--sm-text);
    color: var(--sm-text);
}

/* ---------- 버튼 줄 ---------- */
.summary-actions {
    max-width: 1000px;
    margin: clamp(28px, 3vw, 40px) auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.summary-page .btn-solid {
    background: var(--sm-text);
    border-color: var(--sm-text);
    color: #fff;
}

.summary-page .btn-solid:hover { background: #000; }

.summary-page .btn-ghost {
    border-color: var(--sm-line);
    background: var(--sm-surface);
    color: var(--sm-text-2);
}

.summary-page .btn-ghost:hover {
    border-color: var(--sm-text);
    background: var(--sm-surface);
    color: var(--sm-text);
}

.summary-page .btn-ghost.is-link { text-decoration: none; }

.summary-print { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px) {
    .summary-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .summary-hero,
    .summary-body,
    .summary-actions { margin-left: 14px; margin-right: 14px; }

    .summary-list > div { grid-template-columns: 1fr; gap: 4px; }
    .summary-flag { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
    .summary-hero__badges li { padding: 7px 12px; font-size: 13px; }
}


/* =========================================================================
   A4 인쇄 / PDF

   브라우저는 기본적으로 배경색을 인쇄하지 않는다. 그래서 화면에서 면으로
   구분하던 것(회색 바탕, 옅은 인셋, 알림 배경)이 인쇄물에서는 사라진다.
   여기서는 그 자리를 테두리 · 글자 굵기 · 여백으로 대신 채워
   흑백으로 뽑아도 위계가 그대로 남게 한다.
   ========================================================================= */
@page {
    size: A4 portrait;
    margin: 14mm 12mm;
}

@media print {
    /* 화면 전용 요소 */
    .site-header,
    .site-footer,
    .to-top,
    .summary-actions,
    .summary-mask__btn { display: none !important; }

    /* 바탕은 흰색으로. 폭 제한도 푼다 */
    .summary-page {
        background: #fff;
        color: #000;
        font-size: 10pt;
        line-height: 1.5;
    }

    .summary-hero,
    .summary-body {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* 문서 머리 - 카드가 아니라 표제부처럼 */
    .summary-hero {
        padding: 0 0 5mm;
        margin-bottom: 6mm;
        border: 0;
        border-bottom: 1.2pt solid #000;
        border-radius: 0;
    }

    .summary-hero__eyebrow {
        margin-bottom: 1.5mm;
        font-size: 8pt;
        color: #6b5200;
    }

    .summary-hero h1 { font-size: 18pt; color: #000; }
    .summary-hero h1 span { font-size: 0.5em; color: #555; }

    .summary-hero__meta {
        margin-top: 2mm;
        font-size: 9pt;
        color: #333;
    }

    .summary-hero__meta span + span::before { background: #999; }

    .summary-hero__badges {
        margin-top: 3mm;
        padding-top: 3mm;
        border-top: 0.5pt solid #bbb;
        gap: 2mm;
    }

    /* 배경이 안 찍히므로 테두리와 굵기로 구분한다 */
    .summary-hero__badges li {
        padding: 1mm 3mm;
        border: 0.8pt solid #8a6a05;
        border-radius: 1.5mm;
        background: none;
        color: #6b5200;
        font-size: 9pt;
    }

    /* 섹션 - 페이지 경계에서 잘리지 않게 */
    .summary-block {
        padding: 0 0 5mm;
        margin: 0 0 5mm;
        border: 0;
        border-radius: 0;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .summary-block:last-of-type { margin-bottom: 0; border-radius: 0; }

    .summary-block__title {
        padding-bottom: 1.5mm;
        margin-bottom: 2mm;
        border-bottom: 1pt solid #000;
        font-size: 11.5pt;
        color: #000;
    }

    .summary-flagcount {
        padding: 0.4mm 2mm;
        border: 0.8pt solid #8a3f07;
        border-radius: 1mm;
        background: none;
        color: #8a3f07;
        font-size: 8.5pt;
    }

    .summary-flagcount.is-clear {
        border-color: #aaa;
        color: #666;
    }

    /* 항목 */
    .summary-list > div {
        padding: 1.5mm 0;
        border-bottom: 0.4pt solid #ddd;
    }

    .summary-list dt { font-size: 8.5pt; color: #555; }
    .summary-list dd { font-size: 10pt; color: #000; }

    /* 확인 필요 - 왼쪽 굵은 선으로 눈에 걸리게 */
    .summary-flags { gap: 2mm; margin-top: 2.5mm; }

    .summary-flag {
        padding: 2.5mm 3.5mm;
        border: 0.6pt solid #c98a58;
        border-left: 1.5mm solid #8a3f07;
        border-radius: 1.5mm;
        background: none;
        break-inside: avoid;
    }

    .summary-flag__label { font-size: 8.5pt; color: #8a3f07; }
    .summary-flag__value { font-size: 10pt; color: #000; }

    /* 해당 없음 - 한 줄로 눌러 담는다 */
    .summary-clear {
        margin-top: 2.5mm;
        padding: 2mm 3mm;
        border: 0.4pt solid #ddd;
        border-radius: 1.5mm;
        background: none;
    }

    .summary-clear__label { font-size: 8.5pt; color: #666; }

    .summary-clear li {
        padding: 0.3mm 1.8mm;
        border: 0.4pt solid #ccc;
        border-radius: 1mm;
        background: none;
        color: #444;
        font-size: 8.5pt;
    }

    /* 상세 서술 */
    .summary-long { margin-top: 3mm; break-inside: avoid; }
    .summary-long dt { margin-bottom: 1.5mm; font-size: 8.5pt; color: #555; }

    .summary-long dd {
        padding: 2.5mm 3.5mm;
        border: 0.5pt solid #ccc;
        border-radius: 1.5mm;
        background: none;
        font-size: 9.5pt;
        line-height: 1.6;
        color: #000;
    }

    /* 링크 주소가 뒤에 따라붙는 브라우저 동작을 막는다 */
    a[href]::after { content: none !important; }
}

/* =========================================================
/* =========================================================
   고객 공유용 링크 (설계사 본인에게만 보인다)
   페이지 위에 조용히 얹히도록 색을 채우지 않고 얇은 테두리로만 구분한다.
   ========================================================= */
.report-share {
    margin-top: clamp(20px, 2.4vw, 30px);
    padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--gray-050);
}

.report-share--compact {
    margin-top: clamp(28px, 3.2vw, 44px);
}

.report-share__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 12px;
}

.report-share__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.report-share__title svg {
    flex: none;
    color: var(--gold);
}

/* 고객에게는 보이지 않는다는 표시 */
.report-share__private {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--gray-500);
}

.report-share__private svg {
    flex: none;
}

.report-share__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-share__url {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    font-family: inherit;
    /* 16px 미만이면 iOS 사파리가 칸을 누를 때 화면을 확대해버린다 */
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--gray-700);
    text-overflow: ellipsis;
    cursor: pointer;
}

.report-share__url:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232, 185, 31, 0.15);
}

.report-share__btns {
    flex: none;
    display: flex;
    gap: 8px;
}

.report-share__row .board-btn {
    flex: none;
    height: 48px;
}

/* 복사 결과 안내 - 누르기 전에는 자리를 차지하지 않는다 */
.report-share__note {
    display: none;
    margin-top: 10px;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.report-share__note.is-on {
    display: block;
}

/* ---------- 개인정보 수집 동의 (고객이 직접 작성할 때) ---------- */
.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--gray-050);
    cursor: pointer;
}

.consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.consent__box {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid #c9ccd1;
    border-radius: 5px;
    background: var(--white);
    color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.consent input:checked + .consent__box {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--ink);
}

.consent input:focus-visible + .consent__box {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.consent__text {
    font-size: var(--fs-small);
    line-height: 1.7;
    letter-spacing: -0.02em;
    color: var(--gray-700);
}

.consent__text strong {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 640px) {
    /* 링크 칸과 버튼을 위아래로 쌓고, 좁은 화면에서도 답답해 보이지 않게 키운다 */
    .report-share__row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .report-share__url {
        height: 54px;
        padding: 0 18px;
    }

    .report-share__btns {
        display: flex;
    }

    /* 공유 버튼은 기기가 지원할 때만 나온다. 하나만 나오면 그 버튼이 폭을 다 쓴다. */
    .report-share__btns .board-btn {
        flex: 1;
        height: 52px;
        justify-content: center;
    }
}

/* =========================================================
   설정 안내 (최고관리자에게만 보임)
   메뉴가 가리키는 게시판이 아직 없을 때 뜬다.
   고정 헤더에 가리지 않도록 화면 왼쪽 아래에 띄운다.
   (오른쪽 아래의 맨 위로 버튼과 겹치지 않는 자리)
   ========================================================= */
.setup-alert {
    position: fixed;
    left: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: 200;
    max-width: min(520px, calc(100vw - 24px));
}

.setup-alert__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 18px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    background: var(--ink);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    font-size: var(--fs-small);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.86);
}

.setup-alert strong {
    color: var(--gold);
    font-weight: 600;
}

.setup-alert b {
    color: var(--white);
    font-weight: 600;
}

.setup-alert a {
    flex: none;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.setup-alert a:hover {
    opacity: 0.85;
}

@media print {
    .setup-alert {
        display: none;
    }
}

/* 내 리포트 목록: 누가 작성했는지 표시 */
.report-by {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    white-space: nowrap;
}

/* 고객이 카카오톡 링크로 직접 쓴 것은 눈에 띄게 */
.report-by--guest {
    border-color: var(--gold);
    background: rgba(232, 185, 31, 0.14);
    color: var(--ink);
    font-weight: 600;
}

/* =========================================================
   게시판 목록 공통: 도구 줄 + 머리줄
   (보험문의 qna, 영업지원실 guide 스킨이 함께 쓴다)

   검색이 주인공이라 오른쪽에 두고, 버튼은 왼쪽에 둔다.
   안내 문구까지 이 줄에 같이 넣으면 좁은 폭에서 글자가 잘리므로
   아래 머리줄로 따로 뺐다. 머리줄은 도구 줄과 목록 사이의 여백 역할도 한다.
   ========================================================= */
.board-toolbar {
    margin-top: clamp(22px, 2.6vw, 34px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.board-toolbar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
}

.board-toolbar .course-search {
    margin-top: 0;
}

.board-meta {
    margin: clamp(26px, 3.2vw, 40px) 0 10px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.board-meta__hint,
.board-meta__result,
.board-meta__count {
    margin: 0;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--gray-600);
}

.board-meta__hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.board-meta__hint svg {
    flex: none;
    color: var(--gold);
}

.board-meta__count,
.board-meta__result {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.board-meta__count strong,
.board-meta__result strong {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 768px) {
    .board-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .board-toolbar__actions {
        margin-right: 0;
    }

    .board-toolbar__actions .board-btn {
        flex: 1;
        justify-content: center;
    }

    .board-toolbar__actions .board-btn--admin {
        flex: none;
    }

    .board-meta {
        gap: 4px 12px;
    }
}

/* 가입 승인 대기 안내 (해당 회원에게만 보인다) */
.setup-alert--pending .setup-alert__inner {
    border-color: var(--line);
    background: var(--ink);
}

.setup-alert--pending strong {
    color: var(--gold);
}

/* 카카오톡 상담 버튼 - 브랜드 색을 그대로 써서 바로 알아보게 한다 */
.board-btn--kakao {
    background: #fee500;
    border-color: #fee500;
    color: #191600;
}

.board-btn--kakao:hover {
    background: #f2d900;
    border-color: #f2d900;
    color: #191600;
}

/* =========================================================
   진단 리포트 삭제
   ========================================================= */
.report-table .is-check {
    width: 44px;
    padding-right: 0;
    text-align: center;
}

.report-table .is-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--ink);
    cursor: pointer;
}

.report-bulk {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.report-bulk__note {
    margin: 0;
    margin-right: auto;
    font-size: var(--fs-small);
    letter-spacing: -0.02em;
    color: var(--gray-500);
}

.report-bulk__note.is-on {
    color: var(--ink);
    font-weight: 600;
}

/* 지우는 버튼은 실수로 누르기 어렵게, 그러나 겁주지는 않게 */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 50px;
    background: var(--white);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--required);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.btn-danger:hover:not(:disabled) {
    border-color: var(--required);
    background: var(--required);
    color: var(--white);
}

.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 상세 화면의 삭제 버튼은 다크 배경 위에 놓인다 */
.summary-del {
    display: inline-flex;
}

.summary-page .btn-danger {
    height: 56px;
    padding: 0 24px;
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #ff8f93;
    font-size: var(--fs-ui);
}

.summary-page .btn-danger:hover:not(:disabled) {
    border-color: var(--required);
    background: var(--required);
    color: var(--white);
}

@media (max-width: 640px) {
    .report-bulk {
        justify-content: stretch;
    }

    .report-bulk .btn-danger {
        flex: 1;
    }

    .summary-del,
    .summary-page .btn-danger {
        width: 100%;
    }
}