/* =========================================================
   최초 등록 ① 이동 보조기기·탑승 방식 (탑승정보_v12_01_이동보조기기)
   ========================================================= */

/* 이동 보조기기 타일 */
.device-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.device-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
}

.device-tile--text {
    min-height: var(--button-height-lg);
    padding-block: 0;
}

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

.device-tile__img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.device-tile__label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-15);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-21);
    text-align: center;
}

.device-tile:has(input:focus-visible) {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* 선택된 타일 */
.device-tile:has(input:checked) {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-bg);
    padding: calc(var(--space-16) - 1px) calc(var(--space-10) - 1px);
}

.device-tile--text:has(input:checked) { padding-block: 0; }

.device-tile:has(input:checked) .device-tile__label {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.device-tile:has(input:checked) .device-tile__label::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    /* icon/checkbox--checked (20) */
    background-color: currentColor;
    -webkit-mask: url("../image/checkbox--checked.svg") center / contain no-repeat;
    mask: url("../image/checkbox--checked.svg") center / contain no-repeat;
}

/* 휠체어 탑승 안내 */
.boarding-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-14) var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-bg-gray);
}

.boarding-guide__img {
    width: 200px;
    height: 133px;
    object-fit: cover;
}

.boarding-guide__title {
    align-self: stretch;
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.boarding-guide__desc {
    align-self: stretch;
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.boarding-guide__link {
    align-self: stretch;
    padding-top: var(--space-4);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-20);
    color: var(--color-primary);
}

.boarding-guide__saved {
    align-self: stretch;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--fs-14);
    line-height: var(--lh-20);
}

button.boarding-guide__link { text-align: left; }

/* 다른 탑승 방법 시트 (탑승정보_v12_01s_다른탑승방법_시트) */
.other-sheet { gap: var(--space-12); padding-bottom: var(--space-24); }

.other-sheet__title {
    font-size: var(--fs-22);
    font-weight: var(--font-weight-bold);
    line-height: calc(30px * var(--font-scale));
}

.other-sheet .modal-sheet__desc { margin-top: 0; }

.other-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.other-sheet__actions .btn--text { font-weight: var(--font-weight-bold); }

.other-sheet__foot {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
    text-align: center;
}

/* 휠체어 정보 추가 시트 · 방법 목록 */
.wc-ways { padding: 0 var(--space-16); }

.wc-ways li + li { border-top: 1px solid var(--color-divider); }

.wc-ways__row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-14) 0;
}

.wc-ways__row .icon { color: var(--color-text-sub); }

/* 질문 제목 (legend) */
.section-question {
    float: left;
    width: 100%;
    margin-bottom: var(--space-12);
}

.section-question span { display: block; }

.section-question + .card { clear: both; }

.link-row .icon { color: var(--color-text-sub); }

/* =========================================================
   최초 등록 ② 연락 방법·필요한 도움 (탑승정보_v12_02_연락과요청)
   ========================================================= */
/* legend가 있는 묶음은 flex gap 대신 legend 아래 여백으로 간격을 둠 */
fieldset.section { display: block; }

.section-legend,
.section-question { padding: 0; }

.section-legend {
    float: left;
    width: 100%;
    margin-bottom: var(--space-12);
}

.section-legend + .card { clear: both; }

.choice-list__desc b { font-weight: var(--font-weight-bold); }

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    width: 100%;
    padding: var(--space-14) var(--space-16);
    text-align: left;
}

.toggle-row[aria-expanded="true"] {
    padding: 13px 15px;
    border: 2px solid var(--color-primary);
    background: var(--color-primary-bg);
}

.toggle-row[aria-expanded="true"] .icon { transform: rotate(180deg); }

.toggle-row__label {
    flex: 1;
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.request-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* =========================================================
   최초 등록 ③ 저장 완료 (탑승정보_v12_03_저장완료)
   ========================================================= */
.done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--color-success-bg);
    color: var(--color-success-icon);
}

.info-list {
    margin: 0;
    padding: 0 var(--space-16);
}

.info-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) 0;
}

.info-list__row + .info-list__row { border-top: 1px solid var(--color-divider); }

.info-list dt {
    flex-shrink: 0;
    width: 72px;
    font-size: var(--fs-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.info-list dd {
    flex: 1;
    margin: 0;
    font-size: var(--fs-15);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-21);
}

.done-note {
    flex: 1;
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.guardian-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.guardian-hint__link {
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}