/* =========================================================
   user.forms.css — btn / field / phone / checkbox / radio / helper / link-row / action-bar + legacy compat
   ========================================================= */

/* ===== Component: .btn =================================== */
.btn {
	display:inline-flex; align-items:center; justify-content:center;
	width:100%; height:54px; padding:0 16px;
	border:1px solid transparent; border-radius:var(--unc-radius-md);
	font-size:1rem; font-weight:700; line-height:1; letter-spacing:0;
	cursor:pointer; user-select:none;
	transition: background-color .15s var(--unc-ease), color .15s var(--unc-ease),
	            border-color .15s var(--unc-ease), box-shadow .15s var(--unc-ease),
	            transform .15s var(--unc-ease);
	text-decoration:none; -webkit-tap-highlight-color:transparent;
}
/* base.css 의 a:link {color:inherit} 가 specificity (0,1,1) 로 .btn--primary 의 #fff 를 이기는
   문제 해결 — a/button 타입 셀렉터 동반해 specificity (0,1,1) 동률 + 후순위 우선.
   WCAG: brand #24D22C 위 흰 텍스트(2.03:1) → 검정 텍스트로 변경(13:1). 로고/배지 색은 유지. */
.btn--primary,
a.btn--primary,
button.btn--primary {
	background:var(--unc-brand); color:var(--unc-ink);
}
.btn--primary:hover {
	background:var(--unc-brand-strong);
	color:#fff;
	box-shadow:0 10px 22px rgba(36,210,44,0.22);
	transform:translateY(-1px);
}
.btn--primary:focus-visible {
	outline:none;
	box-shadow:0 0 0 3px rgba(36,210,44,0.28);
}
.btn--secondary {
	background:#F2F2F2; color:var(--unc-ink);
}
.btn--secondary:hover {
	background:#E8EAE8;
}
/* .is-disabled: 시각적 비활성 (클릭은 가능 — 검증 트리거용)
   .btn:disabled (HTML attribute): 실제 비활성 — 클릭 불가
   WCAG: pale-green bg + dark ink text = 6.4:1 */
.btn.is-disabled,
a.btn.is-disabled,
button.btn.is-disabled {
	background:#9BC09D; color:var(--unc-ink);
	box-shadow:none; transform:none;
}
.btn--secondary.is-disabled {
	background:#F2F2F2; color:var(--unc-muted-2);
}
/* hover: 살짝 어둡게 — 클릭 가능 신호 */
.btn--primary.is-disabled:hover { background:#8AB28D; }
.btn--secondary.is-disabled:hover { background:#E8EAE8; }
.btn:disabled {
	background:#9BC09D; color:var(--unc-ink);
	pointer-events:none; cursor:not-allowed;
	box-shadow:none; transform:none;
}
.btn--secondary:disabled {
	background:#F2F2F2; color:var(--unc-muted-2);
}


/* ===== Component: .field (input wrapper) ================ */
/* 우선순위 (낮음 → 높음): default → is-filled → :focus-within → --error */
.field {
	display:flex; flex-wrap:wrap; align-items:center;
	background:#fff; border:1px solid var(--unc-line-2); border-radius:var(--unc-radius-md);
	transition: border-color .15s var(--unc-ease), box-shadow .15s var(--unc-ease),
	            background-color .15s var(--unc-ease);
}
.field__input {
	flex:1; min-width:0;
	height:54px; padding:0 16px;
	background:transparent; border:0; outline:none;
	font-size:1rem; font-weight:500; color:var(--unc-ink); letter-spacing:0;
}
.field__input::placeholder {
	color:var(--unc-muted-2); font-weight:500;
}
.field--gray {
	background:var(--unc-bg-soft); border-color:var(--unc-bg-soft);
}
.field.is-filled {
	border-color:var(--unc-ink);
}
.field:focus-within,
.field.is-focus {
	border-color:var(--unc-brand);
	box-shadow:0 0 0 3px rgba(36,210,44,0.18);
}
.field--gray:focus-within,
.field--gray.is-focus {
	background:#fff;
}
.field--error,
.field.is-error {
	border-color:var(--unc-danger);
	background:var(--unc-danger-soft);
}
.field--error:focus-within,
.field.is-error:focus-within {
	box-shadow:0 0 0 3px rgba(220,38,38,0.16);
}

/* hover: 빈 상태 — border 살짝 진해짐 */
.field:not(:focus-within):not(.field--error):not(.field--disabled):hover {
	border-color:var(--unc-muted-2);
}
/* hover: filled 상태 — brand 색 살짝 강조 */
.field.is-filled:not(:focus-within):not(.field--error):not(.field--disabled):hover {
	border-color:var(--unc-brand-strong);
	box-shadow:0 0 0 3px rgba(36,210,44,0.12);
}
/* hover: gray 변형 — 흰 배경으로 전환 */
.field--gray:not(:focus-within):not(.field--error):not(.field--disabled):hover {
	background:#fff; border-color:var(--unc-muted-2);
}


/* ===== Component: .field--disabled / center input ====== */
.field--disabled {
	background:#F2F2F2; border-color:#F2F2F2;
	pointer-events:none;
}
.field--disabled .field__input {
	color:var(--unc-muted); font-weight:600;
}
.field__input--center { text-align:center; }


/* ===== Component: .phone-input (3분할) ================= */
.phone-input {
	display:flex; align-items:center; gap:8px;
}
.phone-input__country { width:80px; flex-shrink:0; }
.phone-input__prefix  { width:80px; flex-shrink:0; }
.phone-input__number  { flex:1; min-width:0; }
@media (max-width:991px) {
	.phone-input { gap:6px; }
	.phone-input__country,
	.phone-input__prefix { width:72px; }
}


/* ===== Component: .checkbox ============================ */
.checkbox {
	position:relative; overflow:hidden;
}
/* input 은 wrapper 전체를 덮어 어디 클릭해도 토글.
   링크는 z-index:2 로 위에 올려서 별도 클릭. */
.checkbox__input {
	position:absolute; left:0; top:0; width:100%; height:100%;
	margin:0; padding:0; opacity:0; cursor:pointer; z-index:1;
}
.checkbox__label {
	display:flex; align-items:flex-start; gap:8px; cursor:pointer;
}
.checkbox__visual {
	flex-shrink:0; width:20px; height:20px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2D7D3' stroke-width='1.5'><rect x='3' y='3' width='18' height='18' rx='5'/></svg>") no-repeat center / contain;
	transition: transform .15s var(--unc-ease);
}
.checkbox__input:checked ~ .checkbox__label .checkbox__visual {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='%2324D22C'/><polyline points='8 12.5 11 15.5 16.5 9.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.checkbox:hover .checkbox__visual { transform:scale(1.05); }
.checkbox__input:focus-visible ~ .checkbox__label .checkbox__visual {
	box-shadow:0 0 0 3px rgba(36,210,44,0.25);
	border-radius:6px;
}
.checkbox__text {
	flex:1; min-width:0;
	font-size:0.875rem; font-weight:500; line-height:1.5;
	color:var(--unc-ink-2); letter-spacing:0;
}
.checkbox__link {
	position:relative; z-index:2;
	display:inline; padding:0; background:none; border:0;
	font:inherit; font-weight:600; color:var(--unc-ink);
	text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.checkbox__link:hover { color:var(--unc-brand-strong); }

/* 필수 / 선택 표시 */
.checkbox__required {
	display:inline-block; margin-right:2px;
	color:var(--unc-danger); font-style:normal; font-weight:700;
	font-size:0.875rem; line-height:1.5;
	vertical-align:middle;
	position:relative; top:1px;
}
.checkbox__optional {
	display:inline-block; margin-right:4px; padding:3px 8px;
	background:var(--unc-line); color:var(--unc-muted);
	font-size:0.6875rem; font-weight:600; line-height:1.2; font-style:normal; border-radius:4px;
	vertical-align:middle;
}

/* 미체크 상태에서 submit 시 에러 — 보더 + label 색 */
.checkbox.checkbox--error .checkbox__visual {
	border-color:var(--unc-danger);
	background:var(--unc-danger-soft);
}
.checkbox.checkbox--error .checkbox__text {
	color:var(--unc-danger);
}


/* ===== Component: .radio (search-widget 선호 차량) ===== */
.radio {
	position:relative; overflow:hidden; min-width:0; border-radius:12px;
	isolation:isolate; contain:paint;
}
.radio__input {
	position:absolute; left:0; top:0; width:100%; height:100%;
	margin:0; padding:0; opacity:0; cursor:pointer; z-index:1;
}
.radio__label {
	position:relative; display:flex; align-items:center; gap:10px; min-width:0;
	padding:10px 12px;
	border:1px solid var(--unc-line-2); border-radius:12px;
	background-clip:padding-box; -webkit-background-clip:padding-box;
	cursor:pointer; transition: border-color .15s var(--unc-ease), background-color .15s var(--unc-ease);
}
.radio__visual {
	flex-shrink:0; width:18px; height:18px; border-radius:50%;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2D7D3' stroke-width='1.5'><circle cx='12' cy='12' r='9'/></svg>") no-repeat center / contain;
}
.radio__input:checked ~ .radio__label .radio__visual {
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='%2324D22C'/><circle cx='12' cy='12' r='3.5' fill='white'/></svg>") no-repeat center / contain;
}
.radio__input:checked ~ .radio__label {
	border-color:var(--unc-brand);
	background:var(--unc-brand-soft);
}
.radio__text {
	flex:1; min-width:0;
	display:flex; align-items:center; gap:8px;
	font-size:0.875rem; font-weight:500; color:var(--unc-ink-2); letter-spacing:0;
}
.radio__icon { color:var(--unc-ink-2); flex-shrink:0; }
.radio__input:checked ~ .radio__label .radio__icon { color:var(--unc-brand-strong); }
.radio:hover .radio__label { border-color:var(--unc-muted-2); }
.radio__input:focus-visible ~ .radio__label {
	box-shadow:0 0 0 3px rgba(36,210,44,0.25);
}


/* ===== Component: .text-box (result 페이지 본문) ====== */
.text-box {}
.text-box__paragraph {
	font-size:1rem; font-weight:500; line-height:1.65;
	color:var(--unc-ink-2); letter-spacing:0;
	word-break:keep-all;
}
.text-box__paragraph + .text-box__paragraph { margin-top:8px; }
.text-box__paragraph a {
	font:inherit; color:var(--unc-brand-strong);
	text-decoration:underline; text-underline-offset:2px;
}


/* ===== Component: .helper (form messages) =============== */
.helper {
	margin-top:8px; padding:0 4px;
	font-size:0.75rem; font-weight:500; line-height:1.5; letter-spacing:0;
	color:var(--unc-muted-2); word-break:keep-all;
}
.helper--error {
	display:flex; align-items:flex-start; gap:4px;
	color:var(--unc-danger);
}
.helper--error::before {
	content:""; flex-shrink:0;
	width:14px; height:14px; margin-top:2px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC2626'><circle cx='12' cy='12' r='10'/><path d='M11 7h2v7h-2zM11 16h2v2h-2z' fill='white'/></svg>") no-repeat center / contain;
}
/* 빈 helper 는 자리 차지 안 함 (validation 시 동적으로 채워짐) */
.helper:empty { display:none; }


/* ===== Component: .link-row ============================ */
.link-row {
	display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
	gap:0; margin-top:8px;
}
.link-row__item {
	font-size:0.875rem; font-weight:500; color:var(--unc-muted);
	text-decoration:none;
}
.link-row__item:hover { color:var(--unc-ink-2); text-decoration:underline; }
.link-row > * + *::before {
	display:inline-block; content:"";
	width:1px; height:10px; margin:0 8px; background:var(--unc-muted-2);
	vertical-align:middle;
}


/* ===== Component: .action-bar ========================== */
/* 데스크탑: 폼 흐름 안에서 자연스럽게.
   모바일(<=991px): 화면 하단 고정. */
.action-bar {
	display:flex; flex-direction:column; gap:12px;
	margin-top:40px;
}
/* result 페이지처럼 본문과 액션 사이 여백 크게 */
.action-bar--spaced { margin-top:96px; }
@media (max-width:991px) {
	.action-bar,
	.action-bar--spaced {
		position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom));
		transform:translateX(-50%);
		width:100%; max-width:430px; padding:0 20px; margin-top:0;
		z-index:1000;
	}
}


/* =========================================================
   LEGACY COMPAT LAYER — user.js / common.js / search-widget.js 가
   여전히 .input-box / .select-box / .check-box / .write-box 등 클래스를
   사용. user-renewal.css 의존을 끊기 위해 BEM 토큰으로 동일 시각 재작성.
   ========================================================= */

/* .write-box — 라벨+input 그룹 */
.write-box { display:flex; flex-direction:column; gap:8px; }
.write-box > strong {
	font-size:0.8125rem; font-weight:600; color:var(--unc-ink-2); letter-spacing:0;
}

/* .input-box — input wrapper (auth 의 .field 와 동일 디자인) */
.input-box {
	display:flex; flex-wrap:wrap; align-items:center;
	background:#fff; border:1px solid var(--unc-line-2); border-radius:12px;
	transition: border-color .15s var(--unc-ease), background-color .15s var(--unc-ease), box-shadow .15s var(--unc-ease);
}
.input-box input {
	flex:1; min-width:0; height:50px; padding:0 16px;
	background:transparent; border:0; outline:none;
	font-size:0.9375rem; font-weight:500; color:var(--unc-ink); letter-spacing:0;
}
.input-box input::placeholder { color:var(--unc-muted-2); font-weight:500; }
.input-box textarea {
	flex:1; min-width:0; width:100%; min-height:96px; padding:14px 16px;
	background:transparent; border:0; outline:none; resize:vertical;
	font-family:inherit; font-size:0.9375rem; font-weight:500; line-height:1.55;
	color:var(--unc-ink); letter-spacing:0;
	box-sizing:border-box;
}
.input-box textarea::placeholder { color:var(--unc-muted-2); font-weight:500; }
.input-box.gray { background:var(--unc-bg-soft); border-color:var(--unc-bg-soft); }
.input-box.active { background:#fff; border-color:var(--unc-ink); }
.input-box.gray.active { background:#fff; border-color:var(--unc-ink); }
.input-box.focus,
.input-box:focus-within {
	background:#fff; border-color:var(--unc-brand);
	box-shadow:0 0 0 3px rgba(36,210,44,0.18);
}
.input-box.error { border-color:var(--unc-danger); background:var(--unc-danger-soft); }
.input-box.readonly { background:var(--unc-bg-soft); border-color:var(--unc-bg-soft); }
.input-box.readonly input { color:var(--unc-muted); }
.input-box.disabled { background:#F2F2F2; border-color:#F2F2F2; pointer-events:none; }
.input-box.disabled input { color:var(--unc-muted-2); }

/* iOS Safari는 포커스되는 입력 글자가 16px 미만이면 화면을 자동 확대한다.
   모바일 입력 계열은 rem 기준 1rem 이상을 강제해 폼마다 발생하던 확대를 막는다. */
@media (max-width:600px) {
	body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
	body select,
	body textarea {
		font-size:1rem !important;
	}
}

/* .input-link-box — a 태그 wrapper (지점 선택, 캘린더 등) */
.input-link-box {
	position:relative; display:flex; flex-wrap:wrap; align-items:center; height:50px;
	border-radius:12px; background:#fff; border:1px solid var(--unc-line-2);
	transition: border-color .15s var(--unc-ease), background-color .15s var(--unc-ease);
}
.input-link-box a {
	flex:1; min-width:0; height:50px; padding:0 16px; line-height:50px;
	color:var(--unc-muted-2); text-decoration:none;
	font-size:0.9375rem; font-weight:500;
	overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.input-link-box.gray { background:var(--unc-bg-soft); border-color:var(--unc-bg-soft); }
.input-link-box.active { background:#fff; border-color:var(--unc-ink); }
.input-link-box.gray.active { background:#fff; border-color:var(--unc-ink); }
.input-link-box.active a { color:var(--unc-ink); font-weight:600; }

/* .check-box — checkbox wrapper (legacy 호환) */
.check-box {
	position:relative; overflow:hidden; display:flex; align-items:flex-start;
}
.check-box input[type="checkbox"],
.check-box input[type="radio"] {
	position:absolute; left:0; top:0; width:100%; height:100%;
	opacity:0; cursor:pointer; margin:0; padding:0; z-index:1;
}
.check-box label {
	display:flex; align-items:flex-start; gap:8px; cursor:pointer; width:100%;
}
.check-box label::before {
	content:""; flex-shrink:0; width:20px; height:20px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2D7D3' stroke-width='1.5'><rect x='3' y='3' width='18' height='18' rx='5'/></svg>") no-repeat center / contain;
	transition: transform .15s var(--unc-ease);
}
.check-box input:checked ~ label::before {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='5' fill='%2324D22C'/><polyline points='8 12.5 11 15.5 16.5 9.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.check-box label .label-text {
	flex:1; min-width:0;
	font-size:0.875rem; font-weight:500; line-height:1.5;
	color:var(--unc-ink-2); letter-spacing:0;
}
.check-box label .label-link {
	position:relative; z-index:2;
	display:inline; padding:0; background:none; border:0;
	font:inherit; font-weight:600; color:var(--unc-ink);
	text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.check-box label .label-link:hover { color:var(--unc-brand-strong); }

/* .radio-box — radio wrapper */
.radio-box {
	position:relative; overflow:hidden; min-width:0; border-radius:12px;
	isolation:isolate; contain:paint;
}
.radio-box input[type="radio"] {
	position:absolute; left:0; top:0; width:100%; height:100%;
	opacity:0; cursor:pointer; margin:0; padding:0; z-index:1;
}
.radio-box label {
	position:relative; display:flex; align-items:center; gap:10px; min-width:0; cursor:pointer;
	padding:10px 12px; border:1px solid var(--unc-line-2); border-radius:12px;
	background-clip:padding-box; -webkit-background-clip:padding-box;
	transition: border-color .15s var(--unc-ease), background-color .15s var(--unc-ease);
}
.radio-box label::before {
	content:""; flex-shrink:0; width:18px; height:18px; border-radius:50%;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2D7D3' stroke-width='1.5'><circle cx='12' cy='12' r='9'/></svg>") no-repeat center / contain;
}
.radio-box input:checked ~ label {
	border-color:var(--unc-brand); background:var(--unc-brand-soft);
}
.radio-box input:checked ~ label::before {
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='%2324D22C'/><circle cx='12' cy='12' r='3.5' fill='white'/></svg>") no-repeat center / contain;
}
.radio-box label .label-text {
	flex:1; min-width:0;
	font-size:0.875rem; font-weight:500; color:var(--unc-ink-2);
}

/* .select-box — dropdown (지점 선택, 시간 선택 등) */
.select-box {
	position:relative;
}
.select-box > button {
	display:flex; align-items:center; justify-content:space-between;
	width:100%; height:50px; padding:0 16px;
	background:#fff; border:1px solid var(--unc-line-2); border-radius:12px;
	font-size:0.9375rem; font-weight:500; color:var(--unc-muted-2);
	cursor:pointer; text-align:left;
	transition: border-color .15s var(--unc-ease), background-color .15s var(--unc-ease);
}
.select-box > button::after {
	content:""; flex-shrink:0; width:18px; height:18px; margin-left:8px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 18px;
	transition: transform .15s var(--unc-ease);
}
.select-box.active > button,
.select-box.focus > button { background:#fff; border-color:var(--unc-ink); color:var(--unc-ink); font-weight:600; }
.select-box.focus > button::after { transform:rotate(180deg); }
.select-box.gray > button {
	background:var(--unc-bg-soft); border-color:var(--unc-bg-soft);
	height:50px;  /* 도시 검색 wrapper 외형 50 과 통일 */
}
.select-box.gray.active > button { background:#fff; border-color:var(--unc-ink); }
.select-box.gray.focus > button {
	background:#fff; border-color:var(--unc-brand);
	box-shadow:0 0 0 3px rgba(36,210,44,0.18);
}
.select-box > div {
	display:none;
	position:absolute; left:0; top:calc(100% + 6px); right:0;
	background:#fff; border:1px solid var(--unc-line);
	border-radius:12px; box-shadow:var(--unc-shadow-md);
	z-index:20; max-height:240px; overflow-y:auto;
}
.select-box.focus > div { display:block; }
.select-box dl { padding:6px 0; margin:0; }
.select-box dl dd { margin:0; padding:0; }
.select-box dl dd a {
	display:block; padding:12px 16px;
	font-size:0.875rem; color:var(--unc-ink-2); text-decoration:none;
}
.select-box dl dd:hover { background:var(--unc-bg-soft); }
.select-box dl dd:hover a { color:var(--unc-brand-strong); }

/* 항공사 검색형 셀렉트 — 전체 목록 탐색과 코드/이름 자동완성을 한 필드에서 제공한다. */
.airline-combobox { position:relative; width:100%; }
.airline-combobox__control { position:relative; }
.airline-combobox__input {
	display:block; width:100%; height:50px; padding:0 48px 0 16px;
	background:#fff; border:1px solid var(--unc-line-2); border-radius:12px;
	font-size:0.9375rem; font-weight:500; color:var(--unc-ink);
	outline:0; appearance:none; -webkit-appearance:none;
	transition:border-color .15s var(--unc-ease), box-shadow .15s var(--unc-ease);
}
.airline-combobox__input::-webkit-search-cancel-button { display:none; }
.airline-combobox__input::placeholder { color:var(--unc-muted-2); opacity:1; }
/* 값이 선택된 항공사 칸은 옆의 번호 칸과 같은 "입력됨" 테두리를 쓴다. 회색으로
   남으면 채워 넣고도 비어 보인다(리뉴얼 검토 6차 2번). */
.airline-combobox.is-filled .airline-combobox__input { border-color:var(--unc-ink); }
.airline-combobox__input:focus,
.airline-combobox.is-open .airline-combobox__input {
	border-color:var(--unc-brand);
	box-shadow:0 0 0 3px rgba(36,210,44,0.18);
}
.airline-combobox__toggle {
	position:absolute; top:0; right:0; width:48px; height:50px;
	border:0; border-radius:0 12px 12px 0; background:transparent; cursor:pointer;
}
.airline-combobox__toggle::before {
	content:""; position:absolute; top:50%; left:50%; width:18px; height:18px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / 18px;
	transform:translate(-50%, -50%); transition:transform .15s var(--unc-ease);
}
.airline-combobox.is-open .airline-combobox__toggle::before { transform:translate(-50%, -50%) rotate(180deg); }
.airline-combobox__panel {
	position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:40;
	max-height:280px; overflow:auto; overscroll-behavior:contain;
	background:#fff; border:1px solid var(--unc-line); border-radius:12px;
	box-shadow:var(--unc-shadow-md); -webkit-overflow-scrolling:touch;
}
.airline-combobox__panel[hidden] { display:none; }
.airline-combobox__list { margin:0; padding:6px 0; list-style:none; }
.airline-combobox__option {
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	width:100%; min-height:44px; padding:10px 16px;
	border:0; background:#fff; color:var(--unc-ink-2); text-align:left; cursor:pointer;
}
.airline-combobox__option span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.airline-combobox__option small { flex:none; color:var(--unc-muted-2); font-size:0.8125rem; font-weight:700; }
.airline-combobox__option:hover,
.airline-combobox__option:focus,
.airline-combobox__option.is-active,
.airline-combobox__option[aria-selected="true"] { background:var(--unc-bg-soft); color:var(--unc-brand-strong); outline:0; }
.airline-combobox__empty { margin:0; padding:18px 16px; color:var(--unc-muted-2); font-size:0.875rem; text-align:center; }

@media (max-width:767px) {
	.airline-combobox__panel { max-height:min(15rem, 42vh); }
	.airline-combobox__input { font-size:1rem; }
}

/* .button-box — 버튼 그룹 (.btn 이미 BEM, btn-active/btn-lightgray 호환) */
.button-box {
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
}
.button-box .btn {
	width:100%; flex:1; min-width:0;
}
.btn-active,
a.btn-active,
button.btn-active { background:var(--unc-brand); color:var(--unc-ink); }
.btn-active:hover { background:var(--unc-brand-strong); color:#fff; }
.btn-active.off { background:#9BC09D; color:var(--unc-ink); pointer-events:auto; }
.btn-lightgray { background:#F2F2F2; color:var(--unc-ink); }
.btn-lightgray:hover { background:#E8EAE8; }

/* .icon-box, .icon (legacy 호환 단순 처리) */
.icon-box { display:inline-flex; align-items:center; }
.icon { font-size:0; display:inline-block; }

/* .text-box, .message-box (이미 부분 정의됨, 추가) */
.message-box { padding:8px 4px; }
.message-box p { font-size:0.75rem; line-height:1.5; color:var(--unc-muted-2); }
.message-box p.error { color:var(--unc-danger); }

/* .line-box (구분선) */
.line-box { height:1px; background:var(--unc-line); }