/*
 * 문의 폼 공통 부품(2026-10-21). 상담문의·유튜브상위노출·키워드 찾기·해외마케팅 폼이 함께 쓴다.
 *   .cf-modal  : 제출 전 확인 창(sub/contact/contact-form.js가 만든다)
 *   .cf-chip   : 여러 개 고르는 글자 버튼(contact_checks(), 희망 상담 시간)
 *   .cf-group  : 선택 항목 묶음(sub/contact/contact-extra.php: 업체 경험·방문 경로·희망 일시)
 *   .cf-pair   : 업체 경험·방문 경로를 한 줄에 나란히
 *   .cf-select : 하나 고르는 목록(방문 경로)
 *   .cf-other  : "기타" 직접 입력칸
 * 모든 폼이 어두운 배경 위에 있으므로 흰 글자 기준이다. 디자인은 사이트와 같이 각진 모서리와 사이트 레드를 쓴다.
 * 이 파일은 add_stylesheet()로 넣지 않는다(theme/ybusiness_1 헤드에서 빠진다, .claude/rules/10-theme.md). 폼 파일이 <link>를 직접 출력한다.
 */
.cf-group,
.cf-modal {
  --cf-accent: #C23A31;
  --cf-accent-dark: #A52F27;
  --cf-line: rgba(255, 255, 255, 0.5);
  --cf-muted: rgba(255, 255, 255, 0.6);
}

/* 선택 항목 묶음 */
.cf-group { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.cf-group legend { position: static; float: left; width: 100%; margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 500; line-height: 1.5; text-indent: 0; overflow: visible; color: inherit; }
.cf-group legend + * { clear: left; }
.cf-group .contact-req { margin-left: 2px; color: var(--cf-accent); }
.cf-hint { font-weight: 300; font-size: 14px; color: var(--cf-muted); }

/* 라디오(하나만 고름): 글자 버튼 모양. 선택하면 빨간 배경 */
.cf-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-radios > span { position: relative; display: inline-flex; }
.cf-radios input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cf-radios label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--cf-line); font-size: 15px; line-height: 1.3; color: #FFFFFF; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.cf-radios label:hover { border-color: #FFFFFF; }
.cf-radios input:checked + label { border-color: var(--cf-accent); background: var(--cf-accent); font-weight: 600; }
.cf-radios input:focus-visible + label { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* 업체 경험 + 방문 경로를 한 줄에 나란히(sub/contact/contact-extra.php). 폭이 좁으면 위아래로 쌓인다 */
.cf-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 24px; align-items: start; }
/* select 쪽 제목은 legend가 아닌 label이라 legend와 같은 글자 모양·아래 간격을 준다(legend는 float라 margin과 gap이 겹쳐 20px) */
.cf-group__title { display: block; margin: 0 0 10px;font-size: 16px; font-weight: 500; line-height: 1.5; color: inherit; }

/* 하나 고르는 목록(select, 방문 경로). 높이·테두리는 라디오 글자 버튼과 맞춘다 */
.cf-group .cf-select { width: 100%; height: 44px; margin: 0; padding: 0 44px 0 16px; border: 1px solid var(--cf-line); border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat transparent; font: inherit; font-size: 15px; color: #FFFFFF; color-scheme: dark; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; }
.cf-group .cf-select:hover { border-color: #FFFFFF; }
.cf-group .cf-select:focus { outline: 0; border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
/* 아직 고르지 않았을 때(안내 문구)는 흐린 글자 */
.cf-group .cf-select:has(option[value=""]:checked) { color: var(--cf-muted); }
/* 목록을 펼쳤을 때 글자가 흰 바탕에 묻히지 않게 option 색을 정한다(윈도 크롬은 select 바탕을 그대로 쓰지 않는다) */
.cf-select option { background: #1E1F23; color: #FFFFFF; }

/* "기타" 직접 입력칸. 테마의 input[type=text]보다 우선하도록 .cf-group을 붙인다(상담문의 폼은 style.css의 .sub-02-04-02 .cf-other) */
.cf-group .cf-other { width: 100%; height: auto; min-height: 46px; margin: 0; padding: 0 16px; border: 1px solid var(--cf-line); border-radius: 0; background: transparent; font: inherit; font-size: 16px; color: #FFFFFF; transition: border-color 0.2s, box-shadow 0.2s; }
.cf-other[hidden], .cf-group .cf-other[hidden] { display: none; }
.cf-group .cf-other::placeholder { color: rgba(255, 255, 255, 0.4); }
/* 테마 style.css의 input[type=text]:focus가 테두리·그림자를 !important로 지우므로 같은 강도로 되살린다 */
.cf-group .cf-other:focus { outline: 0; border: 1px solid #FFFFFF !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important; }

/* 희망 상담 일시: 날짜 + 시간 칩.
   날짜 칸은 칩 한 칸과 같은 폭·높이(44px, 라디오·select와 같음)로 두어 아래 칩 3칸과 세로선을 맞춘다.
   예전에는 날짜 칸만 240px·46px이라 칩 줄과 끝이 어긋났다(2026-10-21). 폼이 좁으면(480px 이하) 날짜를 줄 전체로 쓴다 */
.cf-when { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
/* 테마의 input[type=date](흰 바탕, theme/ybusiness_1/css/style.css)보다 우선하도록 .cf-when을 붙인다 */
.cf-when .cf-date { width: calc((100% - 16px) / 3); max-width: none; height: auto; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--cf-line); border-radius: 0; background: transparent; font: inherit; font-size: 15px; color: #FFFFFF; color-scheme: dark; transition: border-color 0.2s, box-shadow 0.2s; }
@container (max-width: 480px) {
  .cf-when .cf-date { width: 100%; }
}
.cf-when .cf-date:focus { outline: 0; border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }

/* 여러 개 고르는 글자 버튼(희망 상담 시간). 고르면 빨간 배경에 체크 표시 */
.cf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cf-chip { position: relative; display: block; margin: 0; cursor: pointer; }
.cf-chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cf-chip span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 1px solid var(--cf-line, rgba(255, 255, 255, 0.5)); font-size: 15px; line-height: 1.3; color: #FFFFFF; white-space: nowrap; transition: border-color 0.2s, background-color 0.2s; }
.cf-chip:hover span { border-color: #FFFFFF; }
.cf-chip input:checked + span { border-color: #C23A31; background: #C23A31; font-weight: 600; }
.cf-chip input:checked + span::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg); }
.cf-chip input:focus-visible + span { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (min-width: 768px) {
  .cf-chips--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 제출 전 확인 창 */
.cf-modal-open, .cf-modal-open body { overflow: hidden; }
.cf-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.72); animation: cf-fade 0.2s ease-out; }
.cf-modal__box { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px 28px 24px; border-top: 3px solid var(--cf-accent); background: #1E1F23; color: #FFFFFF; font-family: inherit; text-align: left; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: cf-rise 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cf-modal__title { margin: 0 0 6px; font-size: 21px; font-weight: 700; line-height: 1.4; color: #FFFFFF; }
.cf-modal__desc { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--cf-muted); }
.cf-modal__list { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0 0 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 15px; line-height: 1.5; }
.cf-modal__list dt, .cf-modal__list dd { margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.cf-modal__list dt { padding-right: 16px; color: var(--cf-muted); white-space: nowrap; }
.cf-modal__list dd { color: #FFFFFF; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cf-modal__btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.cf-modal__btns button { min-height: 52px; margin: 0; padding: 0 12px; border-radius: 0; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.cf-modal__back { border: 1px solid var(--cf-line); background: transparent; color: #FFFFFF; }
.cf-modal__back:hover { border-color: #FFFFFF; }
.cf-modal__ok { border: 1px solid var(--cf-accent); background: var(--cf-accent); color: #FFFFFF; }
.cf-modal__ok:hover { border-color: var(--cf-accent-dark); background: var(--cf-accent-dark); }
.cf-modal__btns button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@keyframes cf-fade { from { opacity: 0; } }
@keyframes cf-rise { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 480px) {
  .cf-modal { align-items: flex-end; padding: 0; }
  .cf-modal__box { max-width: none; max-height: 90vh; padding: 28px 20px 20px; }
  .cf-modal__list { grid-template-columns: 1fr; }
  .cf-modal__list dt { padding-bottom: 0; border-bottom: 0; }
  .cf-modal__list dd { padding-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-modal, .cf-modal__box { animation: none; }
}