/* K-뷰티 B2B 비즈니스데이 컴포넌트. 한국보건산업진흥원 누리집(KRDS 기반)의 표현 방식을 따르고 색만 행사 팔레트로 바꿨습니다. 값은 tokens.css에서 가져옵니다. */

:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }
.kb, .kb * { box-sizing: border-box; }
.kb { font-family: var(--font-sans); color: var(--ink); font-size: 17px; line-height: 1.6; word-break: keep-all; letter-spacing: -0.01em; }
.kb :focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }

/* 섹션 제목: 가운데 정렬, 끝에 강조색 점 (진흥원 누리집의 제목 표기) */
.kb-sec-title { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: var(--space-12); }
.kb-sec-title h2 { position: relative; margin: 0; font: 700 40px/1.25 var(--font-sans); letter-spacing: -0.03em; color: var(--ink); }
.kb-sec-title h2::after { content: ""; position: absolute; top: 2px; right: -14px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transition: transform .5s var(--ease-spring) .25s; }
.is-pre .kb-sec-title h2::after, .kb-sec-title.is-pre h2::after { transform: scale(0); }
.kb-sec-title p { margin: 0; font-size: 18px; color: var(--ink-sub); }
@media (max-width: 600px) { .kb-sec-title h2 { font-size: 28px; } .kb-sec-title p { font-size: 16px; } }

/* 버튼: 모두 알약형 */
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-pill); font: 700 17px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .15s; }
.kb-btn:active:not(:disabled) { transform: scale(.97); }
.kb-btn svg { transition: transform .25s var(--ease-out); }
.kb-btn:hover svg { transform: translateX(3px); }
.kb-btn svg { width: 18px; height: 18px; flex: none; }
.kb-btn--accent { background: var(--accent); color: #fff; }
.kb-btn--accent:hover { background: var(--accent-strong); }
/* 보조 버튼: 흰 바탕 + 선은 입력칸과 겹쳐 보여서, 선 없이 갈색 기운의 연한 면으로 */
.kb-btn--line { background: rgba(46, 22, 10, .07); color: var(--brown); }
.kb-btn--line:hover { background: rgba(46, 22, 10, .13); }
.kb-btn--slate { justify-content: space-between; min-width: 200px; background: var(--slate); color: #fff; padding: 0 22px; }
.kb-btn--slate:hover { background: var(--ink-sub); }
.kb-btn--sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.kb-btn:disabled, .kb-btn[aria-disabled="true"] { background: var(--surface-alt); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; }

/* 원형 화살표: 카드 오른쪽 아래 모서리를 파내고 검은 원을 넣습니다 */
.kb-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 32px 32px 40px; border-radius: var(--radius-lg); background: var(--surface-alt); color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; transition: transform .35s var(--ease-out); }
/* 파낸 모서리를 만드는 원이 카드 밖으로 29px 번지므로 overflow: hidden으로 카드 안에서 자릅니다 */
.kb-card h3 { margin: 0; font: 700 24px/1.35 var(--font-sans); letter-spacing: -0.02em; }
.kb-card p { margin: 0; color: var(--ink-sub); font-size: 16px; line-height: 1.65; padding-right: 40px; }
.kb-card--wash-a { background: linear-gradient(135deg, var(--wash-peach) 10%, var(--wash-rose) 95%); }
.kb-card--wash-b { background: linear-gradient(135deg, var(--wash-rose) 10%, var(--wash-sand) 95%); }
.kb-card--grad { background: linear-gradient(135deg, var(--brown) 35%, var(--accent) 100%); color: #fff; }
.kb-card--grad p { color: rgba(255,255,255,.95); }
.kb-more { position: absolute; right: 0; bottom: 0; width: 58px; height: 58px; border-top-left-radius: 29px; background: var(--page); }
.kb-more::before, .kb-more::after { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; box-shadow: 29px 29px 0 0 var(--page); pointer-events: none; }
.kb-more::before { left: -58px; bottom: 0; }
.kb-more::after { right: 0; top: -58px; }
.kb-more i { position: absolute; z-index: 1; right: 0; bottom: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color .2s, transform .35s var(--ease-out); }
.kb-more i svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
/* 그림자는 파낸 모서리를 무시하고 사각형으로 번지므로 쓰지 않고, 들어 올리기만 합니다 */
a.kb-card:hover { transform: translateY(-6px); }
a.kb-card:hover .kb-more i { background: var(--accent); transform: rotate(45deg); }
a.kb-card:active { transform: translateY(-2px); }
.kb-on-alt .kb-more { background: var(--surface-alt); }
.kb-on-alt .kb-more::before, .kb-on-alt .kb-more::after { box-shadow: 29px 29px 0 0 var(--surface-alt); }

/* 탭: 간격으로만 구분하고 선택된 탭은 밑줄 */
.kb-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin: 0 0 20px; padding: 0; list-style: none; }
.kb-tabs li { display: flex; align-items: center; }
.kb-tabs button { padding: 4px 0; border: 0; background: none; font: 600 22px/1.3 var(--font-sans); letter-spacing: -0.02em; color: var(--ink-muted); cursor: pointer; }
.kb-tabs button { background: linear-gradient(var(--accent), var(--accent)) center bottom / 0 3px no-repeat; transition: color .2s, background-size .3s var(--ease-out); }
.kb-tabs button:hover { color: var(--ink); }
.kb-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; background-size: 100% 3px; }
@media (max-width: 600px) { .kb-tabs button { font-size: 17px; } .kb-tabs li + li::before { margin: 0 8px; } }

/* 게시판 목록: 분류, 제목, 새 글 표시, 날짜 */
.kb-board { margin: 0; padding: 12px 32px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.kb-board li { display: flex; align-items: center; gap: 20px; padding: 20px 0; }
.kb-board li + li { border-top: 1px solid var(--line); }
.kb-board .cat { flex: none; width: 64px; color: var(--ink-sub); font-size: 16px; }
.kb-board a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 500; }
.kb-board li { transition: background-color .2s; }
.kb-board a { transition: color .2s; }
.kb-board a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.kb-board .n { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 11px/1 var(--font-sans); }
.kb-board time { flex: none; color: var(--ink-sub); font-size: 16px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .kb-board { padding: 4px 20px; } .kb-board li { flex-wrap: wrap; gap: 4px 12px; } .kb-board a { flex-basis: 100%; order: 3; white-space: normal; font-size: 16px; } .kb-board .cat, .kb-board time { font-size: 14px; } }

/* 라벨 배지: 연한 채움의 알약 */
.kb-tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--accent); font: 600 14px/1.4 var(--font-sans); }

/* 입력 항목 */
.kb-field { display: grid; gap: 8px; }
.kb-field__label { font: 700 16px/1.45 var(--font-sans); color: var(--ink); }
.kb-field__req { color: var(--accent); margin-left: 2px; }
.kb-field__help { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.kb-field__error { font-size: 14px; line-height: 1.5; color: var(--danger); }
.kb-input, .kb-select, .kb-textarea { width: 100%; min-height: 56px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 400 17px/1.5 var(--font-sans); }
.kb-textarea { min-height: 140px; padding: 16px 20px; resize: vertical; }
/* 자리표시자는 예시일 뿐이라 일부러 명암비 기준 밖으로 연하게. 입력값과 헷갈리지 않게 */
.kb-input::placeholder, .kb-textarea::placeholder { color: #c4bab4; opacity: 1; }
.kb-input:focus::placeholder, .kb-textarea:focus::placeholder { color: transparent; }
.kb-input:focus, .kb-select:focus, .kb-textarea:focus { outline: 2px solid var(--brown); outline-offset: -1px; border-color: var(--brown); }
.kb-field--invalid .kb-input, .kb-field--invalid .kb-select, .kb-field--invalid .kb-textarea { border-color: var(--danger); }

/* 칩: 희망시장·제품군·유통채널 선택 */
.kb-chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.kb-chip { position: relative; display: inline-flex; }
.kb-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* 선택 칩: 입력칸(흰 바탕+선+8px)과 겹치지 않게 선 없는 연한 면 + 알약 */
.kb-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--ink-sub); font: 500 16px/1.2 var(--font-sans); transition: background-color .2s, border-color .2s, color .2s, transform .15s; }
.kb-chip:hover span { background: rgba(46, 22, 10, .1); color: var(--brown); }
.kb-chip input:active + span { transform: scale(.96); }
/* 고른 칩: 거점 유형 칩과 같은 연한 코랄 면 + 코랄 선. 어두운 면은 무겁습니다 */
.kb-chip input:checked + span { background: rgba(190, 76, 45, .1); border-color: var(--accent); color: var(--accent-strong); font-weight: 700; }
.kb-chip input[type="checkbox"]:checked + span::before { content: ""; width: 14px; height: 14px; margin: 0 8px 0 -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23963619' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.kb-chip input:focus-visible + span { outline: 2px solid var(--brown); outline-offset: 2px; }

/* 상태 배지: 의미는 항상 글자로 전달합니다 */
.kb-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font: 700 14px/1.4 var(--font-sans); white-space: nowrap; }
.kb-badge--received { background: var(--wash-sand); color: var(--brown); }
.kb-badge--review, .kb-badge--waiting { background: var(--warning-tint); color: var(--warning); }
.kb-badge--confirmed { background: var(--success-tint); color: var(--success); }
.kb-badge--unassigned { background: var(--surface-alt); color: var(--ink-sub); }
.kb-badge--cancelled { background: var(--danger-tint); color: var(--danger); }

/* 거점 카드 */
.kb-hub { position: relative; display: grid; align-content: start; gap: 20px; padding: 32px 32px 48px; border-radius: var(--radius-lg); background: var(--surface-alt); min-width: 0; color: inherit; text-decoration: none; transition: transform .35s var(--ease-out); }
a.kb-hub:hover { transform: translateY(-4px); }
a.kb-hub:hover .kb-more i { background: var(--accent); transform: rotate(45deg); }
.kb-hub--tbd { color: var(--ink-sub); }
.kb-hub__top { display: grid; gap: 6px; }
.kb-hub__name { margin: 0; font: 700 21px/1.35 var(--font-sans); letter-spacing: -0.02em; }
.kb-flag { display: inline-block; width: 28px; height: auto; margin-right: 10px; vertical-align: -2px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.kb-hub__name small { margin-left: 8px; font: 500 16px/1.35 var(--font-sans); color: var(--ink-sub); letter-spacing: -0.01em; }
.kb-hub__meta { margin: 0; font-size: 14px; color: var(--ink-muted); }
.kb-hub__conds { display: grid; gap: 8px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.kb-hub__cond { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: 15px; line-height: 1.55; }
.kb-hub__cond dt { color: var(--ink-muted); }
.kb-hub__cond dd { margin: 0; font-weight: 600; color: var(--ink); padding-right: 36px; }
.kb-hub__cond--hit dd { color: var(--accent); }
.kb-hub__cond--hit dd::after { content: " (일치)"; font-weight: 500; }
.kb-hub--match { border: 2px solid var(--accent); }

/* 단계 표시: 신청 흐름은 실제 순서이므로 번호를 붙입니다 */
/* 단계 표시: 둥근 알약 대신 진흥원 누리집식 윗줄 막대. 지난 단계는 갈색, 현재 단계는 강조색 */
.kb-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: kbstep; }
.kb-steps li { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 3px solid var(--line); counter-increment: kbstep; font: 600 15px/1.3 var(--font-sans); color: var(--ink-muted); }
.kb-steps li::before { content: counter(kbstep, decimal-leading-zero); flex: none; font: 700 14px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.kb-steps li[data-state="done"] { border-top-color: var(--brown); color: var(--ink-sub); }
.kb-steps li[aria-current="step"] { border-top-color: var(--accent); color: var(--ink); font-weight: 700; }
.kb-steps li[aria-current="step"]::before { color: var(--accent); }
@media (max-width: 700px) { .kb-steps li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kb-steps li[aria-current="step"] span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .kb-steps li[aria-current="step"] { grid-column: span 3; } .kb-steps { grid-auto-columns: auto; grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* 안내 상자 */
.kb-notice { display: grid; gap: 4px; padding: 20px 24px; border-radius: var(--radius-md); background: var(--surface-alt); color: var(--ink-sub); font-size: 16px; line-height: 1.6; }
.kb-notice strong { color: var(--ink); font-weight: 700; }
.kb-notice--warning { background: var(--warning-tint); }
.kb-notice--warning strong { color: var(--warning); }
.kb-notice--danger { background: var(--danger-tint); }
.kb-notice--danger strong { color: var(--danger); }

/* 시간표: 거점별 1행, 20분 단위 칸 */
.kb-tt { width: 100%; border-collapse: separate; border-spacing: 4px; font: 500 14px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.kb-tt th { padding: 8px 10px; color: var(--ink-sub); font-weight: 700; text-align: left; white-space: nowrap; }
.kb-tt td { height: 56px; min-width: 104px; padding: 8px 10px; border-radius: var(--radius-sm); vertical-align: top; }
.kb-slot--empty { background: var(--surface-alt); color: var(--ink-muted); }
.kb-slot--held { background: var(--warning-tint); color: var(--warning); font-weight: 600; }
.kb-slot--set { background: var(--wash-sand); color: var(--brown); font-weight: 700; }
.kb-slot--break { background: var(--surface); border: 1px dashed var(--line-strong); color: var(--ink-muted); }

/* 스크롤 등장: 스크립트가 화면 밖 요소에만 is-pre를 붙이고, 화면에 들어오면 뗍니다. 스크립트가 없으면 처음부터 보입니다 */
[data-reveal] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-pre { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  .kb *, .kb *::before, .kb *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  [data-reveal].is-pre { opacity: 1; transform: none; }
  a.kb-card:hover, .kb-hub:hover { transform: none; }
}