/* ===== 개원문의 (/open-inquiry) =====
 * 시안: 가맹문의.png (2880 폭 = 1440 의 2배 — 수치는 절반으로 옮김). 화면 문구는 '가맹' 대신 '개원'.
 * 래퍼가 .branches-page.open-page 라 branches.css 의 색 변수(--bp-*)·헤더 높이(--bp-header)·box-sizing 을 이어 쓰고,
 * 여기 규칙은 모두 .open-page 로 스코핑한다(사이트 CSS 와 같이 로드되므로 래퍼 없이 쓰면 헤더·푸터를 건드린다).
 */
.open-page {
    --op-accent: var(--bp-accent);
    --op-accent-dark: #651226;
    --op-dark: #2a2424;
}

/* ---------- 공통 ---------- */
.open-page .op-kicker {
    margin: 0;
    color: var(--op-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}
.open-page .op-title {
    margin: 8px 0 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.open-page .op-lead {
    margin: 16px 0 0;
    color: var(--bp-mute);
    font-size: 17px;
    line-height: 1.6;
}
.open-page .op-num {
    display: block;
    color: var(--op-accent);
    font-size: 13px;
    font-weight: 700;
}
.open-page .op-sec { padding: 130px 0; background: #fff; }
.open-page .op-sec--tight { padding-top: 0; }   /* 앞 섹션(흰 배경)과 이어지는 흰 섹션 */
.open-page .op-sec--beige { background: var(--bp-beige); }
.open-page .op-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 36px;
    border-radius: 4px;
    background: var(--op-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}
.open-page .op-btn:hover { background: var(--op-accent-dark); }

/* ---------- 히어로 ---------- */
.open-page .op-hero {
    padding: calc(var(--bp-header) + 150px) 0 150px;
    background: var(--bp-beige);
    text-align: center;
}
.open-page .op-hero__title {
    margin: 14px 0 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.open-page .op-hero__lead {
    margin: 22px 0 0;
    color: var(--bp-mute);
    font-size: 18px;
    line-height: 1.6;
    text-wrap: pretty;
}
.open-page .op-hero .op-btn { margin-top: 38px; }

/* ---------- 본사가 맡는 다섯 가지 ---------- */
.open-page .op-five {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 25px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.open-page .op-five li {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 28px 28px 30px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
}
.open-page .op-five__img {
    display: block;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 200 / 140;
    margin: 22px auto 24px;
}
.open-page .op-five strong {
    margin-top: auto;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.open-page .op-five p { margin: 8px 0 0; color: var(--bp-mute); font-size: 15px; }

/* ---------- 하루 타임라인 (원장 · 본사) ----------
 * 각 칸 = 시간대 라벨 · 점(가로선 위) · 사진 · 글. 가로선은 칸마다 그려 칸 사이 간격까지 이어 붙인다 */
.open-page .op-tl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 25px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.open-page .op-tl__item { position: relative; min-width: 0; }
.open-page .op-tl__when {
    position: relative;
    margin: 0;
    padding-bottom: 34px;
    color: var(--op-accent);
    font-size: 15px;
    font-weight: 700;
}
.open-page .op-tl__when::before {   /* 가로선: 칸 폭 + 칸 사이 간격 */
    content: "";
    position: absolute;
    left: 0;
    right: -25px;
    bottom: 13px;
    height: 1px;
    background: #ddd;
}
.open-page .op-tl__item:last-child .op-tl__when::before { right: 0; }
.open-page .op-tl__when::after {    /* 점 */
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--op-accent);
}
.open-page .op-tl__img {
    display: block;
    width: 100%;
    aspect-ratio: 581 / 359;
    border-radius: 8px;
    object-fit: cover;
}
.open-page .op-tl .op-num { margin-top: 34px; }
.open-page .op-tl__title {
    display: block;
    margin-top: 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.open-page .op-tl__desc {
    margin: 14px 0 0;
    color: var(--bp-mute);
    font-size: 15px;
    line-height: 1.7;
    text-wrap: pretty;
}
/* 본사의 하루: 사진 아래 흰 카드 */
.open-page .op-tl--card .op-tl__item { display: flex; flex-direction: column; }
.open-page .op-tl__card {
    flex: 1;
    margin-top: 24px;
    padding: 30px 28px;
    border-radius: 8px;
    background: #fff;
}
.open-page .op-tl__tag { color: var(--op-accent); font-size: 13px; font-weight: 700; }
.open-page .op-tl--card .op-tl__title { margin-top: 8px; }

/* ---------- 세 가지 약속 ---------- */
.open-page .op-promise {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.open-page .op-promise li {
    display: flex;
    flex-direction: column;
    padding: 40px 40px 42px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
}
.open-page .op-promise i { color: var(--op-accent); font-size: 28px; }
.open-page .op-promise__no { margin-top: 26px; color: var(--op-accent); font-size: 13px; font-weight: 700; }
.open-page .op-promise strong { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.open-page .op-promise p { margin: 18px 0 0; color: var(--bp-mute); font-size: 15px; line-height: 1.6; }

/* ---------- 미팅에서 안내하는 것 · 진행 순서 ---------- */
.open-page .op-locked {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}
.open-page .op-locked li {
    display: flex;
    flex-direction: column;
    min-height: 155px;
    padding: 30px 30px 32px;
    border-radius: 8px;
    background: #fff;
}
.open-page .op-locked i { color: var(--op-accent); font-size: 22px; }
.open-page .op-locked strong { margin-top: auto; font-size: 18px; font-weight: 700; }
.open-page .op-steps__label {
    margin: 70px 0 0;
    color: var(--op-accent);
    font-size: 16px;
    font-weight: 700;
}
.open-page .op-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.open-page .op-steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 105px;
    padding: 20px 24px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
}
.open-page .op-steps li + li::before {   /* 단계 사이 › */
    content: "›";
    position: absolute;
    left: -21px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 24px;
    line-height: 1;
}
.open-page .op-steps__no {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3e7ea;
    color: var(--op-accent);
    font-size: 16px;
    font-weight: 700;
}
.open-page .op-steps strong { display: block; font-size: 18px; font-weight: 700; }
.open-page .op-steps p { margin: 6px 0 0; color: var(--bp-mute); font-size: 14px; }

/* ---------- 신청 폼 (어두운 띠) ---------- */
.open-page .op-apply {
    padding: 130px 0 120px;
    background: var(--op-dark);
    color: #fff;
    scroll-margin-top: var(--bp-header);   /* 히어로 버튼(#op-apply)으로 왔을 때 헤더에 가리지 않게 */
}
.open-page .op-apply > .v2Container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 50px;
}
.open-page .op-apply__title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.open-page .op-apply__lead { margin: 30px 0 0; color: #ddd; font-size: 17px; line-height: 1.7; }

.open-page .op-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 25px;
    align-content: start;
}
.open-page .op-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.open-page .op-field label { color: #fff; font-size: 14px; font-weight: 500; }
.open-page .op-field input:not([type=radio]):not([type=checkbox]),
.open-page .op-field select {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    color: var(--bp-ink);
    font-family: inherit;
    font-size: 16px;   /* 16px 미만이면 iOS 가 입력 시 화면을 확대한다 */
    outline: 0;
}
.open-page .op-field--full { grid-column: 1 / -1; }
.open-page .op-field label em,
.open-page .op-field legend em { color: #ff9fb1; font-style: normal; }   /* 필수 표시 */
.open-page .op-field textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    color: var(--bp-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
    outline: 0;
}
.open-page .op-field textarea:focus { border-color: var(--op-accent); box-shadow: 0 0 0 2px rgba(125, 23, 48, .45); }
.open-page .op-field input::placeholder,
.open-page .op-field textarea::placeholder { color: #8a8a8a; }
/* 의사자격증: 보유 / 미보유 (구형 가맹문의와 같은 항목) */
.open-page .op-license {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    border: 0;
}
.open-page .op-license legend {
    float: left;          /* legend 를 같은 줄에 두기 위함 */
    margin-right: 8px;
    padding: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.open-page .op-field input:not([type=radio]):not([type=checkbox]):focus,
.open-page .op-field select:focus { border-color: var(--op-accent); box-shadow: 0 0 0 2px rgba(125, 23, 48, .45); }
.open-page .op-field select {
    appearance: none;
    padding-right: 44px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center;
    cursor: pointer;
}
.open-page .op-field select:invalid,
.open-page .op-field select option[value=""] { color: #8a8a8a; }

.open-page .op-agree {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}
.open-page .op-check {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e6e6e6;
    font-size: 15px;
    cursor: pointer;
}
.open-page .op-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--op-accent);
    cursor: pointer;
}
.open-page .op-form__error {
    grid-column: 1 / -1;
    margin: 0;
    color: #ffb4c0;
    font-size: 14px;
}
.open-page .op-submit {
    grid-column: 1 / -1;
    height: 60px;
    margin-top: 20px;
    border: 0;
    border-radius: 4px;
    background: var(--op-accent);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.open-page .op-submit:hover { background: var(--op-accent-dark); }

/* ---------- 태블릿 ---------- */
@media (min-width: 768px) and (max-width: 1439px) {
    .open-page .v2Container { padding: 0 24px; }   /* v2Container 는 이 폭에서 좌우 여백이 0 */
}
@media (max-width: 1199px) {
    .open-page .op-sec { padding: 96px 0; }
    .open-page .op-sec--tight { padding-top: 0; }
    .open-page .op-hero { padding: calc(var(--bp-header) + 100px) 0 110px; }
    .open-page .op-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .open-page .op-tl,
    .open-page .op-locked { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 25px; }
    .open-page .op-tl__item:nth-child(2n) .op-tl__when::before { right: 0; }   /* 줄 끝 칸은 선을 칸 안에서 끝낸다 */
    .open-page .op-apply > .v2Container { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 767px) {
    .open-page .op-title,
    .open-page .op-apply__title { font-size: 24px; }
    .open-page .op-lead { margin-top: 12px; font-size: 15px; }
    .open-page .op-sec { padding: 56px 0; }
    .open-page .op-sec--tight { padding-top: 0; }
    .open-page .op-hero { padding: calc(var(--bp-header) + 52px) 0 56px; }
    .open-page .op-hero__title { font-size: 28px; }
    .open-page .op-hero__lead { margin-top: 14px; font-size: 15px; }
    .open-page .op-hero .op-btn { width: 100%; margin-top: 28px; }

    .open-page .op-five,
    .open-page .op-promise,
    .open-page .op-locked { margin-top: 24px; }
    /* 다섯 가지: 그림 왼쪽 · 글 오른쪽의 낮은 줄 (세로로 길게 쌓이지 않게) */
    .open-page .op-five { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .open-page .op-five li {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 16px;
        min-height: 0;
        padding: 14px 16px;
    }
    .open-page .op-five__img { grid-row: 1 / 4; align-self: center; margin: 0; }
    .open-page .op-five .op-num { align-self: end; }
    .open-page .op-five strong { margin-top: 2px; font-size: 17px; }
    .open-page .op-five p { margin-top: 2px; font-size: 14px; }

    /* 하루 타임라인: 4칸을 옆으로 밀어 본다(다음 칸 끝이 보여 넘길 수 있음을 알린다). 좌우는 화면 끝까지 */
    .open-page .op-tl {
        display: flex;
        gap: 12px;
        margin: 28px -16px 0;
        padding: 0 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .open-page .op-tl::-webkit-scrollbar { display: none; }
    .open-page .op-tl__item { flex: 0 0 78%; scroll-snap-align: start; }
    .open-page .op-tl__when { padding-bottom: 26px; font-size: 14px; }
    /* 칸 사이 간격까지 선을 잇는다 (:nth-child(n) — 태블릿의 '2칸마다 끊기' 규칙보다 우선) */
    .open-page .op-tl__item:nth-child(n) .op-tl__when::before { right: -12px; }
    .open-page .op-tl__item:nth-child(n):last-child .op-tl__when::before { right: 0; }
    .open-page .op-tl .op-num { margin-top: 16px; }
    .open-page .op-tl__title { font-size: 18px; }
    .open-page .op-tl__desc { margin-top: 6px; font-size: 14px; }
    .open-page .op-tl__card { margin-top: 12px; padding: 18px 18px; }

    /* 약속: 아이콘 왼쪽 */
    .open-page .op-promise { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .open-page .op-promise li {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 14px;
        padding: 20px 18px;
    }
    .open-page .op-promise i { grid-row: 1 / 4; font-size: 26px; }
    .open-page .op-promise__no { margin-top: 0; }
    .open-page .op-promise strong { margin-top: 2px; font-size: 17px; }
    .open-page .op-promise p { margin-top: 6px; font-size: 14px; }

    /* 미팅에서 안내하는 것: 자물쇠 왼쪽의 낮은 칸 */
    .open-page .op-locked { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .open-page .op-locked li {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-height: 72px;
        padding: 14px 14px;
    }
    .open-page .op-locked i { flex: none; font-size: 18px; }
    .open-page .op-locked strong { margin-top: 0; font-size: 14px; line-height: 1.4; }
    .open-page .op-steps__label { margin-top: 36px; }
    .open-page .op-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .open-page .op-steps li { min-height: 0; gap: 14px; padding: 12px 16px; }
    .open-page .op-steps__no { width: 34px; height: 34px; font-size: 15px; }
    .open-page .op-steps strong { font-size: 16px; }
    .open-page .op-steps p { margin-top: 2px; font-size: 13px; }
    .open-page .op-steps li + li::before { display: none; }

    .open-page .op-apply { padding: 56px 0 64px; }
    .open-page .op-apply__lead { margin-top: 14px; font-size: 15px; }
    /* 폼: 두 칸씩 (의사자격증 · 문의 내용 · 동의는 한 줄 전체) */
    .open-page .op-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .open-page .op-field { gap: 6px; }
    .open-page .op-field label { font-size: 13px; }
    .open-page .op-field input:not([type=radio]):not([type=checkbox]),
    .open-page .op-field select { height: 46px; padding: 0 12px; }
    .open-page .op-field textarea { min-height: 100px; padding: 12px; }
    .open-page .op-license legend { font-size: 13px; }
    .open-page .op-field select { padding-right: 34px; background-position: right 12px center; }
    .open-page .op-check { font-size: 14px; }
}